[{"data":1,"prerenderedAt":13088},["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,1261,1575,2124,7226,7520,8145,9370,9764,10414,11120,11597,12399,12712],{"id":526,"title":41,"body":527,"description":523,"extension":513,"links":514,"meta":1258,"navigation":516,"path":42,"seo":1259,"stem":43,"__hash__":1260},"docs/2.api/1.abstractions/align.md",{"type":501,"value":528,"toc":1253},[529,535,544,548,842,846,849,1103,1107,1249],[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,1086],"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,1081,1084],{},[874,1077,1078],{},[540,1079,1080],{},"onAlign",[874,1082,1083],{},"Callback that fires when updating, after measurement.",[874,1085],{},[856,1087,1088,1092,1098],{},[874,1089,1090],{},[540,1091,542],{},[874,1093,1094,1095,1097],{},"If set, component will only update when ",[540,1096,542],{},"'s value changes. If unset, component will update every frame.",[874,1099,1100],{},[540,1101,1102],{},"undefined",[545,1104,1106],{"id":1105},"aligncallbackoptions","AlignCallbackOptions",[549,1108,1111],{"className":1109,"code":1110,"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,1112,1113,1128,1134,1145,1150,1159,1169,1178,1187,1197,1207,1217,1226,1235,1244],{"__ignoreMap":508},[560,1114,1115,1118,1121,1125],{"class":562,"line":509},[560,1116,1117],{"class":599},"export",[560,1119,1120],{"class":573}," interface",[560,1122,1124],{"class":1123},"sBMFI"," AlignCallbackOptions",[560,1126,1127],{"class":565}," {\n",[560,1129,1130],{"class":562,"line":510},[560,1131,1133],{"class":1132},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[560,1135,1136,1139,1142],{"class":562,"line":631},[560,1137,1138],{"class":569},"  parent",[560,1140,1141],{"class":565},":",[560,1143,1144],{"class":1123}," Object3D\n",[560,1146,1147],{"class":562,"line":652},[560,1148,1149],{"class":1132},"  /** The outmost container group of the \u003CAlign/> component */\n",[560,1151,1152,1155,1157],{"class":562,"line":662},[560,1153,1154],{"class":569},"  container",[560,1156,1141],{"class":565},[560,1158,1144],{"class":1123},[560,1160,1161,1164,1166],{"class":562,"line":668},[560,1162,1163],{"class":569},"  width",[560,1165,1141],{"class":565},[560,1167,1168],{"class":1123}," number\n",[560,1170,1171,1174,1176],{"class":562,"line":678},[560,1172,1173],{"class":569},"  height",[560,1175,1141],{"class":565},[560,1177,1168],{"class":1123},[560,1179,1180,1183,1185],{"class":562,"line":701},[560,1181,1182],{"class":569},"  depth",[560,1184,1141],{"class":565},[560,1186,1168],{"class":1123},[560,1188,1189,1192,1194],{"class":562,"line":713},[560,1190,1191],{"class":569},"  boundingBox",[560,1193,1141],{"class":565},[560,1195,1196],{"class":1123}," Box3\n",[560,1198,1199,1202,1204],{"class":562,"line":723},[560,1200,1201],{"class":569},"  boundingSphere",[560,1203,1141],{"class":565},[560,1205,1206],{"class":1123}," Sphere\n",[560,1208,1209,1212,1214],{"class":562,"line":728},[560,1210,1211],{"class":569},"  center",[560,1213,1141],{"class":565},[560,1215,1216],{"class":1123}," Vector3\n",[560,1218,1219,1222,1224],{"class":562,"line":750},[560,1220,1221],{"class":569},"  verticalAlignment",[560,1223,1141],{"class":565},[560,1225,1168],{"class":1123},[560,1227,1228,1231,1233],{"class":562,"line":554},[560,1229,1230],{"class":569},"  horizontalAlignment",[560,1232,1141],{"class":565},[560,1234,1168],{"class":1123},[560,1236,1237,1240,1242],{"class":562,"line":773},[560,1238,1239],{"class":569},"  depthAlignment",[560,1241,1141],{"class":565},[560,1243,1168],{"class":1123},[560,1245,1246],{"class":562,"line":784},[560,1247,1248],{"class":565},"}\n",[1250,1251,1252],"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":1254},[1255,1256,1257],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":1105,"depth":510,"text":1106},{},{"title":41,"description":523},"2TNilwT1BiWwam7y0leE_VBx46wcrMjjhvIXPvGWsNg",{"id":1262,"title":45,"body":1263,"description":1571,"extension":513,"links":514,"meta":1572,"navigation":516,"path":46,"seo":1573,"stem":47,"__hash__":1574},"docs/2.api/1.abstractions/billboard.md",{"type":501,"value":1264,"toc":1567},[1265,1270,1277,1279,1488,1490,1564],[530,1266,1267],{},[1268,1269],"abstractions-billboard",{},[536,1271,1272,1273,1276],{},"Adds a ",[540,1274,1275],{},"THREE.Group"," that always faces the camera.",[545,1278,15],{"id":547},[549,1280,1283],{"className":551,"code":1281,"highlights":1282,"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,1284,1285,1305,1334,1352,1360,1364,1372,1391,1399,1419,1428,1447,1455,1463,1472,1480],{"__ignoreMap":508},[560,1286,1287,1289,1291,1293,1295,1297,1299,1301,1303],{"class":562,"line":509},[560,1288,566],{"class":565},[560,1290,570],{"class":569},[560,1292,574],{"class":573},[560,1294,577],{"class":573},[560,1296,580],{"class":565},[560,1298,583],{"class":565},[560,1300,587],{"class":586},[560,1302,583],{"class":565},[560,1304,592],{"class":565},[560,1306,1308,1310,1312,1315,1317,1320,1322,1324,1326,1328,1330,1332],{"class":1307,"line":510},[562,596],[560,1309,600],{"class":599},[560,1311,603],{"class":565},[560,1313,1314],{"class":606}," Billboard",[560,1316,610],{"class":565},[560,1318,1319],{"class":606}," Box",[560,1321,610],{"class":565},[560,1323,613],{"class":606},[560,1325,616],{"class":565},[560,1327,619],{"class":599},[560,1329,622],{"class":565},[560,1331,625],{"class":586},[560,1333,628],{"class":565},[560,1335,1336,1338,1340,1342,1344,1346,1348,1350],{"class":562,"line":631},[560,1337,600],{"class":599},[560,1339,603],{"class":565},[560,1341,638],{"class":606},[560,1343,616],{"class":565},[560,1345,619],{"class":599},[560,1347,622],{"class":565},[560,1349,647],{"class":586},[560,1351,628],{"class":565},[560,1353,1354,1356,1358],{"class":562,"line":652},[560,1355,655],{"class":565},[560,1357,570],{"class":569},[560,1359,592],{"class":565},[560,1361,1362],{"class":562,"line":662},[560,1363,665],{"emptyLinePlaceholder":516},[560,1365,1366,1368,1370],{"class":562,"line":668},[560,1367,566],{"class":565},[560,1369,673],{"class":569},[560,1371,592],{"class":565},[560,1373,1374,1376,1378,1380,1382,1384,1387,1389],{"class":562,"line":678},[560,1375,681],{"class":565},[560,1377,684],{"class":569},[560,1379,687],{"class":573},[560,1381,580],{"class":565},[560,1383,583],{"class":565},[560,1385,1386],{"class":586},"#333333",[560,1388,583],{"class":565},[560,1390,592],{"class":565},[560,1392,1393,1395,1397],{"class":562,"line":701},[560,1394,704],{"class":565},[560,1396,718],{"class":569},[560,1398,710],{"class":565},[560,1400,1401,1403,1405,1408,1410,1412,1415,1417],{"class":562,"line":713},[560,1402,704],{"class":565},[560,1404,707],{"class":569},[560,1406,1407],{"class":573}," :position",[560,1409,580],{"class":565},[560,1411,583],{"class":565},[560,1413,1414],{"class":586},"[0, 0, 10]",[560,1416,583],{"class":565},[560,1418,710],{"class":565},[560,1420,1422,1424,1426],{"class":1421,"line":723},[562,596],[560,1423,704],{"class":565},[560,1425,45],{"class":569},[560,1427,592],{"class":565},[560,1429,1430,1432,1434,1436,1438,1440,1443,1445],{"class":562,"line":728},[560,1431,776],{"class":565},[560,1433,217],{"class":569},[560,1435,736],{"class":573},[560,1437,580],{"class":565},[560,1439,583],{"class":565},[560,1441,1442],{"class":586},"[0.5, 0.5, 0.001]",[560,1444,583],{"class":565},[560,1446,592],{"class":565},[560,1448,1449,1451,1453],{"class":562,"line":750},[560,1450,787],{"class":565},[560,1452,800],{"class":569},[560,1454,710],{"class":565},[560,1456,1457,1459,1461],{"class":562,"line":554},[560,1458,808],{"class":565},[560,1460,217],{"class":569},[560,1462,592],{"class":565},[560,1464,1466,1468,1470],{"class":1465,"line":773},[562,596],[560,1467,818],{"class":565},[560,1469,45],{"class":569},[560,1471,592],{"class":565},[560,1473,1474,1476,1478],{"class":562,"line":784},[560,1475,828],{"class":565},[560,1477,684],{"class":569},[560,1479,592],{"class":565},[560,1481,1482,1484,1486],{"class":562,"line":795},[560,1483,655],{"class":565},[560,1485,673],{"class":569},[560,1487,592],{"class":565},[545,1489,845],{"id":844},[850,1491,1492,1502],{},[853,1493,1494],{},[856,1495,1496,1498,1500],{},[859,1497,861],{"align":920},[859,1499,864],{"align":920},[859,1501,867],{},[869,1503,1504,1522,1536,1550],{},[856,1505,1506,1511,1518],{},[874,1507,1508],{"align":920},[540,1509,1510],{},"autoUpdate",[874,1512,1513,1514,1517],{"align":920},"Whether the ",[540,1515,1516],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[874,1519,1520],{},[540,1521,884],{},[856,1523,1524,1529,1532],{},[874,1525,1526],{"align":920},[540,1527,1528],{},"lockX",[874,1530,1531],{"align":920},"Whether to lock the x-axis.",[874,1533,1534],{},[540,1535,894],{},[856,1537,1538,1543,1546],{},[874,1539,1540],{"align":920},[540,1541,1542],{},"lockY",[874,1544,1545],{"align":920},"Whether to lock the y-axis.",[874,1547,1548],{},[540,1549,894],{},[856,1551,1552,1557,1560],{},[874,1553,1554],{"align":920},[540,1555,1556],{},"lockZ",[874,1558,1559],{"align":920},"Whether to lock the z-axis.",[874,1561,1562],{},[540,1563,894],{},[1250,1565,1566],{},"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":1568},[1569,1570],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Make objects always face the camera automatically.",{},{"title":45,"description":1571},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1576,"title":49,"body":1577,"description":2120,"extension":513,"links":514,"meta":2121,"navigation":516,"path":50,"seo":2122,"stem":51,"__hash__":2123},"docs/2.api/1.abstractions/camera-shake.md",{"type":501,"value":1578,"toc":2116},[1579,1584,1638,1640,1926,1965,1967,2114],[530,1580,1581],{},[1582,1583],"abstractions-camera-shake",{},[536,1585,1586,1589,1590,1594,1595,1599,1600,1603,1604,1594,1607,1610,1611,1614,1615,1594,1618,1594,1621,1624,1625,1628,1629,1069],{},[540,1587,1588],{},"\u003CCameraShake />"," is a component that adds ",[1591,1592,1593],"strong",{},"natural",", ",[1596,1597,1598],"em",{},"noise-driven motion"," to the ",[1591,1601,1602],{},"active camera",".\nIt offers ",[1591,1605,1606],{},"per-axis control",[1591,1608,1609],{},"adjustable intensity",", and ",[1596,1612,1613],{},"optional decay"," — perfect for ",[1596,1616,1617],{},"handheld feel",[1596,1619,1620],{},"footsteps",[1596,1622,1623],{},"impacts",", or ",[1596,1626,1627],{},"engine rumble"," — and is based on the ",[1063,1630,1633,1634,1637],{"href":1631,"rel":1632},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1067],"Drei ",[540,1635,1636],{},"CameraShake"," component",[545,1639,15],{"id":547},[549,1641,1644],{"className":551,"code":1642,"highlights":1643,"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,1645,1646,1666,1690,1708,1716,1720,1728,1746,1765,1776,1780,1835,1853,1873,1893,1901,1910,1918],{"__ignoreMap":508},[560,1647,1648,1650,1652,1654,1656,1658,1660,1662,1664],{"class":562,"line":509},[560,1649,566],{"class":565},[560,1651,570],{"class":569},[560,1653,574],{"class":573},[560,1655,577],{"class":573},[560,1657,580],{"class":565},[560,1659,583],{"class":565},[560,1661,587],{"class":586},[560,1663,583],{"class":565},[560,1665,592],{"class":565},[560,1667,1669,1671,1673,1676,1678,1680,1682,1684,1686,1688],{"class":1668,"line":510},[562,596],[560,1670,600],{"class":599},[560,1672,603],{"class":565},[560,1674,1675],{"class":606}," CameraShake",[560,1677,610],{"class":565},[560,1679,613],{"class":606},[560,1681,616],{"class":565},[560,1683,619],{"class":599},[560,1685,622],{"class":565},[560,1687,625],{"class":586},[560,1689,628],{"class":565},[560,1691,1692,1694,1696,1698,1700,1702,1704,1706],{"class":562,"line":631},[560,1693,600],{"class":599},[560,1695,603],{"class":565},[560,1697,638],{"class":606},[560,1699,616],{"class":565},[560,1701,619],{"class":599},[560,1703,622],{"class":565},[560,1705,647],{"class":586},[560,1707,628],{"class":565},[560,1709,1710,1712,1714],{"class":562,"line":652},[560,1711,655],{"class":565},[560,1713,570],{"class":569},[560,1715,592],{"class":565},[560,1717,1718],{"class":562,"line":662},[560,1719,665],{"emptyLinePlaceholder":516},[560,1721,1722,1724,1726],{"class":562,"line":668},[560,1723,566],{"class":565},[560,1725,673],{"class":569},[560,1727,592],{"class":565},[560,1729,1730,1732,1734,1736,1738,1740,1742,1744],{"class":562,"line":678},[560,1731,681],{"class":565},[560,1733,684],{"class":569},[560,1735,687],{"class":573},[560,1737,580],{"class":565},[560,1739,583],{"class":565},[560,1741,694],{"class":586},[560,1743,583],{"class":565},[560,1745,592],{"class":565},[560,1747,1748,1750,1752,1754,1756,1758,1761,1763],{"class":562,"line":701},[560,1749,704],{"class":565},[560,1751,707],{"class":569},[560,1753,1407],{"class":573},[560,1755,580],{"class":565},[560,1757,583],{"class":565},[560,1759,1760],{"class":586},"[0, 2, 6]",[560,1762,583],{"class":565},[560,1764,710],{"class":565},[560,1766,1767,1769,1771,1774],{"class":562,"line":713},[560,1768,704],{"class":565},[560,1770,718],{"class":569},[560,1772,1773],{"class":573}," make-default",[560,1775,710],{"class":565},[560,1777,1778],{"class":562,"line":723},[560,1779,665],{"emptyLinePlaceholder":516},[560,1781,1783,1785,1787,1790,1792,1794,1797,1799,1802,1804,1806,1809,1811,1814,1816,1818,1820,1822,1825,1827,1829,1831,1833],{"class":1782,"line":728},[562,596],[560,1784,704],{"class":565},[560,1786,1636],{"class":569},[560,1788,1789],{"class":573}," :intensity",[560,1791,580],{"class":565},[560,1793,583],{"class":565},[560,1795,1796],{"class":586},"1",[560,1798,583],{"class":565},[560,1800,1801],{"class":573}," :max-yaw",[560,1803,580],{"class":565},[560,1805,583],{"class":565},[560,1807,1808],{"class":586},"0.01",[560,1810,583],{"class":565},[560,1812,1813],{"class":573}," :max-pitch",[560,1815,580],{"class":565},[560,1817,583],{"class":565},[560,1819,1808],{"class":586},[560,1821,583],{"class":565},[560,1823,1824],{"class":573}," :max-roll",[560,1826,580],{"class":565},[560,1828,583],{"class":565},[560,1830,1808],{"class":586},[560,1832,583],{"class":565},[560,1834,710],{"class":565},[560,1836,1837,1839,1841,1843,1845,1847,1849,1851],{"class":562,"line":750},[560,1838,776],{"class":565},[560,1840,733],{"class":569},[560,1842,736],{"class":573},[560,1844,580],{"class":565},[560,1846,583],{"class":565},[560,1848,743],{"class":586},[560,1850,583],{"class":565},[560,1852,710],{"class":565},[560,1854,1855,1857,1859,1862,1864,1866,1869,1871],{"class":562,"line":554},[560,1856,776],{"class":565},[560,1858,779],{"class":569},[560,1860,1861],{"class":573}," :position-y",[560,1863,580],{"class":565},[560,1865,583],{"class":565},[560,1867,1868],{"class":586},"0.5",[560,1870,583],{"class":565},[560,1872,592],{"class":565},[560,1874,1875,1877,1879,1882,1884,1886,1889,1891],{"class":562,"line":773},[560,1876,787],{"class":565},[560,1878,790],{"class":569},[560,1880,1881],{"class":573}," :args",[560,1883,580],{"class":565},[560,1885,583],{"class":565},[560,1887,1888],{"class":586},"[1, 1, 1]",[560,1890,583],{"class":565},[560,1892,710],{"class":565},[560,1894,1895,1897,1899],{"class":562,"line":784},[560,1896,787],{"class":565},[560,1898,800],{"class":569},[560,1900,710],{"class":565},[560,1902,1904,1906,1908],{"class":1903,"line":795},[562,596],[560,1905,808],{"class":565},[560,1907,779],{"class":569},[560,1909,592],{"class":565},[560,1911,1912,1914,1916],{"class":562,"line":805},[560,1913,828],{"class":565},[560,1915,684],{"class":569},[560,1917,592],{"class":565},[560,1919,1920,1922,1924],{"class":562,"line":555},[560,1921,655],{"class":565},[560,1923,673],{"class":569},[560,1925,592],{"class":565},[1927,1928,1929,1950],"prose-note",{},[536,1930,1931,1933,1934,1939,1940,1943,1944,1949],{},[540,1932,1588],{}," is fully compatible with ",[1591,1935,1936],{},[540,1937,1938],{},"\u003COrbitControls />",".\nTo ensure it works ",[1596,1941,1942],{},"as expected",", make sure to add the ",[1591,1945,1946],{},[540,1947,1948],{},"make-default"," prop:",[549,1951,1953],{"className":551,"code":1952,"language":556,"meta":508,"style":508},"\u003COrbitControls make-default />\n",[540,1954,1955],{"__ignoreMap":508},[560,1956,1957,1959,1961,1963],{"class":562,"line":509},[560,1958,566],{"class":565},[560,1960,718],{"class":569},[560,1962,1773],{"class":573},[560,1964,710],{"class":565},[545,1966,845],{"id":844},[850,1968,1969,1979],{},[853,1970,1971],{},[856,1972,1973,1975,1977],{},[859,1974,861],{},[859,1976,864],{},[859,1978,867],{},[869,1980,1981,1995,2011,2029,2043,2057,2071,2086,2100],{},[856,1982,1983,1988,1991],{},[874,1984,1985],{},[540,1986,1987],{},"intensity",[874,1989,1990],{},"The intensity of the shake (0–1).",[874,1992,1993],{},[540,1994,1796],{},[856,1996,1997,2002,2007],{},[874,1998,1999],{},[540,2000,2001],{},"decay",[874,2003,881,2004,2006],{},[540,2005,884],{},", intensity decays over time.",[874,2008,2009],{},[540,2010,894],{},[856,2012,2013,2018,2024],{},[874,2014,2015],{},[540,2016,2017],{},"decayRate",[874,2019,2020,2021,2023],{},"How fast intensity changes when ",[540,2022,2001],{}," is enabled.",[874,2025,2026],{},[540,2027,2028],{},"0.65",[856,2030,2031,2036,2039],{},[874,2032,2033],{},[540,2034,2035],{},"maxYaw",[874,2037,2038],{},"Maximum yaw angle in radians.",[874,2040,2041],{},[540,2042,1808],{},[856,2044,2045,2050,2053],{},[874,2046,2047],{},[540,2048,2049],{},"maxPitch",[874,2051,2052],{},"Maximum pitch angle in radians.",[874,2054,2055],{},[540,2056,1808],{},[856,2058,2059,2064,2067],{},[874,2060,2061],{},[540,2062,2063],{},"maxRoll",[874,2065,2066],{},"Maximum roll angle in radians.",[874,2068,2069],{},[540,2070,1808],{},[856,2072,2073,2078,2081],{},[874,2074,2075],{},[540,2076,2077],{},"yawFrequency",[874,2079,2080],{},"Frequency of yaw oscillation.",[874,2082,2083],{},[540,2084,2085],{},"0.1",[856,2087,2088,2093,2096],{},[874,2089,2090],{},[540,2091,2092],{},"pitchFrequency",[874,2094,2095],{},"Frequency of pitch oscillation.",[874,2097,2098],{},[540,2099,2085],{},[856,2101,2102,2107,2110],{},[874,2103,2104],{},[540,2105,2106],{},"rollFrequency",[874,2108,2109],{},"Frequency of roll oscillation.",[874,2111,2112],{},[540,2113,2085],{},[1250,2115,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":2117},[2118,2119],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2120},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2125,"title":53,"body":2126,"description":7222,"extension":513,"links":514,"meta":7223,"navigation":516,"path":54,"seo":7224,"stem":55,"__hash__":7225},"docs/2.api/1.abstractions/decal.md",{"type":501,"value":2127,"toc":7187},[2128,2134,2216,2222,2224,2239,2694,2710,2714,2725,2888,2905,2908,2922,2977,3002,3006,3019,3024,3090,3097,3103,3120,3208,3213,3227,3302,3972,3977,4017,4030,4093,4096,4106,4192,4199,4219,4229,4232,4429,4441,4449,4464,4782,4786,4810,5173,5188,5208,5212,5228,5465,5471,5667,5673,5808,5817,5824,5880,5981,5986,6132,6137,6178,6182,6238,6242,6313,6317,6395,6402,6417,6458,6507,7184],[536,2129,2130,2133],{},[540,2131,2132],{},"\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.",[2135,2136,2137,2149,2162,2176,2183,2194,2206],"ul",{},[2138,2139,2140,2141,2144,2145,2148],"li",{},"🎨 Drop-in ",[1591,2142,2143],{},"editor UI"," via ",[540,2146,2147],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2138,2150,2151,2152,2144,2155,2161],{},"🛠 ",[1591,2153,2154],{},"Programmatic API",[1063,2156,2158],{"href":2157},"#programmatic-api-usedecaleditor",[540,2159,2160],{},"useDecalEditor()"," for custom panels and automation.",[2138,2163,2164,2165,2168,2169,2172,2173,1069],{},"🖼️ ",[1591,2166,2167],{},"Texture palette"," — pass an array of ",[540,2170,2171],{},"Texture"," to ",[540,2174,2175],{},":map",[2138,2177,2178,2179,2182],{},"🧩 ",[1591,2180,2181],{},"Custom material"," — override the default via the slot.",[2138,2184,2185,2186,2189,2190,2193],{},"💾 ",[1591,2187,2188],{},"Lossless JSON"," — ",[540,2191,2192],{},"v-model:data"," round-trips to plain JSON.",[2138,2195,2196,2197,2200,2201,2205],{},"⚡ ",[1591,2198,2199],{},"BVH-accelerated"," — auto-detected via ",[1063,2202,2203],{"href":332},[540,2204,331],{},"; 10–100× faster on dense meshes.",[2138,2207,2208,2209,2189,2212,2215],{},"📚 ",[1591,2210,2211],{},"Per-mesh stacking",[540,2213,2214],{},"zIndex"," with automatic polygon-offset.",[2217,2218,2219],"scene-wrapper",{},[2220,2221],"abstractions-decal",{},[545,2223,15],{"id":547},[536,2225,2226,2227,2229,2230,2233,2234,2236,2237,1069],{},"The minimal setup is a ",[540,2228,2132],{}," placed as a child of any ",[540,2231,2232],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[540,2235,2192],{}," and one or\nmore textures via ",[540,2238,2175],{},[549,2240,2242],{"className":551,"code":2241,"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,2243,2244,2264,2292,2310,2329,2333,2371,2375,2389,2394,2411,2439,2462,2488,2499,2515,2520,2525,2533,2537,2545,2554,2574,2583,2592,2601,2623,2667,2676,2685],{"__ignoreMap":508},[560,2245,2246,2248,2250,2252,2254,2256,2258,2260,2262],{"class":562,"line":509},[560,2247,566],{"class":565},[560,2249,570],{"class":569},[560,2251,574],{"class":573},[560,2253,577],{"class":573},[560,2255,580],{"class":565},[560,2257,583],{"class":565},[560,2259,587],{"class":586},[560,2261,583],{"class":565},[560,2263,592],{"class":565},[560,2265,2266,2268,2270,2273,2275,2277,2279,2282,2284,2286,2288,2290],{"class":562,"line":510},[560,2267,600],{"class":599},[560,2269,603],{"class":565},[560,2271,2272],{"class":606}," Decal",[560,2274,610],{"class":565},[560,2276,613],{"class":606},[560,2278,610],{"class":565},[560,2280,2281],{"class":606}," useTexture",[560,2283,616],{"class":565},[560,2285,619],{"class":599},[560,2287,622],{"class":565},[560,2289,625],{"class":586},[560,2291,628],{"class":565},[560,2293,2294,2296,2298,2300,2302,2304,2306,2308],{"class":562,"line":631},[560,2295,600],{"class":599},[560,2297,603],{"class":565},[560,2299,638],{"class":606},[560,2301,616],{"class":565},[560,2303,619],{"class":599},[560,2305,622],{"class":565},[560,2307,647],{"class":586},[560,2309,628],{"class":565},[560,2311,2312,2314,2316,2319,2321,2323,2325,2327],{"class":562,"line":652},[560,2313,600],{"class":599},[560,2315,603],{"class":565},[560,2317,2318],{"class":606}," reactive",[560,2320,616],{"class":565},[560,2322,619],{"class":599},[560,2324,622],{"class":565},[560,2326,556],{"class":586},[560,2328,628],{"class":565},[560,2330,2331],{"class":562,"line":662},[560,2332,665],{"emptyLinePlaceholder":516},[560,2334,2335,2338,2340,2343,2345,2348,2351,2354,2357,2360,2363,2366,2368],{"class":562,"line":668},[560,2336,2337],{"class":573},"const",[560,2339,603],{"class":565},[560,2341,2342],{"class":569}," state",[560,2344,1141],{"class":565},[560,2346,2347],{"class":606}," texture ",[560,2349,2350],{"class":565},"}",[560,2352,2353],{"class":565}," =",[560,2355,2281],{"class":2356},"s2Zo4",[560,2358,2359],{"class":606},"(",[560,2361,2362],{"class":565},"'",[560,2364,2365],{"class":586},"/textures/logo.png",[560,2367,2362],{"class":565},[560,2369,2370],{"class":606},")\n",[560,2372,2373],{"class":562,"line":678},[560,2374,665],{"emptyLinePlaceholder":516},[560,2376,2377,2379,2382,2384,2386],{"class":562,"line":701},[560,2378,2337],{"class":573},[560,2380,2381],{"class":606}," decals ",[560,2383,580],{"class":565},[560,2385,2318],{"class":2356},[560,2387,2388],{"class":606},"([\n",[560,2390,2391],{"class":562,"line":713},[560,2392,2393],{"class":565},"  {\n",[560,2395,2396,2399,2401,2403,2406,2408],{"class":562,"line":723},[560,2397,2398],{"class":569},"    id",[560,2400,1141],{"class":565},[560,2402,622],{"class":565},[560,2404,2405],{"class":586},"logo-1",[560,2407,2362],{"class":565},[560,2409,2410],{"class":565},",\n",[560,2412,2413,2416,2418,2421,2424,2426,2429,2431,2434,2437],{"class":562,"line":728},[560,2414,2415],{"class":569},"    position",[560,2417,1141],{"class":565},[560,2419,2420],{"class":606}," [",[560,2422,888],{"class":2423},"sbssI",[560,2425,610],{"class":565},[560,2427,2428],{"class":2423}," 0",[560,2430,610],{"class":565},[560,2432,2433],{"class":2423}," 0.5",[560,2435,2436],{"class":606},"]",[560,2438,2410],{"class":565},[560,2440,2441,2444,2446,2448,2450,2452,2454,2456,2458,2460],{"class":562,"line":750},[560,2442,2443],{"class":569},"    orientation",[560,2445,1141],{"class":565},[560,2447,2420],{"class":606},[560,2449,888],{"class":2423},[560,2451,610],{"class":565},[560,2453,2428],{"class":2423},[560,2455,610],{"class":565},[560,2457,2428],{"class":2423},[560,2459,2436],{"class":606},[560,2461,2410],{"class":565},[560,2463,2464,2467,2469,2471,2474,2476,2479,2481,2484,2486],{"class":562,"line":554},[560,2465,2466],{"class":569},"    size",[560,2468,1141],{"class":565},[560,2470,2420],{"class":606},[560,2472,2473],{"class":2423},"0.75",[560,2475,610],{"class":565},[560,2477,2478],{"class":2423}," 0.17",[560,2480,610],{"class":565},[560,2482,2483],{"class":2423}," 1",[560,2485,2436],{"class":606},[560,2487,2410],{"class":565},[560,2489,2490,2493,2495,2497],{"class":562,"line":773},[560,2491,2492],{"class":569},"    zIndex",[560,2494,1141],{"class":565},[560,2496,2428],{"class":2423},[560,2498,2410],{"class":565},[560,2500,2501,2504,2506,2508,2511,2513],{"class":562,"line":784},[560,2502,2503],{"class":569},"    map",[560,2505,1141],{"class":565},[560,2507,622],{"class":565},[560,2509,2510],{"class":586},"logo.png",[560,2512,2362],{"class":565},[560,2514,2410],{"class":565},[560,2516,2517],{"class":562,"line":795},[560,2518,2519],{"class":565},"  },\n",[560,2521,2522],{"class":562,"line":805},[560,2523,2524],{"class":606},"])\n",[560,2526,2527,2529,2531],{"class":562,"line":555},[560,2528,655],{"class":565},[560,2530,570],{"class":569},[560,2532,592],{"class":565},[560,2534,2535],{"class":562,"line":825},[560,2536,665],{"emptyLinePlaceholder":516},[560,2538,2539,2541,2543],{"class":562,"line":835},[560,2540,566],{"class":565},[560,2542,673],{"class":569},[560,2544,592],{"class":565},[560,2546,2548,2550,2552],{"class":562,"line":2547},21,[560,2549,681],{"class":565},[560,2551,684],{"class":569},[560,2553,592],{"class":565},[560,2555,2557,2559,2561,2563,2565,2567,2570,2572],{"class":562,"line":2556},22,[560,2558,704],{"class":565},[560,2560,707],{"class":569},[560,2562,1407],{"class":573},[560,2564,580],{"class":565},[560,2566,583],{"class":565},[560,2568,2569],{"class":586},"[2, 2, 3]",[560,2571,583],{"class":565},[560,2573,710],{"class":565},[560,2575,2577,2579,2581],{"class":562,"line":2576},23,[560,2578,704],{"class":565},[560,2580,718],{"class":569},[560,2582,710],{"class":565},[560,2584,2586,2588,2590],{"class":562,"line":2585},24,[560,2587,704],{"class":565},[560,2589,779],{"class":569},[560,2591,592],{"class":565},[560,2593,2595,2597,2599],{"class":562,"line":2594},25,[560,2596,776],{"class":565},[560,2598,790],{"class":569},[560,2600,710],{"class":565},[560,2602,2604,2606,2609,2612,2614,2616,2619,2621],{"class":562,"line":2603},26,[560,2605,776],{"class":565},[560,2607,2608],{"class":569},"TresMeshStandardMaterial",[560,2610,2611],{"class":573}," color",[560,2613,580],{"class":565},[560,2615,583],{"class":565},[560,2617,2618],{"class":586},"white",[560,2620,583],{"class":565},[560,2622,710],{"class":565},[560,2624,2626,2628,2630,2633,2635,2637,2640,2642,2645,2647,2649,2652,2654,2657,2659,2661,2663,2665],{"class":562,"line":2625},27,[560,2627,776],{"class":565},[560,2629,53],{"class":569},[560,2631,2632],{"class":573}," v-if",[560,2634,580],{"class":565},[560,2636,583],{"class":565},[560,2638,2639],{"class":586},"texture",[560,2641,583],{"class":565},[560,2643,2644],{"class":573}," v-model:data",[560,2646,580],{"class":565},[560,2648,583],{"class":565},[560,2650,2651],{"class":586},"decals",[560,2653,583],{"class":565},[560,2655,2656],{"class":573}," :map",[560,2658,580],{"class":565},[560,2660,583],{"class":565},[560,2662,2639],{"class":586},[560,2664,583],{"class":565},[560,2666,710],{"class":565},[560,2668,2670,2672,2674],{"class":562,"line":2669},28,[560,2671,818],{"class":565},[560,2673,779],{"class":569},[560,2675,592],{"class":565},[560,2677,2679,2681,2683],{"class":562,"line":2678},29,[560,2680,828],{"class":565},[560,2682,684],{"class":569},[560,2684,592],{"class":565},[560,2686,2688,2690,2692],{"class":562,"line":2687},30,[560,2689,655],{"class":565},[560,2691,673],{"class":569},[560,2693,592],{"class":565},[1927,2695,2696],{},[536,2697,2698,2699,2701,2702,2705,2706,2709],{},"The ",[540,2700,2192],{}," array is the ",[1591,2703,2704],{},"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,2707,2708],{},".json"," file.",[545,2711,2713],{"id":2712},"multiple-textures-palette","Multiple textures (palette)",[536,2715,2716,2717,2719,2720,2724],{},"Pass an array to ",[540,2718,2175],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1063,2721,2722],{"href":154},[540,2723,153],{},"\nplugs in directly:",[549,2726,2728],{"className":551,"code":2727,"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,2729,2730,2750,2773,2777,2794,2805,2816,2827,2831,2839,2843,2851,2880],{"__ignoreMap":508},[560,2731,2732,2734,2736,2738,2740,2742,2744,2746,2748],{"class":562,"line":509},[560,2733,566],{"class":565},[560,2735,570],{"class":569},[560,2737,574],{"class":573},[560,2739,577],{"class":573},[560,2741,580],{"class":565},[560,2743,583],{"class":565},[560,2745,587],{"class":586},[560,2747,583],{"class":565},[560,2749,592],{"class":565},[560,2751,2752,2754,2756,2758,2760,2763,2765,2767,2769,2771],{"class":562,"line":510},[560,2753,600],{"class":599},[560,2755,603],{"class":565},[560,2757,2272],{"class":606},[560,2759,610],{"class":565},[560,2761,2762],{"class":606}," useTextures",[560,2764,616],{"class":565},[560,2766,619],{"class":599},[560,2768,622],{"class":565},[560,2770,625],{"class":586},[560,2772,628],{"class":565},[560,2774,2775],{"class":562,"line":631},[560,2776,665],{"emptyLinePlaceholder":516},[560,2778,2779,2781,2783,2786,2788,2790,2792],{"class":562,"line":652},[560,2780,2337],{"class":573},[560,2782,603],{"class":565},[560,2784,2785],{"class":606}," textures ",[560,2787,2350],{"class":565},[560,2789,2353],{"class":565},[560,2791,2762],{"class":2356},[560,2793,2388],{"class":606},[560,2795,2796,2799,2801,2803],{"class":562,"line":662},[560,2797,2798],{"class":565},"  '",[560,2800,2365],{"class":586},[560,2802,2362],{"class":565},[560,2804,2410],{"class":565},[560,2806,2807,2809,2812,2814],{"class":562,"line":668},[560,2808,2798],{"class":565},[560,2810,2811],{"class":586},"/textures/badge.png",[560,2813,2362],{"class":565},[560,2815,2410],{"class":565},[560,2817,2818,2820,2823,2825],{"class":562,"line":678},[560,2819,2798],{"class":565},[560,2821,2822],{"class":586},"/textures/sticker.png",[560,2824,2362],{"class":565},[560,2826,2410],{"class":565},[560,2828,2829],{"class":562,"line":701},[560,2830,2524],{"class":606},[560,2832,2833,2835,2837],{"class":562,"line":713},[560,2834,655],{"class":565},[560,2836,570],{"class":569},[560,2838,592],{"class":565},[560,2840,2841],{"class":562,"line":723},[560,2842,665],{"emptyLinePlaceholder":516},[560,2844,2845,2847,2849],{"class":562,"line":728},[560,2846,566],{"class":565},[560,2848,673],{"class":569},[560,2850,592],{"class":565},[560,2852,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2876,2878],{"class":562,"line":750},[560,2854,681],{"class":565},[560,2856,53],{"class":569},[560,2858,2644],{"class":573},[560,2860,580],{"class":565},[560,2862,583],{"class":565},[560,2864,2651],{"class":586},[560,2866,583],{"class":565},[560,2868,2656],{"class":573},[560,2870,580],{"class":565},[560,2872,583],{"class":565},[560,2874,2875],{"class":586},"textures",[560,2877,583],{"class":565},[560,2879,710],{"class":565},[560,2881,2882,2884,2886],{"class":562,"line":554},[560,2883,655],{"class":565},[560,2885,673],{"class":569},[560,2887,592],{"class":565},[536,2889,2890,2891,2189,2894,2896,2897,2900,2901,2904],{},"Each entry references its texture by ",[540,2892,2893],{},"name",[540,2895,2132],{}," auto-fills\n",[540,2898,2899],{},"texture.name"," from the URL filename when missing, so JSON ",[540,2902,2903],{},"map","\nfields round-trip cleanly.",[545,2906,2181],{"id":2907},"custom-material",[536,2909,2910,2911,2914,2915,2410,2918,2921],{},"The default material is ",[540,2912,2913],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[540,2916,2917],{},"MeshStandardMaterial",[540,2919,2920],{},"MeshPhysicalMaterial",", or a custom shader.",[549,2923,2925],{"className":551,"code":2924,"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,2926,2927,2964,2969],{"__ignoreMap":508},[560,2928,2929,2931,2933,2936,2938,2941,2943,2945,2947,2949,2952,2954,2956,2958,2960,2962],{"class":562,"line":509},[560,2930,566],{"class":565},[560,2932,53],{"class":569},[560,2934,2935],{"class":573}," v-model",[560,2937,1141],{"class":565},[560,2939,2940],{"class":573},"data",[560,2942,580],{"class":565},[560,2944,583],{"class":565},[560,2946,2651],{"class":606},[560,2948,583],{"class":565},[560,2950,2951],{"class":565}," :",[560,2953,2903],{"class":573},[560,2955,580],{"class":565},[560,2957,583],{"class":565},[560,2959,2639],{"class":606},[560,2961,583],{"class":565},[560,2963,592],{"class":565},[560,2965,2966],{"class":562,"line":510},[560,2967,2968],{"class":606},"  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[560,2970,2971,2973,2975],{"class":562,"line":631},[560,2972,655],{"class":565},[560,2974,53],{"class":569},[560,2976,592],{"class":565},[1927,2978,2979],{},[536,2980,2981,2982,2985,2986,2989,2990,2985,2993,2996,2997,2410,2999,3001],{},"Keep ",[540,2983,2984],{},"transparent: true"," and ",[540,2987,2988],{},"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,2991,2992],{},".color",[540,2994,2995],{},".opacity"," (",[540,2998,2913],{},[540,3000,2917],{},", …) — bespoke shader materials are skipped\nsilently.",[545,3003,3005],{"id":3004},"stacking-decals-z-layering","Stacking decals (z-layering)",[536,3007,3008,3009,3011,3012,3015,3016,1069],{},"Each decal has a ",[540,3010,2214],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[540,3013,3014],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[540,3017,3018],{},"layerGap",[2217,3020,3021],{},[3022,3023],"abstractions-decal-stacking",{},[549,3025,3027],{"className":551,"code":3026,"language":556,"meta":508,"style":508},"\u003CDecal\n  v-model:data=\"decals\"\n  :map=\"textures\"\n  :layer-gap=\"0.002\"\n/>\n",[540,3028,3029,3036,3054,3069,3085],{"__ignoreMap":508},[560,3030,3031,3033],{"class":562,"line":509},[560,3032,566],{"class":565},[560,3034,3035],{"class":569},"Decal\n",[560,3037,3038,3041,3043,3045,3047,3049,3051],{"class":562,"line":510},[560,3039,3040],{"class":573},"  v-model",[560,3042,1141],{"class":565},[560,3044,2940],{"class":573},[560,3046,580],{"class":565},[560,3048,583],{"class":565},[560,3050,2651],{"class":606},[560,3052,3053],{"class":565},"\"\n",[560,3055,3056,3059,3061,3063,3065,3067],{"class":562,"line":631},[560,3057,3058],{"class":565},"  :",[560,3060,2903],{"class":573},[560,3062,580],{"class":565},[560,3064,583],{"class":565},[560,3066,2875],{"class":606},[560,3068,3053],{"class":565},[560,3070,3071,3073,3076,3078,3080,3083],{"class":562,"line":652},[560,3072,3058],{"class":565},[560,3074,3075],{"class":573},"layer-gap",[560,3077,580],{"class":565},[560,3079,583],{"class":565},[560,3081,3082],{"class":2423},"0.002",[560,3084,3053],{"class":565},[560,3086,3087],{"class":562,"line":662},[560,3088,3089],{"class":606},"/>\n",[536,3091,3092,3093,3096],{},"zIndex stacks are ",[1591,3094,3095],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[545,3098,3100,3101],{"id":3099},"editable-mode-decaldebugui","Editable mode + ",[540,3102,2147],{},[536,3104,3105,3106,3109,3110,3112,3113,3116,3117,1069],{},"Add the ",[540,3107,3108],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[540,3111,2147],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1591,3114,3115],{},"outside"," ",[540,3118,3119],{},"\u003CTresCanvas>",[3121,3122,3123,3137,3158],"prose-warning",{},[536,3124,3125,3127,3128,3131,3132,3134,3135,1069],{},[540,3126,2147],{}," needs its stylesheet — import it ",[1591,3129,3130],{},"once"," at your app\nentry. ",[540,3133,2132],{}," itself is style-less, so this is only needed when you\nmount ",[540,3136,2147],{},[549,3138,3140],{"className":1109,"code":3139,"language":587,"meta":508,"style":508},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[540,3141,3142,3147],{"__ignoreMap":508},[560,3143,3144],{"class":562,"line":509},[560,3145,3146],{"class":1132},"// Vite / Vue — in main.ts\n",[560,3148,3149,3151,3153,3156],{"class":562,"line":510},[560,3150,600],{"class":599},[560,3152,622],{"class":565},[560,3154,3155],{"class":586},"@tresjs/cientos/styles.css",[560,3157,628],{"class":565},[549,3159,3161],{"className":1109,"code":3160,"language":587,"meta":508,"style":508},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['@tresjs/cientos/styles.css'],\n})\n",[540,3162,3163,3168,3183,3202],{"__ignoreMap":508},[560,3164,3165],{"class":562,"line":509},[560,3166,3167],{"class":1132},"// Nuxt — in nuxt.config.ts\n",[560,3169,3170,3172,3175,3178,3180],{"class":562,"line":510},[560,3171,1117],{"class":599},[560,3173,3174],{"class":599}," default",[560,3176,3177],{"class":2356}," defineNuxtConfig",[560,3179,2359],{"class":606},[560,3181,3182],{"class":565},"{\n",[560,3184,3185,3188,3190,3192,3194,3196,3198,3200],{"class":562,"line":631},[560,3186,3187],{"class":569},"  css",[560,3189,1141],{"class":565},[560,3191,2420],{"class":606},[560,3193,2362],{"class":565},[560,3195,3155],{"class":586},[560,3197,2362],{"class":565},[560,3199,2436],{"class":606},[560,3201,2410],{"class":565},[560,3203,3204,3206],{"class":562,"line":652},[560,3205,2350],{"class":565},[560,3207,2370],{"class":606},[2217,3209,3210],{},[3211,3212],"abstractions-decal-editable",{},[536,3214,3215,3216,3219,3220,3223,3224,1069],{},"Three panels: a floating ",[1591,3217,3218],{},"handle"," anchored to the editing decal, a\nbottom ",[1591,3221,3222],{},"dock"," (texture picker + edit tools), a right-side ",[1591,3225,3226],{},"layer\npanel",[2135,3228,3229,3239,3244,3250,3263,3268,3273,3279,3285,3291,3297],{},[2138,3230,3231,3234,3235,3238],{},[1591,3232,3233],{},"Floating handle"," (rotate + scale + snap + live ",[540,3236,3237],{},"scale% · rotation° · L\u003Cn>"," badge)",[2138,3240,3241],{},[1591,3242,3243],{},"Color tint & opacity",[2138,3245,3246,3249],{},[1591,3247,3248],{},"Mirror"," (flip X / flip Y)",[2138,3251,3252,2996,3255,3258,3259,3262],{},[1591,3253,3254],{},"Layer controls",[540,3256,3257],{},"L+"," / ",[540,3260,3261],{},"L-",")",[2138,3264,3265],{},[1591,3266,3267],{},"Visibility toggle",[2138,3269,3270],{},[1591,3271,3272],{},"Per-row remove",[2138,3274,3275,3278],{},[1591,3276,3277],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2138,3280,3281,3284],{},[1591,3282,3283],{},"Texture picker"," (drag or click-to-arm)",[2138,3286,3287,3290],{},[1591,3288,3289],{},"Mode badge"," (placing / editing status)",[2138,3292,3293,3296],{},[1591,3294,3295],{},"Undo / Redo"," buttons",[2138,3298,3299,3296],{},[1591,3300,3301],{},"Import / Export",[549,3303,3305],{"className":551,"code":3304,"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,3306,3307,3327,3358,3385,3403,3431,3435,3470,3474,3509,3521,3532,3538,3542,3581,3621,3629,3633,3641,3686,3690,3698,3717,3725,3729,3760,3768,3786,3830,3838,3842,3873,3894,3913,3945,3954,3963],{"__ignoreMap":508},[560,3308,3309,3311,3313,3315,3317,3319,3321,3323,3325],{"class":562,"line":509},[560,3310,566],{"class":565},[560,3312,570],{"class":569},[560,3314,574],{"class":573},[560,3316,577],{"class":573},[560,3318,580],{"class":565},[560,3320,583],{"class":565},[560,3322,587],{"class":586},[560,3324,583],{"class":565},[560,3326,592],{"class":565},[560,3328,3329,3331,3333,3335,3337,3340,3342,3344,3346,3348,3350,3352,3354,3356],{"class":562,"line":510},[560,3330,600],{"class":599},[560,3332,603],{"class":565},[560,3334,2272],{"class":606},[560,3336,610],{"class":565},[560,3338,3339],{"class":606}," DecalDebugUI",[560,3341,610],{"class":565},[560,3343,613],{"class":606},[560,3345,610],{"class":565},[560,3347,2762],{"class":606},[560,3349,616],{"class":565},[560,3351,619],{"class":599},[560,3353,622],{"class":565},[560,3355,625],{"class":586},[560,3357,628],{"class":565},[560,3359,3360,3362,3365,3367,3370,3372,3375,3377,3379,3381,3383],{"class":562,"line":631},[560,3361,600],{"class":599},[560,3363,3364],{"class":599}," type",[560,3366,603],{"class":565},[560,3368,3369],{"class":606}," DecalEditorSession",[560,3371,610],{"class":565},[560,3373,3374],{"class":606}," DecalJsonEntry",[560,3376,616],{"class":565},[560,3378,619],{"class":599},[560,3380,622],{"class":565},[560,3382,625],{"class":586},[560,3384,628],{"class":565},[560,3386,3387,3389,3391,3393,3395,3397,3399,3401],{"class":562,"line":652},[560,3388,600],{"class":599},[560,3390,603],{"class":565},[560,3392,638],{"class":606},[560,3394,616],{"class":565},[560,3396,619],{"class":599},[560,3398,622],{"class":565},[560,3400,647],{"class":586},[560,3402,628],{"class":565},[560,3404,3405,3407,3409,3412,3414,3416,3418,3421,3423,3425,3427,3429],{"class":562,"line":662},[560,3406,600],{"class":599},[560,3408,603],{"class":565},[560,3410,3411],{"class":606}," computed",[560,3413,610],{"class":565},[560,3415,2318],{"class":606},[560,3417,610],{"class":565},[560,3419,3420],{"class":606}," shallowRef",[560,3422,616],{"class":565},[560,3424,619],{"class":599},[560,3426,622],{"class":565},[560,3428,556],{"class":586},[560,3430,628],{"class":565},[560,3432,3433],{"class":562,"line":668},[560,3434,665],{"emptyLinePlaceholder":516},[560,3436,3437,3439,3441,3443,3445,3447,3449,3452,3454,3457,3459,3461,3463,3466,3468],{"class":562,"line":678},[560,3438,2337],{"class":573},[560,3440,603],{"class":565},[560,3442,2785],{"class":606},[560,3444,2350],{"class":565},[560,3446,2353],{"class":565},[560,3448,2762],{"class":2356},[560,3450,3451],{"class":606},"([",[560,3453,2362],{"class":565},[560,3455,3456],{"class":586},"/textures/a.png",[560,3458,2362],{"class":565},[560,3460,610],{"class":565},[560,3462,622],{"class":565},[560,3464,3465],{"class":586},"/textures/b.png",[560,3467,2362],{"class":565},[560,3469,2524],{"class":606},[560,3471,3472],{"class":562,"line":701},[560,3473,665],{"emptyLinePlaceholder":516},[560,3475,3476,3478,3481,3483,3485,3487,3490,3492,3495,3497,3499,3502,3505,3507],{"class":562,"line":713},[560,3477,2337],{"class":573},[560,3479,3480],{"class":606}," layout ",[560,3482,580],{"class":565},[560,3484,2318],{"class":2356},[560,3486,566],{"class":565},[560,3488,3489],{"class":1123},"Record",[560,3491,566],{"class":565},[560,3493,3494],{"class":1123},"string",[560,3496,610],{"class":565},[560,3498,3374],{"class":1123},[560,3500,3501],{"class":606},"[]",[560,3503,3504],{"class":565},">>",[560,3506,2359],{"class":606},[560,3508,3182],{"class":565},[560,3510,3511,3514,3516,3519],{"class":562,"line":723},[560,3512,3513],{"class":569},"  cube",[560,3515,1141],{"class":565},[560,3517,3518],{"class":606}," []",[560,3520,2410],{"class":565},[560,3522,3523,3526,3528,3530],{"class":562,"line":728},[560,3524,3525],{"class":569},"  sphere",[560,3527,1141],{"class":565},[560,3529,3518],{"class":606},[560,3531,2410],{"class":565},[560,3533,3534,3536],{"class":562,"line":750},[560,3535,2350],{"class":565},[560,3537,2370],{"class":606},[560,3539,3540],{"class":562,"line":554},[560,3541,665],{"emptyLinePlaceholder":516},[560,3543,3544,3546,3549,3551,3553,3556,3559,3561,3563,3565,3568,3571,3574,3576,3579],{"class":562,"line":773},[560,3545,2337],{"class":573},[560,3547,3548],{"class":606}," decalRef ",[560,3550,580],{"class":565},[560,3552,3420],{"class":2356},[560,3554,3555],{"class":565},"\u003C{",[560,3557,3558],{"class":569}," editor",[560,3560,1141],{"class":565},[560,3562,3369],{"class":1123},[560,3564,616],{"class":565},[560,3566,3567],{"class":565}," |",[560,3569,3570],{"class":1123}," null",[560,3572,3573],{"class":565},">",[560,3575,2359],{"class":606},[560,3577,3578],{"class":565},"null",[560,3580,2370],{"class":606},[560,3582,3583,3585,3588,3590,3592,3594,3597,3600,3603,3605,3608,3611,3614,3617,3619],{"class":562,"line":784},[560,3584,2337],{"class":573},[560,3586,3587],{"class":606}," session ",[560,3589,580],{"class":565},[560,3591,3411],{"class":2356},[560,3593,2359],{"class":606},[560,3595,3596],{"class":565},"()",[560,3598,3599],{"class":573}," =>",[560,3601,3602],{"class":606}," decalRef",[560,3604,1069],{"class":565},[560,3606,3607],{"class":606},"value",[560,3609,3610],{"class":565},"?.",[560,3612,3613],{"class":606},"editor ",[560,3615,3616],{"class":565},"??",[560,3618,3570],{"class":565},[560,3620,2370],{"class":606},[560,3622,3623,3625,3627],{"class":562,"line":795},[560,3624,655],{"class":565},[560,3626,570],{"class":569},[560,3628,592],{"class":565},[560,3630,3631],{"class":562,"line":805},[560,3632,665],{"emptyLinePlaceholder":516},[560,3634,3635,3637,3639],{"class":562,"line":555},[560,3636,566],{"class":565},[560,3638,673],{"class":569},[560,3640,592],{"class":565},[560,3642,3643,3645,3648,3651,3653,3655,3658,3660,3663,3665,3667,3670,3672,3675,3677,3679,3682,3684],{"class":562,"line":825},[560,3644,681],{"class":565},[560,3646,3647],{"class":569},"DecalDebugUI",[560,3649,3650],{"class":573}," :session",[560,3652,580],{"class":565},[560,3654,583],{"class":565},[560,3656,3657],{"class":586},"session",[560,3659,583],{"class":565},[560,3661,3662],{"class":573}," :textures",[560,3664,580],{"class":565},[560,3666,583],{"class":565},[560,3668,3669],{"class":586},"textures ?? []",[560,3671,583],{"class":565},[560,3673,3674],{"class":573}," :data",[560,3676,580],{"class":565},[560,3678,583],{"class":565},[560,3680,3681],{"class":586},"layout",[560,3683,583],{"class":565},[560,3685,710],{"class":565},[560,3687,3688],{"class":562,"line":835},[560,3689,665],{"emptyLinePlaceholder":516},[560,3691,3692,3694,3696],{"class":562,"line":2547},[560,3693,681],{"class":565},[560,3695,684],{"class":569},[560,3697,592],{"class":565},[560,3699,3700,3702,3704,3706,3708,3710,3713,3715],{"class":562,"line":2556},[560,3701,704],{"class":565},[560,3703,707],{"class":569},[560,3705,1407],{"class":573},[560,3707,580],{"class":565},[560,3709,583],{"class":565},[560,3711,3712],{"class":586},"[2, 2, 4]",[560,3714,583],{"class":565},[560,3716,710],{"class":565},[560,3718,3719,3721,3723],{"class":562,"line":2576},[560,3720,704],{"class":565},[560,3722,718],{"class":569},[560,3724,710],{"class":565},[560,3726,3727],{"class":562,"line":2585},[560,3728,665],{"emptyLinePlaceholder":516},[560,3730,3731,3733,3735,3738,3740,3742,3745,3747,3749,3751,3753,3756,3758],{"class":562,"line":2594},[560,3732,704],{"class":565},[560,3734,779],{"class":569},[560,3736,3737],{"class":573}," name",[560,3739,580],{"class":565},[560,3741,583],{"class":565},[560,3743,3744],{"class":586},"cube",[560,3746,583],{"class":565},[560,3748,1407],{"class":573},[560,3750,580],{"class":565},[560,3752,583],{"class":565},[560,3754,3755],{"class":586},"[-1.2, 0, 0]",[560,3757,583],{"class":565},[560,3759,592],{"class":565},[560,3761,3762,3764,3766],{"class":562,"line":2603},[560,3763,776],{"class":565},[560,3765,790],{"class":569},[560,3767,710],{"class":565},[560,3769,3770,3772,3774,3776,3778,3780,3782,3784],{"class":562,"line":2625},[560,3771,776],{"class":565},[560,3773,2608],{"class":569},[560,3775,2611],{"class":573},[560,3777,580],{"class":565},[560,3779,583],{"class":565},[560,3781,2618],{"class":586},[560,3783,583],{"class":565},[560,3785,710],{"class":565},[560,3787,3788,3790,3792,3795,3797,3799,3802,3804,3806,3808,3810,3813,3815,3817,3819,3821,3823,3825,3828],{"class":562,"line":2669},[560,3789,776],{"class":565},[560,3791,53],{"class":569},[560,3793,3794],{"class":573}," ref",[560,3796,580],{"class":565},[560,3798,583],{"class":565},[560,3800,3801],{"class":586},"decalRef",[560,3803,583],{"class":565},[560,3805,2644],{"class":573},[560,3807,580],{"class":565},[560,3809,583],{"class":565},[560,3811,3812],{"class":586},"layout.cube",[560,3814,583],{"class":565},[560,3816,2656],{"class":573},[560,3818,580],{"class":565},[560,3820,583],{"class":565},[560,3822,2875],{"class":586},[560,3824,583],{"class":565},[560,3826,3827],{"class":573}," editable",[560,3829,710],{"class":565},[560,3831,3832,3834,3836],{"class":562,"line":2678},[560,3833,818],{"class":565},[560,3835,779],{"class":569},[560,3837,592],{"class":565},[560,3839,3840],{"class":562,"line":2687},[560,3841,665],{"emptyLinePlaceholder":516},[560,3843,3845,3847,3849,3851,3853,3855,3858,3860,3862,3864,3866,3869,3871],{"class":562,"line":3844},31,[560,3846,704],{"class":565},[560,3848,779],{"class":569},[560,3850,3737],{"class":573},[560,3852,580],{"class":565},[560,3854,583],{"class":565},[560,3856,3857],{"class":586},"sphere",[560,3859,583],{"class":565},[560,3861,1407],{"class":573},[560,3863,580],{"class":565},[560,3865,583],{"class":565},[560,3867,3868],{"class":586},"[1.2, 0, 0]",[560,3870,583],{"class":565},[560,3872,592],{"class":565},[560,3874,3876,3878,3881,3883,3885,3887,3890,3892],{"class":562,"line":3875},32,[560,3877,776],{"class":565},[560,3879,3880],{"class":569},"TresSphereGeometry",[560,3882,1881],{"class":573},[560,3884,580],{"class":565},[560,3886,583],{"class":565},[560,3888,3889],{"class":586},"[0.7]",[560,3891,583],{"class":565},[560,3893,710],{"class":565},[560,3895,3897,3899,3901,3903,3905,3907,3909,3911],{"class":562,"line":3896},33,[560,3898,776],{"class":565},[560,3900,2608],{"class":569},[560,3902,2611],{"class":573},[560,3904,580],{"class":565},[560,3906,583],{"class":565},[560,3908,2618],{"class":586},[560,3910,583],{"class":565},[560,3912,710],{"class":565},[560,3914,3916,3918,3920,3922,3924,3926,3929,3931,3933,3935,3937,3939,3941,3943],{"class":562,"line":3915},34,[560,3917,776],{"class":565},[560,3919,53],{"class":569},[560,3921,2644],{"class":573},[560,3923,580],{"class":565},[560,3925,583],{"class":565},[560,3927,3928],{"class":586},"layout.sphere",[560,3930,583],{"class":565},[560,3932,2656],{"class":573},[560,3934,580],{"class":565},[560,3936,583],{"class":565},[560,3938,2875],{"class":586},[560,3940,583],{"class":565},[560,3942,3827],{"class":573},[560,3944,710],{"class":565},[560,3946,3948,3950,3952],{"class":562,"line":3947},35,[560,3949,818],{"class":565},[560,3951,779],{"class":569},[560,3953,592],{"class":565},[560,3955,3957,3959,3961],{"class":562,"line":3956},36,[560,3958,828],{"class":565},[560,3960,684],{"class":569},[560,3962,592],{"class":565},[560,3964,3966,3968,3970],{"class":562,"line":3965},37,[560,3967,655],{"class":565},[560,3969,673],{"class":569},[560,3971,592],{"class":565},[3973,3974,3976],"h3",{"id":3975},"how-the-wiring-works","How the wiring works",[2135,3978,3979,3990,3999,4008],{},[2138,3980,3981,3984,3985,3987,3988,1069],{},[540,3982,3983],{},"v-model:data=\"layout.cube\""," — each ",[540,3986,2132],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[540,3989,2893],{},[2138,3991,3992,3995,3996,3998],{},[540,3993,3994],{},"ref=\"decalRef\""," — grab a reference to any ",[540,3997,2132],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2138,4000,4001,4004,4005,4007],{},[540,4002,4003],{},"session = decalRef.value?.editor"," — the editor session powers\n",[540,4006,2147],{},". Pass it through.",[2138,4009,4010,4013,4014,4016],{},[540,4011,4012],{},":data=\"layout\""," on ",[540,4015,2147],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[1927,4018,4019],{},[536,4020,4021,4022,4025,4026,4029],{},"The overlay is full-viewport (",[540,4023,4024],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[540,4027,4028],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[549,4031,4033],{"className":551,"code":4032,"language":556,"meta":508,"style":508},"\u003Cdiv style=\"position: relative; height: 500px;\">\n  \u003CDecalDebugUI contained ... />\n  \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[540,4034,4035,4075,4080,4085],{"__ignoreMap":508},[560,4036,4037,4039,4042,4045,4047,4049,4053,4055,4058,4061,4064,4066,4069,4071,4073],{"class":562,"line":509},[560,4038,566],{"class":565},[560,4040,4041],{"class":569},"div",[560,4043,4044],{"class":573}," style",[560,4046,580],{"class":565},[560,4048,583],{"class":565},[560,4050,4052],{"class":4051},"sqsOY","position",[560,4054,1141],{"class":565},[560,4056,4057],{"class":606}," relative",[560,4059,4060],{"class":565},";",[560,4062,4063],{"class":4051}," height",[560,4065,1141],{"class":565},[560,4067,4068],{"class":2423}," 500px",[560,4070,4060],{"class":565},[560,4072,583],{"class":565},[560,4074,592],{"class":565},[560,4076,4077],{"class":562,"line":510},[560,4078,4079],{"class":606},"  \u003CDecalDebugUI contained ... />\n",[560,4081,4082],{"class":562,"line":631},[560,4083,4084],{"class":606},"  \u003CTresCanvas>...\u003C/TresCanvas>\n",[560,4086,4087,4089,4091],{"class":562,"line":652},[560,4088,655],{"class":565},[560,4090,4041],{"class":569},[560,4092,592],{"class":565},[545,4094,3301],{"id":4095},"import-export",[536,4097,4098,4099,4102,4103,4105],{},"The Export button in the dock auto-downloads the current layout as\n",[540,4100,4101],{},"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,4104,2132],{}," automatically — no extra host code needed.",[549,4107,4109],{"className":551,"code":4108,"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,4110,4111,4116,4147,4151,4156],{"__ignoreMap":508},[560,4112,4113],{"class":562,"line":509},[560,4114,4115],{"class":1132},"\u003C!-- Custom filename -->\n",[560,4117,4118,4120,4122,4124,4127,4129,4132,4135,4137,4139,4142,4145],{"class":562,"line":510},[560,4119,566],{"class":565},[560,4121,3647],{"class":569},[560,4123,2951],{"class":565},[560,4125,4126],{"class":573},"export-filename",[560,4128,580],{"class":565},[560,4130,4131],{"class":565},"\"`${",[560,4133,4134],{"class":606},"sceneName",[560,4136,2350],{"class":565},[560,4138,2708],{"class":586},[560,4140,4141],{"class":565},"`\"",[560,4143,4144],{"class":565}," ...",[560,4146,710],{"class":565},[560,4148,4149],{"class":562,"line":631},[560,4150,665],{"emptyLinePlaceholder":516},[560,4152,4153],{"class":562,"line":652},[560,4154,4155],{"class":1132},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[560,4157,4158,4160,4162,4164,4166,4168,4170,4172,4174,4177,4179,4181,4183,4186,4188,4190],{"class":562,"line":662},[560,4159,566],{"class":565},[560,4161,3647],{"class":569},[560,4163,2951],{"class":565},[560,4165,4126],{"class":573},[560,4167,580],{"class":565},[560,4169,583],{"class":565},[560,4171,3578],{"class":565},[560,4173,583],{"class":565},[560,4175,4176],{"class":565}," @",[560,4178,1117],{"class":573},[560,4180,580],{"class":565},[560,4182,583],{"class":565},[560,4184,4185],{"class":606},"postToBackend",[560,4187,583],{"class":565},[560,4189,4144],{"class":565},[560,4191,710],{"class":565},[545,4193,4195,4196,3262],{"id":4194},"targeting-a-loaded-model-glb","Targeting a loaded model (",[540,4197,4198],{},".glb",[536,4200,4201,4202,4204,4205,4211,4212,4215,4216,4218],{},"A ",[540,4203,2132],{}," can be a ",[1591,4206,4207,4208],{},"direct child of ",[540,4209,4210],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[540,4213,4214],{},"Mesh"," — so the\nbehaviour depends on what the ",[540,4217,4210],{}," wraps.",[3973,4220,4222,4223,4226,4227],{"id":4221},"when-object-is-a-mesh","When ",[540,4224,4225],{},":object"," is a ",[540,4228,4214],{},[536,4230,4231],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[549,4233,4235],{"className":551,"code":4234,"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,4236,4237,4257,4280,4284,4325,4330,4338,4342,4350,4382,4413,4421],{"__ignoreMap":508},[560,4238,4239,4241,4243,4245,4247,4249,4251,4253,4255],{"class":562,"line":509},[560,4240,566],{"class":565},[560,4242,570],{"class":569},[560,4244,574],{"class":573},[560,4246,577],{"class":573},[560,4248,580],{"class":565},[560,4250,583],{"class":565},[560,4252,587],{"class":586},[560,4254,583],{"class":565},[560,4256,592],{"class":565},[560,4258,4259,4261,4263,4265,4267,4270,4272,4274,4276,4278],{"class":562,"line":510},[560,4260,600],{"class":599},[560,4262,603],{"class":565},[560,4264,2272],{"class":606},[560,4266,610],{"class":565},[560,4268,4269],{"class":606}," useGLTF",[560,4271,616],{"class":565},[560,4273,619],{"class":599},[560,4275,622],{"class":565},[560,4277,625],{"class":586},[560,4279,628],{"class":565},[560,4281,4282],{"class":562,"line":631},[560,4283,665],{"emptyLinePlaceholder":516},[560,4285,4286,4288,4290,4293,4295,4297,4299,4301,4303,4306,4308,4310,4312,4315,4317,4321,4323],{"class":562,"line":652},[560,4287,2337],{"class":573},[560,4289,603],{"class":565},[560,4291,4292],{"class":606}," nodes ",[560,4294,2350],{"class":565},[560,4296,2353],{"class":565},[560,4298,4269],{"class":2356},[560,4300,2359],{"class":606},[560,4302,2362],{"class":565},[560,4304,4305],{"class":586},"/models/helmet.glb",[560,4307,2362],{"class":565},[560,4309,610],{"class":565},[560,4311,603],{"class":565},[560,4313,4314],{"class":569}," draco",[560,4316,1141],{"class":565},[560,4318,4320],{"class":4319},"sfNiH"," true",[560,4322,616],{"class":565},[560,4324,2370],{"class":606},[560,4326,4327],{"class":562,"line":662},[560,4328,4329],{"class":1132},"// nodes.Helmet is a Mesh in this asset.\n",[560,4331,4332,4334,4336],{"class":562,"line":668},[560,4333,655],{"class":565},[560,4335,570],{"class":569},[560,4337,592],{"class":565},[560,4339,4340],{"class":562,"line":678},[560,4341,665],{"emptyLinePlaceholder":516},[560,4343,4344,4346,4348],{"class":562,"line":701},[560,4345,566],{"class":565},[560,4347,673],{"class":569},[560,4349,592],{"class":565},[560,4351,4352,4354,4357,4359,4361,4363,4366,4368,4371,4373,4375,4378,4380],{"class":562,"line":713},[560,4353,681],{"class":565},[560,4355,4356],{"class":569},"primitive",[560,4358,2632],{"class":573},[560,4360,580],{"class":565},[560,4362,583],{"class":565},[560,4364,4365],{"class":586},"nodes?.Helmet",[560,4367,583],{"class":565},[560,4369,4370],{"class":573}," :object",[560,4372,580],{"class":565},[560,4374,583],{"class":565},[560,4376,4377],{"class":586},"nodes.Helmet",[560,4379,583],{"class":565},[560,4381,592],{"class":565},[560,4383,4384,4386,4388,4390,4392,4394,4397,4399,4401,4403,4405,4407,4409,4411],{"class":562,"line":723},[560,4385,704],{"class":565},[560,4387,53],{"class":569},[560,4389,2644],{"class":573},[560,4391,580],{"class":565},[560,4393,583],{"class":565},[560,4395,4396],{"class":586},"layout.helmet",[560,4398,583],{"class":565},[560,4400,2656],{"class":573},[560,4402,580],{"class":565},[560,4404,583],{"class":565},[560,4406,2875],{"class":586},[560,4408,583],{"class":565},[560,4410,3827],{"class":573},[560,4412,710],{"class":565},[560,4414,4415,4417,4419],{"class":562,"line":728},[560,4416,828],{"class":565},[560,4418,4356],{"class":569},[560,4420,592],{"class":565},[560,4422,4423,4425,4427],{"class":562,"line":750},[560,4424,655],{"class":565},[560,4426,673],{"class":569},[560,4428,592],{"class":565},[1927,4430,4431],{},[536,4432,4433,4434,4436,4437,4440],{},"The resolved parent is the ",[540,4435,4210],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[540,4438,4439],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[3973,4442,4222,4444,4226,4446],{"id":4443},"when-object-is-a-group",[540,4445,4225],{},[540,4447,4448],{},"Group",[536,4450,4451,4452,4454,4455,4457,4458,4460,4461,1141],{},"A named node in a ",[540,4453,4198],{}," is often a ",[540,4456,4448],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[540,4459,3578],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[540,4462,4463],{},":mesh",[549,4465,4467],{"className":551,"code":4466,"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,4468,4469,4489,4511,4529,4551,4555,4592,4597,4621,4669,4673,4681,4685,4693,4723,4766,4774],{"__ignoreMap":508},[560,4470,4471,4473,4475,4477,4479,4481,4483,4485,4487],{"class":562,"line":509},[560,4472,566],{"class":565},[560,4474,570],{"class":569},[560,4476,574],{"class":573},[560,4478,577],{"class":573},[560,4480,580],{"class":565},[560,4482,583],{"class":565},[560,4484,587],{"class":586},[560,4486,583],{"class":565},[560,4488,592],{"class":565},[560,4490,4491,4493,4495,4497,4499,4501,4503,4505,4507,4509],{"class":562,"line":510},[560,4492,600],{"class":599},[560,4494,603],{"class":565},[560,4496,2272],{"class":606},[560,4498,610],{"class":565},[560,4500,4269],{"class":606},[560,4502,616],{"class":565},[560,4504,619],{"class":599},[560,4506,622],{"class":565},[560,4508,625],{"class":586},[560,4510,628],{"class":565},[560,4512,4513,4515,4517,4519,4521,4523,4525,4527],{"class":562,"line":631},[560,4514,600],{"class":599},[560,4516,603],{"class":565},[560,4518,3411],{"class":606},[560,4520,616],{"class":565},[560,4522,619],{"class":599},[560,4524,622],{"class":565},[560,4526,556],{"class":586},[560,4528,628],{"class":565},[560,4530,4531,4533,4535,4537,4540,4542,4544,4546,4549],{"class":562,"line":652},[560,4532,600],{"class":599},[560,4534,3364],{"class":599},[560,4536,603],{"class":565},[560,4538,4539],{"class":606}," Mesh",[560,4541,616],{"class":565},[560,4543,619],{"class":599},[560,4545,622],{"class":565},[560,4547,4548],{"class":586},"three",[560,4550,628],{"class":565},[560,4552,4553],{"class":562,"line":662},[560,4554,665],{"emptyLinePlaceholder":516},[560,4556,4557,4559,4561,4563,4565,4567,4569,4571,4573,4576,4578,4580,4582,4584,4586,4588,4590],{"class":562,"line":668},[560,4558,2337],{"class":573},[560,4560,603],{"class":565},[560,4562,4292],{"class":606},[560,4564,2350],{"class":565},[560,4566,2353],{"class":565},[560,4568,4269],{"class":2356},[560,4570,2359],{"class":606},[560,4572,2362],{"class":565},[560,4574,4575],{"class":586},"/models/mug.glb",[560,4577,2362],{"class":565},[560,4579,610],{"class":565},[560,4581,603],{"class":565},[560,4583,4314],{"class":569},[560,4585,1141],{"class":565},[560,4587,4320],{"class":4319},[560,4589,616],{"class":565},[560,4591,2370],{"class":606},[560,4593,4594],{"class":562,"line":678},[560,4595,4596],{"class":1132},"// nodes.Mug is a Group — pick the child you want to decal.\n",[560,4598,4599,4601,4604,4606,4608,4610,4612,4614,4616,4618],{"class":562,"line":701},[560,4600,2337],{"class":573},[560,4602,4603],{"class":606}," body ",[560,4605,580],{"class":565},[560,4607,3411],{"class":2356},[560,4609,566],{"class":565},[560,4611,4214],{"class":1123},[560,4613,3567],{"class":565},[560,4615,3570],{"class":1123},[560,4617,3573],{"class":565},[560,4619,4620],{"class":606},"(\n",[560,4622,4623,4626,4628,4631,4633,4635,4637,4640,4642,4645,4647,4649,4652,4654,4657,4660,4662,4664,4666],{"class":562,"line":713},[560,4624,4625],{"class":565},"  ()",[560,4627,3599],{"class":573},[560,4629,4630],{"class":606}," (nodes",[560,4632,1069],{"class":565},[560,4634,3607],{"class":606},[560,4636,3610],{"class":565},[560,4638,4639],{"class":606},"Mug",[560,4641,3610],{"class":565},[560,4643,4644],{"class":2356},"getObjectByName",[560,4646,2359],{"class":606},[560,4648,2362],{"class":565},[560,4650,4651],{"class":586},"Body",[560,4653,2362],{"class":565},[560,4655,4656],{"class":606},") ",[560,4658,4659],{"class":599},"as",[560,4661,4539],{"class":1123},[560,4663,4656],{"class":606},[560,4665,3616],{"class":565},[560,4667,4668],{"class":565}," null,\n",[560,4670,4671],{"class":562,"line":723},[560,4672,2370],{"class":606},[560,4674,4675,4677,4679],{"class":562,"line":728},[560,4676,655],{"class":565},[560,4678,570],{"class":569},[560,4680,592],{"class":565},[560,4682,4683],{"class":562,"line":750},[560,4684,665],{"emptyLinePlaceholder":516},[560,4686,4687,4689,4691],{"class":562,"line":554},[560,4688,566],{"class":565},[560,4690,673],{"class":569},[560,4692,592],{"class":565},[560,4694,4695,4697,4699,4701,4703,4705,4708,4710,4712,4714,4716,4719,4721],{"class":562,"line":773},[560,4696,681],{"class":565},[560,4698,4356],{"class":569},[560,4700,2632],{"class":573},[560,4702,580],{"class":565},[560,4704,583],{"class":565},[560,4706,4707],{"class":586},"nodes?.Mug",[560,4709,583],{"class":565},[560,4711,4370],{"class":573},[560,4713,580],{"class":565},[560,4715,583],{"class":565},[560,4717,4718],{"class":586},"nodes.Mug",[560,4720,583],{"class":565},[560,4722,592],{"class":565},[560,4724,4725,4727,4729,4731,4733,4735,4738,4740,4742,4744,4746,4748,4750,4753,4755,4757,4760,4762,4764],{"class":562,"line":784},[560,4726,704],{"class":565},[560,4728,53],{"class":569},[560,4730,2644],{"class":573},[560,4732,580],{"class":565},[560,4734,583],{"class":565},[560,4736,4737],{"class":586},"layout.mug",[560,4739,583],{"class":565},[560,4741,2656],{"class":573},[560,4743,580],{"class":565},[560,4745,583],{"class":565},[560,4747,2875],{"class":586},[560,4749,583],{"class":565},[560,4751,4752],{"class":573}," :mesh",[560,4754,580],{"class":565},[560,4756,583],{"class":565},[560,4758,4759],{"class":586},"body",[560,4761,583],{"class":565},[560,4763,3827],{"class":573},[560,4765,710],{"class":565},[560,4767,4768,4770,4772],{"class":562,"line":795},[560,4769,828],{"class":565},[560,4771,4356],{"class":569},[560,4773,592],{"class":565},[560,4775,4776,4778,4780],{"class":562,"line":805},[560,4777,655],{"class":565},[560,4779,673],{"class":569},[560,4781,592],{"class":565},[3973,4783,4785],{"id":4784},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[536,4787,4788,4789,4795,4796,4803,4804,4806,4807,1141],{},"Alternatively, ",[1591,4790,4791,4792,4794],{},"wrap a ",[540,4793,2232],{}," 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,4797,4800],{"href":4798,"rel":4799},"https://docs.tresjs.org/api/composables.html#usegraph",[1067],[540,4801,4802],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[540,4805,2232],{}," around its\n",[540,4808,4809],{},":geometry",[549,4811,4813],{"className":551,"code":4812,"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,4814,4815,4835,4859,4877,4897,4915,4919,4951,4980,4994,5022,5030,5034,5042,5049,5063,5077,5091,5096,5127,5157,5165],{"__ignoreMap":508},[560,4816,4817,4819,4821,4823,4825,4827,4829,4831,4833],{"class":562,"line":509},[560,4818,566],{"class":565},[560,4820,570],{"class":569},[560,4822,574],{"class":573},[560,4824,577],{"class":573},[560,4826,580],{"class":565},[560,4828,583],{"class":565},[560,4830,587],{"class":586},[560,4832,583],{"class":565},[560,4834,592],{"class":565},[560,4836,4837,4839,4841,4844,4846,4849,4851,4853,4855,4857],{"class":562,"line":510},[560,4838,600],{"class":599},[560,4840,603],{"class":565},[560,4842,4843],{"class":606}," useGraph",[560,4845,610],{"class":565},[560,4847,4848],{"class":606}," useLoader",[560,4850,616],{"class":565},[560,4852,619],{"class":599},[560,4854,622],{"class":565},[560,4856,647],{"class":586},[560,4858,628],{"class":565},[560,4860,4861,4863,4865,4867,4869,4871,4873,4875],{"class":562,"line":631},[560,4862,600],{"class":599},[560,4864,603],{"class":565},[560,4866,2272],{"class":606},[560,4868,616],{"class":565},[560,4870,619],{"class":599},[560,4872,622],{"class":565},[560,4874,625],{"class":586},[560,4876,628],{"class":565},[560,4878,4879,4881,4883,4886,4888,4890,4892,4895],{"class":562,"line":652},[560,4880,600],{"class":599},[560,4882,603],{"class":565},[560,4884,4885],{"class":606}," GLTFLoader",[560,4887,616],{"class":565},[560,4889,619],{"class":599},[560,4891,622],{"class":565},[560,4893,4894],{"class":586},"three/examples/jsm/loaders/GLTFLoader.js",[560,4896,628],{"class":565},[560,4898,4899,4901,4903,4905,4907,4909,4911,4913],{"class":562,"line":662},[560,4900,600],{"class":599},[560,4902,603],{"class":565},[560,4904,3411],{"class":606},[560,4906,616],{"class":565},[560,4908,619],{"class":599},[560,4910,622],{"class":565},[560,4912,556],{"class":586},[560,4914,628],{"class":565},[560,4916,4917],{"class":562,"line":668},[560,4918,665],{"emptyLinePlaceholder":516},[560,4920,4921,4923,4925,4927,4929,4932,4934,4936,4938,4941,4943,4945,4947,4949],{"class":562,"line":678},[560,4922,2337],{"class":573},[560,4924,603],{"class":565},[560,4926,2342],{"class":569},[560,4928,1141],{"class":565},[560,4930,4931],{"class":606}," model ",[560,4933,2350],{"class":565},[560,4935,2353],{"class":565},[560,4937,4848],{"class":2356},[560,4939,4940],{"class":606},"(GLTFLoader",[560,4942,610],{"class":565},[560,4944,622],{"class":565},[560,4946,4305],{"class":586},[560,4948,2362],{"class":565},[560,4950,2370],{"class":606},[560,4952,4953,4955,4958,4960,4962,4964,4966,4968,4971,4973,4975,4977],{"class":562,"line":701},[560,4954,2337],{"class":573},[560,4956,4957],{"class":606}," scene ",[560,4959,580],{"class":565},[560,4961,3411],{"class":2356},[560,4963,2359],{"class":606},[560,4965,3596],{"class":565},[560,4967,3599],{"class":573},[560,4969,4970],{"class":606}," model",[560,4972,1069],{"class":565},[560,4974,3607],{"class":606},[560,4976,3610],{"class":565},[560,4978,4979],{"class":606},"scene)\n",[560,4981,4982,4984,4987,4989,4991],{"class":562,"line":713},[560,4983,2337],{"class":573},[560,4985,4986],{"class":606}," graph ",[560,4988,580],{"class":565},[560,4990,4843],{"class":2356},[560,4992,4993],{"class":606},"(scene)\n",[560,4995,4996,4998,5000,5002,5004,5006,5008,5010,5013,5015,5017,5019],{"class":562,"line":723},[560,4997,2337],{"class":573},[560,4999,4292],{"class":606},[560,5001,580],{"class":565},[560,5003,3411],{"class":2356},[560,5005,2359],{"class":606},[560,5007,3596],{"class":565},[560,5009,3599],{"class":573},[560,5011,5012],{"class":606}," graph",[560,5014,1069],{"class":565},[560,5016,3607],{"class":606},[560,5018,3610],{"class":565},[560,5020,5021],{"class":606},"nodes)\n",[560,5023,5024,5026,5028],{"class":562,"line":728},[560,5025,655],{"class":565},[560,5027,570],{"class":569},[560,5029,592],{"class":565},[560,5031,5032],{"class":562,"line":750},[560,5033,665],{"emptyLinePlaceholder":516},[560,5035,5036,5038,5040],{"class":562,"line":554},[560,5037,566],{"class":565},[560,5039,673],{"class":569},[560,5041,592],{"class":565},[560,5043,5044,5046],{"class":562,"line":773},[560,5045,681],{"class":565},[560,5047,5048],{"class":569},"TresMesh\n",[560,5050,5051,5054,5056,5058,5061],{"class":562,"line":784},[560,5052,5053],{"class":573},"    v-if",[560,5055,580],{"class":565},[560,5057,583],{"class":565},[560,5059,5060],{"class":586},"nodes?.Helmet.geometry",[560,5062,3053],{"class":565},[560,5064,5065,5068,5070,5072,5075],{"class":562,"line":795},[560,5066,5067],{"class":573},"    name",[560,5069,580],{"class":565},[560,5071,583],{"class":565},[560,5073,5074],{"class":586},"helmet",[560,5076,3053],{"class":565},[560,5078,5079,5082,5084,5086,5089],{"class":562,"line":805},[560,5080,5081],{"class":573},"    :geometry",[560,5083,580],{"class":565},[560,5085,583],{"class":565},[560,5087,5088],{"class":586},"nodes.Helmet.geometry",[560,5090,3053],{"class":565},[560,5092,5093],{"class":562,"line":555},[560,5094,5095],{"class":565},"  >\n",[560,5097,5098,5100,5102,5104,5106,5108,5111,5113,5116,5118,5120,5123,5125],{"class":562,"line":825},[560,5099,704],{"class":565},[560,5101,4356],{"class":569},[560,5103,4370],{"class":573},[560,5105,580],{"class":565},[560,5107,583],{"class":565},[560,5109,5110],{"class":586},"nodes.Helmet.material",[560,5112,583],{"class":565},[560,5114,5115],{"class":573}," attach",[560,5117,580],{"class":565},[560,5119,583],{"class":565},[560,5121,5122],{"class":586},"material",[560,5124,583],{"class":565},[560,5126,710],{"class":565},[560,5128,5129,5131,5133,5135,5137,5139,5141,5143,5145,5147,5149,5151,5153,5155],{"class":562,"line":835},[560,5130,704],{"class":565},[560,5132,53],{"class":569},[560,5134,2644],{"class":573},[560,5136,580],{"class":565},[560,5138,583],{"class":565},[560,5140,4396],{"class":586},[560,5142,583],{"class":565},[560,5144,2656],{"class":573},[560,5146,580],{"class":565},[560,5148,583],{"class":565},[560,5150,2875],{"class":586},[560,5152,583],{"class":565},[560,5154,3827],{"class":573},[560,5156,710],{"class":565},[560,5158,5159,5161,5163],{"class":562,"line":2547},[560,5160,828],{"class":565},[560,5162,779],{"class":569},[560,5164,592],{"class":565},[560,5166,5167,5169,5171],{"class":562,"line":2556},[560,5168,655],{"class":565},[560,5170,673],{"class":569},[560,5172,592],{"class":565},[536,5174,5175,5176,2985,5179,5181,5182,5184,5185,5187],{},"The mesh's ",[540,5177,5178],{},"geometry",[540,5180,5122],{}," come from the loaded model; the\n",[540,5183,2132],{}," lives inside a regular ",[540,5186,2232],{}," with a clean scene-graph\nparent.",[3121,5189,5190],{},[536,5191,5192,5193,5195,5196,5199,5200,5203,5204,5207],{},"A saved decal's ",[540,5194,4052],{}," is stored in ",[1591,5197,5198],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1591,5201,5202],{},"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,5205,5206],{},"\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,5209,5211],{"id":5210},"json-schema","JSON schema",[536,5213,5214,5215,5217,5218,5221,5222,5224,5225,1069],{},"Each entry in the ",[540,5216,2940],{}," array follows the ",[540,5219,5220],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[540,5223,2147],{}," groups these by mesh name as\n",[540,5226,5227],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5229,5230,5231,5232,5236],"details",{},"\n  ",[5233,5234,5235],"summary",{},"Full schema",[549,5237,5239],{"className":1109,"code":5238,"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,5240,5241,5250,5263,5290,5314,5338,5350,5366,5380,5391,5403,5415,5427,5431,5435,5460],{"__ignoreMap":508},[560,5242,5243,5246,5248],{"class":562,"line":509},[560,5244,5245],{"class":573},"interface",[560,5247,3374],{"class":1123},[560,5249,1127],{"class":565},[560,5251,5252,5255,5257,5260],{"class":562,"line":510},[560,5253,5254],{"class":569},"  id",[560,5256,1141],{"class":565},[560,5258,5259],{"class":1123}," string",[560,5261,5262],{"class":1132}," // stable UUID\n",[560,5264,5265,5268,5270,5272,5275,5277,5280,5282,5284,5287],{"class":562,"line":631},[560,5266,5267],{"class":569},"  position",[560,5269,1141],{"class":565},[560,5271,2420],{"class":606},[560,5273,5274],{"class":1123},"number",[560,5276,610],{"class":565},[560,5278,5279],{"class":1123}," number",[560,5281,610],{"class":565},[560,5283,5279],{"class":1123},[560,5285,5286],{"class":606},"] ",[560,5288,5289],{"class":1132},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[560,5291,5292,5295,5297,5299,5301,5303,5305,5307,5309,5311],{"class":562,"line":652},[560,5293,5294],{"class":569},"  orientation",[560,5296,1141],{"class":565},[560,5298,2420],{"class":606},[560,5300,5274],{"class":1123},[560,5302,610],{"class":565},[560,5304,5279],{"class":1123},[560,5306,610],{"class":565},[560,5308,5279],{"class":1123},[560,5310,5286],{"class":606},[560,5312,5313],{"class":1132},"// Euler XYZ\n",[560,5315,5316,5319,5321,5323,5325,5327,5329,5331,5333,5335],{"class":562,"line":662},[560,5317,5318],{"class":569},"  size",[560,5320,1141],{"class":565},[560,5322,2420],{"class":606},[560,5324,5274],{"class":1123},[560,5326,610],{"class":565},[560,5328,5279],{"class":1123},[560,5330,610],{"class":565},[560,5332,5279],{"class":1123},[560,5334,5286],{"class":606},[560,5336,5337],{"class":1132},"// extents along X/Y; Z = projection depth\n",[560,5339,5340,5343,5345,5347],{"class":562,"line":668},[560,5341,5342],{"class":569},"  zIndex",[560,5344,1141],{"class":565},[560,5346,5279],{"class":1123},[560,5348,5349],{"class":1132}," // per-mesh layer order, ≥ 0\n",[560,5351,5352,5355,5357,5359,5361,5363],{"class":562,"line":678},[560,5353,5354],{"class":569},"  map",[560,5356,1141],{"class":565},[560,5358,5259],{"class":1123},[560,5360,3567],{"class":565},[560,5362,3570],{"class":1123},[560,5364,5365],{"class":1132}," // matches a texture's .name\n",[560,5367,5368,5371,5374,5377],{"class":562,"line":701},[560,5369,5370],{"class":569},"  flipX",[560,5372,5373],{"class":565},"?:",[560,5375,5376],{"class":1123}," boolean",[560,5378,5379],{"class":1132}," // omitted when false\n",[560,5381,5382,5385,5387,5389],{"class":562,"line":713},[560,5383,5384],{"class":569},"  flipY",[560,5386,5373],{"class":565},[560,5388,5376],{"class":1123},[560,5390,5379],{"class":1132},[560,5392,5393,5396,5398,5400],{"class":562,"line":723},[560,5394,5395],{"class":569},"  color",[560,5397,5373],{"class":565},[560,5399,5259],{"class":1123},[560,5401,5402],{"class":1132}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[560,5404,5405,5408,5410,5412],{"class":562,"line":728},[560,5406,5407],{"class":569},"  opacity",[560,5409,5373],{"class":565},[560,5411,5279],{"class":1123},[560,5413,5414],{"class":1132}," // 0..1, omitted when 1\n",[560,5416,5417,5420,5422,5424],{"class":562,"line":750},[560,5418,5419],{"class":569},"  visible",[560,5421,5373],{"class":565},[560,5423,5376],{"class":1123},[560,5425,5426],{"class":1132}," // omitted when true; false hides the decal\n",[560,5428,5429],{"class":562,"line":554},[560,5430,1248],{"class":565},[560,5432,5433],{"class":562,"line":773},[560,5434,665],{"emptyLinePlaceholder":516},[560,5436,5437,5440,5443,5445,5448,5450,5452,5454,5456,5458],{"class":562,"line":784},[560,5438,5439],{"class":573},"type",[560,5441,5442],{"class":1123}," DecalLayout",[560,5444,2353],{"class":565},[560,5446,5447],{"class":1123}," Record",[560,5449,566],{"class":565},[560,5451,3494],{"class":1123},[560,5453,610],{"class":565},[560,5455,3374],{"class":1123},[560,5457,3501],{"class":606},[560,5459,592],{"class":565},[560,5461,5462],{"class":562,"line":795},[560,5463,5464],{"class":1132},"// { sphere: [...], cube: [...] }\n",[545,5466,5468,5470],{"id":5467},"decal-props",[540,5469,2132],{}," props",[850,5472,5473,5483],{},[853,5474,5475],{},[856,5476,5477,5479,5481],{},[859,5478,861],{},[859,5480,864],{},[859,5482,867],{},[869,5484,5485,5501,5521,5558,5576,5590,5604,5624,5652],{},[856,5486,5487,5491,5497],{},[874,5488,5489],{},[1591,5490,2940],{},[874,5492,5493,5494,5496],{},"Two-way list of stamped decals (use with ",[540,5495,2192],{},").",[874,5498,5499],{},[540,5500,3501],{},[856,5502,5503,5507,5517],{},[874,5504,5505],{},[1591,5506,2903],{},[874,5508,5509,5510,5512,5513,5516],{},"A single ",[540,5511,2171],{}," or array of ",[540,5514,5515],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[874,5518,5519],{},[540,5520,3578],{},[856,5522,5523,5528,5554],{},[874,5524,5525],{},[1591,5526,5527],{},"mesh",[874,5529,5530,5531,5533,5534,5537,5538,5540,5541,5544,5545,3258,5547,3258,5550,5553],{},"Optional explicit target mesh (",[540,5532,4214],{}," or ",[540,5535,5536],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[540,5539,2132],{}," is auto-resolved via a hidden anchor ",[540,5542,5543],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[540,5546,4052],{},[540,5548,5549],{},"rotation",[540,5551,5552],{},"scale"," via the scene-graph hierarchy.",[874,5555,5556],{},[540,5557,3578],{},[856,5559,5560,5564,5572],{},[874,5561,5562],{},[1591,5563,3108],{},[874,5565,4222,5566,5568,5569,5571],{},[540,5567,884],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[540,5570,2147],{}," interactions to work on this Decal.",[874,5573,5574],{},[540,5575,894],{},[856,5577,5578,5583,5586],{},[874,5579,5580],{},[1591,5581,5582],{},"baseSize",[874,5584,5585],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[874,5587,5588],{},[540,5589,1796],{},[856,5591,5592,5597,5600],{},[874,5593,5594],{},[1591,5595,5596],{},"baseOffset",[874,5598,5599],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[874,5601,5602],{},[540,5603,1808],{},[856,5605,5606,5610,5619],{},[874,5607,5608],{},[1591,5609,3018],{},[874,5611,5612,5613,5615,5616,5618],{},"Extra offset added per ",[540,5614,2214],{}," step on top of ",[540,5617,5596],{},". Increase if stacked decals still flicker.",[874,5620,5621],{},[540,5622,5623],{},"0.001",[856,5625,5626,5631,5647],{},[874,5627,5628],{},[1591,5629,5630],{},"cullThreshold",[874,5632,5633,5634,5637,5638,5643,5644,5646],{},"Drops projected triangles whose face normal makes an angle steeper than ",[540,5635,5636],{},"acos(threshold)"," with the projector. Mitigates ",[1063,5639,5642],{"href":5640,"rel":5641},"https://github.com/mrdoob/three.js/issues/21187",[1067],"#21187",". Pass ",[540,5645,888],{}," to disable.",[874,5648,5649],{},[540,5650,5651],{},"0.2",[856,5653,5654,5659,5662],{},[874,5655,5656],{},[1591,5657,5658],{},"edgeColor",[874,5660,5661],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[874,5663,5664],{},[540,5665,5666],{},"#0000ff",[545,5668,5670,5672],{"id":5669},"decal-events",[540,5671,2132],{}," events",[850,5674,5675,5687],{},[853,5676,5677],{},[856,5678,5679,5682,5685],{},[859,5680,5681],{},"Event",[859,5683,5684],{},"Payload",[859,5686,864],{},[869,5688,5689,5704,5719,5733,5753,5771,5788],{},[856,5690,5691,5696,5701],{},[874,5692,5693],{},[540,5694,5695],{},"update:data",[874,5697,5698],{},[540,5699,5700],{},"DecalJsonEntry[]",[874,5702,5703],{},"v-model partner — fires whenever the JSON list changes.",[856,5705,5706,5711,5716],{},[874,5707,5708],{},[540,5709,5710],{},"add",[874,5712,5713],{},[540,5714,5715],{},"DecalEntry",[874,5717,5718],{},"A new decal has been committed (create mode → confirm).",[856,5720,5721,5726,5730],{},[874,5722,5723],{},[540,5724,5725],{},"update",[874,5727,5728],{},[540,5729,5715],{},[874,5731,5732],{},"An existing decal has been committed (update mode → confirm).",[856,5734,5735,5740,5744],{},[874,5736,5737],{},[540,5738,5739],{},"delete",[874,5741,5742],{},[540,5743,5715],{},[874,5745,5746,5747,3258,5750,5496],{},"A decal has been removed (delete button or ",[540,5748,5749],{},"Del",[540,5751,5752],{},"Backspace",[856,5754,5755,5760,5764],{},[874,5756,5757],{},[540,5758,5759],{},"select",[874,5761,5762],{},[540,5763,5715],{},[874,5765,5766,5767,5770],{},"Edition began on ",[540,5768,5769],{},"entry"," (panel click, 3D click, or programmatic).",[856,5772,5773,5778,5781],{},[874,5774,5775],{},[540,5776,5777],{},"cancel",[874,5779,5780],{},"—",[874,5782,5783,5784,5787],{},"Edition was aborted without commit (",[540,5785,5786],{},"Esc",", click-outside in create mode).",[856,5789,5790,5795,5800],{},[874,5791,5792],{},[540,5793,5794],{},"decalClick",[874,5796,5797],{},[540,5798,5799],{},"{ entry: DecalEntry, event: MouseEvent }",[874,5801,5802,5803,5805,5806,1069],{},"Fires on click of any stamped decal, even when ",[540,5804,3108],{}," is ",[540,5807,894],{},[545,5809,5811,5813,5814,3262],{"id":5810},"decal-exposed-via-ref",[540,5812,2132],{}," exposed (via ",[540,5815,5816],{},"ref",[536,5818,5819,5820,5823],{},"The template ref resolves to ",[540,5821,5822],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[549,5825,5827],{"className":1109,"code":5826,"language":587,"meta":508,"style":508},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[540,5828,5829,5850,5854],{"__ignoreMap":508},[560,5830,5831,5833,5835,5837,5840,5842,5844,5846,5848],{"class":562,"line":509},[560,5832,600],{"class":599},[560,5834,3364],{"class":599},[560,5836,603],{"class":565},[560,5838,5839],{"class":606}," DecalImperativeApi",[560,5841,616],{"class":565},[560,5843,619],{"class":599},[560,5845,622],{"class":565},[560,5847,625],{"class":586},[560,5849,628],{"class":565},[560,5851,5852],{"class":562,"line":510},[560,5853,665],{"emptyLinePlaceholder":516},[560,5855,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874,5876,5878],{"class":562,"line":631},[560,5857,2337],{"class":573},[560,5859,3548],{"class":606},[560,5861,580],{"class":565},[560,5863,3794],{"class":2356},[560,5865,566],{"class":565},[560,5867,5822],{"class":1123},[560,5869,3567],{"class":565},[560,5871,3570],{"class":1123},[560,5873,3573],{"class":565},[560,5875,2359],{"class":606},[560,5877,3578],{"class":565},[560,5879,2370],{"class":606},[850,5881,5882,5894],{},[853,5883,5884],{},[856,5885,5886,5889,5892],{},[859,5887,5888],{},"Property",[859,5890,5891],{},"Type",[859,5893,864],{},[869,5895,5896,5914,5932,5950,5965],{},[856,5897,5898,5903,5908],{},[874,5899,5900],{},[540,5901,5902],{},"editor",[874,5904,5905],{},[540,5906,5907],{},"DecalEditorSession",[874,5909,5910,5911,1069],{},"The canvas-shared editor session. Pass it to ",[540,5912,5913],{},"\u003CDecalDebugUI :session>",[856,5915,5916,5921,5926],{},[874,5917,5918],{},[540,5919,5920],{},"beginEditById",[874,5922,5923],{},[540,5924,5925],{},"(id: string) => boolean",[874,5927,5928,5929,5931],{},"Programmatically start editing a specific decal. Returns ",[540,5930,894],{}," if the id is unknown.",[856,5933,5934,5939,5944],{},[874,5935,5936],{},[540,5937,5938],{},"commit",[874,5940,5941],{},[540,5942,5943],{},"() => void",[874,5945,5946,5947,5496],{},"Commit the in-flight edit (same as ",[540,5948,5949],{},"Enter",[856,5951,5952,5956,5960],{},[874,5953,5954],{},[540,5955,5777],{},[874,5957,5958],{},[540,5959,5943],{},[874,5961,5962,5963,5496],{},"Abort the in-flight edit (same as ",[540,5964,5786],{},[856,5966,5967,5972,5976],{},[874,5968,5969],{},[540,5970,5971],{},"remove",[874,5973,5974],{},[540,5975,5943],{},[874,5977,5978,5979,5496],{},"Delete the currently edited decal (same as ",[540,5980,5749],{},[545,5982,5984,5470],{"id":5983},"decaldebugui-props",[540,5985,2147],{},[850,5987,5988,5998],{},[853,5989,5990],{},[856,5991,5992,5994,5996],{},[859,5993,861],{},[859,5995,864],{},[859,5997,867],{},[869,5999,6000,6023,6048,6061,6081,6096,6119],{},[856,6001,6002,6006,6019],{},[874,6003,6004],{},[1591,6005,3657],{},[874,6007,6008,6011,6012,6014,6015,6018],{},[540,6009,6010],{},"DecalEditorSession | null"," — obtained from any ",[540,6013,2132],{}," ref via ",[540,6016,6017],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[874,6020,6021],{},[540,6022,3578],{},[856,6024,6025,6029,6043],{},[874,6026,6027],{},[1591,6028,2940],{},[874,6030,6031,6032,6035,6036,6039,6040,6042],{},"Mesh-name-keyed map of decal slices — ",[540,6033,6034],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[540,6037,6038],{},"\u003CTresMesh name=\"...\">"," whose child ",[540,6041,2132],{}," owns the slice.",[874,6044,6045],{},[540,6046,6047],{},"{}",[856,6049,6050,6054,6057],{},[874,6051,6052],{},[1591,6053,2875],{},[874,6055,6056],{},"The full texture palette shown in the dock's picker.",[874,6058,6059],{},[540,6060,3501],{},[856,6062,6063,6068,6077],{},[874,6064,6065],{},[1591,6066,6067],{},"theme",[874,6069,6070,5533,6073,6076],{},[540,6071,6072],{},"'light'",[540,6074,6075],{},"'dark'"," — overlay theme tokens.",[874,6078,6079],{},[540,6080,6072],{},[856,6082,6083,6088,6091],{},[874,6084,6085],{},[1591,6086,6087],{},"snapAngle",[874,6089,6090],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[874,6092,6093],{},[540,6094,6095],{},"15",[856,6097,6098,6103,6115],{},[874,6099,6100],{},[1591,6101,6102],{},"exportFilename",[874,6104,6105,6106,5643,6108,6110,6111,6114],{},"Filename for the built-in JSON download. When omitted, defaults to ",[540,6107,4101],{},[540,6109,3578],{}," to skip the auto-download (the ",[540,6112,6113],{},"@export"," event still fires).",[874,6116,6117],{},[540,6118,4101],{},[856,6120,6121,6125,6128],{},[874,6122,6123],{},[1591,6124,4028],{},[874,6126,6127],{},"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,6129,6130],{},[540,6131,894],{},[545,6133,6135,5672],{"id":6134},"decaldebugui-events",[540,6136,2147],{},[850,6138,6139,6149],{},[853,6140,6141],{},[856,6142,6143,6145,6147],{},[859,6144,5681],{},[859,6146,5684],{},[859,6148,864],{},[869,6150,6151,6165],{},[856,6152,6153,6157,6162],{},[874,6154,6155],{},[540,6156,1117],{},[874,6158,6159],{},[540,6160,6161],{},"DecalLayout",[874,6163,6164],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[856,6166,6167,6171,6175],{},[874,6168,6169],{},[540,6170,600],{},[874,6172,6173],{},[540,6174,6161],{},[874,6176,6177],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[545,6179,6181],{"id":6180},"caveats","Caveats",[2135,6183,6184,6199,6216,6232],{},[2138,6185,6186,6187,6190,6191,6194,6195,6198],{},"✨ The overlay sits at ",[540,6188,6189],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1591,6192,6193],{},"above"," the canvas by default\n(",[540,6196,6197],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2138,6200,6201,6202,6204,6205,6208,6209,1594,6212,6215],{},"🎨 ",[540,6203,2147],{}," ships its own theme in a global stylesheet under the\n",[540,6206,6207],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[540,6210,6211],{},"--accent",[540,6213,6214],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2138,6217,6218,6219,6222,6223,6225,6226,6228,6229,6231],{},"🔶 Decals are ",[1591,6220,6221],{},"per-canvas"," — if you have multiple ",[540,6224,3119],{}," in your\napp, each one has its own independent session. Pair each ",[540,6227,2147],{},"\nwith the right ",[540,6230,3657],{}," (from one of the Decals inside that canvas).",[2138,6233,6234,6235,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,6236,6237],{},":mesh=\"meshRef\"",[545,6239,6241],{"id":6240},"limitations","Limitations",[1927,6243,6244,6258,6265,6308],{},[536,6245,6246,6247,6250,6251,3258,6253,3258,6255,6257],{},"Decal vertices are baked into the ",[1591,6248,6249],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[540,6252,4052],{},[540,6254,5549],{},[540,6256,5552],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[536,6259,6260,6261,6264],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1591,6262,6263],{},"not"," followed:",[2135,6266,6267,6280,6288,6295],{},[2138,6268,6269,6274,6275,1069],{},[1591,6270,6271],{},[540,6272,6273],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1063,6276,6279],{"href":6277,"rel":6278},"https://github.com/mrdoob/three.js/issues/7926",[1067],"three.js#7926",[2138,6281,6282,6287],{},[1591,6283,6284],{},[540,6285,6286],{},"morphAttributes"," on the parent are ignored.",[2138,6289,6290,6291,6294],{},"Direct mutations of the parent's ",[540,6292,6293],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2138,6296,6297,6298,6302,6303,6305,6306,1069],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1063,6299,6301],{"href":5640,"rel":6300},[1067],"three.js#21187",") —\nmitigated by the ",[540,6304,5630],{}," prop, default ",[540,6307,5651],{},[536,6309,6310,6312],{},[540,6311,2132],{}," warns once per parent mesh when it detects these conditions.",[545,6314,6316],{"id":6315},"keyboard-shortcuts","Keyboard shortcuts",[850,6318,6319,6329],{},[853,6320,6321],{},[856,6322,6323,6326],{},[859,6324,6325],{},"Shortcut",[859,6327,6328],{},"Action",[869,6330,6331,6340,6349,6361,6374,6387],{},[856,6332,6333,6337],{},[874,6334,6335],{},[540,6336,5949],{},[874,6338,6339],{},"Confirm the in-flight edit",[856,6341,6342,6346],{},[874,6343,6344],{},[540,6345,5786],{},[874,6347,6348],{},"Cancel (revert updates, drop pending placements)",[856,6350,6351,6358],{},[874,6352,6353,3258,6355],{},[540,6354,5749],{},[540,6356,6357],{},"⌫",[874,6359,6360],{},"Delete the edited decal (or cancel a create)",[856,6362,6363,6371],{},[874,6364,6365,3258,6368],{},[540,6366,6367],{},"⌘Z",[540,6369,6370],{},"Ctrl+Z",[874,6372,6373],{},"Undo",[856,6375,6376,6384],{},[874,6377,6378,3258,6381],{},[540,6379,6380],{},"⇧⌘Z",[540,6382,6383],{},"Ctrl+⇧Z",[874,6385,6386],{},"Redo",[856,6388,6389,6392],{},[874,6390,6391],{},"Click outside",[874,6393,6394],{},"Auto-commit an in-flight update; cancel a create",[545,6396,6398,6399,3262],{"id":6397},"programmatic-api-usedecaleditor","Programmatic API (",[540,6400,6401],{},"useDecalEditor",[536,6403,6404,6405,6407,6408,6410,6411,6413,6414,6416],{},"Skip ",[540,6406,2147],{}," entirely or augment it with custom panels —\n",[540,6409,2160],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[540,6412,3119],{}," (after at\nleast one ",[540,6415,2132],{}," has mounted).",[549,6418,6420],{"className":1109,"code":6419,"language":587,"meta":508,"style":508},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[540,6421,6422,6441,6445],{"__ignoreMap":508},[560,6423,6424,6426,6428,6431,6433,6435,6437,6439],{"class":562,"line":509},[560,6425,600],{"class":599},[560,6427,603],{"class":565},[560,6429,6430],{"class":606}," useDecalEditor",[560,6432,616],{"class":565},[560,6434,619],{"class":599},[560,6436,622],{"class":565},[560,6438,625],{"class":586},[560,6440,628],{"class":565},[560,6442,6443],{"class":562,"line":510},[560,6444,665],{"emptyLinePlaceholder":516},[560,6446,6447,6449,6451,6453,6455],{"class":562,"line":631},[560,6448,2337],{"class":573},[560,6450,3587],{"class":606},[560,6452,580],{"class":565},[560,6454,6430],{"class":2356},[560,6456,6457],{"class":606},"()\n",[536,6459,6460,6461,1594,6464,2410,6467,1594,6470,6473,6474,2410,6476,1594,6479,1594,6482,6485,6486,6489,6490,6493,6494,1594,6497,1594,6500,2410,6503,6506],{},"The session exposes reactive state (",[540,6462,6463],{},"editingEntry",[540,6465,6466],{},"editingMode",[540,6468,6469],{},"canUndo",[540,6471,6472],{},"canRedo",", …), by-id mutators (",[540,6475,5920],{},[540,6477,6478],{},"setZIndexById",[540,6480,6481],{},"setVisibilityById",[540,6483,6484],{},"removeById","), batched updates\n(",[540,6487,6488],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[540,6491,6492],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[540,6495,6496],{},"ensureTextureNames",[540,6498,6499],{},"getTextureName",[540,6501,6502],{},"getTextureAspect",[540,6504,6505],{},"invalidateDecalGeometry",") are exported alongside.",[5229,6508,5231,6509,6512,6516,6591,6595,6666,6682,6686,6722,6728,6732,6871,6875,6921,6924,6928,6942,7112,7116],{},[5233,6510,6511],{},"Full API reference",[3973,6513,6515],{"id":6514},"reactive-state","Reactive state",[549,6517,6519],{"className":1109,"code":6518,"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,6520,6521,6533,6545,6557,6568,6580],{"__ignoreMap":508},[560,6522,6523,6525,6527,6530],{"class":562,"line":509},[560,6524,3657],{"class":606},[560,6526,1069],{"class":565},[560,6528,6529],{"class":606},"editingEntry ",[560,6531,6532],{"class":1132},"// ShallowRef\u003CDecalEntry | null>\n",[560,6534,6535,6537,6539,6542],{"class":562,"line":510},[560,6536,3657],{"class":606},[560,6538,1069],{"class":565},[560,6540,6541],{"class":606},"editingMode ",[560,6543,6544],{"class":1132},"// Ref\u003C'create' | 'update' | null>\n",[560,6546,6547,6549,6551,6554],{"class":562,"line":631},[560,6548,3657],{"class":606},[560,6550,1069],{"class":565},[560,6552,6553],{"class":606},"lockedMeshUuid ",[560,6555,6556],{"class":1132},"// Ref\u003Cstring | null>\n",[560,6558,6559,6561,6563,6566],{"class":562,"line":652},[560,6560,3657],{"class":606},[560,6562,1069],{"class":565},[560,6564,6565],{"class":606},"hoveredEntry ",[560,6567,6532],{"class":1132},[560,6569,6570,6572,6574,6577],{"class":562,"line":662},[560,6571,3657],{"class":606},[560,6573,1069],{"class":565},[560,6575,6576],{"class":606},"canUndo ",[560,6578,6579],{"class":1132},"// Ref\u003Cboolean>\n",[560,6581,6582,6584,6586,6589],{"class":562,"line":668},[560,6583,3657],{"class":606},[560,6585,1069],{"class":565},[560,6587,6588],{"class":606},"canRedo ",[560,6590,6579],{"class":1132},[3973,6592,6594],{"id":6593},"mutating-decals-by-id","Mutating decals by id",[549,6596,6598],{"className":1109,"code":6597,"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,6599,6600,6614,6633,6653],{"__ignoreMap":508},[560,6601,6602,6604,6606,6608,6611],{"class":562,"line":509},[560,6603,3657],{"class":606},[560,6605,1069],{"class":565},[560,6607,5920],{"class":2356},[560,6609,6610],{"class":606},"(id) ",[560,6612,6613],{"class":1132},"// start editing a placed decal\n",[560,6615,6616,6618,6620,6622,6625,6627,6630],{"class":562,"line":510},[560,6617,3657],{"class":606},[560,6619,1069],{"class":565},[560,6621,6478],{"class":2356},[560,6623,6624],{"class":606},"(id",[560,6626,610],{"class":565},[560,6628,6629],{"class":606}," newZ) ",[560,6631,6632],{"class":1132},"// reorder one decal\n",[560,6634,6635,6637,6639,6641,6643,6645,6648,6650],{"class":562,"line":631},[560,6636,3657],{"class":606},[560,6638,1069],{"class":565},[560,6640,6481],{"class":2356},[560,6642,6624],{"class":606},[560,6644,610],{"class":565},[560,6646,6647],{"class":4319}," false",[560,6649,4656],{"class":606},[560,6651,6652],{"class":1132},"// hide / show\n",[560,6654,6655,6657,6659,6661,6663],{"class":562,"line":652},[560,6656,3657],{"class":606},[560,6658,1069],{"class":565},[560,6660,6484],{"class":2356},[560,6662,6610],{"class":606},[560,6664,6665],{"class":1132},"// delete\n",[536,6667,6668,6669,6672,6673,6675,6676,6678,6679,6681],{},"When the targeted id matches the ",[1591,6670,6671],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[540,6674,5949],{},", reverted on ",[540,6677,5786],{},").\nOtherwise they update ",[540,6680,2940],{}," immediately and record history.",[3973,6683,6685],{"id":6684},"batched-mesh-updates","Batched mesh updates",[549,6687,6689],{"className":1109,"code":6688,"language":587,"meta":508,"style":508},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[540,6690,6691],{"__ignoreMap":508},[560,6692,6693,6695,6697,6699,6702,6704,6707,6709,6711,6714,6716,6718,6720],{"class":562,"line":509},[560,6694,3657],{"class":606},[560,6696,1069],{"class":565},[560,6698,6488],{"class":2356},[560,6700,6701],{"class":606},"(meshName",[560,6703,610],{"class":565},[560,6705,6706],{"class":606}," nextEntries",[560,6708,610],{"class":565},[560,6710,603],{"class":565},[560,6712,6713],{"class":569}," recordHistory",[560,6715,1141],{"class":565},[560,6717,4320],{"class":4319},[560,6719,616],{"class":565},[560,6721,2370],{"class":606},[536,6723,6724,6725,6727],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[540,6726,6478],{}," calls in the same tick.",[3973,6729,6731],{"id":6730},"listening-to-commits","Listening to commits",[549,6733,6735],{"className":1109,"code":6734,"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,6736,6737,6772,6797,6803,6831,6854,6858,6863],{"__ignoreMap":508},[560,6738,6739,6741,6744,6746,6749,6751,6754,6756,6758,6761,6763,6766,6768,6770],{"class":562,"line":509},[560,6740,2337],{"class":573},[560,6742,6743],{"class":606}," off ",[560,6745,580],{"class":565},[560,6747,6748],{"class":606}," session",[560,6750,1069],{"class":565},[560,6752,6753],{"class":2356},"onCommit",[560,6755,2359],{"class":606},[560,6757,2359],{"class":565},[560,6759,5769],{"class":6760},"sHdIc",[560,6762,610],{"class":565},[560,6764,6765],{"class":6760}," mode",[560,6767,3262],{"class":565},[560,6769,3599],{"class":573},[560,6771,1127],{"class":565},[560,6773,6774,6777,6779,6782,6784,6787,6789,6792,6794],{"class":562,"line":510},[560,6775,6776],{"class":606},"  console",[560,6778,1069],{"class":565},[560,6780,6781],{"class":2356},"log",[560,6783,2359],{"class":569},[560,6785,6786],{"class":606},"mode",[560,6788,610],{"class":565},[560,6790,6791],{"class":606}," entry",[560,6793,4656],{"class":569},[560,6795,6796],{"class":1132},"// mode: 'create' | 'update'\n",[560,6798,6799,6801],{"class":562,"line":631},[560,6800,2350],{"class":565},[560,6802,2370],{"class":606},[560,6804,6805,6807,6809,6812,6814,6816,6818,6820,6822,6824,6827,6829],{"class":562,"line":652},[560,6806,3657],{"class":606},[560,6808,1069],{"class":565},[560,6810,6811],{"class":2356},"onDelete",[560,6813,2359],{"class":606},[560,6815,2359],{"class":565},[560,6817,5769],{"class":6760},[560,6819,3262],{"class":565},[560,6821,3599],{"class":573},[560,6823,603],{"class":565},[560,6825,6826],{"class":1132}," /* … */",[560,6828,616],{"class":565},[560,6830,2370],{"class":606},[560,6832,6833,6835,6837,6840,6842,6844,6846,6848,6850,6852],{"class":562,"line":662},[560,6834,3657],{"class":606},[560,6836,1069],{"class":565},[560,6838,6839],{"class":2356},"onCancel",[560,6841,2359],{"class":606},[560,6843,3596],{"class":565},[560,6845,3599],{"class":573},[560,6847,603],{"class":565},[560,6849,6826],{"class":1132},[560,6851,616],{"class":565},[560,6853,2370],{"class":606},[560,6855,6856],{"class":562,"line":668},[560,6857,665],{"emptyLinePlaceholder":516},[560,6859,6860],{"class":562,"line":678},[560,6861,6862],{"class":1132},"// All return an unsubscribe function:\n",[560,6864,6865,6868],{"class":562,"line":701},[560,6866,6867],{"class":2356},"onBeforeUnmount",[560,6869,6870],{"class":606},"(off)\n",[3973,6872,6874],{"id":6873},"undo-redo","Undo / redo",[549,6876,6878],{"className":1109,"code":6877,"language":587,"meta":508,"style":508},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[540,6879,6880,6895,6910],{"__ignoreMap":508},[560,6881,6882,6884,6886,6888,6890,6893],{"class":562,"line":509},[560,6883,3657],{"class":606},[560,6885,1069],{"class":565},[560,6887,6469],{"class":606},[560,6889,1069],{"class":565},[560,6891,6892],{"class":606},"value ",[560,6894,6579],{"class":1132},[560,6896,6897,6899,6901,6904,6907],{"class":562,"line":510},[560,6898,3657],{"class":606},[560,6900,1069],{"class":565},[560,6902,6903],{"class":2356},"undo",[560,6905,6906],{"class":606},"() ",[560,6908,6909],{"class":1132},"// returns true if something was undone\n",[560,6911,6912,6914,6916,6919],{"class":562,"line":631},[560,6913,3657],{"class":606},[560,6915,1069],{"class":565},[560,6917,6918],{"class":2356},"redo",[560,6920,6457],{"class":606},[536,6922,6923],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[3973,6925,6927],{"id":6926},"power-user-external-entries","Power user — external entries",[536,6929,6930,6931,6933,6934,6937,6938,6941],{},"Plug a decal-like object that lives outside a ",[540,6932,2132],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[540,6935,6936],{},"DecalEntryActions"," bundle so the ",[540,6939,6940],{},"*ById"," session methods route to it:",[549,6943,6945],{"className":1109,"code":6944,"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,6946,6947,6968,6972,6993,7012,7034,7056,7073,7084],{"__ignoreMap":508},[560,6948,6949,6951,6953,6955,6958,6960,6962,6964,6966],{"class":562,"line":509},[560,6950,600],{"class":599},[560,6952,3364],{"class":599},[560,6954,603],{"class":565},[560,6956,6957],{"class":606}," DecalEntryActions",[560,6959,616],{"class":565},[560,6961,619],{"class":599},[560,6963,622],{"class":565},[560,6965,625],{"class":586},[560,6967,628],{"class":565},[560,6969,6970],{"class":562,"line":510},[560,6971,665],{"emptyLinePlaceholder":516},[560,6973,6974,6976,6978,6980,6982,6984,6987,6989,6991],{"class":562,"line":631},[560,6975,3657],{"class":606},[560,6977,1069],{"class":565},[560,6979,6492],{"class":2356},[560,6981,2359],{"class":606},[560,6983,2362],{"class":565},[560,6985,6986],{"class":586},"decal-7",[560,6988,2362],{"class":565},[560,6990,610],{"class":565},[560,6992,1127],{"class":565},[560,6994,6995,6998,7000,7003,7005,7007,7009],{"class":562,"line":652},[560,6996,6997],{"class":2356},"  beginEdit",[560,6999,1141],{"class":565},[560,7001,7002],{"class":565}," ()",[560,7004,3599],{"class":573},[560,7006,603],{"class":565},[560,7008,6826],{"class":1132},[560,7010,7011],{"class":565}," },\n",[560,7013,7014,7017,7019,7021,7024,7026,7028,7030,7032],{"class":562,"line":662},[560,7015,7016],{"class":2356},"  setZIndex",[560,7018,1141],{"class":565},[560,7020,2996],{"class":565},[560,7022,7023],{"class":6760},"newZ",[560,7025,3262],{"class":565},[560,7027,3599],{"class":573},[560,7029,603],{"class":565},[560,7031,6826],{"class":1132},[560,7033,7011],{"class":565},[560,7035,7036,7039,7041,7043,7046,7048,7050,7052,7054],{"class":562,"line":668},[560,7037,7038],{"class":2356},"  setVisibility",[560,7040,1141],{"class":565},[560,7042,2996],{"class":565},[560,7044,7045],{"class":6760},"visible",[560,7047,3262],{"class":565},[560,7049,3599],{"class":573},[560,7051,603],{"class":565},[560,7053,6826],{"class":1132},[560,7055,7011],{"class":565},[560,7057,7058,7061,7063,7065,7067,7069,7071],{"class":562,"line":678},[560,7059,7060],{"class":2356},"  remove",[560,7062,1141],{"class":565},[560,7064,7002],{"class":565},[560,7066,3599],{"class":573},[560,7068,603],{"class":565},[560,7070,6826],{"class":1132},[560,7072,7011],{"class":565},[560,7074,7075,7077,7080,7082],{"class":562,"line":701},[560,7076,2350],{"class":565},[560,7078,7079],{"class":599}," satisfies",[560,7081,6957],{"class":1123},[560,7083,2370],{"class":606},[560,7085,7086,7088,7090,7092,7094,7096,7098,7101,7103,7105,7107,7109],{"class":562,"line":713},[560,7087,6867],{"class":2356},[560,7089,2359],{"class":606},[560,7091,3596],{"class":565},[560,7093,3599],{"class":573},[560,7095,6748],{"class":606},[560,7097,1069],{"class":565},[560,7099,7100],{"class":2356},"unregisterDecalEntry",[560,7102,2359],{"class":606},[560,7104,2362],{"class":565},[560,7106,6986],{"class":586},[560,7108,2362],{"class":565},[560,7110,7111],{"class":606},"))\n",[3973,7113,7115],{"id":7114},"helper-utilities","Helper utilities",[850,7117,7118,7127],{},[853,7119,7120],{},[856,7121,7122,7124],{},[859,7123,315],{},[859,7125,7126],{},"Use",[869,7128,7129,7149,7161,7174],{},[856,7130,7131,7136],{},[874,7132,7133],{},[540,7134,7135],{},"ensureTextureNames(textures)",[874,7137,7138,7139,7141,7142,7145,7146,1069],{},"Back-fills ",[540,7140,2899],{}," from ",[540,7143,7144],{},"userData.name"," or the filename in ",[540,7147,7148],{},"image.src",[856,7150,7151,7156],{},[874,7152,7153],{},[540,7154,7155],{},"getTextureName(texture)",[874,7157,7158,7159,1069],{},"Single-texture variant — returns a stable name or ",[540,7160,3578],{},[856,7162,7163,7168],{},[874,7164,7165],{},[540,7166,7167],{},"getTextureAspect(texture)",[874,7169,7170,7173],{},[540,7171,7172],{},"{ x, y }"," aspect ratio for custom-sized decals.",[856,7175,7176,7181],{},[874,7177,7178],{},[540,7179,7180],{},"invalidateDecalGeometry(mesh)",[874,7182,7183],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1250,7185,7186],{},"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":7188},[7189,7190,7191,7192,7193,7197,7198,7206,7207,7209,7211,7213,7215,7217,7218,7219,7220],{"id":547,"depth":510,"text":15},{"id":2712,"depth":510,"text":2713},{"id":2907,"depth":510,"text":2181},{"id":3004,"depth":510,"text":3005},{"id":3099,"depth":510,"text":7194,"children":7195},"Editable mode + \u003CDecalDebugUI>",[7196],{"id":3975,"depth":631,"text":3976},{"id":4095,"depth":510,"text":3301},{"id":4194,"depth":510,"text":7199,"children":7200},"Targeting a loaded model (.glb)",[7201,7203,7205],{"id":4221,"depth":631,"text":7202},"When :object is a Mesh",{"id":4443,"depth":631,"text":7204},"When :object is a Group",{"id":4784,"depth":631,"text":4785},{"id":5210,"depth":510,"text":5211},{"id":5467,"depth":510,"text":7208},"\u003CDecal> props",{"id":5669,"depth":510,"text":7210},"\u003CDecal> events",{"id":5810,"depth":510,"text":7212},"\u003CDecal> exposed (via ref)",{"id":5983,"depth":510,"text":7214},"\u003CDecalDebugUI> props",{"id":6134,"depth":510,"text":7216},"\u003CDecalDebugUI> events",{"id":6180,"depth":510,"text":6181},{"id":6240,"depth":510,"text":6241},{"id":6315,"depth":510,"text":6316},{"id":6397,"depth":510,"text":7221},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7222},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7227,"title":57,"body":7228,"description":7516,"extension":513,"links":514,"meta":7517,"navigation":516,"path":58,"seo":7518,"stem":59,"__hash__":7519},"docs/2.api/1.abstractions/edges.md",{"type":501,"value":7229,"toc":7512},[7230,7235,7251,7253,7430,7432,7449,7510],[530,7231,7232],{},[7233,7234],"abstractions-edges",{},[536,7236,2698,7237,7240,7241,7246,7247,7250],{},[540,7238,7239],{},"cientos"," package provides an abstraction of ",[1063,7242,7245],{"href":7243,"rel":7244},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1067],"EdgesGeometry"," from Three.js, ",[540,7248,7249],{},"\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,7252,15],{"id":547},[549,7254,7257],{"className":551,"code":7255,"highlights":7256,"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,7258,7259,7279,7297,7325,7333,7337,7345,7353,7372,7380,7388,7397,7406,7414,7422],{"__ignoreMap":508},[560,7260,7261,7263,7265,7267,7269,7271,7273,7275,7277],{"class":562,"line":509},[560,7262,566],{"class":565},[560,7264,570],{"class":569},[560,7266,574],{"class":573},[560,7268,577],{"class":573},[560,7270,580],{"class":565},[560,7272,583],{"class":565},[560,7274,587],{"class":586},[560,7276,583],{"class":565},[560,7278,592],{"class":565},[560,7280,7281,7283,7285,7287,7289,7291,7293,7295],{"class":562,"line":510},[560,7282,600],{"class":599},[560,7284,603],{"class":565},[560,7286,638],{"class":606},[560,7288,616],{"class":565},[560,7290,619],{"class":599},[560,7292,622],{"class":565},[560,7294,647],{"class":586},[560,7296,628],{"class":565},[560,7298,7300,7302,7304,7306,7308,7311,7313,7315,7317,7319,7321,7323],{"class":7299,"line":631},[562,596],[560,7301,600],{"class":599},[560,7303,603],{"class":565},[560,7305,1319],{"class":606},[560,7307,610],{"class":565},[560,7309,7310],{"class":606}," Edges",[560,7312,610],{"class":565},[560,7314,613],{"class":606},[560,7316,616],{"class":565},[560,7318,619],{"class":599},[560,7320,622],{"class":565},[560,7322,625],{"class":586},[560,7324,628],{"class":565},[560,7326,7327,7329,7331],{"class":562,"line":652},[560,7328,655],{"class":565},[560,7330,570],{"class":569},[560,7332,592],{"class":565},[560,7334,7335],{"class":562,"line":662},[560,7336,665],{"emptyLinePlaceholder":516},[560,7338,7339,7341,7343],{"class":562,"line":668},[560,7340,566],{"class":565},[560,7342,673],{"class":569},[560,7344,592],{"class":565},[560,7346,7347,7349,7351],{"class":562,"line":678},[560,7348,681],{"class":565},[560,7350,684],{"class":569},[560,7352,592],{"class":565},[560,7354,7355,7357,7359,7361,7363,7365,7368,7370],{"class":562,"line":701},[560,7356,704],{"class":565},[560,7358,707],{"class":569},[560,7360,1407],{"class":573},[560,7362,580],{"class":565},[560,7364,583],{"class":565},[560,7366,7367],{"class":586},"[0, 2, 5]",[560,7369,583],{"class":565},[560,7371,710],{"class":565},[560,7373,7374,7376,7378],{"class":562,"line":713},[560,7375,704],{"class":565},[560,7377,718],{"class":569},[560,7379,710],{"class":565},[560,7381,7382,7384,7386],{"class":562,"line":723},[560,7383,704],{"class":565},[560,7385,217],{"class":569},[560,7387,592],{"class":565},[560,7389,7390,7392,7395],{"class":562,"line":728},[560,7391,776],{"class":565},[560,7393,7394],{"class":569},"TresMeshBasicMaterial",[560,7396,710],{"class":565},[560,7398,7400,7402,7404],{"class":7399,"line":750},[562,596],[560,7401,776],{"class":565},[560,7403,57],{"class":569},[560,7405,710],{"class":565},[560,7407,7408,7410,7412],{"class":562,"line":554},[560,7409,818],{"class":565},[560,7411,217],{"class":569},[560,7413,592],{"class":565},[560,7415,7416,7418,7420],{"class":562,"line":773},[560,7417,828],{"class":565},[560,7419,684],{"class":569},[560,7421,592],{"class":565},[560,7423,7424,7426,7428],{"class":562,"line":784},[560,7425,655],{"class":565},[560,7427,673],{"class":569},[560,7429,592],{"class":565},[545,7431,845],{"id":844},[536,7433,7434,7436,7437,7442,7443,7448],{},[540,7435,7249],{}," is based on ",[1063,7438,7441],{"href":7439,"rel":7440},"https://threejs.org/docs/#api/en/objects/LineSegments",[1067],"LineSegments"," & ",[1063,7444,7447],{"href":7445,"rel":7446},"https://threejs.org/docs/#api/en/objects/Line",[1067],"Line"," and supports all of its props.",[850,7450,7451,7461],{},[853,7452,7453],{},[856,7454,7455,7457,7459],{},[859,7456,861],{"align":920},[859,7458,864],{"align":920},[859,7460,867],{},[869,7462,7463,7494],{},[856,7464,7465,7470,7489],{},[874,7466,7467],{"align":920},[1591,7468,7469],{},"color",[874,7471,7472,7475,7476,7479,7480,2189,7485],{"align":920},[540,7473,7474],{},"THREE.Color"," — Color of the edges. ",[7477,7478],"br",{}," More informations : ",[1063,7481,7484],{"href":7482,"rel":7483},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1067],"TresColor",[1063,7486,7474],{"href":7487,"rel":7488},"https://threejs.org/docs/#api/en/math/Color",[1067],[874,7490,7491],{},[540,7492,7493],{},"#ff0000",[856,7495,7496,7501,7506],{},[874,7497,7498],{"align":920},[1591,7499,7500],{},"threshold",[874,7502,7503,7505],{"align":920},[540,7504,5274],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[874,7507,7508],{},[540,7509,1796],{},[1250,7511,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":7513},[7514,7515],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7516},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7521,"title":61,"body":7522,"description":8141,"extension":513,"links":514,"meta":8142,"navigation":516,"path":62,"seo":8143,"stem":63,"__hash__":8144},"docs/2.api/1.abstractions/fit.md",{"type":501,"value":7523,"toc":8137},[7524,7529,7535,7545,7551,7553,8001,8003,8134],[2217,7525,7526],{},[7527,7528],"abstractions-fit",{},[536,7530,7531,7534],{},[540,7532,7533],{},"\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,7536,7537,7538,7541,7542,1069],{},"Alternatively, the children can be fit into a ",[540,7539,7540],{},"Box3"," or an ",[540,7543,7544],{},"Object3D",[536,7546,7547,7548,7550],{},"Or the children can simply be resized. With ",[540,7549,7533],{}," the children are scaled relative to the center of their calculated bounding box.",[545,7552,15],{"id":547},[549,7554,7557],{"className":551,"code":7555,"highlights":7556,"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,2625],[540,7558,7559,7579,7603,7621,7645,7649,7668,7710,7748,7775,7780,7784,7800,7815,7823,7827,7835,7854,7872,7880,7889,7895,7909,7923,7937,7951,7956,7965,7985,7993],{"__ignoreMap":508},[560,7560,7561,7563,7565,7567,7569,7571,7573,7575,7577],{"class":562,"line":509},[560,7562,566],{"class":565},[560,7564,570],{"class":569},[560,7566,574],{"class":573},[560,7568,577],{"class":573},[560,7570,580],{"class":565},[560,7572,583],{"class":565},[560,7574,587],{"class":586},[560,7576,583],{"class":565},[560,7578,592],{"class":565},[560,7580,7582,7584,7586,7589,7591,7593,7595,7597,7599,7601],{"class":7581,"line":510},[562,596],[560,7583,600],{"class":599},[560,7585,603],{"class":565},[560,7587,7588],{"class":606}," Fit",[560,7590,610],{"class":565},[560,7592,613],{"class":606},[560,7594,616],{"class":565},[560,7596,619],{"class":599},[560,7598,622],{"class":565},[560,7600,625],{"class":586},[560,7602,628],{"class":565},[560,7604,7605,7607,7609,7611,7613,7615,7617,7619],{"class":562,"line":631},[560,7606,600],{"class":599},[560,7608,603],{"class":565},[560,7610,638],{"class":606},[560,7612,616],{"class":565},[560,7614,619],{"class":599},[560,7616,622],{"class":565},[560,7618,647],{"class":586},[560,7620,628],{"class":565},[560,7622,7623,7625,7627,7630,7632,7635,7637,7639,7641,7643],{"class":562,"line":652},[560,7624,600],{"class":599},[560,7626,603],{"class":565},[560,7628,7629],{"class":606}," BoxGeometry",[560,7631,610],{"class":565},[560,7633,7634],{"class":606}," MeshNormalMaterial",[560,7636,616],{"class":565},[560,7638,619],{"class":599},[560,7640,622],{"class":565},[560,7642,4548],{"class":586},[560,7644,628],{"class":565},[560,7646,7647],{"class":562,"line":662},[560,7648,665],{"emptyLinePlaceholder":516},[560,7650,7651,7653,7656,7658,7660,7663,7665],{"class":562,"line":668},[560,7652,2337],{"class":573},[560,7654,7655],{"class":606}," positions",[560,7657,1141],{"class":565},[560,7659,5279],{"class":1123},[560,7661,7662],{"class":606},"[][] ",[560,7664,580],{"class":565},[560,7666,7667],{"class":606}," []\n",[560,7669,7670,7673,7675,7678,7681,7683,7686,7688,7690,7693,7696,7698,7700,7703,7706,7708],{"class":562,"line":678},[560,7671,7672],{"class":599},"for",[560,7674,2996],{"class":606},[560,7676,7677],{"class":573},"let",[560,7679,7680],{"class":606}," y ",[560,7682,580],{"class":565},[560,7684,7685],{"class":2423}," 100",[560,7687,4060],{"class":565},[560,7689,7680],{"class":606},[560,7691,7692],{"class":565},"\u003C=",[560,7694,7695],{"class":2423}," 120",[560,7697,4060],{"class":565},[560,7699,7680],{"class":606},[560,7701,7702],{"class":565},"+=",[560,7704,7705],{"class":2423}," 10",[560,7707,4656],{"class":606},[560,7709,3182],{"class":565},[560,7711,7712,7715,7717,7719,7722,7724,7726,7728,7730,7733,7735,7737,7739,7742,7744,7746],{"class":562,"line":701},[560,7713,7714],{"class":599},"  for",[560,7716,2996],{"class":569},[560,7718,7677],{"class":573},[560,7720,7721],{"class":606}," x",[560,7723,2353],{"class":565},[560,7725,7685],{"class":2423},[560,7727,4060],{"class":565},[560,7729,7721],{"class":606},[560,7731,7732],{"class":565}," \u003C=",[560,7734,7695],{"class":2423},[560,7736,4060],{"class":565},[560,7738,7721],{"class":606},[560,7740,7741],{"class":565}," +=",[560,7743,7705],{"class":2423},[560,7745,4656],{"class":569},[560,7747,3182],{"class":565},[560,7749,7750,7753,7755,7758,7760,7763,7765,7768,7770,7773],{"class":562,"line":713},[560,7751,7752],{"class":606},"    positions",[560,7754,1069],{"class":565},[560,7756,7757],{"class":2356},"push",[560,7759,3451],{"class":569},[560,7761,7762],{"class":606},"x",[560,7764,610],{"class":565},[560,7766,7767],{"class":606}," y",[560,7769,610],{"class":565},[560,7771,7772],{"class":2423}," 9999",[560,7774,2524],{"class":569},[560,7776,7777],{"class":562,"line":723},[560,7778,7779],{"class":565},"  }\n",[560,7781,7782],{"class":562,"line":728},[560,7783,1248],{"class":565},[560,7785,7786,7788,7791,7793,7796,7798],{"class":562,"line":750},[560,7787,2337],{"class":573},[560,7789,7790],{"class":606}," geom ",[560,7792,580],{"class":565},[560,7794,7795],{"class":565}," new",[560,7797,7629],{"class":2356},[560,7799,6457],{"class":606},[560,7801,7802,7804,7807,7809,7811,7813],{"class":562,"line":554},[560,7803,2337],{"class":573},[560,7805,7806],{"class":606}," mat ",[560,7808,580],{"class":565},[560,7810,7795],{"class":565},[560,7812,7634],{"class":2356},[560,7814,6457],{"class":606},[560,7816,7817,7819,7821],{"class":562,"line":773},[560,7818,655],{"class":565},[560,7820,570],{"class":569},[560,7822,592],{"class":565},[560,7824,7825],{"class":562,"line":784},[560,7826,665],{"emptyLinePlaceholder":516},[560,7828,7829,7831,7833],{"class":562,"line":795},[560,7830,566],{"class":565},[560,7832,673],{"class":569},[560,7834,592],{"class":565},[560,7836,7837,7839,7841,7843,7845,7847,7850,7852],{"class":562,"line":805},[560,7838,681],{"class":565},[560,7840,684],{"class":569},[560,7842,687],{"class":573},[560,7844,580],{"class":565},[560,7846,583],{"class":565},[560,7848,7849],{"class":586},"#4F4F4F",[560,7851,583],{"class":565},[560,7853,592],{"class":565},[560,7855,7856,7858,7860,7862,7864,7866,7868,7870],{"class":562,"line":555},[560,7857,704],{"class":565},[560,7859,707],{"class":569},[560,7861,1407],{"class":573},[560,7863,580],{"class":565},[560,7865,583],{"class":565},[560,7867,1888],{"class":586},[560,7869,583],{"class":565},[560,7871,710],{"class":565},[560,7873,7874,7876,7878],{"class":562,"line":825},[560,7875,704],{"class":565},[560,7877,718],{"class":569},[560,7879,710],{"class":565},[560,7881,7883,7885,7887],{"class":7882,"line":835},[562,596],[560,7884,704],{"class":565},[560,7886,61],{"class":569},[560,7888,592],{"class":565},[560,7890,7891,7893],{"class":562,"line":2547},[560,7892,776],{"class":565},[560,7894,5048],{"class":569},[560,7896,7897,7900,7902,7904,7907],{"class":562,"line":2556},[560,7898,7899],{"class":573},"        v-for",[560,7901,580],{"class":565},[560,7903,583],{"class":565},[560,7905,7906],{"class":586},"(pos, index) in positions",[560,7908,3053],{"class":565},[560,7910,7911,7914,7916,7918,7921],{"class":562,"line":2576},[560,7912,7913],{"class":573},"        :key",[560,7915,580],{"class":565},[560,7917,583],{"class":565},[560,7919,7920],{"class":586},"index",[560,7922,3053],{"class":565},[560,7924,7925,7928,7930,7932,7935],{"class":562,"line":2585},[560,7926,7927],{"class":573},"        :position",[560,7929,580],{"class":565},[560,7931,583],{"class":565},[560,7933,7934],{"class":586},"pos",[560,7936,3053],{"class":565},[560,7938,7939,7942,7944,7946,7949],{"class":562,"line":2594},[560,7940,7941],{"class":573},"        :args",[560,7943,580],{"class":565},[560,7945,583],{"class":565},[560,7947,7948],{"class":586},"[geom, mat]",[560,7950,3053],{"class":565},[560,7952,7953],{"class":562,"line":2603},[560,7954,7955],{"class":565},"      />\n",[560,7957,7959,7961,7963],{"class":7958,"line":2625},[562,596],[560,7960,818],{"class":565},[560,7962,61],{"class":569},[560,7964,592],{"class":565},[560,7966,7967,7969,7972,7974,7976,7978,7981,7983],{"class":562,"line":2669},[560,7968,704],{"class":565},[560,7970,7971],{"class":569},"TresGridHelper",[560,7973,1881],{"class":573},[560,7975,580],{"class":565},[560,7977,583],{"class":565},[560,7979,7980],{"class":586},"[1, 1]",[560,7982,583],{"class":565},[560,7984,710],{"class":565},[560,7986,7987,7989,7991],{"class":562,"line":2678},[560,7988,828],{"class":565},[560,7990,684],{"class":569},[560,7992,592],{"class":565},[560,7994,7995,7997,7999],{"class":562,"line":2687},[560,7996,655],{"class":565},[560,7998,673],{"class":569},[560,8000,592],{"class":565},[545,8002,845],{"id":844},[850,8004,8005,8014],{},[853,8006,8007],{},[856,8008,8009,8012],{},[859,8010,8011],{"align":920},"Name",[859,8013,864],{"align":920},[869,8015,8016,8110],{},[856,8017,8018,8023],{},[874,8019,8020],{"align":920},[1591,8021,8022],{},"into",[874,8024,881,8025,8027,8028,8102,8104,8105,8107],{"align":920},[540,8026,8022],{}," is:",[2135,8029,8030,8039,8047,8055,8063,8074,8081],{},[2138,8031,8032,8033,8035,8036,8038],{},"omitted or explicitly ",[540,8034,1102],{},": position/scale children to fit into a 1 × 1 × 1 ",[540,8037,7540],{}," at world origin.",[2138,8040,8041,8043,8044,8046],{},[540,8042,3578],{},": turn off ",[540,8045,7533],{},"; reset scale/position of children.",[2138,8048,8049,8051,8052,1069],{},[540,8050,5274],{},": convert argument to ",[540,8053,8054],{},"Vector3(number, number, number)",[2138,8056,8057,8051,8060,1069],{},[540,8058,8059],{},"[number, number, number]",[540,8061,8062],{},"Vector3",[2138,8064,8065,8067,8068,8070,8071,8073],{},[540,8066,8062],{},": position/scale children to fit inside a ",[540,8069,7540],{}," of size ",[540,8072,8062],{}," at target objects' cumulative center.",[2138,8075,8076,8078,8079,1069],{},[540,8077,7540],{},": position/scale children to fit inside ",[540,8080,7540],{},[2138,8082,8083,8085,8086,8088,8089,8088,8096,8098,8099,8101],{},[540,8084,7544],{},": position/scale children to fit inside calculated ",[540,8087,7540],{},". ",[1063,8090,1061,8093],{"href":8091,"rel":8092},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1067],[540,8094,8095],{},"THREE.Box3.setFromObject",[540,8097,7533],{}," must not contain the ",[540,8100,7544],{}," and vice-versa.",[7477,8103],{},"default:",[7477,8106],{},[540,8108,8109],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[856,8111,8112,8116],{},[874,8113,8114],{"align":920},[1591,8115,1058],{},[874,8117,8118,8126,8128,8104,8130,8132],{"align":920},[1063,8119,1061,8121,8123,8124],{"href":1065,"rel":8120},[1067],[540,8122,1058],{}," argument in ",[540,8125,8095],{},[7477,8127],{},[7477,8129],{},[7477,8131],{},[540,8133,894],{},[1250,8135,8136],{},"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":8138},[8139,8140],{"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":8141},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8146,"title":65,"body":8147,"description":9366,"extension":513,"links":514,"meta":9367,"navigation":516,"path":66,"seo":9368,"stem":67,"__hash__":9369},"docs/2.api/1.abstractions/instances.md",{"type":501,"value":8148,"toc":9352},[8149,8154,8176,8193,8195,8603,8615,8619,8631,8700,8704,8707,8764,8768,8771,8784,8787,8791,8794,8869,8873,8888,8958,8986,8993,8997,9006,9056,9059,9063,9066,9084,9090,9093,9133,9149,9151,9154,9240,9249,9251,9330,9340,9349],[530,8150,8151],{},[8152,8153],"abstractions-instances",{},[536,8155,8156,8157,8160,8161,2985,8164,8167,8168,8171,8172,8175],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[540,8158,8159],{},"\u003CInstances />"," owns a single ",[540,8162,8163],{},"THREE.InstancedMesh",[540,8165,8166],{},"\u003CInstance />"," is a\nplaceholder that registers itself with it, so a ",[540,8169,8170],{},"v-for"," of a thousand nodes costs ",[1591,8173,8174],{},"one"," drawcall.",[536,8177,8178,8179,8181,8182,8184,8185,8188,8189,8192],{},"An ",[540,8180,8166],{}," behaves like any other node in the graph: give it ",[540,8183,4052],{},", nest it under a\ngroup, animate that group, toggle it with ",[540,8186,8187],{},"v-if",", listen for ",[540,8190,8191],{},"@click"," on one of them.",[545,8194,15],{"id":547},[549,8196,8199],{"className":551,"code":8197,"highlights":8198,"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,2547],[540,8200,8201,8221,8239,8264,8287,8291,8320,8335,8339,8432,8440,8444,8452,8460,8480,8510,8518,8532,8546,8559,8574,8579,8587,8595],{"__ignoreMap":508},[560,8202,8203,8205,8207,8209,8211,8213,8215,8217,8219],{"class":562,"line":509},[560,8204,566],{"class":565},[560,8206,570],{"class":569},[560,8208,574],{"class":573},[560,8210,577],{"class":573},[560,8212,580],{"class":565},[560,8214,583],{"class":565},[560,8216,587],{"class":586},[560,8218,583],{"class":565},[560,8220,592],{"class":565},[560,8222,8223,8225,8227,8229,8231,8233,8235,8237],{"class":562,"line":510},[560,8224,600],{"class":599},[560,8226,603],{"class":565},[560,8228,638],{"class":606},[560,8230,616],{"class":565},[560,8232,619],{"class":599},[560,8234,622],{"class":565},[560,8236,647],{"class":586},[560,8238,628],{"class":565},[560,8240,8242,8244,8246,8249,8251,8254,8256,8258,8260,8262],{"class":8241,"line":631},[562,596],[560,8243,600],{"class":599},[560,8245,603],{"class":565},[560,8247,8248],{"class":606}," Instance",[560,8250,610],{"class":565},[560,8252,8253],{"class":606}," Instances",[560,8255,616],{"class":565},[560,8257,619],{"class":599},[560,8259,622],{"class":565},[560,8261,625],{"class":586},[560,8263,628],{"class":565},[560,8265,8266,8268,8270,8272,8274,8277,8279,8281,8283,8285],{"class":562,"line":652},[560,8267,600],{"class":599},[560,8269,603],{"class":565},[560,8271,7629],{"class":606},[560,8273,610],{"class":565},[560,8275,8276],{"class":606}," MeshStandardMaterial",[560,8278,616],{"class":565},[560,8280,619],{"class":599},[560,8282,622],{"class":565},[560,8284,4548],{"class":586},[560,8286,628],{"class":565},[560,8288,8289],{"class":562,"line":662},[560,8290,665],{"emptyLinePlaceholder":516},[560,8292,8293,8295,8298,8300,8302,8304,8306,8309,8311,8314,8316,8318],{"class":562,"line":668},[560,8294,2337],{"class":573},[560,8296,8297],{"class":606}," geometry ",[560,8299,580],{"class":565},[560,8301,7795],{"class":565},[560,8303,7629],{"class":2356},[560,8305,2359],{"class":606},[560,8307,8308],{"class":2423},"0.35",[560,8310,610],{"class":565},[560,8312,8313],{"class":2423}," 0.35",[560,8315,610],{"class":565},[560,8317,8313],{"class":2423},[560,8319,2370],{"class":606},[560,8321,8322,8324,8327,8329,8331,8333],{"class":562,"line":678},[560,8323,2337],{"class":573},[560,8325,8326],{"class":606}," material ",[560,8328,580],{"class":565},[560,8330,7795],{"class":565},[560,8332,8276],{"class":2356},[560,8334,6457],{"class":606},[560,8336,8337],{"class":562,"line":701},[560,8338,665],{"emptyLinePlaceholder":516},[560,8340,8341,8343,8346,8348,8351,8353,8356,8358,8361,8364,8366,8369,8372,8374,8377,8379,8382,8384,8386,8389,8392,8395,8398,8401,8403,8405,8407,8410,8412,8415,8418,8421,8423,8425,8428,8430],{"class":562,"line":713},[560,8342,2337],{"class":573},[560,8344,8345],{"class":606}," cubes ",[560,8347,580],{"class":565},[560,8349,8350],{"class":606}," Array",[560,8352,1069],{"class":565},[560,8354,8355],{"class":2356},"from",[560,8357,2359],{"class":606},[560,8359,8360],{"class":565},"{",[560,8362,8363],{"class":569}," length",[560,8365,1141],{"class":565},[560,8367,8368],{"class":2423}," 900",[560,8370,8371],{"class":565}," },",[560,8373,2996],{"class":565},[560,8375,8376],{"class":6760},"_",[560,8378,610],{"class":565},[560,8380,8381],{"class":6760}," i",[560,8383,3262],{"class":565},[560,8385,3599],{"class":573},[560,8387,8388],{"class":606}," [i ",[560,8390,8391],{"class":565},"%",[560,8393,8394],{"class":2423}," 30",[560,8396,8397],{"class":565}," -",[560,8399,8400],{"class":2423}," 15",[560,8402,610],{"class":565},[560,8404,2428],{"class":2423},[560,8406,610],{"class":565},[560,8408,8409],{"class":606}," Math",[560,8411,1069],{"class":565},[560,8413,8414],{"class":2356},"floor",[560,8416,8417],{"class":606},"(i ",[560,8419,8420],{"class":565},"/",[560,8422,8394],{"class":2423},[560,8424,4656],{"class":606},[560,8426,8427],{"class":565},"-",[560,8429,8400],{"class":2423},[560,8431,2524],{"class":606},[560,8433,8434,8436,8438],{"class":562,"line":723},[560,8435,655],{"class":565},[560,8437,570],{"class":569},[560,8439,592],{"class":565},[560,8441,8442],{"class":562,"line":728},[560,8443,665],{"emptyLinePlaceholder":516},[560,8445,8446,8448,8450],{"class":562,"line":750},[560,8447,566],{"class":565},[560,8449,673],{"class":569},[560,8451,592],{"class":565},[560,8453,8454,8456,8458],{"class":562,"line":554},[560,8455,681],{"class":565},[560,8457,684],{"class":569},[560,8459,592],{"class":565},[560,8461,8463,8465,8467,8469,8471,8473,8476,8478],{"class":8462,"line":773},[562,596],[560,8464,704],{"class":565},[560,8466,707],{"class":569},[560,8468,1407],{"class":573},[560,8470,580],{"class":565},[560,8472,583],{"class":565},[560,8474,8475],{"class":586},"[14, 10, 14]",[560,8477,583],{"class":565},[560,8479,710],{"class":565},[560,8481,8482,8484,8486,8489,8491,8493,8495,8497,8500,8502,8504,8506,8508],{"class":562,"line":784},[560,8483,704],{"class":565},[560,8485,65],{"class":569},[560,8487,8488],{"class":573}," :geometry",[560,8490,580],{"class":565},[560,8492,583],{"class":565},[560,8494,5178],{"class":586},[560,8496,583],{"class":565},[560,8498,8499],{"class":573}," :material",[560,8501,580],{"class":565},[560,8503,583],{"class":565},[560,8505,5122],{"class":586},[560,8507,583],{"class":565},[560,8509,592],{"class":565},[560,8511,8513,8515],{"class":8512,"line":795},[562,596],[560,8514,776],{"class":565},[560,8516,8517],{"class":569},"Instance\n",[560,8519,8521,8523,8525,8527,8530],{"class":8520,"line":805},[562,596],[560,8522,7899],{"class":573},[560,8524,580],{"class":565},[560,8526,583],{"class":565},[560,8528,8529],{"class":586},"(position, i) in cubes",[560,8531,3053],{"class":565},[560,8533,8535,8537,8539,8541,8544],{"class":8534,"line":555},[562,596],[560,8536,7913],{"class":573},[560,8538,580],{"class":565},[560,8540,583],{"class":565},[560,8542,8543],{"class":586},"i",[560,8545,3053],{"class":565},[560,8547,8549,8551,8553,8555,8557],{"class":8548,"line":825},[562,596],[560,8550,7927],{"class":573},[560,8552,580],{"class":565},[560,8554,583],{"class":565},[560,8556,4052],{"class":586},[560,8558,3053],{"class":565},[560,8560,8562,8565,8567,8569,8572],{"class":8561,"line":835},[562,596],[560,8563,8564],{"class":573},"        color",[560,8566,580],{"class":565},[560,8568,583],{"class":565},[560,8570,8571],{"class":586},"#38bdf8",[560,8573,3053],{"class":565},[560,8575,8577],{"class":8576,"line":2547},[562,596],[560,8578,7955],{"class":565},[560,8580,8581,8583,8585],{"class":562,"line":2556},[560,8582,818],{"class":565},[560,8584,65],{"class":569},[560,8586,592],{"class":565},[560,8588,8589,8591,8593],{"class":562,"line":2576},[560,8590,828],{"class":565},[560,8592,684],{"class":569},[560,8594,592],{"class":565},[560,8596,8597,8599,8601],{"class":562,"line":2585},[560,8598,655],{"class":565},[560,8600,673],{"class":569},[560,8602,592],{"class":565},[1927,8604,8605],{},[536,8606,2698,8607,2985,8609,8611,8612,8614],{},[540,8608,5178],{},[540,8610,5122],{}," are yours: ",[540,8613,8159],{}," never disposes them.",[545,8616,8618],{"id":8617},"per-instance-color","Per-instance color",[536,8620,8621,8623,8624,8626,8627,8630],{},[540,8622,8166],{}," takes a ",[540,8625,7469],{}," prop, written into the batch's ",[540,8628,8629],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[549,8632,8634],{"className":551,"code":8633,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" />\n",[540,8635,8636],{"__ignoreMap":508},[560,8637,8638,8640,8643,8645,8647,8649,8651,8654,8656,8658,8660,8662,8664,8666,8668,8670,8672,8674,8676,8679,8682,8684,8687,8689,8691,8693,8695,8698],{"class":562,"line":509},[560,8639,566],{"class":565},[560,8641,8642],{"class":569},"Instance",[560,8644,2951],{"class":565},[560,8646,4052],{"class":573},[560,8648,580],{"class":565},[560,8650,583],{"class":565},[560,8652,8653],{"class":606},"[",[560,8655,888],{"class":2423},[560,8657,610],{"class":565},[560,8659,2428],{"class":2423},[560,8661,610],{"class":565},[560,8663,2428],{"class":2423},[560,8665,2436],{"class":606},[560,8667,583],{"class":565},[560,8669,2951],{"class":565},[560,8671,7469],{"class":573},[560,8673,580],{"class":565},[560,8675,583],{"class":565},[560,8677,8678],{"class":606},"isSelected ",[560,8680,8681],{"class":565},"?",[560,8683,622],{"class":565},[560,8685,8686],{"class":586},"#f97316",[560,8688,2362],{"class":565},[560,8690,2951],{"class":565},[560,8692,622],{"class":565},[560,8694,8571],{"class":586},[560,8696,8697],{"class":565},"'\"",[560,8699,710],{"class":565},[545,8701,8703],{"id":8702},"pointer-events","Pointer events",[536,8705,8706],{},"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,8708,8710],{"className":551,"code":8709,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" />\n",[540,8711,8712],{"__ignoreMap":508},[560,8713,8714,8716,8718,8720,8722,8724,8726,8728,8730,8732,8735,8737,8739,8741,8744,8746,8748,8751,8753,8755,8758,8760,8762],{"class":562,"line":509},[560,8715,566],{"class":565},[560,8717,8642],{"class":569},[560,8719,2951],{"class":565},[560,8721,4052],{"class":573},[560,8723,580],{"class":565},[560,8725,583],{"class":565},[560,8727,4052],{"class":606},[560,8729,583],{"class":565},[560,8731,4176],{"class":565},[560,8733,8734],{"class":573},"click",[560,8736,580],{"class":565},[560,8738,583],{"class":565},[560,8740,5759],{"class":2356},[560,8742,8743],{"class":606},"(id)",[560,8745,583],{"class":565},[560,8747,4176],{"class":565},[560,8749,8750],{"class":573},"pointer-enter",[560,8752,580],{"class":565},[560,8754,583],{"class":565},[560,8756,8757],{"class":2356},"hover",[560,8759,8743],{"class":606},[560,8761,583],{"class":565},[560,8763,710],{"class":565},[545,8765,8767],{"id":8766},"hiding-instances","Hiding instances",[536,8769,8770],{},"Two ways, and they differ in what they cost:",[2135,8772,8773,8779],{},[2138,8774,8775,8778],{},[540,8776,8777],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2138,8780,8781,8783],{},[540,8782,8187],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[536,8785,8786],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[545,8788,8790],{"id":8789},"nesting-and-transforms","Nesting and transforms",[536,8792,8793],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[549,8795,8797],{"className":551,"code":8796,"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,8798,8799,8831,8836,8841,8846,8851,8856,8861],{"__ignoreMap":508},[560,8800,8801,8803,8805,8807,8809,8811,8813,8815,8817,8819,8821,8823,8825,8827,8829],{"class":562,"line":509},[560,8802,566],{"class":565},[560,8804,65],{"class":569},[560,8806,2951],{"class":565},[560,8808,5178],{"class":573},[560,8810,580],{"class":565},[560,8812,583],{"class":565},[560,8814,5178],{"class":606},[560,8816,583],{"class":565},[560,8818,2951],{"class":565},[560,8820,5122],{"class":573},[560,8822,580],{"class":565},[560,8824,583],{"class":565},[560,8826,5122],{"class":606},[560,8828,583],{"class":565},[560,8830,592],{"class":565},[560,8832,8833],{"class":562,"line":510},[560,8834,8835],{"class":606},"  \u003CLevioso>\n",[560,8837,8838],{"class":562,"line":631},[560,8839,8840],{"class":606},"    \u003CTresGroup :position=\"[0, 3, 0]\">\n",[560,8842,8843],{"class":562,"line":652},[560,8844,8845],{"class":606},"      \u003C!-- floats with the group, still the same drawcall -->\n",[560,8847,8848],{"class":562,"line":662},[560,8849,8850],{"class":606},"      \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[560,8852,8853],{"class":562,"line":668},[560,8854,8855],{"class":606},"    \u003C/TresGroup>\n",[560,8857,8858],{"class":562,"line":678},[560,8859,8860],{"class":606},"  \u003C/Levioso>\n",[560,8862,8863,8865,8867],{"class":562,"line":701},[560,8864,655],{"class":565},[560,8866,65],{"class":569},[560,8868,592],{"class":565},[545,8870,8872],{"id":8871},"animating-instances","Animating instances",[536,8874,8875,8876,8879,8880,8882,8883,8623,8885,8887],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[540,8877,8878],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[540,8881,7544],{},"\nname, and an ",[540,8884,8166],{},[540,8886,2893],{}," like any other node, so a clip can drive one directly.",[549,8889,8891],{"className":551,"code":8890,"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,8892,8893,8925,8930,8935,8940,8945,8950],{"__ignoreMap":508},[560,8894,8895,8897,8899,8901,8903,8905,8907,8909,8911,8913,8915,8917,8919,8921,8923],{"class":562,"line":509},[560,8896,566],{"class":565},[560,8898,65],{"class":569},[560,8900,2951],{"class":565},[560,8902,5178],{"class":573},[560,8904,580],{"class":565},[560,8906,583],{"class":565},[560,8908,5178],{"class":606},[560,8910,583],{"class":565},[560,8912,2951],{"class":565},[560,8914,5122],{"class":573},[560,8916,580],{"class":565},[560,8918,583],{"class":565},[560,8920,5122],{"class":606},[560,8922,583],{"class":565},[560,8924,592],{"class":565},[560,8926,8927],{"class":562,"line":510},[560,8928,8929],{"class":606},"  \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[560,8931,8932],{"class":562,"line":631},[560,8933,8934],{"class":606},"  \u003CTresGroup name=\"Rotor\">\n",[560,8936,8937],{"class":562,"line":652},[560,8938,8939],{"class":606},"    \u003CInstance name=\"Blade\" />\n",[560,8941,8942],{"class":562,"line":662},[560,8943,8944],{"class":606},"    \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[560,8946,8947],{"class":562,"line":668},[560,8948,8949],{"class":606},"  \u003C/TresGroup>\n",[560,8951,8952,8954,8956],{"class":562,"line":678},[560,8953,655],{"class":565},[560,8955,65],{"class":569},[560,8957,592],{"class":565},[1927,8959,8960],{},[536,8961,8962,8963,1594,8966,2985,8968,8971,8972,8974,8975,8978,8979,8981,8982,8985],{},"Inside a ",[540,8964,8965],{},"\u003CMerged />",[540,8967,2893],{},[540,8969,8970],{},"batch"," are different things: ",[540,8973,8970],{}," picks which\n",[540,8976,8977],{},"InstancedMesh"," to join, ",[540,8980,2893],{}," is what this node is called. ",[540,8983,8984],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[536,8987,8988,8989,8992],{},"A track that finds no node is not silent: three logs\n",[540,8990,8991],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[545,8994,8996],{"id":8995},"limit-and-growth","Limit and growth",[536,8998,8999,9002,9003,9005],{},[540,9000,9001],{},"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,9004,9001],{}," would have avoided the reallocation.",[549,9007,9009],{"className":551,"code":9008,"language":556,"meta":508,"style":508},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[540,9010,9011],{"__ignoreMap":508},[560,9012,9013,9015,9017,9019,9021,9023,9025,9027,9029,9031,9033,9035,9037,9039,9041,9043,9045,9047,9049,9052,9054],{"class":562,"line":509},[560,9014,566],{"class":565},[560,9016,65],{"class":569},[560,9018,2951],{"class":565},[560,9020,5178],{"class":573},[560,9022,580],{"class":565},[560,9024,583],{"class":565},[560,9026,5178],{"class":606},[560,9028,583],{"class":565},[560,9030,2951],{"class":565},[560,9032,5122],{"class":573},[560,9034,580],{"class":565},[560,9036,583],{"class":565},[560,9038,5122],{"class":606},[560,9040,583],{"class":565},[560,9042,2951],{"class":565},[560,9044,9001],{"class":573},[560,9046,580],{"class":565},[560,9048,583],{"class":565},[560,9050,9051],{"class":2423},"5000",[560,9053,583],{"class":565},[560,9055,592],{"class":565},[536,9057,9058],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[545,9060,9062],{"id":9061},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[536,9064,9065],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[536,9067,9068,9069,9071,9072,9074,9075,9077,9078,9080,9081,9083],{},"Each ",[540,9070,8166],{}," is a real ",[540,9073,7544],{}," in the graph. That is precisely what buys you the ergonomics:\n",[540,9076,4052],{}," is just a transform, nesting under a group works because the group is its parent, ",[540,9079,8187],{},"\nworks because unmounting a node unregisters it, and ",[540,9082,8191],{}," 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,9085,9086,9087,9089],{},"What those nodes do ",[1591,9088,6263],{}," 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,9091,9092],{},"The costs that are real:",[850,9094,9095,9104],{},[853,9096,9097],{},[856,9098,9099,9101],{},[859,9100],{"align":920},[859,9102,9103],{"align":920},"Cost",[869,9105,9106,9114,9122],{},[856,9107,9108,9111],{},[874,9109,9110],{"align":920},"Per frame",[874,9112,9113],{"align":920},"One world-matrix update and one matrix multiply per instance.",[856,9115,9116,9119],{},[874,9117,9118],{"align":920},"On pointer move",[874,9120,9121],{"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,9123,9124,9127],{},[874,9125,9126],{"align":920},"Memory",[874,9128,9129,9130,9132],{"align":920},"One bare ",[540,9131,7544],{}," per instance.",[1927,9134,9135],{},[536,9136,9137,9138,9141,9142,9145,9146,9148],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[540,9139,9140],{},"TresInstancedMesh"," whose ",[540,9143,9144],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[540,9147,8159],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[545,9150,845],{"id":844},[3973,9152,65],{"id":9153},"instances",[850,9155,9156,9166],{},[853,9157,9158],{},[856,9159,9160,9162,9164],{},[859,9161,861],{"align":920},[859,9163,864],{"align":920},[859,9165,867],{},[869,9167,9168,9182,9195,9209,9224],{},[856,9169,9170,9174,9177],{},[874,9171,9172],{"align":920},[540,9173,5178],{},[874,9175,9176],{"align":920},"Geometry shared by every instance. Not disposed by the component.",[874,9178,9179],{},[1596,9180,9181],{},"required",[856,9183,9184,9188,9191],{},[874,9185,9186],{"align":920},[540,9187,5122],{},[874,9189,9190],{"align":920},"Material shared by every instance. Not disposed by the component.",[874,9192,9193],{},[1596,9194,9181],{},[856,9196,9197,9201,9204],{},[874,9198,9199],{"align":920},[540,9200,9001],{},[874,9202,9203],{"align":920},"Initial buffer allocation. Grows automatically when exceeded.",[874,9205,9206],{},[540,9207,9208],{},"1000",[856,9210,9211,9215,9220],{},[874,9212,9213],{"align":920},[540,9214,8970],{},[874,9216,9217,9218,1069],{"align":920},"Key this batch registers under with an ancestor ",[540,9219,8965],{},[874,9221,9222],{},[540,9223,1102],{},[856,9225,9226,9230,9236],{},[874,9227,9228],{"align":920},[540,9229,2893],{},[874,9231,9232,9233,9235],{"align":920},"Name for the ",[540,9234,8977],{}," itself.",[874,9237,9238],{},[540,9239,1102],{},[536,9241,9242,9243,9245,9246,1069],{},"Exposes the underlying ",[540,9244,8163],{}," through ",[540,9247,9248],{},"instance",[3973,9250,8642],{"id":9248},[850,9252,9253,9263],{},[853,9254,9255],{},[856,9256,9257,9259,9261],{},[859,9258,861],{"align":920},[859,9260,864],{"align":920},[859,9262,867],{},[869,9264,9265,9284,9300,9315],{},[856,9266,9267,9271,9280],{},[874,9268,9269],{"align":920},[540,9270,8970],{},[874,9272,9273,9274,9277,9278,1069],{"align":920},"Batch to join, by its key in ",[540,9275,9276],{},"\u003CMerged :meshes />",". Omit for the nearest ",[540,9279,8159],{},[874,9281,9282],{},[540,9283,1102],{},[856,9285,9286,9290,9296],{},[874,9287,9288],{"align":920},[540,9289,2893],{},[874,9291,9292,9293,9295],{"align":920},"Name for this instance's node, so a mixer or ",[540,9294,4644],{}," can find it.",[874,9297,9298],{},[540,9299,1102],{},[856,9301,9302,9306,9311],{},[874,9303,9304],{"align":920},[540,9305,7469],{},[874,9307,9308,9309,1069],{"align":920},"Per-instance color, written into ",[540,9310,8629],{},[874,9312,9313],{},[540,9314,1102],{},[856,9316,9317,9321,9326],{},[874,9318,9319],{"align":920},[540,9320,7045],{},[874,9322,9323,9325],{"align":920},[540,9324,894],{}," drops the instance from the batch without unregistering it.",[874,9327,9328],{},[540,9329,884],{},[536,9331,9332,9333,1594,9335,1594,9337,9339],{},"Transform props (",[540,9334,4052],{},[540,9336,5549],{},[540,9338,5552],{},", …) and pointer events behave like any other node.",[9341,9342,9343],"read-more",{"to":78},[536,9344,9345,9346,9348],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[540,9347,8965],{}," is for.",[1250,9350,9351],{},"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":9353},[9354,9355,9356,9357,9358,9359,9360,9361,9362],{"id":547,"depth":510,"text":15},{"id":8617,"depth":510,"text":8618},{"id":8702,"depth":510,"text":8703},{"id":8766,"depth":510,"text":8767},{"id":8789,"depth":510,"text":8790},{"id":8871,"depth":510,"text":8872},{"id":8995,"depth":510,"text":8996},{"id":9061,"depth":510,"text":9062},{"id":844,"depth":510,"text":845,"children":9363},[9364,9365],{"id":9153,"depth":631,"text":65},{"id":9248,"depth":631,"text":8642},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9366},"8vKhux_ZHYFi--jFcKf3FugQpxaRNQANDCDzZT-Htl8",{"id":9371,"title":69,"body":9372,"description":9760,"extension":513,"links":514,"meta":9761,"navigation":516,"path":70,"seo":9762,"stem":71,"__hash__":9763},"docs/2.api/1.abstractions/levioso.md",{"type":501,"value":9373,"toc":9756},[9374,9379,9386,9395,9397,9681,9683,9754],[530,9375,9376],{},[9377,9378],"abstractions-levioso",{},[536,9380,9381],{},[9382,9383],"img",{"alt":9384,"src":9385},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[536,9387,2698,9388,9390,9391,9394],{},[540,9389,7239],{}," package provides a ",[540,9392,9393],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[545,9396,15],{"id":547},[549,9398,9401],{"className":551,"code":9399,"highlights":9400,"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,9402,9403,9423,9445,9475,9479,9487,9491,9499,9519,9550,9558,9580,9588,9597,9616,9646,9665,9673],{"__ignoreMap":508},[560,9404,9405,9407,9409,9411,9413,9415,9417,9419,9421],{"class":562,"line":509},[560,9406,566],{"class":565},[560,9408,570],{"class":569},[560,9410,574],{"class":573},[560,9412,577],{"class":573},[560,9414,580],{"class":565},[560,9416,583],{"class":565},[560,9418,587],{"class":586},[560,9420,583],{"class":565},[560,9422,592],{"class":565},[560,9424,9425,9427,9429,9431,9433,9435,9438,9440,9442],{"class":562,"line":510},[560,9426,600],{"class":599},[560,9428,603],{"class":565},[560,9430,638],{"class":606},[560,9432,616],{"class":565},[560,9434,619],{"class":599},[560,9436,9437],{"class":565}," \"",[560,9439,647],{"class":586},[560,9441,583],{"class":565},[560,9443,9444],{"class":565},";\n",[560,9446,9448,9450,9452,9455,9457,9459,9461,9463,9465,9467,9469,9471,9473],{"class":9447,"line":631},[562,596],[560,9449,600],{"class":599},[560,9451,603],{"class":565},[560,9453,9454],{"class":606}," Levioso",[560,9456,610],{"class":565},[560,9458,613],{"class":606},[560,9460,610],{"class":565},[560,9462,1319],{"class":606},[560,9464,616],{"class":565},[560,9466,619],{"class":599},[560,9468,9437],{"class":565},[560,9470,625],{"class":586},[560,9472,583],{"class":565},[560,9474,9444],{"class":565},[560,9476,9477],{"class":562,"line":652},[560,9478,665],{"emptyLinePlaceholder":516},[560,9480,9481,9483,9485],{"class":562,"line":662},[560,9482,655],{"class":565},[560,9484,570],{"class":569},[560,9486,592],{"class":565},[560,9488,9489],{"class":562,"line":668},[560,9490,665],{"emptyLinePlaceholder":516},[560,9492,9493,9495,9497],{"class":562,"line":678},[560,9494,566],{"class":565},[560,9496,673],{"class":569},[560,9498,592],{"class":565},[560,9500,9501,9503,9505,9508,9510,9512,9515,9517],{"class":562,"line":701},[560,9502,681],{"class":565},[560,9504,684],{"class":569},[560,9506,9507],{"class":573}," :clear-color",[560,9509,580],{"class":565},[560,9511,583],{"class":565},[560,9513,9514],{"class":586},"0x82dbc5",[560,9516,583],{"class":565},[560,9518,592],{"class":565},[560,9520,9521,9523,9525,9527,9529,9531,9534,9536,9539,9541,9543,9546,9548],{"class":562,"line":713},[560,9522,704],{"class":565},[560,9524,707],{"class":569},[560,9526,1407],{"class":573},[560,9528,580],{"class":565},[560,9530,583],{"class":565},[560,9532,9533],{"class":586},"[0, 0, 5]",[560,9535,583],{"class":565},[560,9537,9538],{"class":573}," :look-at",[560,9540,580],{"class":565},[560,9542,583],{"class":565},[560,9544,9545],{"class":586},"[0, 0, 0]",[560,9547,583],{"class":565},[560,9549,710],{"class":565},[560,9551,9552,9554,9556],{"class":562,"line":723},[560,9553,704],{"class":565},[560,9555,718],{"class":569},[560,9557,710],{"class":565},[560,9559,9561,9563,9566,9569,9571,9573,9576,9578],{"class":9560,"line":728},[562,596],[560,9562,704],{"class":565},[560,9564,9565],{"class":569},"Levioso",[560,9567,9568],{"class":573}," :speed",[560,9570,580],{"class":565},[560,9572,583],{"class":565},[560,9574,9575],{"class":586},"4",[560,9577,583],{"class":565},[560,9579,592],{"class":565},[560,9581,9582,9584,9586],{"class":562,"line":750},[560,9583,776],{"class":565},[560,9585,217],{"class":569},[560,9587,710],{"class":565},[560,9589,9591,9593,9595],{"class":9590,"line":554},[562,596],[560,9592,818],{"class":565},[560,9594,9565],{"class":569},[560,9596,592],{"class":565},[560,9598,9599,9601,9604,9606,9608,9610,9612,9614],{"class":562,"line":773},[560,9600,704],{"class":565},[560,9602,9603],{"class":569},"TresAmbientLight",[560,9605,1789],{"class":573},[560,9607,580],{"class":565},[560,9609,583],{"class":565},[560,9611,1796],{"class":586},[560,9613,583],{"class":565},[560,9615,710],{"class":565},[560,9617,9618,9620,9623,9625,9627,9629,9631,9633,9635,9637,9639,9642,9644],{"class":562,"line":784},[560,9619,704],{"class":565},[560,9621,9622],{"class":569},"TresDirectionalLight",[560,9624,1789],{"class":573},[560,9626,580],{"class":565},[560,9628,583],{"class":565},[560,9630,1796],{"class":586},[560,9632,583],{"class":565},[560,9634,1407],{"class":573},[560,9636,580],{"class":565},[560,9638,583],{"class":565},[560,9640,9641],{"class":586},"[2, 2, 2]",[560,9643,583],{"class":565},[560,9645,710],{"class":565},[560,9647,9648,9650,9652,9654,9656,9658,9661,9663],{"class":562,"line":795},[560,9649,704],{"class":565},[560,9651,7971],{"class":569},[560,9653,1407],{"class":573},[560,9655,580],{"class":565},[560,9657,583],{"class":565},[560,9659,9660],{"class":586},"[0, -1, 0]",[560,9662,583],{"class":565},[560,9664,710],{"class":565},[560,9666,9667,9669,9671],{"class":562,"line":805},[560,9668,828],{"class":565},[560,9670,684],{"class":569},[560,9672,592],{"class":565},[560,9674,9675,9677,9679],{"class":562,"line":555},[560,9676,655],{"class":565},[560,9678,673],{"class":569},[560,9680,592],{"class":565},[545,9682,845],{"id":844},[850,9684,9685,9695],{},[853,9686,9687],{},[856,9688,9689,9691,9693],{},[859,9690,861],{"align":920},[859,9692,864],{"align":920},[859,9694,867],{},[869,9696,9697,9711,9725,9739],{},[856,9698,9699,9704,9707],{},[874,9700,9701],{"align":920},[540,9702,9703],{},"speed",[874,9705,9706],{"align":920},"Floating speed, higher it rocks more 🤘.",[874,9708,9709],{},[540,9710,1796],{},[856,9712,9713,9718,9721],{},[874,9714,9715],{"align":920},[540,9716,9717],{},"rotationFactor",[874,9719,9720],{"align":920},"Factor for Euler rotation.",[874,9722,9723],{},[540,9724,1796],{},[856,9726,9727,9732,9735],{},[874,9728,9729],{"align":920},[540,9730,9731],{},"floatFactor",[874,9733,9734],{"align":920},"Factor for Up/down movement.",[874,9736,9737],{},[540,9738,1796],{},[856,9740,9741,9746,9749],{},[874,9742,9743],{"align":920},[540,9744,9745],{},"range",[874,9747,9748],{"align":920},"Range of y-axis values the object will float within.",[874,9750,9751],{},[540,9752,9753],{},"[-0.1, 0.1]",[1250,9755,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":9757},[9758,9759],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Make content float like magic with smooth animations.",{},{"title":69,"description":9760},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":9765,"title":73,"body":9766,"description":10410,"extension":513,"links":514,"meta":10411,"navigation":516,"path":74,"seo":10412,"stem":75,"__hash__":10413},"docs/2.api/1.abstractions/mask.md",{"type":501,"value":9767,"toc":10405},[9768,9773,9779,9812,9814,10277,10279,10342,10346,10353,10358,10373,10402],[530,9769,9770],{},[9771,9772],"abstractions-mask",{},[536,9774,9775,9778],{},[540,9776,9777],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3121,9780,9781,9799],{},[536,9782,9783,9784,9787,9788,9791,9792,9795,9796,1069],{},"To use ",[540,9785,9786],{},"\u003CMask />"," you ",[1596,9789,9790],{},"must"," add ",[540,9793,9794],{},":stencil=\"true\""," to your ",[540,9797,9798],{},"\u003CTresCanvas />",[536,9800,9801,9803,9804,9811],{},[540,9802,9786],{}," relies on the ",[1063,9805,9808],{"href":9806,"rel":9807},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1067],[540,9809,9810],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[545,9813,15],{"id":547},[549,9815,9818],{"className":551,"code":9816,"highlights":9817,"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,9819,9820,9840,9869,9887,9895,9899,9907,9937,9945,9953,9957,9976,9984,10004,10022,10030,10050,10060,10080,10089,10097,10101,10121,10129,10149,10157,10161,10180,10188,10206,10214,10218,10237,10245,10253,10261,10269],{"__ignoreMap":508},[560,9821,9822,9824,9826,9828,9830,9832,9834,9836,9838],{"class":562,"line":509},[560,9823,566],{"class":565},[560,9825,570],{"class":569},[560,9827,574],{"class":573},[560,9829,577],{"class":573},[560,9831,580],{"class":565},[560,9833,583],{"class":565},[560,9835,587],{"class":586},[560,9837,583],{"class":565},[560,9839,592],{"class":565},[560,9841,9843,9845,9847,9850,9852,9854,9856,9859,9861,9863,9865,9867],{"class":9842,"line":510},[562,596],[560,9844,600],{"class":599},[560,9846,603],{"class":565},[560,9848,9849],{"class":606}," Mask",[560,9851,610],{"class":565},[560,9853,613],{"class":606},[560,9855,610],{"class":565},[560,9857,9858],{"class":606}," useMask",[560,9860,616],{"class":565},[560,9862,619],{"class":599},[560,9864,622],{"class":565},[560,9866,625],{"class":586},[560,9868,628],{"class":565},[560,9870,9871,9873,9875,9877,9879,9881,9883,9885],{"class":562,"line":631},[560,9872,600],{"class":599},[560,9874,603],{"class":565},[560,9876,638],{"class":606},[560,9878,616],{"class":565},[560,9880,619],{"class":599},[560,9882,622],{"class":565},[560,9884,647],{"class":586},[560,9886,628],{"class":565},[560,9888,9889,9891,9893],{"class":562,"line":652},[560,9890,655],{"class":565},[560,9892,570],{"class":569},[560,9894,592],{"class":565},[560,9896,9897],{"class":562,"line":662},[560,9898,665],{"emptyLinePlaceholder":516},[560,9900,9901,9903,9905],{"class":562,"line":668},[560,9902,566],{"class":565},[560,9904,673],{"class":569},[560,9906,592],{"class":565},[560,9908,9909,9911,9913,9916,9918,9920,9922,9924,9926,9928,9930,9933,9935],{"class":562,"line":678},[560,9910,681],{"class":565},[560,9912,684],{"class":569},[560,9914,9915],{"class":573}," :stencil",[560,9917,580],{"class":565},[560,9919,583],{"class":565},[560,9921,884],{"class":586},[560,9923,583],{"class":565},[560,9925,687],{"class":573},[560,9927,580],{"class":565},[560,9929,583],{"class":565},[560,9931,9932],{"class":586},"#4f4f4f",[560,9934,583],{"class":565},[560,9936,592],{"class":565},[560,9938,9939,9941,9943],{"class":562,"line":701},[560,9940,704],{"class":565},[560,9942,707],{"class":569},[560,9944,710],{"class":565},[560,9946,9947,9949,9951],{"class":562,"line":713},[560,9948,704],{"class":565},[560,9950,718],{"class":569},[560,9952,710],{"class":565},[560,9954,9955],{"class":562,"line":723},[560,9956,665],{"emptyLinePlaceholder":516},[560,9958,9959,9961,9964,9966,9968,9970,9972,9974],{"class":562,"line":728},[560,9960,704],{"class":565},[560,9962,9963],{"class":569},"TresGroup",[560,9965,736],{"class":573},[560,9967,580],{"class":565},[560,9969,583],{"class":565},[560,9971,743],{"class":586},[560,9973,583],{"class":565},[560,9975,592],{"class":565},[560,9977,9978,9980,9982],{"class":562,"line":750},[560,9979,776],{"class":565},[560,9981,779],{"class":569},[560,9983,592],{"class":565},[560,9985,9986,9988,9991,9993,9995,9997,10000,10002],{"class":562,"line":554},[560,9987,787],{"class":565},[560,9989,9990],{"class":569},"TresRingGeometry",[560,9992,1881],{"class":573},[560,9994,580],{"class":565},[560,9996,583],{"class":565},[560,9998,9999],{"class":586},"[0.95, 1, 64]",[560,10001,583],{"class":565},[560,10003,710],{"class":565},[560,10005,10006,10008,10010,10012,10014,10016,10018,10020],{"class":562,"line":773},[560,10007,787],{"class":565},[560,10009,7394],{"class":569},[560,10011,2611],{"class":573},[560,10013,580],{"class":565},[560,10015,583],{"class":565},[560,10017,2618],{"class":586},[560,10019,583],{"class":565},[560,10021,710],{"class":565},[560,10023,10024,10026,10028],{"class":562,"line":784},[560,10025,808],{"class":565},[560,10027,779],{"class":569},[560,10029,592],{"class":565},[560,10031,10033,10035,10037,10040,10042,10044,10046,10048],{"class":10032,"line":795},[562,596],[560,10034,776],{"class":565},[560,10036,73],{"class":569},[560,10038,10039],{"class":573}," :id",[560,10041,580],{"class":565},[560,10043,583],{"class":565},[560,10045,1796],{"class":586},[560,10047,583],{"class":565},[560,10049,592],{"class":565},[560,10051,10053,10055,10058],{"class":10052,"line":805},[562,596],[560,10054,787],{"class":565},[560,10056,10057],{"class":569},"TresCircleGeometry",[560,10059,710],{"class":565},[560,10061,10063,10065,10067,10069,10071,10073,10076,10078],{"class":10062,"line":555},[562,596],[560,10064,787],{"class":565},[560,10066,7394],{"class":569},[560,10068,2611],{"class":573},[560,10070,580],{"class":565},[560,10072,583],{"class":565},[560,10074,10075],{"class":586},"#fbb03b",[560,10077,583],{"class":565},[560,10079,710],{"class":565},[560,10081,10083,10085,10087],{"class":10082,"line":825},[562,596],[560,10084,808],{"class":565},[560,10086,73],{"class":569},[560,10088,592],{"class":565},[560,10090,10091,10093,10095],{"class":562,"line":835},[560,10092,818],{"class":565},[560,10094,9963],{"class":569},[560,10096,592],{"class":565},[560,10098,10099],{"class":562,"line":2547},[560,10100,665],{"emptyLinePlaceholder":516},[560,10102,10103,10105,10107,10110,10112,10114,10117,10119],{"class":562,"line":2556},[560,10104,704],{"class":565},[560,10106,779],{"class":569},[560,10108,10109],{"class":573}," :position-z",[560,10111,580],{"class":565},[560,10113,583],{"class":565},[560,10115,10116],{"class":586},"-1",[560,10118,583],{"class":565},[560,10120,592],{"class":565},[560,10122,10123,10125,10127],{"class":562,"line":2576},[560,10124,776],{"class":565},[560,10126,790],{"class":569},[560,10128,710],{"class":565},[560,10130,10131,10133,10135,10138,10140,10142,10145,10147],{"class":562,"line":2585},[560,10132,776],{"class":565},[560,10134,800],{"class":569},[560,10136,10137],{"class":573}," v-bind",[560,10139,580],{"class":565},[560,10141,583],{"class":565},[560,10143,10144],{"class":586},"useMask(1)",[560,10146,583],{"class":565},[560,10148,710],{"class":565},[560,10150,10151,10153,10155],{"class":562,"line":2594},[560,10152,818],{"class":565},[560,10154,779],{"class":569},[560,10156,592],{"class":565},[560,10158,10159],{"class":562,"line":2603},[560,10160,665],{"emptyLinePlaceholder":516},[560,10162,10163,10165,10167,10169,10171,10173,10176,10178],{"class":562,"line":2625},[560,10164,704],{"class":565},[560,10166,779],{"class":569},[560,10168,10109],{"class":573},[560,10170,580],{"class":565},[560,10172,583],{"class":565},[560,10174,10175],{"class":586},"-3",[560,10177,583],{"class":565},[560,10179,592],{"class":565},[560,10181,10182,10184,10186],{"class":562,"line":2669},[560,10183,776],{"class":565},[560,10185,790],{"class":569},[560,10187,710],{"class":565},[560,10189,10190,10192,10194,10196,10198,10200,10202,10204],{"class":562,"line":2678},[560,10191,776],{"class":565},[560,10193,800],{"class":569},[560,10195,10137],{"class":573},[560,10197,580],{"class":565},[560,10199,583],{"class":565},[560,10201,10144],{"class":586},[560,10203,583],{"class":565},[560,10205,710],{"class":565},[560,10207,10208,10210,10212],{"class":562,"line":2687},[560,10209,818],{"class":565},[560,10211,779],{"class":569},[560,10213,592],{"class":565},[560,10215,10216],{"class":562,"line":3844},[560,10217,665],{"emptyLinePlaceholder":516},[560,10219,10220,10222,10224,10226,10228,10230,10233,10235],{"class":562,"line":3875},[560,10221,704],{"class":565},[560,10223,779],{"class":569},[560,10225,10109],{"class":573},[560,10227,580],{"class":565},[560,10229,583],{"class":565},[560,10231,10232],{"class":586},"-5",[560,10234,583],{"class":565},[560,10236,592],{"class":565},[560,10238,10239,10241,10243],{"class":562,"line":3896},[560,10240,776],{"class":565},[560,10242,790],{"class":569},[560,10244,710],{"class":565},[560,10246,10247,10249,10251],{"class":562,"line":3915},[560,10248,776],{"class":565},[560,10250,800],{"class":569},[560,10252,710],{"class":565},[560,10254,10255,10257,10259],{"class":562,"line":3947},[560,10256,818],{"class":565},[560,10258,779],{"class":569},[560,10260,592],{"class":565},[560,10262,10263,10265,10267],{"class":562,"line":3956},[560,10264,828],{"class":565},[560,10266,684],{"class":569},[560,10268,592],{"class":565},[560,10270,10271,10273,10275],{"class":562,"line":3965},[560,10272,655],{"class":565},[560,10274,673],{"class":569},[560,10276,592],{"class":565},[545,10278,845],{"id":844},[850,10280,10281,10291],{},[853,10282,10283],{},[856,10284,10285,10287,10289],{},[859,10286,861],{"align":920},[859,10288,864],{"align":920},[859,10290,867],{},[869,10292,10293,10310,10326],{},[856,10294,10295,10302,10308],{},[874,10296,10297],{"align":920},[1591,10298,10299],{},[540,10300,10301],{},"id",[874,10303,10304,10305,10307],{"align":920},"Id of the stencil buffer to use. Each mask must have a ",[540,10306,5274],{}," id. Multiple masks can refer to the same id.",[874,10309],{},[856,10311,10312,10319,10322],{},[874,10313,10314],{"align":920},[1591,10315,10316],{},[540,10317,10318],{},"colorWrite",[874,10320,10321],{"align":920},"Whether the colors of the mask's own material will leak through.",[874,10323,10324],{},[540,10325,894],{},[856,10327,10328,10335,10338],{},[874,10329,10330],{"align":920},[1591,10331,10332],{},[540,10333,10334],{},"depthWrite",[874,10336,10337],{"align":920},"Whether the depth of the mask's own material will leak through.",[874,10339,10340],{},[540,10341,894],{},[545,10343,10345],{"id":10344},"usemask","useMask",[536,10347,10348,10349,10352],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[540,10350,10351],{},"v-bind"," on materials that should be affected by the mask.",[536,10354,10355],{},[1591,10356,10357],{},"Parameters:",[2135,10359,10360,10365],{},[2138,10361,10362,10364],{},[540,10363,10301],{}," - The mask id to use (number or Ref)",[2138,10366,10367,10370,10371],{},[540,10368,10369],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[540,10372,894],{},[549,10374,10376],{"className":551,"code":10375,"language":556,"meta":508,"style":508},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[540,10377,10378],{"__ignoreMap":508},[560,10379,10380,10382,10384,10386,10388,10390,10392,10394,10396,10398,10400],{"class":562,"line":509},[560,10381,566],{"class":565},[560,10383,800],{"class":569},[560,10385,10137],{"class":573},[560,10387,580],{"class":565},[560,10389,583],{"class":565},[560,10391,10345],{"class":2356},[560,10393,2359],{"class":606},[560,10395,1796],{"class":2423},[560,10397,3262],{"class":606},[560,10399,583],{"class":565},[560,10401,710],{"class":565},[1250,10403,10404],{},"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":10406},[10407,10408,10409],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":10344,"depth":510,"text":10345},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10410},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":10415,"title":77,"body":10416,"description":11116,"extension":513,"links":514,"meta":11117,"navigation":516,"path":78,"seo":11118,"stem":79,"__hash__":11119},"docs/2.api/1.abstractions/merged.md",{"type":501,"value":10417,"toc":11110},[10418,10423,10434,10441,10443,10446,10663,10666,10933,10941,10945,10954,11022,11025,11029,11041,11043,11092,11097,11107],[530,10419,10420],{},[10421,10422],"abstractions-merged",{},[536,10424,10425,8623,10427,10430,10431,1069],{},[540,10426,8965],{},[540,10428,10429],{},"{ 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,10432,10433],{},"\u003CInstance batch=\"...\" />",[536,10435,10436,10437,10440],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1591,10438,10439],{},"two"," drawcalls, not 98.",[545,10442,15],{"id":547},[536,10444,10445],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[549,10447,10450],{"className":551,"code":10448,"filename":10449,"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,10451,10452,10472,10490,10498,10502,10510,10518,10548,10588,10618,10647,10655],{"__ignoreMap":508},[560,10453,10454,10456,10458,10460,10462,10464,10466,10468,10470],{"class":562,"line":509},[560,10455,566],{"class":565},[560,10457,570],{"class":569},[560,10459,574],{"class":573},[560,10461,577],{"class":573},[560,10463,580],{"class":565},[560,10465,583],{"class":565},[560,10467,587],{"class":586},[560,10469,583],{"class":565},[560,10471,592],{"class":565},[560,10473,10474,10476,10478,10480,10482,10484,10486,10488],{"class":562,"line":510},[560,10475,600],{"class":599},[560,10477,603],{"class":565},[560,10479,8248],{"class":606},[560,10481,616],{"class":565},[560,10483,619],{"class":599},[560,10485,622],{"class":565},[560,10487,625],{"class":586},[560,10489,628],{"class":565},[560,10491,10492,10494,10496],{"class":562,"line":631},[560,10493,655],{"class":565},[560,10495,570],{"class":569},[560,10497,592],{"class":565},[560,10499,10500],{"class":562,"line":652},[560,10501,665],{"emptyLinePlaceholder":516},[560,10503,10504,10506,10508],{"class":562,"line":662},[560,10505,566],{"class":565},[560,10507,673],{"class":569},[560,10509,592],{"class":565},[560,10511,10512,10514,10516],{"class":562,"line":668},[560,10513,681],{"class":565},[560,10515,9963],{"class":569},[560,10517,592],{"class":565},[560,10519,10520,10522,10524,10527,10529,10531,10533,10535,10537,10539,10541,10544,10546],{"class":562,"line":678},[560,10521,704],{"class":565},[560,10523,8642],{"class":569},[560,10525,10526],{"class":573}," batch",[560,10528,580],{"class":565},[560,10530,583],{"class":565},[560,10532,4651],{"class":586},[560,10534,583],{"class":565},[560,10536,1407],{"class":573},[560,10538,580],{"class":565},[560,10540,583],{"class":565},[560,10542,10543],{"class":586},"[0, 0.6, 0]",[560,10545,583],{"class":565},[560,10547,710],{"class":565},[560,10549,10550,10552,10554,10556,10558,10560,10562,10564,10566,10568,10570,10573,10575,10577,10579,10581,10584,10586],{"class":562,"line":701},[560,10551,704],{"class":565},[560,10553,8642],{"class":569},[560,10555,10526],{"class":573},[560,10557,580],{"class":565},[560,10559,583],{"class":565},[560,10561,4651],{"class":586},[560,10563,583],{"class":565},[560,10565,1407],{"class":573},[560,10567,580],{"class":565},[560,10569,583],{"class":565},[560,10571,10572],{"class":586},"[0, 1.6, 0]",[560,10574,583],{"class":565},[560,10576,736],{"class":573},[560,10578,580],{"class":565},[560,10580,583],{"class":565},[560,10582,10583],{"class":586},"0.6",[560,10585,583],{"class":565},[560,10587,710],{"class":565},[560,10589,10590,10592,10594,10596,10598,10600,10603,10605,10607,10609,10611,10614,10616],{"class":562,"line":713},[560,10591,704],{"class":565},[560,10593,8642],{"class":569},[560,10595,10526],{"class":573},[560,10597,580],{"class":565},[560,10599,583],{"class":565},[560,10601,10602],{"class":586},"Eye",[560,10604,583],{"class":565},[560,10606,1407],{"class":573},[560,10608,580],{"class":565},[560,10610,583],{"class":565},[560,10612,10613],{"class":586},"[-0.18, 1.7, 0.32]",[560,10615,583],{"class":565},[560,10617,710],{"class":565},[560,10619,10620,10622,10624,10626,10628,10630,10632,10634,10636,10638,10640,10643,10645],{"class":562,"line":723},[560,10621,704],{"class":565},[560,10623,8642],{"class":569},[560,10625,10526],{"class":573},[560,10627,580],{"class":565},[560,10629,583],{"class":565},[560,10631,10602],{"class":586},[560,10633,583],{"class":565},[560,10635,1407],{"class":573},[560,10637,580],{"class":565},[560,10639,583],{"class":565},[560,10641,10642],{"class":586},"[0.18, 1.7, 0.32]",[560,10644,583],{"class":565},[560,10646,710],{"class":565},[560,10648,10649,10651,10653],{"class":562,"line":728},[560,10650,828],{"class":565},[560,10652,9963],{"class":569},[560,10654,592],{"class":565},[560,10656,10657,10659,10661],{"class":562,"line":750},[560,10658,655],{"class":565},[560,10660,673],{"class":569},[560,10662,592],{"class":565},[536,10664,10665],{},"The provider hands over the meshes and renders as many copies as it likes:",[549,10667,10670],{"className":551,"code":10668,"highlights":10669,"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,10671,10672,10692,10710,10733,10749,10753,10778,10786,10790,10798,10806,10825,10846,10867,10886,10906,10915,10924],{"__ignoreMap":508},[560,10673,10674,10676,10678,10680,10682,10684,10686,10688,10690],{"class":562,"line":509},[560,10675,566],{"class":565},[560,10677,570],{"class":569},[560,10679,574],{"class":573},[560,10681,577],{"class":573},[560,10683,580],{"class":565},[560,10685,583],{"class":565},[560,10687,587],{"class":586},[560,10689,583],{"class":565},[560,10691,592],{"class":565},[560,10693,10694,10696,10698,10700,10702,10704,10706,10708],{"class":562,"line":510},[560,10695,600],{"class":599},[560,10697,603],{"class":565},[560,10699,638],{"class":606},[560,10701,616],{"class":565},[560,10703,619],{"class":599},[560,10705,622],{"class":565},[560,10707,647],{"class":586},[560,10709,628],{"class":565},[560,10711,10712,10714,10716,10719,10721,10723,10725,10727,10729,10731],{"class":562,"line":631},[560,10713,600],{"class":599},[560,10715,603],{"class":565},[560,10717,10718],{"class":606}," Merged",[560,10720,610],{"class":565},[560,10722,4269],{"class":606},[560,10724,616],{"class":565},[560,10726,619],{"class":599},[560,10728,622],{"class":565},[560,10730,625],{"class":586},[560,10732,628],{"class":565},[560,10734,10735,10737,10740,10742,10744,10747],{"class":562,"line":652},[560,10736,600],{"class":599},[560,10738,10739],{"class":606}," Robot ",[560,10741,8355],{"class":599},[560,10743,622],{"class":565},[560,10745,10746],{"class":586},"./Robot.vue",[560,10748,628],{"class":565},[560,10750,10751],{"class":562,"line":662},[560,10752,665],{"emptyLinePlaceholder":516},[560,10754,10755,10757,10759,10761,10763,10765,10767,10769,10771,10774,10776],{"class":562,"line":668},[560,10756,2337],{"class":573},[560,10758,603],{"class":565},[560,10760,4292],{"class":606},[560,10762,2350],{"class":565},[560,10764,2353],{"class":565},[560,10766,4269],{"class":2356},[560,10768,2359],{"class":606},[560,10770,2362],{"class":565},[560,10772,10773],{"class":586},"/robot.glb",[560,10775,2362],{"class":565},[560,10777,2370],{"class":606},[560,10779,10780,10782,10784],{"class":562,"line":678},[560,10781,655],{"class":565},[560,10783,570],{"class":569},[560,10785,592],{"class":565},[560,10787,10788],{"class":562,"line":701},[560,10789,665],{"emptyLinePlaceholder":516},[560,10791,10792,10794,10796],{"class":562,"line":713},[560,10793,566],{"class":565},[560,10795,673],{"class":569},[560,10797,592],{"class":565},[560,10799,10800,10802,10804],{"class":562,"line":723},[560,10801,681],{"class":565},[560,10803,684],{"class":569},[560,10805,592],{"class":565},[560,10807,10808,10810,10812,10814,10816,10818,10821,10823],{"class":562,"line":728},[560,10809,704],{"class":565},[560,10811,707],{"class":569},[560,10813,1407],{"class":573},[560,10815,580],{"class":565},[560,10817,583],{"class":565},[560,10819,10820],{"class":586},"[12, 9, 12]",[560,10822,583],{"class":565},[560,10824,710],{"class":565},[560,10826,10828,10830,10832,10835,10837,10839,10842,10844],{"class":10827,"line":750},[562,596],[560,10829,704],{"class":565},[560,10831,77],{"class":569},[560,10833,10834],{"class":573}," :meshes",[560,10836,580],{"class":565},[560,10838,583],{"class":565},[560,10840,10841],{"class":586},"{ Body: nodes.Body, Eye: nodes.Eye }",[560,10843,583],{"class":565},[560,10845,592],{"class":565},[560,10847,10849,10851,10854,10856,10858,10860,10863,10865],{"class":10848,"line":554},[562,596],[560,10850,776],{"class":565},[560,10852,10853],{"class":569},"Robot",[560,10855,1407],{"class":573},[560,10857,580],{"class":565},[560,10859,583],{"class":565},[560,10861,10862],{"class":586},"[-2, 0, 0]",[560,10864,583],{"class":565},[560,10866,710],{"class":565},[560,10868,10870,10872,10874,10876,10878,10880,10882,10884],{"class":10869,"line":773},[562,596],[560,10871,776],{"class":565},[560,10873,10853],{"class":569},[560,10875,1407],{"class":573},[560,10877,580],{"class":565},[560,10879,583],{"class":565},[560,10881,9545],{"class":586},[560,10883,583],{"class":565},[560,10885,710],{"class":565},[560,10887,10889,10891,10893,10895,10897,10899,10902,10904],{"class":10888,"line":784},[562,596],[560,10890,776],{"class":565},[560,10892,10853],{"class":569},[560,10894,1407],{"class":573},[560,10896,580],{"class":565},[560,10898,583],{"class":565},[560,10900,10901],{"class":586},"[2, 0, 0]",[560,10903,583],{"class":565},[560,10905,710],{"class":565},[560,10907,10909,10911,10913],{"class":10908,"line":795},[562,596],[560,10910,818],{"class":565},[560,10912,77],{"class":569},[560,10914,592],{"class":565},[560,10916,10918,10920,10922],{"class":10917,"line":805},[562,596],[560,10919,828],{"class":565},[560,10921,684],{"class":569},[560,10923,592],{"class":565},[560,10925,10927,10929,10931],{"class":10926,"line":555},[562,596],[560,10928,655],{"class":565},[560,10930,673],{"class":569},[560,10932,592],{"class":565},[1927,10934,10935],{},[536,10936,10937,10938,10940],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[540,10939,8166],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[545,10942,10944],{"id":10943},"instancing-a-whole-gltf","Instancing a whole glTF",[536,10946,10947,10949,10950,10953],{},[540,10948,133],{}," gives you ",[540,10951,10952],{},"nodes",", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[549,10955,10957],{"className":551,"code":10956,"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,10958,10959,11009,11014],{"__ignoreMap":508},[560,10960,10961,10963,10965,10967,10970,10972,10974,10976,10979,10981,10984,10986,10989,10991,10994,10996,10998,11000,11003,11005,11007],{"class":562,"line":509},[560,10962,566],{"class":565},[560,10964,77],{"class":569},[560,10966,2951],{"class":565},[560,10968,10969],{"class":573},"meshes",[560,10971,580],{"class":565},[560,10973,583],{"class":565},[560,10975,8360],{"class":565},[560,10977,10978],{"class":569}," Screw",[560,10980,1141],{"class":565},[560,10982,10983],{"class":606}," nodes",[560,10985,1069],{"class":565},[560,10987,10988],{"class":606},"Screw",[560,10990,610],{"class":565},[560,10992,10993],{"class":569}," Bolt",[560,10995,1141],{"class":565},[560,10997,10983],{"class":606},[560,10999,1069],{"class":565},[560,11001,11002],{"class":606},"Bolt ",[560,11004,2350],{"class":565},[560,11006,583],{"class":565},[560,11008,592],{"class":565},[560,11010,11011],{"class":562,"line":510},[560,11012,11013],{"class":606},"  \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n",[560,11015,11016,11018,11020],{"class":562,"line":631},[560,11017,655],{"class":565},[560,11019,77],{"class":569},[560,11021,592],{"class":565},[536,11023,11024],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[545,11026,11028],{"id":11027},"opting-a-node-out","Opting a node out",[536,11030,8178,11031,11033,11034,11037,11038,11040],{},[540,11032,8166],{}," 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,11035,11036],{},"\u003CTresMesh />","\ninstead of an ",[540,11039,8166],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[545,11042,845],{"id":844},[850,11044,11045,11055],{},[853,11046,11047],{},[856,11048,11049,11051,11053],{},[859,11050,861],{"align":920},[859,11052,864],{"align":920},[859,11054,867],{},[869,11056,11057,11073],{},[856,11058,11059,11063,11069],{},[874,11060,11061],{"align":920},[540,11062,10969],{},[874,11064,11065,11066,11068],{"align":920},"One batch per entry, keyed by what ",[540,11067,10433],{}," joins.",[874,11070,11071],{},[1596,11072,9181],{},[856,11074,11075,11079,11087],{},[874,11076,11077],{"align":920},[540,11078,9001],{},[874,11080,11081,11082,11084,11085,1069],{"align":920},"Initial buffer allocation per batch. One batch per entry in ",[540,11083,10969],{},", so it defaults lower than ",[540,11086,8159],{},[874,11088,11089],{},[540,11090,11091],{},"100",[536,11093,11094,11095,1069],{},"Exposes the named batch registry through ",[540,11096,9153],{},[9341,11098,11099],{"to":66},[536,11100,11101,11102,11104,11105,1069],{},"Per-instance colors, pointer events, visibility and the ",[540,11103,9001],{}," growth behaviour are documented on ",[540,11106,8159],{},[1250,11108,11109],{},"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":11111},[11112,11113,11114,11115],{"id":547,"depth":510,"text":15},{"id":10943,"depth":510,"text":10944},{"id":11027,"depth":510,"text":11028},{"id":844,"depth":510,"text":845},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11116},"C2ZYlA8AWc0pX47Tdp8yJPJh6JofaryewUtJVMvgXZw",{"id":11121,"title":81,"body":11122,"description":11593,"extension":513,"links":514,"meta":11594,"navigation":516,"path":82,"seo":11595,"stem":83,"__hash__":11596},"docs/2.api/1.abstractions/outline.md",{"type":501,"value":11123,"toc":11589},[11124,11129,11140,11142,11489,11491,11587],[530,11125,11126],{},[11127,11128],"abstractions-outline",{},[536,11130,11131,11134,11135,2985,11137,1069],{},[540,11132,11133],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[540,11136,2232],{},[540,11138,11139],{},"\u003CTresSkinnedMesh>",[545,11141,15],{"id":547},[549,11143,11146],{"className":551,"code":11144,"highlights":11145,"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,11147,11148,11168,11186,11210,11218,11222,11230,11248,11256,11264,11283,11314,11334,11342,11351,11383,11391,11409,11428,11436,11465,11473,11481],{"__ignoreMap":508},[560,11149,11150,11152,11154,11156,11158,11160,11162,11164,11166],{"class":562,"line":509},[560,11151,566],{"class":565},[560,11153,570],{"class":569},[560,11155,574],{"class":573},[560,11157,577],{"class":573},[560,11159,580],{"class":565},[560,11161,583],{"class":565},[560,11163,587],{"class":586},[560,11165,583],{"class":565},[560,11167,592],{"class":565},[560,11169,11170,11172,11174,11176,11178,11180,11182,11184],{"class":562,"line":510},[560,11171,600],{"class":599},[560,11173,603],{"class":565},[560,11175,638],{"class":606},[560,11177,616],{"class":565},[560,11179,619],{"class":599},[560,11181,622],{"class":565},[560,11183,647],{"class":586},[560,11185,628],{"class":565},[560,11187,11189,11191,11193,11195,11197,11200,11202,11204,11206,11208],{"class":11188,"line":631},[562,596],[560,11190,600],{"class":599},[560,11192,603],{"class":565},[560,11194,613],{"class":606},[560,11196,610],{"class":565},[560,11198,11199],{"class":606}," Outline",[560,11201,616],{"class":565},[560,11203,619],{"class":599},[560,11205,622],{"class":565},[560,11207,625],{"class":586},[560,11209,628],{"class":565},[560,11211,11212,11214,11216],{"class":562,"line":652},[560,11213,655],{"class":565},[560,11215,570],{"class":569},[560,11217,592],{"class":565},[560,11219,11220],{"class":562,"line":662},[560,11221,665],{"emptyLinePlaceholder":516},[560,11223,11224,11226,11228],{"class":562,"line":668},[560,11225,566],{"class":565},[560,11227,673],{"class":569},[560,11229,592],{"class":565},[560,11231,11232,11234,11236,11238,11240,11242,11244,11246],{"class":562,"line":678},[560,11233,681],{"class":565},[560,11235,684],{"class":569},[560,11237,687],{"class":573},[560,11239,580],{"class":565},[560,11241,583],{"class":565},[560,11243,9932],{"class":586},[560,11245,583],{"class":565},[560,11247,592],{"class":565},[560,11249,11250,11252,11254],{"class":562,"line":701},[560,11251,704],{"class":565},[560,11253,707],{"class":569},[560,11255,710],{"class":565},[560,11257,11258,11260,11262],{"class":562,"line":713},[560,11259,704],{"class":565},[560,11261,718],{"class":569},[560,11263,710],{"class":565},[560,11265,11266,11268,11270,11272,11274,11276,11279,11281],{"class":562,"line":723},[560,11267,704],{"class":565},[560,11269,9603],{"class":569},[560,11271,1789],{"class":573},[560,11273,580],{"class":565},[560,11275,583],{"class":565},[560,11277,11278],{"class":586},"3.14",[560,11280,583],{"class":565},[560,11282,710],{"class":565},[560,11284,11285,11287,11290,11292,11294,11296,11299,11301,11303,11305,11307,11310,11312],{"class":562,"line":728},[560,11286,704],{"class":565},[560,11288,11289],{"class":569},"TresPointLight",[560,11291,1789],{"class":573},[560,11293,580],{"class":565},[560,11295,583],{"class":565},[560,11297,11298],{"class":586},"50",[560,11300,583],{"class":565},[560,11302,1407],{"class":573},[560,11304,580],{"class":565},[560,11306,583],{"class":565},[560,11308,11309],{"class":586},"[2, 2, 0]",[560,11311,583],{"class":565},[560,11313,710],{"class":565},[560,11315,11316,11318,11320,11323,11325,11327,11330,11332],{"class":562,"line":750},[560,11317,704],{"class":565},[560,11319,779],{"class":569},[560,11321,11322],{"class":573}," :position-x",[560,11324,580],{"class":565},[560,11326,583],{"class":565},[560,11328,11329],{"class":586},"-0.75",[560,11331,583],{"class":565},[560,11333,592],{"class":565},[560,11335,11336,11338,11340],{"class":562,"line":554},[560,11337,776],{"class":565},[560,11339,790],{"class":569},[560,11341,710],{"class":565},[560,11343,11344,11346,11349],{"class":562,"line":773},[560,11345,776],{"class":565},[560,11347,11348],{"class":569},"TresMeshPhongMaterial",[560,11350,710],{"class":565},[560,11352,11354,11356,11358,11361,11363,11365,11368,11370,11372,11374,11376,11379,11381],{"class":11353,"line":784},[562,596],[560,11355,776],{"class":565},[560,11357,81],{"class":569},[560,11359,11360],{"class":573}," :thickness",[560,11362,580],{"class":565},[560,11364,583],{"class":565},[560,11366,11367],{"class":586},"7.5",[560,11369,583],{"class":565},[560,11371,2611],{"class":573},[560,11373,580],{"class":565},[560,11375,583],{"class":565},[560,11377,11378],{"class":586},"#82dbc5",[560,11380,583],{"class":565},[560,11382,710],{"class":565},[560,11384,11385,11387,11389],{"class":562,"line":795},[560,11386,818],{"class":565},[560,11388,779],{"class":569},[560,11390,592],{"class":565},[560,11392,11393,11395,11397,11399,11401,11403,11405,11407],{"class":562,"line":805},[560,11394,704],{"class":565},[560,11396,779],{"class":569},[560,11398,11322],{"class":573},[560,11400,580],{"class":565},[560,11402,583],{"class":565},[560,11404,2473],{"class":586},[560,11406,583],{"class":565},[560,11408,592],{"class":565},[560,11410,11411,11413,11415,11417,11419,11421,11424,11426],{"class":562,"line":555},[560,11412,776],{"class":565},[560,11414,3880],{"class":569},[560,11416,1881],{"class":573},[560,11418,580],{"class":565},[560,11420,583],{"class":565},[560,11422,11423],{"class":586},"[0.5]",[560,11425,583],{"class":565},[560,11427,710],{"class":565},[560,11429,11430,11432,11434],{"class":562,"line":825},[560,11431,776],{"class":565},[560,11433,11348],{"class":569},[560,11435,710],{"class":565},[560,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455,11457,11459,11461,11463],{"class":11438,"line":835},[562,596],[560,11440,776],{"class":565},[560,11442,81],{"class":569},[560,11444,11360],{"class":573},[560,11446,580],{"class":565},[560,11448,583],{"class":565},[560,11450,11367],{"class":586},[560,11452,583],{"class":565},[560,11454,2611],{"class":573},[560,11456,580],{"class":565},[560,11458,583],{"class":565},[560,11460,10075],{"class":586},[560,11462,583],{"class":565},[560,11464,710],{"class":565},[560,11466,11467,11469,11471],{"class":562,"line":2547},[560,11468,818],{"class":565},[560,11470,779],{"class":569},[560,11472,592],{"class":565},[560,11474,11475,11477,11479],{"class":562,"line":2556},[560,11476,828],{"class":565},[560,11478,684],{"class":569},[560,11480,592],{"class":565},[560,11482,11483,11485,11487],{"class":562,"line":2576},[560,11484,655],{"class":565},[560,11486,673],{"class":569},[560,11488,592],{"class":565},[545,11490,845],{"id":844},[850,11492,11493,11503],{},[853,11494,11495],{},[856,11496,11497,11499,11501],{},[859,11498,845],{},[859,11500,864],{},[859,11502,867],{},[869,11504,11505,11517,11529,11541,11553,11566],{},[856,11506,11507,11509,11512],{},[874,11508,7469],{},[874,11510,11511],{},"Outline color",[874,11513,11514],{},[540,11515,11516],{},"'black'",[856,11518,11519,11522,11525],{},[874,11520,11521],{},"screenspace",[874,11523,11524],{},"Whether line thickness is independent of zoom",[874,11526,11527],{},[540,11528,894],{},[856,11530,11531,11534,11537],{},[874,11532,11533],{},"opacity",[874,11535,11536],{},"Outline opacity",[874,11538,11539],{},[540,11540,1796],{},[856,11542,11543,11546,11549],{},[874,11544,11545],{},"transparent",[874,11547,11548],{},"Outline transparency",[874,11550,11551],{},[540,11552,894],{},[856,11554,11555,11558,11561],{},[874,11556,11557],{},"thickness",[874,11559,11560],{},"Outline thickness",[874,11562,11563],{},[540,11564,11565],{},"0.05",[856,11567,11568,11571,11582],{},[874,11569,11570],{},"angle",[874,11572,11573,11574,11576,11577],{},"Geometry crease angle (",[540,11575,888],{}," is no crease).  See ",[1063,11578,11581],{"href":11579,"rel":11580},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1067],"BufferGeometryUtils.toCreasedNormals",[874,11583,11584],{},[540,11585,11586],{},"Math.PI",[1250,11588,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":11590},[11591,11592],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":11593},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":11598,"title":85,"body":11599,"description":12395,"extension":513,"links":514,"meta":12396,"navigation":516,"path":86,"seo":12397,"stem":87,"__hash__":12398},"docs/2.api/1.abstractions/sampler.md",{"type":501,"value":11600,"toc":12390},[11601,11606,11609,11611,11904,11906,11971,11975,11982,12387],[530,11602,11603],{},[11604,11605],"abstractions-sampler",{},[536,11607,11608],{},"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,11610,15],{"id":547},[549,11612,11615],{"className":551,"code":11613,"highlights":11614,"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,11616,11617,11637,11661,11679,11687,11691,11699,11718,11737,11745,11749,11769,11778,11788,11797,11802,11822,11842,11851,11860,11869,11888,11896],{"__ignoreMap":508},[560,11618,11619,11621,11623,11625,11627,11629,11631,11633,11635],{"class":562,"line":509},[560,11620,566],{"class":565},[560,11622,570],{"class":569},[560,11624,574],{"class":573},[560,11626,577],{"class":573},[560,11628,580],{"class":565},[560,11630,583],{"class":565},[560,11632,587],{"class":586},[560,11634,583],{"class":565},[560,11636,592],{"class":565},[560,11638,11640,11642,11644,11646,11648,11651,11653,11655,11657,11659],{"class":11639,"line":510},[562,596],[560,11641,600],{"class":599},[560,11643,603],{"class":565},[560,11645,613],{"class":606},[560,11647,610],{"class":565},[560,11649,11650],{"class":606}," Sampler",[560,11652,616],{"class":565},[560,11654,619],{"class":599},[560,11656,622],{"class":565},[560,11658,625],{"class":586},[560,11660,628],{"class":565},[560,11662,11663,11665,11667,11669,11671,11673,11675,11677],{"class":562,"line":631},[560,11664,600],{"class":599},[560,11666,603],{"class":565},[560,11668,638],{"class":606},[560,11670,616],{"class":565},[560,11672,619],{"class":599},[560,11674,622],{"class":565},[560,11676,647],{"class":586},[560,11678,628],{"class":565},[560,11680,11681,11683,11685],{"class":562,"line":652},[560,11682,655],{"class":565},[560,11684,570],{"class":569},[560,11686,592],{"class":565},[560,11688,11689],{"class":562,"line":662},[560,11690,665],{"emptyLinePlaceholder":516},[560,11692,11693,11695,11697],{"class":562,"line":668},[560,11694,566],{"class":565},[560,11696,673],{"class":569},[560,11698,592],{"class":565},[560,11700,11701,11703,11705,11707,11709,11711,11714,11716],{"class":562,"line":678},[560,11702,681],{"class":565},[560,11704,684],{"class":569},[560,11706,687],{"class":573},[560,11708,580],{"class":565},[560,11710,583],{"class":565},[560,11712,11713],{"class":586},"#82DBC5",[560,11715,583],{"class":565},[560,11717,592],{"class":565},[560,11719,11720,11722,11724,11726,11728,11730,11733,11735],{"class":562,"line":701},[560,11721,704],{"class":565},[560,11723,707],{"class":569},[560,11725,1407],{"class":573},[560,11727,580],{"class":565},[560,11729,583],{"class":565},[560,11731,11732],{"class":586},"[0, 0.5, 5]",[560,11734,583],{"class":565},[560,11736,710],{"class":565},[560,11738,11739,11741,11743],{"class":562,"line":713},[560,11740,704],{"class":565},[560,11742,718],{"class":569},[560,11744,710],{"class":565},[560,11746,11747],{"class":562,"line":723},[560,11748,665],{"emptyLinePlaceholder":516},[560,11750,11752,11754,11756,11759,11761,11763,11765,11767],{"class":11751,"line":728},[562,596],[560,11753,704],{"class":565},[560,11755,85],{"class":569},[560,11757,11758],{"class":573}," :count",[560,11760,580],{"class":565},[560,11762,583],{"class":565},[560,11764,11298],{"class":586},[560,11766,583],{"class":565},[560,11768,592],{"class":565},[560,11770,11772,11774,11776],{"class":11771,"line":750},[562,596],[560,11773,776],{"class":565},[560,11775,779],{"class":569},[560,11777,592],{"class":565},[560,11779,11781,11783,11786],{"class":11780,"line":554},[562,596],[560,11782,787],{"class":565},[560,11784,11785],{"class":569},"TresTorusGeometry",[560,11787,710],{"class":565},[560,11789,11791,11793,11795],{"class":11790,"line":773},[562,596],[560,11792,808],{"class":565},[560,11794,779],{"class":569},[560,11796,592],{"class":565},[560,11798,11800],{"class":11799,"line":784},[562,596],[560,11801,665],{"emptyLinePlaceholder":516},[560,11803,11805,11807,11809,11811,11813,11815,11818,11820],{"class":11804,"line":795},[562,596],[560,11806,776],{"class":565},[560,11808,9140],{"class":569},[560,11810,1881],{"class":573},[560,11812,580],{"class":565},[560,11814,583],{"class":565},[560,11816,11817],{"class":586},"[null!, null!, 1000]",[560,11819,583],{"class":565},[560,11821,592],{"class":565},[560,11823,11825,11827,11829,11831,11833,11835,11838,11840],{"class":11824,"line":805},[562,596],[560,11826,787],{"class":565},[560,11828,790],{"class":569},[560,11830,1881],{"class":573},[560,11832,580],{"class":565},[560,11834,583],{"class":565},[560,11836,11837],{"class":586},"[0.1, 0.1, 0.1]",[560,11839,583],{"class":565},[560,11841,710],{"class":565},[560,11843,11845,11847,11849],{"class":11844,"line":555},[562,596],[560,11846,787],{"class":565},[560,11848,800],{"class":569},[560,11850,710],{"class":565},[560,11852,11854,11856,11858],{"class":11853,"line":825},[562,596],[560,11855,808],{"class":565},[560,11857,9140],{"class":569},[560,11859,592],{"class":565},[560,11861,11863,11865,11867],{"class":11862,"line":835},[562,596],[560,11864,818],{"class":565},[560,11866,85],{"class":569},[560,11868,592],{"class":565},[560,11870,11871,11873,11875,11877,11879,11881,11884,11886],{"class":562,"line":2547},[560,11872,704],{"class":565},[560,11874,7971],{"class":569},[560,11876,1881],{"class":573},[560,11878,580],{"class":565},[560,11880,583],{"class":565},[560,11882,11883],{"class":586},"[10, 10]",[560,11885,583],{"class":565},[560,11887,710],{"class":565},[560,11889,11890,11892,11894],{"class":562,"line":2556},[560,11891,828],{"class":565},[560,11893,684],{"class":569},[560,11895,592],{"class":565},[560,11897,11898,11900,11902],{"class":562,"line":2576},[560,11899,655],{"class":565},[560,11901,673],{"class":569},[560,11903,592],{"class":565},[545,11905,845],{"id":844},[850,11907,11908,11916],{},[853,11909,11910],{},[856,11911,11912,11914],{},[859,11913,845],{},[859,11915,864],{},[869,11917,11918,11927,11938,11949,11960],{},[856,11919,11920,11922],{},[874,11921,5527],{},[874,11923,11924,11926],{},[1591,11925,4214],{}," Surface mesh from which to sample",[856,11928,11929,11932],{},[874,11930,11931],{},"count",[874,11933,11934,11937],{},[1591,11935,11936],{},"Number"," Number of samples",[856,11939,11940,11943],{},[874,11941,11942],{},"instanceMesh",[874,11944,11945,11948],{},[1591,11946,11947],{},"InstanceMesh"," InstanceMesh to scatter",[856,11950,11951,11954],{},[874,11952,11953],{},"weight",[874,11955,11956,11959],{},[1591,11957,11958],{},"String"," A vertex attribute to be used as a weight when sampling",[856,11961,11962,11965],{},[874,11963,11964],{},"transform",[874,11966,11967,11970],{},[1591,11968,11969],{},"Function"," A function that can be used as a custom sampling",[545,11972,11974],{"id":11973},"usesurfacesampler","useSurfaceSampler",[536,11976,11977,11978],{},"A hook to obtain the result of the ",[11979,11980,11981],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[549,11983,11986],{"className":551,"code":11984,"highlights":11985,"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,11987,11988,12008,12032,12050,12073,12077,12090,12103,12107,12127,12161,12167,12175,12179,12187,12205,12223,12231,12235,12254,12262,12270,12274,12281,12295,12309,12314,12333,12341,12349,12353,12371,12379],{"__ignoreMap":508},[560,11989,11990,11992,11994,11996,11998,12000,12002,12004,12006],{"class":562,"line":509},[560,11991,566],{"class":565},[560,11993,570],{"class":569},[560,11995,574],{"class":573},[560,11997,577],{"class":573},[560,11999,580],{"class":565},[560,12001,583],{"class":565},[560,12003,587],{"class":586},[560,12005,583],{"class":565},[560,12007,592],{"class":565},[560,12009,12011,12013,12015,12017,12019,12022,12024,12026,12028,12030],{"class":12010,"line":510},[562,596],[560,12012,600],{"class":599},[560,12014,603],{"class":565},[560,12016,613],{"class":606},[560,12018,610],{"class":565},[560,12020,12021],{"class":606}," useSurfaceSampler",[560,12023,616],{"class":565},[560,12025,619],{"class":599},[560,12027,622],{"class":565},[560,12029,625],{"class":586},[560,12031,628],{"class":565},[560,12033,12034,12036,12038,12040,12042,12044,12046,12048],{"class":562,"line":631},[560,12035,600],{"class":599},[560,12037,603],{"class":565},[560,12039,638],{"class":606},[560,12041,616],{"class":565},[560,12043,619],{"class":599},[560,12045,622],{"class":565},[560,12047,647],{"class":586},[560,12049,628],{"class":565},[560,12051,12052,12054,12056,12058,12060,12063,12065,12067,12069,12071],{"class":562,"line":652},[560,12053,600],{"class":599},[560,12055,603],{"class":565},[560,12057,3794],{"class":606},[560,12059,610],{"class":565},[560,12061,12062],{"class":606}," watch",[560,12064,616],{"class":565},[560,12066,619],{"class":599},[560,12068,622],{"class":565},[560,12070,556],{"class":586},[560,12072,628],{"class":565},[560,12074,12075],{"class":562,"line":662},[560,12076,665],{"emptyLinePlaceholder":516},[560,12078,12079,12081,12084,12086,12088],{"class":562,"line":668},[560,12080,2337],{"class":573},[560,12082,12083],{"class":606}," torusRef ",[560,12085,580],{"class":565},[560,12087,3794],{"class":2356},[560,12089,6457],{"class":606},[560,12091,12092,12094,12097,12099,12101],{"class":562,"line":678},[560,12093,2337],{"class":573},[560,12095,12096],{"class":606}," instancesRef ",[560,12098,580],{"class":565},[560,12100,3794],{"class":2356},[560,12102,6457],{"class":606},[560,12104,12105],{"class":562,"line":701},[560,12106,665],{"emptyLinePlaceholder":516},[560,12108,12109,12112,12115,12117,12119,12121,12123,12125],{"class":562,"line":713},[560,12110,12111],{"class":2356},"watch",[560,12113,12114],{"class":606},"(torusRef",[560,12116,610],{"class":565},[560,12118,2996],{"class":565},[560,12120,3607],{"class":6760},[560,12122,3262],{"class":565},[560,12124,3599],{"class":573},[560,12126,1127],{"class":565},[560,12128,12130,12133,12135,12137,12139,12142,12144,12147,12149,12151,12153,12155,12157,12159],{"class":12129,"line":723},[562,596],[560,12131,12132],{"class":2356},"  useSurfaceSampler",[560,12134,2359],{"class":569},[560,12136,3607],{"class":606},[560,12138,610],{"class":565},[560,12140,12141],{"class":2423}," 50",[560,12143,610],{"class":565},[560,12145,12146],{"class":606}," instancesRef",[560,12148,1069],{"class":565},[560,12150,3607],{"class":606},[560,12152,610],{"class":565},[560,12154,622],{"class":565},[560,12156,7469],{"class":586},[560,12158,2362],{"class":565},[560,12160,2370],{"class":569},[560,12162,12163,12165],{"class":562,"line":728},[560,12164,2350],{"class":565},[560,12166,2370],{"class":606},[560,12168,12169,12171,12173],{"class":562,"line":750},[560,12170,655],{"class":565},[560,12172,570],{"class":569},[560,12174,592],{"class":565},[560,12176,12177],{"class":562,"line":554},[560,12178,665],{"emptyLinePlaceholder":516},[560,12180,12181,12183,12185],{"class":562,"line":773},[560,12182,566],{"class":565},[560,12184,673],{"class":569},[560,12186,592],{"class":565},[560,12188,12189,12191,12193,12195,12197,12199,12201,12203],{"class":562,"line":784},[560,12190,681],{"class":565},[560,12192,684],{"class":569},[560,12194,687],{"class":573},[560,12196,580],{"class":565},[560,12198,583],{"class":565},[560,12200,11713],{"class":586},[560,12202,583],{"class":565},[560,12204,592],{"class":565},[560,12206,12207,12209,12211,12213,12215,12217,12219,12221],{"class":562,"line":795},[560,12208,704],{"class":565},[560,12210,707],{"class":569},[560,12212,1407],{"class":573},[560,12214,580],{"class":565},[560,12216,583],{"class":565},[560,12218,11732],{"class":586},[560,12220,583],{"class":565},[560,12222,710],{"class":565},[560,12224,12225,12227,12229],{"class":562,"line":805},[560,12226,704],{"class":565},[560,12228,718],{"class":569},[560,12230,710],{"class":565},[560,12232,12233],{"class":562,"line":555},[560,12234,665],{"emptyLinePlaceholder":516},[560,12236,12237,12239,12241,12243,12245,12247,12250,12252],{"class":562,"line":825},[560,12238,704],{"class":565},[560,12240,779],{"class":569},[560,12242,3794],{"class":573},[560,12244,580],{"class":565},[560,12246,583],{"class":565},[560,12248,12249],{"class":586},"torusRef",[560,12251,583],{"class":565},[560,12253,592],{"class":565},[560,12255,12256,12258,12260],{"class":562,"line":835},[560,12257,776],{"class":565},[560,12259,11785],{"class":569},[560,12261,710],{"class":565},[560,12263,12264,12266,12268],{"class":562,"line":2547},[560,12265,818],{"class":565},[560,12267,779],{"class":569},[560,12269,592],{"class":565},[560,12271,12272],{"class":562,"line":2556},[560,12273,665],{"emptyLinePlaceholder":516},[560,12275,12276,12278],{"class":562,"line":2576},[560,12277,704],{"class":565},[560,12279,12280],{"class":569},"TresInstancedMesh\n",[560,12282,12283,12286,12288,12290,12293],{"class":562,"line":2585},[560,12284,12285],{"class":573},"      ref",[560,12287,580],{"class":565},[560,12289,583],{"class":565},[560,12291,12292],{"class":586},"instancesRef",[560,12294,3053],{"class":565},[560,12296,12297,12300,12302,12304,12307],{"class":562,"line":2594},[560,12298,12299],{"class":573},"      :args",[560,12301,580],{"class":565},[560,12303,583],{"class":565},[560,12305,12306],{"class":586},"[null!, null!, 1_000]",[560,12308,3053],{"class":565},[560,12310,12311],{"class":562,"line":2603},[560,12312,12313],{"class":565},"    >\n",[560,12315,12316,12318,12320,12322,12324,12326,12329,12331],{"class":562,"line":2625},[560,12317,776],{"class":565},[560,12319,3880],{"class":569},[560,12321,1881],{"class":573},[560,12323,580],{"class":565},[560,12325,583],{"class":565},[560,12327,12328],{"class":586},"[0.1, 32, 32]",[560,12330,583],{"class":565},[560,12332,710],{"class":565},[560,12334,12335,12337,12339],{"class":562,"line":2669},[560,12336,776],{"class":565},[560,12338,800],{"class":569},[560,12340,710],{"class":565},[560,12342,12343,12345,12347],{"class":562,"line":2678},[560,12344,818],{"class":565},[560,12346,9140],{"class":569},[560,12348,592],{"class":565},[560,12350,12351],{"class":562,"line":2687},[560,12352,665],{"emptyLinePlaceholder":516},[560,12354,12355,12357,12359,12361,12363,12365,12367,12369],{"class":562,"line":3844},[560,12356,704],{"class":565},[560,12358,7971],{"class":569},[560,12360,1881],{"class":573},[560,12362,580],{"class":565},[560,12364,583],{"class":565},[560,12366,11883],{"class":586},[560,12368,583],{"class":565},[560,12370,710],{"class":565},[560,12372,12373,12375,12377],{"class":562,"line":3875},[560,12374,828],{"class":565},[560,12376,684],{"class":569},[560,12378,592],{"class":565},[560,12380,12381,12383,12385],{"class":562,"line":3896},[560,12382,655],{"class":565},[560,12384,673],{"class":569},[560,12386,592],{"class":565},[1250,12388,12389],{},"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":12391},[12392,12393,12394],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":11973,"depth":510,"text":11974},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":12395},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":12400,"title":89,"body":12401,"description":12708,"extension":513,"links":514,"meta":12709,"navigation":516,"path":90,"seo":12710,"stem":91,"__hash__":12711},"docs/2.api/1.abstractions/screen-sizer.md",{"type":501,"value":12402,"toc":12704},[12403,12408,12417,12420,12422,12694,12696,12702],[2217,12404,12405],{},[12406,12407],"abstractions-screen-sizer",{},[536,12409,1272,12410,12413,12414,12416],{},[540,12411,12412],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[540,12415,1796],{}," THREE world unit will be translated to 1 screen pixel.",[536,12418,12419],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[545,12421,15],{"id":547},[549,12423,12426],{"className":551,"code":12424,"highlights":12425,"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,12427,12428,12448,12466,12490,12498,12502,12510,12529,12548,12556,12565,12573,12592,12600,12608,12617,12636,12644,12652,12660,12678,12686],{"__ignoreMap":508},[560,12429,12430,12432,12434,12436,12438,12440,12442,12444,12446],{"class":562,"line":509},[560,12431,566],{"class":565},[560,12433,570],{"class":569},[560,12435,574],{"class":573},[560,12437,577],{"class":573},[560,12439,580],{"class":565},[560,12441,583],{"class":565},[560,12443,587],{"class":586},[560,12445,583],{"class":565},[560,12447,592],{"class":565},[560,12449,12450,12452,12454,12456,12458,12460,12462,12464],{"class":562,"line":510},[560,12451,600],{"class":599},[560,12453,603],{"class":565},[560,12455,638],{"class":606},[560,12457,616],{"class":565},[560,12459,619],{"class":599},[560,12461,622],{"class":565},[560,12463,647],{"class":586},[560,12465,628],{"class":565},[560,12467,12469,12471,12473,12475,12477,12480,12482,12484,12486,12488],{"class":12468,"line":631},[562,596],[560,12470,600],{"class":599},[560,12472,603],{"class":565},[560,12474,613],{"class":606},[560,12476,610],{"class":565},[560,12478,12479],{"class":606}," ScreenSizer",[560,12481,616],{"class":565},[560,12483,619],{"class":599},[560,12485,622],{"class":565},[560,12487,625],{"class":586},[560,12489,628],{"class":565},[560,12491,12492,12494,12496],{"class":562,"line":652},[560,12493,655],{"class":565},[560,12495,570],{"class":569},[560,12497,592],{"class":565},[560,12499,12500],{"class":562,"line":662},[560,12501,665],{"emptyLinePlaceholder":516},[560,12503,12504,12506,12508],{"class":562,"line":668},[560,12505,566],{"class":565},[560,12507,673],{"class":569},[560,12509,592],{"class":565},[560,12511,12512,12514,12516,12518,12520,12522,12525,12527],{"class":562,"line":678},[560,12513,681],{"class":565},[560,12515,684],{"class":569},[560,12517,687],{"class":573},[560,12519,580],{"class":565},[560,12521,583],{"class":565},[560,12523,12524],{"class":586},"#3f3f3f",[560,12526,583],{"class":565},[560,12528,592],{"class":565},[560,12530,12531,12533,12535,12537,12539,12541,12544,12546],{"class":562,"line":701},[560,12532,704],{"class":565},[560,12534,707],{"class":569},[560,12536,1407],{"class":573},[560,12538,580],{"class":565},[560,12540,583],{"class":565},[560,12542,12543],{"class":586},"[10, 10, 10]",[560,12545,583],{"class":565},[560,12547,710],{"class":565},[560,12549,12550,12552,12554],{"class":562,"line":713},[560,12551,704],{"class":565},[560,12553,718],{"class":569},[560,12555,710],{"class":565},[560,12557,12559,12561,12563],{"class":12558,"line":723},[562,596],[560,12560,704],{"class":565},[560,12562,89],{"class":569},[560,12564,592],{"class":565},[560,12566,12567,12569,12571],{"class":562,"line":728},[560,12568,776],{"class":565},[560,12570,779],{"class":569},[560,12572,592],{"class":565},[560,12574,12575,12577,12579,12581,12583,12585,12588,12590],{"class":562,"line":750},[560,12576,787],{"class":565},[560,12578,790],{"class":569},[560,12580,1881],{"class":573},[560,12582,580],{"class":565},[560,12584,583],{"class":565},[560,12586,12587],{"class":586},"[100, 100, 100]",[560,12589,583],{"class":565},[560,12591,710],{"class":565},[560,12593,12594,12596,12598],{"class":562,"line":554},[560,12595,787],{"class":565},[560,12597,800],{"class":569},[560,12599,710],{"class":565},[560,12601,12602,12604,12606],{"class":562,"line":773},[560,12603,808],{"class":565},[560,12605,779],{"class":569},[560,12607,592],{"class":565},[560,12609,12611,12613,12615],{"class":12610,"line":784},[562,596],[560,12612,818],{"class":565},[560,12614,89],{"class":569},[560,12616,592],{"class":565},[560,12618,12619,12621,12623,12625,12627,12629,12632,12634],{"class":562,"line":795},[560,12620,704],{"class":565},[560,12622,779],{"class":569},[560,12624,11322],{"class":573},[560,12626,580],{"class":565},[560,12628,583],{"class":565},[560,12630,12631],{"class":586},"5",[560,12633,583],{"class":565},[560,12635,592],{"class":565},[560,12637,12638,12640,12642],{"class":562,"line":805},[560,12639,776],{"class":565},[560,12641,790],{"class":569},[560,12643,710],{"class":565},[560,12645,12646,12648,12650],{"class":562,"line":555},[560,12647,776],{"class":565},[560,12649,800],{"class":569},[560,12651,710],{"class":565},[560,12653,12654,12656,12658],{"class":562,"line":825},[560,12655,818],{"class":565},[560,12657,779],{"class":569},[560,12659,592],{"class":565},[560,12661,12662,12664,12666,12668,12670,12672,12674,12676],{"class":562,"line":835},[560,12663,704],{"class":565},[560,12665,7971],{"class":569},[560,12667,1881],{"class":573},[560,12669,580],{"class":565},[560,12671,583],{"class":565},[560,12673,11883],{"class":586},[560,12675,583],{"class":565},[560,12677,710],{"class":565},[560,12679,12680,12682,12684],{"class":562,"line":2547},[560,12681,828],{"class":565},[560,12683,684],{"class":569},[560,12685,592],{"class":565},[560,12687,12688,12690,12692],{"class":562,"line":2556},[560,12689,655],{"class":565},[560,12691,673],{"class":569},[560,12693,592],{"class":565},[545,12695,845],{"id":844},[536,12697,12698,12699,1069],{},"Inherits all props from ",[540,12700,12701],{},"THREE.Object3D",[1250,12703,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":12705},[12706,12707],{"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":12708},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":12713,"title":93,"body":12714,"description":13084,"extension":513,"links":514,"meta":13085,"navigation":516,"path":94,"seo":13086,"stem":95,"__hash__":13087},"docs/2.api/1.abstractions/screen-space.md",{"type":501,"value":12715,"toc":13080},[12716,12721,12734,12756,12758,12984,12986,13078],[530,12717,12718],{},[12719,12720],"abstractions-screen-space",{},[536,12722,12723,12726,12727,12730,12731,1069],{},[540,12724,12725],{},"\u003CScreenSpace />"," wraps its children in a ",[540,12728,12729],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[540,12732,12733],{},":depth",[536,12735,12736,12737,1594,12739,1594,12741,1594,12743,12745,12746,12749,12750,7541,12753,1069],{},"Additionally, the ",[540,12738,878],{},[540,12740,901],{},[540,12742,920],{},[540,12744,939],{}," props can be used to position them similarly to CSS ",[540,12747,12748],{},"position: absolute"," property when using a ",[540,12751,12752],{},"PerspectiveCamera",[540,12754,12755],{},"OrtographicCamera",[545,12757,15],{"id":547},[549,12759,12762],{"className":551,"code":12760,"highlights":12761,"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,12763,12764,12784,12808,12826,12834,12838,12846,12865,12873,12881,12885,12905,12913,12921,12929,12937,12946,12950,12968,12976],{"__ignoreMap":508},[560,12765,12766,12768,12770,12772,12774,12776,12778,12780,12782],{"class":562,"line":509},[560,12767,566],{"class":565},[560,12769,570],{"class":569},[560,12771,574],{"class":573},[560,12773,577],{"class":573},[560,12775,580],{"class":565},[560,12777,583],{"class":565},[560,12779,587],{"class":586},[560,12781,583],{"class":565},[560,12783,592],{"class":565},[560,12785,12787,12789,12791,12793,12795,12798,12800,12802,12804,12806],{"class":12786,"line":510},[562,596],[560,12788,600],{"class":599},[560,12790,603],{"class":565},[560,12792,613],{"class":606},[560,12794,610],{"class":565},[560,12796,12797],{"class":606}," ScreenSpace",[560,12799,616],{"class":565},[560,12801,619],{"class":599},[560,12803,622],{"class":565},[560,12805,625],{"class":586},[560,12807,628],{"class":565},[560,12809,12810,12812,12814,12816,12818,12820,12822,12824],{"class":562,"line":631},[560,12811,600],{"class":599},[560,12813,603],{"class":565},[560,12815,638],{"class":606},[560,12817,616],{"class":565},[560,12819,619],{"class":599},[560,12821,622],{"class":565},[560,12823,647],{"class":586},[560,12825,628],{"class":565},[560,12827,12828,12830,12832],{"class":562,"line":652},[560,12829,655],{"class":565},[560,12831,570],{"class":569},[560,12833,592],{"class":565},[560,12835,12836],{"class":562,"line":662},[560,12837,665],{"emptyLinePlaceholder":516},[560,12839,12840,12842,12844],{"class":562,"line":668},[560,12841,566],{"class":565},[560,12843,673],{"class":569},[560,12845,592],{"class":565},[560,12847,12848,12850,12852,12854,12856,12858,12861,12863],{"class":562,"line":678},[560,12849,681],{"class":565},[560,12851,684],{"class":569},[560,12853,687],{"class":573},[560,12855,580],{"class":565},[560,12857,583],{"class":565},[560,12859,12860],{"class":586},"#333",[560,12862,583],{"class":565},[560,12864,592],{"class":565},[560,12866,12867,12869,12871],{"class":562,"line":701},[560,12868,704],{"class":565},[560,12870,707],{"class":569},[560,12872,710],{"class":565},[560,12874,12875,12877,12879],{"class":562,"line":713},[560,12876,704],{"class":565},[560,12878,718],{"class":569},[560,12880,710],{"class":565},[560,12882,12883],{"class":562,"line":723},[560,12884,665],{"emptyLinePlaceholder":516},[560,12886,12888,12890,12892,12895,12897,12899,12901,12903],{"class":12887,"line":728},[562,596],[560,12889,704],{"class":565},[560,12891,93],{"class":569},[560,12893,12894],{"class":573}," :depth",[560,12896,580],{"class":565},[560,12898,583],{"class":565},[560,12900,12631],{"class":586},[560,12902,583],{"class":565},[560,12904,592],{"class":565},[560,12906,12907,12909,12911],{"class":562,"line":750},[560,12908,776],{"class":565},[560,12910,779],{"class":569},[560,12912,592],{"class":565},[560,12914,12915,12917,12919],{"class":562,"line":554},[560,12916,787],{"class":565},[560,12918,11785],{"class":569},[560,12920,710],{"class":565},[560,12922,12923,12925,12927],{"class":562,"line":773},[560,12924,787],{"class":565},[560,12926,800],{"class":569},[560,12928,710],{"class":565},[560,12930,12931,12933,12935],{"class":562,"line":784},[560,12932,808],{"class":565},[560,12934,779],{"class":569},[560,12936,592],{"class":565},[560,12938,12940,12942,12944],{"class":12939,"line":795},[562,596],[560,12941,818],{"class":565},[560,12943,93],{"class":569},[560,12945,592],{"class":565},[560,12947,12948],{"class":562,"line":805},[560,12949,665],{"emptyLinePlaceholder":516},[560,12951,12952,12954,12956,12958,12960,12962,12964,12966],{"class":562,"line":555},[560,12953,704],{"class":565},[560,12955,7971],{"class":569},[560,12957,1881],{"class":573},[560,12959,580],{"class":565},[560,12961,583],{"class":565},[560,12963,11883],{"class":586},[560,12965,583],{"class":565},[560,12967,710],{"class":565},[560,12969,12970,12972,12974],{"class":562,"line":825},[560,12971,828],{"class":565},[560,12973,684],{"class":569},[560,12975,592],{"class":565},[560,12977,12978,12980,12982],{"class":562,"line":835},[560,12979,655],{"class":565},[560,12981,673],{"class":569},[560,12983,592],{"class":565},[545,12985,845],{"id":844},[850,12987,12988,12998],{},[853,12989,12990],{},[856,12991,12992,12994,12996],{},[859,12993,861],{"align":920},[859,12995,864],{"align":920},[859,12997,867],{},[869,12999,13000,13014,13033,13047,13064],{},[856,13001,13002,13007,13010],{},[874,13003,13004],{"align":920},[540,13005,13006],{},"depth",[874,13008,13009],{"align":920},"Distance from the camera",[874,13011,13012],{},[540,13013,10116],{},[856,13015,13016,13020,13028],{},[874,13017,13018],{"align":920},[540,13019,878],{},[874,13021,13022,13023,13025,13026],{"align":920},"Similar to CSS ",[540,13024,878],{}," property. Cannot be used with ",[540,13027,901],{},[874,13029,13030,13032],{},[540,13031,1868],{}," (vertical center of the screen)",[856,13034,13035,13039,13045],{},[874,13036,13037],{"align":920},[540,13038,901],{},[874,13040,13022,13041,13025,13043],{"align":920},[540,13042,901],{},[540,13044,878],{},[874,13046],{},[856,13048,13049,13053,13059],{},[874,13050,13051],{"align":920},[540,13052,920],{},[874,13054,13022,13055,13025,13057],{"align":920},[540,13056,920],{},[540,13058,939],{},[874,13060,13061,13063],{},[540,13062,1868],{}," (horizontal center of the screen)",[856,13065,13066,13070,13076],{},[874,13067,13068],{"align":920},[540,13069,939],{},[874,13071,13022,13072,13025,13074],{"align":920},[540,13073,939],{},[540,13075,920],{},[874,13077],{},[1250,13079,1566],{},{"title":508,"searchDepth":509,"depth":510,"links":13081},[13082,13083],{"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":13084},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",1787004676946]