[{"data":1,"prerenderedAt":13790},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fabstractions":498,"\u002Fapi\u002Fabstractions-surround":519,"abstraction-list":524},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":19,"path":20,"stem":21},"Loading Models","\u002Fgetting-started\u002Floading-models","1.getting-started\u002F4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","\u002Fgetting-started\u002Fupgrade-guide","1.getting-started\u002F5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","\u002Fapi","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api\u002Findex",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","\u002Fapi\u002Fabstractions","2.api\u002F1.abstractions\u002Findex",[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","\u002Fapi\u002Fabstractions\u002Falign","2.api\u002F1.abstractions\u002Falign",{"title":45,"path":46,"stem":47},"Billboard","\u002Fapi\u002Fabstractions\u002Fbillboard","2.api\u002F1.abstractions\u002Fbillboard",{"title":49,"path":50,"stem":51},"Camera Shake","\u002Fapi\u002Fabstractions\u002Fcamera-shake","2.api\u002F1.abstractions\u002Fcamera-shake",{"title":53,"path":54,"stem":55},"Decal","\u002Fapi\u002Fabstractions\u002Fdecal","2.api\u002F1.abstractions\u002Fdecal",{"title":57,"path":58,"stem":59},"Edges","\u002Fapi\u002Fabstractions\u002Fedges","2.api\u002F1.abstractions\u002Fedges",{"title":61,"path":62,"stem":63},"Fit","\u002Fapi\u002Fabstractions\u002Ffit","2.api\u002F1.abstractions\u002Ffit",{"title":65,"path":66,"stem":67},"Instances","\u002Fapi\u002Fabstractions\u002Finstances","2.api\u002F1.abstractions\u002Finstances",{"title":69,"path":70,"stem":71},"Levioso (Float)","\u002Fapi\u002Fabstractions\u002Flevioso","2.api\u002F1.abstractions\u002Flevioso",{"title":73,"path":74,"stem":75},"Mask","\u002Fapi\u002Fabstractions\u002Fmask","2.api\u002F1.abstractions\u002Fmask",{"title":77,"path":78,"stem":79},"Merged","\u002Fapi\u002Fabstractions\u002Fmerged","2.api\u002F1.abstractions\u002Fmerged",{"title":81,"path":82,"stem":83},"Outline","\u002Fapi\u002Fabstractions\u002Foutline","2.api\u002F1.abstractions\u002Foutline",{"title":85,"path":86,"stem":87},"Sampler","\u002Fapi\u002Fabstractions\u002Fsampler","2.api\u002F1.abstractions\u002Fsampler",{"title":89,"path":90,"stem":91},"ScreenSizer","\u002Fapi\u002Fabstractions\u002Fscreen-sizer","2.api\u002F1.abstractions\u002Fscreen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","\u002Fapi\u002Fabstractions\u002Fscreen-space","2.api\u002F1.abstractions\u002Fscreen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","\u002Fapi\u002Fcontrols","2.api\u002F2.controls\u002Findex",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","\u002Fapi\u002Fcontrols\u002Fcamera-controls","2.api\u002F2.controls\u002Fcamera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","\u002Fapi\u002Fcontrols\u002Fkeyboard-controls","2.api\u002F2.controls\u002Fkeyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","\u002Fapi\u002Fcontrols\u002Fmap-controls","2.api\u002F2.controls\u002Fmap-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","\u002Fapi\u002Fcontrols\u002Forbit-controls","2.api\u002F2.controls\u002Forbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","\u002Fapi\u002Fcontrols\u002Fpointer-lock-controls","2.api\u002F2.controls\u002Fpointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","\u002Fapi\u002Fcontrols\u002Ftransform-controls","2.api\u002F2.controls\u002Ftransform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","\u002Fapi\u002Floaders","2.api\u002F3.loaders\u002Findex",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","\u002Fapi\u002Floaders\u002Fuse-gltf","2.api\u002F3.loaders\u002F1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","\u002Fapi\u002Floaders\u002Fgltf-model","2.api\u002F3.loaders\u002F2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","\u002Fapi\u002Floaders\u002Fuse-fbx","2.api\u002F3.loaders\u002F3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","\u002Fapi\u002Floaders\u002Ffbx-model","2.api\u002F3.loaders\u002F4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","\u002Fapi\u002Floaders\u002Fuse-texture","2.api\u002F3.loaders\u002F5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","\u002Fapi\u002Floaders\u002Fuse-textures","2.api\u002F3.loaders\u002F6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","\u002Fapi\u002Floaders\u002Fuse-svg","2.api\u002F3.loaders\u002F7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","\u002Fapi\u002Floaders\u002Fuse-progress","2.api\u002F3.loaders\u002Fuse-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","\u002Fapi\u002Floaders\u002Fuse-video-texture","2.api\u002F3.loaders\u002Fuse-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","\u002Fapi\u002Fmaterials","2.api\u002F4.materials\u002Findex",[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","\u002Fapi\u002Fmaterials\u002Fcustom-shader-material","2.api\u002F4.materials\u002Fcustom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","\u002Fapi\u002Fmaterials\u002Fglass-material","2.api\u002F4.materials\u002Fglass-material",{"title":183,"path":184,"stem":185},"Holographic Material","\u002Fapi\u002Fmaterials\u002Fholographic-material","2.api\u002F4.materials\u002Fholographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","\u002Fapi\u002Fmaterials\u002Fmesh-discard-material","2.api\u002F4.materials\u002Fmesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","\u002Fapi\u002Fmaterials\u002Fmesh-portal-material","2.api\u002F4.materials\u002Fmesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","\u002Fapi\u002Fmaterials\u002Fmesh-reflection-material","2.api\u002F4.materials\u002Fmesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","\u002Fapi\u002Fmaterials\u002Fmesh-transmission-material","2.api\u002F4.materials\u002Fmesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","\u002Fapi\u002Fmaterials\u002Fpoint-material","2.api\u002F4.materials\u002Fpoint-material",{"title":207,"path":208,"stem":209},"Wobble Material","\u002Fapi\u002Fmaterials\u002Fwobble-material","2.api\u002F4.materials\u002Fwobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","\u002Fapi\u002Fshapes","2.api\u002F5.shapes\u002Findex",[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","\u002Fapi\u002Fshapes\u002Fbox","2.api\u002F5.shapes\u002Fbox",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","\u002Fapi\u002Fshapes\u002Fcatmullromcurve3","2.api\u002F5.shapes\u002Fcatmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","\u002Fapi\u002Fshapes\u002Fcircle","2.api\u002F5.shapes\u002Fcircle",{"title":229,"path":230,"stem":231},"Cone","\u002Fapi\u002Fshapes\u002Fcone","2.api\u002F5.shapes\u002Fcone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","\u002Fapi\u002Fshapes\u002Fcubic-bezier-line","2.api\u002F5.shapes\u002Fcubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","\u002Fapi\u002Fshapes\u002Fcylinder","2.api\u002F5.shapes\u002Fcylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","\u002Fapi\u002Fshapes\u002Fdodecahedron","2.api\u002F5.shapes\u002Fdodecahedron",{"title":245,"path":246,"stem":247},"Grid","\u002Fapi\u002Fshapes\u002Fgrid","2.api\u002F5.shapes\u002Fgrid",{"title":249,"path":250,"stem":251},"Icosahedron","\u002Fapi\u002Fshapes\u002Ficosahedron","2.api\u002F5.shapes\u002Ficosahedron",{"title":253,"path":254,"stem":255},"Line2","\u002Fapi\u002Fshapes\u002Fline2","2.api\u002F5.shapes\u002Fline2",{"title":257,"path":258,"stem":259},"Octahedron","\u002Fapi\u002Fshapes\u002Foctahedron","2.api\u002F5.shapes\u002Foctahedron",{"title":261,"path":262,"stem":263},"Plane","\u002Fapi\u002Fshapes\u002Fplane","2.api\u002F5.shapes\u002Fplane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","\u002Fapi\u002Fshapes\u002Fquadratic-bezier-line","2.api\u002F5.shapes\u002Fquadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","\u002Fapi\u002Fshapes\u002Fring","2.api\u002F5.shapes\u002Fring",{"title":273,"path":274,"stem":275},"Rounded Box","\u002Fapi\u002Fshapes\u002Frounded-box","2.api\u002F5.shapes\u002Frounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","\u002Fapi\u002Fshapes\u002Frounded-plane","2.api\u002F5.shapes\u002Frounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","\u002Fapi\u002Fshapes\u002Fscreen-quad","2.api\u002F5.shapes\u002Fscreen-quad",{"title":285,"path":286,"stem":287},"Sphere","\u002Fapi\u002Fshapes\u002Fsphere","2.api\u002F5.shapes\u002Fsphere",{"title":289,"path":290,"stem":291},"Superformula","\u002Fapi\u002Fshapes\u002Fsuperformula","2.api\u002F5.shapes\u002Fsuperformula",{"title":293,"path":294,"stem":295},"Tetrahedron","\u002Fapi\u002Fshapes\u002Ftetrahedron","2.api\u002F5.shapes\u002Ftetrahedron",{"title":297,"path":298,"stem":299},"Torus","\u002Fapi\u002Fshapes\u002Ftorus","2.api\u002F5.shapes\u002Ftorus",{"title":301,"path":302,"stem":303},"Torus Knot","\u002Fapi\u002Fshapes\u002Ftorus-knot","2.api\u002F5.shapes\u002Ftorus-knot",{"title":305,"path":306,"stem":307},"Tube","\u002Fapi\u002Fshapes\u002Ftube","2.api\u002F5.shapes\u002Ftube",{"title":309,"path":310,"stem":311,"children":312},"Debug\u002FPerformance","\u002Fapi\u002Fdebug-performance","2.api\u002F6.debug-performance\u002Findex",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","\u002Fapi\u002Fdebug-performance\u002Fhelper","2.api\u002F6.debug-performance\u002Fhelper",{"title":319,"path":320,"stem":321},"LOD","\u002Fapi\u002Fdebug-performance\u002Flod","2.api\u002F6.debug-performance\u002Flod",{"title":323,"path":324,"stem":325},"Stats","\u002Fapi\u002Fdebug-performance\u002Fstats","2.api\u002F6.debug-performance\u002Fstats",{"title":327,"path":328,"stem":329},"StatsGl","\u002Fapi\u002Fdebug-performance\u002Fstats-gl","2.api\u002F6.debug-performance\u002Fstats-gl",{"title":331,"path":332,"stem":333},"useBVH","\u002Fapi\u002Fdebug-performance\u002Fuse-bvh","2.api\u002F6.debug-performance\u002Fuse-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light\u002FShadow","\u002Fapi\u002Flight-shadow","2.api\u002F7.light-shadow\u002Findex",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","\u002Fapi\u002Flight-shadow\u002Faccumulative-shadows","2.api\u002F7.light-shadow\u002Faccumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","\u002Fapi\u002Flight-shadow\u002Fbake-shadows","2.api\u002F7.light-shadow\u002Fbake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","\u002Fapi\u002Flight-shadow\u002Fcircle-shadow","2.api\u002F7.light-shadow\u002Fcircle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","\u002Fapi\u002Flight-shadow\u002Fcontact-shadows","2.api\u002F7.light-shadow\u002Fcontact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","\u002Fapi\u002Flight-shadow\u002Flensflare","2.api\u002F7.light-shadow\u002Flensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","\u002Fapi\u002Flight-shadow\u002Frandomized-lights","2.api\u002F7.light-shadow\u002Frandomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","\u002Fapi\u002Flight-shadow\u002Fsoft-shadows","2.api\u002F7.light-shadow\u002Fsoft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","\u002Fapi\u002Fstaging","2.api\u002F8.staging\u002Findex",[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","\u002Fapi\u002Fstaging\u002Fenvironment","2.api\u002F8.staging\u002F1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","\u002Fapi\u002Fstaging\u002Fuse-environment","2.api\u002F8.staging\u002F2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","\u002Fapi\u002Fstaging\u002Flightformer","2.api\u002F8.staging\u002F3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","\u002Fapi\u002Fstaging\u002Fbackdrop","2.api\u002F8.staging\u002Fbackdrop",{"title":391,"path":392,"stem":393},"Ocean","\u002Fapi\u002Fstaging\u002Focean","2.api\u002F8.staging\u002Focean",{"title":395,"path":396,"stem":397},"Precipitation","\u002Fapi\u002Fstaging\u002Fprecipitation","2.api\u002F8.staging\u002Fprecipitation",{"title":399,"path":400,"stem":401},"Sky","\u002Fapi\u002Fstaging\u002Fsky","2.api\u002F8.staging\u002Fsky",{"title":403,"path":404,"stem":405},"Smoke","\u002Fapi\u002Fstaging\u002Fsmoke","2.api\u002F8.staging\u002Fsmoke",{"title":407,"path":408,"stem":409},"Sparkles","\u002Fapi\u002Fstaging\u002Fsparkles","2.api\u002F8.staging\u002Fsparkles",{"title":411,"path":412,"stem":413},"Stage","\u002Fapi\u002Fstaging\u002Fstage","2.api\u002F8.staging\u002Fstage",{"title":415,"path":416,"stem":417},"Stars","\u002Fapi\u002Fstaging\u002Fstars","2.api\u002F8.staging\u002Fstars",{"title":419,"path":420,"stem":421,"children":422},"Objects","\u002Fapi\u002Fobjects","2.api\u002F9.objects\u002Findex",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","\u002Fapi\u002Fobjects\u002Fanimated-sprite","2.api\u002F9.objects\u002Fanimated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","\u002Fapi\u002Fobjects\u002Fcube-camera","2.api\u002F9.objects\u002Fcube-camera",{"title":433,"path":434,"stem":435},"Fbo","\u002Fapi\u002Fobjects\u002Ffbo","2.api\u002F9.objects\u002Ffbo",{"title":437,"path":438,"stem":439},"GradientTexture","\u002Fapi\u002Fobjects\u002Fgradient-texture","2.api\u002F9.objects\u002Fgradient-texture",{"title":441,"path":442,"stem":443},"HTML","\u002Fapi\u002Fobjects\u002Fhtml","2.api\u002F9.objects\u002Fhtml",{"title":445,"path":446,"stem":447},"Image","\u002Fapi\u002Fobjects\u002Fimage","2.api\u002F9.objects\u002Fimage",{"title":449,"path":450,"stem":451},"MarchingCubes","\u002Fapi\u002Fobjects\u002Fmarching-cubes","2.api\u002F9.objects\u002Fmarching-cubes",{"title":453,"path":454,"stem":455},"Reflector","\u002Fapi\u002Fobjects\u002Freflector","2.api\u002F9.objects\u002Freflector",{"title":457,"path":458,"stem":459},"Refractor","\u002Fapi\u002Fobjects\u002Frefractor","2.api\u002F9.objects\u002Frefractor",{"title":461,"path":462,"stem":463},"Text3D","\u002Fapi\u002Fobjects\u002Ftext-3d","2.api\u002F9.objects\u002Ftext-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","\u002Fapi\u002Fmiscellaneous","2.api\u002Fmiscellaneous\u002Findex",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","\u002Fapi\u002Fmiscellaneous\u002Fbounds","2.api\u002Fmiscellaneous\u002Fbounds",{"title":475,"path":476,"stem":477},"GlobalAudio","\u002Fapi\u002Fmiscellaneous\u002Fglobal-audio","2.api\u002Fmiscellaneous\u002Fglobal-audio",{"title":479,"path":480,"stem":481},"MouseParallax","\u002Fapi\u002Fmiscellaneous\u002Fmouse-parallax","2.api\u002Fmiscellaneous\u002Fmouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","\u002Fapi\u002Fmiscellaneous\u002Fpositional-audio","2.api\u002Fmiscellaneous\u002Fpositional-audio",{"title":487,"path":488,"stem":489},"useAnimations","\u002Fapi\u002Fmiscellaneous\u002Fuse-animations","2.api\u002Fmiscellaneous\u002Fuse-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","\u002Fapi\u002Fmiscellaneous\u002Fuse-gltf-exporter","2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","\u002Fapi\u002Fmiscellaneous\u002Fuse-intersect","2.api\u002Fmiscellaneous\u002Fuse-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\u002F2.api\u002F1.abstractions\u002Findex.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,1265,1611,2196,7435,7743,8416,9670,10123,10813,11657,12164,13052,13402],{"id":526,"title":41,"body":527,"description":523,"extension":513,"links":514,"meta":1262,"navigation":516,"path":42,"seo":1263,"stem":43,"__hash__":1264},"docs\u002F2.api\u002F1.abstractions\u002Falign.md",{"type":501,"value":528,"toc":1257},[529,535,544,548,846,850,853,1107,1111,1253],[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\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresAxesHelper :scale=\"2\" \u002F>\n\n \u003CAlign top right back>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FAlign>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,554,555],13,18,"vue",[540,558,559,593,629,650,660,666,676,699,711,721,726,752,757,775,786,797,807,817,827,837],{"__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\u002Fcientos",[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\u002Fcore",[560,649,628],{"class":565},[560,651,653,656,658],{"class":562,"line":652},4,[560,654,655],{"class":565},"\u003C\u002F",[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}," \u002F>\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,740,742,744,748,750],{"class":562,"line":728},11,[560,730,704],{"class":565},[560,732,733],{"class":569},"TresAxesHelper",[560,735,736],{"class":565}," :",[560,738,739],{"class":573},"scale",[560,741,580],{"class":565},[560,743,583],{"class":565},[560,745,747],{"class":746},"sbssI","2",[560,749,583],{"class":565},[560,751,710],{"class":565},[560,753,755],{"class":562,"line":754},12,[560,756,665],{"emptyLinePlaceholder":516},[560,758,760,762,764,767,770,773],{"class":759,"line":554},[562,596],[560,761,704],{"class":565},[560,763,41],{"class":569},[560,765,766],{"class":573}," top",[560,768,769],{"class":573}," right",[560,771,772],{"class":573}," back",[560,774,592],{"class":565},[560,776,778,781,784],{"class":562,"line":777},14,[560,779,780],{"class":565}," \u003C",[560,782,783],{"class":569},"TresMesh",[560,785,592],{"class":565},[560,787,789,792,795],{"class":562,"line":788},15,[560,790,791],{"class":565}," \u003C",[560,793,794],{"class":569},"TresBoxGeometry",[560,796,710],{"class":565},[560,798,800,802,805],{"class":562,"line":799},16,[560,801,791],{"class":565},[560,803,804],{"class":569},"TresMeshNormalMaterial",[560,806,710],{"class":565},[560,808,810,813,815],{"class":562,"line":809},17,[560,811,812],{"class":565}," \u003C\u002F",[560,814,783],{"class":569},[560,816,592],{"class":565},[560,818,820,823,825],{"class":819,"line":555},[562,596],[560,821,822],{"class":565}," \u003C\u002F",[560,824,41],{"class":569},[560,826,592],{"class":565},[560,828,830,833,835],{"class":562,"line":829},19,[560,831,832],{"class":565}," \u003C\u002F",[560,834,684],{"class":569},[560,836,592],{"class":565},[560,838,840,842,844],{"class":562,"line":839},20,[560,841,655],{"class":565},[560,843,673],{"class":569},[560,845,592],{"class":565},[545,847,849],{"id":848},"props","Props",[536,851,852],{},"All props are optional.",[854,855,856,872],"table",{},[857,858,859],"thead",{},[860,861,862,866,869],"tr",{},[863,864,865],"th",{},"Prop",[863,867,868],{},"Description",[863,870,871],{},"Default",[873,874,875,899,918,937,955,974,992,1008,1024,1040,1056,1078,1090],"tbody",{},[860,876,877,883,894],{},[878,879,880],"td",{},[540,881,882],{},"top",[878,884,885,886,889,890,893],{},"If ",[540,887,888],{},"true",", aligns bounding box bottom to ",[540,891,892],{},"0"," on the y-axis",[878,895,896],{},[540,897,898],{},"false",[860,900,901,906,914],{},[878,902,903],{},[540,904,905],{},"bottom",[878,907,885,908,910,911,913],{},[540,909,888],{},", aligns bounding box top to ",[540,912,892],{}," on the y-axis.",[878,915,916],{},[540,917,898],{},[860,919,920,925,933],{},[878,921,922],{},[540,923,924],{},"left",[878,926,885,927,929,930,932],{},[540,928,888],{},", aligns bounding box right to ",[540,931,892],{}," on the x-axis.",[878,934,935],{},[540,936,898],{},[860,938,939,944,951],{},[878,940,941],{},[540,942,943],{},"right",[878,945,885,946,948,949,932],{},[540,947,888],{},", aligns bounding box left to ",[540,950,892],{},[878,952,953],{},[540,954,898],{},[860,956,957,962,970],{},[878,958,959],{},[540,960,961],{},"front",[878,963,885,964,966,967,969],{},[540,965,888],{},", aligns bounding box back to ",[540,968,892],{}," on the z-axis.",[878,971,972],{},[540,973,898],{},[860,975,976,981,988],{},[878,977,978],{},[540,979,980],{},"back",[878,982,885,983,985,986,969],{},[540,984,888],{},", aligns bounding box front to ",[540,987,892],{},[878,989,990],{},[540,991,898],{},[860,993,994,999,1004],{},[878,995,996],{},[540,997,998],{},"disable",[878,1000,885,1001,1003],{},[540,1002,888],{},", disables alignment on all axes.",[878,1005,1006],{},[540,1007,898],{},[860,1009,1010,1015,1020],{},[878,1011,1012],{},[540,1013,1014],{},"disableX",[878,1016,885,1017,1019],{},[540,1018,888],{},", disables alignment on the x-axis.",[878,1021,1022],{},[540,1023,898],{},[860,1025,1026,1031,1036],{},[878,1027,1028],{},[540,1029,1030],{},"disableY",[878,1032,885,1033,1035],{},[540,1034,888],{},", disables alignment on the y-axis.",[878,1037,1038],{},[540,1039,898],{},[860,1041,1042,1047,1052],{},[878,1043,1044],{},[540,1045,1046],{},"disableZ",[878,1048,885,1049,1051],{},[540,1050,888],{},", disables alignment on the z-axis.",[878,1053,1054],{},[540,1055,898],{},[860,1057,1058,1063,1074],{},[878,1059,1060],{},[540,1061,1062],{},"precise",[878,1064,1065,1066,1073],{},"See ",[1067,1068,1072],"a",{"href":1069,"rel":1070},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=box3#api\u002Fen\u002Fmath\u002FBox3.setFromObject",[1071],"nofollow","Box3.setFromObject",".",[878,1075,1076],{},[540,1077,888],{},[860,1079,1080,1085,1088],{},[878,1081,1082],{},[540,1083,1084],{},"onAlign",[878,1086,1087],{},"Callback that fires when updating, after measurement.",[878,1089],{},[860,1091,1092,1096,1102],{},[878,1093,1094],{},[540,1095,542],{},[878,1097,1098,1099,1101],{},"If set, component will only update when ",[540,1100,542],{},"'s value changes. If unset, component will update every frame.",[878,1103,1104],{},[540,1105,1106],{},"undefined",[545,1108,1110],{"id":1109},"aligncallbackoptions","AlignCallbackOptions",[549,1112,1115],{"className":1113,"code":1114,"language":587,"meta":508,"style":508},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface AlignCallbackOptions {\n \u002F** The next parent above \u003CAlign \u002F> *\u002F\n parent: Object3D\n \u002F** The outmost container group of the \u003CAlign\u002F> component *\u002F\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,1116,1117,1132,1138,1149,1154,1163,1173,1182,1191,1201,1211,1221,1230,1239,1248],{"__ignoreMap":508},[560,1118,1119,1122,1125,1129],{"class":562,"line":509},[560,1120,1121],{"class":599},"export",[560,1123,1124],{"class":573}," interface",[560,1126,1128],{"class":1127},"sBMFI"," AlignCallbackOptions",[560,1130,1131],{"class":565}," {\n",[560,1133,1134],{"class":562,"line":510},[560,1135,1137],{"class":1136},"sHwdD"," \u002F** The next parent above \u003CAlign \u002F> *\u002F\n",[560,1139,1140,1143,1146],{"class":562,"line":631},[560,1141,1142],{"class":569}," parent",[560,1144,1145],{"class":565},":",[560,1147,1148],{"class":1127}," Object3D\n",[560,1150,1151],{"class":562,"line":652},[560,1152,1153],{"class":1136}," \u002F** The outmost container group of the \u003CAlign\u002F> component *\u002F\n",[560,1155,1156,1159,1161],{"class":562,"line":662},[560,1157,1158],{"class":569}," container",[560,1160,1145],{"class":565},[560,1162,1148],{"class":1127},[560,1164,1165,1168,1170],{"class":562,"line":668},[560,1166,1167],{"class":569}," width",[560,1169,1145],{"class":565},[560,1171,1172],{"class":1127}," number\n",[560,1174,1175,1178,1180],{"class":562,"line":678},[560,1176,1177],{"class":569}," height",[560,1179,1145],{"class":565},[560,1181,1172],{"class":1127},[560,1183,1184,1187,1189],{"class":562,"line":701},[560,1185,1186],{"class":569}," depth",[560,1188,1145],{"class":565},[560,1190,1172],{"class":1127},[560,1192,1193,1196,1198],{"class":562,"line":713},[560,1194,1195],{"class":569}," boundingBox",[560,1197,1145],{"class":565},[560,1199,1200],{"class":1127}," Box3\n",[560,1202,1203,1206,1208],{"class":562,"line":723},[560,1204,1205],{"class":569}," boundingSphere",[560,1207,1145],{"class":565},[560,1209,1210],{"class":1127}," Sphere\n",[560,1212,1213,1216,1218],{"class":562,"line":728},[560,1214,1215],{"class":569}," center",[560,1217,1145],{"class":565},[560,1219,1220],{"class":1127}," Vector3\n",[560,1222,1223,1226,1228],{"class":562,"line":754},[560,1224,1225],{"class":569}," verticalAlignment",[560,1227,1145],{"class":565},[560,1229,1172],{"class":1127},[560,1231,1232,1235,1237],{"class":562,"line":554},[560,1233,1234],{"class":569}," horizontalAlignment",[560,1236,1145],{"class":565},[560,1238,1172],{"class":1127},[560,1240,1241,1244,1246],{"class":562,"line":777},[560,1242,1243],{"class":569}," depthAlignment",[560,1245,1145],{"class":565},[560,1247,1172],{"class":1127},[560,1249,1250],{"class":562,"line":788},[560,1251,1252],{"class":565},"}\n",[1254,1255,1256],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":1258},[1259,1260,1261],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},{"id":1109,"depth":510,"text":1110},{},{"title":41,"description":523},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1266,"title":45,"body":1267,"description":1607,"extension":513,"links":514,"meta":1608,"navigation":516,"path":46,"seo":1609,"stem":47,"__hash__":1610},"docs\u002F2.api\u002F1.abstractions\u002Fbillboard.md",{"type":501,"value":1268,"toc":1603},[1269,1274,1281,1283,1524,1526,1600],[530,1270,1271],{},[1272,1273],"abstractions-billboard",{},[536,1275,1276,1277,1280],{},"Adds a ",[540,1278,1279],{},"THREE.Group"," that always faces the camera.",[545,1282,15],{"id":547},[549,1284,1287],{"className":551,"code":1285,"highlights":1286,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Billboard, Box, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333333\">\n \u003COrbitControls \u002F>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 10]\" \u002F>\n \u003CBillboard>\n \u003CBox :scale=\"[0.5, 0.5, 0.001]\">\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FBox>\n \u003C\u002FBillboard>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,723,777],[540,1288,1289,1309,1338,1356,1364,1368,1376,1395,1403,1440,1449,1483,1491,1499,1508,1516],{"__ignoreMap":508},[560,1290,1291,1293,1295,1297,1299,1301,1303,1305,1307],{"class":562,"line":509},[560,1292,566],{"class":565},[560,1294,570],{"class":569},[560,1296,574],{"class":573},[560,1298,577],{"class":573},[560,1300,580],{"class":565},[560,1302,583],{"class":565},[560,1304,587],{"class":586},[560,1306,583],{"class":565},[560,1308,592],{"class":565},[560,1310,1312,1314,1316,1319,1321,1324,1326,1328,1330,1332,1334,1336],{"class":1311,"line":510},[562,596],[560,1313,600],{"class":599},[560,1315,603],{"class":565},[560,1317,1318],{"class":606}," Billboard",[560,1320,610],{"class":565},[560,1322,1323],{"class":606}," Box",[560,1325,610],{"class":565},[560,1327,613],{"class":606},[560,1329,616],{"class":565},[560,1331,619],{"class":599},[560,1333,622],{"class":565},[560,1335,625],{"class":586},[560,1337,628],{"class":565},[560,1339,1340,1342,1344,1346,1348,1350,1352,1354],{"class":562,"line":631},[560,1341,600],{"class":599},[560,1343,603],{"class":565},[560,1345,638],{"class":606},[560,1347,616],{"class":565},[560,1349,619],{"class":599},[560,1351,622],{"class":565},[560,1353,647],{"class":586},[560,1355,628],{"class":565},[560,1357,1358,1360,1362],{"class":562,"line":652},[560,1359,655],{"class":565},[560,1361,570],{"class":569},[560,1363,592],{"class":565},[560,1365,1366],{"class":562,"line":662},[560,1367,665],{"emptyLinePlaceholder":516},[560,1369,1370,1372,1374],{"class":562,"line":668},[560,1371,566],{"class":565},[560,1373,673],{"class":569},[560,1375,592],{"class":565},[560,1377,1378,1380,1382,1384,1386,1388,1391,1393],{"class":562,"line":678},[560,1379,681],{"class":565},[560,1381,684],{"class":569},[560,1383,687],{"class":573},[560,1385,580],{"class":565},[560,1387,583],{"class":565},[560,1389,1390],{"class":586},"#333333",[560,1392,583],{"class":565},[560,1394,592],{"class":565},[560,1396,1397,1399,1401],{"class":562,"line":701},[560,1398,704],{"class":565},[560,1400,718],{"class":569},[560,1402,710],{"class":565},[560,1404,1405,1407,1409,1411,1414,1416,1418,1421,1423,1426,1428,1430,1433,1436,1438],{"class":562,"line":713},[560,1406,704],{"class":565},[560,1408,707],{"class":569},[560,1410,736],{"class":565},[560,1412,1413],{"class":573},"position",[560,1415,580],{"class":565},[560,1417,583],{"class":565},[560,1419,1420],{"class":565},"[",[560,1422,892],{"class":746},[560,1424,1425],{"class":565},", ",[560,1427,892],{"class":746},[560,1429,1425],{"class":565},[560,1431,1432],{"class":746},"10",[560,1434,1435],{"class":565},"]",[560,1437,583],{"class":565},[560,1439,710],{"class":565},[560,1441,1443,1445,1447],{"class":1442,"line":723},[562,596],[560,1444,704],{"class":565},[560,1446,45],{"class":569},[560,1448,592],{"class":565},[560,1450,1451,1453,1455,1457,1459,1461,1463,1465,1468,1470,1472,1474,1477,1479,1481],{"class":562,"line":728},[560,1452,780],{"class":565},[560,1454,217],{"class":569},[560,1456,736],{"class":565},[560,1458,739],{"class":573},[560,1460,580],{"class":565},[560,1462,583],{"class":565},[560,1464,1420],{"class":565},[560,1466,1467],{"class":746},"0.5",[560,1469,1425],{"class":565},[560,1471,1467],{"class":746},[560,1473,1425],{"class":565},[560,1475,1476],{"class":746},"0.001",[560,1478,1435],{"class":565},[560,1480,583],{"class":565},[560,1482,592],{"class":565},[560,1484,1485,1487,1489],{"class":562,"line":754},[560,1486,791],{"class":565},[560,1488,804],{"class":569},[560,1490,710],{"class":565},[560,1492,1493,1495,1497],{"class":562,"line":554},[560,1494,812],{"class":565},[560,1496,217],{"class":569},[560,1498,592],{"class":565},[560,1500,1502,1504,1506],{"class":1501,"line":777},[562,596],[560,1503,822],{"class":565},[560,1505,45],{"class":569},[560,1507,592],{"class":565},[560,1509,1510,1512,1514],{"class":562,"line":788},[560,1511,832],{"class":565},[560,1513,684],{"class":569},[560,1515,592],{"class":565},[560,1517,1518,1520,1522],{"class":562,"line":799},[560,1519,655],{"class":565},[560,1521,673],{"class":569},[560,1523,592],{"class":565},[545,1525,849],{"id":848},[854,1527,1528,1538],{},[857,1529,1530],{},[860,1531,1532,1534,1536],{},[863,1533,865],{"align":924},[863,1535,868],{"align":924},[863,1537,871],{},[873,1539,1540,1558,1572,1586],{},[860,1541,1542,1547,1554],{},[878,1543,1544],{"align":924},[540,1545,1546],{},"autoUpdate",[878,1548,1549,1550,1553],{"align":924},"Whether the ",[540,1551,1552],{},"\u003CBillboard \u002F>"," should face the camera automatically on every frame.",[878,1555,1556],{},[540,1557,888],{},[860,1559,1560,1565,1568],{},[878,1561,1562],{"align":924},[540,1563,1564],{},"lockX",[878,1566,1567],{"align":924},"Whether to lock the x-axis.",[878,1569,1570],{},[540,1571,898],{},[860,1573,1574,1579,1582],{},[878,1575,1576],{"align":924},[540,1577,1578],{},"lockY",[878,1580,1581],{"align":924},"Whether to lock the y-axis.",[878,1583,1584],{},[540,1585,898],{},[860,1587,1588,1593,1596],{},[878,1589,1590],{"align":924},[540,1591,1592],{},"lockZ",[878,1594,1595],{"align":924},"Whether to lock the z-axis.",[878,1597,1598],{},[540,1599,898],{},[1254,1601,1602],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":508,"searchDepth":509,"depth":510,"links":1604},[1605,1606],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Make objects always face the camera automatically.",{},{"title":45,"description":1607},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1612,"title":49,"body":1613,"description":2192,"extension":513,"links":514,"meta":2193,"navigation":516,"path":50,"seo":2194,"stem":51,"__hash__":2195},"docs\u002F2.api\u002F1.abstractions\u002Fcamera-shake.md",{"type":501,"value":1614,"toc":2188},[1615,1620,1673,1675,1999,2038,2040,2186],[530,1616,1617],{},[1618,1619],"abstractions-camera-shake",{},[536,1621,1622,1625,1626,1425,1630,1634,1635,1638,1639,1425,1642,1645,1646,1649,1650,1425,1653,1425,1656,1659,1660,1663,1664,1073],{},[540,1623,1624],{},"\u003CCameraShake \u002F>"," is a component that adds ",[1627,1628,1629],"strong",{},"natural",[1631,1632,1633],"em",{},"noise-driven motion"," to the ",[1627,1636,1637],{},"active camera",".\nIt offers ",[1627,1640,1641],{},"per-axis control",[1627,1643,1644],{},"adjustable intensity",", and ",[1631,1647,1648],{},"optional decay"," — perfect for ",[1631,1651,1652],{},"handheld feel",[1631,1654,1655],{},"footsteps",[1631,1657,1658],{},"impacts",", or ",[1631,1661,1662],{},"engine rumble"," — and is based on the ",[1067,1665,1668,1669,1672],{"href":1666,"rel":1667},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fstaging\u002Fcamera-shake#camerashake",[1071],"Drei ",[540,1670,1671],{},"CameraShake"," component",[545,1674,15],{"id":547},[549,1676,1679],{"className":551,"code":1677,"highlights":1678,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { CameraShake, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera :position=\"[0, 2, 6]\" \u002F>\n \u003COrbitControls make-default \u002F>\n\n \u003CCameraShake :intensity=\"1\" :max-yaw=\"0.01\" :max-pitch=\"0.01\" :max-roll=\"0.01\" \u002F>\n \u003CTresAxesHelper :scale=\"2\" \u002F>\n \u003CTresMesh :position-y=\"0.5\">\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[510,728,799],[540,1680,1681,1701,1725,1743,1751,1755,1763,1781,1814,1825,1829,1892,1912,1933,1966,1974,1983,1991],{"__ignoreMap":508},[560,1682,1683,1685,1687,1689,1691,1693,1695,1697,1699],{"class":562,"line":509},[560,1684,566],{"class":565},[560,1686,570],{"class":569},[560,1688,574],{"class":573},[560,1690,577],{"class":573},[560,1692,580],{"class":565},[560,1694,583],{"class":565},[560,1696,587],{"class":586},[560,1698,583],{"class":565},[560,1700,592],{"class":565},[560,1702,1704,1706,1708,1711,1713,1715,1717,1719,1721,1723],{"class":1703,"line":510},[562,596],[560,1705,600],{"class":599},[560,1707,603],{"class":565},[560,1709,1710],{"class":606}," CameraShake",[560,1712,610],{"class":565},[560,1714,613],{"class":606},[560,1716,616],{"class":565},[560,1718,619],{"class":599},[560,1720,622],{"class":565},[560,1722,625],{"class":586},[560,1724,628],{"class":565},[560,1726,1727,1729,1731,1733,1735,1737,1739,1741],{"class":562,"line":631},[560,1728,600],{"class":599},[560,1730,603],{"class":565},[560,1732,638],{"class":606},[560,1734,616],{"class":565},[560,1736,619],{"class":599},[560,1738,622],{"class":565},[560,1740,647],{"class":586},[560,1742,628],{"class":565},[560,1744,1745,1747,1749],{"class":562,"line":652},[560,1746,655],{"class":565},[560,1748,570],{"class":569},[560,1750,592],{"class":565},[560,1752,1753],{"class":562,"line":662},[560,1754,665],{"emptyLinePlaceholder":516},[560,1756,1757,1759,1761],{"class":562,"line":668},[560,1758,566],{"class":565},[560,1760,673],{"class":569},[560,1762,592],{"class":565},[560,1764,1765,1767,1769,1771,1773,1775,1777,1779],{"class":562,"line":678},[560,1766,681],{"class":565},[560,1768,684],{"class":569},[560,1770,687],{"class":573},[560,1772,580],{"class":565},[560,1774,583],{"class":565},[560,1776,694],{"class":586},[560,1778,583],{"class":565},[560,1780,592],{"class":565},[560,1782,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1808,1810,1812],{"class":562,"line":701},[560,1784,704],{"class":565},[560,1786,707],{"class":569},[560,1788,736],{"class":565},[560,1790,1413],{"class":573},[560,1792,580],{"class":565},[560,1794,583],{"class":565},[560,1796,1420],{"class":565},[560,1798,892],{"class":746},[560,1800,1425],{"class":565},[560,1802,747],{"class":746},[560,1804,1425],{"class":565},[560,1806,1807],{"class":746},"6",[560,1809,1435],{"class":565},[560,1811,583],{"class":565},[560,1813,710],{"class":565},[560,1815,1816,1818,1820,1823],{"class":562,"line":713},[560,1817,704],{"class":565},[560,1819,718],{"class":569},[560,1821,1822],{"class":573}," make-default",[560,1824,710],{"class":565},[560,1826,1827],{"class":562,"line":723},[560,1828,665],{"emptyLinePlaceholder":516},[560,1830,1832,1834,1836,1838,1841,1843,1845,1848,1850,1852,1855,1857,1859,1862,1864,1866,1869,1871,1873,1875,1877,1879,1882,1884,1886,1888,1890],{"class":1831,"line":728},[562,596],[560,1833,704],{"class":565},[560,1835,1671],{"class":569},[560,1837,736],{"class":565},[560,1839,1840],{"class":573},"intensity",[560,1842,580],{"class":565},[560,1844,583],{"class":565},[560,1846,1847],{"class":746},"1",[560,1849,583],{"class":565},[560,1851,736],{"class":565},[560,1853,1854],{"class":573},"max-yaw",[560,1856,580],{"class":565},[560,1858,583],{"class":565},[560,1860,1861],{"class":746},"0.01",[560,1863,583],{"class":565},[560,1865,736],{"class":565},[560,1867,1868],{"class":573},"max-pitch",[560,1870,580],{"class":565},[560,1872,583],{"class":565},[560,1874,1861],{"class":746},[560,1876,583],{"class":565},[560,1878,736],{"class":565},[560,1880,1881],{"class":573},"max-roll",[560,1883,580],{"class":565},[560,1885,583],{"class":565},[560,1887,1861],{"class":746},[560,1889,583],{"class":565},[560,1891,710],{"class":565},[560,1893,1894,1896,1898,1900,1902,1904,1906,1908,1910],{"class":562,"line":754},[560,1895,780],{"class":565},[560,1897,733],{"class":569},[560,1899,736],{"class":565},[560,1901,739],{"class":573},[560,1903,580],{"class":565},[560,1905,583],{"class":565},[560,1907,747],{"class":746},[560,1909,583],{"class":565},[560,1911,710],{"class":565},[560,1913,1914,1916,1918,1920,1923,1925,1927,1929,1931],{"class":562,"line":554},[560,1915,780],{"class":565},[560,1917,783],{"class":569},[560,1919,736],{"class":565},[560,1921,1922],{"class":573},"position-y",[560,1924,580],{"class":565},[560,1926,583],{"class":565},[560,1928,1467],{"class":746},[560,1930,583],{"class":565},[560,1932,592],{"class":565},[560,1934,1935,1937,1939,1941,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962,1964],{"class":562,"line":777},[560,1936,791],{"class":565},[560,1938,794],{"class":569},[560,1940,736],{"class":565},[560,1942,1943],{"class":573},"args",[560,1945,580],{"class":565},[560,1947,583],{"class":565},[560,1949,1420],{"class":565},[560,1951,1847],{"class":746},[560,1953,1425],{"class":565},[560,1955,1847],{"class":746},[560,1957,1425],{"class":565},[560,1959,1847],{"class":746},[560,1961,1435],{"class":565},[560,1963,583],{"class":565},[560,1965,710],{"class":565},[560,1967,1968,1970,1972],{"class":562,"line":788},[560,1969,791],{"class":565},[560,1971,804],{"class":569},[560,1973,710],{"class":565},[560,1975,1977,1979,1981],{"class":1976,"line":799},[562,596],[560,1978,812],{"class":565},[560,1980,783],{"class":569},[560,1982,592],{"class":565},[560,1984,1985,1987,1989],{"class":562,"line":809},[560,1986,832],{"class":565},[560,1988,684],{"class":569},[560,1990,592],{"class":565},[560,1992,1993,1995,1997],{"class":562,"line":555},[560,1994,655],{"class":565},[560,1996,673],{"class":569},[560,1998,592],{"class":565},[2000,2001,2002,2023],"prose-note",{},[536,2003,2004,2006,2007,2012,2013,2016,2017,2022],{},[540,2005,1624],{}," is fully compatible with ",[1627,2008,2009],{},[540,2010,2011],{},"\u003COrbitControls \u002F>",".\nTo ensure it works ",[1631,2014,2015],{},"as expected",", make sure to add the ",[1627,2018,2019],{},[540,2020,2021],{},"make-default"," prop:",[549,2024,2026],{"className":551,"code":2025,"language":556,"meta":508,"style":508},"\u003COrbitControls make-default \u002F>\n",[540,2027,2028],{"__ignoreMap":508},[560,2029,2030,2032,2034,2036],{"class":562,"line":509},[560,2031,566],{"class":565},[560,2033,718],{"class":569},[560,2035,1822],{"class":573},[560,2037,710],{"class":565},[545,2039,849],{"id":848},[854,2041,2042,2052],{},[857,2043,2044],{},[860,2045,2046,2048,2050],{},[863,2047,865],{},[863,2049,868],{},[863,2051,871],{},[873,2053,2054,2067,2083,2101,2115,2129,2143,2158,2172],{},[860,2055,2056,2060,2063],{},[878,2057,2058],{},[540,2059,1840],{},[878,2061,2062],{},"The intensity of the shake (0–1).",[878,2064,2065],{},[540,2066,1847],{},[860,2068,2069,2074,2079],{},[878,2070,2071],{},[540,2072,2073],{},"decay",[878,2075,885,2076,2078],{},[540,2077,888],{},", intensity decays over time.",[878,2080,2081],{},[540,2082,898],{},[860,2084,2085,2090,2096],{},[878,2086,2087],{},[540,2088,2089],{},"decayRate",[878,2091,2092,2093,2095],{},"How fast intensity changes when ",[540,2094,2073],{}," is enabled.",[878,2097,2098],{},[540,2099,2100],{},"0.65",[860,2102,2103,2108,2111],{},[878,2104,2105],{},[540,2106,2107],{},"maxYaw",[878,2109,2110],{},"Maximum yaw angle in radians.",[878,2112,2113],{},[540,2114,1861],{},[860,2116,2117,2122,2125],{},[878,2118,2119],{},[540,2120,2121],{},"maxPitch",[878,2123,2124],{},"Maximum pitch angle in radians.",[878,2126,2127],{},[540,2128,1861],{},[860,2130,2131,2136,2139],{},[878,2132,2133],{},[540,2134,2135],{},"maxRoll",[878,2137,2138],{},"Maximum roll angle in radians.",[878,2140,2141],{},[540,2142,1861],{},[860,2144,2145,2150,2153],{},[878,2146,2147],{},[540,2148,2149],{},"yawFrequency",[878,2151,2152],{},"Frequency of yaw oscillation.",[878,2154,2155],{},[540,2156,2157],{},"0.1",[860,2159,2160,2165,2168],{},[878,2161,2162],{},[540,2163,2164],{},"pitchFrequency",[878,2166,2167],{},"Frequency of pitch oscillation.",[878,2169,2170],{},[540,2171,2157],{},[860,2173,2174,2179,2182],{},[878,2175,2176],{},[540,2177,2178],{},"rollFrequency",[878,2180,2181],{},"Frequency of roll oscillation.",[878,2183,2184],{},[540,2185,2157],{},[1254,2187,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":2189},[2190,2191],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2192},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2197,"title":53,"body":2198,"description":7431,"extension":513,"links":514,"meta":7432,"navigation":516,"path":54,"seo":7433,"stem":55,"__hash__":7434},"docs\u002F2.api\u002F1.abstractions\u002Fdecal.md",{"type":501,"value":2199,"toc":7396},[2200,2206,2288,2294,2296,2311,2785,2801,2805,2816,2985,3001,3004,3018,3070,3095,3099,3112,3117,3183,3190,3196,3213,3301,3306,3320,3395,4136,4141,4181,4194,4256,4259,4269,4355,4362,4382,4392,4395,4602,4614,4622,4637,4967,4971,4995,5386,5400,5420,5424,5440,5677,5683,5876,5882,6017,6026,6033,6089,6190,6195,6341,6346,6387,6391,6447,6451,6522,6526,6604,6611,6626,6667,6716,7393],[536,2201,2202,2205],{},[540,2203,2204],{},"\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.",[2207,2208,2209,2221,2234,2248,2255,2266,2278],"ul",{},[2210,2211,2212,2213,2216,2217,2220],"li",{},"🎨 Drop-in ",[1627,2214,2215],{},"editor UI"," via ",[540,2218,2219],{},"\u003CDecalDebugUI>"," — placement, rotate \u002F scale \u002F snap, tint, flip, layers, undo \u002F redo, import \u002F export.",[2210,2222,2223,2224,2216,2227,2233],{},"🛠 ",[1627,2225,2226],{},"Programmatic API",[1067,2228,2230],{"href":2229},"#programmatic-api-usedecaleditor",[540,2231,2232],{},"useDecalEditor()"," for custom panels and automation.",[2210,2235,2236,2237,2240,2241,2244,2245,1073],{},"🖼️ ",[1627,2238,2239],{},"Texture palette"," — pass an array of ",[540,2242,2243],{},"Texture"," to ",[540,2246,2247],{},":map",[2210,2249,2250,2251,2254],{},"🧩 ",[1627,2252,2253],{},"Custom material"," — override the default via the slot.",[2210,2256,2257,2258,2261,2262,2265],{},"💾 ",[1627,2259,2260],{},"Lossless JSON"," — ",[540,2263,2264],{},"v-model:data"," round-trips to plain JSON.",[2210,2267,2268,2269,2272,2273,2277],{},"⚡ ",[1627,2270,2271],{},"BVH-accelerated"," — auto-detected via ",[1067,2274,2275],{"href":332},[540,2276,331],{},"; 10–100× faster on dense meshes.",[2210,2279,2280,2281,2261,2284,2287],{},"📚 ",[1627,2282,2283],{},"Per-mesh stacking",[540,2285,2286],{},"zIndex"," with automatic polygon-offset.",[2289,2290,2291],"scene-wrapper",{},[2292,2293],"abstractions-decal",{},[545,2295,15],{"id":547},[536,2297,2298,2299,2301,2302,2305,2306,2308,2309,1073],{},"The minimal setup is a ",[540,2300,2204],{}," placed as a child of any ",[540,2303,2304],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[540,2307,2264],{}," and one or\nmore textures via ",[540,2310,2247],{},[549,2312,2314],{"className":551,"code":2313,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Decal, OrbitControls, useTexture } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { reactive } from 'vue'\n\nconst { state: texture } = useTexture('\u002Ftextures\u002Flogo.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\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 3]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal v-if=\"texture\" v-model:data=\"decals\" :map=\"texture\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[540,2315,2316,2336,2364,2382,2401,2405,2443,2447,2461,2466,2483,2509,2532,2558,2569,2585,2590,2595,2603,2607,2615,2624,2658,2667,2676,2685,2707,2758,2767,2776],{"__ignoreMap":508},[560,2317,2318,2320,2322,2324,2326,2328,2330,2332,2334],{"class":562,"line":509},[560,2319,566],{"class":565},[560,2321,570],{"class":569},[560,2323,574],{"class":573},[560,2325,577],{"class":573},[560,2327,580],{"class":565},[560,2329,583],{"class":565},[560,2331,587],{"class":586},[560,2333,583],{"class":565},[560,2335,592],{"class":565},[560,2337,2338,2340,2342,2345,2347,2349,2351,2354,2356,2358,2360,2362],{"class":562,"line":510},[560,2339,600],{"class":599},[560,2341,603],{"class":565},[560,2343,2344],{"class":606}," Decal",[560,2346,610],{"class":565},[560,2348,613],{"class":606},[560,2350,610],{"class":565},[560,2352,2353],{"class":606}," useTexture",[560,2355,616],{"class":565},[560,2357,619],{"class":599},[560,2359,622],{"class":565},[560,2361,625],{"class":586},[560,2363,628],{"class":565},[560,2365,2366,2368,2370,2372,2374,2376,2378,2380],{"class":562,"line":631},[560,2367,600],{"class":599},[560,2369,603],{"class":565},[560,2371,638],{"class":606},[560,2373,616],{"class":565},[560,2375,619],{"class":599},[560,2377,622],{"class":565},[560,2379,647],{"class":586},[560,2381,628],{"class":565},[560,2383,2384,2386,2388,2391,2393,2395,2397,2399],{"class":562,"line":652},[560,2385,600],{"class":599},[560,2387,603],{"class":565},[560,2389,2390],{"class":606}," reactive",[560,2392,616],{"class":565},[560,2394,619],{"class":599},[560,2396,622],{"class":565},[560,2398,556],{"class":586},[560,2400,628],{"class":565},[560,2402,2403],{"class":562,"line":662},[560,2404,665],{"emptyLinePlaceholder":516},[560,2406,2407,2410,2412,2415,2417,2420,2423,2426,2429,2432,2435,2438,2440],{"class":562,"line":668},[560,2408,2409],{"class":573},"const",[560,2411,603],{"class":565},[560,2413,2414],{"class":569}," state",[560,2416,1145],{"class":565},[560,2418,2419],{"class":606}," texture ",[560,2421,2422],{"class":565},"}",[560,2424,2425],{"class":565}," =",[560,2427,2353],{"class":2428},"s2Zo4",[560,2430,2431],{"class":606},"(",[560,2433,2434],{"class":565},"'",[560,2436,2437],{"class":586},"\u002Ftextures\u002Flogo.png",[560,2439,2434],{"class":565},[560,2441,2442],{"class":606},")\n",[560,2444,2445],{"class":562,"line":678},[560,2446,665],{"emptyLinePlaceholder":516},[560,2448,2449,2451,2454,2456,2458],{"class":562,"line":701},[560,2450,2409],{"class":573},[560,2452,2453],{"class":606}," decals ",[560,2455,580],{"class":565},[560,2457,2390],{"class":2428},[560,2459,2460],{"class":606},"([\n",[560,2462,2463],{"class":562,"line":713},[560,2464,2465],{"class":565}," {\n",[560,2467,2468,2471,2473,2475,2478,2480],{"class":562,"line":723},[560,2469,2470],{"class":569}," id",[560,2472,1145],{"class":565},[560,2474,622],{"class":565},[560,2476,2477],{"class":586},"logo-1",[560,2479,2434],{"class":565},[560,2481,2482],{"class":565},",\n",[560,2484,2485,2488,2490,2493,2495,2497,2500,2502,2505,2507],{"class":562,"line":728},[560,2486,2487],{"class":569}," position",[560,2489,1145],{"class":565},[560,2491,2492],{"class":606}," [",[560,2494,892],{"class":746},[560,2496,610],{"class":565},[560,2498,2499],{"class":746}," 0",[560,2501,610],{"class":565},[560,2503,2504],{"class":746}," 0.5",[560,2506,1435],{"class":606},[560,2508,2482],{"class":565},[560,2510,2511,2514,2516,2518,2520,2522,2524,2526,2528,2530],{"class":562,"line":754},[560,2512,2513],{"class":569}," orientation",[560,2515,1145],{"class":565},[560,2517,2492],{"class":606},[560,2519,892],{"class":746},[560,2521,610],{"class":565},[560,2523,2499],{"class":746},[560,2525,610],{"class":565},[560,2527,2499],{"class":746},[560,2529,1435],{"class":606},[560,2531,2482],{"class":565},[560,2533,2534,2537,2539,2541,2544,2546,2549,2551,2554,2556],{"class":562,"line":554},[560,2535,2536],{"class":569}," size",[560,2538,1145],{"class":565},[560,2540,2492],{"class":606},[560,2542,2543],{"class":746},"0.75",[560,2545,610],{"class":565},[560,2547,2548],{"class":746}," 0.17",[560,2550,610],{"class":565},[560,2552,2553],{"class":746}," 1",[560,2555,1435],{"class":606},[560,2557,2482],{"class":565},[560,2559,2560,2563,2565,2567],{"class":562,"line":777},[560,2561,2562],{"class":569}," zIndex",[560,2564,1145],{"class":565},[560,2566,2499],{"class":746},[560,2568,2482],{"class":565},[560,2570,2571,2574,2576,2578,2581,2583],{"class":562,"line":788},[560,2572,2573],{"class":569}," map",[560,2575,1145],{"class":565},[560,2577,622],{"class":565},[560,2579,2580],{"class":586},"logo.png",[560,2582,2434],{"class":565},[560,2584,2482],{"class":565},[560,2586,2587],{"class":562,"line":799},[560,2588,2589],{"class":565}," },\n",[560,2591,2592],{"class":562,"line":809},[560,2593,2594],{"class":606},"])\n",[560,2596,2597,2599,2601],{"class":562,"line":555},[560,2598,655],{"class":565},[560,2600,570],{"class":569},[560,2602,592],{"class":565},[560,2604,2605],{"class":562,"line":829},[560,2606,665],{"emptyLinePlaceholder":516},[560,2608,2609,2611,2613],{"class":562,"line":839},[560,2610,566],{"class":565},[560,2612,673],{"class":569},[560,2614,592],{"class":565},[560,2616,2618,2620,2622],{"class":562,"line":2617},21,[560,2619,681],{"class":565},[560,2621,684],{"class":569},[560,2623,592],{"class":565},[560,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2652,2654,2656],{"class":562,"line":2626},22,[560,2628,704],{"class":565},[560,2630,707],{"class":569},[560,2632,736],{"class":565},[560,2634,1413],{"class":573},[560,2636,580],{"class":565},[560,2638,583],{"class":565},[560,2640,1420],{"class":565},[560,2642,747],{"class":746},[560,2644,1425],{"class":565},[560,2646,747],{"class":746},[560,2648,1425],{"class":565},[560,2650,2651],{"class":746},"3",[560,2653,1435],{"class":565},[560,2655,583],{"class":565},[560,2657,710],{"class":565},[560,2659,2661,2663,2665],{"class":562,"line":2660},23,[560,2662,704],{"class":565},[560,2664,718],{"class":569},[560,2666,710],{"class":565},[560,2668,2670,2672,2674],{"class":562,"line":2669},24,[560,2671,704],{"class":565},[560,2673,783],{"class":569},[560,2675,592],{"class":565},[560,2677,2679,2681,2683],{"class":562,"line":2678},25,[560,2680,780],{"class":565},[560,2682,794],{"class":569},[560,2684,710],{"class":565},[560,2686,2688,2690,2693,2696,2698,2700,2703,2705],{"class":562,"line":2687},26,[560,2689,780],{"class":565},[560,2691,2692],{"class":569},"TresMeshStandardMaterial",[560,2694,2695],{"class":573}," color",[560,2697,580],{"class":565},[560,2699,583],{"class":565},[560,2701,2702],{"class":586},"white",[560,2704,583],{"class":565},[560,2706,710],{"class":565},[560,2708,2710,2712,2714,2717,2719,2721,2724,2726,2729,2731,2734,2736,2738,2741,2743,2745,2748,2750,2752,2754,2756],{"class":562,"line":2709},27,[560,2711,780],{"class":565},[560,2713,53],{"class":569},[560,2715,2716],{"class":599}," v-if",[560,2718,580],{"class":565},[560,2720,583],{"class":565},[560,2722,2723],{"class":606},"texture",[560,2725,583],{"class":565},[560,2727,2728],{"class":573}," v-model",[560,2730,1145],{"class":565},[560,2732,2733],{"class":573},"data",[560,2735,580],{"class":565},[560,2737,583],{"class":565},[560,2739,2740],{"class":606},"decals",[560,2742,583],{"class":565},[560,2744,736],{"class":565},[560,2746,2747],{"class":573},"map",[560,2749,580],{"class":565},[560,2751,583],{"class":565},[560,2753,2723],{"class":606},[560,2755,583],{"class":565},[560,2757,710],{"class":565},[560,2759,2761,2763,2765],{"class":562,"line":2760},28,[560,2762,822],{"class":565},[560,2764,783],{"class":569},[560,2766,592],{"class":565},[560,2768,2770,2772,2774],{"class":562,"line":2769},29,[560,2771,832],{"class":565},[560,2773,684],{"class":569},[560,2775,592],{"class":565},[560,2777,2779,2781,2783],{"class":562,"line":2778},30,[560,2780,655],{"class":565},[560,2782,673],{"class":569},[560,2784,592],{"class":565},[2000,2786,2787],{},[536,2788,2789,2790,2792,2793,2796,2797,2800],{},"The ",[540,2791,2264],{}," array is the ",[1627,2794,2795],{},"single source of truth"," — every\ndecal you can see lives in it. It serializes to plain JSON so you can\nsave \u002F load it from a backend, localStorage, or a ",[540,2798,2799],{},".json"," file.",[545,2802,2804],{"id":2803},"multiple-textures-palette","Multiple textures (palette)",[536,2806,2807,2808,2810,2811,2815],{},"Pass an array to ",[540,2809,2247],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1067,2812,2813],{"href":154},[540,2814,153],{},"\nplugs in directly:",[549,2817,2819],{"className":551,"code":2818,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useTextures } from '@tresjs\u002Fcientos'\n\nconst { textures } = useTextures([\n '\u002Ftextures\u002Flogo.png',\n '\u002Ftextures\u002Fbadge.png',\n '\u002Ftextures\u002Fsticker.png',\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CDecal v-model:data=\"decals\" :map=\"textures\" \u002F>\n\u003C\u002Ftemplate>\n",[540,2820,2821,2841,2864,2868,2885,2896,2907,2918,2922,2930,2934,2942,2977],{"__ignoreMap":508},[560,2822,2823,2825,2827,2829,2831,2833,2835,2837,2839],{"class":562,"line":509},[560,2824,566],{"class":565},[560,2826,570],{"class":569},[560,2828,574],{"class":573},[560,2830,577],{"class":573},[560,2832,580],{"class":565},[560,2834,583],{"class":565},[560,2836,587],{"class":586},[560,2838,583],{"class":565},[560,2840,592],{"class":565},[560,2842,2843,2845,2847,2849,2851,2854,2856,2858,2860,2862],{"class":562,"line":510},[560,2844,600],{"class":599},[560,2846,603],{"class":565},[560,2848,2344],{"class":606},[560,2850,610],{"class":565},[560,2852,2853],{"class":606}," useTextures",[560,2855,616],{"class":565},[560,2857,619],{"class":599},[560,2859,622],{"class":565},[560,2861,625],{"class":586},[560,2863,628],{"class":565},[560,2865,2866],{"class":562,"line":631},[560,2867,665],{"emptyLinePlaceholder":516},[560,2869,2870,2872,2874,2877,2879,2881,2883],{"class":562,"line":652},[560,2871,2409],{"class":573},[560,2873,603],{"class":565},[560,2875,2876],{"class":606}," textures ",[560,2878,2422],{"class":565},[560,2880,2425],{"class":565},[560,2882,2853],{"class":2428},[560,2884,2460],{"class":606},[560,2886,2887,2890,2892,2894],{"class":562,"line":662},[560,2888,2889],{"class":565}," '",[560,2891,2437],{"class":586},[560,2893,2434],{"class":565},[560,2895,2482],{"class":565},[560,2897,2898,2900,2903,2905],{"class":562,"line":668},[560,2899,2889],{"class":565},[560,2901,2902],{"class":586},"\u002Ftextures\u002Fbadge.png",[560,2904,2434],{"class":565},[560,2906,2482],{"class":565},[560,2908,2909,2911,2914,2916],{"class":562,"line":678},[560,2910,2889],{"class":565},[560,2912,2913],{"class":586},"\u002Ftextures\u002Fsticker.png",[560,2915,2434],{"class":565},[560,2917,2482],{"class":565},[560,2919,2920],{"class":562,"line":701},[560,2921,2594],{"class":606},[560,2923,2924,2926,2928],{"class":562,"line":713},[560,2925,655],{"class":565},[560,2927,570],{"class":569},[560,2929,592],{"class":565},[560,2931,2932],{"class":562,"line":723},[560,2933,665],{"emptyLinePlaceholder":516},[560,2935,2936,2938,2940],{"class":562,"line":728},[560,2937,566],{"class":565},[560,2939,673],{"class":569},[560,2941,592],{"class":565},[560,2943,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2973,2975],{"class":562,"line":754},[560,2945,681],{"class":565},[560,2947,53],{"class":569},[560,2949,2728],{"class":573},[560,2951,1145],{"class":565},[560,2953,2733],{"class":573},[560,2955,580],{"class":565},[560,2957,583],{"class":565},[560,2959,2740],{"class":606},[560,2961,583],{"class":565},[560,2963,736],{"class":565},[560,2965,2747],{"class":573},[560,2967,580],{"class":565},[560,2969,583],{"class":565},[560,2971,2972],{"class":606},"textures",[560,2974,583],{"class":565},[560,2976,710],{"class":565},[560,2978,2979,2981,2983],{"class":562,"line":554},[560,2980,655],{"class":565},[560,2982,673],{"class":569},[560,2984,592],{"class":565},[536,2986,2987,2988,2261,2991,2993,2994,2997,2998,3000],{},"Each entry references its texture by ",[540,2989,2990],{},"name",[540,2992,2204],{}," auto-fills\n",[540,2995,2996],{},"texture.name"," from the URL filename when missing, so JSON ",[540,2999,2747],{},"\nfields round-trip cleanly.",[545,3002,2253],{"id":3003},"custom-material",[536,3005,3006,3007,3010,3011,2482,3014,3017],{},"The default material is ",[540,3008,3009],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[540,3012,3013],{},"MeshStandardMaterial",[540,3015,3016],{},"MeshPhysicalMaterial",", or a custom shader.",[549,3019,3021],{"className":551,"code":3020,"language":556,"meta":508,"style":508},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" \u002F>\n\u003C\u002FDecal>\n",[540,3022,3023,3057,3062],{"__ignoreMap":508},[560,3024,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055],{"class":562,"line":509},[560,3026,566],{"class":565},[560,3028,53],{"class":569},[560,3030,2728],{"class":573},[560,3032,1145],{"class":565},[560,3034,2733],{"class":573},[560,3036,580],{"class":565},[560,3038,583],{"class":565},[560,3040,2740],{"class":606},[560,3042,583],{"class":565},[560,3044,736],{"class":565},[560,3046,2747],{"class":573},[560,3048,580],{"class":565},[560,3050,583],{"class":565},[560,3052,2723],{"class":606},[560,3054,583],{"class":565},[560,3056,592],{"class":565},[560,3058,3059],{"class":562,"line":510},[560,3060,3061],{"class":606}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" \u002F>\n",[560,3063,3064,3066,3068],{"class":562,"line":631},[560,3065,655],{"class":565},[560,3067,53],{"class":569},[560,3069,592],{"class":565},[2000,3071,3072],{},[536,3073,3074,3075,3078,3079,3082,3083,3078,3086,3089,3090,2482,3092,3094],{},"Keep ",[540,3076,3077],{},"transparent: true"," and ",[540,3080,3081],{},"polygonOffset: true"," on any custom\nmaterial, otherwise stacking and alpha handling won't work as expected.\nColor \u002F opacity tint from the editor only applies to materials\nexposing ",[540,3084,3085],{},".color",[540,3087,3088],{},".opacity"," (",[540,3091,3009],{},[540,3093,3013],{},", …) — bespoke shader materials are skipped\nsilently.",[545,3096,3098],{"id":3097},"stacking-decals-z-layering","Stacking decals (z-layering)",[536,3100,3101,3102,3104,3105,3108,3109,1073],{},"Each decal has a ",[540,3103,2286],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[540,3106,3107],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[540,3110,3111],{},"layerGap",[2289,3113,3114],{},[3115,3116],"abstractions-decal-stacking",{},[549,3118,3120],{"className":551,"code":3119,"language":556,"meta":508,"style":508},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n\u002F>\n",[540,3121,3122,3129,3147,3162,3178],{"__ignoreMap":508},[560,3123,3124,3126],{"class":562,"line":509},[560,3125,566],{"class":565},[560,3127,3128],{"class":569},"Decal\n",[560,3130,3131,3134,3136,3138,3140,3142,3144],{"class":562,"line":510},[560,3132,3133],{"class":573}," v-model",[560,3135,1145],{"class":565},[560,3137,2733],{"class":573},[560,3139,580],{"class":565},[560,3141,583],{"class":565},[560,3143,2740],{"class":606},[560,3145,3146],{"class":565},"\"\n",[560,3148,3149,3152,3154,3156,3158,3160],{"class":562,"line":631},[560,3150,3151],{"class":565}," :",[560,3153,2747],{"class":573},[560,3155,580],{"class":565},[560,3157,583],{"class":565},[560,3159,2972],{"class":606},[560,3161,3146],{"class":565},[560,3163,3164,3166,3169,3171,3173,3176],{"class":562,"line":652},[560,3165,3151],{"class":565},[560,3167,3168],{"class":573},"layer-gap",[560,3170,580],{"class":565},[560,3172,583],{"class":565},[560,3174,3175],{"class":746},"0.002",[560,3177,3146],{"class":565},[560,3179,3180],{"class":562,"line":662},[560,3181,3182],{"class":606},"\u002F>\n",[536,3184,3185,3186,3189],{},"zIndex stacks are ",[1627,3187,3188],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[545,3191,3193,3194],{"id":3192},"editable-mode-decaldebugui","Editable mode + ",[540,3195,2219],{},[536,3197,3198,3199,3202,3203,3205,3206,3209,3210,1073],{},"Add the ",[540,3200,3201],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[540,3204,2219],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1627,3207,3208],{},"outside"," ",[540,3211,3212],{},"\u003CTresCanvas>",[3214,3215,3216,3230,3251],"prose-warning",{},[536,3217,3218,3220,3221,3224,3225,3227,3228,1073],{},[540,3219,2219],{}," needs its stylesheet — import it ",[1627,3222,3223],{},"once"," at your app\nentry. ",[540,3226,2204],{}," itself is style-less, so this is only needed when you\nmount ",[540,3229,2219],{},[549,3231,3233],{"className":1113,"code":3232,"language":587,"meta":508,"style":508},"\u002F\u002F Vite \u002F Vue — in main.ts\nimport '@tresjs\u002Fcientos\u002Fstyles.css'\n",[540,3234,3235,3240],{"__ignoreMap":508},[560,3236,3237],{"class":562,"line":509},[560,3238,3239],{"class":1136},"\u002F\u002F Vite \u002F Vue — in main.ts\n",[560,3241,3242,3244,3246,3249],{"class":562,"line":510},[560,3243,600],{"class":599},[560,3245,622],{"class":565},[560,3247,3248],{"class":586},"@tresjs\u002Fcientos\u002Fstyles.css",[560,3250,628],{"class":565},[549,3252,3254],{"className":1113,"code":3253,"language":587,"meta":508,"style":508},"\u002F\u002F Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs\u002Fcientos\u002Fstyles.css'],\n})\n",[540,3255,3256,3261,3276,3295],{"__ignoreMap":508},[560,3257,3258],{"class":562,"line":509},[560,3259,3260],{"class":1136},"\u002F\u002F Nuxt — in nuxt.config.ts\n",[560,3262,3263,3265,3268,3271,3273],{"class":562,"line":510},[560,3264,1121],{"class":599},[560,3266,3267],{"class":599}," default",[560,3269,3270],{"class":2428}," defineNuxtConfig",[560,3272,2431],{"class":606},[560,3274,3275],{"class":565},"{\n",[560,3277,3278,3281,3283,3285,3287,3289,3291,3293],{"class":562,"line":631},[560,3279,3280],{"class":569}," css",[560,3282,1145],{"class":565},[560,3284,2492],{"class":606},[560,3286,2434],{"class":565},[560,3288,3248],{"class":586},[560,3290,2434],{"class":565},[560,3292,1435],{"class":606},[560,3294,2482],{"class":565},[560,3296,3297,3299],{"class":562,"line":652},[560,3298,2422],{"class":565},[560,3300,2442],{"class":606},[2289,3302,3303],{},[3304,3305],"abstractions-decal-editable",{},[536,3307,3308,3309,3312,3313,3316,3317,1073],{},"Three panels: a floating ",[1627,3310,3311],{},"handle"," anchored to the editing decal, a\nbottom ",[1627,3314,3315],{},"dock"," (texture picker + edit tools), a right-side ",[1627,3318,3319],{},"layer\npanel",[2207,3321,3322,3332,3337,3343,3356,3361,3366,3372,3378,3384,3390],{},[2210,3323,3324,3327,3328,3331],{},[1627,3325,3326],{},"Floating handle"," (rotate + scale + snap + live ",[540,3329,3330],{},"scale% · rotation° · L\u003Cn>"," badge)",[2210,3333,3334],{},[1627,3335,3336],{},"Color tint & opacity",[2210,3338,3339,3342],{},[1627,3340,3341],{},"Mirror"," (flip X \u002F flip Y)",[2210,3344,3345,3089,3348,3351,3352,3355],{},[1627,3346,3347],{},"Layer controls",[540,3349,3350],{},"L+"," \u002F ",[540,3353,3354],{},"L-",")",[2210,3357,3358],{},[1627,3359,3360],{},"Visibility toggle",[2210,3362,3363],{},[1627,3364,3365],{},"Per-row remove",[2210,3367,3368,3371],{},[1627,3369,3370],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2210,3373,3374,3377],{},[1627,3375,3376],{},"Texture picker"," (drag or click-to-arm)",[2210,3379,3380,3383],{},[1627,3381,3382],{},"Mode badge"," (placing \u002F editing status)",[2210,3385,3386,3389],{},[1627,3387,3388],{},"Undo \u002F Redo"," buttons",[2210,3391,3392,3389],{},[1627,3393,3394],{},"Import \u002F Export",[549,3396,3398],{"className":551,"code":3397,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Decal, DecalDebugUI, OrbitControls, useTextures } from '@tresjs\u002Fcientos'\nimport type { DecalEditorSession, DecalJsonEntry } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { computed, reactive, shallowRef } from 'vue'\n\nconst { textures } = useTextures(['\u002Ftextures\u002Fa.png', '\u002Ftextures\u002Fb.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\u002Fscript>\n\n\u003Ctemplate>\n \u003CDecalDebugUI :session=\"session\" :textures=\"textures ?? []\" :data=\"layout\" \u002F>\n\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 4]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresMesh name=\"cube\" :position=\"[-1.2, 0, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal ref=\"decalRef\" v-model:data=\"layout.cube\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh name=\"sphere\" :position=\"[1.2, 0, 0]\">\n \u003CTresSphereGeometry :args=\"[0.7]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal v-model:data=\"layout.sphere\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[540,3399,3400,3420,3451,3478,3496,3524,3528,3563,3567,3602,3614,3625,3631,3635,3674,3714,3722,3726,3734,3784,3788,3796,3829,3837,3841,3887,3895,3913,3966,3974,3978,4022,4049,4068,4109,4118,4127],{"__ignoreMap":508},[560,3401,3402,3404,3406,3408,3410,3412,3414,3416,3418],{"class":562,"line":509},[560,3403,566],{"class":565},[560,3405,570],{"class":569},[560,3407,574],{"class":573},[560,3409,577],{"class":573},[560,3411,580],{"class":565},[560,3413,583],{"class":565},[560,3415,587],{"class":586},[560,3417,583],{"class":565},[560,3419,592],{"class":565},[560,3421,3422,3424,3426,3428,3430,3433,3435,3437,3439,3441,3443,3445,3447,3449],{"class":562,"line":510},[560,3423,600],{"class":599},[560,3425,603],{"class":565},[560,3427,2344],{"class":606},[560,3429,610],{"class":565},[560,3431,3432],{"class":606}," DecalDebugUI",[560,3434,610],{"class":565},[560,3436,613],{"class":606},[560,3438,610],{"class":565},[560,3440,2853],{"class":606},[560,3442,616],{"class":565},[560,3444,619],{"class":599},[560,3446,622],{"class":565},[560,3448,625],{"class":586},[560,3450,628],{"class":565},[560,3452,3453,3455,3458,3460,3463,3465,3468,3470,3472,3474,3476],{"class":562,"line":631},[560,3454,600],{"class":599},[560,3456,3457],{"class":599}," type",[560,3459,603],{"class":565},[560,3461,3462],{"class":606}," DecalEditorSession",[560,3464,610],{"class":565},[560,3466,3467],{"class":606}," DecalJsonEntry",[560,3469,616],{"class":565},[560,3471,619],{"class":599},[560,3473,622],{"class":565},[560,3475,625],{"class":586},[560,3477,628],{"class":565},[560,3479,3480,3482,3484,3486,3488,3490,3492,3494],{"class":562,"line":652},[560,3481,600],{"class":599},[560,3483,603],{"class":565},[560,3485,638],{"class":606},[560,3487,616],{"class":565},[560,3489,619],{"class":599},[560,3491,622],{"class":565},[560,3493,647],{"class":586},[560,3495,628],{"class":565},[560,3497,3498,3500,3502,3505,3507,3509,3511,3514,3516,3518,3520,3522],{"class":562,"line":662},[560,3499,600],{"class":599},[560,3501,603],{"class":565},[560,3503,3504],{"class":606}," computed",[560,3506,610],{"class":565},[560,3508,2390],{"class":606},[560,3510,610],{"class":565},[560,3512,3513],{"class":606}," shallowRef",[560,3515,616],{"class":565},[560,3517,619],{"class":599},[560,3519,622],{"class":565},[560,3521,556],{"class":586},[560,3523,628],{"class":565},[560,3525,3526],{"class":562,"line":668},[560,3527,665],{"emptyLinePlaceholder":516},[560,3529,3530,3532,3534,3536,3538,3540,3542,3545,3547,3550,3552,3554,3556,3559,3561],{"class":562,"line":678},[560,3531,2409],{"class":573},[560,3533,603],{"class":565},[560,3535,2876],{"class":606},[560,3537,2422],{"class":565},[560,3539,2425],{"class":565},[560,3541,2853],{"class":2428},[560,3543,3544],{"class":606},"([",[560,3546,2434],{"class":565},[560,3548,3549],{"class":586},"\u002Ftextures\u002Fa.png",[560,3551,2434],{"class":565},[560,3553,610],{"class":565},[560,3555,622],{"class":565},[560,3557,3558],{"class":586},"\u002Ftextures\u002Fb.png",[560,3560,2434],{"class":565},[560,3562,2594],{"class":606},[560,3564,3565],{"class":562,"line":701},[560,3566,665],{"emptyLinePlaceholder":516},[560,3568,3569,3571,3574,3576,3578,3580,3583,3585,3588,3590,3592,3595,3598,3600],{"class":562,"line":713},[560,3570,2409],{"class":573},[560,3572,3573],{"class":606}," layout ",[560,3575,580],{"class":565},[560,3577,2390],{"class":2428},[560,3579,566],{"class":565},[560,3581,3582],{"class":1127},"Record",[560,3584,566],{"class":565},[560,3586,3587],{"class":1127},"string",[560,3589,610],{"class":565},[560,3591,3467],{"class":1127},[560,3593,3594],{"class":606},"[]",[560,3596,3597],{"class":565},">>",[560,3599,2431],{"class":606},[560,3601,3275],{"class":565},[560,3603,3604,3607,3609,3612],{"class":562,"line":723},[560,3605,3606],{"class":569}," cube",[560,3608,1145],{"class":565},[560,3610,3611],{"class":606}," []",[560,3613,2482],{"class":565},[560,3615,3616,3619,3621,3623],{"class":562,"line":728},[560,3617,3618],{"class":569}," sphere",[560,3620,1145],{"class":565},[560,3622,3611],{"class":606},[560,3624,2482],{"class":565},[560,3626,3627,3629],{"class":562,"line":754},[560,3628,2422],{"class":565},[560,3630,2442],{"class":606},[560,3632,3633],{"class":562,"line":554},[560,3634,665],{"emptyLinePlaceholder":516},[560,3636,3637,3639,3642,3644,3646,3649,3652,3654,3656,3658,3661,3664,3667,3669,3672],{"class":562,"line":777},[560,3638,2409],{"class":573},[560,3640,3641],{"class":606}," decalRef ",[560,3643,580],{"class":565},[560,3645,3513],{"class":2428},[560,3647,3648],{"class":565},"\u003C{",[560,3650,3651],{"class":569}," editor",[560,3653,1145],{"class":565},[560,3655,3462],{"class":1127},[560,3657,616],{"class":565},[560,3659,3660],{"class":565}," |",[560,3662,3663],{"class":1127}," null",[560,3665,3666],{"class":565},">",[560,3668,2431],{"class":606},[560,3670,3671],{"class":565},"null",[560,3673,2442],{"class":606},[560,3675,3676,3678,3681,3683,3685,3687,3690,3693,3696,3698,3701,3704,3707,3710,3712],{"class":562,"line":788},[560,3677,2409],{"class":573},[560,3679,3680],{"class":606}," session ",[560,3682,580],{"class":565},[560,3684,3504],{"class":2428},[560,3686,2431],{"class":606},[560,3688,3689],{"class":565},"()",[560,3691,3692],{"class":573}," =>",[560,3694,3695],{"class":606}," decalRef",[560,3697,1073],{"class":565},[560,3699,3700],{"class":606},"value",[560,3702,3703],{"class":565},"?.",[560,3705,3706],{"class":606},"editor ",[560,3708,3709],{"class":565},"??",[560,3711,3663],{"class":565},[560,3713,2442],{"class":606},[560,3715,3716,3718,3720],{"class":562,"line":799},[560,3717,655],{"class":565},[560,3719,570],{"class":569},[560,3721,592],{"class":565},[560,3723,3724],{"class":562,"line":809},[560,3725,665],{"emptyLinePlaceholder":516},[560,3727,3728,3730,3732],{"class":562,"line":555},[560,3729,566],{"class":565},[560,3731,673],{"class":569},[560,3733,592],{"class":565},[560,3735,3736,3738,3741,3743,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3767,3769,3771,3773,3775,3777,3780,3782],{"class":562,"line":829},[560,3737,681],{"class":565},[560,3739,3740],{"class":569},"DecalDebugUI",[560,3742,736],{"class":565},[560,3744,3745],{"class":573},"session",[560,3747,580],{"class":565},[560,3749,583],{"class":565},[560,3751,3745],{"class":606},[560,3753,583],{"class":565},[560,3755,736],{"class":565},[560,3757,2972],{"class":573},[560,3759,580],{"class":565},[560,3761,583],{"class":565},[560,3763,2972],{"class":606},[560,3765,3766],{"class":565}," ?? []",[560,3768,583],{"class":565},[560,3770,736],{"class":565},[560,3772,2733],{"class":573},[560,3774,580],{"class":565},[560,3776,583],{"class":565},[560,3778,3779],{"class":606},"layout",[560,3781,583],{"class":565},[560,3783,710],{"class":565},[560,3785,3786],{"class":562,"line":839},[560,3787,665],{"emptyLinePlaceholder":516},[560,3789,3790,3792,3794],{"class":562,"line":2617},[560,3791,681],{"class":565},[560,3793,684],{"class":569},[560,3795,592],{"class":565},[560,3797,3798,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818,3820,3823,3825,3827],{"class":562,"line":2626},[560,3799,704],{"class":565},[560,3801,707],{"class":569},[560,3803,736],{"class":565},[560,3805,1413],{"class":573},[560,3807,580],{"class":565},[560,3809,583],{"class":565},[560,3811,1420],{"class":565},[560,3813,747],{"class":746},[560,3815,1425],{"class":565},[560,3817,747],{"class":746},[560,3819,1425],{"class":565},[560,3821,3822],{"class":746},"4",[560,3824,1435],{"class":565},[560,3826,583],{"class":565},[560,3828,710],{"class":565},[560,3830,3831,3833,3835],{"class":562,"line":2660},[560,3832,704],{"class":565},[560,3834,718],{"class":569},[560,3836,710],{"class":565},[560,3838,3839],{"class":562,"line":2669},[560,3840,665],{"emptyLinePlaceholder":516},[560,3842,3843,3845,3847,3850,3852,3854,3857,3859,3861,3863,3865,3867,3870,3873,3875,3877,3879,3881,3883,3885],{"class":562,"line":2678},[560,3844,704],{"class":565},[560,3846,783],{"class":569},[560,3848,3849],{"class":573}," name",[560,3851,580],{"class":565},[560,3853,583],{"class":565},[560,3855,3856],{"class":586},"cube",[560,3858,583],{"class":565},[560,3860,736],{"class":565},[560,3862,1413],{"class":573},[560,3864,580],{"class":565},[560,3866,583],{"class":565},[560,3868,3869],{"class":565},"[-",[560,3871,3872],{"class":746},"1.2",[560,3874,1425],{"class":565},[560,3876,892],{"class":746},[560,3878,1425],{"class":565},[560,3880,892],{"class":746},[560,3882,1435],{"class":565},[560,3884,583],{"class":565},[560,3886,592],{"class":565},[560,3888,3889,3891,3893],{"class":562,"line":2687},[560,3890,780],{"class":565},[560,3892,794],{"class":569},[560,3894,710],{"class":565},[560,3896,3897,3899,3901,3903,3905,3907,3909,3911],{"class":562,"line":2709},[560,3898,780],{"class":565},[560,3900,2692],{"class":569},[560,3902,2695],{"class":573},[560,3904,580],{"class":565},[560,3906,583],{"class":565},[560,3908,2702],{"class":586},[560,3910,583],{"class":565},[560,3912,710],{"class":565},[560,3914,3915,3917,3919,3922,3924,3926,3929,3931,3933,3935,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957,3959,3961,3964],{"class":562,"line":2760},[560,3916,780],{"class":565},[560,3918,53],{"class":569},[560,3920,3921],{"class":573}," ref",[560,3923,580],{"class":565},[560,3925,583],{"class":565},[560,3927,3928],{"class":586},"decalRef",[560,3930,583],{"class":565},[560,3932,2728],{"class":573},[560,3934,1145],{"class":565},[560,3936,2733],{"class":573},[560,3938,580],{"class":565},[560,3940,583],{"class":565},[560,3942,3779],{"class":606},[560,3944,1073],{"class":565},[560,3946,3856],{"class":606},[560,3948,583],{"class":565},[560,3950,736],{"class":565},[560,3952,2747],{"class":573},[560,3954,580],{"class":565},[560,3956,583],{"class":565},[560,3958,2972],{"class":606},[560,3960,583],{"class":565},[560,3962,3963],{"class":573}," editable",[560,3965,710],{"class":565},[560,3967,3968,3970,3972],{"class":562,"line":2769},[560,3969,822],{"class":565},[560,3971,783],{"class":569},[560,3973,592],{"class":565},[560,3975,3976],{"class":562,"line":2778},[560,3977,665],{"emptyLinePlaceholder":516},[560,3979,3981,3983,3985,3987,3989,3991,3994,3996,3998,4000,4002,4004,4006,4008,4010,4012,4014,4016,4018,4020],{"class":562,"line":3980},31,[560,3982,704],{"class":565},[560,3984,783],{"class":569},[560,3986,3849],{"class":573},[560,3988,580],{"class":565},[560,3990,583],{"class":565},[560,3992,3993],{"class":586},"sphere",[560,3995,583],{"class":565},[560,3997,736],{"class":565},[560,3999,1413],{"class":573},[560,4001,580],{"class":565},[560,4003,583],{"class":565},[560,4005,1420],{"class":565},[560,4007,3872],{"class":746},[560,4009,1425],{"class":565},[560,4011,892],{"class":746},[560,4013,1425],{"class":565},[560,4015,892],{"class":746},[560,4017,1435],{"class":565},[560,4019,583],{"class":565},[560,4021,592],{"class":565},[560,4023,4025,4027,4030,4032,4034,4036,4038,4040,4043,4045,4047],{"class":562,"line":4024},32,[560,4026,780],{"class":565},[560,4028,4029],{"class":569},"TresSphereGeometry",[560,4031,736],{"class":565},[560,4033,1943],{"class":573},[560,4035,580],{"class":565},[560,4037,583],{"class":565},[560,4039,1420],{"class":565},[560,4041,4042],{"class":746},"0.7",[560,4044,1435],{"class":565},[560,4046,583],{"class":565},[560,4048,710],{"class":565},[560,4050,4052,4054,4056,4058,4060,4062,4064,4066],{"class":562,"line":4051},33,[560,4053,780],{"class":565},[560,4055,2692],{"class":569},[560,4057,2695],{"class":573},[560,4059,580],{"class":565},[560,4061,583],{"class":565},[560,4063,2702],{"class":586},[560,4065,583],{"class":565},[560,4067,710],{"class":565},[560,4069,4071,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093,4095,4097,4099,4101,4103,4105,4107],{"class":562,"line":4070},34,[560,4072,780],{"class":565},[560,4074,53],{"class":569},[560,4076,2728],{"class":573},[560,4078,1145],{"class":565},[560,4080,2733],{"class":573},[560,4082,580],{"class":565},[560,4084,583],{"class":565},[560,4086,3779],{"class":606},[560,4088,1073],{"class":565},[560,4090,3993],{"class":606},[560,4092,583],{"class":565},[560,4094,736],{"class":565},[560,4096,2747],{"class":573},[560,4098,580],{"class":565},[560,4100,583],{"class":565},[560,4102,2972],{"class":606},[560,4104,583],{"class":565},[560,4106,3963],{"class":573},[560,4108,710],{"class":565},[560,4110,4112,4114,4116],{"class":562,"line":4111},35,[560,4113,822],{"class":565},[560,4115,783],{"class":569},[560,4117,592],{"class":565},[560,4119,4121,4123,4125],{"class":562,"line":4120},36,[560,4122,832],{"class":565},[560,4124,684],{"class":569},[560,4126,592],{"class":565},[560,4128,4130,4132,4134],{"class":562,"line":4129},37,[560,4131,655],{"class":565},[560,4133,673],{"class":569},[560,4135,592],{"class":565},[4137,4138,4140],"h3",{"id":4139},"how-the-wiring-works","How the wiring works",[2207,4142,4143,4154,4163,4172],{},[2210,4144,4145,4148,4149,4151,4152,1073],{},[540,4146,4147],{},"v-model:data=\"layout.cube\""," — each ",[540,4150,2204],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[540,4153,2990],{},[2210,4155,4156,4159,4160,4162],{},[540,4157,4158],{},"ref=\"decalRef\""," — grab a reference to any ",[540,4161,2204],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2210,4164,4165,4168,4169,4171],{},[540,4166,4167],{},"session = decalRef.value?.editor"," — the editor session powers\n",[540,4170,2219],{},". Pass it through.",[2210,4173,4174,4177,4178,4180],{},[540,4175,4176],{},":data=\"layout\""," on ",[540,4179,2219],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[2000,4182,4183],{},[536,4184,4185,4186,4189,4190,4193],{},"The overlay is full-viewport (",[540,4187,4188],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[540,4191,4192],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[549,4195,4197],{"className":551,"code":4196,"language":556,"meta":508,"style":508},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... \u002F>\n \u003CTresCanvas>...\u003C\u002FTresCanvas>\n\u003C\u002Fdiv>\n",[540,4198,4199,4238,4243,4248],{"__ignoreMap":508},[560,4200,4201,4203,4206,4209,4211,4213,4216,4218,4221,4224,4227,4229,4232,4234,4236],{"class":562,"line":509},[560,4202,566],{"class":565},[560,4204,4205],{"class":569},"div",[560,4207,4208],{"class":573}," style",[560,4210,580],{"class":565},[560,4212,583],{"class":565},[560,4214,1413],{"class":4215},"sqsOY",[560,4217,1145],{"class":565},[560,4219,4220],{"class":606}," relative",[560,4222,4223],{"class":565},";",[560,4225,4226],{"class":4215}," height",[560,4228,1145],{"class":565},[560,4230,4231],{"class":746}," 500px",[560,4233,4223],{"class":565},[560,4235,583],{"class":565},[560,4237,592],{"class":565},[560,4239,4240],{"class":562,"line":510},[560,4241,4242],{"class":606}," \u003CDecalDebugUI contained ... \u002F>\n",[560,4244,4245],{"class":562,"line":631},[560,4246,4247],{"class":606}," \u003CTresCanvas>...\u003C\u002FTresCanvas>\n",[560,4249,4250,4252,4254],{"class":562,"line":652},[560,4251,655],{"class":565},[560,4253,4205],{"class":569},[560,4255,592],{"class":565},[545,4257,3394],{"id":4258},"import-export",[536,4260,4261,4262,4265,4266,4268],{},"The Export button in the dock auto-downloads the current layout as\n",[540,4263,4264],{},"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,4267,2204],{}," automatically — no extra host code needed.",[549,4270,4272],{"className":551,"code":4271,"language":556,"meta":508,"style":508},"\u003C!-- Custom filename -->\n\u003CDecalDebugUI :export-filename=\"`${sceneName}.json`\" ... \u002F>\n\n\u003C!-- Disable the built-in download — handle export yourself -->\n\u003CDecalDebugUI :export-filename=\"null\" @export=\"postToBackend\" ... \u002F>\n",[540,4273,4274,4279,4310,4314,4319],{"__ignoreMap":508},[560,4275,4276],{"class":562,"line":509},[560,4277,4278],{"class":1136},"\u003C!-- Custom filename -->\n",[560,4280,4281,4283,4285,4287,4290,4292,4295,4298,4300,4302,4305,4308],{"class":562,"line":510},[560,4282,566],{"class":565},[560,4284,3740],{"class":569},[560,4286,736],{"class":565},[560,4288,4289],{"class":573},"export-filename",[560,4291,580],{"class":565},[560,4293,4294],{"class":565},"\"`${",[560,4296,4297],{"class":606},"sceneName",[560,4299,2422],{"class":565},[560,4301,2799],{"class":586},[560,4303,4304],{"class":565},"`\"",[560,4306,4307],{"class":565}," ...",[560,4309,710],{"class":565},[560,4311,4312],{"class":562,"line":631},[560,4313,665],{"emptyLinePlaceholder":516},[560,4315,4316],{"class":562,"line":652},[560,4317,4318],{"class":1136},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[560,4320,4321,4323,4325,4327,4329,4331,4333,4335,4337,4340,4342,4344,4346,4349,4351,4353],{"class":562,"line":662},[560,4322,566],{"class":565},[560,4324,3740],{"class":569},[560,4326,736],{"class":565},[560,4328,4289],{"class":573},[560,4330,580],{"class":565},[560,4332,583],{"class":565},[560,4334,3671],{"class":565},[560,4336,583],{"class":565},[560,4338,4339],{"class":565}," @",[560,4341,1121],{"class":573},[560,4343,580],{"class":565},[560,4345,583],{"class":565},[560,4347,4348],{"class":606},"postToBackend",[560,4350,583],{"class":565},[560,4352,4307],{"class":565},[560,4354,710],{"class":565},[545,4356,4358,4359,3355],{"id":4357},"targeting-a-loaded-model-glb","Targeting a loaded model (",[540,4360,4361],{},".glb",[536,4363,4364,4365,4367,4368,4374,4375,4378,4379,4381],{},"A ",[540,4366,2204],{}," can be a ",[1627,4369,4370,4371],{},"direct child of ",[540,4372,4373],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[540,4376,4377],{},"Mesh"," — so the\nbehaviour depends on what the ",[540,4380,4373],{}," wraps.",[4137,4383,4385,4386,4389,4390],{"id":4384},"when-object-is-a-mesh","When ",[540,4387,4388],{},":object"," is a ",[540,4391,4377],{},[536,4393,4394],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[549,4396,4398],{"className":551,"code":4397,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs\u002Fcientos'\n\nconst { nodes } = useGLTF('\u002Fmodels\u002Fhelmet.glb', { draco: true })\n\u002F\u002F nodes.Helmet is a Mesh in this asset.\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Helmet\" :object=\"nodes.Helmet\">\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable \u002F>\n \u003C\u002Fprimitive>\n\u003C\u002Ftemplate>\n",[540,4399,4400,4420,4443,4447,4488,4493,4501,4505,4513,4545,4586,4594],{"__ignoreMap":508},[560,4401,4402,4404,4406,4408,4410,4412,4414,4416,4418],{"class":562,"line":509},[560,4403,566],{"class":565},[560,4405,570],{"class":569},[560,4407,574],{"class":573},[560,4409,577],{"class":573},[560,4411,580],{"class":565},[560,4413,583],{"class":565},[560,4415,587],{"class":586},[560,4417,583],{"class":565},[560,4419,592],{"class":565},[560,4421,4422,4424,4426,4428,4430,4433,4435,4437,4439,4441],{"class":562,"line":510},[560,4423,600],{"class":599},[560,4425,603],{"class":565},[560,4427,2344],{"class":606},[560,4429,610],{"class":565},[560,4431,4432],{"class":606}," useGLTF",[560,4434,616],{"class":565},[560,4436,619],{"class":599},[560,4438,622],{"class":565},[560,4440,625],{"class":586},[560,4442,628],{"class":565},[560,4444,4445],{"class":562,"line":631},[560,4446,665],{"emptyLinePlaceholder":516},[560,4448,4449,4451,4453,4456,4458,4460,4462,4464,4466,4469,4471,4473,4475,4478,4480,4484,4486],{"class":562,"line":652},[560,4450,2409],{"class":573},[560,4452,603],{"class":565},[560,4454,4455],{"class":606}," nodes ",[560,4457,2422],{"class":565},[560,4459,2425],{"class":565},[560,4461,4432],{"class":2428},[560,4463,2431],{"class":606},[560,4465,2434],{"class":565},[560,4467,4468],{"class":586},"\u002Fmodels\u002Fhelmet.glb",[560,4470,2434],{"class":565},[560,4472,610],{"class":565},[560,4474,603],{"class":565},[560,4476,4477],{"class":569}," draco",[560,4479,1145],{"class":565},[560,4481,4483],{"class":4482},"sfNiH"," true",[560,4485,616],{"class":565},[560,4487,2442],{"class":606},[560,4489,4490],{"class":562,"line":662},[560,4491,4492],{"class":1136},"\u002F\u002F nodes.Helmet is a Mesh in this asset.\n",[560,4494,4495,4497,4499],{"class":562,"line":668},[560,4496,655],{"class":565},[560,4498,570],{"class":569},[560,4500,592],{"class":565},[560,4502,4503],{"class":562,"line":678},[560,4504,665],{"emptyLinePlaceholder":516},[560,4506,4507,4509,4511],{"class":562,"line":701},[560,4508,566],{"class":565},[560,4510,673],{"class":569},[560,4512,592],{"class":565},[560,4514,4515,4517,4520,4522,4524,4526,4529,4531,4534,4536,4538,4541,4543],{"class":562,"line":713},[560,4516,681],{"class":565},[560,4518,4519],{"class":569},"primitive",[560,4521,2716],{"class":573},[560,4523,580],{"class":565},[560,4525,583],{"class":565},[560,4527,4528],{"class":586},"nodes?.Helmet",[560,4530,583],{"class":565},[560,4532,4533],{"class":573}," :object",[560,4535,580],{"class":565},[560,4537,583],{"class":565},[560,4539,4540],{"class":586},"nodes.Helmet",[560,4542,583],{"class":565},[560,4544,592],{"class":565},[560,4546,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4568,4570,4572,4574,4576,4578,4580,4582,4584],{"class":562,"line":723},[560,4548,704],{"class":565},[560,4550,53],{"class":569},[560,4552,2728],{"class":573},[560,4554,1145],{"class":565},[560,4556,2733],{"class":573},[560,4558,580],{"class":565},[560,4560,583],{"class":565},[560,4562,3779],{"class":606},[560,4564,1073],{"class":565},[560,4566,4567],{"class":606},"helmet",[560,4569,583],{"class":565},[560,4571,736],{"class":565},[560,4573,2747],{"class":573},[560,4575,580],{"class":565},[560,4577,583],{"class":565},[560,4579,2972],{"class":606},[560,4581,583],{"class":565},[560,4583,3963],{"class":573},[560,4585,710],{"class":565},[560,4587,4588,4590,4592],{"class":562,"line":728},[560,4589,832],{"class":565},[560,4591,4519],{"class":569},[560,4593,592],{"class":565},[560,4595,4596,4598,4600],{"class":562,"line":754},[560,4597,655],{"class":565},[560,4599,673],{"class":569},[560,4601,592],{"class":565},[2000,4603,4604],{},[536,4605,4606,4607,4609,4610,4613],{},"The resolved parent is the ",[540,4608,4373],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[540,4611,4612],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4137,4615,4385,4617,4389,4619],{"id":4616},"when-object-is-a-group",[540,4618,4388],{},[540,4620,4621],{},"Group",[536,4623,4624,4625,4627,4628,4630,4631,4633,4634,1145],{},"A named node in a ",[540,4626,4361],{}," is often a ",[540,4629,4621],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[540,4632,3671],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[540,4635,4636],{},":mesh",[549,4638,4640],{"className":551,"code":4639,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs\u002Fcientos'\nimport { computed } from 'vue'\nimport type { Mesh } from 'three'\n\nconst { nodes } = useGLTF('\u002Fmodels\u002Fmug.glb', { draco: true })\n\u002F\u002F 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\u002Fscript>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Mug\" :object=\"nodes.Mug\">\n \u003CDecal v-model:data=\"layout.mug\" :map=\"textures\" :mesh=\"body\" editable \u002F>\n \u003C\u002Fprimitive>\n\u003C\u002Ftemplate>\n",[540,4641,4642,4662,4684,4702,4724,4728,4765,4770,4794,4842,4846,4854,4858,4866,4896,4951,4959],{"__ignoreMap":508},[560,4643,4644,4646,4648,4650,4652,4654,4656,4658,4660],{"class":562,"line":509},[560,4645,566],{"class":565},[560,4647,570],{"class":569},[560,4649,574],{"class":573},[560,4651,577],{"class":573},[560,4653,580],{"class":565},[560,4655,583],{"class":565},[560,4657,587],{"class":586},[560,4659,583],{"class":565},[560,4661,592],{"class":565},[560,4663,4664,4666,4668,4670,4672,4674,4676,4678,4680,4682],{"class":562,"line":510},[560,4665,600],{"class":599},[560,4667,603],{"class":565},[560,4669,2344],{"class":606},[560,4671,610],{"class":565},[560,4673,4432],{"class":606},[560,4675,616],{"class":565},[560,4677,619],{"class":599},[560,4679,622],{"class":565},[560,4681,625],{"class":586},[560,4683,628],{"class":565},[560,4685,4686,4688,4690,4692,4694,4696,4698,4700],{"class":562,"line":631},[560,4687,600],{"class":599},[560,4689,603],{"class":565},[560,4691,3504],{"class":606},[560,4693,616],{"class":565},[560,4695,619],{"class":599},[560,4697,622],{"class":565},[560,4699,556],{"class":586},[560,4701,628],{"class":565},[560,4703,4704,4706,4708,4710,4713,4715,4717,4719,4722],{"class":562,"line":652},[560,4705,600],{"class":599},[560,4707,3457],{"class":599},[560,4709,603],{"class":565},[560,4711,4712],{"class":606}," Mesh",[560,4714,616],{"class":565},[560,4716,619],{"class":599},[560,4718,622],{"class":565},[560,4720,4721],{"class":586},"three",[560,4723,628],{"class":565},[560,4725,4726],{"class":562,"line":662},[560,4727,665],{"emptyLinePlaceholder":516},[560,4729,4730,4732,4734,4736,4738,4740,4742,4744,4746,4749,4751,4753,4755,4757,4759,4761,4763],{"class":562,"line":668},[560,4731,2409],{"class":573},[560,4733,603],{"class":565},[560,4735,4455],{"class":606},[560,4737,2422],{"class":565},[560,4739,2425],{"class":565},[560,4741,4432],{"class":2428},[560,4743,2431],{"class":606},[560,4745,2434],{"class":565},[560,4747,4748],{"class":586},"\u002Fmodels\u002Fmug.glb",[560,4750,2434],{"class":565},[560,4752,610],{"class":565},[560,4754,603],{"class":565},[560,4756,4477],{"class":569},[560,4758,1145],{"class":565},[560,4760,4483],{"class":4482},[560,4762,616],{"class":565},[560,4764,2442],{"class":606},[560,4766,4767],{"class":562,"line":678},[560,4768,4769],{"class":1136},"\u002F\u002F nodes.Mug is a Group — pick the child you want to decal.\n",[560,4771,4772,4774,4777,4779,4781,4783,4785,4787,4789,4791],{"class":562,"line":701},[560,4773,2409],{"class":573},[560,4775,4776],{"class":606}," body ",[560,4778,580],{"class":565},[560,4780,3504],{"class":2428},[560,4782,566],{"class":565},[560,4784,4377],{"class":1127},[560,4786,3660],{"class":565},[560,4788,3663],{"class":1127},[560,4790,3666],{"class":565},[560,4792,4793],{"class":606},"(\n",[560,4795,4796,4799,4801,4804,4806,4808,4810,4813,4815,4818,4820,4822,4825,4827,4830,4833,4835,4837,4839],{"class":562,"line":713},[560,4797,4798],{"class":565}," ()",[560,4800,3692],{"class":573},[560,4802,4803],{"class":606}," (nodes",[560,4805,1073],{"class":565},[560,4807,3700],{"class":606},[560,4809,3703],{"class":565},[560,4811,4812],{"class":606},"Mug",[560,4814,3703],{"class":565},[560,4816,4817],{"class":2428},"getObjectByName",[560,4819,2431],{"class":606},[560,4821,2434],{"class":565},[560,4823,4824],{"class":586},"Body",[560,4826,2434],{"class":565},[560,4828,4829],{"class":606},") ",[560,4831,4832],{"class":599},"as",[560,4834,4712],{"class":1127},[560,4836,4829],{"class":606},[560,4838,3709],{"class":565},[560,4840,4841],{"class":565}," null,\n",[560,4843,4844],{"class":562,"line":723},[560,4845,2442],{"class":606},[560,4847,4848,4850,4852],{"class":562,"line":728},[560,4849,655],{"class":565},[560,4851,570],{"class":569},[560,4853,592],{"class":565},[560,4855,4856],{"class":562,"line":754},[560,4857,665],{"emptyLinePlaceholder":516},[560,4859,4860,4862,4864],{"class":562,"line":554},[560,4861,566],{"class":565},[560,4863,673],{"class":569},[560,4865,592],{"class":565},[560,4867,4868,4870,4872,4874,4876,4878,4881,4883,4885,4887,4889,4892,4894],{"class":562,"line":777},[560,4869,681],{"class":565},[560,4871,4519],{"class":569},[560,4873,2716],{"class":573},[560,4875,580],{"class":565},[560,4877,583],{"class":565},[560,4879,4880],{"class":586},"nodes?.Mug",[560,4882,583],{"class":565},[560,4884,4533],{"class":573},[560,4886,580],{"class":565},[560,4888,583],{"class":565},[560,4890,4891],{"class":586},"nodes.Mug",[560,4893,583],{"class":565},[560,4895,592],{"class":565},[560,4897,4898,4900,4902,4904,4906,4908,4910,4912,4914,4916,4919,4921,4923,4925,4927,4929,4931,4933,4935,4938,4940,4942,4945,4947,4949],{"class":562,"line":788},[560,4899,704],{"class":565},[560,4901,53],{"class":569},[560,4903,2728],{"class":573},[560,4905,1145],{"class":565},[560,4907,2733],{"class":573},[560,4909,580],{"class":565},[560,4911,583],{"class":565},[560,4913,3779],{"class":606},[560,4915,1073],{"class":565},[560,4917,4918],{"class":606},"mug",[560,4920,583],{"class":565},[560,4922,736],{"class":565},[560,4924,2747],{"class":573},[560,4926,580],{"class":565},[560,4928,583],{"class":565},[560,4930,2972],{"class":606},[560,4932,583],{"class":565},[560,4934,736],{"class":565},[560,4936,4937],{"class":573},"mesh",[560,4939,580],{"class":565},[560,4941,583],{"class":565},[560,4943,4944],{"class":606},"body",[560,4946,583],{"class":565},[560,4948,3963],{"class":573},[560,4950,710],{"class":565},[560,4952,4953,4955,4957],{"class":562,"line":799},[560,4954,832],{"class":565},[560,4956,4519],{"class":569},[560,4958,592],{"class":565},[560,4960,4961,4963,4965],{"class":562,"line":809},[560,4962,655],{"class":565},[560,4964,673],{"class":569},[560,4966,592],{"class":565},[4137,4968,4970],{"id":4969},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[536,4972,4973,4974,4980,4981,4988,4989,4991,4992,1145],{},"Alternatively, ",[1627,4975,4976,4977,4979],{},"wrap a ",[540,4978,2304],{}," 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",[1067,4982,4985],{"href":4983,"rel":4984},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Fcomposables.html#usegraph",[1071],[540,4986,4987],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[540,4990,2304],{}," around its\n",[540,4993,4994],{},":geometry",[549,4996,4998],{"className":551,"code":4997,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs\u002Fcore'\nimport { Decal } from '@tresjs\u002Fcientos'\nimport { GLTFLoader } from 'three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js'\nimport { computed } from 'vue'\n\nconst { state: model } = useLoader(GLTFLoader, '\u002Fmodels\u002Fhelmet.glb')\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\nconst nodes = computed(() => graph.value?.nodes)\n\u003C\u002Fscript>\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\" \u002F>\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n",[540,4999,5000,5020,5044,5062,5082,5100,5104,5136,5165,5179,5207,5215,5219,5227,5234,5258,5271,5294,5299,5330,5370,5378],{"__ignoreMap":508},[560,5001,5002,5004,5006,5008,5010,5012,5014,5016,5018],{"class":562,"line":509},[560,5003,566],{"class":565},[560,5005,570],{"class":569},[560,5007,574],{"class":573},[560,5009,577],{"class":573},[560,5011,580],{"class":565},[560,5013,583],{"class":565},[560,5015,587],{"class":586},[560,5017,583],{"class":565},[560,5019,592],{"class":565},[560,5021,5022,5024,5026,5029,5031,5034,5036,5038,5040,5042],{"class":562,"line":510},[560,5023,600],{"class":599},[560,5025,603],{"class":565},[560,5027,5028],{"class":606}," useGraph",[560,5030,610],{"class":565},[560,5032,5033],{"class":606}," useLoader",[560,5035,616],{"class":565},[560,5037,619],{"class":599},[560,5039,622],{"class":565},[560,5041,647],{"class":586},[560,5043,628],{"class":565},[560,5045,5046,5048,5050,5052,5054,5056,5058,5060],{"class":562,"line":631},[560,5047,600],{"class":599},[560,5049,603],{"class":565},[560,5051,2344],{"class":606},[560,5053,616],{"class":565},[560,5055,619],{"class":599},[560,5057,622],{"class":565},[560,5059,625],{"class":586},[560,5061,628],{"class":565},[560,5063,5064,5066,5068,5071,5073,5075,5077,5080],{"class":562,"line":652},[560,5065,600],{"class":599},[560,5067,603],{"class":565},[560,5069,5070],{"class":606}," GLTFLoader",[560,5072,616],{"class":565},[560,5074,619],{"class":599},[560,5076,622],{"class":565},[560,5078,5079],{"class":586},"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js",[560,5081,628],{"class":565},[560,5083,5084,5086,5088,5090,5092,5094,5096,5098],{"class":562,"line":662},[560,5085,600],{"class":599},[560,5087,603],{"class":565},[560,5089,3504],{"class":606},[560,5091,616],{"class":565},[560,5093,619],{"class":599},[560,5095,622],{"class":565},[560,5097,556],{"class":586},[560,5099,628],{"class":565},[560,5101,5102],{"class":562,"line":668},[560,5103,665],{"emptyLinePlaceholder":516},[560,5105,5106,5108,5110,5112,5114,5117,5119,5121,5123,5126,5128,5130,5132,5134],{"class":562,"line":678},[560,5107,2409],{"class":573},[560,5109,603],{"class":565},[560,5111,2414],{"class":569},[560,5113,1145],{"class":565},[560,5115,5116],{"class":606}," model ",[560,5118,2422],{"class":565},[560,5120,2425],{"class":565},[560,5122,5033],{"class":2428},[560,5124,5125],{"class":606},"(GLTFLoader",[560,5127,610],{"class":565},[560,5129,622],{"class":565},[560,5131,4468],{"class":586},[560,5133,2434],{"class":565},[560,5135,2442],{"class":606},[560,5137,5138,5140,5143,5145,5147,5149,5151,5153,5156,5158,5160,5162],{"class":562,"line":701},[560,5139,2409],{"class":573},[560,5141,5142],{"class":606}," scene ",[560,5144,580],{"class":565},[560,5146,3504],{"class":2428},[560,5148,2431],{"class":606},[560,5150,3689],{"class":565},[560,5152,3692],{"class":573},[560,5154,5155],{"class":606}," model",[560,5157,1073],{"class":565},[560,5159,3700],{"class":606},[560,5161,3703],{"class":565},[560,5163,5164],{"class":606},"scene)\n",[560,5166,5167,5169,5172,5174,5176],{"class":562,"line":713},[560,5168,2409],{"class":573},[560,5170,5171],{"class":606}," graph ",[560,5173,580],{"class":565},[560,5175,5028],{"class":2428},[560,5177,5178],{"class":606},"(scene)\n",[560,5180,5181,5183,5185,5187,5189,5191,5193,5195,5198,5200,5202,5204],{"class":562,"line":723},[560,5182,2409],{"class":573},[560,5184,4455],{"class":606},[560,5186,580],{"class":565},[560,5188,3504],{"class":2428},[560,5190,2431],{"class":606},[560,5192,3689],{"class":565},[560,5194,3692],{"class":573},[560,5196,5197],{"class":606}," graph",[560,5199,1073],{"class":565},[560,5201,3700],{"class":606},[560,5203,3703],{"class":565},[560,5205,5206],{"class":606},"nodes)\n",[560,5208,5209,5211,5213],{"class":562,"line":728},[560,5210,655],{"class":565},[560,5212,570],{"class":569},[560,5214,592],{"class":565},[560,5216,5217],{"class":562,"line":754},[560,5218,665],{"emptyLinePlaceholder":516},[560,5220,5221,5223,5225],{"class":562,"line":554},[560,5222,566],{"class":565},[560,5224,673],{"class":569},[560,5226,592],{"class":565},[560,5228,5229,5231],{"class":562,"line":777},[560,5230,681],{"class":565},[560,5232,5233],{"class":569},"TresMesh\n",[560,5235,5236,5239,5241,5243,5246,5248,5251,5253,5256],{"class":562,"line":788},[560,5237,5238],{"class":599}," v-if",[560,5240,580],{"class":565},[560,5242,583],{"class":565},[560,5244,5245],{"class":606},"nodes",[560,5247,3703],{"class":565},[560,5249,5250],{"class":606},"Helmet",[560,5252,1073],{"class":565},[560,5254,5255],{"class":606},"geometry",[560,5257,3146],{"class":565},[560,5259,5260,5263,5265,5267,5269],{"class":562,"line":799},[560,5261,5262],{"class":573}," name",[560,5264,580],{"class":565},[560,5266,583],{"class":565},[560,5268,4567],{"class":586},[560,5270,3146],{"class":565},[560,5272,5273,5276,5278,5280,5282,5284,5286,5288,5290,5292],{"class":562,"line":809},[560,5274,5275],{"class":565}," :",[560,5277,5255],{"class":573},[560,5279,580],{"class":565},[560,5281,583],{"class":565},[560,5283,5245],{"class":606},[560,5285,1073],{"class":565},[560,5287,5250],{"class":606},[560,5289,1073],{"class":565},[560,5291,5255],{"class":606},[560,5293,3146],{"class":565},[560,5295,5296],{"class":562,"line":555},[560,5297,5298],{"class":565}," >\n",[560,5300,5301,5303,5305,5307,5309,5311,5314,5316,5319,5321,5323,5326,5328],{"class":562,"line":829},[560,5302,704],{"class":565},[560,5304,4519],{"class":569},[560,5306,4533],{"class":573},[560,5308,580],{"class":565},[560,5310,583],{"class":565},[560,5312,5313],{"class":586},"nodes.Helmet.material",[560,5315,583],{"class":565},[560,5317,5318],{"class":573}," attach",[560,5320,580],{"class":565},[560,5322,583],{"class":565},[560,5324,5325],{"class":586},"material",[560,5327,583],{"class":565},[560,5329,710],{"class":565},[560,5331,5332,5334,5336,5338,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360,5362,5364,5366,5368],{"class":562,"line":839},[560,5333,704],{"class":565},[560,5335,53],{"class":569},[560,5337,2728],{"class":573},[560,5339,1145],{"class":565},[560,5341,2733],{"class":573},[560,5343,580],{"class":565},[560,5345,583],{"class":565},[560,5347,3779],{"class":606},[560,5349,1073],{"class":565},[560,5351,4567],{"class":606},[560,5353,583],{"class":565},[560,5355,736],{"class":565},[560,5357,2747],{"class":573},[560,5359,580],{"class":565},[560,5361,583],{"class":565},[560,5363,2972],{"class":606},[560,5365,583],{"class":565},[560,5367,3963],{"class":573},[560,5369,710],{"class":565},[560,5371,5372,5374,5376],{"class":562,"line":2617},[560,5373,832],{"class":565},[560,5375,783],{"class":569},[560,5377,592],{"class":565},[560,5379,5380,5382,5384],{"class":562,"line":2626},[560,5381,655],{"class":565},[560,5383,673],{"class":569},[560,5385,592],{"class":565},[536,5387,5388,5389,3078,5391,5393,5394,5396,5397,5399],{},"The mesh's ",[540,5390,5255],{},[540,5392,5325],{}," come from the loaded model; the\n",[540,5395,2204],{}," lives inside a regular ",[540,5398,2304],{}," with a clean scene-graph\nparent.",[3214,5401,5402],{},[536,5403,5404,5405,5407,5408,5411,5412,5415,5416,5419],{},"A saved decal's ",[540,5406,1413],{}," is stored in ",[1627,5409,5410],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1627,5413,5414],{},"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,5417,5418],{},"\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,5421,5423],{"id":5422},"json-schema","JSON schema",[536,5425,5426,5427,5429,5430,5433,5434,5436,5437,1073],{},"Each entry in the ",[540,5428,2733],{}," array follows the ",[540,5431,5432],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[540,5435,2219],{}," groups these by mesh name as\n",[540,5438,5439],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5441,5442,5443,5444,5448],"details",{},"\n ",[5445,5446,5447],"summary",{},"Full schema",[549,5449,5451],{"className":1113,"code":5450,"language":587,"meta":508,"style":508},"interface DecalJsonEntry {\n id: string \u002F\u002F stable UUID\n position: [number, number, number] \u002F\u002F target-mesh local space (raycast hit, baked into the parent's frame)\n orientation: [number, number, number] \u002F\u002F Euler XYZ\n size: [number, number, number] \u002F\u002F extents along X\u002FY; Z = projection depth\n zIndex: number \u002F\u002F per-mesh layer order, ≥ 0\n map: string | null \u002F\u002F matches a texture's .name\n flipX?: boolean \u002F\u002F omitted when false\n flipY?: boolean \u002F\u002F omitted when false\n color?: string \u002F\u002F hex (e.g. '#ff6b35'), omitted when no tint\n opacity?: number \u002F\u002F 0..1, omitted when 1\n visible?: boolean \u002F\u002F omitted when true; false hides the decal\n}\n\ntype DecalLayout = Record\u003Cstring, DecalJsonEntry[]>\n\u002F\u002F { sphere: [...], cube: [...] }\n",[540,5452,5453,5462,5475,5502,5526,5550,5562,5578,5592,5603,5615,5627,5639,5643,5647,5672],{"__ignoreMap":508},[560,5454,5455,5458,5460],{"class":562,"line":509},[560,5456,5457],{"class":573},"interface",[560,5459,3467],{"class":1127},[560,5461,1131],{"class":565},[560,5463,5464,5467,5469,5472],{"class":562,"line":510},[560,5465,5466],{"class":569}," id",[560,5468,1145],{"class":565},[560,5470,5471],{"class":1127}," string",[560,5473,5474],{"class":1136}," \u002F\u002F stable UUID\n",[560,5476,5477,5480,5482,5484,5487,5489,5492,5494,5496,5499],{"class":562,"line":631},[560,5478,5479],{"class":569}," position",[560,5481,1145],{"class":565},[560,5483,2492],{"class":606},[560,5485,5486],{"class":1127},"number",[560,5488,610],{"class":565},[560,5490,5491],{"class":1127}," number",[560,5493,610],{"class":565},[560,5495,5491],{"class":1127},[560,5497,5498],{"class":606},"] ",[560,5500,5501],{"class":1136},"\u002F\u002F target-mesh local space (raycast hit, baked into the parent's frame)\n",[560,5503,5504,5507,5509,5511,5513,5515,5517,5519,5521,5523],{"class":562,"line":652},[560,5505,5506],{"class":569}," orientation",[560,5508,1145],{"class":565},[560,5510,2492],{"class":606},[560,5512,5486],{"class":1127},[560,5514,610],{"class":565},[560,5516,5491],{"class":1127},[560,5518,610],{"class":565},[560,5520,5491],{"class":1127},[560,5522,5498],{"class":606},[560,5524,5525],{"class":1136},"\u002F\u002F Euler XYZ\n",[560,5527,5528,5531,5533,5535,5537,5539,5541,5543,5545,5547],{"class":562,"line":662},[560,5529,5530],{"class":569}," size",[560,5532,1145],{"class":565},[560,5534,2492],{"class":606},[560,5536,5486],{"class":1127},[560,5538,610],{"class":565},[560,5540,5491],{"class":1127},[560,5542,610],{"class":565},[560,5544,5491],{"class":1127},[560,5546,5498],{"class":606},[560,5548,5549],{"class":1136},"\u002F\u002F extents along X\u002FY; Z = projection depth\n",[560,5551,5552,5555,5557,5559],{"class":562,"line":668},[560,5553,5554],{"class":569}," zIndex",[560,5556,1145],{"class":565},[560,5558,5491],{"class":1127},[560,5560,5561],{"class":1136}," \u002F\u002F per-mesh layer order, ≥ 0\n",[560,5563,5564,5567,5569,5571,5573,5575],{"class":562,"line":678},[560,5565,5566],{"class":569}," map",[560,5568,1145],{"class":565},[560,5570,5471],{"class":1127},[560,5572,3660],{"class":565},[560,5574,3663],{"class":1127},[560,5576,5577],{"class":1136}," \u002F\u002F matches a texture's .name\n",[560,5579,5580,5583,5586,5589],{"class":562,"line":701},[560,5581,5582],{"class":569}," flipX",[560,5584,5585],{"class":565},"?:",[560,5587,5588],{"class":1127}," boolean",[560,5590,5591],{"class":1136}," \u002F\u002F omitted when false\n",[560,5593,5594,5597,5599,5601],{"class":562,"line":713},[560,5595,5596],{"class":569}," flipY",[560,5598,5585],{"class":565},[560,5600,5588],{"class":1127},[560,5602,5591],{"class":1136},[560,5604,5605,5608,5610,5612],{"class":562,"line":723},[560,5606,5607],{"class":569}," color",[560,5609,5585],{"class":565},[560,5611,5471],{"class":1127},[560,5613,5614],{"class":1136}," \u002F\u002F hex (e.g. '#ff6b35'), omitted when no tint\n",[560,5616,5617,5620,5622,5624],{"class":562,"line":728},[560,5618,5619],{"class":569}," opacity",[560,5621,5585],{"class":565},[560,5623,5491],{"class":1127},[560,5625,5626],{"class":1136}," \u002F\u002F 0..1, omitted when 1\n",[560,5628,5629,5632,5634,5636],{"class":562,"line":754},[560,5630,5631],{"class":569}," visible",[560,5633,5585],{"class":565},[560,5635,5588],{"class":1127},[560,5637,5638],{"class":1136}," \u002F\u002F omitted when true; false hides the decal\n",[560,5640,5641],{"class":562,"line":554},[560,5642,1252],{"class":565},[560,5644,5645],{"class":562,"line":777},[560,5646,665],{"emptyLinePlaceholder":516},[560,5648,5649,5652,5655,5657,5660,5662,5664,5666,5668,5670],{"class":562,"line":788},[560,5650,5651],{"class":573},"type",[560,5653,5654],{"class":1127}," DecalLayout",[560,5656,2425],{"class":565},[560,5658,5659],{"class":1127}," Record",[560,5661,566],{"class":565},[560,5663,3587],{"class":1127},[560,5665,610],{"class":565},[560,5667,3467],{"class":1127},[560,5669,3594],{"class":606},[560,5671,592],{"class":565},[560,5673,5674],{"class":562,"line":799},[560,5675,5676],{"class":1136},"\u002F\u002F { sphere: [...], cube: [...] }\n",[545,5678,5680,5682],{"id":5679},"decal-props",[540,5681,2204],{}," props",[854,5684,5685,5695],{},[857,5686,5687],{},[860,5688,5689,5691,5693],{},[863,5690,865],{},[863,5692,868],{},[863,5694,871],{},[873,5696,5697,5713,5733,5768,5786,5800,5814,5833,5861],{},[860,5698,5699,5703,5709],{},[878,5700,5701],{},[1627,5702,2733],{},[878,5704,5705,5706,5708],{},"Two-way list of stamped decals (use with ",[540,5707,2264],{},").",[878,5710,5711],{},[540,5712,3594],{},[860,5714,5715,5719,5729],{},[878,5716,5717],{},[1627,5718,2747],{},[878,5720,5721,5722,5724,5725,5728],{},"A single ",[540,5723,2243],{}," or array of ",[540,5726,5727],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[878,5730,5731],{},[540,5732,3671],{},[860,5734,5735,5739,5764],{},[878,5736,5737],{},[1627,5738,4937],{},[878,5740,5741,5742,5744,5745,5748,5749,5751,5752,5755,5756,3351,5758,3351,5761,5763],{},"Optional explicit target mesh (",[540,5743,4377],{}," or ",[540,5746,5747],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[540,5750,2204],{}," is auto-resolved via a hidden anchor ",[540,5753,5754],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[540,5757,1413],{},[540,5759,5760],{},"rotation",[540,5762,739],{}," via the scene-graph hierarchy.",[878,5765,5766],{},[540,5767,3671],{},[860,5769,5770,5774,5782],{},[878,5771,5772],{},[1627,5773,3201],{},[878,5775,4385,5776,5778,5779,5781],{},[540,5777,888],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[540,5780,2219],{}," interactions to work on this Decal.",[878,5783,5784],{},[540,5785,898],{},[860,5787,5788,5793,5796],{},[878,5789,5790],{},[1627,5791,5792],{},"baseSize",[878,5794,5795],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[878,5797,5798],{},[540,5799,1847],{},[860,5801,5802,5807,5810],{},[878,5803,5804],{},[1627,5805,5806],{},"baseOffset",[878,5808,5809],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[878,5811,5812],{},[540,5813,1861],{},[860,5815,5816,5820,5829],{},[878,5817,5818],{},[1627,5819,3111],{},[878,5821,5822,5823,5825,5826,5828],{},"Extra offset added per ",[540,5824,2286],{}," step on top of ",[540,5827,5806],{},". Increase if stacked decals still flicker.",[878,5830,5831],{},[540,5832,1476],{},[860,5834,5835,5840,5856],{},[878,5836,5837],{},[1627,5838,5839],{},"cullThreshold",[878,5841,5842,5843,5846,5847,5852,5853,5855],{},"Drops projected triangles whose face normal makes an angle steeper than ",[540,5844,5845],{},"acos(threshold)"," with the projector. Mitigates ",[1067,5848,5851],{"href":5849,"rel":5850},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fissues\u002F21187",[1071],"#21187",". Pass ",[540,5854,892],{}," to disable.",[878,5857,5858],{},[540,5859,5860],{},"0.2",[860,5862,5863,5868,5871],{},[878,5864,5865],{},[1627,5866,5867],{},"edgeColor",[878,5869,5870],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[878,5872,5873],{},[540,5874,5875],{},"#0000ff",[545,5877,5879,5881],{"id":5878},"decal-events",[540,5880,2204],{}," events",[854,5883,5884,5896],{},[857,5885,5886],{},[860,5887,5888,5891,5894],{},[863,5889,5890],{},"Event",[863,5892,5893],{},"Payload",[863,5895,868],{},[873,5897,5898,5913,5928,5942,5962,5980,5997],{},[860,5899,5900,5905,5910],{},[878,5901,5902],{},[540,5903,5904],{},"update:data",[878,5906,5907],{},[540,5908,5909],{},"DecalJsonEntry[]",[878,5911,5912],{},"v-model partner — fires whenever the JSON list changes.",[860,5914,5915,5920,5925],{},[878,5916,5917],{},[540,5918,5919],{},"add",[878,5921,5922],{},[540,5923,5924],{},"DecalEntry",[878,5926,5927],{},"A new decal has been committed (create mode → confirm).",[860,5929,5930,5935,5939],{},[878,5931,5932],{},[540,5933,5934],{},"update",[878,5936,5937],{},[540,5938,5924],{},[878,5940,5941],{},"An existing decal has been committed (update mode → confirm).",[860,5943,5944,5949,5953],{},[878,5945,5946],{},[540,5947,5948],{},"delete",[878,5950,5951],{},[540,5952,5924],{},[878,5954,5955,5956,3351,5959,5708],{},"A decal has been removed (delete button or ",[540,5957,5958],{},"Del",[540,5960,5961],{},"Backspace",[860,5963,5964,5969,5973],{},[878,5965,5966],{},[540,5967,5968],{},"select",[878,5970,5971],{},[540,5972,5924],{},[878,5974,5975,5976,5979],{},"Edition began on ",[540,5977,5978],{},"entry"," (panel click, 3D click, or programmatic).",[860,5981,5982,5987,5990],{},[878,5983,5984],{},[540,5985,5986],{},"cancel",[878,5988,5989],{},"—",[878,5991,5992,5993,5996],{},"Edition was aborted without commit (",[540,5994,5995],{},"Esc",", click-outside in create mode).",[860,5998,5999,6004,6009],{},[878,6000,6001],{},[540,6002,6003],{},"decalClick",[878,6005,6006],{},[540,6007,6008],{},"{ entry: DecalEntry, event: MouseEvent }",[878,6010,6011,6012,6014,6015,1073],{},"Fires on click of any stamped decal, even when ",[540,6013,3201],{}," is ",[540,6016,898],{},[545,6018,6020,6022,6023,3355],{"id":6019},"decal-exposed-via-ref",[540,6021,2204],{}," exposed (via ",[540,6024,6025],{},"ref",[536,6027,6028,6029,6032],{},"The template ref resolves to ",[540,6030,6031],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[549,6034,6036],{"className":1113,"code":6035,"language":587,"meta":508,"style":508},"import type { DecalImperativeApi } from '@tresjs\u002Fcientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[540,6037,6038,6059,6063],{"__ignoreMap":508},[560,6039,6040,6042,6044,6046,6049,6051,6053,6055,6057],{"class":562,"line":509},[560,6041,600],{"class":599},[560,6043,3457],{"class":599},[560,6045,603],{"class":565},[560,6047,6048],{"class":606}," DecalImperativeApi",[560,6050,616],{"class":565},[560,6052,619],{"class":599},[560,6054,622],{"class":565},[560,6056,625],{"class":586},[560,6058,628],{"class":565},[560,6060,6061],{"class":562,"line":510},[560,6062,665],{"emptyLinePlaceholder":516},[560,6064,6065,6067,6069,6071,6073,6075,6077,6079,6081,6083,6085,6087],{"class":562,"line":631},[560,6066,2409],{"class":573},[560,6068,3641],{"class":606},[560,6070,580],{"class":565},[560,6072,3921],{"class":2428},[560,6074,566],{"class":565},[560,6076,6031],{"class":1127},[560,6078,3660],{"class":565},[560,6080,3663],{"class":1127},[560,6082,3666],{"class":565},[560,6084,2431],{"class":606},[560,6086,3671],{"class":565},[560,6088,2442],{"class":606},[854,6090,6091,6103],{},[857,6092,6093],{},[860,6094,6095,6098,6101],{},[863,6096,6097],{},"Property",[863,6099,6100],{},"Type",[863,6102,868],{},[873,6104,6105,6123,6141,6159,6174],{},[860,6106,6107,6112,6117],{},[878,6108,6109],{},[540,6110,6111],{},"editor",[878,6113,6114],{},[540,6115,6116],{},"DecalEditorSession",[878,6118,6119,6120,1073],{},"The canvas-shared editor session. Pass it to ",[540,6121,6122],{},"\u003CDecalDebugUI :session>",[860,6124,6125,6130,6135],{},[878,6126,6127],{},[540,6128,6129],{},"beginEditById",[878,6131,6132],{},[540,6133,6134],{},"(id: string) => boolean",[878,6136,6137,6138,6140],{},"Programmatically start editing a specific decal. Returns ",[540,6139,898],{}," if the id is unknown.",[860,6142,6143,6148,6153],{},[878,6144,6145],{},[540,6146,6147],{},"commit",[878,6149,6150],{},[540,6151,6152],{},"() => void",[878,6154,6155,6156,5708],{},"Commit the in-flight edit (same as ",[540,6157,6158],{},"Enter",[860,6160,6161,6165,6169],{},[878,6162,6163],{},[540,6164,5986],{},[878,6166,6167],{},[540,6168,6152],{},[878,6170,6171,6172,5708],{},"Abort the in-flight edit (same as ",[540,6173,5995],{},[860,6175,6176,6181,6185],{},[878,6177,6178],{},[540,6179,6180],{},"remove",[878,6182,6183],{},[540,6184,6152],{},[878,6186,6187,6188,5708],{},"Delete the currently edited decal (same as ",[540,6189,5958],{},[545,6191,6193,5682],{"id":6192},"decaldebugui-props",[540,6194,2219],{},[854,6196,6197,6207],{},[857,6198,6199],{},[860,6200,6201,6203,6205],{},[863,6202,865],{},[863,6204,868],{},[863,6206,871],{},[873,6208,6209,6232,6257,6270,6290,6305,6328],{},[860,6210,6211,6215,6228],{},[878,6212,6213],{},[1627,6214,3745],{},[878,6216,6217,6220,6221,6223,6224,6227],{},[540,6218,6219],{},"DecalEditorSession | null"," — obtained from any ",[540,6222,2204],{}," ref via ",[540,6225,6226],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[878,6229,6230],{},[540,6231,3671],{},[860,6233,6234,6238,6252],{},[878,6235,6236],{},[1627,6237,2733],{},[878,6239,6240,6241,6244,6245,6248,6249,6251],{},"Mesh-name-keyed map of decal slices — ",[540,6242,6243],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[540,6246,6247],{},"\u003CTresMesh name=\"...\">"," whose child ",[540,6250,2204],{}," owns the slice.",[878,6253,6254],{},[540,6255,6256],{},"{}",[860,6258,6259,6263,6266],{},[878,6260,6261],{},[1627,6262,2972],{},[878,6264,6265],{},"The full texture palette shown in the dock's picker.",[878,6267,6268],{},[540,6269,3594],{},[860,6271,6272,6277,6286],{},[878,6273,6274],{},[1627,6275,6276],{},"theme",[878,6278,6279,5744,6282,6285],{},[540,6280,6281],{},"'light'",[540,6283,6284],{},"'dark'"," — overlay theme tokens.",[878,6287,6288],{},[540,6289,6281],{},[860,6291,6292,6297,6300],{},[878,6293,6294],{},[1627,6295,6296],{},"snapAngle",[878,6298,6299],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[878,6301,6302],{},[540,6303,6304],{},"15",[860,6306,6307,6312,6324],{},[878,6308,6309],{},[1627,6310,6311],{},"exportFilename",[878,6313,6314,6315,5852,6317,6319,6320,6323],{},"Filename for the built-in JSON download. When omitted, defaults to ",[540,6316,4264],{},[540,6318,3671],{}," to skip the auto-download (the ",[540,6321,6322],{},"@export"," event still fires).",[878,6325,6326],{},[540,6327,4264],{},[860,6329,6330,6334,6337],{},[878,6331,6332],{},[1627,6333,4192],{},[878,6335,6336],{},"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.",[878,6338,6339],{},[540,6340,898],{},[545,6342,6344,5881],{"id":6343},"decaldebugui-events",[540,6345,2219],{},[854,6347,6348,6358],{},[857,6349,6350],{},[860,6351,6352,6354,6356],{},[863,6353,5890],{},[863,6355,5893],{},[863,6357,868],{},[873,6359,6360,6374],{},[860,6361,6362,6366,6371],{},[878,6363,6364],{},[540,6365,1121],{},[878,6367,6368],{},[540,6369,6370],{},"DecalLayout",[878,6372,6373],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[860,6375,6376,6380,6384],{},[878,6377,6378],{},[540,6379,600],{},[878,6381,6382],{},[540,6383,6370],{},[878,6385,6386],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[545,6388,6390],{"id":6389},"caveats","Caveats",[2207,6392,6393,6408,6425,6441],{},[2210,6394,6395,6396,6399,6400,6403,6404,6407],{},"✨ The overlay sits at ",[540,6397,6398],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1627,6401,6402],{},"above"," the canvas by default\n(",[540,6405,6406],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2210,6409,6410,6411,6413,6414,6417,6418,1425,6421,6424],{},"🎨 ",[540,6412,2219],{}," ships its own theme in a global stylesheet under the\n",[540,6415,6416],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[540,6419,6420],{},"--accent",[540,6422,6423],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2210,6426,6427,6428,6431,6432,6434,6435,6437,6438,6440],{},"🔶 Decals are ",[1627,6429,6430],{},"per-canvas"," — if you have multiple ",[540,6433,3212],{}," in your\napp, each one has its own independent session. Pair each ",[540,6436,2219],{},"\nwith the right ",[540,6439,3745],{}," (from one of the Decals inside that canvas).",[2210,6442,6443,6444,1073],{},"🧩 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,6445,6446],{},":mesh=\"meshRef\"",[545,6448,6450],{"id":6449},"limitations","Limitations",[2000,6452,6453,6467,6474,6517],{},[536,6454,6455,6456,6459,6460,3351,6462,3351,6464,6466],{},"Decal vertices are baked into the ",[1627,6457,6458],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[540,6461,1413],{},[540,6463,5760],{},[540,6465,739],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[536,6468,6469,6470,6473],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1627,6471,6472],{},"not"," followed:",[2207,6475,6476,6489,6497,6504],{},[2210,6477,6478,6483,6484,1073],{},[1627,6479,6480],{},[540,6481,6482],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1067,6485,6488],{"href":6486,"rel":6487},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fissues\u002F7926",[1071],"three.js#7926",[2210,6490,6491,6496],{},[1627,6492,6493],{},[540,6494,6495],{},"morphAttributes"," on the parent are ignored.",[2210,6498,6499,6500,6503],{},"Direct mutations of the parent's ",[540,6501,6502],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2210,6505,6506,6507,6511,6512,6514,6515,1073],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1067,6508,6510],{"href":5849,"rel":6509},[1071],"three.js#21187",") —\nmitigated by the ",[540,6513,5839],{}," prop, default ",[540,6516,5860],{},[536,6518,6519,6521],{},[540,6520,2204],{}," warns once per parent mesh when it detects these conditions.",[545,6523,6525],{"id":6524},"keyboard-shortcuts","Keyboard shortcuts",[854,6527,6528,6538],{},[857,6529,6530],{},[860,6531,6532,6535],{},[863,6533,6534],{},"Shortcut",[863,6536,6537],{},"Action",[873,6539,6540,6549,6558,6570,6583,6596],{},[860,6541,6542,6546],{},[878,6543,6544],{},[540,6545,6158],{},[878,6547,6548],{},"Confirm the in-flight edit",[860,6550,6551,6555],{},[878,6552,6553],{},[540,6554,5995],{},[878,6556,6557],{},"Cancel (revert updates, drop pending placements)",[860,6559,6560,6567],{},[878,6561,6562,3351,6564],{},[540,6563,5958],{},[540,6565,6566],{},"⌫",[878,6568,6569],{},"Delete the edited decal (or cancel a create)",[860,6571,6572,6580],{},[878,6573,6574,3351,6577],{},[540,6575,6576],{},"⌘Z",[540,6578,6579],{},"Ctrl+Z",[878,6581,6582],{},"Undo",[860,6584,6585,6593],{},[878,6586,6587,3351,6590],{},[540,6588,6589],{},"⇧⌘Z",[540,6591,6592],{},"Ctrl+⇧Z",[878,6594,6595],{},"Redo",[860,6597,6598,6601],{},[878,6599,6600],{},"Click outside",[878,6602,6603],{},"Auto-commit an in-flight update; cancel a create",[545,6605,6607,6608,3355],{"id":6606},"programmatic-api-usedecaleditor","Programmatic API (",[540,6609,6610],{},"useDecalEditor",[536,6612,6613,6614,6616,6617,6619,6620,6622,6623,6625],{},"Skip ",[540,6615,2219],{}," entirely or augment it with custom panels —\n",[540,6618,2232],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[540,6621,3212],{}," (after at\nleast one ",[540,6624,2204],{}," has mounted).",[549,6627,6629],{"className":1113,"code":6628,"language":587,"meta":508,"style":508},"import { useDecalEditor } from '@tresjs\u002Fcientos'\n\nconst session = useDecalEditor()\n",[540,6630,6631,6650,6654],{"__ignoreMap":508},[560,6632,6633,6635,6637,6640,6642,6644,6646,6648],{"class":562,"line":509},[560,6634,600],{"class":599},[560,6636,603],{"class":565},[560,6638,6639],{"class":606}," useDecalEditor",[560,6641,616],{"class":565},[560,6643,619],{"class":599},[560,6645,622],{"class":565},[560,6647,625],{"class":586},[560,6649,628],{"class":565},[560,6651,6652],{"class":562,"line":510},[560,6653,665],{"emptyLinePlaceholder":516},[560,6655,6656,6658,6660,6662,6664],{"class":562,"line":631},[560,6657,2409],{"class":573},[560,6659,3680],{"class":606},[560,6661,580],{"class":565},[560,6663,6639],{"class":2428},[560,6665,6666],{"class":606},"()\n",[536,6668,6669,6670,1425,6673,2482,6676,1425,6679,6682,6683,2482,6685,1425,6688,1425,6691,6694,6695,6698,6699,6702,6703,1425,6706,1425,6709,2482,6712,6715],{},"The session exposes reactive state (",[540,6671,6672],{},"editingEntry",[540,6674,6675],{},"editingMode",[540,6677,6678],{},"canUndo",[540,6680,6681],{},"canRedo",", …), by-id mutators (",[540,6684,6129],{},[540,6686,6687],{},"setZIndexById",[540,6689,6690],{},"setVisibilityById",[540,6692,6693],{},"removeById","), batched updates\n(",[540,6696,6697],{},"setMeshData","), commit \u002F delete \u002F cancel listeners, undo \u002F redo, and\na ",[540,6700,6701],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[540,6704,6705],{},"ensureTextureNames",[540,6707,6708],{},"getTextureName",[540,6710,6711],{},"getTextureAspect",[540,6713,6714],{},"invalidateDecalGeometry",") are exported alongside.",[5441,6717,5443,6718,6721,6725,6800,6804,6875,6891,6895,6931,6937,6941,7080,7084,7130,7133,7137,7151,7321,7325],{},[5445,6719,6720],{},"Full API reference",[4137,6722,6724],{"id":6723},"reactive-state","Reactive state",[549,6726,6728],{"className":1113,"code":6727,"language":587,"meta":508,"style":508},"session.editingEntry \u002F\u002F ShallowRef\u003CDecalEntry | null>\nsession.editingMode \u002F\u002F Ref\u003C'create' | 'update' | null>\nsession.lockedMeshUuid \u002F\u002F Ref\u003Cstring | null>\nsession.hoveredEntry \u002F\u002F ShallowRef\u003CDecalEntry | null>\nsession.canUndo \u002F\u002F Ref\u003Cboolean>\nsession.canRedo \u002F\u002F Ref\u003Cboolean>\n",[540,6729,6730,6742,6754,6766,6777,6789],{"__ignoreMap":508},[560,6731,6732,6734,6736,6739],{"class":562,"line":509},[560,6733,3745],{"class":606},[560,6735,1073],{"class":565},[560,6737,6738],{"class":606},"editingEntry ",[560,6740,6741],{"class":1136},"\u002F\u002F ShallowRef\u003CDecalEntry | null>\n",[560,6743,6744,6746,6748,6751],{"class":562,"line":510},[560,6745,3745],{"class":606},[560,6747,1073],{"class":565},[560,6749,6750],{"class":606},"editingMode ",[560,6752,6753],{"class":1136},"\u002F\u002F Ref\u003C'create' | 'update' | null>\n",[560,6755,6756,6758,6760,6763],{"class":562,"line":631},[560,6757,3745],{"class":606},[560,6759,1073],{"class":565},[560,6761,6762],{"class":606},"lockedMeshUuid ",[560,6764,6765],{"class":1136},"\u002F\u002F Ref\u003Cstring | null>\n",[560,6767,6768,6770,6772,6775],{"class":562,"line":652},[560,6769,3745],{"class":606},[560,6771,1073],{"class":565},[560,6773,6774],{"class":606},"hoveredEntry ",[560,6776,6741],{"class":1136},[560,6778,6779,6781,6783,6786],{"class":562,"line":662},[560,6780,3745],{"class":606},[560,6782,1073],{"class":565},[560,6784,6785],{"class":606},"canUndo ",[560,6787,6788],{"class":1136},"\u002F\u002F Ref\u003Cboolean>\n",[560,6790,6791,6793,6795,6798],{"class":562,"line":668},[560,6792,3745],{"class":606},[560,6794,1073],{"class":565},[560,6796,6797],{"class":606},"canRedo ",[560,6799,6788],{"class":1136},[4137,6801,6803],{"id":6802},"mutating-decals-by-id","Mutating decals by id",[549,6805,6807],{"className":1113,"code":6806,"language":587,"meta":508,"style":508},"session.beginEditById(id) \u002F\u002F start editing a placed decal\nsession.setZIndexById(id, newZ) \u002F\u002F reorder one decal\nsession.setVisibilityById(id, false) \u002F\u002F hide \u002F show\nsession.removeById(id) \u002F\u002F delete\n",[540,6808,6809,6823,6842,6862],{"__ignoreMap":508},[560,6810,6811,6813,6815,6817,6820],{"class":562,"line":509},[560,6812,3745],{"class":606},[560,6814,1073],{"class":565},[560,6816,6129],{"class":2428},[560,6818,6819],{"class":606},"(id) ",[560,6821,6822],{"class":1136},"\u002F\u002F start editing a placed decal\n",[560,6824,6825,6827,6829,6831,6834,6836,6839],{"class":562,"line":510},[560,6826,3745],{"class":606},[560,6828,1073],{"class":565},[560,6830,6687],{"class":2428},[560,6832,6833],{"class":606},"(id",[560,6835,610],{"class":565},[560,6837,6838],{"class":606}," newZ) ",[560,6840,6841],{"class":1136},"\u002F\u002F reorder one decal\n",[560,6843,6844,6846,6848,6850,6852,6854,6857,6859],{"class":562,"line":631},[560,6845,3745],{"class":606},[560,6847,1073],{"class":565},[560,6849,6690],{"class":2428},[560,6851,6833],{"class":606},[560,6853,610],{"class":565},[560,6855,6856],{"class":4482}," false",[560,6858,4829],{"class":606},[560,6860,6861],{"class":1136},"\u002F\u002F hide \u002F show\n",[560,6863,6864,6866,6868,6870,6872],{"class":562,"line":652},[560,6865,3745],{"class":606},[560,6867,1073],{"class":565},[560,6869,6693],{"class":2428},[560,6871,6819],{"class":606},[560,6873,6874],{"class":1136},"\u002F\u002F delete\n",[536,6876,6877,6878,6881,6882,6884,6885,6887,6888,6890],{},"When the targeted id matches the ",[1627,6879,6880],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[540,6883,6158],{},", reverted on ",[540,6886,5995],{},").\nOtherwise they update ",[540,6889,2733],{}," immediately and record history.",[4137,6892,6894],{"id":6893},"batched-mesh-updates","Batched mesh updates",[549,6896,6898],{"className":1113,"code":6897,"language":587,"meta":508,"style":508},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[540,6899,6900],{"__ignoreMap":508},[560,6901,6902,6904,6906,6908,6911,6913,6916,6918,6920,6923,6925,6927,6929],{"class":562,"line":509},[560,6903,3745],{"class":606},[560,6905,1073],{"class":565},[560,6907,6697],{"class":2428},[560,6909,6910],{"class":606},"(meshName",[560,6912,610],{"class":565},[560,6914,6915],{"class":606}," nextEntries",[560,6917,610],{"class":565},[560,6919,603],{"class":565},[560,6921,6922],{"class":569}," recordHistory",[560,6924,1145],{"class":565},[560,6926,4483],{"class":4482},[560,6928,616],{"class":565},[560,6930,2442],{"class":606},[536,6932,6933,6934,6936],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[540,6935,6687],{}," calls in the same tick.",[4137,6938,6940],{"id":6939},"listening-to-commits","Listening to commits",[549,6942,6944],{"className":1113,"code":6943,"language":587,"meta":508,"style":508},"const off = session.onCommit((entry, mode) => {\n console.log(mode, entry) \u002F\u002F mode: 'create' | 'update'\n})\nsession.onDelete((entry) => { \u002F* … *\u002F })\nsession.onCancel(() => { \u002F* … *\u002F })\n\n\u002F\u002F All return an unsubscribe function:\nonBeforeUnmount(off)\n",[540,6945,6946,6981,7006,7012,7040,7063,7067,7072],{"__ignoreMap":508},[560,6947,6948,6950,6953,6955,6958,6960,6963,6965,6967,6970,6972,6975,6977,6979],{"class":562,"line":509},[560,6949,2409],{"class":573},[560,6951,6952],{"class":606}," off ",[560,6954,580],{"class":565},[560,6956,6957],{"class":606}," session",[560,6959,1073],{"class":565},[560,6961,6962],{"class":2428},"onCommit",[560,6964,2431],{"class":606},[560,6966,2431],{"class":565},[560,6968,5978],{"class":6969},"sHdIc",[560,6971,610],{"class":565},[560,6973,6974],{"class":6969}," mode",[560,6976,3355],{"class":565},[560,6978,3692],{"class":573},[560,6980,1131],{"class":565},[560,6982,6983,6986,6988,6991,6993,6996,6998,7001,7003],{"class":562,"line":510},[560,6984,6985],{"class":606}," console",[560,6987,1073],{"class":565},[560,6989,6990],{"class":2428},"log",[560,6992,2431],{"class":569},[560,6994,6995],{"class":606},"mode",[560,6997,610],{"class":565},[560,6999,7000],{"class":606}," entry",[560,7002,4829],{"class":569},[560,7004,7005],{"class":1136},"\u002F\u002F mode: 'create' | 'update'\n",[560,7007,7008,7010],{"class":562,"line":631},[560,7009,2422],{"class":565},[560,7011,2442],{"class":606},[560,7013,7014,7016,7018,7021,7023,7025,7027,7029,7031,7033,7036,7038],{"class":562,"line":652},[560,7015,3745],{"class":606},[560,7017,1073],{"class":565},[560,7019,7020],{"class":2428},"onDelete",[560,7022,2431],{"class":606},[560,7024,2431],{"class":565},[560,7026,5978],{"class":6969},[560,7028,3355],{"class":565},[560,7030,3692],{"class":573},[560,7032,603],{"class":565},[560,7034,7035],{"class":1136}," \u002F* … *\u002F",[560,7037,616],{"class":565},[560,7039,2442],{"class":606},[560,7041,7042,7044,7046,7049,7051,7053,7055,7057,7059,7061],{"class":562,"line":662},[560,7043,3745],{"class":606},[560,7045,1073],{"class":565},[560,7047,7048],{"class":2428},"onCancel",[560,7050,2431],{"class":606},[560,7052,3689],{"class":565},[560,7054,3692],{"class":573},[560,7056,603],{"class":565},[560,7058,7035],{"class":1136},[560,7060,616],{"class":565},[560,7062,2442],{"class":606},[560,7064,7065],{"class":562,"line":668},[560,7066,665],{"emptyLinePlaceholder":516},[560,7068,7069],{"class":562,"line":678},[560,7070,7071],{"class":1136},"\u002F\u002F All return an unsubscribe function:\n",[560,7073,7074,7077],{"class":562,"line":701},[560,7075,7076],{"class":2428},"onBeforeUnmount",[560,7078,7079],{"class":606},"(off)\n",[4137,7081,7083],{"id":7082},"undo-redo","Undo \u002F redo",[549,7085,7087],{"className":1113,"code":7086,"language":587,"meta":508,"style":508},"session.canUndo.value \u002F\u002F Ref\u003Cboolean>\nsession.undo() \u002F\u002F returns true if something was undone\nsession.redo()\n",[540,7088,7089,7104,7119],{"__ignoreMap":508},[560,7090,7091,7093,7095,7097,7099,7102],{"class":562,"line":509},[560,7092,3745],{"class":606},[560,7094,1073],{"class":565},[560,7096,6678],{"class":606},[560,7098,1073],{"class":565},[560,7100,7101],{"class":606},"value ",[560,7103,6788],{"class":1136},[560,7105,7106,7108,7110,7113,7116],{"class":562,"line":510},[560,7107,3745],{"class":606},[560,7109,1073],{"class":565},[560,7111,7112],{"class":2428},"undo",[560,7114,7115],{"class":606},"() ",[560,7117,7118],{"class":1136},"\u002F\u002F returns true if something was undone\n",[560,7120,7121,7123,7125,7128],{"class":562,"line":631},[560,7122,3745],{"class":606},[560,7124,1073],{"class":565},[560,7126,7127],{"class":2428},"redo",[560,7129,6666],{"class":606},[536,7131,7132],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4137,7134,7136],{"id":7135},"power-user-external-entries","Power user — external entries",[536,7138,7139,7140,7142,7143,7146,7147,7150],{},"Plug a decal-like object that lives outside a ",[540,7141,2204],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[540,7144,7145],{},"DecalEntryActions"," bundle so the ",[540,7148,7149],{},"*ById"," session methods route to it:",[549,7152,7154],{"className":1113,"code":7153,"language":587,"meta":508,"style":508},"import type { DecalEntryActions } from '@tresjs\u002Fcientos'\n\nsession.registerDecalEntry('decal-7', {\n beginEdit: () => { \u002F* … *\u002F },\n setZIndex: (newZ) => { \u002F* … *\u002F },\n setVisibility: (visible) => { \u002F* … *\u002F },\n remove: () => { \u002F* … *\u002F },\n} satisfies DecalEntryActions)\nonBeforeUnmount(() => session.unregisterDecalEntry('decal-7'))\n",[540,7155,7156,7177,7181,7202,7221,7243,7265,7282,7293],{"__ignoreMap":508},[560,7157,7158,7160,7162,7164,7167,7169,7171,7173,7175],{"class":562,"line":509},[560,7159,600],{"class":599},[560,7161,3457],{"class":599},[560,7163,603],{"class":565},[560,7165,7166],{"class":606}," DecalEntryActions",[560,7168,616],{"class":565},[560,7170,619],{"class":599},[560,7172,622],{"class":565},[560,7174,625],{"class":586},[560,7176,628],{"class":565},[560,7178,7179],{"class":562,"line":510},[560,7180,665],{"emptyLinePlaceholder":516},[560,7182,7183,7185,7187,7189,7191,7193,7196,7198,7200],{"class":562,"line":631},[560,7184,3745],{"class":606},[560,7186,1073],{"class":565},[560,7188,6701],{"class":2428},[560,7190,2431],{"class":606},[560,7192,2434],{"class":565},[560,7194,7195],{"class":586},"decal-7",[560,7197,2434],{"class":565},[560,7199,610],{"class":565},[560,7201,1131],{"class":565},[560,7203,7204,7207,7209,7212,7214,7216,7218],{"class":562,"line":652},[560,7205,7206],{"class":2428}," beginEdit",[560,7208,1145],{"class":565},[560,7210,7211],{"class":565}," ()",[560,7213,3692],{"class":573},[560,7215,603],{"class":565},[560,7217,7035],{"class":1136},[560,7219,7220],{"class":565}," },\n",[560,7222,7223,7226,7228,7230,7233,7235,7237,7239,7241],{"class":562,"line":662},[560,7224,7225],{"class":2428}," setZIndex",[560,7227,1145],{"class":565},[560,7229,3089],{"class":565},[560,7231,7232],{"class":6969},"newZ",[560,7234,3355],{"class":565},[560,7236,3692],{"class":573},[560,7238,603],{"class":565},[560,7240,7035],{"class":1136},[560,7242,7220],{"class":565},[560,7244,7245,7248,7250,7252,7255,7257,7259,7261,7263],{"class":562,"line":668},[560,7246,7247],{"class":2428}," setVisibility",[560,7249,1145],{"class":565},[560,7251,3089],{"class":565},[560,7253,7254],{"class":6969},"visible",[560,7256,3355],{"class":565},[560,7258,3692],{"class":573},[560,7260,603],{"class":565},[560,7262,7035],{"class":1136},[560,7264,7220],{"class":565},[560,7266,7267,7270,7272,7274,7276,7278,7280],{"class":562,"line":678},[560,7268,7269],{"class":2428}," remove",[560,7271,1145],{"class":565},[560,7273,7211],{"class":565},[560,7275,3692],{"class":573},[560,7277,603],{"class":565},[560,7279,7035],{"class":1136},[560,7281,7220],{"class":565},[560,7283,7284,7286,7289,7291],{"class":562,"line":701},[560,7285,2422],{"class":565},[560,7287,7288],{"class":599}," satisfies",[560,7290,7166],{"class":1127},[560,7292,2442],{"class":606},[560,7294,7295,7297,7299,7301,7303,7305,7307,7310,7312,7314,7316,7318],{"class":562,"line":713},[560,7296,7076],{"class":2428},[560,7298,2431],{"class":606},[560,7300,3689],{"class":565},[560,7302,3692],{"class":573},[560,7304,6957],{"class":606},[560,7306,1073],{"class":565},[560,7308,7309],{"class":2428},"unregisterDecalEntry",[560,7311,2431],{"class":606},[560,7313,2434],{"class":565},[560,7315,7195],{"class":586},[560,7317,2434],{"class":565},[560,7319,7320],{"class":606},"))\n",[4137,7322,7324],{"id":7323},"helper-utilities","Helper utilities",[854,7326,7327,7336],{},[857,7328,7329],{},[860,7330,7331,7333],{},[863,7332,315],{},[863,7334,7335],{},"Use",[873,7337,7338,7358,7370,7383],{},[860,7339,7340,7345],{},[878,7341,7342],{},[540,7343,7344],{},"ensureTextureNames(textures)",[878,7346,7347,7348,7350,7351,7354,7355,1073],{},"Back-fills ",[540,7349,2996],{}," from ",[540,7352,7353],{},"userData.name"," or the filename in ",[540,7356,7357],{},"image.src",[860,7359,7360,7365],{},[878,7361,7362],{},[540,7363,7364],{},"getTextureName(texture)",[878,7366,7367,7368,1073],{},"Single-texture variant — returns a stable name or ",[540,7369,3671],{},[860,7371,7372,7377],{},[878,7373,7374],{},[540,7375,7376],{},"getTextureAspect(texture)",[878,7378,7379,7382],{},[540,7380,7381],{},"{ x, y }"," aspect ratio for custom-sized decals.",[860,7384,7385,7390],{},[878,7386,7387],{},[540,7388,7389],{},"invalidateDecalGeometry(mesh)",[878,7391,7392],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1254,7394,7395],{},"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":7397},[7398,7399,7400,7401,7402,7406,7407,7415,7416,7418,7420,7422,7424,7426,7427,7428,7429],{"id":547,"depth":510,"text":15},{"id":2803,"depth":510,"text":2804},{"id":3003,"depth":510,"text":2253},{"id":3097,"depth":510,"text":3098},{"id":3192,"depth":510,"text":7403,"children":7404},"Editable mode + \u003CDecalDebugUI>",[7405],{"id":4139,"depth":631,"text":4140},{"id":4258,"depth":510,"text":3394},{"id":4357,"depth":510,"text":7408,"children":7409},"Targeting a loaded model (.glb)",[7410,7412,7414],{"id":4384,"depth":631,"text":7411},"When :object is a Mesh",{"id":4616,"depth":631,"text":7413},"When :object is a Group",{"id":4969,"depth":631,"text":4970},{"id":5422,"depth":510,"text":5423},{"id":5679,"depth":510,"text":7417},"\u003CDecal> props",{"id":5878,"depth":510,"text":7419},"\u003CDecal> events",{"id":6019,"depth":510,"text":7421},"\u003CDecal> exposed (via ref)",{"id":6192,"depth":510,"text":7423},"\u003CDecalDebugUI> props",{"id":6343,"depth":510,"text":7425},"\u003CDecalDebugUI> events",{"id":6389,"depth":510,"text":6390},{"id":6449,"depth":510,"text":6450},{"id":6524,"depth":510,"text":6525},{"id":6606,"depth":510,"text":7430},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7431},"m2NsvoZvWVNeasT5e5-2uu_pua0zwIEDm3Mk9gA7pc8",{"id":7436,"title":57,"body":7437,"description":7739,"extension":513,"links":514,"meta":7740,"navigation":516,"path":58,"seo":7741,"stem":59,"__hash__":7742},"docs\u002F2.api\u002F1.abstractions\u002Fedges.md",{"type":501,"value":7438,"toc":7735},[7439,7444,7460,7462,7653,7655,7672,7733],[530,7440,7441],{},[7442,7443],"abstractions-edges",{},[536,7445,2789,7446,7449,7450,7455,7456,7459],{},[540,7447,7448],{},"cientos"," package provides an abstraction of ",[1067,7451,7454],{"href":7452,"rel":7453},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FEdgesGeometry",[1071],"EdgesGeometry"," from Three.js, ",[540,7457,7458],{},"\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,7461,15],{"id":547},[549,7463,7466],{"className":551,"code":7464,"highlights":7465,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Box, Edges, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CBox>\n \u003CTresMeshBasicMaterial \u002F>\n \u003CEdges \u002F>\n \u003C\u002FBox>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[631,754],[540,7467,7468,7488,7506,7534,7542,7546,7554,7562,7595,7603,7611,7620,7629,7637,7645],{"__ignoreMap":508},[560,7469,7470,7472,7474,7476,7478,7480,7482,7484,7486],{"class":562,"line":509},[560,7471,566],{"class":565},[560,7473,570],{"class":569},[560,7475,574],{"class":573},[560,7477,577],{"class":573},[560,7479,580],{"class":565},[560,7481,583],{"class":565},[560,7483,587],{"class":586},[560,7485,583],{"class":565},[560,7487,592],{"class":565},[560,7489,7490,7492,7494,7496,7498,7500,7502,7504],{"class":562,"line":510},[560,7491,600],{"class":599},[560,7493,603],{"class":565},[560,7495,638],{"class":606},[560,7497,616],{"class":565},[560,7499,619],{"class":599},[560,7501,622],{"class":565},[560,7503,647],{"class":586},[560,7505,628],{"class":565},[560,7507,7509,7511,7513,7515,7517,7520,7522,7524,7526,7528,7530,7532],{"class":7508,"line":631},[562,596],[560,7510,600],{"class":599},[560,7512,603],{"class":565},[560,7514,1323],{"class":606},[560,7516,610],{"class":565},[560,7518,7519],{"class":606}," Edges",[560,7521,610],{"class":565},[560,7523,613],{"class":606},[560,7525,616],{"class":565},[560,7527,619],{"class":599},[560,7529,622],{"class":565},[560,7531,625],{"class":586},[560,7533,628],{"class":565},[560,7535,7536,7538,7540],{"class":562,"line":652},[560,7537,655],{"class":565},[560,7539,570],{"class":569},[560,7541,592],{"class":565},[560,7543,7544],{"class":562,"line":662},[560,7545,665],{"emptyLinePlaceholder":516},[560,7547,7548,7550,7552],{"class":562,"line":668},[560,7549,566],{"class":565},[560,7551,673],{"class":569},[560,7553,592],{"class":565},[560,7555,7556,7558,7560],{"class":562,"line":678},[560,7557,681],{"class":565},[560,7559,684],{"class":569},[560,7561,592],{"class":565},[560,7563,7564,7566,7568,7570,7572,7574,7576,7578,7580,7582,7584,7586,7589,7591,7593],{"class":562,"line":701},[560,7565,704],{"class":565},[560,7567,707],{"class":569},[560,7569,736],{"class":565},[560,7571,1413],{"class":573},[560,7573,580],{"class":565},[560,7575,583],{"class":565},[560,7577,1420],{"class":565},[560,7579,892],{"class":746},[560,7581,1425],{"class":565},[560,7583,747],{"class":746},[560,7585,1425],{"class":565},[560,7587,7588],{"class":746},"5",[560,7590,1435],{"class":565},[560,7592,583],{"class":565},[560,7594,710],{"class":565},[560,7596,7597,7599,7601],{"class":562,"line":713},[560,7598,704],{"class":565},[560,7600,718],{"class":569},[560,7602,710],{"class":565},[560,7604,7605,7607,7609],{"class":562,"line":723},[560,7606,704],{"class":565},[560,7608,217],{"class":569},[560,7610,592],{"class":565},[560,7612,7613,7615,7618],{"class":562,"line":728},[560,7614,780],{"class":565},[560,7616,7617],{"class":569},"TresMeshBasicMaterial",[560,7619,710],{"class":565},[560,7621,7623,7625,7627],{"class":7622,"line":754},[562,596],[560,7624,780],{"class":565},[560,7626,57],{"class":569},[560,7628,710],{"class":565},[560,7630,7631,7633,7635],{"class":562,"line":554},[560,7632,822],{"class":565},[560,7634,217],{"class":569},[560,7636,592],{"class":565},[560,7638,7639,7641,7643],{"class":562,"line":777},[560,7640,832],{"class":565},[560,7642,684],{"class":569},[560,7644,592],{"class":565},[560,7646,7647,7649,7651],{"class":562,"line":788},[560,7648,655],{"class":565},[560,7650,673],{"class":569},[560,7652,592],{"class":565},[545,7654,849],{"id":848},[536,7656,7657,7659,7660,7665,7666,7671],{},[540,7658,7458],{}," is based on ",[1067,7661,7664],{"href":7662,"rel":7663},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fobjects\u002FLineSegments",[1071],"LineSegments"," & ",[1067,7667,7670],{"href":7668,"rel":7669},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fobjects\u002FLine",[1071],"Line"," and supports all of its props.",[854,7673,7674,7684],{},[857,7675,7676],{},[860,7677,7678,7680,7682],{},[863,7679,865],{"align":924},[863,7681,868],{"align":924},[863,7683,871],{},[873,7685,7686,7717],{},[860,7687,7688,7693,7712],{},[878,7689,7690],{"align":924},[1627,7691,7692],{},"color",[878,7694,7695,7698,7699,7702,7703,2261,7708],{"align":924},[540,7696,7697],{},"THREE.Color"," — Color of the edges. ",[7700,7701],"br",{}," More informations : ",[1067,7704,7707],{"href":7705,"rel":7706},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Finstances-arguments-and-props.html#colors",[1071],"TresColor",[1067,7709,7697],{"href":7710,"rel":7711},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmath\u002FColor",[1071],[878,7713,7714],{},[540,7715,7716],{},"#ff0000",[860,7718,7719,7724,7729],{},[878,7720,7721],{"align":924},[1627,7722,7723],{},"threshold",[878,7725,7726,7728],{"align":924},[540,7727,5486],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[878,7730,7731],{},[540,7732,1847],{},[1254,7734,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":7736},[7737,7738],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7739},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":7744,"title":61,"body":7745,"description":8412,"extension":513,"links":514,"meta":8413,"navigation":516,"path":62,"seo":8414,"stem":63,"__hash__":8415},"docs\u002F2.api\u002F1.abstractions\u002Ffit.md",{"type":501,"value":7746,"toc":8408},[7747,7752,7758,7768,7774,7776,8272,8274,8405],[2289,7748,7749],{},[7750,7751],"abstractions-fit",{},[536,7753,7754,7757],{},[540,7755,7756],{},"\u003CFit \u002F>"," 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,7759,7760,7761,7764,7765,1073],{},"Alternatively, the children can be fit into a ",[540,7762,7763],{},"Box3"," or an ",[540,7766,7767],{},"Object3D",[536,7769,7770,7771,7773],{},"Or the children can simply be resized. With ",[540,7772,7756],{}," the children are scaled relative to the center of their calculated bounding box.",[545,7775,15],{"id":547},[549,7777,7780],{"className":551,"code":7778,"highlights":7779,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Fit, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4F4F4F\">\n \u003CTresPerspectiveCamera :position=\"[1, 1, 1]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CFit>\n \u003CTresMesh\n v-for=\"(pos, index) in positions\"\n :key=\"index\"\n :position=\"pos\"\n :args=\"[geom, mat]\"\n \u002F>\n \u003C\u002FFit>\n \u003CTresGridHelper :args=\"[1, 1]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,839,2709],[540,7781,7782,7802,7826,7844,7868,7872,7891,7933,7971,7998,8003,8007,8023,8038,8046,8050,8058,8077,8109,8117,8126,8132,8159,8175,8189,8213,8218,8227,8256,8264],{"__ignoreMap":508},[560,7783,7784,7786,7788,7790,7792,7794,7796,7798,7800],{"class":562,"line":509},[560,7785,566],{"class":565},[560,7787,570],{"class":569},[560,7789,574],{"class":573},[560,7791,577],{"class":573},[560,7793,580],{"class":565},[560,7795,583],{"class":565},[560,7797,587],{"class":586},[560,7799,583],{"class":565},[560,7801,592],{"class":565},[560,7803,7805,7807,7809,7812,7814,7816,7818,7820,7822,7824],{"class":7804,"line":510},[562,596],[560,7806,600],{"class":599},[560,7808,603],{"class":565},[560,7810,7811],{"class":606}," Fit",[560,7813,610],{"class":565},[560,7815,613],{"class":606},[560,7817,616],{"class":565},[560,7819,619],{"class":599},[560,7821,622],{"class":565},[560,7823,625],{"class":586},[560,7825,628],{"class":565},[560,7827,7828,7830,7832,7834,7836,7838,7840,7842],{"class":562,"line":631},[560,7829,600],{"class":599},[560,7831,603],{"class":565},[560,7833,638],{"class":606},[560,7835,616],{"class":565},[560,7837,619],{"class":599},[560,7839,622],{"class":565},[560,7841,647],{"class":586},[560,7843,628],{"class":565},[560,7845,7846,7848,7850,7853,7855,7858,7860,7862,7864,7866],{"class":562,"line":652},[560,7847,600],{"class":599},[560,7849,603],{"class":565},[560,7851,7852],{"class":606}," BoxGeometry",[560,7854,610],{"class":565},[560,7856,7857],{"class":606}," MeshNormalMaterial",[560,7859,616],{"class":565},[560,7861,619],{"class":599},[560,7863,622],{"class":565},[560,7865,4721],{"class":586},[560,7867,628],{"class":565},[560,7869,7870],{"class":562,"line":662},[560,7871,665],{"emptyLinePlaceholder":516},[560,7873,7874,7876,7879,7881,7883,7886,7888],{"class":562,"line":668},[560,7875,2409],{"class":573},[560,7877,7878],{"class":606}," positions",[560,7880,1145],{"class":565},[560,7882,5491],{"class":1127},[560,7884,7885],{"class":606},"[][] ",[560,7887,580],{"class":565},[560,7889,7890],{"class":606}," []\n",[560,7892,7893,7896,7898,7901,7904,7906,7909,7911,7913,7916,7919,7921,7923,7926,7929,7931],{"class":562,"line":678},[560,7894,7895],{"class":599},"for",[560,7897,3089],{"class":606},[560,7899,7900],{"class":573},"let",[560,7902,7903],{"class":606}," y ",[560,7905,580],{"class":565},[560,7907,7908],{"class":746}," 100",[560,7910,4223],{"class":565},[560,7912,7903],{"class":606},[560,7914,7915],{"class":565},"\u003C=",[560,7917,7918],{"class":746}," 120",[560,7920,4223],{"class":565},[560,7922,7903],{"class":606},[560,7924,7925],{"class":565},"+=",[560,7927,7928],{"class":746}," 10",[560,7930,4829],{"class":606},[560,7932,3275],{"class":565},[560,7934,7935,7938,7940,7942,7945,7947,7949,7951,7953,7956,7958,7960,7962,7965,7967,7969],{"class":562,"line":701},[560,7936,7937],{"class":599}," for",[560,7939,3089],{"class":569},[560,7941,7900],{"class":573},[560,7943,7944],{"class":606}," x",[560,7946,2425],{"class":565},[560,7948,7908],{"class":746},[560,7950,4223],{"class":565},[560,7952,7944],{"class":606},[560,7954,7955],{"class":565}," \u003C=",[560,7957,7918],{"class":746},[560,7959,4223],{"class":565},[560,7961,7944],{"class":606},[560,7963,7964],{"class":565}," +=",[560,7966,7928],{"class":746},[560,7968,4829],{"class":569},[560,7970,3275],{"class":565},[560,7972,7973,7976,7978,7981,7983,7986,7988,7991,7993,7996],{"class":562,"line":713},[560,7974,7975],{"class":606}," positions",[560,7977,1073],{"class":565},[560,7979,7980],{"class":2428},"push",[560,7982,3544],{"class":569},[560,7984,7985],{"class":606},"x",[560,7987,610],{"class":565},[560,7989,7990],{"class":606}," y",[560,7992,610],{"class":565},[560,7994,7995],{"class":746}," 9999",[560,7997,2594],{"class":569},[560,7999,8000],{"class":562,"line":723},[560,8001,8002],{"class":565}," }\n",[560,8004,8005],{"class":562,"line":728},[560,8006,1252],{"class":565},[560,8008,8009,8011,8014,8016,8019,8021],{"class":562,"line":754},[560,8010,2409],{"class":573},[560,8012,8013],{"class":606}," geom ",[560,8015,580],{"class":565},[560,8017,8018],{"class":565}," new",[560,8020,7852],{"class":2428},[560,8022,6666],{"class":606},[560,8024,8025,8027,8030,8032,8034,8036],{"class":562,"line":554},[560,8026,2409],{"class":573},[560,8028,8029],{"class":606}," mat ",[560,8031,580],{"class":565},[560,8033,8018],{"class":565},[560,8035,7857],{"class":2428},[560,8037,6666],{"class":606},[560,8039,8040,8042,8044],{"class":562,"line":777},[560,8041,655],{"class":565},[560,8043,570],{"class":569},[560,8045,592],{"class":565},[560,8047,8048],{"class":562,"line":788},[560,8049,665],{"emptyLinePlaceholder":516},[560,8051,8052,8054,8056],{"class":562,"line":799},[560,8053,566],{"class":565},[560,8055,673],{"class":569},[560,8057,592],{"class":565},[560,8059,8060,8062,8064,8066,8068,8070,8073,8075],{"class":562,"line":809},[560,8061,681],{"class":565},[560,8063,684],{"class":569},[560,8065,687],{"class":573},[560,8067,580],{"class":565},[560,8069,583],{"class":565},[560,8071,8072],{"class":586},"#4F4F4F",[560,8074,583],{"class":565},[560,8076,592],{"class":565},[560,8078,8079,8081,8083,8085,8087,8089,8091,8093,8095,8097,8099,8101,8103,8105,8107],{"class":562,"line":555},[560,8080,704],{"class":565},[560,8082,707],{"class":569},[560,8084,736],{"class":565},[560,8086,1413],{"class":573},[560,8088,580],{"class":565},[560,8090,583],{"class":565},[560,8092,1420],{"class":565},[560,8094,1847],{"class":746},[560,8096,1425],{"class":565},[560,8098,1847],{"class":746},[560,8100,1425],{"class":565},[560,8102,1847],{"class":746},[560,8104,1435],{"class":565},[560,8106,583],{"class":565},[560,8108,710],{"class":565},[560,8110,8111,8113,8115],{"class":562,"line":829},[560,8112,704],{"class":565},[560,8114,718],{"class":569},[560,8116,710],{"class":565},[560,8118,8120,8122,8124],{"class":8119,"line":839},[562,596],[560,8121,704],{"class":565},[560,8123,61],{"class":569},[560,8125,592],{"class":565},[560,8127,8128,8130],{"class":562,"line":2617},[560,8129,780],{"class":565},[560,8131,5233],{"class":569},[560,8133,8134,8137,8139,8141,8143,8146,8148,8151,8154,8157],{"class":562,"line":2626},[560,8135,8136],{"class":599}," v-for",[560,8138,580],{"class":565},[560,8140,583],{"class":565},[560,8142,2431],{"class":565},[560,8144,8145],{"class":606},"pos",[560,8147,1425],{"class":565},[560,8149,8150],{"class":606},"index",[560,8152,8153],{"class":565},") in ",[560,8155,8156],{"class":606},"positions",[560,8158,3146],{"class":565},[560,8160,8161,8164,8167,8169,8171,8173],{"class":562,"line":2660},[560,8162,8163],{"class":565}," :",[560,8165,8166],{"class":573},"key",[560,8168,580],{"class":565},[560,8170,583],{"class":565},[560,8172,8150],{"class":606},[560,8174,3146],{"class":565},[560,8176,8177,8179,8181,8183,8185,8187],{"class":562,"line":2669},[560,8178,8163],{"class":565},[560,8180,1413],{"class":573},[560,8182,580],{"class":565},[560,8184,583],{"class":565},[560,8186,8145],{"class":606},[560,8188,3146],{"class":565},[560,8190,8191,8193,8195,8197,8199,8201,8204,8206,8209,8211],{"class":562,"line":2678},[560,8192,8163],{"class":565},[560,8194,1943],{"class":573},[560,8196,580],{"class":565},[560,8198,583],{"class":565},[560,8200,1420],{"class":565},[560,8202,8203],{"class":606},"geom",[560,8205,1425],{"class":565},[560,8207,8208],{"class":606},"mat",[560,8210,1435],{"class":565},[560,8212,3146],{"class":565},[560,8214,8215],{"class":562,"line":2687},[560,8216,8217],{"class":565}," \u002F>\n",[560,8219,8221,8223,8225],{"class":8220,"line":2709},[562,596],[560,8222,822],{"class":565},[560,8224,61],{"class":569},[560,8226,592],{"class":565},[560,8228,8229,8231,8234,8236,8238,8240,8242,8244,8246,8248,8250,8252,8254],{"class":562,"line":2760},[560,8230,704],{"class":565},[560,8232,8233],{"class":569},"TresGridHelper",[560,8235,736],{"class":565},[560,8237,1943],{"class":573},[560,8239,580],{"class":565},[560,8241,583],{"class":565},[560,8243,1420],{"class":565},[560,8245,1847],{"class":746},[560,8247,1425],{"class":565},[560,8249,1847],{"class":746},[560,8251,1435],{"class":565},[560,8253,583],{"class":565},[560,8255,710],{"class":565},[560,8257,8258,8260,8262],{"class":562,"line":2769},[560,8259,832],{"class":565},[560,8261,684],{"class":569},[560,8263,592],{"class":565},[560,8265,8266,8268,8270],{"class":562,"line":2778},[560,8267,655],{"class":565},[560,8269,673],{"class":569},[560,8271,592],{"class":565},[545,8273,849],{"id":848},[854,8275,8276,8285],{},[857,8277,8278],{},[860,8279,8280,8283],{},[863,8281,8282],{"align":924},"Name",[863,8284,868],{"align":924},[873,8286,8287,8381],{},[860,8288,8289,8294],{},[878,8290,8291],{"align":924},[1627,8292,8293],{},"into",[878,8295,885,8296,8298,8299,8373,8375,8376,8378],{"align":924},[540,8297,8293],{}," is:",[2207,8300,8301,8310,8318,8326,8334,8345,8352],{},[2210,8302,8303,8304,8306,8307,8309],{},"omitted or explicitly ",[540,8305,1106],{},": position\u002Fscale children to fit into a 1 × 1 × 1 ",[540,8308,7763],{}," at world origin.",[2210,8311,8312,8314,8315,8317],{},[540,8313,3671],{},": turn off ",[540,8316,7756],{},"; reset scale\u002Fposition of children.",[2210,8319,8320,8322,8323,1073],{},[540,8321,5486],{},": convert argument to ",[540,8324,8325],{},"Vector3(number, number, number)",[2210,8327,8328,8322,8331,1073],{},[540,8329,8330],{},"[number, number, number]",[540,8332,8333],{},"Vector3",[2210,8335,8336,8338,8339,8341,8342,8344],{},[540,8337,8333],{},": position\u002Fscale children to fit inside a ",[540,8340,7763],{}," of size ",[540,8343,8333],{}," at target objects' cumulative center.",[2210,8346,8347,8349,8350,1073],{},[540,8348,7763],{},": position\u002Fscale children to fit inside ",[540,8351,7763],{},[2210,8353,8354,8356,8357,8359,8360,8359,8367,8369,8370,8372],{},[540,8355,7767],{},": position\u002Fscale children to fit inside calculated ",[540,8358,7763],{},". ",[1067,8361,1065,8364],{"href":8362,"rel":8363},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmath\u002FBox3.setFromObject",[1071],[540,8365,8366],{},"THREE.Box3.setFromObject",[540,8368,7756],{}," must not contain the ",[540,8371,7767],{}," and vice-versa.",[7700,8374],{},"default:",[7700,8377],{},[540,8379,8380],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[860,8382,8383,8387],{},[878,8384,8385],{"align":924},[1627,8386,1062],{},[878,8388,8389,8397,8399,8375,8401,8403],{"align":924},[1067,8390,1065,8392,8394,8395],{"href":1069,"rel":8391},[1071],[540,8393,1062],{}," argument in ",[540,8396,8366],{},[7700,8398],{},[7700,8400],{},[7700,8402],{},[540,8404,898],{},[1254,8406,8407],{},"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":8409},[8410,8411],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8412},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":8417,"title":65,"body":8418,"description":9666,"extension":513,"links":514,"meta":9667,"navigation":516,"path":66,"seo":9668,"stem":67,"__hash__":9669},"docs\u002F2.api\u002F1.abstractions\u002Finstances.md",{"type":501,"value":8419,"toc":9652},[8420,8425,8447,8464,8466,8904,8916,8920,8932,9000,9004,9007,9064,9068,9071,9084,9087,9091,9094,9169,9173,9188,9258,9286,9293,9297,9306,9356,9359,9363,9366,9384,9390,9393,9433,9449,9451,9454,9540,9549,9551,9630,9640,9649],[530,8421,8422],{},[8423,8424],"abstractions-instances",{},[536,8426,8427,8428,8431,8432,3078,8435,8438,8439,8442,8443,8446],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[540,8429,8430],{},"\u003CInstances \u002F>"," owns a single ",[540,8433,8434],{},"THREE.InstancedMesh",[540,8436,8437],{},"\u003CInstance \u002F>"," is a\nplaceholder that registers itself with it, so a ",[540,8440,8441],{},"v-for"," of a thousand nodes costs ",[1627,8444,8445],{},"one"," drawcall.",[536,8448,8449,8450,8452,8453,8455,8456,8459,8460,8463],{},"An ",[540,8451,8437],{}," behaves like any other node in the graph: give it ",[540,8454,1413],{},", nest it under a\ngroup, animate that group, toggle it with ",[540,8457,8458],{},"v-if",", listen for ",[540,8461,8462],{},"@click"," on one of them.",[545,8465,15],{"id":547},[549,8467,8470],{"className":551,"code":8468,"highlights":8469,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Instance, Instances } from '@tresjs\u002Fcientos'\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 \u002F 30) - 15])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[14, 10, 14]\" \u002F>\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 \u002F>\n \u003C\u002FInstances>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[631,777,799,809,555,829,839,2617],[540,8471,8472,8492,8510,8535,8558,8562,8591,8606,8610,8703,8711,8715,8723,8731,8765,8797,8805,8830,8845,8860,8875,8880,8888,8896],{"__ignoreMap":508},[560,8473,8474,8476,8478,8480,8482,8484,8486,8488,8490],{"class":562,"line":509},[560,8475,566],{"class":565},[560,8477,570],{"class":569},[560,8479,574],{"class":573},[560,8481,577],{"class":573},[560,8483,580],{"class":565},[560,8485,583],{"class":565},[560,8487,587],{"class":586},[560,8489,583],{"class":565},[560,8491,592],{"class":565},[560,8493,8494,8496,8498,8500,8502,8504,8506,8508],{"class":562,"line":510},[560,8495,600],{"class":599},[560,8497,603],{"class":565},[560,8499,638],{"class":606},[560,8501,616],{"class":565},[560,8503,619],{"class":599},[560,8505,622],{"class":565},[560,8507,647],{"class":586},[560,8509,628],{"class":565},[560,8511,8513,8515,8517,8520,8522,8525,8527,8529,8531,8533],{"class":8512,"line":631},[562,596],[560,8514,600],{"class":599},[560,8516,603],{"class":565},[560,8518,8519],{"class":606}," Instance",[560,8521,610],{"class":565},[560,8523,8524],{"class":606}," Instances",[560,8526,616],{"class":565},[560,8528,619],{"class":599},[560,8530,622],{"class":565},[560,8532,625],{"class":586},[560,8534,628],{"class":565},[560,8536,8537,8539,8541,8543,8545,8548,8550,8552,8554,8556],{"class":562,"line":652},[560,8538,600],{"class":599},[560,8540,603],{"class":565},[560,8542,7852],{"class":606},[560,8544,610],{"class":565},[560,8546,8547],{"class":606}," MeshStandardMaterial",[560,8549,616],{"class":565},[560,8551,619],{"class":599},[560,8553,622],{"class":565},[560,8555,4721],{"class":586},[560,8557,628],{"class":565},[560,8559,8560],{"class":562,"line":662},[560,8561,665],{"emptyLinePlaceholder":516},[560,8563,8564,8566,8569,8571,8573,8575,8577,8580,8582,8585,8587,8589],{"class":562,"line":668},[560,8565,2409],{"class":573},[560,8567,8568],{"class":606}," geometry ",[560,8570,580],{"class":565},[560,8572,8018],{"class":565},[560,8574,7852],{"class":2428},[560,8576,2431],{"class":606},[560,8578,8579],{"class":746},"0.35",[560,8581,610],{"class":565},[560,8583,8584],{"class":746}," 0.35",[560,8586,610],{"class":565},[560,8588,8584],{"class":746},[560,8590,2442],{"class":606},[560,8592,8593,8595,8598,8600,8602,8604],{"class":562,"line":678},[560,8594,2409],{"class":573},[560,8596,8597],{"class":606}," material ",[560,8599,580],{"class":565},[560,8601,8018],{"class":565},[560,8603,8547],{"class":2428},[560,8605,6666],{"class":606},[560,8607,8608],{"class":562,"line":701},[560,8609,665],{"emptyLinePlaceholder":516},[560,8611,8612,8614,8617,8619,8622,8624,8627,8629,8632,8635,8637,8640,8643,8645,8648,8650,8653,8655,8657,8660,8663,8666,8669,8672,8674,8676,8678,8681,8683,8686,8689,8692,8694,8696,8699,8701],{"class":562,"line":713},[560,8613,2409],{"class":573},[560,8615,8616],{"class":606}," cubes ",[560,8618,580],{"class":565},[560,8620,8621],{"class":606}," Array",[560,8623,1073],{"class":565},[560,8625,8626],{"class":2428},"from",[560,8628,2431],{"class":606},[560,8630,8631],{"class":565},"{",[560,8633,8634],{"class":569}," length",[560,8636,1145],{"class":565},[560,8638,8639],{"class":746}," 900",[560,8641,8642],{"class":565}," },",[560,8644,3089],{"class":565},[560,8646,8647],{"class":6969},"_",[560,8649,610],{"class":565},[560,8651,8652],{"class":6969}," i",[560,8654,3355],{"class":565},[560,8656,3692],{"class":573},[560,8658,8659],{"class":606}," [i ",[560,8661,8662],{"class":565},"%",[560,8664,8665],{"class":746}," 30",[560,8667,8668],{"class":565}," -",[560,8670,8671],{"class":746}," 15",[560,8673,610],{"class":565},[560,8675,2499],{"class":746},[560,8677,610],{"class":565},[560,8679,8680],{"class":606}," Math",[560,8682,1073],{"class":565},[560,8684,8685],{"class":2428},"floor",[560,8687,8688],{"class":606},"(i ",[560,8690,8691],{"class":565},"\u002F",[560,8693,8665],{"class":746},[560,8695,4829],{"class":606},[560,8697,8698],{"class":565},"-",[560,8700,8671],{"class":746},[560,8702,2594],{"class":606},[560,8704,8705,8707,8709],{"class":562,"line":723},[560,8706,655],{"class":565},[560,8708,570],{"class":569},[560,8710,592],{"class":565},[560,8712,8713],{"class":562,"line":728},[560,8714,665],{"emptyLinePlaceholder":516},[560,8716,8717,8719,8721],{"class":562,"line":754},[560,8718,566],{"class":565},[560,8720,673],{"class":569},[560,8722,592],{"class":565},[560,8724,8725,8727,8729],{"class":562,"line":554},[560,8726,681],{"class":565},[560,8728,684],{"class":569},[560,8730,592],{"class":565},[560,8732,8734,8736,8738,8740,8742,8744,8746,8748,8751,8753,8755,8757,8759,8761,8763],{"class":8733,"line":777},[562,596],[560,8735,704],{"class":565},[560,8737,707],{"class":569},[560,8739,736],{"class":565},[560,8741,1413],{"class":573},[560,8743,580],{"class":565},[560,8745,583],{"class":565},[560,8747,1420],{"class":565},[560,8749,8750],{"class":746},"14",[560,8752,1425],{"class":565},[560,8754,1432],{"class":746},[560,8756,1425],{"class":565},[560,8758,8750],{"class":746},[560,8760,1435],{"class":565},[560,8762,583],{"class":565},[560,8764,710],{"class":565},[560,8766,8767,8769,8771,8773,8775,8777,8779,8781,8783,8785,8787,8789,8791,8793,8795],{"class":562,"line":788},[560,8768,704],{"class":565},[560,8770,65],{"class":569},[560,8772,736],{"class":565},[560,8774,5255],{"class":573},[560,8776,580],{"class":565},[560,8778,583],{"class":565},[560,8780,5255],{"class":606},[560,8782,583],{"class":565},[560,8784,736],{"class":565},[560,8786,5325],{"class":573},[560,8788,580],{"class":565},[560,8790,583],{"class":565},[560,8792,5325],{"class":606},[560,8794,583],{"class":565},[560,8796,592],{"class":565},[560,8798,8800,8802],{"class":8799,"line":799},[562,596],[560,8801,780],{"class":565},[560,8803,8804],{"class":569},"Instance\n",[560,8806,8808,8810,8812,8814,8816,8818,8820,8823,8825,8828],{"class":8807,"line":809},[562,596],[560,8809,8136],{"class":599},[560,8811,580],{"class":565},[560,8813,583],{"class":565},[560,8815,2431],{"class":565},[560,8817,1413],{"class":606},[560,8819,1425],{"class":565},[560,8821,8822],{"class":606},"i",[560,8824,8153],{"class":565},[560,8826,8827],{"class":606},"cubes",[560,8829,3146],{"class":565},[560,8831,8833,8835,8837,8839,8841,8843],{"class":8832,"line":555},[562,596],[560,8834,8163],{"class":565},[560,8836,8166],{"class":573},[560,8838,580],{"class":565},[560,8840,583],{"class":565},[560,8842,8822],{"class":606},[560,8844,3146],{"class":565},[560,8846,8848,8850,8852,8854,8856,8858],{"class":8847,"line":829},[562,596],[560,8849,8163],{"class":565},[560,8851,1413],{"class":573},[560,8853,580],{"class":565},[560,8855,583],{"class":565},[560,8857,1413],{"class":606},[560,8859,3146],{"class":565},[560,8861,8863,8866,8868,8870,8873],{"class":8862,"line":839},[562,596],[560,8864,8865],{"class":573}," color",[560,8867,580],{"class":565},[560,8869,583],{"class":565},[560,8871,8872],{"class":586},"#38bdf8",[560,8874,3146],{"class":565},[560,8876,8878],{"class":8877,"line":2617},[562,596],[560,8879,8217],{"class":565},[560,8881,8882,8884,8886],{"class":562,"line":2626},[560,8883,822],{"class":565},[560,8885,65],{"class":569},[560,8887,592],{"class":565},[560,8889,8890,8892,8894],{"class":562,"line":2660},[560,8891,832],{"class":565},[560,8893,684],{"class":569},[560,8895,592],{"class":565},[560,8897,8898,8900,8902],{"class":562,"line":2669},[560,8899,655],{"class":565},[560,8901,673],{"class":569},[560,8903,592],{"class":565},[2000,8905,8906],{},[536,8907,2789,8908,3078,8910,8912,8913,8915],{},[540,8909,5255],{},[540,8911,5325],{}," are yours: ",[540,8914,8430],{}," never disposes them.",[545,8917,8919],{"id":8918},"per-instance-color","Per-instance color",[536,8921,8922,8924,8925,8927,8928,8931],{},[540,8923,8437],{}," takes a ",[540,8926,7692],{}," prop, written into the batch's ",[540,8929,8930],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[549,8933,8935],{"className":551,"code":8934,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" \u002F>\n",[540,8936,8937],{"__ignoreMap":508},[560,8938,8939,8941,8944,8946,8948,8950,8952,8954,8956,8958,8960,8962,8964,8966,8968,8970,8972,8974,8976,8979,8982,8984,8987,8989,8991,8993,8995,8998],{"class":562,"line":509},[560,8940,566],{"class":565},[560,8942,8943],{"class":569},"Instance",[560,8945,736],{"class":565},[560,8947,1413],{"class":573},[560,8949,580],{"class":565},[560,8951,583],{"class":565},[560,8953,1420],{"class":606},[560,8955,892],{"class":746},[560,8957,610],{"class":565},[560,8959,2499],{"class":746},[560,8961,610],{"class":565},[560,8963,2499],{"class":746},[560,8965,1435],{"class":606},[560,8967,583],{"class":565},[560,8969,736],{"class":565},[560,8971,7692],{"class":573},[560,8973,580],{"class":565},[560,8975,583],{"class":565},[560,8977,8978],{"class":606},"isSelected ",[560,8980,8981],{"class":565},"?",[560,8983,622],{"class":565},[560,8985,8986],{"class":586},"#f97316",[560,8988,2434],{"class":565},[560,8990,736],{"class":565},[560,8992,622],{"class":565},[560,8994,8872],{"class":586},[560,8996,8997],{"class":565},"'\"",[560,8999,710],{"class":565},[545,9001,9003],{"id":9002},"pointer-events","Pointer events",[536,9005,9006],{},"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,9008,9010],{"className":551,"code":9009,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" \u002F>\n",[540,9011,9012],{"__ignoreMap":508},[560,9013,9014,9016,9018,9020,9022,9024,9026,9028,9030,9032,9035,9037,9039,9041,9044,9046,9048,9051,9053,9055,9058,9060,9062],{"class":562,"line":509},[560,9015,566],{"class":565},[560,9017,8943],{"class":569},[560,9019,736],{"class":565},[560,9021,1413],{"class":573},[560,9023,580],{"class":565},[560,9025,583],{"class":565},[560,9027,1413],{"class":606},[560,9029,583],{"class":565},[560,9031,4339],{"class":565},[560,9033,9034],{"class":573},"click",[560,9036,580],{"class":565},[560,9038,583],{"class":565},[560,9040,5968],{"class":2428},[560,9042,9043],{"class":606},"(id)",[560,9045,583],{"class":565},[560,9047,4339],{"class":565},[560,9049,9050],{"class":573},"pointer-enter",[560,9052,580],{"class":565},[560,9054,583],{"class":565},[560,9056,9057],{"class":2428},"hover",[560,9059,9043],{"class":606},[560,9061,583],{"class":565},[560,9063,710],{"class":565},[545,9065,9067],{"id":9066},"hiding-instances","Hiding instances",[536,9069,9070],{},"Two ways, and they differ in what they cost:",[2207,9072,9073,9079],{},[2210,9074,9075,9078],{},[540,9076,9077],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2210,9080,9081,9083],{},[540,9082,8458],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[536,9085,9086],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[545,9088,9090],{"id":9089},"nesting-and-transforms","Nesting and transforms",[536,9092,9093],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[549,9095,9097],{"className":551,"code":9096,"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)\" \u002F>\n \u003C\u002FTresGroup>\n \u003C\u002FLevioso>\n\u003C\u002FInstances>\n",[540,9098,9099,9131,9136,9141,9146,9151,9156,9161],{"__ignoreMap":508},[560,9100,9101,9103,9105,9107,9109,9111,9113,9115,9117,9119,9121,9123,9125,9127,9129],{"class":562,"line":509},[560,9102,566],{"class":565},[560,9104,65],{"class":569},[560,9106,736],{"class":565},[560,9108,5255],{"class":573},[560,9110,580],{"class":565},[560,9112,583],{"class":565},[560,9114,5255],{"class":606},[560,9116,583],{"class":565},[560,9118,736],{"class":565},[560,9120,5325],{"class":573},[560,9122,580],{"class":565},[560,9124,583],{"class":565},[560,9126,5325],{"class":606},[560,9128,583],{"class":565},[560,9130,592],{"class":565},[560,9132,9133],{"class":562,"line":510},[560,9134,9135],{"class":606}," \u003CLevioso>\n",[560,9137,9138],{"class":562,"line":631},[560,9139,9140],{"class":606}," \u003CTresGroup :position=\"[0, 3, 0]\">\n",[560,9142,9143],{"class":562,"line":652},[560,9144,9145],{"class":606}," \u003C!-- floats with the group, still the same drawcall -->\n",[560,9147,9148],{"class":562,"line":662},[560,9149,9150],{"class":606}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n",[560,9152,9153],{"class":562,"line":668},[560,9154,9155],{"class":606}," \u003C\u002FTresGroup>\n",[560,9157,9158],{"class":562,"line":678},[560,9159,9160],{"class":606}," \u003C\u002FLevioso>\n",[560,9162,9163,9165,9167],{"class":562,"line":701},[560,9164,655],{"class":565},[560,9166,65],{"class":569},[560,9168,592],{"class":565},[545,9170,9172],{"id":9171},"animating-instances","Animating instances",[536,9174,9175,9176,9179,9180,9182,9183,8924,9185,9187],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[540,9177,9178],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[540,9181,7767],{},"\nname, and an ",[540,9184,8437],{},[540,9186,2990],{}," like any other node, so a clip can drive one directly.",[549,9189,9191],{"className":551,"code":9190,"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\" \u002F>\n \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n \u003C\u002FTresGroup>\n\u003C\u002FInstances>\n",[540,9192,9193,9225,9230,9235,9240,9245,9250],{"__ignoreMap":508},[560,9194,9195,9197,9199,9201,9203,9205,9207,9209,9211,9213,9215,9217,9219,9221,9223],{"class":562,"line":509},[560,9196,566],{"class":565},[560,9198,65],{"class":569},[560,9200,736],{"class":565},[560,9202,5255],{"class":573},[560,9204,580],{"class":565},[560,9206,583],{"class":565},[560,9208,5255],{"class":606},[560,9210,583],{"class":565},[560,9212,736],{"class":565},[560,9214,5325],{"class":573},[560,9216,580],{"class":565},[560,9218,583],{"class":565},[560,9220,5325],{"class":606},[560,9222,583],{"class":565},[560,9224,592],{"class":565},[560,9226,9227],{"class":562,"line":510},[560,9228,9229],{"class":606}," \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[560,9231,9232],{"class":562,"line":631},[560,9233,9234],{"class":606}," \u003CTresGroup name=\"Rotor\">\n",[560,9236,9237],{"class":562,"line":652},[560,9238,9239],{"class":606}," \u003CInstance name=\"Blade\" \u002F>\n",[560,9241,9242],{"class":562,"line":662},[560,9243,9244],{"class":606}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n",[560,9246,9247],{"class":562,"line":668},[560,9248,9249],{"class":606}," \u003C\u002FTresGroup>\n",[560,9251,9252,9254,9256],{"class":562,"line":678},[560,9253,655],{"class":565},[560,9255,65],{"class":569},[560,9257,592],{"class":565},[2000,9259,9260],{},[536,9261,9262,9263,1425,9266,3078,9268,9271,9272,9274,9275,9278,9279,9281,9282,9285],{},"Inside a ",[540,9264,9265],{},"\u003CMerged \u002F>",[540,9267,2990],{},[540,9269,9270],{},"batch"," are different things: ",[540,9273,9270],{}," picks which\n",[540,9276,9277],{},"InstancedMesh"," to join, ",[540,9280,2990],{}," is what this node is called. ",[540,9283,9284],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[536,9287,9288,9289,9292],{},"A track that finds no node is not silent: three logs\n",[540,9290,9291],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[545,9294,9296],{"id":9295},"limit-and-growth","Limit and growth",[536,9298,9299,9302,9303,9305],{},[540,9300,9301],{},"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,9304,9301],{}," would have avoided the reallocation.",[549,9307,9309],{"className":551,"code":9308,"language":556,"meta":508,"style":508},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[540,9310,9311],{"__ignoreMap":508},[560,9312,9313,9315,9317,9319,9321,9323,9325,9327,9329,9331,9333,9335,9337,9339,9341,9343,9345,9347,9349,9352,9354],{"class":562,"line":509},[560,9314,566],{"class":565},[560,9316,65],{"class":569},[560,9318,736],{"class":565},[560,9320,5255],{"class":573},[560,9322,580],{"class":565},[560,9324,583],{"class":565},[560,9326,5255],{"class":606},[560,9328,583],{"class":565},[560,9330,736],{"class":565},[560,9332,5325],{"class":573},[560,9334,580],{"class":565},[560,9336,583],{"class":565},[560,9338,5325],{"class":606},[560,9340,583],{"class":565},[560,9342,736],{"class":565},[560,9344,9301],{"class":573},[560,9346,580],{"class":565},[560,9348,583],{"class":565},[560,9350,9351],{"class":746},"5000",[560,9353,583],{"class":565},[560,9355,592],{"class":565},[536,9357,9358],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[545,9360,9362],{"id":9361},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[536,9364,9365],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[536,9367,9368,9369,9371,9372,9374,9375,9377,9378,9380,9381,9383],{},"Each ",[540,9370,8437],{}," is a real ",[540,9373,7767],{}," in the graph. That is precisely what buys you the ergonomics:\n",[540,9376,1413],{}," is just a transform, nesting under a group works because the group is its parent, ",[540,9379,8458],{},"\nworks because unmounting a node unregisters it, and ",[540,9382,8462],{}," 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,9385,9386,9387,9389],{},"What those nodes do ",[1627,9388,6472],{}," 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,9391,9392],{},"The costs that are real:",[854,9394,9395,9404],{},[857,9396,9397],{},[860,9398,9399,9401],{},[863,9400],{"align":924},[863,9402,9403],{"align":924},"Cost",[873,9405,9406,9414,9422],{},[860,9407,9408,9411],{},[878,9409,9410],{"align":924},"Per frame",[878,9412,9413],{"align":924},"One world-matrix update and one matrix multiply per instance.",[860,9415,9416,9419],{},[878,9417,9418],{"align":924},"On pointer move",[878,9420,9421],{"align":924},"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.",[860,9423,9424,9427],{},[878,9425,9426],{"align":924},"Memory",[878,9428,9429,9430,9432],{"align":924},"One bare ",[540,9431,7767],{}," per instance.",[2000,9434,9435],{},[536,9436,9437,9438,9441,9442,9445,9446,9448],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[540,9439,9440],{},"TresInstancedMesh"," whose ",[540,9443,9444],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[540,9447,8430],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[545,9450,849],{"id":848},[4137,9452,65],{"id":9453},"instances",[854,9455,9456,9466],{},[857,9457,9458],{},[860,9459,9460,9462,9464],{},[863,9461,865],{"align":924},[863,9463,868],{"align":924},[863,9465,871],{},[873,9467,9468,9482,9495,9509,9524],{},[860,9469,9470,9474,9477],{},[878,9471,9472],{"align":924},[540,9473,5255],{},[878,9475,9476],{"align":924},"Geometry shared by every instance. Not disposed by the component.",[878,9478,9479],{},[1631,9480,9481],{},"required",[860,9483,9484,9488,9491],{},[878,9485,9486],{"align":924},[540,9487,5325],{},[878,9489,9490],{"align":924},"Material shared by every instance. Not disposed by the component.",[878,9492,9493],{},[1631,9494,9481],{},[860,9496,9497,9501,9504],{},[878,9498,9499],{"align":924},[540,9500,9301],{},[878,9502,9503],{"align":924},"Initial buffer allocation. Grows automatically when exceeded.",[878,9505,9506],{},[540,9507,9508],{},"1000",[860,9510,9511,9515,9520],{},[878,9512,9513],{"align":924},[540,9514,9270],{},[878,9516,9517,9518,1073],{"align":924},"Key this batch registers under with an ancestor ",[540,9519,9265],{},[878,9521,9522],{},[540,9523,1106],{},[860,9525,9526,9530,9536],{},[878,9527,9528],{"align":924},[540,9529,2990],{},[878,9531,9532,9533,9535],{"align":924},"Name for the ",[540,9534,9277],{}," itself.",[878,9537,9538],{},[540,9539,1106],{},[536,9541,9542,9543,9545,9546,1073],{},"Exposes the underlying ",[540,9544,8434],{}," through ",[540,9547,9548],{},"instance",[4137,9550,8943],{"id":9548},[854,9552,9553,9563],{},[857,9554,9555],{},[860,9556,9557,9559,9561],{},[863,9558,865],{"align":924},[863,9560,868],{"align":924},[863,9562,871],{},[873,9564,9565,9584,9600,9615],{},[860,9566,9567,9571,9580],{},[878,9568,9569],{"align":924},[540,9570,9270],{},[878,9572,9573,9574,9577,9578,1073],{"align":924},"Batch to join, by its key in ",[540,9575,9576],{},"\u003CMerged :meshes \u002F>",". Omit for the nearest ",[540,9579,8430],{},[878,9581,9582],{},[540,9583,1106],{},[860,9585,9586,9590,9596],{},[878,9587,9588],{"align":924},[540,9589,2990],{},[878,9591,9592,9593,9595],{"align":924},"Name for this instance's node, so a mixer or ",[540,9594,4817],{}," can find it.",[878,9597,9598],{},[540,9599,1106],{},[860,9601,9602,9606,9611],{},[878,9603,9604],{"align":924},[540,9605,7692],{},[878,9607,9608,9609,1073],{"align":924},"Per-instance color, written into ",[540,9610,8930],{},[878,9612,9613],{},[540,9614,1106],{},[860,9616,9617,9621,9626],{},[878,9618,9619],{"align":924},[540,9620,7254],{},[878,9622,9623,9625],{"align":924},[540,9624,898],{}," drops the instance from the batch without unregistering it.",[878,9627,9628],{},[540,9629,888],{},[536,9631,9632,9633,1425,9635,1425,9637,9639],{},"Transform props (",[540,9634,1413],{},[540,9636,5760],{},[540,9638,739],{},", …) and pointer events behave like any other node.",[9641,9642,9643],"read-more",{"to":78},[536,9644,9645,9646,9648],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[540,9647,9265],{}," is for.",[1254,9650,9651],{},"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":9653},[9654,9655,9656,9657,9658,9659,9660,9661,9662],{"id":547,"depth":510,"text":15},{"id":8918,"depth":510,"text":8919},{"id":9002,"depth":510,"text":9003},{"id":9066,"depth":510,"text":9067},{"id":9089,"depth":510,"text":9090},{"id":9171,"depth":510,"text":9172},{"id":9295,"depth":510,"text":9296},{"id":9361,"depth":510,"text":9362},{"id":848,"depth":510,"text":849,"children":9663},[9664,9665],{"id":9453,"depth":631,"text":65},{"id":9548,"depth":631,"text":8943},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9666},"oen2skMgwR0U-7YShh5_abvUd_4Azzt9H53lH2LVISk",{"id":9671,"title":69,"body":9672,"description":10119,"extension":513,"links":514,"meta":10120,"navigation":516,"path":70,"seo":10121,"stem":71,"__hash__":10122},"docs\u002F2.api\u002F1.abstractions\u002Flevioso.md",{"type":501,"value":9673,"toc":10115},[9674,9679,9686,9695,9697,10041,10043,10113],[530,9675,9676],{},[9677,9678],"abstractions-levioso",{},[536,9680,9681],{},[9682,9683],"img",{"alt":9684,"src":9685},"Leviosa","https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FHaCFT5ghY6L1m\u002Fgiphy.gif",[536,9687,2789,9688,9690,9691,9694],{},[540,9689,7448],{}," package provides a ",[540,9692,9693],{},"\u003CLevioso \u002F>"," wrapper that makes its content … float, just like Magic 🪄✨",[545,9696,15],{"id":547},[549,9698,9701],{"className":551,"code":9699,"highlights":9700,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\nimport { Levioso, OrbitControls, Box } from \"@tresjs\u002Fcientos\";\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x82dbc5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CLevioso :speed=\"4\">\n \u003CBox \u002F>\n \u003C\u002FLevioso>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003CTresDirectionalLight :intensity=\"1\" :position=\"[2, 2, 2]\" \u002F>\n \u003CTresGridHelper :position=\"[0, -1, 0]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[631,728,554],[540,9702,9703,9723,9745,9775,9779,9787,9791,9799,9821,9878,9886,9909,9917,9926,9947,9992,10025,10033],{"__ignoreMap":508},[560,9704,9705,9707,9709,9711,9713,9715,9717,9719,9721],{"class":562,"line":509},[560,9706,566],{"class":565},[560,9708,570],{"class":569},[560,9710,574],{"class":573},[560,9712,577],{"class":573},[560,9714,580],{"class":565},[560,9716,583],{"class":565},[560,9718,587],{"class":586},[560,9720,583],{"class":565},[560,9722,592],{"class":565},[560,9724,9725,9727,9729,9731,9733,9735,9738,9740,9742],{"class":562,"line":510},[560,9726,600],{"class":599},[560,9728,603],{"class":565},[560,9730,638],{"class":606},[560,9732,616],{"class":565},[560,9734,619],{"class":599},[560,9736,9737],{"class":565}," \"",[560,9739,647],{"class":586},[560,9741,583],{"class":565},[560,9743,9744],{"class":565},";\n",[560,9746,9748,9750,9752,9755,9757,9759,9761,9763,9765,9767,9769,9771,9773],{"class":9747,"line":631},[562,596],[560,9749,600],{"class":599},[560,9751,603],{"class":565},[560,9753,9754],{"class":606}," Levioso",[560,9756,610],{"class":565},[560,9758,613],{"class":606},[560,9760,610],{"class":565},[560,9762,1323],{"class":606},[560,9764,616],{"class":565},[560,9766,619],{"class":599},[560,9768,9737],{"class":565},[560,9770,625],{"class":586},[560,9772,583],{"class":565},[560,9774,9744],{"class":565},[560,9776,9777],{"class":562,"line":652},[560,9778,665],{"emptyLinePlaceholder":516},[560,9780,9781,9783,9785],{"class":562,"line":662},[560,9782,655],{"class":565},[560,9784,570],{"class":569},[560,9786,592],{"class":565},[560,9788,9789],{"class":562,"line":668},[560,9790,665],{"emptyLinePlaceholder":516},[560,9792,9793,9795,9797],{"class":562,"line":678},[560,9794,566],{"class":565},[560,9796,673],{"class":569},[560,9798,592],{"class":565},[560,9800,9801,9803,9805,9807,9810,9812,9814,9817,9819],{"class":562,"line":701},[560,9802,681],{"class":565},[560,9804,684],{"class":569},[560,9806,736],{"class":565},[560,9808,9809],{"class":573},"clear-color",[560,9811,580],{"class":565},[560,9813,583],{"class":565},[560,9815,9816],{"class":746},"0x82dbc5",[560,9818,583],{"class":565},[560,9820,592],{"class":565},[560,9822,9823,9825,9827,9829,9831,9833,9835,9837,9839,9841,9843,9845,9847,9849,9851,9853,9856,9858,9860,9862,9864,9866,9868,9870,9872,9874,9876],{"class":562,"line":713},[560,9824,704],{"class":565},[560,9826,707],{"class":569},[560,9828,736],{"class":565},[560,9830,1413],{"class":573},[560,9832,580],{"class":565},[560,9834,583],{"class":565},[560,9836,1420],{"class":565},[560,9838,892],{"class":746},[560,9840,1425],{"class":565},[560,9842,892],{"class":746},[560,9844,1425],{"class":565},[560,9846,7588],{"class":746},[560,9848,1435],{"class":565},[560,9850,583],{"class":565},[560,9852,736],{"class":565},[560,9854,9855],{"class":573},"look-at",[560,9857,580],{"class":565},[560,9859,583],{"class":565},[560,9861,1420],{"class":565},[560,9863,892],{"class":746},[560,9865,1425],{"class":565},[560,9867,892],{"class":746},[560,9869,1425],{"class":565},[560,9871,892],{"class":746},[560,9873,1435],{"class":565},[560,9875,583],{"class":565},[560,9877,710],{"class":565},[560,9879,9880,9882,9884],{"class":562,"line":723},[560,9881,704],{"class":565},[560,9883,718],{"class":569},[560,9885,710],{"class":565},[560,9887,9889,9891,9894,9896,9899,9901,9903,9905,9907],{"class":9888,"line":728},[562,596],[560,9890,704],{"class":565},[560,9892,9893],{"class":569},"Levioso",[560,9895,736],{"class":565},[560,9897,9898],{"class":573},"speed",[560,9900,580],{"class":565},[560,9902,583],{"class":565},[560,9904,3822],{"class":746},[560,9906,583],{"class":565},[560,9908,592],{"class":565},[560,9910,9911,9913,9915],{"class":562,"line":754},[560,9912,780],{"class":565},[560,9914,217],{"class":569},[560,9916,710],{"class":565},[560,9918,9920,9922,9924],{"class":9919,"line":554},[562,596],[560,9921,822],{"class":565},[560,9923,9893],{"class":569},[560,9925,592],{"class":565},[560,9927,9928,9930,9933,9935,9937,9939,9941,9943,9945],{"class":562,"line":777},[560,9929,704],{"class":565},[560,9931,9932],{"class":569},"TresAmbientLight",[560,9934,736],{"class":565},[560,9936,1840],{"class":573},[560,9938,580],{"class":565},[560,9940,583],{"class":565},[560,9942,1847],{"class":746},[560,9944,583],{"class":565},[560,9946,710],{"class":565},[560,9948,9949,9951,9954,9956,9958,9960,9962,9964,9966,9968,9970,9972,9974,9976,9978,9980,9982,9984,9986,9988,9990],{"class":562,"line":788},[560,9950,704],{"class":565},[560,9952,9953],{"class":569},"TresDirectionalLight",[560,9955,736],{"class":565},[560,9957,1840],{"class":573},[560,9959,580],{"class":565},[560,9961,583],{"class":565},[560,9963,1847],{"class":746},[560,9965,583],{"class":565},[560,9967,736],{"class":565},[560,9969,1413],{"class":573},[560,9971,580],{"class":565},[560,9973,583],{"class":565},[560,9975,1420],{"class":565},[560,9977,747],{"class":746},[560,9979,1425],{"class":565},[560,9981,747],{"class":746},[560,9983,1425],{"class":565},[560,9985,747],{"class":746},[560,9987,1435],{"class":565},[560,9989,583],{"class":565},[560,9991,710],{"class":565},[560,9993,9994,9996,9998,10000,10002,10004,10006,10008,10010,10013,10015,10017,10019,10021,10023],{"class":562,"line":799},[560,9995,704],{"class":565},[560,9997,8233],{"class":569},[560,9999,736],{"class":565},[560,10001,1413],{"class":573},[560,10003,580],{"class":565},[560,10005,583],{"class":565},[560,10007,1420],{"class":565},[560,10009,892],{"class":746},[560,10011,10012],{"class":565},", -",[560,10014,1847],{"class":746},[560,10016,1425],{"class":565},[560,10018,892],{"class":746},[560,10020,1435],{"class":565},[560,10022,583],{"class":565},[560,10024,710],{"class":565},[560,10026,10027,10029,10031],{"class":562,"line":809},[560,10028,832],{"class":565},[560,10030,684],{"class":569},[560,10032,592],{"class":565},[560,10034,10035,10037,10039],{"class":562,"line":555},[560,10036,655],{"class":565},[560,10038,673],{"class":569},[560,10040,592],{"class":565},[545,10042,849],{"id":848},[854,10044,10045,10055],{},[857,10046,10047],{},[860,10048,10049,10051,10053],{},[863,10050,865],{"align":924},[863,10052,868],{"align":924},[863,10054,871],{},[873,10056,10057,10070,10084,10098],{},[860,10058,10059,10063,10066],{},[878,10060,10061],{"align":924},[540,10062,9898],{},[878,10064,10065],{"align":924},"Floating speed, higher it rocks more 🤘.",[878,10067,10068],{},[540,10069,1847],{},[860,10071,10072,10077,10080],{},[878,10073,10074],{"align":924},[540,10075,10076],{},"rotationFactor",[878,10078,10079],{"align":924},"Factor for Euler rotation.",[878,10081,10082],{},[540,10083,1847],{},[860,10085,10086,10091,10094],{},[878,10087,10088],{"align":924},[540,10089,10090],{},"floatFactor",[878,10092,10093],{"align":924},"Factor for Up\u002Fdown movement.",[878,10095,10096],{},[540,10097,1847],{},[860,10099,10100,10105,10108],{},[878,10101,10102],{"align":924},[540,10103,10104],{},"range",[878,10106,10107],{"align":924},"Range of y-axis values the object will float within.",[878,10109,10110],{},[540,10111,10112],{},"[-0.1, 0.1]",[1254,10114,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":10116},[10117,10118],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Make content float like magic with smooth animations.",{},{"title":69,"description":10119},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":10124,"title":73,"body":10125,"description":10809,"extension":513,"links":514,"meta":10810,"navigation":516,"path":74,"seo":10811,"stem":75,"__hash__":10812},"docs\u002F2.api\u002F1.abstractions\u002Fmask.md",{"type":501,"value":10126,"toc":10804},[10127,10132,10138,10171,10173,10678,10680,10742,10745,10752,10757,10772,10801],[530,10128,10129],{},[10130,10131],"abstractions-mask",{},[536,10133,10134,10137],{},[540,10135,10136],{},"\u003CMask\u002F>"," uses the stencil buffer to cut out areas of the screen.",[3214,10139,10140,10158],{},[536,10141,10142,10143,10146,10147,10150,10151,10154,10155,1073],{},"To use ",[540,10144,10145],{},"\u003CMask \u002F>"," you ",[1631,10148,10149],{},"must"," add ",[540,10152,10153],{},":stencil=\"true\""," to your ",[540,10156,10157],{},"\u003CTresCanvas \u002F>",[536,10159,10160,10162,10163,10170],{},[540,10161,10145],{}," relies on the ",[1067,10164,10167],{"href":10165,"rel":10166},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Frenderers\u002FWebGLRenderer",[1071],[540,10168,10169],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[545,10172,15],{"id":547},[549,10174,10177],{"className":551,"code":10175,"highlights":10176,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresGroup :scale=\"2\">\n \u003CTresMesh>\n \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" \u002F>\n \u003CTresMeshBasicMaterial color=\"white\" \u002F>\n \u003C\u002FTresMesh>\n \u003CMask :id=\"1\">\n \u003CTresCircleGeometry \u002F>\n \u003CTresMeshBasicMaterial color=\"#fbb03b\" \u002F>\n \u003C\u002FMask>\n \u003C\u002FTresGroup>\n\n \u003CTresMesh :position-z=\"-1\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh :position-z=\"-3\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh :position-z=\"-5\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,799,809,555,829],[540,10178,10179,10199,10228,10246,10254,10258,10266,10298,10306,10314,10318,10339,10347,10382,10400,10408,10430,10440,10460,10469,10477,10481,10504,10512,10538,10546,10550,10572,10580,10604,10612,10616,10638,10646,10654,10662,10670],{"__ignoreMap":508},[560,10180,10181,10183,10185,10187,10189,10191,10193,10195,10197],{"class":562,"line":509},[560,10182,566],{"class":565},[560,10184,570],{"class":569},[560,10186,574],{"class":573},[560,10188,577],{"class":573},[560,10190,580],{"class":565},[560,10192,583],{"class":565},[560,10194,587],{"class":586},[560,10196,583],{"class":565},[560,10198,592],{"class":565},[560,10200,10202,10204,10206,10209,10211,10213,10215,10218,10220,10222,10224,10226],{"class":10201,"line":510},[562,596],[560,10203,600],{"class":599},[560,10205,603],{"class":565},[560,10207,10208],{"class":606}," Mask",[560,10210,610],{"class":565},[560,10212,613],{"class":606},[560,10214,610],{"class":565},[560,10216,10217],{"class":606}," useMask",[560,10219,616],{"class":565},[560,10221,619],{"class":599},[560,10223,622],{"class":565},[560,10225,625],{"class":586},[560,10227,628],{"class":565},[560,10229,10230,10232,10234,10236,10238,10240,10242,10244],{"class":562,"line":631},[560,10231,600],{"class":599},[560,10233,603],{"class":565},[560,10235,638],{"class":606},[560,10237,616],{"class":565},[560,10239,619],{"class":599},[560,10241,622],{"class":565},[560,10243,647],{"class":586},[560,10245,628],{"class":565},[560,10247,10248,10250,10252],{"class":562,"line":652},[560,10249,655],{"class":565},[560,10251,570],{"class":569},[560,10253,592],{"class":565},[560,10255,10256],{"class":562,"line":662},[560,10257,665],{"emptyLinePlaceholder":516},[560,10259,10260,10262,10264],{"class":562,"line":668},[560,10261,566],{"class":565},[560,10263,673],{"class":569},[560,10265,592],{"class":565},[560,10267,10268,10270,10272,10274,10277,10279,10281,10283,10285,10287,10289,10291,10294,10296],{"class":562,"line":678},[560,10269,681],{"class":565},[560,10271,684],{"class":569},[560,10273,736],{"class":565},[560,10275,10276],{"class":573},"stencil",[560,10278,580],{"class":565},[560,10280,583],{"class":565},[560,10282,888],{"class":4482},[560,10284,583],{"class":565},[560,10286,687],{"class":573},[560,10288,580],{"class":565},[560,10290,583],{"class":565},[560,10292,10293],{"class":586},"#4f4f4f",[560,10295,583],{"class":565},[560,10297,592],{"class":565},[560,10299,10300,10302,10304],{"class":562,"line":701},[560,10301,704],{"class":565},[560,10303,707],{"class":569},[560,10305,710],{"class":565},[560,10307,10308,10310,10312],{"class":562,"line":713},[560,10309,704],{"class":565},[560,10311,718],{"class":569},[560,10313,710],{"class":565},[560,10315,10316],{"class":562,"line":723},[560,10317,665],{"emptyLinePlaceholder":516},[560,10319,10320,10322,10325,10327,10329,10331,10333,10335,10337],{"class":562,"line":728},[560,10321,704],{"class":565},[560,10323,10324],{"class":569},"TresGroup",[560,10326,736],{"class":565},[560,10328,739],{"class":573},[560,10330,580],{"class":565},[560,10332,583],{"class":565},[560,10334,747],{"class":746},[560,10336,583],{"class":565},[560,10338,592],{"class":565},[560,10340,10341,10343,10345],{"class":562,"line":754},[560,10342,780],{"class":565},[560,10344,783],{"class":569},[560,10346,592],{"class":565},[560,10348,10349,10351,10354,10356,10358,10360,10362,10364,10367,10369,10371,10373,10376,10378,10380],{"class":562,"line":554},[560,10350,791],{"class":565},[560,10352,10353],{"class":569},"TresRingGeometry",[560,10355,736],{"class":565},[560,10357,1943],{"class":573},[560,10359,580],{"class":565},[560,10361,583],{"class":565},[560,10363,1420],{"class":565},[560,10365,10366],{"class":746},"0.95",[560,10368,1425],{"class":565},[560,10370,1847],{"class":746},[560,10372,1425],{"class":565},[560,10374,10375],{"class":746},"64",[560,10377,1435],{"class":565},[560,10379,583],{"class":565},[560,10381,710],{"class":565},[560,10383,10384,10386,10388,10390,10392,10394,10396,10398],{"class":562,"line":777},[560,10385,791],{"class":565},[560,10387,7617],{"class":569},[560,10389,2695],{"class":573},[560,10391,580],{"class":565},[560,10393,583],{"class":565},[560,10395,2702],{"class":586},[560,10397,583],{"class":565},[560,10399,710],{"class":565},[560,10401,10402,10404,10406],{"class":562,"line":788},[560,10403,812],{"class":565},[560,10405,783],{"class":569},[560,10407,592],{"class":565},[560,10409,10411,10413,10415,10417,10420,10422,10424,10426,10428],{"class":10410,"line":799},[562,596],[560,10412,780],{"class":565},[560,10414,73],{"class":569},[560,10416,736],{"class":565},[560,10418,10419],{"class":573},"id",[560,10421,580],{"class":565},[560,10423,583],{"class":565},[560,10425,1847],{"class":746},[560,10427,583],{"class":565},[560,10429,592],{"class":565},[560,10431,10433,10435,10438],{"class":10432,"line":809},[562,596],[560,10434,791],{"class":565},[560,10436,10437],{"class":569},"TresCircleGeometry",[560,10439,710],{"class":565},[560,10441,10443,10445,10447,10449,10451,10453,10456,10458],{"class":10442,"line":555},[562,596],[560,10444,791],{"class":565},[560,10446,7617],{"class":569},[560,10448,2695],{"class":573},[560,10450,580],{"class":565},[560,10452,583],{"class":565},[560,10454,10455],{"class":586},"#fbb03b",[560,10457,583],{"class":565},[560,10459,710],{"class":565},[560,10461,10463,10465,10467],{"class":10462,"line":829},[562,596],[560,10464,812],{"class":565},[560,10466,73],{"class":569},[560,10468,592],{"class":565},[560,10470,10471,10473,10475],{"class":562,"line":839},[560,10472,822],{"class":565},[560,10474,10324],{"class":569},[560,10476,592],{"class":565},[560,10478,10479],{"class":562,"line":2617},[560,10480,665],{"emptyLinePlaceholder":516},[560,10482,10483,10485,10487,10489,10492,10494,10496,10498,10500,10502],{"class":562,"line":2626},[560,10484,704],{"class":565},[560,10486,783],{"class":569},[560,10488,736],{"class":565},[560,10490,10491],{"class":573},"position-z",[560,10493,580],{"class":565},[560,10495,583],{"class":565},[560,10497,8698],{"class":565},[560,10499,1847],{"class":746},[560,10501,583],{"class":565},[560,10503,592],{"class":565},[560,10505,10506,10508,10510],{"class":562,"line":2660},[560,10507,780],{"class":565},[560,10509,794],{"class":569},[560,10511,710],{"class":565},[560,10513,10514,10516,10518,10521,10523,10525,10528,10530,10532,10534,10536],{"class":562,"line":2669},[560,10515,780],{"class":565},[560,10517,804],{"class":569},[560,10519,10520],{"class":573}," v-bind",[560,10522,580],{"class":565},[560,10524,583],{"class":565},[560,10526,10527],{"class":2428},"useMask",[560,10529,2431],{"class":565},[560,10531,1847],{"class":746},[560,10533,3355],{"class":565},[560,10535,583],{"class":565},[560,10537,710],{"class":565},[560,10539,10540,10542,10544],{"class":562,"line":2678},[560,10541,822],{"class":565},[560,10543,783],{"class":569},[560,10545,592],{"class":565},[560,10547,10548],{"class":562,"line":2687},[560,10549,665],{"emptyLinePlaceholder":516},[560,10551,10552,10554,10556,10558,10560,10562,10564,10566,10568,10570],{"class":562,"line":2709},[560,10553,704],{"class":565},[560,10555,783],{"class":569},[560,10557,736],{"class":565},[560,10559,10491],{"class":573},[560,10561,580],{"class":565},[560,10563,583],{"class":565},[560,10565,8698],{"class":565},[560,10567,2651],{"class":746},[560,10569,583],{"class":565},[560,10571,592],{"class":565},[560,10573,10574,10576,10578],{"class":562,"line":2760},[560,10575,780],{"class":565},[560,10577,794],{"class":569},[560,10579,710],{"class":565},[560,10581,10582,10584,10586,10588,10590,10592,10594,10596,10598,10600,10602],{"class":562,"line":2769},[560,10583,780],{"class":565},[560,10585,804],{"class":569},[560,10587,10520],{"class":573},[560,10589,580],{"class":565},[560,10591,583],{"class":565},[560,10593,10527],{"class":2428},[560,10595,2431],{"class":565},[560,10597,1847],{"class":746},[560,10599,3355],{"class":565},[560,10601,583],{"class":565},[560,10603,710],{"class":565},[560,10605,10606,10608,10610],{"class":562,"line":2778},[560,10607,822],{"class":565},[560,10609,783],{"class":569},[560,10611,592],{"class":565},[560,10613,10614],{"class":562,"line":3980},[560,10615,665],{"emptyLinePlaceholder":516},[560,10617,10618,10620,10622,10624,10626,10628,10630,10632,10634,10636],{"class":562,"line":4024},[560,10619,704],{"class":565},[560,10621,783],{"class":569},[560,10623,736],{"class":565},[560,10625,10491],{"class":573},[560,10627,580],{"class":565},[560,10629,583],{"class":565},[560,10631,8698],{"class":565},[560,10633,7588],{"class":746},[560,10635,583],{"class":565},[560,10637,592],{"class":565},[560,10639,10640,10642,10644],{"class":562,"line":4051},[560,10641,780],{"class":565},[560,10643,794],{"class":569},[560,10645,710],{"class":565},[560,10647,10648,10650,10652],{"class":562,"line":4070},[560,10649,780],{"class":565},[560,10651,804],{"class":569},[560,10653,710],{"class":565},[560,10655,10656,10658,10660],{"class":562,"line":4111},[560,10657,822],{"class":565},[560,10659,783],{"class":569},[560,10661,592],{"class":565},[560,10663,10664,10666,10668],{"class":562,"line":4120},[560,10665,832],{"class":565},[560,10667,684],{"class":569},[560,10669,592],{"class":565},[560,10671,10672,10674,10676],{"class":562,"line":4129},[560,10673,655],{"class":565},[560,10675,673],{"class":569},[560,10677,592],{"class":565},[545,10679,849],{"id":848},[854,10681,10682,10692],{},[857,10683,10684],{},[860,10685,10686,10688,10690],{},[863,10687,865],{"align":924},[863,10689,868],{"align":924},[863,10691,871],{},[873,10693,10694,10710,10726],{},[860,10695,10696,10702,10708],{},[878,10697,10698],{"align":924},[1627,10699,10700],{},[540,10701,10419],{},[878,10703,10704,10705,10707],{"align":924},"Id of the stencil buffer to use. Each mask must have a ",[540,10706,5486],{}," id. Multiple masks can refer to the same id.",[878,10709],{},[860,10711,10712,10719,10722],{},[878,10713,10714],{"align":924},[1627,10715,10716],{},[540,10717,10718],{},"colorWrite",[878,10720,10721],{"align":924},"Whether the colors of the mask's own material will leak through.",[878,10723,10724],{},[540,10725,898],{},[860,10727,10728,10735,10738],{},[878,10729,10730],{"align":924},[1627,10731,10732],{},[540,10733,10734],{},"depthWrite",[878,10736,10737],{"align":924},"Whether the depth of the mask's own material will leak through.",[878,10739,10740],{},[540,10741,898],{},[545,10743,10527],{"id":10744},"usemask",[536,10746,10747,10748,10751],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[540,10749,10750],{},"v-bind"," on materials that should be affected by the mask.",[536,10753,10754],{},[1627,10755,10756],{},"Parameters:",[2207,10758,10759,10764],{},[2210,10760,10761,10763],{},[540,10762,10419],{}," - The mask id to use (number or Ref)",[2210,10765,10766,10769,10770],{},[540,10767,10768],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[540,10771,898],{},[549,10773,10775],{"className":551,"code":10774,"language":556,"meta":508,"style":508},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n",[540,10776,10777],{"__ignoreMap":508},[560,10778,10779,10781,10783,10785,10787,10789,10791,10793,10795,10797,10799],{"class":562,"line":509},[560,10780,566],{"class":565},[560,10782,804],{"class":569},[560,10784,10520],{"class":573},[560,10786,580],{"class":565},[560,10788,583],{"class":565},[560,10790,10527],{"class":2428},[560,10792,2431],{"class":606},[560,10794,1847],{"class":746},[560,10796,3355],{"class":606},[560,10798,583],{"class":565},[560,10800,710],{"class":565},[1254,10802,10803],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":508,"searchDepth":509,"depth":510,"links":10805},[10806,10807,10808],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},{"id":10744,"depth":510,"text":10527},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10809},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":10814,"title":77,"body":10815,"description":11653,"extension":513,"links":514,"meta":11654,"navigation":516,"path":78,"seo":11655,"stem":79,"__hash__":11656},"docs\u002F2.api\u002F1.abstractions\u002Fmerged.md",{"type":501,"value":10816,"toc":11647},[10817,10822,10833,10840,10842,10845,11120,11123,11472,11480,11484,11492,11559,11562,11566,11578,11580,11629,11634,11644],[530,10818,10819],{},[10820,10821],"abstractions-merged",{},[536,10823,10824,8924,10826,10829,10830,1073],{},[540,10825,9265],{},[540,10827,10828],{},"{ 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,10831,10832],{},"\u003CInstance batch=\"...\" \u002F>",[536,10834,10835,10836,10839],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1627,10837,10838],{},"two"," drawcalls, not 98.",[545,10841,15],{"id":547},[536,10843,10844],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[549,10846,10849],{"className":551,"code":10847,"filename":10848,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Instance } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CInstance batch=\"Body\" :position=\"[0, 0.6, 0]\" \u002F>\n \u003CInstance batch=\"Body\" :position=\"[0, 1.6, 0]\" :scale=\"0.6\" \u002F>\n \u003CInstance batch=\"Eye\" :position=\"[-0.18, 1.7, 0.32]\" \u002F>\n \u003CInstance batch=\"Eye\" :position=\"[0.18, 1.7, 0.32]\" \u002F>\n \u003C\u002FTresGroup>\n\u003C\u002Ftemplate>\n","Robot.vue",[540,10850,10851,10871,10889,10897,10901,10909,10917,10961,11016,11062,11104,11112],{"__ignoreMap":508},[560,10852,10853,10855,10857,10859,10861,10863,10865,10867,10869],{"class":562,"line":509},[560,10854,566],{"class":565},[560,10856,570],{"class":569},[560,10858,574],{"class":573},[560,10860,577],{"class":573},[560,10862,580],{"class":565},[560,10864,583],{"class":565},[560,10866,587],{"class":586},[560,10868,583],{"class":565},[560,10870,592],{"class":565},[560,10872,10873,10875,10877,10879,10881,10883,10885,10887],{"class":562,"line":510},[560,10874,600],{"class":599},[560,10876,603],{"class":565},[560,10878,8519],{"class":606},[560,10880,616],{"class":565},[560,10882,619],{"class":599},[560,10884,622],{"class":565},[560,10886,625],{"class":586},[560,10888,628],{"class":565},[560,10890,10891,10893,10895],{"class":562,"line":631},[560,10892,655],{"class":565},[560,10894,570],{"class":569},[560,10896,592],{"class":565},[560,10898,10899],{"class":562,"line":652},[560,10900,665],{"emptyLinePlaceholder":516},[560,10902,10903,10905,10907],{"class":562,"line":662},[560,10904,566],{"class":565},[560,10906,673],{"class":569},[560,10908,592],{"class":565},[560,10910,10911,10913,10915],{"class":562,"line":668},[560,10912,681],{"class":565},[560,10914,10324],{"class":569},[560,10916,592],{"class":565},[560,10918,10919,10921,10923,10926,10928,10930,10932,10934,10936,10938,10940,10942,10944,10946,10948,10951,10953,10955,10957,10959],{"class":562,"line":678},[560,10920,704],{"class":565},[560,10922,8943],{"class":569},[560,10924,10925],{"class":573}," batch",[560,10927,580],{"class":565},[560,10929,583],{"class":565},[560,10931,4824],{"class":586},[560,10933,583],{"class":565},[560,10935,736],{"class":565},[560,10937,1413],{"class":573},[560,10939,580],{"class":565},[560,10941,583],{"class":565},[560,10943,1420],{"class":565},[560,10945,892],{"class":746},[560,10947,1425],{"class":565},[560,10949,10950],{"class":746},"0.6",[560,10952,1425],{"class":565},[560,10954,892],{"class":746},[560,10956,1435],{"class":565},[560,10958,583],{"class":565},[560,10960,710],{"class":565},[560,10962,10963,10965,10967,10969,10971,10973,10975,10977,10979,10981,10983,10985,10987,10989,10991,10994,10996,10998,11000,11002,11004,11006,11008,11010,11012,11014],{"class":562,"line":701},[560,10964,704],{"class":565},[560,10966,8943],{"class":569},[560,10968,10925],{"class":573},[560,10970,580],{"class":565},[560,10972,583],{"class":565},[560,10974,4824],{"class":586},[560,10976,583],{"class":565},[560,10978,736],{"class":565},[560,10980,1413],{"class":573},[560,10982,580],{"class":565},[560,10984,583],{"class":565},[560,10986,1420],{"class":565},[560,10988,892],{"class":746},[560,10990,1425],{"class":565},[560,10992,10993],{"class":746},"1.6",[560,10995,1425],{"class":565},[560,10997,892],{"class":746},[560,10999,1435],{"class":565},[560,11001,583],{"class":565},[560,11003,736],{"class":565},[560,11005,739],{"class":573},[560,11007,580],{"class":565},[560,11009,583],{"class":565},[560,11011,10950],{"class":746},[560,11013,583],{"class":565},[560,11015,710],{"class":565},[560,11017,11018,11020,11022,11024,11026,11028,11031,11033,11035,11037,11039,11041,11043,11046,11048,11051,11053,11056,11058,11060],{"class":562,"line":713},[560,11019,704],{"class":565},[560,11021,8943],{"class":569},[560,11023,10925],{"class":573},[560,11025,580],{"class":565},[560,11027,583],{"class":565},[560,11029,11030],{"class":586},"Eye",[560,11032,583],{"class":565},[560,11034,736],{"class":565},[560,11036,1413],{"class":573},[560,11038,580],{"class":565},[560,11040,583],{"class":565},[560,11042,3869],{"class":565},[560,11044,11045],{"class":746},"0.18",[560,11047,1425],{"class":565},[560,11049,11050],{"class":746},"1.7",[560,11052,1425],{"class":565},[560,11054,11055],{"class":746},"0.32",[560,11057,1435],{"class":565},[560,11059,583],{"class":565},[560,11061,710],{"class":565},[560,11063,11064,11066,11068,11070,11072,11074,11076,11078,11080,11082,11084,11086,11088,11090,11092,11094,11096,11098,11100,11102],{"class":562,"line":723},[560,11065,704],{"class":565},[560,11067,8943],{"class":569},[560,11069,10925],{"class":573},[560,11071,580],{"class":565},[560,11073,583],{"class":565},[560,11075,11030],{"class":586},[560,11077,583],{"class":565},[560,11079,736],{"class":565},[560,11081,1413],{"class":573},[560,11083,580],{"class":565},[560,11085,583],{"class":565},[560,11087,1420],{"class":565},[560,11089,11045],{"class":746},[560,11091,1425],{"class":565},[560,11093,11050],{"class":746},[560,11095,1425],{"class":565},[560,11097,11055],{"class":746},[560,11099,1435],{"class":565},[560,11101,583],{"class":565},[560,11103,710],{"class":565},[560,11105,11106,11108,11110],{"class":562,"line":728},[560,11107,832],{"class":565},[560,11109,10324],{"class":569},[560,11111,592],{"class":565},[560,11113,11114,11116,11118],{"class":562,"line":754},[560,11115,655],{"class":565},[560,11117,673],{"class":569},[560,11119,592],{"class":565},[536,11121,11122],{},"The provider hands over the meshes and renders as many copies as it likes:",[549,11124,11127],{"className":551,"code":11125,"highlights":11126,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Merged, useGLTF } from '@tresjs\u002Fcientos'\nimport Robot from '.\u002FRobot.vue'\n\nconst { nodes } = useGLTF('\u002Frobot.glb')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[12, 9, 12]\" \u002F>\n \u003CMerged :meshes=\"{ Body: nodes.Body, Eye: nodes.Eye }\">\n \u003CRobot :position=\"[-2, 0, 0]\" \u002F>\n \u003CRobot :position=\"[0, 0, 0]\" \u002F>\n \u003CRobot :position=\"[2, 0, 0]\" \u002F>\n \u003C\u002FMerged>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[754,554,777,788,799,809,555],[540,11128,11129,11149,11167,11190,11206,11210,11235,11243,11247,11255,11263,11297,11345,11379,11412,11445,11454,11463],{"__ignoreMap":508},[560,11130,11131,11133,11135,11137,11139,11141,11143,11145,11147],{"class":562,"line":509},[560,11132,566],{"class":565},[560,11134,570],{"class":569},[560,11136,574],{"class":573},[560,11138,577],{"class":573},[560,11140,580],{"class":565},[560,11142,583],{"class":565},[560,11144,587],{"class":586},[560,11146,583],{"class":565},[560,11148,592],{"class":565},[560,11150,11151,11153,11155,11157,11159,11161,11163,11165],{"class":562,"line":510},[560,11152,600],{"class":599},[560,11154,603],{"class":565},[560,11156,638],{"class":606},[560,11158,616],{"class":565},[560,11160,619],{"class":599},[560,11162,622],{"class":565},[560,11164,647],{"class":586},[560,11166,628],{"class":565},[560,11168,11169,11171,11173,11176,11178,11180,11182,11184,11186,11188],{"class":562,"line":631},[560,11170,600],{"class":599},[560,11172,603],{"class":565},[560,11174,11175],{"class":606}," Merged",[560,11177,610],{"class":565},[560,11179,4432],{"class":606},[560,11181,616],{"class":565},[560,11183,619],{"class":599},[560,11185,622],{"class":565},[560,11187,625],{"class":586},[560,11189,628],{"class":565},[560,11191,11192,11194,11197,11199,11201,11204],{"class":562,"line":652},[560,11193,600],{"class":599},[560,11195,11196],{"class":606}," Robot ",[560,11198,8626],{"class":599},[560,11200,622],{"class":565},[560,11202,11203],{"class":586},".\u002FRobot.vue",[560,11205,628],{"class":565},[560,11207,11208],{"class":562,"line":662},[560,11209,665],{"emptyLinePlaceholder":516},[560,11211,11212,11214,11216,11218,11220,11222,11224,11226,11228,11231,11233],{"class":562,"line":668},[560,11213,2409],{"class":573},[560,11215,603],{"class":565},[560,11217,4455],{"class":606},[560,11219,2422],{"class":565},[560,11221,2425],{"class":565},[560,11223,4432],{"class":2428},[560,11225,2431],{"class":606},[560,11227,2434],{"class":565},[560,11229,11230],{"class":586},"\u002Frobot.glb",[560,11232,2434],{"class":565},[560,11234,2442],{"class":606},[560,11236,11237,11239,11241],{"class":562,"line":678},[560,11238,655],{"class":565},[560,11240,570],{"class":569},[560,11242,592],{"class":565},[560,11244,11245],{"class":562,"line":701},[560,11246,665],{"emptyLinePlaceholder":516},[560,11248,11249,11251,11253],{"class":562,"line":713},[560,11250,566],{"class":565},[560,11252,673],{"class":569},[560,11254,592],{"class":565},[560,11256,11257,11259,11261],{"class":562,"line":723},[560,11258,681],{"class":565},[560,11260,684],{"class":569},[560,11262,592],{"class":565},[560,11264,11265,11267,11269,11271,11273,11275,11277,11279,11282,11284,11287,11289,11291,11293,11295],{"class":562,"line":728},[560,11266,704],{"class":565},[560,11268,707],{"class":569},[560,11270,736],{"class":565},[560,11272,1413],{"class":573},[560,11274,580],{"class":565},[560,11276,583],{"class":565},[560,11278,1420],{"class":565},[560,11280,11281],{"class":746},"12",[560,11283,1425],{"class":565},[560,11285,11286],{"class":746},"9",[560,11288,1425],{"class":565},[560,11290,11281],{"class":746},[560,11292,1435],{"class":565},[560,11294,583],{"class":565},[560,11296,710],{"class":565},[560,11298,11300,11302,11304,11306,11309,11311,11313,11316,11318,11321,11323,11325,11327,11329,11331,11333,11335,11337,11339,11341,11343],{"class":11299,"line":754},[562,596],[560,11301,704],{"class":565},[560,11303,77],{"class":569},[560,11305,736],{"class":565},[560,11307,11308],{"class":573},"meshes",[560,11310,580],{"class":565},[560,11312,583],{"class":565},[560,11314,11315],{"class":565},"{ ",[560,11317,4824],{"class":569},[560,11319,11320],{"class":565},": ",[560,11322,5245],{"class":606},[560,11324,1073],{"class":565},[560,11326,4824],{"class":606},[560,11328,1425],{"class":565},[560,11330,11030],{"class":569},[560,11332,11320],{"class":565},[560,11334,5245],{"class":606},[560,11336,1073],{"class":565},[560,11338,11030],{"class":606},[560,11340,616],{"class":565},[560,11342,583],{"class":565},[560,11344,592],{"class":565},[560,11346,11348,11350,11353,11355,11357,11359,11361,11363,11365,11367,11369,11371,11373,11375,11377],{"class":11347,"line":554},[562,596],[560,11349,780],{"class":565},[560,11351,11352],{"class":569},"Robot",[560,11354,736],{"class":565},[560,11356,1413],{"class":573},[560,11358,580],{"class":565},[560,11360,583],{"class":565},[560,11362,3869],{"class":565},[560,11364,747],{"class":746},[560,11366,1425],{"class":565},[560,11368,892],{"class":746},[560,11370,1425],{"class":565},[560,11372,892],{"class":746},[560,11374,1435],{"class":565},[560,11376,583],{"class":565},[560,11378,710],{"class":565},[560,11380,11382,11384,11386,11388,11390,11392,11394,11396,11398,11400,11402,11404,11406,11408,11410],{"class":11381,"line":777},[562,596],[560,11383,780],{"class":565},[560,11385,11352],{"class":569},[560,11387,736],{"class":565},[560,11389,1413],{"class":573},[560,11391,580],{"class":565},[560,11393,583],{"class":565},[560,11395,1420],{"class":565},[560,11397,892],{"class":746},[560,11399,1425],{"class":565},[560,11401,892],{"class":746},[560,11403,1425],{"class":565},[560,11405,892],{"class":746},[560,11407,1435],{"class":565},[560,11409,583],{"class":565},[560,11411,710],{"class":565},[560,11413,11415,11417,11419,11421,11423,11425,11427,11429,11431,11433,11435,11437,11439,11441,11443],{"class":11414,"line":788},[562,596],[560,11416,780],{"class":565},[560,11418,11352],{"class":569},[560,11420,736],{"class":565},[560,11422,1413],{"class":573},[560,11424,580],{"class":565},[560,11426,583],{"class":565},[560,11428,1420],{"class":565},[560,11430,747],{"class":746},[560,11432,1425],{"class":565},[560,11434,892],{"class":746},[560,11436,1425],{"class":565},[560,11438,892],{"class":746},[560,11440,1435],{"class":565},[560,11442,583],{"class":565},[560,11444,710],{"class":565},[560,11446,11448,11450,11452],{"class":11447,"line":799},[562,596],[560,11449,822],{"class":565},[560,11451,77],{"class":569},[560,11453,592],{"class":565},[560,11455,11457,11459,11461],{"class":11456,"line":809},[562,596],[560,11458,832],{"class":565},[560,11460,684],{"class":569},[560,11462,592],{"class":565},[560,11464,11466,11468,11470],{"class":11465,"line":555},[562,596],[560,11467,655],{"class":565},[560,11469,673],{"class":569},[560,11471,592],{"class":565},[2000,11473,11474],{},[536,11475,11476,11477,11479],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[540,11478,8437],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[545,11481,11483],{"id":11482},"instancing-a-whole-gltf","Instancing a whole glTF",[536,11485,11486,11488,11489,11491],{},[540,11487,133],{}," gives you ",[540,11490,5245],{},", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[549,11493,11495],{"className":551,"code":11494,"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]\" \u002F>\n\u003C\u002FMerged>\n",[540,11496,11497,11546,11551],{"__ignoreMap":508},[560,11498,11499,11501,11503,11505,11507,11509,11511,11513,11516,11518,11521,11523,11526,11528,11531,11533,11535,11537,11540,11542,11544],{"class":562,"line":509},[560,11500,566],{"class":565},[560,11502,77],{"class":569},[560,11504,736],{"class":565},[560,11506,11308],{"class":573},[560,11508,580],{"class":565},[560,11510,583],{"class":565},[560,11512,8631],{"class":565},[560,11514,11515],{"class":569}," Screw",[560,11517,1145],{"class":565},[560,11519,11520],{"class":606}," nodes",[560,11522,1073],{"class":565},[560,11524,11525],{"class":606},"Screw",[560,11527,610],{"class":565},[560,11529,11530],{"class":569}," Bolt",[560,11532,1145],{"class":565},[560,11534,11520],{"class":606},[560,11536,1073],{"class":565},[560,11538,11539],{"class":606},"Bolt ",[560,11541,2422],{"class":565},[560,11543,583],{"class":565},[560,11545,592],{"class":565},[560,11547,11548],{"class":562,"line":510},[560,11549,11550],{"class":606}," \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" \u002F>\n",[560,11552,11553,11555,11557],{"class":562,"line":631},[560,11554,655],{"class":565},[560,11556,77],{"class":569},[560,11558,592],{"class":565},[536,11560,11561],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[545,11563,11565],{"id":11564},"opting-a-node-out","Opting a node out",[536,11567,8449,11568,11570,11571,11574,11575,11577],{},[540,11569,8437],{}," 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,11572,11573],{},"\u003CTresMesh \u002F>","\ninstead of an ",[540,11576,8437],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[545,11579,849],{"id":848},[854,11581,11582,11592],{},[857,11583,11584],{},[860,11585,11586,11588,11590],{},[863,11587,865],{"align":924},[863,11589,868],{"align":924},[863,11591,871],{},[873,11593,11594,11610],{},[860,11595,11596,11600,11606],{},[878,11597,11598],{"align":924},[540,11599,11308],{},[878,11601,11602,11603,11605],{"align":924},"One batch per entry, keyed by what ",[540,11604,10832],{}," joins.",[878,11607,11608],{},[1631,11609,9481],{},[860,11611,11612,11616,11624],{},[878,11613,11614],{"align":924},[540,11615,9301],{},[878,11617,11618,11619,11621,11622,1073],{"align":924},"Initial buffer allocation per batch. One batch per entry in ",[540,11620,11308],{},", so it defaults lower than ",[540,11623,8430],{},[878,11625,11626],{},[540,11627,11628],{},"100",[536,11630,11631,11632,1073],{},"Exposes the named batch registry through ",[540,11633,9453],{},[9641,11635,11636],{"to":66},[536,11637,11638,11639,11641,11642,1073],{},"Per-instance colors, pointer events, visibility and the ",[540,11640,9301],{}," growth behaviour are documented on ",[540,11643,8430],{},[1254,11645,11646],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":508,"searchDepth":509,"depth":510,"links":11648},[11649,11650,11651,11652],{"id":547,"depth":510,"text":15},{"id":11482,"depth":510,"text":11483},{"id":11564,"depth":510,"text":11565},{"id":848,"depth":510,"text":849},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11653},"3F6JCpa8a9Uibd4xr6WY6bvefyMLo6XgADbv_ux0u-g",{"id":11658,"title":81,"body":11659,"description":12160,"extension":513,"links":514,"meta":12161,"navigation":516,"path":82,"seo":12162,"stem":83,"__hash__":12163},"docs\u002F2.api\u002F1.abstractions\u002Foutline.md",{"type":501,"value":11660,"toc":12156},[11661,11666,11677,11679,12057,12059,12154],[530,11662,11663],{},[11664,11665],"abstractions-outline",{},[536,11667,11668,11671,11672,3078,11674,1073],{},[540,11669,11670],{},"\u003COutline \u002F>"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[540,11673,2304],{},[540,11675,11676],{},"\u003CTresSkinnedMesh>",[545,11678,15],{"id":547},[549,11680,11683],{"className":551,"code":11681,"highlights":11682,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { OrbitControls, Outline } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n \u003CTresAmbientLight :intensity=\"3.14\" \u002F>\n \u003CTresPointLight :intensity=\"50\" :position=\"[2, 2, 0]\" \u002F>\n \u003CTresMesh :position-x=\"-0.75\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshPhongMaterial \u002F>\n \u003COutline :thickness=\"7.5\" color=\"#82dbc5\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresMesh :position-x=\"0.75\">\n \u003CTresSphereGeometry :args=\"[0.5]\" \u002F>\n \u003CTresMeshPhongMaterial \u002F>\n \u003COutline :thickness=\"7.5\" color=\"#fbb03b\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[631,788,839],[540,11684,11685,11705,11723,11747,11755,11759,11767,11785,11793,11801,11822,11868,11891,11899,11908,11942,11950,11970,11994,12002,12033,12041,12049],{"__ignoreMap":508},[560,11686,11687,11689,11691,11693,11695,11697,11699,11701,11703],{"class":562,"line":509},[560,11688,566],{"class":565},[560,11690,570],{"class":569},[560,11692,574],{"class":573},[560,11694,577],{"class":573},[560,11696,580],{"class":565},[560,11698,583],{"class":565},[560,11700,587],{"class":586},[560,11702,583],{"class":565},[560,11704,592],{"class":565},[560,11706,11707,11709,11711,11713,11715,11717,11719,11721],{"class":562,"line":510},[560,11708,600],{"class":599},[560,11710,603],{"class":565},[560,11712,638],{"class":606},[560,11714,616],{"class":565},[560,11716,619],{"class":599},[560,11718,622],{"class":565},[560,11720,647],{"class":586},[560,11722,628],{"class":565},[560,11724,11726,11728,11730,11732,11734,11737,11739,11741,11743,11745],{"class":11725,"line":631},[562,596],[560,11727,600],{"class":599},[560,11729,603],{"class":565},[560,11731,613],{"class":606},[560,11733,610],{"class":565},[560,11735,11736],{"class":606}," Outline",[560,11738,616],{"class":565},[560,11740,619],{"class":599},[560,11742,622],{"class":565},[560,11744,625],{"class":586},[560,11746,628],{"class":565},[560,11748,11749,11751,11753],{"class":562,"line":652},[560,11750,655],{"class":565},[560,11752,570],{"class":569},[560,11754,592],{"class":565},[560,11756,11757],{"class":562,"line":662},[560,11758,665],{"emptyLinePlaceholder":516},[560,11760,11761,11763,11765],{"class":562,"line":668},[560,11762,566],{"class":565},[560,11764,673],{"class":569},[560,11766,592],{"class":565},[560,11768,11769,11771,11773,11775,11777,11779,11781,11783],{"class":562,"line":678},[560,11770,681],{"class":565},[560,11772,684],{"class":569},[560,11774,687],{"class":573},[560,11776,580],{"class":565},[560,11778,583],{"class":565},[560,11780,10293],{"class":586},[560,11782,583],{"class":565},[560,11784,592],{"class":565},[560,11786,11787,11789,11791],{"class":562,"line":701},[560,11788,704],{"class":565},[560,11790,707],{"class":569},[560,11792,710],{"class":565},[560,11794,11795,11797,11799],{"class":562,"line":713},[560,11796,704],{"class":565},[560,11798,718],{"class":569},[560,11800,710],{"class":565},[560,11802,11803,11805,11807,11809,11811,11813,11815,11818,11820],{"class":562,"line":723},[560,11804,704],{"class":565},[560,11806,9932],{"class":569},[560,11808,736],{"class":565},[560,11810,1840],{"class":573},[560,11812,580],{"class":565},[560,11814,583],{"class":565},[560,11816,11817],{"class":746},"3.14",[560,11819,583],{"class":565},[560,11821,710],{"class":565},[560,11823,11824,11826,11829,11831,11833,11835,11837,11840,11842,11844,11846,11848,11850,11852,11854,11856,11858,11860,11862,11864,11866],{"class":562,"line":728},[560,11825,704],{"class":565},[560,11827,11828],{"class":569},"TresPointLight",[560,11830,736],{"class":565},[560,11832,1840],{"class":573},[560,11834,580],{"class":565},[560,11836,583],{"class":565},[560,11838,11839],{"class":746},"50",[560,11841,583],{"class":565},[560,11843,736],{"class":565},[560,11845,1413],{"class":573},[560,11847,580],{"class":565},[560,11849,583],{"class":565},[560,11851,1420],{"class":565},[560,11853,747],{"class":746},[560,11855,1425],{"class":565},[560,11857,747],{"class":746},[560,11859,1425],{"class":565},[560,11861,892],{"class":746},[560,11863,1435],{"class":565},[560,11865,583],{"class":565},[560,11867,710],{"class":565},[560,11869,11870,11872,11874,11876,11879,11881,11883,11885,11887,11889],{"class":562,"line":754},[560,11871,704],{"class":565},[560,11873,783],{"class":569},[560,11875,736],{"class":565},[560,11877,11878],{"class":573},"position-x",[560,11880,580],{"class":565},[560,11882,583],{"class":565},[560,11884,8698],{"class":565},[560,11886,2543],{"class":746},[560,11888,583],{"class":565},[560,11890,592],{"class":565},[560,11892,11893,11895,11897],{"class":562,"line":554},[560,11894,780],{"class":565},[560,11896,794],{"class":569},[560,11898,710],{"class":565},[560,11900,11901,11903,11906],{"class":562,"line":777},[560,11902,780],{"class":565},[560,11904,11905],{"class":569},"TresMeshPhongMaterial",[560,11907,710],{"class":565},[560,11909,11911,11913,11915,11917,11920,11922,11924,11927,11929,11931,11933,11935,11938,11940],{"class":11910,"line":788},[562,596],[560,11912,780],{"class":565},[560,11914,81],{"class":569},[560,11916,736],{"class":565},[560,11918,11919],{"class":573},"thickness",[560,11921,580],{"class":565},[560,11923,583],{"class":565},[560,11925,11926],{"class":746},"7.5",[560,11928,583],{"class":565},[560,11930,2695],{"class":573},[560,11932,580],{"class":565},[560,11934,583],{"class":565},[560,11936,11937],{"class":586},"#82dbc5",[560,11939,583],{"class":565},[560,11941,710],{"class":565},[560,11943,11944,11946,11948],{"class":562,"line":799},[560,11945,822],{"class":565},[560,11947,783],{"class":569},[560,11949,592],{"class":565},[560,11951,11952,11954,11956,11958,11960,11962,11964,11966,11968],{"class":562,"line":809},[560,11953,704],{"class":565},[560,11955,783],{"class":569},[560,11957,736],{"class":565},[560,11959,11878],{"class":573},[560,11961,580],{"class":565},[560,11963,583],{"class":565},[560,11965,2543],{"class":746},[560,11967,583],{"class":565},[560,11969,592],{"class":565},[560,11971,11972,11974,11976,11978,11980,11982,11984,11986,11988,11990,11992],{"class":562,"line":555},[560,11973,780],{"class":565},[560,11975,4029],{"class":569},[560,11977,736],{"class":565},[560,11979,1943],{"class":573},[560,11981,580],{"class":565},[560,11983,583],{"class":565},[560,11985,1420],{"class":565},[560,11987,1467],{"class":746},[560,11989,1435],{"class":565},[560,11991,583],{"class":565},[560,11993,710],{"class":565},[560,11995,11996,11998,12000],{"class":562,"line":829},[560,11997,780],{"class":565},[560,11999,11905],{"class":569},[560,12001,710],{"class":565},[560,12003,12005,12007,12009,12011,12013,12015,12017,12019,12021,12023,12025,12027,12029,12031],{"class":12004,"line":839},[562,596],[560,12006,780],{"class":565},[560,12008,81],{"class":569},[560,12010,736],{"class":565},[560,12012,11919],{"class":573},[560,12014,580],{"class":565},[560,12016,583],{"class":565},[560,12018,11926],{"class":746},[560,12020,583],{"class":565},[560,12022,2695],{"class":573},[560,12024,580],{"class":565},[560,12026,583],{"class":565},[560,12028,10455],{"class":586},[560,12030,583],{"class":565},[560,12032,710],{"class":565},[560,12034,12035,12037,12039],{"class":562,"line":2617},[560,12036,822],{"class":565},[560,12038,783],{"class":569},[560,12040,592],{"class":565},[560,12042,12043,12045,12047],{"class":562,"line":2626},[560,12044,832],{"class":565},[560,12046,684],{"class":569},[560,12048,592],{"class":565},[560,12050,12051,12053,12055],{"class":562,"line":2660},[560,12052,655],{"class":565},[560,12054,673],{"class":569},[560,12056,592],{"class":565},[545,12058,849],{"id":848},[854,12060,12061,12071],{},[857,12062,12063],{},[860,12064,12065,12067,12069],{},[863,12066,849],{},[863,12068,868],{},[863,12070,871],{},[873,12072,12073,12085,12097,12109,12121,12133],{},[860,12074,12075,12077,12080],{},[878,12076,7692],{},[878,12078,12079],{},"Outline color",[878,12081,12082],{},[540,12083,12084],{},"'black'",[860,12086,12087,12090,12093],{},[878,12088,12089],{},"screenspace",[878,12091,12092],{},"Whether line thickness is independent of zoom",[878,12094,12095],{},[540,12096,898],{},[860,12098,12099,12102,12105],{},[878,12100,12101],{},"opacity",[878,12103,12104],{},"Outline opacity",[878,12106,12107],{},[540,12108,1847],{},[860,12110,12111,12114,12117],{},[878,12112,12113],{},"transparent",[878,12115,12116],{},"Outline transparency",[878,12118,12119],{},[540,12120,898],{},[860,12122,12123,12125,12128],{},[878,12124,11919],{},[878,12126,12127],{},"Outline thickness",[878,12129,12130],{},[540,12131,12132],{},"0.05",[860,12134,12135,12138,12149],{},[878,12136,12137],{},"angle",[878,12139,12140,12141,12143,12144],{},"Geometry crease angle (",[540,12142,892],{}," is no crease). See ",[1067,12145,12148],{"href":12146,"rel":12147},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#examples\u002Fen\u002Futils\u002FBufferGeometryUtils.toCreasedNormals",[1071],"BufferGeometryUtils.toCreasedNormals",[878,12150,12151],{},[540,12152,12153],{},"Math.PI",[1254,12155,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":12157},[12158,12159],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":12160},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":12165,"title":85,"body":12166,"description":13048,"extension":513,"links":514,"meta":13049,"navigation":516,"path":86,"seo":13050,"stem":87,"__hash__":13051},"docs\u002F2.api\u002F1.abstractions\u002Fsampler.md",{"type":501,"value":12167,"toc":13043},[12168,12173,12176,12178,12514,12516,12580,12584,12591,13040],[530,12169,12170],{},[12171,12172],"abstractions-sampler",{},[536,12174,12175],{},"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,12177,15],{"id":547},[549,12179,12182],{"className":551,"code":12180,"highlights":12181,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sampler } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CSampler :count=\"50\">\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresInstancedMesh :args=\"[null!, null!, 1000]\">\n \u003CTresBoxGeometry :args=\"[0.1, 0.1, 0.1]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresInstancedMesh>\n \u003C\u002FSampler>\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,728,754,554,777,788,799,809,555,829,839],[540,12183,12184,12204,12228,12246,12254,12258,12266,12285,12317,12325,12329,12351,12360,12370,12379,12384,12410,12443,12452,12461,12470,12498,12506],{"__ignoreMap":508},[560,12185,12186,12188,12190,12192,12194,12196,12198,12200,12202],{"class":562,"line":509},[560,12187,566],{"class":565},[560,12189,570],{"class":569},[560,12191,574],{"class":573},[560,12193,577],{"class":573},[560,12195,580],{"class":565},[560,12197,583],{"class":565},[560,12199,587],{"class":586},[560,12201,583],{"class":565},[560,12203,592],{"class":565},[560,12205,12207,12209,12211,12213,12215,12218,12220,12222,12224,12226],{"class":12206,"line":510},[562,596],[560,12208,600],{"class":599},[560,12210,603],{"class":565},[560,12212,613],{"class":606},[560,12214,610],{"class":565},[560,12216,12217],{"class":606}," Sampler",[560,12219,616],{"class":565},[560,12221,619],{"class":599},[560,12223,622],{"class":565},[560,12225,625],{"class":586},[560,12227,628],{"class":565},[560,12229,12230,12232,12234,12236,12238,12240,12242,12244],{"class":562,"line":631},[560,12231,600],{"class":599},[560,12233,603],{"class":565},[560,12235,638],{"class":606},[560,12237,616],{"class":565},[560,12239,619],{"class":599},[560,12241,622],{"class":565},[560,12243,647],{"class":586},[560,12245,628],{"class":565},[560,12247,12248,12250,12252],{"class":562,"line":652},[560,12249,655],{"class":565},[560,12251,570],{"class":569},[560,12253,592],{"class":565},[560,12255,12256],{"class":562,"line":662},[560,12257,665],{"emptyLinePlaceholder":516},[560,12259,12260,12262,12264],{"class":562,"line":668},[560,12261,566],{"class":565},[560,12263,673],{"class":569},[560,12265,592],{"class":565},[560,12267,12268,12270,12272,12274,12276,12278,12281,12283],{"class":562,"line":678},[560,12269,681],{"class":565},[560,12271,684],{"class":569},[560,12273,687],{"class":573},[560,12275,580],{"class":565},[560,12277,583],{"class":565},[560,12279,12280],{"class":586},"#82DBC5",[560,12282,583],{"class":565},[560,12284,592],{"class":565},[560,12286,12287,12289,12291,12293,12295,12297,12299,12301,12303,12305,12307,12309,12311,12313,12315],{"class":562,"line":701},[560,12288,704],{"class":565},[560,12290,707],{"class":569},[560,12292,736],{"class":565},[560,12294,1413],{"class":573},[560,12296,580],{"class":565},[560,12298,583],{"class":565},[560,12300,1420],{"class":565},[560,12302,892],{"class":746},[560,12304,1425],{"class":565},[560,12306,1467],{"class":746},[560,12308,1425],{"class":565},[560,12310,7588],{"class":746},[560,12312,1435],{"class":565},[560,12314,583],{"class":565},[560,12316,710],{"class":565},[560,12318,12319,12321,12323],{"class":562,"line":713},[560,12320,704],{"class":565},[560,12322,718],{"class":569},[560,12324,710],{"class":565},[560,12326,12327],{"class":562,"line":723},[560,12328,665],{"emptyLinePlaceholder":516},[560,12330,12332,12334,12336,12338,12341,12343,12345,12347,12349],{"class":12331,"line":728},[562,596],[560,12333,704],{"class":565},[560,12335,85],{"class":569},[560,12337,736],{"class":565},[560,12339,12340],{"class":573},"count",[560,12342,580],{"class":565},[560,12344,583],{"class":565},[560,12346,11839],{"class":746},[560,12348,583],{"class":565},[560,12350,592],{"class":565},[560,12352,12354,12356,12358],{"class":12353,"line":754},[562,596],[560,12355,780],{"class":565},[560,12357,783],{"class":569},[560,12359,592],{"class":565},[560,12361,12363,12365,12368],{"class":12362,"line":554},[562,596],[560,12364,791],{"class":565},[560,12366,12367],{"class":569},"TresTorusGeometry",[560,12369,710],{"class":565},[560,12371,12373,12375,12377],{"class":12372,"line":777},[562,596],[560,12374,812],{"class":565},[560,12376,783],{"class":569},[560,12378,592],{"class":565},[560,12380,12382],{"class":12381,"line":788},[562,596],[560,12383,665],{"emptyLinePlaceholder":516},[560,12385,12387,12389,12391,12393,12395,12397,12399,12402,12404,12406,12408],{"class":12386,"line":799},[562,596],[560,12388,780],{"class":565},[560,12390,9440],{"class":569},[560,12392,736],{"class":565},[560,12394,1943],{"class":573},[560,12396,580],{"class":565},[560,12398,583],{"class":565},[560,12400,12401],{"class":565},"[null!, null!, ",[560,12403,9508],{"class":746},[560,12405,1435],{"class":565},[560,12407,583],{"class":565},[560,12409,592],{"class":565},[560,12411,12413,12415,12417,12419,12421,12423,12425,12427,12429,12431,12433,12435,12437,12439,12441],{"class":12412,"line":809},[562,596],[560,12414,791],{"class":565},[560,12416,794],{"class":569},[560,12418,736],{"class":565},[560,12420,1943],{"class":573},[560,12422,580],{"class":565},[560,12424,583],{"class":565},[560,12426,1420],{"class":565},[560,12428,2157],{"class":746},[560,12430,1425],{"class":565},[560,12432,2157],{"class":746},[560,12434,1425],{"class":565},[560,12436,2157],{"class":746},[560,12438,1435],{"class":565},[560,12440,583],{"class":565},[560,12442,710],{"class":565},[560,12444,12446,12448,12450],{"class":12445,"line":555},[562,596],[560,12447,791],{"class":565},[560,12449,804],{"class":569},[560,12451,710],{"class":565},[560,12453,12455,12457,12459],{"class":12454,"line":829},[562,596],[560,12456,812],{"class":565},[560,12458,9440],{"class":569},[560,12460,592],{"class":565},[560,12462,12464,12466,12468],{"class":12463,"line":839},[562,596],[560,12465,822],{"class":565},[560,12467,85],{"class":569},[560,12469,592],{"class":565},[560,12471,12472,12474,12476,12478,12480,12482,12484,12486,12488,12490,12492,12494,12496],{"class":562,"line":2617},[560,12473,704],{"class":565},[560,12475,8233],{"class":569},[560,12477,736],{"class":565},[560,12479,1943],{"class":573},[560,12481,580],{"class":565},[560,12483,583],{"class":565},[560,12485,1420],{"class":565},[560,12487,1432],{"class":746},[560,12489,1425],{"class":565},[560,12491,1432],{"class":746},[560,12493,1435],{"class":565},[560,12495,583],{"class":565},[560,12497,710],{"class":565},[560,12499,12500,12502,12504],{"class":562,"line":2626},[560,12501,832],{"class":565},[560,12503,684],{"class":569},[560,12505,592],{"class":565},[560,12507,12508,12510,12512],{"class":562,"line":2660},[560,12509,655],{"class":565},[560,12511,673],{"class":569},[560,12513,592],{"class":565},[545,12515,849],{"id":848},[854,12517,12518,12526],{},[857,12519,12520],{},[860,12521,12522,12524],{},[863,12523,849],{},[863,12525,868],{},[873,12527,12528,12537,12547,12558,12569],{},[860,12529,12530,12532],{},[878,12531,4937],{},[878,12533,12534,12536],{},[1627,12535,4377],{}," Surface mesh from which to sample",[860,12538,12539,12541],{},[878,12540,12340],{},[878,12542,12543,12546],{},[1627,12544,12545],{},"Number"," Number of samples",[860,12548,12549,12552],{},[878,12550,12551],{},"instanceMesh",[878,12553,12554,12557],{},[1627,12555,12556],{},"InstanceMesh"," InstanceMesh to scatter",[860,12559,12560,12563],{},[878,12561,12562],{},"weight",[878,12564,12565,12568],{},[1627,12566,12567],{},"String"," A vertex attribute to be used as a weight when sampling",[860,12570,12571,12574],{},[878,12572,12573],{},"transform",[878,12575,12576,12579],{},[1627,12577,12578],{},"Function"," A function that can be used as a custom sampling",[545,12581,12583],{"id":12582},"usesurfacesampler","useSurfaceSampler",[536,12585,12586,12587],{},"A hook to obtain the result of the ",[12588,12589,12590],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[549,12592,12595],{"className":551,"code":12593,"highlights":12594,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, useSurfaceSampler } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresMesh ref=\"torusRef\">\n \u003CTresTorusGeometry \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresInstancedMesh\n ref=\"instancesRef\"\n :args=\"[null!, null!, 1_000]\"\n >\n \u003CTresSphereGeometry :args=\"[0.1, 32, 32]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresInstancedMesh>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[510,723],[540,12596,12597,12617,12641,12659,12682,12686,12699,12712,12716,12736,12770,12776,12784,12788,12796,12814,12846,12854,12858,12877,12885,12893,12897,12904,12918,12938,12943,12976,12984,12992,12996,13024,13032],{"__ignoreMap":508},[560,12598,12599,12601,12603,12605,12607,12609,12611,12613,12615],{"class":562,"line":509},[560,12600,566],{"class":565},[560,12602,570],{"class":569},[560,12604,574],{"class":573},[560,12606,577],{"class":573},[560,12608,580],{"class":565},[560,12610,583],{"class":565},[560,12612,587],{"class":586},[560,12614,583],{"class":565},[560,12616,592],{"class":565},[560,12618,12620,12622,12624,12626,12628,12631,12633,12635,12637,12639],{"class":12619,"line":510},[562,596],[560,12621,600],{"class":599},[560,12623,603],{"class":565},[560,12625,613],{"class":606},[560,12627,610],{"class":565},[560,12629,12630],{"class":606}," useSurfaceSampler",[560,12632,616],{"class":565},[560,12634,619],{"class":599},[560,12636,622],{"class":565},[560,12638,625],{"class":586},[560,12640,628],{"class":565},[560,12642,12643,12645,12647,12649,12651,12653,12655,12657],{"class":562,"line":631},[560,12644,600],{"class":599},[560,12646,603],{"class":565},[560,12648,638],{"class":606},[560,12650,616],{"class":565},[560,12652,619],{"class":599},[560,12654,622],{"class":565},[560,12656,647],{"class":586},[560,12658,628],{"class":565},[560,12660,12661,12663,12665,12667,12669,12672,12674,12676,12678,12680],{"class":562,"line":652},[560,12662,600],{"class":599},[560,12664,603],{"class":565},[560,12666,3921],{"class":606},[560,12668,610],{"class":565},[560,12670,12671],{"class":606}," watch",[560,12673,616],{"class":565},[560,12675,619],{"class":599},[560,12677,622],{"class":565},[560,12679,556],{"class":586},[560,12681,628],{"class":565},[560,12683,12684],{"class":562,"line":662},[560,12685,665],{"emptyLinePlaceholder":516},[560,12687,12688,12690,12693,12695,12697],{"class":562,"line":668},[560,12689,2409],{"class":573},[560,12691,12692],{"class":606}," torusRef ",[560,12694,580],{"class":565},[560,12696,3921],{"class":2428},[560,12698,6666],{"class":606},[560,12700,12701,12703,12706,12708,12710],{"class":562,"line":678},[560,12702,2409],{"class":573},[560,12704,12705],{"class":606}," instancesRef ",[560,12707,580],{"class":565},[560,12709,3921],{"class":2428},[560,12711,6666],{"class":606},[560,12713,12714],{"class":562,"line":701},[560,12715,665],{"emptyLinePlaceholder":516},[560,12717,12718,12721,12724,12726,12728,12730,12732,12734],{"class":562,"line":713},[560,12719,12720],{"class":2428},"watch",[560,12722,12723],{"class":606},"(torusRef",[560,12725,610],{"class":565},[560,12727,3089],{"class":565},[560,12729,3700],{"class":6969},[560,12731,3355],{"class":565},[560,12733,3692],{"class":573},[560,12735,1131],{"class":565},[560,12737,12739,12742,12744,12746,12748,12751,12753,12756,12758,12760,12762,12764,12766,12768],{"class":12738,"line":723},[562,596],[560,12740,12741],{"class":2428}," useSurfaceSampler",[560,12743,2431],{"class":569},[560,12745,3700],{"class":606},[560,12747,610],{"class":565},[560,12749,12750],{"class":746}," 50",[560,12752,610],{"class":565},[560,12754,12755],{"class":606}," instancesRef",[560,12757,1073],{"class":565},[560,12759,3700],{"class":606},[560,12761,610],{"class":565},[560,12763,622],{"class":565},[560,12765,7692],{"class":586},[560,12767,2434],{"class":565},[560,12769,2442],{"class":569},[560,12771,12772,12774],{"class":562,"line":728},[560,12773,2422],{"class":565},[560,12775,2442],{"class":606},[560,12777,12778,12780,12782],{"class":562,"line":754},[560,12779,655],{"class":565},[560,12781,570],{"class":569},[560,12783,592],{"class":565},[560,12785,12786],{"class":562,"line":554},[560,12787,665],{"emptyLinePlaceholder":516},[560,12789,12790,12792,12794],{"class":562,"line":777},[560,12791,566],{"class":565},[560,12793,673],{"class":569},[560,12795,592],{"class":565},[560,12797,12798,12800,12802,12804,12806,12808,12810,12812],{"class":562,"line":788},[560,12799,681],{"class":565},[560,12801,684],{"class":569},[560,12803,687],{"class":573},[560,12805,580],{"class":565},[560,12807,583],{"class":565},[560,12809,12280],{"class":586},[560,12811,583],{"class":565},[560,12813,592],{"class":565},[560,12815,12816,12818,12820,12822,12824,12826,12828,12830,12832,12834,12836,12838,12840,12842,12844],{"class":562,"line":799},[560,12817,704],{"class":565},[560,12819,707],{"class":569},[560,12821,736],{"class":565},[560,12823,1413],{"class":573},[560,12825,580],{"class":565},[560,12827,583],{"class":565},[560,12829,1420],{"class":565},[560,12831,892],{"class":746},[560,12833,1425],{"class":565},[560,12835,1467],{"class":746},[560,12837,1425],{"class":565},[560,12839,7588],{"class":746},[560,12841,1435],{"class":565},[560,12843,583],{"class":565},[560,12845,710],{"class":565},[560,12847,12848,12850,12852],{"class":562,"line":809},[560,12849,704],{"class":565},[560,12851,718],{"class":569},[560,12853,710],{"class":565},[560,12855,12856],{"class":562,"line":555},[560,12857,665],{"emptyLinePlaceholder":516},[560,12859,12860,12862,12864,12866,12868,12870,12873,12875],{"class":562,"line":829},[560,12861,704],{"class":565},[560,12863,783],{"class":569},[560,12865,3921],{"class":573},[560,12867,580],{"class":565},[560,12869,583],{"class":565},[560,12871,12872],{"class":586},"torusRef",[560,12874,583],{"class":565},[560,12876,592],{"class":565},[560,12878,12879,12881,12883],{"class":562,"line":839},[560,12880,780],{"class":565},[560,12882,12367],{"class":569},[560,12884,710],{"class":565},[560,12886,12887,12889,12891],{"class":562,"line":2617},[560,12888,822],{"class":565},[560,12890,783],{"class":569},[560,12892,592],{"class":565},[560,12894,12895],{"class":562,"line":2626},[560,12896,665],{"emptyLinePlaceholder":516},[560,12898,12899,12901],{"class":562,"line":2660},[560,12900,704],{"class":565},[560,12902,12903],{"class":569},"TresInstancedMesh\n",[560,12905,12906,12909,12911,12913,12916],{"class":562,"line":2669},[560,12907,12908],{"class":573}," ref",[560,12910,580],{"class":565},[560,12912,583],{"class":565},[560,12914,12915],{"class":586},"instancesRef",[560,12917,3146],{"class":565},[560,12919,12920,12923,12925,12927,12929,12931,12934,12936],{"class":562,"line":2678},[560,12921,12922],{"class":565}," :",[560,12924,1943],{"class":573},[560,12926,580],{"class":565},[560,12928,583],{"class":565},[560,12930,12401],{"class":565},[560,12932,12933],{"class":746},"1_000",[560,12935,1435],{"class":565},[560,12937,3146],{"class":565},[560,12939,12940],{"class":562,"line":2687},[560,12941,12942],{"class":565}," >\n",[560,12944,12945,12947,12949,12951,12953,12955,12957,12959,12961,12963,12966,12968,12970,12972,12974],{"class":562,"line":2709},[560,12946,780],{"class":565},[560,12948,4029],{"class":569},[560,12950,736],{"class":565},[560,12952,1943],{"class":573},[560,12954,580],{"class":565},[560,12956,583],{"class":565},[560,12958,1420],{"class":565},[560,12960,2157],{"class":746},[560,12962,1425],{"class":565},[560,12964,12965],{"class":746},"32",[560,12967,1425],{"class":565},[560,12969,12965],{"class":746},[560,12971,1435],{"class":565},[560,12973,583],{"class":565},[560,12975,710],{"class":565},[560,12977,12978,12980,12982],{"class":562,"line":2760},[560,12979,780],{"class":565},[560,12981,804],{"class":569},[560,12983,710],{"class":565},[560,12985,12986,12988,12990],{"class":562,"line":2769},[560,12987,822],{"class":565},[560,12989,9440],{"class":569},[560,12991,592],{"class":565},[560,12993,12994],{"class":562,"line":2778},[560,12995,665],{"emptyLinePlaceholder":516},[560,12997,12998,13000,13002,13004,13006,13008,13010,13012,13014,13016,13018,13020,13022],{"class":562,"line":3980},[560,12999,704],{"class":565},[560,13001,8233],{"class":569},[560,13003,736],{"class":565},[560,13005,1943],{"class":573},[560,13007,580],{"class":565},[560,13009,583],{"class":565},[560,13011,1420],{"class":565},[560,13013,1432],{"class":746},[560,13015,1425],{"class":565},[560,13017,1432],{"class":746},[560,13019,1435],{"class":565},[560,13021,583],{"class":565},[560,13023,710],{"class":565},[560,13025,13026,13028,13030],{"class":562,"line":4024},[560,13027,832],{"class":565},[560,13029,684],{"class":569},[560,13031,592],{"class":565},[560,13033,13034,13036,13038],{"class":562,"line":4051},[560,13035,655],{"class":565},[560,13037,673],{"class":569},[560,13039,592],{"class":565},[1254,13041,13042],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":13044},[13045,13046,13047],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},{"id":12582,"depth":510,"text":12583},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":13048},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":13053,"title":89,"body":13054,"description":13398,"extension":513,"links":514,"meta":13399,"navigation":516,"path":90,"seo":13400,"stem":91,"__hash__":13401},"docs\u002F2.api\u002F1.abstractions\u002Fscreen-sizer.md",{"type":501,"value":13055,"toc":13394},[13056,13061,13070,13073,13075,13384,13386,13392],[2289,13057,13058],{},[13059,13060],"abstractions-screen-sizer",{},[536,13062,1276,13063,13066,13067,13069],{},[540,13064,13065],{},"\u003CTresObject3D \u002F>"," wrapper that scales to \"screen space\". By default ",[540,13068,1847],{}," THREE world unit will be translated to 1 screen pixel.",[536,13071,13072],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[545,13074,15],{"id":547},[549,13076,13079],{"className":551,"code":13077,"highlights":13078,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { OrbitControls, ScreenSizer } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#3f3f3f\">\n \u003CTresPerspectiveCamera :position=\"[10, 10, 10]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CScreenSizer>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[100, 100, 100]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FScreenSizer>\n \u003CTresMesh :position-x=\"5\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[631,723,788],[540,13080,13081,13101,13119,13143,13151,13155,13163,13182,13214,13222,13231,13239,13271,13279,13287,13296,13316,13324,13332,13340,13368,13376],{"__ignoreMap":508},[560,13082,13083,13085,13087,13089,13091,13093,13095,13097,13099],{"class":562,"line":509},[560,13084,566],{"class":565},[560,13086,570],{"class":569},[560,13088,574],{"class":573},[560,13090,577],{"class":573},[560,13092,580],{"class":565},[560,13094,583],{"class":565},[560,13096,587],{"class":586},[560,13098,583],{"class":565},[560,13100,592],{"class":565},[560,13102,13103,13105,13107,13109,13111,13113,13115,13117],{"class":562,"line":510},[560,13104,600],{"class":599},[560,13106,603],{"class":565},[560,13108,638],{"class":606},[560,13110,616],{"class":565},[560,13112,619],{"class":599},[560,13114,622],{"class":565},[560,13116,647],{"class":586},[560,13118,628],{"class":565},[560,13120,13122,13124,13126,13128,13130,13133,13135,13137,13139,13141],{"class":13121,"line":631},[562,596],[560,13123,600],{"class":599},[560,13125,603],{"class":565},[560,13127,613],{"class":606},[560,13129,610],{"class":565},[560,13131,13132],{"class":606}," ScreenSizer",[560,13134,616],{"class":565},[560,13136,619],{"class":599},[560,13138,622],{"class":565},[560,13140,625],{"class":586},[560,13142,628],{"class":565},[560,13144,13145,13147,13149],{"class":562,"line":652},[560,13146,655],{"class":565},[560,13148,570],{"class":569},[560,13150,592],{"class":565},[560,13152,13153],{"class":562,"line":662},[560,13154,665],{"emptyLinePlaceholder":516},[560,13156,13157,13159,13161],{"class":562,"line":668},[560,13158,566],{"class":565},[560,13160,673],{"class":569},[560,13162,592],{"class":565},[560,13164,13165,13167,13169,13171,13173,13175,13178,13180],{"class":562,"line":678},[560,13166,681],{"class":565},[560,13168,684],{"class":569},[560,13170,687],{"class":573},[560,13172,580],{"class":565},[560,13174,583],{"class":565},[560,13176,13177],{"class":586},"#3f3f3f",[560,13179,583],{"class":565},[560,13181,592],{"class":565},[560,13183,13184,13186,13188,13190,13192,13194,13196,13198,13200,13202,13204,13206,13208,13210,13212],{"class":562,"line":701},[560,13185,704],{"class":565},[560,13187,707],{"class":569},[560,13189,736],{"class":565},[560,13191,1413],{"class":573},[560,13193,580],{"class":565},[560,13195,583],{"class":565},[560,13197,1420],{"class":565},[560,13199,1432],{"class":746},[560,13201,1425],{"class":565},[560,13203,1432],{"class":746},[560,13205,1425],{"class":565},[560,13207,1432],{"class":746},[560,13209,1435],{"class":565},[560,13211,583],{"class":565},[560,13213,710],{"class":565},[560,13215,13216,13218,13220],{"class":562,"line":713},[560,13217,704],{"class":565},[560,13219,718],{"class":569},[560,13221,710],{"class":565},[560,13223,13225,13227,13229],{"class":13224,"line":723},[562,596],[560,13226,704],{"class":565},[560,13228,89],{"class":569},[560,13230,592],{"class":565},[560,13232,13233,13235,13237],{"class":562,"line":728},[560,13234,780],{"class":565},[560,13236,783],{"class":569},[560,13238,592],{"class":565},[560,13240,13241,13243,13245,13247,13249,13251,13253,13255,13257,13259,13261,13263,13265,13267,13269],{"class":562,"line":754},[560,13242,791],{"class":565},[560,13244,794],{"class":569},[560,13246,736],{"class":565},[560,13248,1943],{"class":573},[560,13250,580],{"class":565},[560,13252,583],{"class":565},[560,13254,1420],{"class":565},[560,13256,11628],{"class":746},[560,13258,1425],{"class":565},[560,13260,11628],{"class":746},[560,13262,1425],{"class":565},[560,13264,11628],{"class":746},[560,13266,1435],{"class":565},[560,13268,583],{"class":565},[560,13270,710],{"class":565},[560,13272,13273,13275,13277],{"class":562,"line":554},[560,13274,791],{"class":565},[560,13276,804],{"class":569},[560,13278,710],{"class":565},[560,13280,13281,13283,13285],{"class":562,"line":777},[560,13282,812],{"class":565},[560,13284,783],{"class":569},[560,13286,592],{"class":565},[560,13288,13290,13292,13294],{"class":13289,"line":788},[562,596],[560,13291,822],{"class":565},[560,13293,89],{"class":569},[560,13295,592],{"class":565},[560,13297,13298,13300,13302,13304,13306,13308,13310,13312,13314],{"class":562,"line":799},[560,13299,704],{"class":565},[560,13301,783],{"class":569},[560,13303,736],{"class":565},[560,13305,11878],{"class":573},[560,13307,580],{"class":565},[560,13309,583],{"class":565},[560,13311,7588],{"class":746},[560,13313,583],{"class":565},[560,13315,592],{"class":565},[560,13317,13318,13320,13322],{"class":562,"line":809},[560,13319,780],{"class":565},[560,13321,794],{"class":569},[560,13323,710],{"class":565},[560,13325,13326,13328,13330],{"class":562,"line":555},[560,13327,780],{"class":565},[560,13329,804],{"class":569},[560,13331,710],{"class":565},[560,13333,13334,13336,13338],{"class":562,"line":829},[560,13335,822],{"class":565},[560,13337,783],{"class":569},[560,13339,592],{"class":565},[560,13341,13342,13344,13346,13348,13350,13352,13354,13356,13358,13360,13362,13364,13366],{"class":562,"line":839},[560,13343,704],{"class":565},[560,13345,8233],{"class":569},[560,13347,736],{"class":565},[560,13349,1943],{"class":573},[560,13351,580],{"class":565},[560,13353,583],{"class":565},[560,13355,1420],{"class":565},[560,13357,1432],{"class":746},[560,13359,1425],{"class":565},[560,13361,1432],{"class":746},[560,13363,1435],{"class":565},[560,13365,583],{"class":565},[560,13367,710],{"class":565},[560,13369,13370,13372,13374],{"class":562,"line":2617},[560,13371,832],{"class":565},[560,13373,684],{"class":569},[560,13375,592],{"class":565},[560,13377,13378,13380,13382],{"class":562,"line":2626},[560,13379,655],{"class":565},[560,13381,673],{"class":569},[560,13383,592],{"class":565},[545,13385,849],{"id":848},[536,13387,13388,13389,1073],{},"Inherits all props from ",[540,13390,13391],{},"THREE.Object3D",[1254,13393,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":13395},[13396,13397],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":89,"description":13398},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":13403,"title":93,"body":13404,"description":13786,"extension":513,"links":514,"meta":13787,"navigation":516,"path":94,"seo":13788,"stem":95,"__hash__":13789},"docs\u002F2.api\u002F1.abstractions\u002Fscreen-space.md",{"type":501,"value":13405,"toc":13782},[13406,13411,13424,13446,13448,13686,13688,13780],[530,13407,13408],{},[13409,13410],"abstractions-screen-space",{},[536,13412,13413,13416,13417,13420,13421,1073],{},[540,13414,13415],{},"\u003CScreenSpace \u002F>"," wraps its children in a ",[540,13418,13419],{},"\u003CTresGroup \u002F>"," and positions them in front of the active camera at ",[540,13422,13423],{},":depth",[536,13425,13426,13427,1425,13429,1425,13431,1425,13433,13435,13436,13439,13440,7764,13443,1073],{},"Additionally, the ",[540,13428,882],{},[540,13430,905],{},[540,13432,924],{},[540,13434,943],{}," props can be used to position them similarly to CSS ",[540,13437,13438],{},"position: absolute"," property when using a ",[540,13441,13442],{},"PerspectiveCamera",[540,13444,13445],{},"OrtographicCamera",[545,13447,15],{"id":547},[549,13449,13452],{"className":551,"code":13450,"highlights":13451,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, ScreenSpace } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CScreenSpace :depth=\"5\">\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FScreenSpace>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[510,728,799],[540,13453,13454,13474,13498,13516,13524,13528,13536,13555,13563,13571,13575,13597,13605,13613,13621,13629,13638,13642,13670,13678],{"__ignoreMap":508},[560,13455,13456,13458,13460,13462,13464,13466,13468,13470,13472],{"class":562,"line":509},[560,13457,566],{"class":565},[560,13459,570],{"class":569},[560,13461,574],{"class":573},[560,13463,577],{"class":573},[560,13465,580],{"class":565},[560,13467,583],{"class":565},[560,13469,587],{"class":586},[560,13471,583],{"class":565},[560,13473,592],{"class":565},[560,13475,13477,13479,13481,13483,13485,13488,13490,13492,13494,13496],{"class":13476,"line":510},[562,596],[560,13478,600],{"class":599},[560,13480,603],{"class":565},[560,13482,613],{"class":606},[560,13484,610],{"class":565},[560,13486,13487],{"class":606}," ScreenSpace",[560,13489,616],{"class":565},[560,13491,619],{"class":599},[560,13493,622],{"class":565},[560,13495,625],{"class":586},[560,13497,628],{"class":565},[560,13499,13500,13502,13504,13506,13508,13510,13512,13514],{"class":562,"line":631},[560,13501,600],{"class":599},[560,13503,603],{"class":565},[560,13505,638],{"class":606},[560,13507,616],{"class":565},[560,13509,619],{"class":599},[560,13511,622],{"class":565},[560,13513,647],{"class":586},[560,13515,628],{"class":565},[560,13517,13518,13520,13522],{"class":562,"line":652},[560,13519,655],{"class":565},[560,13521,570],{"class":569},[560,13523,592],{"class":565},[560,13525,13526],{"class":562,"line":662},[560,13527,665],{"emptyLinePlaceholder":516},[560,13529,13530,13532,13534],{"class":562,"line":668},[560,13531,566],{"class":565},[560,13533,673],{"class":569},[560,13535,592],{"class":565},[560,13537,13538,13540,13542,13544,13546,13548,13551,13553],{"class":562,"line":678},[560,13539,681],{"class":565},[560,13541,684],{"class":569},[560,13543,687],{"class":573},[560,13545,580],{"class":565},[560,13547,583],{"class":565},[560,13549,13550],{"class":586},"#333",[560,13552,583],{"class":565},[560,13554,592],{"class":565},[560,13556,13557,13559,13561],{"class":562,"line":701},[560,13558,704],{"class":565},[560,13560,707],{"class":569},[560,13562,710],{"class":565},[560,13564,13565,13567,13569],{"class":562,"line":713},[560,13566,704],{"class":565},[560,13568,718],{"class":569},[560,13570,710],{"class":565},[560,13572,13573],{"class":562,"line":723},[560,13574,665],{"emptyLinePlaceholder":516},[560,13576,13578,13580,13582,13584,13587,13589,13591,13593,13595],{"class":13577,"line":728},[562,596],[560,13579,704],{"class":565},[560,13581,93],{"class":569},[560,13583,736],{"class":565},[560,13585,13586],{"class":573},"depth",[560,13588,580],{"class":565},[560,13590,583],{"class":565},[560,13592,7588],{"class":746},[560,13594,583],{"class":565},[560,13596,592],{"class":565},[560,13598,13599,13601,13603],{"class":562,"line":754},[560,13600,780],{"class":565},[560,13602,783],{"class":569},[560,13604,592],{"class":565},[560,13606,13607,13609,13611],{"class":562,"line":554},[560,13608,791],{"class":565},[560,13610,12367],{"class":569},[560,13612,710],{"class":565},[560,13614,13615,13617,13619],{"class":562,"line":777},[560,13616,791],{"class":565},[560,13618,804],{"class":569},[560,13620,710],{"class":565},[560,13622,13623,13625,13627],{"class":562,"line":788},[560,13624,812],{"class":565},[560,13626,783],{"class":569},[560,13628,592],{"class":565},[560,13630,13632,13634,13636],{"class":13631,"line":799},[562,596],[560,13633,822],{"class":565},[560,13635,93],{"class":569},[560,13637,592],{"class":565},[560,13639,13640],{"class":562,"line":809},[560,13641,665],{"emptyLinePlaceholder":516},[560,13643,13644,13646,13648,13650,13652,13654,13656,13658,13660,13662,13664,13666,13668],{"class":562,"line":555},[560,13645,704],{"class":565},[560,13647,8233],{"class":569},[560,13649,736],{"class":565},[560,13651,1943],{"class":573},[560,13653,580],{"class":565},[560,13655,583],{"class":565},[560,13657,1420],{"class":565},[560,13659,1432],{"class":746},[560,13661,1425],{"class":565},[560,13663,1432],{"class":746},[560,13665,1435],{"class":565},[560,13667,583],{"class":565},[560,13669,710],{"class":565},[560,13671,13672,13674,13676],{"class":562,"line":829},[560,13673,832],{"class":565},[560,13675,684],{"class":569},[560,13677,592],{"class":565},[560,13679,13680,13682,13684],{"class":562,"line":839},[560,13681,655],{"class":565},[560,13683,673],{"class":569},[560,13685,592],{"class":565},[545,13687,849],{"id":848},[854,13689,13690,13700],{},[857,13691,13692],{},[860,13693,13694,13696,13698],{},[863,13695,865],{"align":924},[863,13697,868],{"align":924},[863,13699,871],{},[873,13701,13702,13716,13735,13749,13766],{},[860,13703,13704,13708,13711],{},[878,13705,13706],{"align":924},[540,13707,13586],{},[878,13709,13710],{"align":924},"Distance from the camera",[878,13712,13713],{},[540,13714,13715],{},"-1",[860,13717,13718,13722,13730],{},[878,13719,13720],{"align":924},[540,13721,882],{},[878,13723,13724,13725,13727,13728],{"align":924},"Similar to CSS ",[540,13726,882],{}," property. Cannot be used with ",[540,13729,905],{},[878,13731,13732,13734],{},[540,13733,1467],{}," (vertical center of the screen)",[860,13736,13737,13741,13747],{},[878,13738,13739],{"align":924},[540,13740,905],{},[878,13742,13724,13743,13727,13745],{"align":924},[540,13744,905],{},[540,13746,882],{},[878,13748],{},[860,13750,13751,13755,13761],{},[878,13752,13753],{"align":924},[540,13754,924],{},[878,13756,13724,13757,13727,13759],{"align":924},[540,13758,924],{},[540,13760,943],{},[878,13762,13763,13765],{},[540,13764,1467],{}," (horizontal center of the screen)",[860,13767,13768,13772,13778],{},[878,13769,13770],{"align":924},[540,13771,943],{},[878,13773,13724,13774,13727,13776],{"align":924},[540,13775,943],{},[540,13777,924],{},[878,13779],{},[1254,13781,1602],{},{"title":508,"searchDepth":509,"depth":510,"links":13783},[13784,13785],{"id":547,"depth":510,"text":15},{"id":848,"depth":510,"text":849},"Position objects in front of the camera with CSS-like positioning.",{},{"title":93,"description":13786},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",1791549571453]