[{"data":1,"prerenderedAt":67282},["ShallowReactive",2],{"navigation":3,"/api":498,"/api-surround":597,"abstraction-list":602,"controls-list":13166,"loaders-list":16912,"materials-list":25972,"shapes-list":30298,"debug-list":36339,"light-list":38997,"staging-list":43489,"objects-list":50754,"misc-list":63487},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":32,"body":500,"description":590,"extension":591,"links":592,"meta":593,"navigation":594,"path":28,"seo":595,"stem":33,"__hash__":596},"docs/2.api/index.md",{"type":501,"value":502,"toc":575},"minimark",[503,508,512,516,519,523,526,530,533,537,540,544,547,551,554,558,561,565,568,572],[504,505,507],"h2",{"id":506},"abstraction","📦 Abstraction",[509,510],"api-list",{"list-name":511,"path":36},"abstraction-list",[504,513,515],{"id":514},"controls","🎮 Controls",[509,517],{"list-name":518,"path":98},"controls-list",[504,520,522],{"id":521},"loaders","📂 Loaders",[509,524],{"list-name":525,"path":128},"loaders-list",[504,527,529],{"id":528},"materials","🎨 Materials",[509,531],{"list-name":532,"path":170},"materials-list",[504,534,536],{"id":535},"shapes","🔷 Shapes",[509,538],{"list-name":539,"path":212},"shapes-list",[504,541,543],{"id":542},"debug-performance","📊 Debug & Performance",[509,545],{"list-name":546,"path":310},"debug-list",[504,548,550],{"id":549},"light-shadow","💡 Light & Shadow",[509,552],{"list-name":553,"path":336},"light-list",[504,555,557],{"id":556},"staging","🎭 Staging",[509,559],{"list-name":560,"path":370},"staging-list",[504,562,564],{"id":563},"objects","🎬 Objects",[509,566],{"list-name":567,"path":420},"objects-list",[504,569,571],{"id":570},"️-miscellaneous","🛠️ Miscellaneous",[509,573],{"list-name":574,"path":466},"misc-list",{"title":576,"searchDepth":577,"depth":578,"links":579},"",1,2,[580,581,582,583,584,585,586,587,588,589],{"id":506,"depth":578,"text":507},{"id":514,"depth":578,"text":515},{"id":521,"depth":578,"text":522},{"id":528,"depth":578,"text":529},{"id":535,"depth":578,"text":536},{"id":542,"depth":578,"text":543},{"id":549,"depth":578,"text":550},{"id":556,"depth":578,"text":557},{"id":563,"depth":578,"text":564},{"id":570,"depth":578,"text":571},"Explore the complete API reference","md",null,{},true,{"title":32,"description":590},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[598,600],{"title":23,"path":24,"stem":25,"description":599,"children":-1},"Migration guide for cientos",{"title":35,"path":36,"stem":37,"description":601,"children":-1},"UI components reference",[603,1339,1653,2202,7304,7598,8223,9448,9842,10492,11198,11675,12477,12790],{"id":604,"title":41,"body":605,"description":1335,"extension":591,"links":592,"meta":1336,"navigation":594,"path":42,"seo":1337,"stem":43,"__hash__":1338},"docs/2.api/1.abstractions/align.md",{"type":501,"value":606,"toc":1330},[607,613,622,625,919,923,926,1180,1184,1326],[608,609,610],"scene-controls-wrapper",{},[611,612],"abstractions-align",{},[614,615,616,617,621],"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 ",[618,619,620],"code",{},"cacheKey"," is set.",[504,623,15],{"id":624},"usage",[626,627,634],"pre",{"className":628,"code":629,"highlights":630,"language":633,"meta":576,"style":576},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Align, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CTresAxesHelper :scale=\"2\" />\n\n    \u003CAlign top right back>\n      \u003CTresMesh>\n        \u003CTresBoxGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/Align>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,631,632],13,18,"vue",[618,635,636,670,706,727,737,743,753,776,788,798,803,825,830,848,859,870,880,890,900,910],{"__ignoreMap":576},[637,638,640,644,648,652,655,658,661,665,667],"span",{"class":639,"line":577},"line",[637,641,643],{"class":642},"sMK4o","\u003C",[637,645,647],{"class":646},"swJcz","script",[637,649,651],{"class":650},"spNyl"," setup",[637,653,654],{"class":650}," lang",[637,656,657],{"class":642},"=",[637,659,660],{"class":642},"\"",[637,662,664],{"class":663},"sfazB","ts",[637,666,660],{"class":642},[637,668,669],{"class":642},">\n",[637,671,674,678,681,685,688,691,694,697,700,703],{"class":672,"line":578},[639,673],"highlight",[637,675,677],{"class":676},"s7zQu","import",[637,679,680],{"class":642}," {",[637,682,684],{"class":683},"sTEyZ"," Align",[637,686,687],{"class":642},",",[637,689,690],{"class":683}," OrbitControls",[637,692,693],{"class":642}," }",[637,695,696],{"class":676}," from",[637,698,699],{"class":642}," '",[637,701,702],{"class":663},"@tresjs/cientos",[637,704,705],{"class":642},"'\n",[637,707,709,711,713,716,718,720,722,725],{"class":639,"line":708},3,[637,710,677],{"class":676},[637,712,680],{"class":642},[637,714,715],{"class":683}," TresCanvas",[637,717,693],{"class":642},[637,719,696],{"class":676},[637,721,699],{"class":642},[637,723,724],{"class":663},"@tresjs/core",[637,726,705],{"class":642},[637,728,730,733,735],{"class":639,"line":729},4,[637,731,732],{"class":642},"\u003C/",[637,734,647],{"class":646},[637,736,669],{"class":642},[637,738,740],{"class":639,"line":739},5,[637,741,742],{"emptyLinePlaceholder":594},"\n",[637,744,746,748,751],{"class":639,"line":745},6,[637,747,643],{"class":642},[637,749,750],{"class":646},"template",[637,752,669],{"class":642},[637,754,756,759,762,765,767,769,772,774],{"class":639,"line":755},7,[637,757,758],{"class":642},"  \u003C",[637,760,761],{"class":646},"TresCanvas",[637,763,764],{"class":650}," clear-color",[637,766,657],{"class":642},[637,768,660],{"class":642},[637,770,771],{"class":663},"#222",[637,773,660],{"class":642},[637,775,669],{"class":642},[637,777,779,782,785],{"class":639,"line":778},8,[637,780,781],{"class":642},"    \u003C",[637,783,784],{"class":646},"TresPerspectiveCamera",[637,786,787],{"class":642}," />\n",[637,789,791,793,796],{"class":639,"line":790},9,[637,792,781],{"class":642},[637,794,795],{"class":646},"OrbitControls",[637,797,787],{"class":642},[637,799,801],{"class":639,"line":800},10,[637,802,742],{"emptyLinePlaceholder":594},[637,804,806,808,811,814,816,818,821,823],{"class":639,"line":805},11,[637,807,781],{"class":642},[637,809,810],{"class":646},"TresAxesHelper",[637,812,813],{"class":650}," :scale",[637,815,657],{"class":642},[637,817,660],{"class":642},[637,819,820],{"class":663},"2",[637,822,660],{"class":642},[637,824,787],{"class":642},[637,826,828],{"class":639,"line":827},12,[637,829,742],{"emptyLinePlaceholder":594},[637,831,833,835,837,840,843,846],{"class":832,"line":631},[639,673],[637,834,781],{"class":642},[637,836,41],{"class":646},[637,838,839],{"class":650}," top",[637,841,842],{"class":650}," right",[637,844,845],{"class":650}," back",[637,847,669],{"class":642},[637,849,851,854,857],{"class":639,"line":850},14,[637,852,853],{"class":642},"      \u003C",[637,855,856],{"class":646},"TresMesh",[637,858,669],{"class":642},[637,860,862,865,868],{"class":639,"line":861},15,[637,863,864],{"class":642},"        \u003C",[637,866,867],{"class":646},"TresBoxGeometry",[637,869,787],{"class":642},[637,871,873,875,878],{"class":639,"line":872},16,[637,874,864],{"class":642},[637,876,877],{"class":646},"TresMeshNormalMaterial",[637,879,787],{"class":642},[637,881,883,886,888],{"class":639,"line":882},17,[637,884,885],{"class":642},"      \u003C/",[637,887,856],{"class":646},[637,889,669],{"class":642},[637,891,893,896,898],{"class":892,"line":632},[639,673],[637,894,895],{"class":642},"    \u003C/",[637,897,41],{"class":646},[637,899,669],{"class":642},[637,901,903,906,908],{"class":639,"line":902},19,[637,904,905],{"class":642},"  \u003C/",[637,907,761],{"class":646},[637,909,669],{"class":642},[637,911,913,915,917],{"class":639,"line":912},20,[637,914,732],{"class":642},[637,916,750],{"class":646},[637,918,669],{"class":642},[504,920,922],{"id":921},"props","Props",[614,924,925],{},"All props are optional.",[927,928,929,945],"table",{},[930,931,932],"thead",{},[933,934,935,939,942],"tr",{},[936,937,938],"th",{},"Prop",[936,940,941],{},"Description",[936,943,944],{},"Default",[946,947,948,972,991,1010,1028,1047,1065,1081,1097,1113,1129,1151,1163],"tbody",{},[933,949,950,956,967],{},[951,952,953],"td",{},[618,954,955],{},"top",[951,957,958,959,962,963,966],{},"If ",[618,960,961],{},"true",", aligns bounding box bottom to ",[618,964,965],{},"0"," on the y-axis",[951,968,969],{},[618,970,971],{},"false",[933,973,974,979,987],{},[951,975,976],{},[618,977,978],{},"bottom",[951,980,958,981,983,984,986],{},[618,982,961],{},", aligns bounding box top to ",[618,985,965],{}," on the y-axis.",[951,988,989],{},[618,990,971],{},[933,992,993,998,1006],{},[951,994,995],{},[618,996,997],{},"left",[951,999,958,1000,1002,1003,1005],{},[618,1001,961],{},", aligns bounding box right to ",[618,1004,965],{}," on the x-axis.",[951,1007,1008],{},[618,1009,971],{},[933,1011,1012,1017,1024],{},[951,1013,1014],{},[618,1015,1016],{},"right",[951,1018,958,1019,1021,1022,1005],{},[618,1020,961],{},", aligns bounding box left to ",[618,1023,965],{},[951,1025,1026],{},[618,1027,971],{},[933,1029,1030,1035,1043],{},[951,1031,1032],{},[618,1033,1034],{},"front",[951,1036,958,1037,1039,1040,1042],{},[618,1038,961],{},", aligns bounding box back to ",[618,1041,965],{}," on the z-axis.",[951,1044,1045],{},[618,1046,971],{},[933,1048,1049,1054,1061],{},[951,1050,1051],{},[618,1052,1053],{},"back",[951,1055,958,1056,1058,1059,1042],{},[618,1057,961],{},", aligns bounding box front to ",[618,1060,965],{},[951,1062,1063],{},[618,1064,971],{},[933,1066,1067,1072,1077],{},[951,1068,1069],{},[618,1070,1071],{},"disable",[951,1073,958,1074,1076],{},[618,1075,961],{},", disables alignment on all axes.",[951,1078,1079],{},[618,1080,971],{},[933,1082,1083,1088,1093],{},[951,1084,1085],{},[618,1086,1087],{},"disableX",[951,1089,958,1090,1092],{},[618,1091,961],{},", disables alignment on the x-axis.",[951,1094,1095],{},[618,1096,971],{},[933,1098,1099,1104,1109],{},[951,1100,1101],{},[618,1102,1103],{},"disableY",[951,1105,958,1106,1108],{},[618,1107,961],{},", disables alignment on the y-axis.",[951,1110,1111],{},[618,1112,971],{},[933,1114,1115,1120,1125],{},[951,1116,1117],{},[618,1118,1119],{},"disableZ",[951,1121,958,1122,1124],{},[618,1123,961],{},", disables alignment on the z-axis.",[951,1126,1127],{},[618,1128,971],{},[933,1130,1131,1136,1147],{},[951,1132,1133],{},[618,1134,1135],{},"precise",[951,1137,1138,1139,1146],{},"See ",[1140,1141,1145],"a",{"href":1142,"rel":1143},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1144],"nofollow","Box3.setFromObject",".",[951,1148,1149],{},[618,1150,961],{},[933,1152,1153,1158,1161],{},[951,1154,1155],{},[618,1156,1157],{},"onAlign",[951,1159,1160],{},"Callback that fires when updating, after measurement.",[951,1162],{},[933,1164,1165,1169,1175],{},[951,1166,1167],{},[618,1168,620],{},[951,1170,1171,1172,1174],{},"If set, component will only update when ",[618,1173,620],{},"'s value changes. If unset, component will update every frame.",[951,1176,1177],{},[618,1178,1179],{},"undefined",[504,1181,1183],{"id":1182},"aligncallbackoptions","AlignCallbackOptions",[626,1185,1188],{"className":1186,"code":1187,"language":664,"meta":576,"style":576},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface AlignCallbackOptions {\n  /** The next parent above \u003CAlign /> */\n  parent: Object3D\n  /** The outmost container group of the \u003CAlign/> component */\n  container: Object3D\n  width: number\n  height: number\n  depth: number\n  boundingBox: Box3\n  boundingSphere: Sphere\n  center: Vector3\n  verticalAlignment: number\n  horizontalAlignment: number\n  depthAlignment: number\n}\n",[618,1189,1190,1205,1211,1222,1227,1236,1246,1255,1264,1274,1284,1294,1303,1312,1321],{"__ignoreMap":576},[637,1191,1192,1195,1198,1202],{"class":639,"line":577},[637,1193,1194],{"class":676},"export",[637,1196,1197],{"class":650}," interface",[637,1199,1201],{"class":1200},"sBMFI"," AlignCallbackOptions",[637,1203,1204],{"class":642}," {\n",[637,1206,1207],{"class":639,"line":578},[637,1208,1210],{"class":1209},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[637,1212,1213,1216,1219],{"class":639,"line":708},[637,1214,1215],{"class":646},"  parent",[637,1217,1218],{"class":642},":",[637,1220,1221],{"class":1200}," Object3D\n",[637,1223,1224],{"class":639,"line":729},[637,1225,1226],{"class":1209},"  /** The outmost container group of the \u003CAlign/> component */\n",[637,1228,1229,1232,1234],{"class":639,"line":739},[637,1230,1231],{"class":646},"  container",[637,1233,1218],{"class":642},[637,1235,1221],{"class":1200},[637,1237,1238,1241,1243],{"class":639,"line":745},[637,1239,1240],{"class":646},"  width",[637,1242,1218],{"class":642},[637,1244,1245],{"class":1200}," number\n",[637,1247,1248,1251,1253],{"class":639,"line":755},[637,1249,1250],{"class":646},"  height",[637,1252,1218],{"class":642},[637,1254,1245],{"class":1200},[637,1256,1257,1260,1262],{"class":639,"line":778},[637,1258,1259],{"class":646},"  depth",[637,1261,1218],{"class":642},[637,1263,1245],{"class":1200},[637,1265,1266,1269,1271],{"class":639,"line":790},[637,1267,1268],{"class":646},"  boundingBox",[637,1270,1218],{"class":642},[637,1272,1273],{"class":1200}," Box3\n",[637,1275,1276,1279,1281],{"class":639,"line":800},[637,1277,1278],{"class":646},"  boundingSphere",[637,1280,1218],{"class":642},[637,1282,1283],{"class":1200}," Sphere\n",[637,1285,1286,1289,1291],{"class":639,"line":805},[637,1287,1288],{"class":646},"  center",[637,1290,1218],{"class":642},[637,1292,1293],{"class":1200}," Vector3\n",[637,1295,1296,1299,1301],{"class":639,"line":827},[637,1297,1298],{"class":646},"  verticalAlignment",[637,1300,1218],{"class":642},[637,1302,1245],{"class":1200},[637,1304,1305,1308,1310],{"class":639,"line":631},[637,1306,1307],{"class":646},"  horizontalAlignment",[637,1309,1218],{"class":642},[637,1311,1245],{"class":1200},[637,1313,1314,1317,1319],{"class":639,"line":850},[637,1315,1316],{"class":646},"  depthAlignment",[637,1318,1218],{"class":642},[637,1320,1245],{"class":1200},[637,1322,1323],{"class":639,"line":861},[637,1324,1325],{"class":642},"}\n",[1327,1328,1329],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":1331},[1332,1333,1334],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1182,"depth":578,"text":1183},"Calculate and align children within their parent using bounding boxes.",{},{"title":41,"description":1335},"2TNilwT1BiWwam7y0leE_VBx46wcrMjjhvIXPvGWsNg",{"id":1340,"title":45,"body":1341,"description":1649,"extension":591,"links":592,"meta":1650,"navigation":594,"path":46,"seo":1651,"stem":47,"__hash__":1652},"docs/2.api/1.abstractions/billboard.md",{"type":501,"value":1342,"toc":1645},[1343,1348,1355,1357,1566,1568,1642],[608,1344,1345],{},[1346,1347],"abstractions-billboard",{},[614,1349,1350,1351,1354],{},"Adds a ",[618,1352,1353],{},"THREE.Group"," that always faces the camera.",[504,1356,15],{"id":624},[626,1358,1361],{"className":628,"code":1359,"highlights":1360,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Billboard, Box, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333333\">\n    \u003COrbitControls />\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 10]\" />\n    \u003CBillboard>\n      \u003CBox :scale=\"[0.5, 0.5, 0.001]\">\n        \u003CTresMeshNormalMaterial />\n      \u003C/Box>\n    \u003C/Billboard>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,800,850],[618,1362,1363,1383,1412,1430,1438,1442,1450,1469,1477,1497,1506,1525,1533,1541,1550,1558],{"__ignoreMap":576},[637,1364,1365,1367,1369,1371,1373,1375,1377,1379,1381],{"class":639,"line":577},[637,1366,643],{"class":642},[637,1368,647],{"class":646},[637,1370,651],{"class":650},[637,1372,654],{"class":650},[637,1374,657],{"class":642},[637,1376,660],{"class":642},[637,1378,664],{"class":663},[637,1380,660],{"class":642},[637,1382,669],{"class":642},[637,1384,1386,1388,1390,1393,1395,1398,1400,1402,1404,1406,1408,1410],{"class":1385,"line":578},[639,673],[637,1387,677],{"class":676},[637,1389,680],{"class":642},[637,1391,1392],{"class":683}," Billboard",[637,1394,687],{"class":642},[637,1396,1397],{"class":683}," Box",[637,1399,687],{"class":642},[637,1401,690],{"class":683},[637,1403,693],{"class":642},[637,1405,696],{"class":676},[637,1407,699],{"class":642},[637,1409,702],{"class":663},[637,1411,705],{"class":642},[637,1413,1414,1416,1418,1420,1422,1424,1426,1428],{"class":639,"line":708},[637,1415,677],{"class":676},[637,1417,680],{"class":642},[637,1419,715],{"class":683},[637,1421,693],{"class":642},[637,1423,696],{"class":676},[637,1425,699],{"class":642},[637,1427,724],{"class":663},[637,1429,705],{"class":642},[637,1431,1432,1434,1436],{"class":639,"line":729},[637,1433,732],{"class":642},[637,1435,647],{"class":646},[637,1437,669],{"class":642},[637,1439,1440],{"class":639,"line":739},[637,1441,742],{"emptyLinePlaceholder":594},[637,1443,1444,1446,1448],{"class":639,"line":745},[637,1445,643],{"class":642},[637,1447,750],{"class":646},[637,1449,669],{"class":642},[637,1451,1452,1454,1456,1458,1460,1462,1465,1467],{"class":639,"line":755},[637,1453,758],{"class":642},[637,1455,761],{"class":646},[637,1457,764],{"class":650},[637,1459,657],{"class":642},[637,1461,660],{"class":642},[637,1463,1464],{"class":663},"#333333",[637,1466,660],{"class":642},[637,1468,669],{"class":642},[637,1470,1471,1473,1475],{"class":639,"line":778},[637,1472,781],{"class":642},[637,1474,795],{"class":646},[637,1476,787],{"class":642},[637,1478,1479,1481,1483,1486,1488,1490,1493,1495],{"class":639,"line":790},[637,1480,781],{"class":642},[637,1482,784],{"class":646},[637,1484,1485],{"class":650}," :position",[637,1487,657],{"class":642},[637,1489,660],{"class":642},[637,1491,1492],{"class":663},"[0, 0, 10]",[637,1494,660],{"class":642},[637,1496,787],{"class":642},[637,1498,1500,1502,1504],{"class":1499,"line":800},[639,673],[637,1501,781],{"class":642},[637,1503,45],{"class":646},[637,1505,669],{"class":642},[637,1507,1508,1510,1512,1514,1516,1518,1521,1523],{"class":639,"line":805},[637,1509,853],{"class":642},[637,1511,217],{"class":646},[637,1513,813],{"class":650},[637,1515,657],{"class":642},[637,1517,660],{"class":642},[637,1519,1520],{"class":663},"[0.5, 0.5, 0.001]",[637,1522,660],{"class":642},[637,1524,669],{"class":642},[637,1526,1527,1529,1531],{"class":639,"line":827},[637,1528,864],{"class":642},[637,1530,877],{"class":646},[637,1532,787],{"class":642},[637,1534,1535,1537,1539],{"class":639,"line":631},[637,1536,885],{"class":642},[637,1538,217],{"class":646},[637,1540,669],{"class":642},[637,1542,1544,1546,1548],{"class":1543,"line":850},[639,673],[637,1545,895],{"class":642},[637,1547,45],{"class":646},[637,1549,669],{"class":642},[637,1551,1552,1554,1556],{"class":639,"line":861},[637,1553,905],{"class":642},[637,1555,761],{"class":646},[637,1557,669],{"class":642},[637,1559,1560,1562,1564],{"class":639,"line":872},[637,1561,732],{"class":642},[637,1563,750],{"class":646},[637,1565,669],{"class":642},[504,1567,922],{"id":921},[927,1569,1570,1580],{},[930,1571,1572],{},[933,1573,1574,1576,1578],{},[936,1575,938],{"align":997},[936,1577,941],{"align":997},[936,1579,944],{},[946,1581,1582,1600,1614,1628],{},[933,1583,1584,1589,1596],{},[951,1585,1586],{"align":997},[618,1587,1588],{},"autoUpdate",[951,1590,1591,1592,1595],{"align":997},"Whether the ",[618,1593,1594],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[951,1597,1598],{},[618,1599,961],{},[933,1601,1602,1607,1610],{},[951,1603,1604],{"align":997},[618,1605,1606],{},"lockX",[951,1608,1609],{"align":997},"Whether to lock the x-axis.",[951,1611,1612],{},[618,1613,971],{},[933,1615,1616,1621,1624],{},[951,1617,1618],{"align":997},[618,1619,1620],{},"lockY",[951,1622,1623],{"align":997},"Whether to lock the y-axis.",[951,1625,1626],{},[618,1627,971],{},[933,1629,1630,1635,1638],{},[951,1631,1632],{"align":997},[618,1633,1634],{},"lockZ",[951,1636,1637],{"align":997},"Whether to lock the z-axis.",[951,1639,1640],{},[618,1641,971],{},[1327,1643,1644],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":1646},[1647,1648],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Make objects always face the camera automatically.",{},{"title":45,"description":1649},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1654,"title":49,"body":1655,"description":2198,"extension":591,"links":592,"meta":2199,"navigation":594,"path":50,"seo":2200,"stem":51,"__hash__":2201},"docs/2.api/1.abstractions/camera-shake.md",{"type":501,"value":1656,"toc":2194},[1657,1662,1716,1718,2004,2043,2045,2192],[608,1658,1659],{},[1660,1661],"abstractions-camera-shake",{},[614,1663,1664,1667,1668,1672,1673,1677,1678,1681,1682,1672,1685,1688,1689,1692,1693,1672,1696,1672,1699,1702,1703,1706,1707,1146],{},[618,1665,1666],{},"\u003CCameraShake />"," is a component that adds ",[1669,1670,1671],"strong",{},"natural",", ",[1674,1675,1676],"em",{},"noise-driven motion"," to the ",[1669,1679,1680],{},"active camera",".\nIt offers ",[1669,1683,1684],{},"per-axis control",[1669,1686,1687],{},"adjustable intensity",", and ",[1674,1690,1691],{},"optional decay"," — perfect for ",[1674,1694,1695],{},"handheld feel",[1674,1697,1698],{},"footsteps",[1674,1700,1701],{},"impacts",", or ",[1674,1704,1705],{},"engine rumble"," — and is based on the ",[1140,1708,1711,1712,1715],{"href":1709,"rel":1710},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1144],"Drei ",[618,1713,1714],{},"CameraShake"," component",[504,1717,15],{"id":624},[626,1719,1722],{"className":628,"code":1720,"highlights":1721,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CameraShake, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 6]\" />\n    \u003COrbitControls make-default />\n\n    \u003CCameraShake :intensity=\"1\" :max-yaw=\"0.01\" :max-pitch=\"0.01\" :max-roll=\"0.01\" />\n      \u003CTresAxesHelper :scale=\"2\" />\n      \u003CTresMesh :position-y=\"0.5\">\n        \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,805,872],[618,1723,1724,1744,1768,1786,1794,1798,1806,1824,1843,1854,1858,1913,1931,1951,1971,1979,1988,1996],{"__ignoreMap":576},[637,1725,1726,1728,1730,1732,1734,1736,1738,1740,1742],{"class":639,"line":577},[637,1727,643],{"class":642},[637,1729,647],{"class":646},[637,1731,651],{"class":650},[637,1733,654],{"class":650},[637,1735,657],{"class":642},[637,1737,660],{"class":642},[637,1739,664],{"class":663},[637,1741,660],{"class":642},[637,1743,669],{"class":642},[637,1745,1747,1749,1751,1754,1756,1758,1760,1762,1764,1766],{"class":1746,"line":578},[639,673],[637,1748,677],{"class":676},[637,1750,680],{"class":642},[637,1752,1753],{"class":683}," CameraShake",[637,1755,687],{"class":642},[637,1757,690],{"class":683},[637,1759,693],{"class":642},[637,1761,696],{"class":676},[637,1763,699],{"class":642},[637,1765,702],{"class":663},[637,1767,705],{"class":642},[637,1769,1770,1772,1774,1776,1778,1780,1782,1784],{"class":639,"line":708},[637,1771,677],{"class":676},[637,1773,680],{"class":642},[637,1775,715],{"class":683},[637,1777,693],{"class":642},[637,1779,696],{"class":676},[637,1781,699],{"class":642},[637,1783,724],{"class":663},[637,1785,705],{"class":642},[637,1787,1788,1790,1792],{"class":639,"line":729},[637,1789,732],{"class":642},[637,1791,647],{"class":646},[637,1793,669],{"class":642},[637,1795,1796],{"class":639,"line":739},[637,1797,742],{"emptyLinePlaceholder":594},[637,1799,1800,1802,1804],{"class":639,"line":745},[637,1801,643],{"class":642},[637,1803,750],{"class":646},[637,1805,669],{"class":642},[637,1807,1808,1810,1812,1814,1816,1818,1820,1822],{"class":639,"line":755},[637,1809,758],{"class":642},[637,1811,761],{"class":646},[637,1813,764],{"class":650},[637,1815,657],{"class":642},[637,1817,660],{"class":642},[637,1819,771],{"class":663},[637,1821,660],{"class":642},[637,1823,669],{"class":642},[637,1825,1826,1828,1830,1832,1834,1836,1839,1841],{"class":639,"line":778},[637,1827,781],{"class":642},[637,1829,784],{"class":646},[637,1831,1485],{"class":650},[637,1833,657],{"class":642},[637,1835,660],{"class":642},[637,1837,1838],{"class":663},"[0, 2, 6]",[637,1840,660],{"class":642},[637,1842,787],{"class":642},[637,1844,1845,1847,1849,1852],{"class":639,"line":790},[637,1846,781],{"class":642},[637,1848,795],{"class":646},[637,1850,1851],{"class":650}," make-default",[637,1853,787],{"class":642},[637,1855,1856],{"class":639,"line":800},[637,1857,742],{"emptyLinePlaceholder":594},[637,1859,1861,1863,1865,1868,1870,1872,1875,1877,1880,1882,1884,1887,1889,1892,1894,1896,1898,1900,1903,1905,1907,1909,1911],{"class":1860,"line":805},[639,673],[637,1862,781],{"class":642},[637,1864,1714],{"class":646},[637,1866,1867],{"class":650}," :intensity",[637,1869,657],{"class":642},[637,1871,660],{"class":642},[637,1873,1874],{"class":663},"1",[637,1876,660],{"class":642},[637,1878,1879],{"class":650}," :max-yaw",[637,1881,657],{"class":642},[637,1883,660],{"class":642},[637,1885,1886],{"class":663},"0.01",[637,1888,660],{"class":642},[637,1890,1891],{"class":650}," :max-pitch",[637,1893,657],{"class":642},[637,1895,660],{"class":642},[637,1897,1886],{"class":663},[637,1899,660],{"class":642},[637,1901,1902],{"class":650}," :max-roll",[637,1904,657],{"class":642},[637,1906,660],{"class":642},[637,1908,1886],{"class":663},[637,1910,660],{"class":642},[637,1912,787],{"class":642},[637,1914,1915,1917,1919,1921,1923,1925,1927,1929],{"class":639,"line":827},[637,1916,853],{"class":642},[637,1918,810],{"class":646},[637,1920,813],{"class":650},[637,1922,657],{"class":642},[637,1924,660],{"class":642},[637,1926,820],{"class":663},[637,1928,660],{"class":642},[637,1930,787],{"class":642},[637,1932,1933,1935,1937,1940,1942,1944,1947,1949],{"class":639,"line":631},[637,1934,853],{"class":642},[637,1936,856],{"class":646},[637,1938,1939],{"class":650}," :position-y",[637,1941,657],{"class":642},[637,1943,660],{"class":642},[637,1945,1946],{"class":663},"0.5",[637,1948,660],{"class":642},[637,1950,669],{"class":642},[637,1952,1953,1955,1957,1960,1962,1964,1967,1969],{"class":639,"line":850},[637,1954,864],{"class":642},[637,1956,867],{"class":646},[637,1958,1959],{"class":650}," :args",[637,1961,657],{"class":642},[637,1963,660],{"class":642},[637,1965,1966],{"class":663},"[1, 1, 1]",[637,1968,660],{"class":642},[637,1970,787],{"class":642},[637,1972,1973,1975,1977],{"class":639,"line":861},[637,1974,864],{"class":642},[637,1976,877],{"class":646},[637,1978,787],{"class":642},[637,1980,1982,1984,1986],{"class":1981,"line":872},[639,673],[637,1983,885],{"class":642},[637,1985,856],{"class":646},[637,1987,669],{"class":642},[637,1989,1990,1992,1994],{"class":639,"line":882},[637,1991,905],{"class":642},[637,1993,761],{"class":646},[637,1995,669],{"class":642},[637,1997,1998,2000,2002],{"class":639,"line":632},[637,1999,732],{"class":642},[637,2001,750],{"class":646},[637,2003,669],{"class":642},[2005,2006,2007,2028],"prose-note",{},[614,2008,2009,2011,2012,2017,2018,2021,2022,2027],{},[618,2010,1666],{}," is fully compatible with ",[1669,2013,2014],{},[618,2015,2016],{},"\u003COrbitControls />",".\nTo ensure it works ",[1674,2019,2020],{},"as expected",", make sure to add the ",[1669,2023,2024],{},[618,2025,2026],{},"make-default"," prop:",[626,2029,2031],{"className":628,"code":2030,"language":633,"meta":576,"style":576},"\u003COrbitControls make-default />\n",[618,2032,2033],{"__ignoreMap":576},[637,2034,2035,2037,2039,2041],{"class":639,"line":577},[637,2036,643],{"class":642},[637,2038,795],{"class":646},[637,2040,1851],{"class":650},[637,2042,787],{"class":642},[504,2044,922],{"id":921},[927,2046,2047,2057],{},[930,2048,2049],{},[933,2050,2051,2053,2055],{},[936,2052,938],{},[936,2054,941],{},[936,2056,944],{},[946,2058,2059,2073,2089,2107,2121,2135,2149,2164,2178],{},[933,2060,2061,2066,2069],{},[951,2062,2063],{},[618,2064,2065],{},"intensity",[951,2067,2068],{},"The intensity of the shake (0–1).",[951,2070,2071],{},[618,2072,1874],{},[933,2074,2075,2080,2085],{},[951,2076,2077],{},[618,2078,2079],{},"decay",[951,2081,958,2082,2084],{},[618,2083,961],{},", intensity decays over time.",[951,2086,2087],{},[618,2088,971],{},[933,2090,2091,2096,2102],{},[951,2092,2093],{},[618,2094,2095],{},"decayRate",[951,2097,2098,2099,2101],{},"How fast intensity changes when ",[618,2100,2079],{}," is enabled.",[951,2103,2104],{},[618,2105,2106],{},"0.65",[933,2108,2109,2114,2117],{},[951,2110,2111],{},[618,2112,2113],{},"maxYaw",[951,2115,2116],{},"Maximum yaw angle in radians.",[951,2118,2119],{},[618,2120,1886],{},[933,2122,2123,2128,2131],{},[951,2124,2125],{},[618,2126,2127],{},"maxPitch",[951,2129,2130],{},"Maximum pitch angle in radians.",[951,2132,2133],{},[618,2134,1886],{},[933,2136,2137,2142,2145],{},[951,2138,2139],{},[618,2140,2141],{},"maxRoll",[951,2143,2144],{},"Maximum roll angle in radians.",[951,2146,2147],{},[618,2148,1886],{},[933,2150,2151,2156,2159],{},[951,2152,2153],{},[618,2154,2155],{},"yawFrequency",[951,2157,2158],{},"Frequency of yaw oscillation.",[951,2160,2161],{},[618,2162,2163],{},"0.1",[933,2165,2166,2171,2174],{},[951,2167,2168],{},[618,2169,2170],{},"pitchFrequency",[951,2172,2173],{},"Frequency of pitch oscillation.",[951,2175,2176],{},[618,2177,2163],{},[933,2179,2180,2185,2188],{},[951,2181,2182],{},[618,2183,2184],{},"rollFrequency",[951,2186,2187],{},"Frequency of roll oscillation.",[951,2189,2190],{},[618,2191,2163],{},[1327,2193,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":2195},[2196,2197],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2198},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2203,"title":53,"body":2204,"description":7300,"extension":591,"links":592,"meta":7301,"navigation":594,"path":54,"seo":7302,"stem":55,"__hash__":7303},"docs/2.api/1.abstractions/decal.md",{"type":501,"value":2205,"toc":7265},[2206,2212,2294,2300,2302,2317,2772,2788,2792,2803,2966,2983,2986,3000,3055,3080,3084,3097,3102,3168,3175,3181,3198,3286,3291,3305,3380,4050,4055,4095,4108,4171,4174,4184,4270,4277,4297,4307,4310,4507,4519,4527,4542,4860,4864,4888,5251,5266,5286,5290,5306,5543,5549,5745,5751,5886,5895,5902,5958,6059,6064,6210,6215,6256,6260,6316,6320,6391,6395,6473,6480,6495,6536,6585,7262],[614,2207,2208,2211],{},[618,2209,2210],{},"\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.",[2213,2214,2215,2227,2240,2254,2261,2272,2284],"ul",{},[2216,2217,2218,2219,2222,2223,2226],"li",{},"🎨 Drop-in ",[1669,2220,2221],{},"editor UI"," via ",[618,2224,2225],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2216,2228,2229,2230,2222,2233,2239],{},"🛠 ",[1669,2231,2232],{},"Programmatic API",[1140,2234,2236],{"href":2235},"#programmatic-api-usedecaleditor",[618,2237,2238],{},"useDecalEditor()"," for custom panels and automation.",[2216,2241,2242,2243,2246,2247,2250,2251,1146],{},"🖼️ ",[1669,2244,2245],{},"Texture palette"," — pass an array of ",[618,2248,2249],{},"Texture"," to ",[618,2252,2253],{},":map",[2216,2255,2256,2257,2260],{},"🧩 ",[1669,2258,2259],{},"Custom material"," — override the default via the slot.",[2216,2262,2263,2264,2267,2268,2271],{},"💾 ",[1669,2265,2266],{},"Lossless JSON"," — ",[618,2269,2270],{},"v-model:data"," round-trips to plain JSON.",[2216,2273,2274,2275,2278,2279,2283],{},"⚡ ",[1669,2276,2277],{},"BVH-accelerated"," — auto-detected via ",[1140,2280,2281],{"href":332},[618,2282,331],{},"; 10–100× faster on dense meshes.",[2216,2285,2286,2287,2267,2290,2293],{},"📚 ",[1669,2288,2289],{},"Per-mesh stacking",[618,2291,2292],{},"zIndex"," with automatic polygon-offset.",[2295,2296,2297],"scene-wrapper",{},[2298,2299],"abstractions-decal",{},[504,2301,15],{"id":624},[614,2303,2304,2305,2307,2308,2311,2312,2314,2315,1146],{},"The minimal setup is a ",[618,2306,2210],{}," placed as a child of any ",[618,2309,2310],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[618,2313,2270],{}," and one or\nmore textures via ",[618,2316,2253],{},[626,2318,2320],{"className":628,"code":2319,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, OrbitControls, useTexture } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { reactive } from 'vue'\n\nconst { state: texture } = useTexture('/textures/logo.png')\n\nconst decals = reactive([\n  {\n    id: 'logo-1',\n    position: [0, 0, 0.5],\n    orientation: [0, 0, 0],\n    size: [0.75, 0.17, 1],\n    zIndex: 0,\n    map: 'logo.png',\n  },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[2, 2, 3]\" />\n    \u003COrbitControls />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"white\" />\n      \u003CDecal v-if=\"texture\" v-model:data=\"decals\" :map=\"texture\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,2321,2322,2342,2370,2388,2407,2411,2449,2453,2467,2472,2489,2517,2540,2566,2577,2593,2598,2603,2611,2615,2623,2632,2652,2661,2670,2679,2701,2745,2754,2763],{"__ignoreMap":576},[637,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340],{"class":639,"line":577},[637,2325,643],{"class":642},[637,2327,647],{"class":646},[637,2329,651],{"class":650},[637,2331,654],{"class":650},[637,2333,657],{"class":642},[637,2335,660],{"class":642},[637,2337,664],{"class":663},[637,2339,660],{"class":642},[637,2341,669],{"class":642},[637,2343,2344,2346,2348,2351,2353,2355,2357,2360,2362,2364,2366,2368],{"class":639,"line":578},[637,2345,677],{"class":676},[637,2347,680],{"class":642},[637,2349,2350],{"class":683}," Decal",[637,2352,687],{"class":642},[637,2354,690],{"class":683},[637,2356,687],{"class":642},[637,2358,2359],{"class":683}," useTexture",[637,2361,693],{"class":642},[637,2363,696],{"class":676},[637,2365,699],{"class":642},[637,2367,702],{"class":663},[637,2369,705],{"class":642},[637,2371,2372,2374,2376,2378,2380,2382,2384,2386],{"class":639,"line":708},[637,2373,677],{"class":676},[637,2375,680],{"class":642},[637,2377,715],{"class":683},[637,2379,693],{"class":642},[637,2381,696],{"class":676},[637,2383,699],{"class":642},[637,2385,724],{"class":663},[637,2387,705],{"class":642},[637,2389,2390,2392,2394,2397,2399,2401,2403,2405],{"class":639,"line":729},[637,2391,677],{"class":676},[637,2393,680],{"class":642},[637,2395,2396],{"class":683}," reactive",[637,2398,693],{"class":642},[637,2400,696],{"class":676},[637,2402,699],{"class":642},[637,2404,633],{"class":663},[637,2406,705],{"class":642},[637,2408,2409],{"class":639,"line":739},[637,2410,742],{"emptyLinePlaceholder":594},[637,2412,2413,2416,2418,2421,2423,2426,2429,2432,2435,2438,2441,2444,2446],{"class":639,"line":745},[637,2414,2415],{"class":650},"const",[637,2417,680],{"class":642},[637,2419,2420],{"class":646}," state",[637,2422,1218],{"class":642},[637,2424,2425],{"class":683}," texture ",[637,2427,2428],{"class":642},"}",[637,2430,2431],{"class":642}," =",[637,2433,2359],{"class":2434},"s2Zo4",[637,2436,2437],{"class":683},"(",[637,2439,2440],{"class":642},"'",[637,2442,2443],{"class":663},"/textures/logo.png",[637,2445,2440],{"class":642},[637,2447,2448],{"class":683},")\n",[637,2450,2451],{"class":639,"line":755},[637,2452,742],{"emptyLinePlaceholder":594},[637,2454,2455,2457,2460,2462,2464],{"class":639,"line":778},[637,2456,2415],{"class":650},[637,2458,2459],{"class":683}," decals ",[637,2461,657],{"class":642},[637,2463,2396],{"class":2434},[637,2465,2466],{"class":683},"([\n",[637,2468,2469],{"class":639,"line":790},[637,2470,2471],{"class":642},"  {\n",[637,2473,2474,2477,2479,2481,2484,2486],{"class":639,"line":800},[637,2475,2476],{"class":646},"    id",[637,2478,1218],{"class":642},[637,2480,699],{"class":642},[637,2482,2483],{"class":663},"logo-1",[637,2485,2440],{"class":642},[637,2487,2488],{"class":642},",\n",[637,2490,2491,2494,2496,2499,2502,2504,2507,2509,2512,2515],{"class":639,"line":805},[637,2492,2493],{"class":646},"    position",[637,2495,1218],{"class":642},[637,2497,2498],{"class":683}," [",[637,2500,965],{"class":2501},"sbssI",[637,2503,687],{"class":642},[637,2505,2506],{"class":2501}," 0",[637,2508,687],{"class":642},[637,2510,2511],{"class":2501}," 0.5",[637,2513,2514],{"class":683},"]",[637,2516,2488],{"class":642},[637,2518,2519,2522,2524,2526,2528,2530,2532,2534,2536,2538],{"class":639,"line":827},[637,2520,2521],{"class":646},"    orientation",[637,2523,1218],{"class":642},[637,2525,2498],{"class":683},[637,2527,965],{"class":2501},[637,2529,687],{"class":642},[637,2531,2506],{"class":2501},[637,2533,687],{"class":642},[637,2535,2506],{"class":2501},[637,2537,2514],{"class":683},[637,2539,2488],{"class":642},[637,2541,2542,2545,2547,2549,2552,2554,2557,2559,2562,2564],{"class":639,"line":631},[637,2543,2544],{"class":646},"    size",[637,2546,1218],{"class":642},[637,2548,2498],{"class":683},[637,2550,2551],{"class":2501},"0.75",[637,2553,687],{"class":642},[637,2555,2556],{"class":2501}," 0.17",[637,2558,687],{"class":642},[637,2560,2561],{"class":2501}," 1",[637,2563,2514],{"class":683},[637,2565,2488],{"class":642},[637,2567,2568,2571,2573,2575],{"class":639,"line":850},[637,2569,2570],{"class":646},"    zIndex",[637,2572,1218],{"class":642},[637,2574,2506],{"class":2501},[637,2576,2488],{"class":642},[637,2578,2579,2582,2584,2586,2589,2591],{"class":639,"line":861},[637,2580,2581],{"class":646},"    map",[637,2583,1218],{"class":642},[637,2585,699],{"class":642},[637,2587,2588],{"class":663},"logo.png",[637,2590,2440],{"class":642},[637,2592,2488],{"class":642},[637,2594,2595],{"class":639,"line":872},[637,2596,2597],{"class":642},"  },\n",[637,2599,2600],{"class":639,"line":882},[637,2601,2602],{"class":683},"])\n",[637,2604,2605,2607,2609],{"class":639,"line":632},[637,2606,732],{"class":642},[637,2608,647],{"class":646},[637,2610,669],{"class":642},[637,2612,2613],{"class":639,"line":902},[637,2614,742],{"emptyLinePlaceholder":594},[637,2616,2617,2619,2621],{"class":639,"line":912},[637,2618,643],{"class":642},[637,2620,750],{"class":646},[637,2622,669],{"class":642},[637,2624,2626,2628,2630],{"class":639,"line":2625},21,[637,2627,758],{"class":642},[637,2629,761],{"class":646},[637,2631,669],{"class":642},[637,2633,2635,2637,2639,2641,2643,2645,2648,2650],{"class":639,"line":2634},22,[637,2636,781],{"class":642},[637,2638,784],{"class":646},[637,2640,1485],{"class":650},[637,2642,657],{"class":642},[637,2644,660],{"class":642},[637,2646,2647],{"class":663},"[2, 2, 3]",[637,2649,660],{"class":642},[637,2651,787],{"class":642},[637,2653,2655,2657,2659],{"class":639,"line":2654},23,[637,2656,781],{"class":642},[637,2658,795],{"class":646},[637,2660,787],{"class":642},[637,2662,2664,2666,2668],{"class":639,"line":2663},24,[637,2665,781],{"class":642},[637,2667,856],{"class":646},[637,2669,669],{"class":642},[637,2671,2673,2675,2677],{"class":639,"line":2672},25,[637,2674,853],{"class":642},[637,2676,867],{"class":646},[637,2678,787],{"class":642},[637,2680,2682,2684,2687,2690,2692,2694,2697,2699],{"class":639,"line":2681},26,[637,2683,853],{"class":642},[637,2685,2686],{"class":646},"TresMeshStandardMaterial",[637,2688,2689],{"class":650}," color",[637,2691,657],{"class":642},[637,2693,660],{"class":642},[637,2695,2696],{"class":663},"white",[637,2698,660],{"class":642},[637,2700,787],{"class":642},[637,2702,2704,2706,2708,2711,2713,2715,2718,2720,2723,2725,2727,2730,2732,2735,2737,2739,2741,2743],{"class":639,"line":2703},27,[637,2705,853],{"class":642},[637,2707,53],{"class":646},[637,2709,2710],{"class":650}," v-if",[637,2712,657],{"class":642},[637,2714,660],{"class":642},[637,2716,2717],{"class":663},"texture",[637,2719,660],{"class":642},[637,2721,2722],{"class":650}," v-model:data",[637,2724,657],{"class":642},[637,2726,660],{"class":642},[637,2728,2729],{"class":663},"decals",[637,2731,660],{"class":642},[637,2733,2734],{"class":650}," :map",[637,2736,657],{"class":642},[637,2738,660],{"class":642},[637,2740,2717],{"class":663},[637,2742,660],{"class":642},[637,2744,787],{"class":642},[637,2746,2748,2750,2752],{"class":639,"line":2747},28,[637,2749,895],{"class":642},[637,2751,856],{"class":646},[637,2753,669],{"class":642},[637,2755,2757,2759,2761],{"class":639,"line":2756},29,[637,2758,905],{"class":642},[637,2760,761],{"class":646},[637,2762,669],{"class":642},[637,2764,2766,2768,2770],{"class":639,"line":2765},30,[637,2767,732],{"class":642},[637,2769,750],{"class":646},[637,2771,669],{"class":642},[2005,2773,2774],{},[614,2775,2776,2777,2779,2780,2783,2784,2787],{},"The ",[618,2778,2270],{}," array is the ",[1669,2781,2782],{},"single source of truth"," — every\ndecal you can see lives in it. It serializes to plain JSON so you can\nsave / load it from a backend, localStorage, or a ",[618,2785,2786],{},".json"," file.",[504,2789,2791],{"id":2790},"multiple-textures-palette","Multiple textures (palette)",[614,2793,2794,2795,2797,2798,2802],{},"Pass an array to ",[618,2796,2253],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1140,2799,2800],{"href":154},[618,2801,153],{},"\nplugs in directly:",[626,2804,2806],{"className":628,"code":2805,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useTextures } from '@tresjs/cientos'\n\nconst { textures } = useTextures([\n  '/textures/logo.png',\n  '/textures/badge.png',\n  '/textures/sticker.png',\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CDecal v-model:data=\"decals\" :map=\"textures\" />\n\u003C/template>\n",[618,2807,2808,2828,2851,2855,2872,2883,2894,2905,2909,2917,2921,2929,2958],{"__ignoreMap":576},[637,2809,2810,2812,2814,2816,2818,2820,2822,2824,2826],{"class":639,"line":577},[637,2811,643],{"class":642},[637,2813,647],{"class":646},[637,2815,651],{"class":650},[637,2817,654],{"class":650},[637,2819,657],{"class":642},[637,2821,660],{"class":642},[637,2823,664],{"class":663},[637,2825,660],{"class":642},[637,2827,669],{"class":642},[637,2829,2830,2832,2834,2836,2838,2841,2843,2845,2847,2849],{"class":639,"line":578},[637,2831,677],{"class":676},[637,2833,680],{"class":642},[637,2835,2350],{"class":683},[637,2837,687],{"class":642},[637,2839,2840],{"class":683}," useTextures",[637,2842,693],{"class":642},[637,2844,696],{"class":676},[637,2846,699],{"class":642},[637,2848,702],{"class":663},[637,2850,705],{"class":642},[637,2852,2853],{"class":639,"line":708},[637,2854,742],{"emptyLinePlaceholder":594},[637,2856,2857,2859,2861,2864,2866,2868,2870],{"class":639,"line":729},[637,2858,2415],{"class":650},[637,2860,680],{"class":642},[637,2862,2863],{"class":683}," textures ",[637,2865,2428],{"class":642},[637,2867,2431],{"class":642},[637,2869,2840],{"class":2434},[637,2871,2466],{"class":683},[637,2873,2874,2877,2879,2881],{"class":639,"line":739},[637,2875,2876],{"class":642},"  '",[637,2878,2443],{"class":663},[637,2880,2440],{"class":642},[637,2882,2488],{"class":642},[637,2884,2885,2887,2890,2892],{"class":639,"line":745},[637,2886,2876],{"class":642},[637,2888,2889],{"class":663},"/textures/badge.png",[637,2891,2440],{"class":642},[637,2893,2488],{"class":642},[637,2895,2896,2898,2901,2903],{"class":639,"line":755},[637,2897,2876],{"class":642},[637,2899,2900],{"class":663},"/textures/sticker.png",[637,2902,2440],{"class":642},[637,2904,2488],{"class":642},[637,2906,2907],{"class":639,"line":778},[637,2908,2602],{"class":683},[637,2910,2911,2913,2915],{"class":639,"line":790},[637,2912,732],{"class":642},[637,2914,647],{"class":646},[637,2916,669],{"class":642},[637,2918,2919],{"class":639,"line":800},[637,2920,742],{"emptyLinePlaceholder":594},[637,2922,2923,2925,2927],{"class":639,"line":805},[637,2924,643],{"class":642},[637,2926,750],{"class":646},[637,2928,669],{"class":642},[637,2930,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951,2954,2956],{"class":639,"line":827},[637,2932,758],{"class":642},[637,2934,53],{"class":646},[637,2936,2722],{"class":650},[637,2938,657],{"class":642},[637,2940,660],{"class":642},[637,2942,2729],{"class":663},[637,2944,660],{"class":642},[637,2946,2734],{"class":650},[637,2948,657],{"class":642},[637,2950,660],{"class":642},[637,2952,2953],{"class":663},"textures",[637,2955,660],{"class":642},[637,2957,787],{"class":642},[637,2959,2960,2962,2964],{"class":639,"line":631},[637,2961,732],{"class":642},[637,2963,750],{"class":646},[637,2965,669],{"class":642},[614,2967,2968,2969,2267,2972,2974,2975,2978,2979,2982],{},"Each entry references its texture by ",[618,2970,2971],{},"name",[618,2973,2210],{}," auto-fills\n",[618,2976,2977],{},"texture.name"," from the URL filename when missing, so JSON ",[618,2980,2981],{},"map","\nfields round-trip cleanly.",[504,2984,2259],{"id":2985},"custom-material",[614,2987,2988,2989,2992,2993,2488,2996,2999],{},"The default material is ",[618,2990,2991],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[618,2994,2995],{},"MeshStandardMaterial",[618,2997,2998],{},"MeshPhysicalMaterial",", or a custom shader.",[626,3001,3003],{"className":628,"code":3002,"language":633,"meta":576,"style":576},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[618,3004,3005,3042,3047],{"__ignoreMap":576},[637,3006,3007,3009,3011,3014,3016,3019,3021,3023,3025,3027,3030,3032,3034,3036,3038,3040],{"class":639,"line":577},[637,3008,643],{"class":642},[637,3010,53],{"class":646},[637,3012,3013],{"class":650}," v-model",[637,3015,1218],{"class":642},[637,3017,3018],{"class":650},"data",[637,3020,657],{"class":642},[637,3022,660],{"class":642},[637,3024,2729],{"class":683},[637,3026,660],{"class":642},[637,3028,3029],{"class":642}," :",[637,3031,2981],{"class":650},[637,3033,657],{"class":642},[637,3035,660],{"class":642},[637,3037,2717],{"class":683},[637,3039,660],{"class":642},[637,3041,669],{"class":642},[637,3043,3044],{"class":639,"line":578},[637,3045,3046],{"class":683},"  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[637,3048,3049,3051,3053],{"class":639,"line":708},[637,3050,732],{"class":642},[637,3052,53],{"class":646},[637,3054,669],{"class":642},[2005,3056,3057],{},[614,3058,3059,3060,3063,3064,3067,3068,3063,3071,3074,3075,2488,3077,3079],{},"Keep ",[618,3061,3062],{},"transparent: true"," and ",[618,3065,3066],{},"polygonOffset: true"," on any custom\nmaterial, otherwise stacking and alpha handling won't work as expected.\nColor / opacity tint from the editor only applies to materials\nexposing ",[618,3069,3070],{},".color",[618,3072,3073],{},".opacity"," (",[618,3076,2991],{},[618,3078,2995],{},", …) — bespoke shader materials are skipped\nsilently.",[504,3081,3083],{"id":3082},"stacking-decals-z-layering","Stacking decals (z-layering)",[614,3085,3086,3087,3089,3090,3093,3094,1146],{},"Each decal has a ",[618,3088,2292],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[618,3091,3092],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[618,3095,3096],{},"layerGap",[2295,3098,3099],{},[3100,3101],"abstractions-decal-stacking",{},[626,3103,3105],{"className":628,"code":3104,"language":633,"meta":576,"style":576},"\u003CDecal\n  v-model:data=\"decals\"\n  :map=\"textures\"\n  :layer-gap=\"0.002\"\n/>\n",[618,3106,3107,3114,3132,3147,3163],{"__ignoreMap":576},[637,3108,3109,3111],{"class":639,"line":577},[637,3110,643],{"class":642},[637,3112,3113],{"class":646},"Decal\n",[637,3115,3116,3119,3121,3123,3125,3127,3129],{"class":639,"line":578},[637,3117,3118],{"class":650},"  v-model",[637,3120,1218],{"class":642},[637,3122,3018],{"class":650},[637,3124,657],{"class":642},[637,3126,660],{"class":642},[637,3128,2729],{"class":683},[637,3130,3131],{"class":642},"\"\n",[637,3133,3134,3137,3139,3141,3143,3145],{"class":639,"line":708},[637,3135,3136],{"class":642},"  :",[637,3138,2981],{"class":650},[637,3140,657],{"class":642},[637,3142,660],{"class":642},[637,3144,2953],{"class":683},[637,3146,3131],{"class":642},[637,3148,3149,3151,3154,3156,3158,3161],{"class":639,"line":729},[637,3150,3136],{"class":642},[637,3152,3153],{"class":650},"layer-gap",[637,3155,657],{"class":642},[637,3157,660],{"class":642},[637,3159,3160],{"class":2501},"0.002",[637,3162,3131],{"class":642},[637,3164,3165],{"class":639,"line":739},[637,3166,3167],{"class":683},"/>\n",[614,3169,3170,3171,3174],{},"zIndex stacks are ",[1669,3172,3173],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[504,3176,3178,3179],{"id":3177},"editable-mode-decaldebugui","Editable mode + ",[618,3180,2225],{},[614,3182,3183,3184,3187,3188,3190,3191,3194,3195,1146],{},"Add the ",[618,3185,3186],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[618,3189,2225],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1669,3192,3193],{},"outside"," ",[618,3196,3197],{},"\u003CTresCanvas>",[3199,3200,3201,3215,3236],"prose-warning",{},[614,3202,3203,3205,3206,3209,3210,3212,3213,1146],{},[618,3204,2225],{}," needs its stylesheet — import it ",[1669,3207,3208],{},"once"," at your app\nentry. ",[618,3211,2210],{}," itself is style-less, so this is only needed when you\nmount ",[618,3214,2225],{},[626,3216,3218],{"className":1186,"code":3217,"language":664,"meta":576,"style":576},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[618,3219,3220,3225],{"__ignoreMap":576},[637,3221,3222],{"class":639,"line":577},[637,3223,3224],{"class":1209},"// Vite / Vue — in main.ts\n",[637,3226,3227,3229,3231,3234],{"class":639,"line":578},[637,3228,677],{"class":676},[637,3230,699],{"class":642},[637,3232,3233],{"class":663},"@tresjs/cientos/styles.css",[637,3235,705],{"class":642},[626,3237,3239],{"className":1186,"code":3238,"language":664,"meta":576,"style":576},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['@tresjs/cientos/styles.css'],\n})\n",[618,3240,3241,3246,3261,3280],{"__ignoreMap":576},[637,3242,3243],{"class":639,"line":577},[637,3244,3245],{"class":1209},"// Nuxt — in nuxt.config.ts\n",[637,3247,3248,3250,3253,3256,3258],{"class":639,"line":578},[637,3249,1194],{"class":676},[637,3251,3252],{"class":676}," default",[637,3254,3255],{"class":2434}," defineNuxtConfig",[637,3257,2437],{"class":683},[637,3259,3260],{"class":642},"{\n",[637,3262,3263,3266,3268,3270,3272,3274,3276,3278],{"class":639,"line":708},[637,3264,3265],{"class":646},"  css",[637,3267,1218],{"class":642},[637,3269,2498],{"class":683},[637,3271,2440],{"class":642},[637,3273,3233],{"class":663},[637,3275,2440],{"class":642},[637,3277,2514],{"class":683},[637,3279,2488],{"class":642},[637,3281,3282,3284],{"class":639,"line":729},[637,3283,2428],{"class":642},[637,3285,2448],{"class":683},[2295,3287,3288],{},[3289,3290],"abstractions-decal-editable",{},[614,3292,3293,3294,3297,3298,3301,3302,1146],{},"Three panels: a floating ",[1669,3295,3296],{},"handle"," anchored to the editing decal, a\nbottom ",[1669,3299,3300],{},"dock"," (texture picker + edit tools), a right-side ",[1669,3303,3304],{},"layer\npanel",[2213,3306,3307,3317,3322,3328,3341,3346,3351,3357,3363,3369,3375],{},[2216,3308,3309,3312,3313,3316],{},[1669,3310,3311],{},"Floating handle"," (rotate + scale + snap + live ",[618,3314,3315],{},"scale% · rotation° · L\u003Cn>"," badge)",[2216,3318,3319],{},[1669,3320,3321],{},"Color tint & opacity",[2216,3323,3324,3327],{},[1669,3325,3326],{},"Mirror"," (flip X / flip Y)",[2216,3329,3330,3074,3333,3336,3337,3340],{},[1669,3331,3332],{},"Layer controls",[618,3334,3335],{},"L+"," / ",[618,3338,3339],{},"L-",")",[2216,3342,3343],{},[1669,3344,3345],{},"Visibility toggle",[2216,3347,3348],{},[1669,3349,3350],{},"Per-row remove",[2216,3352,3353,3356],{},[1669,3354,3355],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2216,3358,3359,3362],{},[1669,3360,3361],{},"Texture picker"," (drag or click-to-arm)",[2216,3364,3365,3368],{},[1669,3366,3367],{},"Mode badge"," (placing / editing status)",[2216,3370,3371,3374],{},[1669,3372,3373],{},"Undo / Redo"," buttons",[2216,3376,3377,3374],{},[1669,3378,3379],{},"Import / Export",[626,3381,3383],{"className":628,"code":3382,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, DecalDebugUI, OrbitControls, useTextures } from '@tresjs/cientos'\nimport type { DecalEditorSession, DecalJsonEntry } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { computed, reactive, shallowRef } from 'vue'\n\nconst { textures } = useTextures(['/textures/a.png', '/textures/b.png'])\n\nconst layout = reactive\u003CRecord\u003Cstring, DecalJsonEntry[]>>({\n  cube: [],\n  sphere: [],\n})\n\nconst decalRef = shallowRef\u003C{ editor: DecalEditorSession } | null>(null)\nconst session = computed(() => decalRef.value?.editor ?? null)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CDecalDebugUI :session=\"session\" :textures=\"textures ?? []\" :data=\"layout\" />\n\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[2, 2, 4]\" />\n    \u003COrbitControls />\n\n    \u003CTresMesh name=\"cube\" :position=\"[-1.2, 0, 0]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"white\" />\n      \u003CDecal ref=\"decalRef\" v-model:data=\"layout.cube\" :map=\"textures\" editable />\n    \u003C/TresMesh>\n\n    \u003CTresMesh name=\"sphere\" :position=\"[1.2, 0, 0]\">\n      \u003CTresSphereGeometry :args=\"[0.7]\" />\n      \u003CTresMeshStandardMaterial color=\"white\" />\n      \u003CDecal v-model:data=\"layout.sphere\" :map=\"textures\" editable />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,3384,3385,3405,3436,3463,3481,3509,3513,3548,3552,3587,3599,3610,3616,3620,3659,3699,3707,3711,3719,3764,3768,3776,3795,3803,3807,3838,3846,3864,3908,3916,3920,3951,3972,3991,4023,4032,4041],{"__ignoreMap":576},[637,3386,3387,3389,3391,3393,3395,3397,3399,3401,3403],{"class":639,"line":577},[637,3388,643],{"class":642},[637,3390,647],{"class":646},[637,3392,651],{"class":650},[637,3394,654],{"class":650},[637,3396,657],{"class":642},[637,3398,660],{"class":642},[637,3400,664],{"class":663},[637,3402,660],{"class":642},[637,3404,669],{"class":642},[637,3406,3407,3409,3411,3413,3415,3418,3420,3422,3424,3426,3428,3430,3432,3434],{"class":639,"line":578},[637,3408,677],{"class":676},[637,3410,680],{"class":642},[637,3412,2350],{"class":683},[637,3414,687],{"class":642},[637,3416,3417],{"class":683}," DecalDebugUI",[637,3419,687],{"class":642},[637,3421,690],{"class":683},[637,3423,687],{"class":642},[637,3425,2840],{"class":683},[637,3427,693],{"class":642},[637,3429,696],{"class":676},[637,3431,699],{"class":642},[637,3433,702],{"class":663},[637,3435,705],{"class":642},[637,3437,3438,3440,3443,3445,3448,3450,3453,3455,3457,3459,3461],{"class":639,"line":708},[637,3439,677],{"class":676},[637,3441,3442],{"class":676}," type",[637,3444,680],{"class":642},[637,3446,3447],{"class":683}," DecalEditorSession",[637,3449,687],{"class":642},[637,3451,3452],{"class":683}," DecalJsonEntry",[637,3454,693],{"class":642},[637,3456,696],{"class":676},[637,3458,699],{"class":642},[637,3460,702],{"class":663},[637,3462,705],{"class":642},[637,3464,3465,3467,3469,3471,3473,3475,3477,3479],{"class":639,"line":729},[637,3466,677],{"class":676},[637,3468,680],{"class":642},[637,3470,715],{"class":683},[637,3472,693],{"class":642},[637,3474,696],{"class":676},[637,3476,699],{"class":642},[637,3478,724],{"class":663},[637,3480,705],{"class":642},[637,3482,3483,3485,3487,3490,3492,3494,3496,3499,3501,3503,3505,3507],{"class":639,"line":739},[637,3484,677],{"class":676},[637,3486,680],{"class":642},[637,3488,3489],{"class":683}," computed",[637,3491,687],{"class":642},[637,3493,2396],{"class":683},[637,3495,687],{"class":642},[637,3497,3498],{"class":683}," shallowRef",[637,3500,693],{"class":642},[637,3502,696],{"class":676},[637,3504,699],{"class":642},[637,3506,633],{"class":663},[637,3508,705],{"class":642},[637,3510,3511],{"class":639,"line":745},[637,3512,742],{"emptyLinePlaceholder":594},[637,3514,3515,3517,3519,3521,3523,3525,3527,3530,3532,3535,3537,3539,3541,3544,3546],{"class":639,"line":755},[637,3516,2415],{"class":650},[637,3518,680],{"class":642},[637,3520,2863],{"class":683},[637,3522,2428],{"class":642},[637,3524,2431],{"class":642},[637,3526,2840],{"class":2434},[637,3528,3529],{"class":683},"([",[637,3531,2440],{"class":642},[637,3533,3534],{"class":663},"/textures/a.png",[637,3536,2440],{"class":642},[637,3538,687],{"class":642},[637,3540,699],{"class":642},[637,3542,3543],{"class":663},"/textures/b.png",[637,3545,2440],{"class":642},[637,3547,2602],{"class":683},[637,3549,3550],{"class":639,"line":778},[637,3551,742],{"emptyLinePlaceholder":594},[637,3553,3554,3556,3559,3561,3563,3565,3568,3570,3573,3575,3577,3580,3583,3585],{"class":639,"line":790},[637,3555,2415],{"class":650},[637,3557,3558],{"class":683}," layout ",[637,3560,657],{"class":642},[637,3562,2396],{"class":2434},[637,3564,643],{"class":642},[637,3566,3567],{"class":1200},"Record",[637,3569,643],{"class":642},[637,3571,3572],{"class":1200},"string",[637,3574,687],{"class":642},[637,3576,3452],{"class":1200},[637,3578,3579],{"class":683},"[]",[637,3581,3582],{"class":642},">>",[637,3584,2437],{"class":683},[637,3586,3260],{"class":642},[637,3588,3589,3592,3594,3597],{"class":639,"line":800},[637,3590,3591],{"class":646},"  cube",[637,3593,1218],{"class":642},[637,3595,3596],{"class":683}," []",[637,3598,2488],{"class":642},[637,3600,3601,3604,3606,3608],{"class":639,"line":805},[637,3602,3603],{"class":646},"  sphere",[637,3605,1218],{"class":642},[637,3607,3596],{"class":683},[637,3609,2488],{"class":642},[637,3611,3612,3614],{"class":639,"line":827},[637,3613,2428],{"class":642},[637,3615,2448],{"class":683},[637,3617,3618],{"class":639,"line":631},[637,3619,742],{"emptyLinePlaceholder":594},[637,3621,3622,3624,3627,3629,3631,3634,3637,3639,3641,3643,3646,3649,3652,3654,3657],{"class":639,"line":850},[637,3623,2415],{"class":650},[637,3625,3626],{"class":683}," decalRef ",[637,3628,657],{"class":642},[637,3630,3498],{"class":2434},[637,3632,3633],{"class":642},"\u003C{",[637,3635,3636],{"class":646}," editor",[637,3638,1218],{"class":642},[637,3640,3447],{"class":1200},[637,3642,693],{"class":642},[637,3644,3645],{"class":642}," |",[637,3647,3648],{"class":1200}," null",[637,3650,3651],{"class":642},">",[637,3653,2437],{"class":683},[637,3655,3656],{"class":642},"null",[637,3658,2448],{"class":683},[637,3660,3661,3663,3666,3668,3670,3672,3675,3678,3681,3683,3686,3689,3692,3695,3697],{"class":639,"line":861},[637,3662,2415],{"class":650},[637,3664,3665],{"class":683}," session ",[637,3667,657],{"class":642},[637,3669,3489],{"class":2434},[637,3671,2437],{"class":683},[637,3673,3674],{"class":642},"()",[637,3676,3677],{"class":650}," =>",[637,3679,3680],{"class":683}," decalRef",[637,3682,1146],{"class":642},[637,3684,3685],{"class":683},"value",[637,3687,3688],{"class":642},"?.",[637,3690,3691],{"class":683},"editor ",[637,3693,3694],{"class":642},"??",[637,3696,3648],{"class":642},[637,3698,2448],{"class":683},[637,3700,3701,3703,3705],{"class":639,"line":872},[637,3702,732],{"class":642},[637,3704,647],{"class":646},[637,3706,669],{"class":642},[637,3708,3709],{"class":639,"line":882},[637,3710,742],{"emptyLinePlaceholder":594},[637,3712,3713,3715,3717],{"class":639,"line":632},[637,3714,643],{"class":642},[637,3716,750],{"class":646},[637,3718,669],{"class":642},[637,3720,3721,3723,3726,3729,3731,3733,3736,3738,3741,3743,3745,3748,3750,3753,3755,3757,3760,3762],{"class":639,"line":902},[637,3722,758],{"class":642},[637,3724,3725],{"class":646},"DecalDebugUI",[637,3727,3728],{"class":650}," :session",[637,3730,657],{"class":642},[637,3732,660],{"class":642},[637,3734,3735],{"class":663},"session",[637,3737,660],{"class":642},[637,3739,3740],{"class":650}," :textures",[637,3742,657],{"class":642},[637,3744,660],{"class":642},[637,3746,3747],{"class":663},"textures ?? []",[637,3749,660],{"class":642},[637,3751,3752],{"class":650}," :data",[637,3754,657],{"class":642},[637,3756,660],{"class":642},[637,3758,3759],{"class":663},"layout",[637,3761,660],{"class":642},[637,3763,787],{"class":642},[637,3765,3766],{"class":639,"line":912},[637,3767,742],{"emptyLinePlaceholder":594},[637,3769,3770,3772,3774],{"class":639,"line":2625},[637,3771,758],{"class":642},[637,3773,761],{"class":646},[637,3775,669],{"class":642},[637,3777,3778,3780,3782,3784,3786,3788,3791,3793],{"class":639,"line":2634},[637,3779,781],{"class":642},[637,3781,784],{"class":646},[637,3783,1485],{"class":650},[637,3785,657],{"class":642},[637,3787,660],{"class":642},[637,3789,3790],{"class":663},"[2, 2, 4]",[637,3792,660],{"class":642},[637,3794,787],{"class":642},[637,3796,3797,3799,3801],{"class":639,"line":2654},[637,3798,781],{"class":642},[637,3800,795],{"class":646},[637,3802,787],{"class":642},[637,3804,3805],{"class":639,"line":2663},[637,3806,742],{"emptyLinePlaceholder":594},[637,3808,3809,3811,3813,3816,3818,3820,3823,3825,3827,3829,3831,3834,3836],{"class":639,"line":2672},[637,3810,781],{"class":642},[637,3812,856],{"class":646},[637,3814,3815],{"class":650}," name",[637,3817,657],{"class":642},[637,3819,660],{"class":642},[637,3821,3822],{"class":663},"cube",[637,3824,660],{"class":642},[637,3826,1485],{"class":650},[637,3828,657],{"class":642},[637,3830,660],{"class":642},[637,3832,3833],{"class":663},"[-1.2, 0, 0]",[637,3835,660],{"class":642},[637,3837,669],{"class":642},[637,3839,3840,3842,3844],{"class":639,"line":2681},[637,3841,853],{"class":642},[637,3843,867],{"class":646},[637,3845,787],{"class":642},[637,3847,3848,3850,3852,3854,3856,3858,3860,3862],{"class":639,"line":2703},[637,3849,853],{"class":642},[637,3851,2686],{"class":646},[637,3853,2689],{"class":650},[637,3855,657],{"class":642},[637,3857,660],{"class":642},[637,3859,2696],{"class":663},[637,3861,660],{"class":642},[637,3863,787],{"class":642},[637,3865,3866,3868,3870,3873,3875,3877,3880,3882,3884,3886,3888,3891,3893,3895,3897,3899,3901,3903,3906],{"class":639,"line":2747},[637,3867,853],{"class":642},[637,3869,53],{"class":646},[637,3871,3872],{"class":650}," ref",[637,3874,657],{"class":642},[637,3876,660],{"class":642},[637,3878,3879],{"class":663},"decalRef",[637,3881,660],{"class":642},[637,3883,2722],{"class":650},[637,3885,657],{"class":642},[637,3887,660],{"class":642},[637,3889,3890],{"class":663},"layout.cube",[637,3892,660],{"class":642},[637,3894,2734],{"class":650},[637,3896,657],{"class":642},[637,3898,660],{"class":642},[637,3900,2953],{"class":663},[637,3902,660],{"class":642},[637,3904,3905],{"class":650}," editable",[637,3907,787],{"class":642},[637,3909,3910,3912,3914],{"class":639,"line":2756},[637,3911,895],{"class":642},[637,3913,856],{"class":646},[637,3915,669],{"class":642},[637,3917,3918],{"class":639,"line":2765},[637,3919,742],{"emptyLinePlaceholder":594},[637,3921,3923,3925,3927,3929,3931,3933,3936,3938,3940,3942,3944,3947,3949],{"class":639,"line":3922},31,[637,3924,781],{"class":642},[637,3926,856],{"class":646},[637,3928,3815],{"class":650},[637,3930,657],{"class":642},[637,3932,660],{"class":642},[637,3934,3935],{"class":663},"sphere",[637,3937,660],{"class":642},[637,3939,1485],{"class":650},[637,3941,657],{"class":642},[637,3943,660],{"class":642},[637,3945,3946],{"class":663},"[1.2, 0, 0]",[637,3948,660],{"class":642},[637,3950,669],{"class":642},[637,3952,3954,3956,3959,3961,3963,3965,3968,3970],{"class":639,"line":3953},32,[637,3955,853],{"class":642},[637,3957,3958],{"class":646},"TresSphereGeometry",[637,3960,1959],{"class":650},[637,3962,657],{"class":642},[637,3964,660],{"class":642},[637,3966,3967],{"class":663},"[0.7]",[637,3969,660],{"class":642},[637,3971,787],{"class":642},[637,3973,3975,3977,3979,3981,3983,3985,3987,3989],{"class":639,"line":3974},33,[637,3976,853],{"class":642},[637,3978,2686],{"class":646},[637,3980,2689],{"class":650},[637,3982,657],{"class":642},[637,3984,660],{"class":642},[637,3986,2696],{"class":663},[637,3988,660],{"class":642},[637,3990,787],{"class":642},[637,3992,3994,3996,3998,4000,4002,4004,4007,4009,4011,4013,4015,4017,4019,4021],{"class":639,"line":3993},34,[637,3995,853],{"class":642},[637,3997,53],{"class":646},[637,3999,2722],{"class":650},[637,4001,657],{"class":642},[637,4003,660],{"class":642},[637,4005,4006],{"class":663},"layout.sphere",[637,4008,660],{"class":642},[637,4010,2734],{"class":650},[637,4012,657],{"class":642},[637,4014,660],{"class":642},[637,4016,2953],{"class":663},[637,4018,660],{"class":642},[637,4020,3905],{"class":650},[637,4022,787],{"class":642},[637,4024,4026,4028,4030],{"class":639,"line":4025},35,[637,4027,895],{"class":642},[637,4029,856],{"class":646},[637,4031,669],{"class":642},[637,4033,4035,4037,4039],{"class":639,"line":4034},36,[637,4036,905],{"class":642},[637,4038,761],{"class":646},[637,4040,669],{"class":642},[637,4042,4044,4046,4048],{"class":639,"line":4043},37,[637,4045,732],{"class":642},[637,4047,750],{"class":646},[637,4049,669],{"class":642},[4051,4052,4054],"h3",{"id":4053},"how-the-wiring-works","How the wiring works",[2213,4056,4057,4068,4077,4086],{},[2216,4058,4059,4062,4063,4065,4066,1146],{},[618,4060,4061],{},"v-model:data=\"layout.cube\""," — each ",[618,4064,2210],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[618,4067,2971],{},[2216,4069,4070,4073,4074,4076],{},[618,4071,4072],{},"ref=\"decalRef\""," — grab a reference to any ",[618,4075,2210],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2216,4078,4079,4082,4083,4085],{},[618,4080,4081],{},"session = decalRef.value?.editor"," — the editor session powers\n",[618,4084,2225],{},". Pass it through.",[2216,4087,4088,4091,4092,4094],{},[618,4089,4090],{},":data=\"layout\""," on ",[618,4093,2225],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[2005,4096,4097],{},[614,4098,4099,4100,4103,4104,4107],{},"The overlay is full-viewport (",[618,4101,4102],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[618,4105,4106],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[626,4109,4111],{"className":628,"code":4110,"language":633,"meta":576,"style":576},"\u003Cdiv style=\"position: relative; height: 500px;\">\n  \u003CDecalDebugUI contained ... />\n  \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[618,4112,4113,4153,4158,4163],{"__ignoreMap":576},[637,4114,4115,4117,4120,4123,4125,4127,4131,4133,4136,4139,4142,4144,4147,4149,4151],{"class":639,"line":577},[637,4116,643],{"class":642},[637,4118,4119],{"class":646},"div",[637,4121,4122],{"class":650}," style",[637,4124,657],{"class":642},[637,4126,660],{"class":642},[637,4128,4130],{"class":4129},"sqsOY","position",[637,4132,1218],{"class":642},[637,4134,4135],{"class":683}," relative",[637,4137,4138],{"class":642},";",[637,4140,4141],{"class":4129}," height",[637,4143,1218],{"class":642},[637,4145,4146],{"class":2501}," 500px",[637,4148,4138],{"class":642},[637,4150,660],{"class":642},[637,4152,669],{"class":642},[637,4154,4155],{"class":639,"line":578},[637,4156,4157],{"class":683},"  \u003CDecalDebugUI contained ... />\n",[637,4159,4160],{"class":639,"line":708},[637,4161,4162],{"class":683},"  \u003CTresCanvas>...\u003C/TresCanvas>\n",[637,4164,4165,4167,4169],{"class":639,"line":729},[637,4166,732],{"class":642},[637,4168,4119],{"class":646},[637,4170,669],{"class":642},[504,4172,3379],{"id":4173},"import-export",[614,4175,4176,4177,4180,4181,4183],{},"The Export button in the dock auto-downloads the current layout as\n",[618,4178,4179],{},"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",[618,4182,2210],{}," automatically — no extra host code needed.",[626,4185,4187],{"className":628,"code":4186,"language":633,"meta":576,"style":576},"\u003C!-- Custom filename -->\n\u003CDecalDebugUI :export-filename=\"`${sceneName}.json`\" ... />\n\n\u003C!-- Disable the built-in download — handle export yourself -->\n\u003CDecalDebugUI :export-filename=\"null\" @export=\"postToBackend\" ... />\n",[618,4188,4189,4194,4225,4229,4234],{"__ignoreMap":576},[637,4190,4191],{"class":639,"line":577},[637,4192,4193],{"class":1209},"\u003C!-- Custom filename -->\n",[637,4195,4196,4198,4200,4202,4205,4207,4210,4213,4215,4217,4220,4223],{"class":639,"line":578},[637,4197,643],{"class":642},[637,4199,3725],{"class":646},[637,4201,3029],{"class":642},[637,4203,4204],{"class":650},"export-filename",[637,4206,657],{"class":642},[637,4208,4209],{"class":642},"\"`${",[637,4211,4212],{"class":683},"sceneName",[637,4214,2428],{"class":642},[637,4216,2786],{"class":663},[637,4218,4219],{"class":642},"`\"",[637,4221,4222],{"class":642}," ...",[637,4224,787],{"class":642},[637,4226,4227],{"class":639,"line":708},[637,4228,742],{"emptyLinePlaceholder":594},[637,4230,4231],{"class":639,"line":729},[637,4232,4233],{"class":1209},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[637,4235,4236,4238,4240,4242,4244,4246,4248,4250,4252,4255,4257,4259,4261,4264,4266,4268],{"class":639,"line":739},[637,4237,643],{"class":642},[637,4239,3725],{"class":646},[637,4241,3029],{"class":642},[637,4243,4204],{"class":650},[637,4245,657],{"class":642},[637,4247,660],{"class":642},[637,4249,3656],{"class":642},[637,4251,660],{"class":642},[637,4253,4254],{"class":642}," @",[637,4256,1194],{"class":650},[637,4258,657],{"class":642},[637,4260,660],{"class":642},[637,4262,4263],{"class":683},"postToBackend",[637,4265,660],{"class":642},[637,4267,4222],{"class":642},[637,4269,787],{"class":642},[504,4271,4273,4274,3340],{"id":4272},"targeting-a-loaded-model-glb","Targeting a loaded model (",[618,4275,4276],{},".glb",[614,4278,4279,4280,4282,4283,4289,4290,4293,4294,4296],{},"A ",[618,4281,2210],{}," can be a ",[1669,4284,4285,4286],{},"direct child of ",[618,4287,4288],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[618,4291,4292],{},"Mesh"," — so the\nbehaviour depends on what the ",[618,4295,4288],{}," wraps.",[4051,4298,4300,4301,4304,4305],{"id":4299},"when-object-is-a-mesh","When ",[618,4302,4303],{},":object"," is a ",[618,4306,4292],{},[614,4308,4309],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[626,4311,4313],{"className":628,"code":4312,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\n\nconst { nodes } = useGLTF('/models/helmet.glb', { draco: true })\n// nodes.Helmet is a Mesh in this asset.\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"nodes?.Helmet\" :object=\"nodes.Helmet\">\n    \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n  \u003C/primitive>\n\u003C/template>\n",[618,4314,4315,4335,4358,4362,4403,4408,4416,4420,4428,4460,4491,4499],{"__ignoreMap":576},[637,4316,4317,4319,4321,4323,4325,4327,4329,4331,4333],{"class":639,"line":577},[637,4318,643],{"class":642},[637,4320,647],{"class":646},[637,4322,651],{"class":650},[637,4324,654],{"class":650},[637,4326,657],{"class":642},[637,4328,660],{"class":642},[637,4330,664],{"class":663},[637,4332,660],{"class":642},[637,4334,669],{"class":642},[637,4336,4337,4339,4341,4343,4345,4348,4350,4352,4354,4356],{"class":639,"line":578},[637,4338,677],{"class":676},[637,4340,680],{"class":642},[637,4342,2350],{"class":683},[637,4344,687],{"class":642},[637,4346,4347],{"class":683}," useGLTF",[637,4349,693],{"class":642},[637,4351,696],{"class":676},[637,4353,699],{"class":642},[637,4355,702],{"class":663},[637,4357,705],{"class":642},[637,4359,4360],{"class":639,"line":708},[637,4361,742],{"emptyLinePlaceholder":594},[637,4363,4364,4366,4368,4371,4373,4375,4377,4379,4381,4384,4386,4388,4390,4393,4395,4399,4401],{"class":639,"line":729},[637,4365,2415],{"class":650},[637,4367,680],{"class":642},[637,4369,4370],{"class":683}," nodes ",[637,4372,2428],{"class":642},[637,4374,2431],{"class":642},[637,4376,4347],{"class":2434},[637,4378,2437],{"class":683},[637,4380,2440],{"class":642},[637,4382,4383],{"class":663},"/models/helmet.glb",[637,4385,2440],{"class":642},[637,4387,687],{"class":642},[637,4389,680],{"class":642},[637,4391,4392],{"class":646}," draco",[637,4394,1218],{"class":642},[637,4396,4398],{"class":4397},"sfNiH"," true",[637,4400,693],{"class":642},[637,4402,2448],{"class":683},[637,4404,4405],{"class":639,"line":739},[637,4406,4407],{"class":1209},"// nodes.Helmet is a Mesh in this asset.\n",[637,4409,4410,4412,4414],{"class":639,"line":745},[637,4411,732],{"class":642},[637,4413,647],{"class":646},[637,4415,669],{"class":642},[637,4417,4418],{"class":639,"line":755},[637,4419,742],{"emptyLinePlaceholder":594},[637,4421,4422,4424,4426],{"class":639,"line":778},[637,4423,643],{"class":642},[637,4425,750],{"class":646},[637,4427,669],{"class":642},[637,4429,4430,4432,4435,4437,4439,4441,4444,4446,4449,4451,4453,4456,4458],{"class":639,"line":790},[637,4431,758],{"class":642},[637,4433,4434],{"class":646},"primitive",[637,4436,2710],{"class":650},[637,4438,657],{"class":642},[637,4440,660],{"class":642},[637,4442,4443],{"class":663},"nodes?.Helmet",[637,4445,660],{"class":642},[637,4447,4448],{"class":650}," :object",[637,4450,657],{"class":642},[637,4452,660],{"class":642},[637,4454,4455],{"class":663},"nodes.Helmet",[637,4457,660],{"class":642},[637,4459,669],{"class":642},[637,4461,4462,4464,4466,4468,4470,4472,4475,4477,4479,4481,4483,4485,4487,4489],{"class":639,"line":800},[637,4463,781],{"class":642},[637,4465,53],{"class":646},[637,4467,2722],{"class":650},[637,4469,657],{"class":642},[637,4471,660],{"class":642},[637,4473,4474],{"class":663},"layout.helmet",[637,4476,660],{"class":642},[637,4478,2734],{"class":650},[637,4480,657],{"class":642},[637,4482,660],{"class":642},[637,4484,2953],{"class":663},[637,4486,660],{"class":642},[637,4488,3905],{"class":650},[637,4490,787],{"class":642},[637,4492,4493,4495,4497],{"class":639,"line":805},[637,4494,905],{"class":642},[637,4496,4434],{"class":646},[637,4498,669],{"class":642},[637,4500,4501,4503,4505],{"class":639,"line":827},[637,4502,732],{"class":642},[637,4504,750],{"class":646},[637,4506,669],{"class":642},[2005,4508,4509],{},[614,4510,4511,4512,4514,4515,4518],{},"The resolved parent is the ",[618,4513,4288],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[618,4516,4517],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4051,4520,4300,4522,4304,4524],{"id":4521},"when-object-is-a-group",[618,4523,4303],{},[618,4525,4526],{},"Group",[614,4528,4529,4530,4532,4533,4535,4536,4538,4539,1218],{},"A named node in a ",[618,4531,4276],{}," is often a ",[618,4534,4526],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[618,4537,3656],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[618,4540,4541],{},":mesh",[626,4543,4545],{"className":628,"code":4544,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\nimport { computed } from 'vue'\nimport type { Mesh } from 'three'\n\nconst { nodes } = useGLTF('/models/mug.glb', { draco: true })\n// nodes.Mug is a Group — pick the child you want to decal.\nconst body = computed\u003CMesh | null>(\n  () => (nodes.value?.Mug?.getObjectByName('Body') as Mesh) ?? null,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"nodes?.Mug\" :object=\"nodes.Mug\">\n    \u003CDecal v-model:data=\"layout.mug\" :map=\"textures\" :mesh=\"body\" editable />\n  \u003C/primitive>\n\u003C/template>\n",[618,4546,4547,4567,4589,4607,4629,4633,4670,4675,4699,4747,4751,4759,4763,4771,4801,4844,4852],{"__ignoreMap":576},[637,4548,4549,4551,4553,4555,4557,4559,4561,4563,4565],{"class":639,"line":577},[637,4550,643],{"class":642},[637,4552,647],{"class":646},[637,4554,651],{"class":650},[637,4556,654],{"class":650},[637,4558,657],{"class":642},[637,4560,660],{"class":642},[637,4562,664],{"class":663},[637,4564,660],{"class":642},[637,4566,669],{"class":642},[637,4568,4569,4571,4573,4575,4577,4579,4581,4583,4585,4587],{"class":639,"line":578},[637,4570,677],{"class":676},[637,4572,680],{"class":642},[637,4574,2350],{"class":683},[637,4576,687],{"class":642},[637,4578,4347],{"class":683},[637,4580,693],{"class":642},[637,4582,696],{"class":676},[637,4584,699],{"class":642},[637,4586,702],{"class":663},[637,4588,705],{"class":642},[637,4590,4591,4593,4595,4597,4599,4601,4603,4605],{"class":639,"line":708},[637,4592,677],{"class":676},[637,4594,680],{"class":642},[637,4596,3489],{"class":683},[637,4598,693],{"class":642},[637,4600,696],{"class":676},[637,4602,699],{"class":642},[637,4604,633],{"class":663},[637,4606,705],{"class":642},[637,4608,4609,4611,4613,4615,4618,4620,4622,4624,4627],{"class":639,"line":729},[637,4610,677],{"class":676},[637,4612,3442],{"class":676},[637,4614,680],{"class":642},[637,4616,4617],{"class":683}," Mesh",[637,4619,693],{"class":642},[637,4621,696],{"class":676},[637,4623,699],{"class":642},[637,4625,4626],{"class":663},"three",[637,4628,705],{"class":642},[637,4630,4631],{"class":639,"line":739},[637,4632,742],{"emptyLinePlaceholder":594},[637,4634,4635,4637,4639,4641,4643,4645,4647,4649,4651,4654,4656,4658,4660,4662,4664,4666,4668],{"class":639,"line":745},[637,4636,2415],{"class":650},[637,4638,680],{"class":642},[637,4640,4370],{"class":683},[637,4642,2428],{"class":642},[637,4644,2431],{"class":642},[637,4646,4347],{"class":2434},[637,4648,2437],{"class":683},[637,4650,2440],{"class":642},[637,4652,4653],{"class":663},"/models/mug.glb",[637,4655,2440],{"class":642},[637,4657,687],{"class":642},[637,4659,680],{"class":642},[637,4661,4392],{"class":646},[637,4663,1218],{"class":642},[637,4665,4398],{"class":4397},[637,4667,693],{"class":642},[637,4669,2448],{"class":683},[637,4671,4672],{"class":639,"line":755},[637,4673,4674],{"class":1209},"// nodes.Mug is a Group — pick the child you want to decal.\n",[637,4676,4677,4679,4682,4684,4686,4688,4690,4692,4694,4696],{"class":639,"line":778},[637,4678,2415],{"class":650},[637,4680,4681],{"class":683}," body ",[637,4683,657],{"class":642},[637,4685,3489],{"class":2434},[637,4687,643],{"class":642},[637,4689,4292],{"class":1200},[637,4691,3645],{"class":642},[637,4693,3648],{"class":1200},[637,4695,3651],{"class":642},[637,4697,4698],{"class":683},"(\n",[637,4700,4701,4704,4706,4709,4711,4713,4715,4718,4720,4723,4725,4727,4730,4732,4735,4738,4740,4742,4744],{"class":639,"line":790},[637,4702,4703],{"class":642},"  ()",[637,4705,3677],{"class":650},[637,4707,4708],{"class":683}," (nodes",[637,4710,1146],{"class":642},[637,4712,3685],{"class":683},[637,4714,3688],{"class":642},[637,4716,4717],{"class":683},"Mug",[637,4719,3688],{"class":642},[637,4721,4722],{"class":2434},"getObjectByName",[637,4724,2437],{"class":683},[637,4726,2440],{"class":642},[637,4728,4729],{"class":663},"Body",[637,4731,2440],{"class":642},[637,4733,4734],{"class":683},") ",[637,4736,4737],{"class":676},"as",[637,4739,4617],{"class":1200},[637,4741,4734],{"class":683},[637,4743,3694],{"class":642},[637,4745,4746],{"class":642}," null,\n",[637,4748,4749],{"class":639,"line":800},[637,4750,2448],{"class":683},[637,4752,4753,4755,4757],{"class":639,"line":805},[637,4754,732],{"class":642},[637,4756,647],{"class":646},[637,4758,669],{"class":642},[637,4760,4761],{"class":639,"line":827},[637,4762,742],{"emptyLinePlaceholder":594},[637,4764,4765,4767,4769],{"class":639,"line":631},[637,4766,643],{"class":642},[637,4768,750],{"class":646},[637,4770,669],{"class":642},[637,4772,4773,4775,4777,4779,4781,4783,4786,4788,4790,4792,4794,4797,4799],{"class":639,"line":850},[637,4774,758],{"class":642},[637,4776,4434],{"class":646},[637,4778,2710],{"class":650},[637,4780,657],{"class":642},[637,4782,660],{"class":642},[637,4784,4785],{"class":663},"nodes?.Mug",[637,4787,660],{"class":642},[637,4789,4448],{"class":650},[637,4791,657],{"class":642},[637,4793,660],{"class":642},[637,4795,4796],{"class":663},"nodes.Mug",[637,4798,660],{"class":642},[637,4800,669],{"class":642},[637,4802,4803,4805,4807,4809,4811,4813,4816,4818,4820,4822,4824,4826,4828,4831,4833,4835,4838,4840,4842],{"class":639,"line":861},[637,4804,781],{"class":642},[637,4806,53],{"class":646},[637,4808,2722],{"class":650},[637,4810,657],{"class":642},[637,4812,660],{"class":642},[637,4814,4815],{"class":663},"layout.mug",[637,4817,660],{"class":642},[637,4819,2734],{"class":650},[637,4821,657],{"class":642},[637,4823,660],{"class":642},[637,4825,2953],{"class":663},[637,4827,660],{"class":642},[637,4829,4830],{"class":650}," :mesh",[637,4832,657],{"class":642},[637,4834,660],{"class":642},[637,4836,4837],{"class":663},"body",[637,4839,660],{"class":642},[637,4841,3905],{"class":650},[637,4843,787],{"class":642},[637,4845,4846,4848,4850],{"class":639,"line":872},[637,4847,905],{"class":642},[637,4849,4434],{"class":646},[637,4851,669],{"class":642},[637,4853,4854,4856,4858],{"class":639,"line":882},[637,4855,732],{"class":642},[637,4857,750],{"class":646},[637,4859,669],{"class":642},[4051,4861,4863],{"id":4862},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[614,4865,4866,4867,4873,4874,4881,4882,4884,4885,1218],{},"Alternatively, ",[1669,4868,4869,4870,4872],{},"wrap a ",[618,4871,2310],{}," 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",[1140,4875,4878],{"href":4876,"rel":4877},"https://docs.tresjs.org/api/composables.html#usegraph",[1144],[618,4879,4880],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[618,4883,2310],{}," around its\n",[618,4886,4887],{},":geometry",[626,4889,4891],{"className":628,"code":4890,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs/core'\nimport { Decal } from '@tresjs/cientos'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { computed } from 'vue'\n\nconst { state: model } = useLoader(GLTFLoader, '/models/helmet.glb')\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\nconst nodes = computed(() => graph.value?.nodes)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh\n    v-if=\"nodes?.Helmet.geometry\"\n    name=\"helmet\"\n    :geometry=\"nodes.Helmet.geometry\"\n  >\n    \u003Cprimitive :object=\"nodes.Helmet.material\" attach=\"material\" />\n    \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n  \u003C/TresMesh>\n\u003C/template>\n",[618,4892,4893,4913,4937,4955,4975,4993,4997,5029,5058,5072,5100,5108,5112,5120,5127,5141,5155,5169,5174,5205,5235,5243],{"__ignoreMap":576},[637,4894,4895,4897,4899,4901,4903,4905,4907,4909,4911],{"class":639,"line":577},[637,4896,643],{"class":642},[637,4898,647],{"class":646},[637,4900,651],{"class":650},[637,4902,654],{"class":650},[637,4904,657],{"class":642},[637,4906,660],{"class":642},[637,4908,664],{"class":663},[637,4910,660],{"class":642},[637,4912,669],{"class":642},[637,4914,4915,4917,4919,4922,4924,4927,4929,4931,4933,4935],{"class":639,"line":578},[637,4916,677],{"class":676},[637,4918,680],{"class":642},[637,4920,4921],{"class":683}," useGraph",[637,4923,687],{"class":642},[637,4925,4926],{"class":683}," useLoader",[637,4928,693],{"class":642},[637,4930,696],{"class":676},[637,4932,699],{"class":642},[637,4934,724],{"class":663},[637,4936,705],{"class":642},[637,4938,4939,4941,4943,4945,4947,4949,4951,4953],{"class":639,"line":708},[637,4940,677],{"class":676},[637,4942,680],{"class":642},[637,4944,2350],{"class":683},[637,4946,693],{"class":642},[637,4948,696],{"class":676},[637,4950,699],{"class":642},[637,4952,702],{"class":663},[637,4954,705],{"class":642},[637,4956,4957,4959,4961,4964,4966,4968,4970,4973],{"class":639,"line":729},[637,4958,677],{"class":676},[637,4960,680],{"class":642},[637,4962,4963],{"class":683}," GLTFLoader",[637,4965,693],{"class":642},[637,4967,696],{"class":676},[637,4969,699],{"class":642},[637,4971,4972],{"class":663},"three/examples/jsm/loaders/GLTFLoader.js",[637,4974,705],{"class":642},[637,4976,4977,4979,4981,4983,4985,4987,4989,4991],{"class":639,"line":739},[637,4978,677],{"class":676},[637,4980,680],{"class":642},[637,4982,3489],{"class":683},[637,4984,693],{"class":642},[637,4986,696],{"class":676},[637,4988,699],{"class":642},[637,4990,633],{"class":663},[637,4992,705],{"class":642},[637,4994,4995],{"class":639,"line":745},[637,4996,742],{"emptyLinePlaceholder":594},[637,4998,4999,5001,5003,5005,5007,5010,5012,5014,5016,5019,5021,5023,5025,5027],{"class":639,"line":755},[637,5000,2415],{"class":650},[637,5002,680],{"class":642},[637,5004,2420],{"class":646},[637,5006,1218],{"class":642},[637,5008,5009],{"class":683}," model ",[637,5011,2428],{"class":642},[637,5013,2431],{"class":642},[637,5015,4926],{"class":2434},[637,5017,5018],{"class":683},"(GLTFLoader",[637,5020,687],{"class":642},[637,5022,699],{"class":642},[637,5024,4383],{"class":663},[637,5026,2440],{"class":642},[637,5028,2448],{"class":683},[637,5030,5031,5033,5036,5038,5040,5042,5044,5046,5049,5051,5053,5055],{"class":639,"line":778},[637,5032,2415],{"class":650},[637,5034,5035],{"class":683}," scene ",[637,5037,657],{"class":642},[637,5039,3489],{"class":2434},[637,5041,2437],{"class":683},[637,5043,3674],{"class":642},[637,5045,3677],{"class":650},[637,5047,5048],{"class":683}," model",[637,5050,1146],{"class":642},[637,5052,3685],{"class":683},[637,5054,3688],{"class":642},[637,5056,5057],{"class":683},"scene)\n",[637,5059,5060,5062,5065,5067,5069],{"class":639,"line":790},[637,5061,2415],{"class":650},[637,5063,5064],{"class":683}," graph ",[637,5066,657],{"class":642},[637,5068,4921],{"class":2434},[637,5070,5071],{"class":683},"(scene)\n",[637,5073,5074,5076,5078,5080,5082,5084,5086,5088,5091,5093,5095,5097],{"class":639,"line":800},[637,5075,2415],{"class":650},[637,5077,4370],{"class":683},[637,5079,657],{"class":642},[637,5081,3489],{"class":2434},[637,5083,2437],{"class":683},[637,5085,3674],{"class":642},[637,5087,3677],{"class":650},[637,5089,5090],{"class":683}," graph",[637,5092,1146],{"class":642},[637,5094,3685],{"class":683},[637,5096,3688],{"class":642},[637,5098,5099],{"class":683},"nodes)\n",[637,5101,5102,5104,5106],{"class":639,"line":805},[637,5103,732],{"class":642},[637,5105,647],{"class":646},[637,5107,669],{"class":642},[637,5109,5110],{"class":639,"line":827},[637,5111,742],{"emptyLinePlaceholder":594},[637,5113,5114,5116,5118],{"class":639,"line":631},[637,5115,643],{"class":642},[637,5117,750],{"class":646},[637,5119,669],{"class":642},[637,5121,5122,5124],{"class":639,"line":850},[637,5123,758],{"class":642},[637,5125,5126],{"class":646},"TresMesh\n",[637,5128,5129,5132,5134,5136,5139],{"class":639,"line":861},[637,5130,5131],{"class":650},"    v-if",[637,5133,657],{"class":642},[637,5135,660],{"class":642},[637,5137,5138],{"class":663},"nodes?.Helmet.geometry",[637,5140,3131],{"class":642},[637,5142,5143,5146,5148,5150,5153],{"class":639,"line":872},[637,5144,5145],{"class":650},"    name",[637,5147,657],{"class":642},[637,5149,660],{"class":642},[637,5151,5152],{"class":663},"helmet",[637,5154,3131],{"class":642},[637,5156,5157,5160,5162,5164,5167],{"class":639,"line":882},[637,5158,5159],{"class":650},"    :geometry",[637,5161,657],{"class":642},[637,5163,660],{"class":642},[637,5165,5166],{"class":663},"nodes.Helmet.geometry",[637,5168,3131],{"class":642},[637,5170,5171],{"class":639,"line":632},[637,5172,5173],{"class":642},"  >\n",[637,5175,5176,5178,5180,5182,5184,5186,5189,5191,5194,5196,5198,5201,5203],{"class":639,"line":902},[637,5177,781],{"class":642},[637,5179,4434],{"class":646},[637,5181,4448],{"class":650},[637,5183,657],{"class":642},[637,5185,660],{"class":642},[637,5187,5188],{"class":663},"nodes.Helmet.material",[637,5190,660],{"class":642},[637,5192,5193],{"class":650}," attach",[637,5195,657],{"class":642},[637,5197,660],{"class":642},[637,5199,5200],{"class":663},"material",[637,5202,660],{"class":642},[637,5204,787],{"class":642},[637,5206,5207,5209,5211,5213,5215,5217,5219,5221,5223,5225,5227,5229,5231,5233],{"class":639,"line":912},[637,5208,781],{"class":642},[637,5210,53],{"class":646},[637,5212,2722],{"class":650},[637,5214,657],{"class":642},[637,5216,660],{"class":642},[637,5218,4474],{"class":663},[637,5220,660],{"class":642},[637,5222,2734],{"class":650},[637,5224,657],{"class":642},[637,5226,660],{"class":642},[637,5228,2953],{"class":663},[637,5230,660],{"class":642},[637,5232,3905],{"class":650},[637,5234,787],{"class":642},[637,5236,5237,5239,5241],{"class":639,"line":2625},[637,5238,905],{"class":642},[637,5240,856],{"class":646},[637,5242,669],{"class":642},[637,5244,5245,5247,5249],{"class":639,"line":2634},[637,5246,732],{"class":642},[637,5248,750],{"class":646},[637,5250,669],{"class":642},[614,5252,5253,5254,3063,5257,5259,5260,5262,5263,5265],{},"The mesh's ",[618,5255,5256],{},"geometry",[618,5258,5200],{}," come from the loaded model; the\n",[618,5261,2210],{}," lives inside a regular ",[618,5264,2310],{}," with a clean scene-graph\nparent.",[3199,5267,5268],{},[614,5269,5270,5271,5273,5274,5277,5278,5281,5282,5285],{},"A saved decal's ",[618,5272,4130],{}," is stored in ",[1669,5275,5276],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1669,5279,5280],{},"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. ",[618,5283,5284],{},"\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.",[504,5287,5289],{"id":5288},"json-schema","JSON schema",[614,5291,5292,5293,5295,5296,5299,5300,5302,5303,1146],{},"Each entry in the ",[618,5294,3018],{}," array follows the ",[618,5297,5298],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[618,5301,2225],{}," groups these by mesh name as\n",[618,5304,5305],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5307,5308,5309,5310,5314],"details",{},"\n  ",[5311,5312,5313],"summary",{},"Full schema",[626,5315,5317],{"className":1186,"code":5316,"language":664,"meta":576,"style":576},"interface DecalJsonEntry {\n  id: string // stable UUID\n  position: [number, number, number] // target-mesh local space (raycast hit, baked into the parent's frame)\n  orientation: [number, number, number] // Euler XYZ\n  size: [number, number, number] // extents along X/Y; Z = projection depth\n  zIndex: number // per-mesh layer order, ≥ 0\n  map: string | null // matches a texture's .name\n  flipX?: boolean // omitted when false\n  flipY?: boolean // omitted when false\n  color?: string // hex (e.g. '#ff6b35'), omitted when no tint\n  opacity?: number // 0..1, omitted when 1\n  visible?: boolean // omitted when true; false hides the decal\n}\n\ntype DecalLayout = Record\u003Cstring, DecalJsonEntry[]>\n// { sphere: [...], cube: [...] }\n",[618,5318,5319,5328,5341,5368,5392,5416,5428,5444,5458,5469,5481,5493,5505,5509,5513,5538],{"__ignoreMap":576},[637,5320,5321,5324,5326],{"class":639,"line":577},[637,5322,5323],{"class":650},"interface",[637,5325,3452],{"class":1200},[637,5327,1204],{"class":642},[637,5329,5330,5333,5335,5338],{"class":639,"line":578},[637,5331,5332],{"class":646},"  id",[637,5334,1218],{"class":642},[637,5336,5337],{"class":1200}," string",[637,5339,5340],{"class":1209}," // stable UUID\n",[637,5342,5343,5346,5348,5350,5353,5355,5358,5360,5362,5365],{"class":639,"line":708},[637,5344,5345],{"class":646},"  position",[637,5347,1218],{"class":642},[637,5349,2498],{"class":683},[637,5351,5352],{"class":1200},"number",[637,5354,687],{"class":642},[637,5356,5357],{"class":1200}," number",[637,5359,687],{"class":642},[637,5361,5357],{"class":1200},[637,5363,5364],{"class":683},"] ",[637,5366,5367],{"class":1209},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[637,5369,5370,5373,5375,5377,5379,5381,5383,5385,5387,5389],{"class":639,"line":729},[637,5371,5372],{"class":646},"  orientation",[637,5374,1218],{"class":642},[637,5376,2498],{"class":683},[637,5378,5352],{"class":1200},[637,5380,687],{"class":642},[637,5382,5357],{"class":1200},[637,5384,687],{"class":642},[637,5386,5357],{"class":1200},[637,5388,5364],{"class":683},[637,5390,5391],{"class":1209},"// Euler XYZ\n",[637,5393,5394,5397,5399,5401,5403,5405,5407,5409,5411,5413],{"class":639,"line":739},[637,5395,5396],{"class":646},"  size",[637,5398,1218],{"class":642},[637,5400,2498],{"class":683},[637,5402,5352],{"class":1200},[637,5404,687],{"class":642},[637,5406,5357],{"class":1200},[637,5408,687],{"class":642},[637,5410,5357],{"class":1200},[637,5412,5364],{"class":683},[637,5414,5415],{"class":1209},"// extents along X/Y; Z = projection depth\n",[637,5417,5418,5421,5423,5425],{"class":639,"line":745},[637,5419,5420],{"class":646},"  zIndex",[637,5422,1218],{"class":642},[637,5424,5357],{"class":1200},[637,5426,5427],{"class":1209}," // per-mesh layer order, ≥ 0\n",[637,5429,5430,5433,5435,5437,5439,5441],{"class":639,"line":755},[637,5431,5432],{"class":646},"  map",[637,5434,1218],{"class":642},[637,5436,5337],{"class":1200},[637,5438,3645],{"class":642},[637,5440,3648],{"class":1200},[637,5442,5443],{"class":1209}," // matches a texture's .name\n",[637,5445,5446,5449,5452,5455],{"class":639,"line":778},[637,5447,5448],{"class":646},"  flipX",[637,5450,5451],{"class":642},"?:",[637,5453,5454],{"class":1200}," boolean",[637,5456,5457],{"class":1209}," // omitted when false\n",[637,5459,5460,5463,5465,5467],{"class":639,"line":790},[637,5461,5462],{"class":646},"  flipY",[637,5464,5451],{"class":642},[637,5466,5454],{"class":1200},[637,5468,5457],{"class":1209},[637,5470,5471,5474,5476,5478],{"class":639,"line":800},[637,5472,5473],{"class":646},"  color",[637,5475,5451],{"class":642},[637,5477,5337],{"class":1200},[637,5479,5480],{"class":1209}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[637,5482,5483,5486,5488,5490],{"class":639,"line":805},[637,5484,5485],{"class":646},"  opacity",[637,5487,5451],{"class":642},[637,5489,5357],{"class":1200},[637,5491,5492],{"class":1209}," // 0..1, omitted when 1\n",[637,5494,5495,5498,5500,5502],{"class":639,"line":827},[637,5496,5497],{"class":646},"  visible",[637,5499,5451],{"class":642},[637,5501,5454],{"class":1200},[637,5503,5504],{"class":1209}," // omitted when true; false hides the decal\n",[637,5506,5507],{"class":639,"line":631},[637,5508,1325],{"class":642},[637,5510,5511],{"class":639,"line":850},[637,5512,742],{"emptyLinePlaceholder":594},[637,5514,5515,5518,5521,5523,5526,5528,5530,5532,5534,5536],{"class":639,"line":861},[637,5516,5517],{"class":650},"type",[637,5519,5520],{"class":1200}," DecalLayout",[637,5522,2431],{"class":642},[637,5524,5525],{"class":1200}," Record",[637,5527,643],{"class":642},[637,5529,3572],{"class":1200},[637,5531,687],{"class":642},[637,5533,3452],{"class":1200},[637,5535,3579],{"class":683},[637,5537,669],{"class":642},[637,5539,5540],{"class":639,"line":872},[637,5541,5542],{"class":1209},"// { sphere: [...], cube: [...] }\n",[504,5544,5546,5548],{"id":5545},"decal-props",[618,5547,2210],{}," props",[927,5550,5551,5561],{},[930,5552,5553],{},[933,5554,5555,5557,5559],{},[936,5556,938],{},[936,5558,941],{},[936,5560,944],{},[946,5562,5563,5579,5599,5636,5654,5668,5682,5702,5730],{},[933,5564,5565,5569,5575],{},[951,5566,5567],{},[1669,5568,3018],{},[951,5570,5571,5572,5574],{},"Two-way list of stamped decals (use with ",[618,5573,2270],{},").",[951,5576,5577],{},[618,5578,3579],{},[933,5580,5581,5585,5595],{},[951,5582,5583],{},[1669,5584,2981],{},[951,5586,5587,5588,5590,5591,5594],{},"A single ",[618,5589,2249],{}," or array of ",[618,5592,5593],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[951,5596,5597],{},[618,5598,3656],{},[933,5600,5601,5606,5632],{},[951,5602,5603],{},[1669,5604,5605],{},"mesh",[951,5607,5608,5609,5611,5612,5615,5616,5618,5619,5622,5623,3336,5625,3336,5628,5631],{},"Optional explicit target mesh (",[618,5610,4292],{}," or ",[618,5613,5614],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[618,5617,2210],{}," is auto-resolved via a hidden anchor ",[618,5620,5621],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[618,5624,4130],{},[618,5626,5627],{},"rotation",[618,5629,5630],{},"scale"," via the scene-graph hierarchy.",[951,5633,5634],{},[618,5635,3656],{},[933,5637,5638,5642,5650],{},[951,5639,5640],{},[1669,5641,3186],{},[951,5643,4300,5644,5646,5647,5649],{},[618,5645,961],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[618,5648,2225],{}," interactions to work on this Decal.",[951,5651,5652],{},[618,5653,971],{},[933,5655,5656,5661,5664],{},[951,5657,5658],{},[1669,5659,5660],{},"baseSize",[951,5662,5663],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[951,5665,5666],{},[618,5667,1874],{},[933,5669,5670,5675,5678],{},[951,5671,5672],{},[1669,5673,5674],{},"baseOffset",[951,5676,5677],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[951,5679,5680],{},[618,5681,1886],{},[933,5683,5684,5688,5697],{},[951,5685,5686],{},[1669,5687,3096],{},[951,5689,5690,5691,5693,5694,5696],{},"Extra offset added per ",[618,5692,2292],{}," step on top of ",[618,5695,5674],{},". Increase if stacked decals still flicker.",[951,5698,5699],{},[618,5700,5701],{},"0.001",[933,5703,5704,5709,5725],{},[951,5705,5706],{},[1669,5707,5708],{},"cullThreshold",[951,5710,5711,5712,5715,5716,5721,5722,5724],{},"Drops projected triangles whose face normal makes an angle steeper than ",[618,5713,5714],{},"acos(threshold)"," with the projector. Mitigates ",[1140,5717,5720],{"href":5718,"rel":5719},"https://github.com/mrdoob/three.js/issues/21187",[1144],"#21187",". Pass ",[618,5723,965],{}," to disable.",[951,5726,5727],{},[618,5728,5729],{},"0.2",[933,5731,5732,5737,5740],{},[951,5733,5734],{},[1669,5735,5736],{},"edgeColor",[951,5738,5739],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[951,5741,5742],{},[618,5743,5744],{},"#0000ff",[504,5746,5748,5750],{"id":5747},"decal-events",[618,5749,2210],{}," events",[927,5752,5753,5765],{},[930,5754,5755],{},[933,5756,5757,5760,5763],{},[936,5758,5759],{},"Event",[936,5761,5762],{},"Payload",[936,5764,941],{},[946,5766,5767,5782,5797,5811,5831,5849,5866],{},[933,5768,5769,5774,5779],{},[951,5770,5771],{},[618,5772,5773],{},"update:data",[951,5775,5776],{},[618,5777,5778],{},"DecalJsonEntry[]",[951,5780,5781],{},"v-model partner — fires whenever the JSON list changes.",[933,5783,5784,5789,5794],{},[951,5785,5786],{},[618,5787,5788],{},"add",[951,5790,5791],{},[618,5792,5793],{},"DecalEntry",[951,5795,5796],{},"A new decal has been committed (create mode → confirm).",[933,5798,5799,5804,5808],{},[951,5800,5801],{},[618,5802,5803],{},"update",[951,5805,5806],{},[618,5807,5793],{},[951,5809,5810],{},"An existing decal has been committed (update mode → confirm).",[933,5812,5813,5818,5822],{},[951,5814,5815],{},[618,5816,5817],{},"delete",[951,5819,5820],{},[618,5821,5793],{},[951,5823,5824,5825,3336,5828,5574],{},"A decal has been removed (delete button or ",[618,5826,5827],{},"Del",[618,5829,5830],{},"Backspace",[933,5832,5833,5838,5842],{},[951,5834,5835],{},[618,5836,5837],{},"select",[951,5839,5840],{},[618,5841,5793],{},[951,5843,5844,5845,5848],{},"Edition began on ",[618,5846,5847],{},"entry"," (panel click, 3D click, or programmatic).",[933,5850,5851,5856,5859],{},[951,5852,5853],{},[618,5854,5855],{},"cancel",[951,5857,5858],{},"—",[951,5860,5861,5862,5865],{},"Edition was aborted without commit (",[618,5863,5864],{},"Esc",", click-outside in create mode).",[933,5867,5868,5873,5878],{},[951,5869,5870],{},[618,5871,5872],{},"decalClick",[951,5874,5875],{},[618,5876,5877],{},"{ entry: DecalEntry, event: MouseEvent }",[951,5879,5880,5881,5883,5884,1146],{},"Fires on click of any stamped decal, even when ",[618,5882,3186],{}," is ",[618,5885,971],{},[504,5887,5889,5891,5892,3340],{"id":5888},"decal-exposed-via-ref",[618,5890,2210],{}," exposed (via ",[618,5893,5894],{},"ref",[614,5896,5897,5898,5901],{},"The template ref resolves to ",[618,5899,5900],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[626,5903,5905],{"className":1186,"code":5904,"language":664,"meta":576,"style":576},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[618,5906,5907,5928,5932],{"__ignoreMap":576},[637,5908,5909,5911,5913,5915,5918,5920,5922,5924,5926],{"class":639,"line":577},[637,5910,677],{"class":676},[637,5912,3442],{"class":676},[637,5914,680],{"class":642},[637,5916,5917],{"class":683}," DecalImperativeApi",[637,5919,693],{"class":642},[637,5921,696],{"class":676},[637,5923,699],{"class":642},[637,5925,702],{"class":663},[637,5927,705],{"class":642},[637,5929,5930],{"class":639,"line":578},[637,5931,742],{"emptyLinePlaceholder":594},[637,5933,5934,5936,5938,5940,5942,5944,5946,5948,5950,5952,5954,5956],{"class":639,"line":708},[637,5935,2415],{"class":650},[637,5937,3626],{"class":683},[637,5939,657],{"class":642},[637,5941,3872],{"class":2434},[637,5943,643],{"class":642},[637,5945,5900],{"class":1200},[637,5947,3645],{"class":642},[637,5949,3648],{"class":1200},[637,5951,3651],{"class":642},[637,5953,2437],{"class":683},[637,5955,3656],{"class":642},[637,5957,2448],{"class":683},[927,5959,5960,5972],{},[930,5961,5962],{},[933,5963,5964,5967,5970],{},[936,5965,5966],{},"Property",[936,5968,5969],{},"Type",[936,5971,941],{},[946,5973,5974,5992,6010,6028,6043],{},[933,5975,5976,5981,5986],{},[951,5977,5978],{},[618,5979,5980],{},"editor",[951,5982,5983],{},[618,5984,5985],{},"DecalEditorSession",[951,5987,5988,5989,1146],{},"The canvas-shared editor session. Pass it to ",[618,5990,5991],{},"\u003CDecalDebugUI :session>",[933,5993,5994,5999,6004],{},[951,5995,5996],{},[618,5997,5998],{},"beginEditById",[951,6000,6001],{},[618,6002,6003],{},"(id: string) => boolean",[951,6005,6006,6007,6009],{},"Programmatically start editing a specific decal. Returns ",[618,6008,971],{}," if the id is unknown.",[933,6011,6012,6017,6022],{},[951,6013,6014],{},[618,6015,6016],{},"commit",[951,6018,6019],{},[618,6020,6021],{},"() => void",[951,6023,6024,6025,5574],{},"Commit the in-flight edit (same as ",[618,6026,6027],{},"Enter",[933,6029,6030,6034,6038],{},[951,6031,6032],{},[618,6033,5855],{},[951,6035,6036],{},[618,6037,6021],{},[951,6039,6040,6041,5574],{},"Abort the in-flight edit (same as ",[618,6042,5864],{},[933,6044,6045,6050,6054],{},[951,6046,6047],{},[618,6048,6049],{},"remove",[951,6051,6052],{},[618,6053,6021],{},[951,6055,6056,6057,5574],{},"Delete the currently edited decal (same as ",[618,6058,5827],{},[504,6060,6062,5548],{"id":6061},"decaldebugui-props",[618,6063,2225],{},[927,6065,6066,6076],{},[930,6067,6068],{},[933,6069,6070,6072,6074],{},[936,6071,938],{},[936,6073,941],{},[936,6075,944],{},[946,6077,6078,6101,6126,6139,6159,6174,6197],{},[933,6079,6080,6084,6097],{},[951,6081,6082],{},[1669,6083,3735],{},[951,6085,6086,6089,6090,6092,6093,6096],{},[618,6087,6088],{},"DecalEditorSession | null"," — obtained from any ",[618,6091,2210],{}," ref via ",[618,6094,6095],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[951,6098,6099],{},[618,6100,3656],{},[933,6102,6103,6107,6121],{},[951,6104,6105],{},[1669,6106,3018],{},[951,6108,6109,6110,6113,6114,6117,6118,6120],{},"Mesh-name-keyed map of decal slices — ",[618,6111,6112],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[618,6115,6116],{},"\u003CTresMesh name=\"...\">"," whose child ",[618,6119,2210],{}," owns the slice.",[951,6122,6123],{},[618,6124,6125],{},"{}",[933,6127,6128,6132,6135],{},[951,6129,6130],{},[1669,6131,2953],{},[951,6133,6134],{},"The full texture palette shown in the dock's picker.",[951,6136,6137],{},[618,6138,3579],{},[933,6140,6141,6146,6155],{},[951,6142,6143],{},[1669,6144,6145],{},"theme",[951,6147,6148,5611,6151,6154],{},[618,6149,6150],{},"'light'",[618,6152,6153],{},"'dark'"," — overlay theme tokens.",[951,6156,6157],{},[618,6158,6150],{},[933,6160,6161,6166,6169],{},[951,6162,6163],{},[1669,6164,6165],{},"snapAngle",[951,6167,6168],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[951,6170,6171],{},[618,6172,6173],{},"15",[933,6175,6176,6181,6193],{},[951,6177,6178],{},[1669,6179,6180],{},"exportFilename",[951,6182,6183,6184,5721,6186,6188,6189,6192],{},"Filename for the built-in JSON download. When omitted, defaults to ",[618,6185,4179],{},[618,6187,3656],{}," to skip the auto-download (the ",[618,6190,6191],{},"@export"," event still fires).",[951,6194,6195],{},[618,6196,4179],{},[933,6198,6199,6203,6206],{},[951,6200,6201],{},[1669,6202,4106],{},[951,6204,6205],{},"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.",[951,6207,6208],{},[618,6209,971],{},[504,6211,6213,5750],{"id":6212},"decaldebugui-events",[618,6214,2225],{},[927,6216,6217,6227],{},[930,6218,6219],{},[933,6220,6221,6223,6225],{},[936,6222,5759],{},[936,6224,5762],{},[936,6226,941],{},[946,6228,6229,6243],{},[933,6230,6231,6235,6240],{},[951,6232,6233],{},[618,6234,1194],{},[951,6236,6237],{},[618,6238,6239],{},"DecalLayout",[951,6241,6242],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[933,6244,6245,6249,6253],{},[951,6246,6247],{},[618,6248,677],{},[951,6250,6251],{},[618,6252,6239],{},[951,6254,6255],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[504,6257,6259],{"id":6258},"caveats","Caveats",[2213,6261,6262,6277,6294,6310],{},[2216,6263,6264,6265,6268,6269,6272,6273,6276],{},"✨ The overlay sits at ",[618,6266,6267],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1669,6270,6271],{},"above"," the canvas by default\n(",[618,6274,6275],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2216,6278,6279,6280,6282,6283,6286,6287,1672,6290,6293],{},"🎨 ",[618,6281,2225],{}," ships its own theme in a global stylesheet under the\n",[618,6284,6285],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[618,6288,6289],{},"--accent",[618,6291,6292],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2216,6295,6296,6297,6300,6301,6303,6304,6306,6307,6309],{},"🔶 Decals are ",[1669,6298,6299],{},"per-canvas"," — if you have multiple ",[618,6302,3197],{}," in your\napp, each one has its own independent session. Pair each ",[618,6305,2225],{},"\nwith the right ",[618,6308,3735],{}," (from one of the Decals inside that canvas).",[2216,6311,6312,6313,1146],{},"🧩 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 ",[618,6314,6315],{},":mesh=\"meshRef\"",[504,6317,6319],{"id":6318},"limitations","Limitations",[2005,6321,6322,6336,6343,6386],{},[614,6323,6324,6325,6328,6329,3336,6331,3336,6333,6335],{},"Decal vertices are baked into the ",[1669,6326,6327],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[618,6330,4130],{},[618,6332,5627],{},[618,6334,5630],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[614,6337,6338,6339,6342],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1669,6340,6341],{},"not"," followed:",[2213,6344,6345,6358,6366,6373],{},[2216,6346,6347,6352,6353,1146],{},[1669,6348,6349],{},[618,6350,6351],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1140,6354,6357],{"href":6355,"rel":6356},"https://github.com/mrdoob/three.js/issues/7926",[1144],"three.js#7926",[2216,6359,6360,6365],{},[1669,6361,6362],{},[618,6363,6364],{},"morphAttributes"," on the parent are ignored.",[2216,6367,6368,6369,6372],{},"Direct mutations of the parent's ",[618,6370,6371],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2216,6374,6375,6376,6380,6381,6383,6384,1146],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1140,6377,6379],{"href":5718,"rel":6378},[1144],"three.js#21187",") —\nmitigated by the ",[618,6382,5708],{}," prop, default ",[618,6385,5729],{},[614,6387,6388,6390],{},[618,6389,2210],{}," warns once per parent mesh when it detects these conditions.",[504,6392,6394],{"id":6393},"keyboard-shortcuts","Keyboard shortcuts",[927,6396,6397,6407],{},[930,6398,6399],{},[933,6400,6401,6404],{},[936,6402,6403],{},"Shortcut",[936,6405,6406],{},"Action",[946,6408,6409,6418,6427,6439,6452,6465],{},[933,6410,6411,6415],{},[951,6412,6413],{},[618,6414,6027],{},[951,6416,6417],{},"Confirm the in-flight edit",[933,6419,6420,6424],{},[951,6421,6422],{},[618,6423,5864],{},[951,6425,6426],{},"Cancel (revert updates, drop pending placements)",[933,6428,6429,6436],{},[951,6430,6431,3336,6433],{},[618,6432,5827],{},[618,6434,6435],{},"⌫",[951,6437,6438],{},"Delete the edited decal (or cancel a create)",[933,6440,6441,6449],{},[951,6442,6443,3336,6446],{},[618,6444,6445],{},"⌘Z",[618,6447,6448],{},"Ctrl+Z",[951,6450,6451],{},"Undo",[933,6453,6454,6462],{},[951,6455,6456,3336,6459],{},[618,6457,6458],{},"⇧⌘Z",[618,6460,6461],{},"Ctrl+⇧Z",[951,6463,6464],{},"Redo",[933,6466,6467,6470],{},[951,6468,6469],{},"Click outside",[951,6471,6472],{},"Auto-commit an in-flight update; cancel a create",[504,6474,6476,6477,3340],{"id":6475},"programmatic-api-usedecaleditor","Programmatic API (",[618,6478,6479],{},"useDecalEditor",[614,6481,6482,6483,6485,6486,6488,6489,6491,6492,6494],{},"Skip ",[618,6484,2225],{}," entirely or augment it with custom panels —\n",[618,6487,2238],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[618,6490,3197],{}," (after at\nleast one ",[618,6493,2210],{}," has mounted).",[626,6496,6498],{"className":1186,"code":6497,"language":664,"meta":576,"style":576},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[618,6499,6500,6519,6523],{"__ignoreMap":576},[637,6501,6502,6504,6506,6509,6511,6513,6515,6517],{"class":639,"line":577},[637,6503,677],{"class":676},[637,6505,680],{"class":642},[637,6507,6508],{"class":683}," useDecalEditor",[637,6510,693],{"class":642},[637,6512,696],{"class":676},[637,6514,699],{"class":642},[637,6516,702],{"class":663},[637,6518,705],{"class":642},[637,6520,6521],{"class":639,"line":578},[637,6522,742],{"emptyLinePlaceholder":594},[637,6524,6525,6527,6529,6531,6533],{"class":639,"line":708},[637,6526,2415],{"class":650},[637,6528,3665],{"class":683},[637,6530,657],{"class":642},[637,6532,6508],{"class":2434},[637,6534,6535],{"class":683},"()\n",[614,6537,6538,6539,1672,6542,2488,6545,1672,6548,6551,6552,2488,6554,1672,6557,1672,6560,6563,6564,6567,6568,6571,6572,1672,6575,1672,6578,2488,6581,6584],{},"The session exposes reactive state (",[618,6540,6541],{},"editingEntry",[618,6543,6544],{},"editingMode",[618,6546,6547],{},"canUndo",[618,6549,6550],{},"canRedo",", …), by-id mutators (",[618,6553,5998],{},[618,6555,6556],{},"setZIndexById",[618,6558,6559],{},"setVisibilityById",[618,6561,6562],{},"removeById","), batched updates\n(",[618,6565,6566],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[618,6569,6570],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[618,6573,6574],{},"ensureTextureNames",[618,6576,6577],{},"getTextureName",[618,6579,6580],{},"getTextureAspect",[618,6582,6583],{},"invalidateDecalGeometry",") are exported alongside.",[5307,6586,5309,6587,6590,6594,6669,6673,6744,6760,6764,6800,6806,6810,6949,6953,6999,7002,7006,7020,7190,7194],{},[5311,6588,6589],{},"Full API reference",[4051,6591,6593],{"id":6592},"reactive-state","Reactive state",[626,6595,6597],{"className":1186,"code":6596,"language":664,"meta":576,"style":576},"session.editingEntry // ShallowRef\u003CDecalEntry | null>\nsession.editingMode // Ref\u003C'create' | 'update' | null>\nsession.lockedMeshUuid // Ref\u003Cstring | null>\nsession.hoveredEntry // ShallowRef\u003CDecalEntry | null>\nsession.canUndo // Ref\u003Cboolean>\nsession.canRedo // Ref\u003Cboolean>\n",[618,6598,6599,6611,6623,6635,6646,6658],{"__ignoreMap":576},[637,6600,6601,6603,6605,6608],{"class":639,"line":577},[637,6602,3735],{"class":683},[637,6604,1146],{"class":642},[637,6606,6607],{"class":683},"editingEntry ",[637,6609,6610],{"class":1209},"// ShallowRef\u003CDecalEntry | null>\n",[637,6612,6613,6615,6617,6620],{"class":639,"line":578},[637,6614,3735],{"class":683},[637,6616,1146],{"class":642},[637,6618,6619],{"class":683},"editingMode ",[637,6621,6622],{"class":1209},"// Ref\u003C'create' | 'update' | null>\n",[637,6624,6625,6627,6629,6632],{"class":639,"line":708},[637,6626,3735],{"class":683},[637,6628,1146],{"class":642},[637,6630,6631],{"class":683},"lockedMeshUuid ",[637,6633,6634],{"class":1209},"// Ref\u003Cstring | null>\n",[637,6636,6637,6639,6641,6644],{"class":639,"line":729},[637,6638,3735],{"class":683},[637,6640,1146],{"class":642},[637,6642,6643],{"class":683},"hoveredEntry ",[637,6645,6610],{"class":1209},[637,6647,6648,6650,6652,6655],{"class":639,"line":739},[637,6649,3735],{"class":683},[637,6651,1146],{"class":642},[637,6653,6654],{"class":683},"canUndo ",[637,6656,6657],{"class":1209},"// Ref\u003Cboolean>\n",[637,6659,6660,6662,6664,6667],{"class":639,"line":745},[637,6661,3735],{"class":683},[637,6663,1146],{"class":642},[637,6665,6666],{"class":683},"canRedo ",[637,6668,6657],{"class":1209},[4051,6670,6672],{"id":6671},"mutating-decals-by-id","Mutating decals by id",[626,6674,6676],{"className":1186,"code":6675,"language":664,"meta":576,"style":576},"session.beginEditById(id) // start editing a placed decal\nsession.setZIndexById(id, newZ) // reorder one decal\nsession.setVisibilityById(id, false) // hide / show\nsession.removeById(id) // delete\n",[618,6677,6678,6692,6711,6731],{"__ignoreMap":576},[637,6679,6680,6682,6684,6686,6689],{"class":639,"line":577},[637,6681,3735],{"class":683},[637,6683,1146],{"class":642},[637,6685,5998],{"class":2434},[637,6687,6688],{"class":683},"(id) ",[637,6690,6691],{"class":1209},"// start editing a placed decal\n",[637,6693,6694,6696,6698,6700,6703,6705,6708],{"class":639,"line":578},[637,6695,3735],{"class":683},[637,6697,1146],{"class":642},[637,6699,6556],{"class":2434},[637,6701,6702],{"class":683},"(id",[637,6704,687],{"class":642},[637,6706,6707],{"class":683}," newZ) ",[637,6709,6710],{"class":1209},"// reorder one decal\n",[637,6712,6713,6715,6717,6719,6721,6723,6726,6728],{"class":639,"line":708},[637,6714,3735],{"class":683},[637,6716,1146],{"class":642},[637,6718,6559],{"class":2434},[637,6720,6702],{"class":683},[637,6722,687],{"class":642},[637,6724,6725],{"class":4397}," false",[637,6727,4734],{"class":683},[637,6729,6730],{"class":1209},"// hide / show\n",[637,6732,6733,6735,6737,6739,6741],{"class":639,"line":729},[637,6734,3735],{"class":683},[637,6736,1146],{"class":642},[637,6738,6562],{"class":2434},[637,6740,6688],{"class":683},[637,6742,6743],{"class":1209},"// delete\n",[614,6745,6746,6747,6750,6751,6753,6754,6756,6757,6759],{},"When the targeted id matches the ",[1669,6748,6749],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[618,6752,6027],{},", reverted on ",[618,6755,5864],{},").\nOtherwise they update ",[618,6758,3018],{}," immediately and record history.",[4051,6761,6763],{"id":6762},"batched-mesh-updates","Batched mesh updates",[626,6765,6767],{"className":1186,"code":6766,"language":664,"meta":576,"style":576},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[618,6768,6769],{"__ignoreMap":576},[637,6770,6771,6773,6775,6777,6780,6782,6785,6787,6789,6792,6794,6796,6798],{"class":639,"line":577},[637,6772,3735],{"class":683},[637,6774,1146],{"class":642},[637,6776,6566],{"class":2434},[637,6778,6779],{"class":683},"(meshName",[637,6781,687],{"class":642},[637,6783,6784],{"class":683}," nextEntries",[637,6786,687],{"class":642},[637,6788,680],{"class":642},[637,6790,6791],{"class":646}," recordHistory",[637,6793,1218],{"class":642},[637,6795,4398],{"class":4397},[637,6797,693],{"class":642},[637,6799,2448],{"class":683},[614,6801,6802,6803,6805],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[618,6804,6556],{}," calls in the same tick.",[4051,6807,6809],{"id":6808},"listening-to-commits","Listening to commits",[626,6811,6813],{"className":1186,"code":6812,"language":664,"meta":576,"style":576},"const off = session.onCommit((entry, mode) => {\n  console.log(mode, entry) // mode: 'create' | 'update'\n})\nsession.onDelete((entry) => { /* … */ })\nsession.onCancel(() => { /* … */ })\n\n// All return an unsubscribe function:\nonBeforeUnmount(off)\n",[618,6814,6815,6850,6875,6881,6909,6932,6936,6941],{"__ignoreMap":576},[637,6816,6817,6819,6822,6824,6827,6829,6832,6834,6836,6839,6841,6844,6846,6848],{"class":639,"line":577},[637,6818,2415],{"class":650},[637,6820,6821],{"class":683}," off ",[637,6823,657],{"class":642},[637,6825,6826],{"class":683}," session",[637,6828,1146],{"class":642},[637,6830,6831],{"class":2434},"onCommit",[637,6833,2437],{"class":683},[637,6835,2437],{"class":642},[637,6837,5847],{"class":6838},"sHdIc",[637,6840,687],{"class":642},[637,6842,6843],{"class":6838}," mode",[637,6845,3340],{"class":642},[637,6847,3677],{"class":650},[637,6849,1204],{"class":642},[637,6851,6852,6855,6857,6860,6862,6865,6867,6870,6872],{"class":639,"line":578},[637,6853,6854],{"class":683},"  console",[637,6856,1146],{"class":642},[637,6858,6859],{"class":2434},"log",[637,6861,2437],{"class":646},[637,6863,6864],{"class":683},"mode",[637,6866,687],{"class":642},[637,6868,6869],{"class":683}," entry",[637,6871,4734],{"class":646},[637,6873,6874],{"class":1209},"// mode: 'create' | 'update'\n",[637,6876,6877,6879],{"class":639,"line":708},[637,6878,2428],{"class":642},[637,6880,2448],{"class":683},[637,6882,6883,6885,6887,6890,6892,6894,6896,6898,6900,6902,6905,6907],{"class":639,"line":729},[637,6884,3735],{"class":683},[637,6886,1146],{"class":642},[637,6888,6889],{"class":2434},"onDelete",[637,6891,2437],{"class":683},[637,6893,2437],{"class":642},[637,6895,5847],{"class":6838},[637,6897,3340],{"class":642},[637,6899,3677],{"class":650},[637,6901,680],{"class":642},[637,6903,6904],{"class":1209}," /* … */",[637,6906,693],{"class":642},[637,6908,2448],{"class":683},[637,6910,6911,6913,6915,6918,6920,6922,6924,6926,6928,6930],{"class":639,"line":739},[637,6912,3735],{"class":683},[637,6914,1146],{"class":642},[637,6916,6917],{"class":2434},"onCancel",[637,6919,2437],{"class":683},[637,6921,3674],{"class":642},[637,6923,3677],{"class":650},[637,6925,680],{"class":642},[637,6927,6904],{"class":1209},[637,6929,693],{"class":642},[637,6931,2448],{"class":683},[637,6933,6934],{"class":639,"line":745},[637,6935,742],{"emptyLinePlaceholder":594},[637,6937,6938],{"class":639,"line":755},[637,6939,6940],{"class":1209},"// All return an unsubscribe function:\n",[637,6942,6943,6946],{"class":639,"line":778},[637,6944,6945],{"class":2434},"onBeforeUnmount",[637,6947,6948],{"class":683},"(off)\n",[4051,6950,6952],{"id":6951},"undo-redo","Undo / redo",[626,6954,6956],{"className":1186,"code":6955,"language":664,"meta":576,"style":576},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[618,6957,6958,6973,6988],{"__ignoreMap":576},[637,6959,6960,6962,6964,6966,6968,6971],{"class":639,"line":577},[637,6961,3735],{"class":683},[637,6963,1146],{"class":642},[637,6965,6547],{"class":683},[637,6967,1146],{"class":642},[637,6969,6970],{"class":683},"value ",[637,6972,6657],{"class":1209},[637,6974,6975,6977,6979,6982,6985],{"class":639,"line":578},[637,6976,3735],{"class":683},[637,6978,1146],{"class":642},[637,6980,6981],{"class":2434},"undo",[637,6983,6984],{"class":683},"() ",[637,6986,6987],{"class":1209},"// returns true if something was undone\n",[637,6989,6990,6992,6994,6997],{"class":639,"line":708},[637,6991,3735],{"class":683},[637,6993,1146],{"class":642},[637,6995,6996],{"class":2434},"redo",[637,6998,6535],{"class":683},[614,7000,7001],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4051,7003,7005],{"id":7004},"power-user-external-entries","Power user — external entries",[614,7007,7008,7009,7011,7012,7015,7016,7019],{},"Plug a decal-like object that lives outside a ",[618,7010,2210],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[618,7013,7014],{},"DecalEntryActions"," bundle so the ",[618,7017,7018],{},"*ById"," session methods route to it:",[626,7021,7023],{"className":1186,"code":7022,"language":664,"meta":576,"style":576},"import type { DecalEntryActions } from '@tresjs/cientos'\n\nsession.registerDecalEntry('decal-7', {\n  beginEdit: () => { /* … */ },\n  setZIndex: (newZ) => { /* … */ },\n  setVisibility: (visible) => { /* … */ },\n  remove: () => { /* … */ },\n} satisfies DecalEntryActions)\nonBeforeUnmount(() => session.unregisterDecalEntry('decal-7'))\n",[618,7024,7025,7046,7050,7071,7090,7112,7134,7151,7162],{"__ignoreMap":576},[637,7026,7027,7029,7031,7033,7036,7038,7040,7042,7044],{"class":639,"line":577},[637,7028,677],{"class":676},[637,7030,3442],{"class":676},[637,7032,680],{"class":642},[637,7034,7035],{"class":683}," DecalEntryActions",[637,7037,693],{"class":642},[637,7039,696],{"class":676},[637,7041,699],{"class":642},[637,7043,702],{"class":663},[637,7045,705],{"class":642},[637,7047,7048],{"class":639,"line":578},[637,7049,742],{"emptyLinePlaceholder":594},[637,7051,7052,7054,7056,7058,7060,7062,7065,7067,7069],{"class":639,"line":708},[637,7053,3735],{"class":683},[637,7055,1146],{"class":642},[637,7057,6570],{"class":2434},[637,7059,2437],{"class":683},[637,7061,2440],{"class":642},[637,7063,7064],{"class":663},"decal-7",[637,7066,2440],{"class":642},[637,7068,687],{"class":642},[637,7070,1204],{"class":642},[637,7072,7073,7076,7078,7081,7083,7085,7087],{"class":639,"line":729},[637,7074,7075],{"class":2434},"  beginEdit",[637,7077,1218],{"class":642},[637,7079,7080],{"class":642}," ()",[637,7082,3677],{"class":650},[637,7084,680],{"class":642},[637,7086,6904],{"class":1209},[637,7088,7089],{"class":642}," },\n",[637,7091,7092,7095,7097,7099,7102,7104,7106,7108,7110],{"class":639,"line":739},[637,7093,7094],{"class":2434},"  setZIndex",[637,7096,1218],{"class":642},[637,7098,3074],{"class":642},[637,7100,7101],{"class":6838},"newZ",[637,7103,3340],{"class":642},[637,7105,3677],{"class":650},[637,7107,680],{"class":642},[637,7109,6904],{"class":1209},[637,7111,7089],{"class":642},[637,7113,7114,7117,7119,7121,7124,7126,7128,7130,7132],{"class":639,"line":745},[637,7115,7116],{"class":2434},"  setVisibility",[637,7118,1218],{"class":642},[637,7120,3074],{"class":642},[637,7122,7123],{"class":6838},"visible",[637,7125,3340],{"class":642},[637,7127,3677],{"class":650},[637,7129,680],{"class":642},[637,7131,6904],{"class":1209},[637,7133,7089],{"class":642},[637,7135,7136,7139,7141,7143,7145,7147,7149],{"class":639,"line":755},[637,7137,7138],{"class":2434},"  remove",[637,7140,1218],{"class":642},[637,7142,7080],{"class":642},[637,7144,3677],{"class":650},[637,7146,680],{"class":642},[637,7148,6904],{"class":1209},[637,7150,7089],{"class":642},[637,7152,7153,7155,7158,7160],{"class":639,"line":778},[637,7154,2428],{"class":642},[637,7156,7157],{"class":676}," satisfies",[637,7159,7035],{"class":1200},[637,7161,2448],{"class":683},[637,7163,7164,7166,7168,7170,7172,7174,7176,7179,7181,7183,7185,7187],{"class":639,"line":790},[637,7165,6945],{"class":2434},[637,7167,2437],{"class":683},[637,7169,3674],{"class":642},[637,7171,3677],{"class":650},[637,7173,6826],{"class":683},[637,7175,1146],{"class":642},[637,7177,7178],{"class":2434},"unregisterDecalEntry",[637,7180,2437],{"class":683},[637,7182,2440],{"class":642},[637,7184,7064],{"class":663},[637,7186,2440],{"class":642},[637,7188,7189],{"class":683},"))\n",[4051,7191,7193],{"id":7192},"helper-utilities","Helper utilities",[927,7195,7196,7205],{},[930,7197,7198],{},[933,7199,7200,7202],{},[936,7201,315],{},[936,7203,7204],{},"Use",[946,7206,7207,7227,7239,7252],{},[933,7208,7209,7214],{},[951,7210,7211],{},[618,7212,7213],{},"ensureTextureNames(textures)",[951,7215,7216,7217,7219,7220,7223,7224,1146],{},"Back-fills ",[618,7218,2977],{}," from ",[618,7221,7222],{},"userData.name"," or the filename in ",[618,7225,7226],{},"image.src",[933,7228,7229,7234],{},[951,7230,7231],{},[618,7232,7233],{},"getTextureName(texture)",[951,7235,7236,7237,1146],{},"Single-texture variant — returns a stable name or ",[618,7238,3656],{},[933,7240,7241,7246],{},[951,7242,7243],{},[618,7244,7245],{},"getTextureAspect(texture)",[951,7247,7248,7251],{},[618,7249,7250],{},"{ x, y }"," aspect ratio for custom-sized decals.",[933,7253,7254,7259],{},[951,7255,7256],{},[618,7257,7258],{},"invalidateDecalGeometry(mesh)",[951,7260,7261],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1327,7263,7264],{},"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":576,"searchDepth":577,"depth":578,"links":7266},[7267,7268,7269,7270,7271,7275,7276,7284,7285,7287,7289,7291,7293,7295,7296,7297,7298],{"id":624,"depth":578,"text":15},{"id":2790,"depth":578,"text":2791},{"id":2985,"depth":578,"text":2259},{"id":3082,"depth":578,"text":3083},{"id":3177,"depth":578,"text":7272,"children":7273},"Editable mode + \u003CDecalDebugUI>",[7274],{"id":4053,"depth":708,"text":4054},{"id":4173,"depth":578,"text":3379},{"id":4272,"depth":578,"text":7277,"children":7278},"Targeting a loaded model (.glb)",[7279,7281,7283],{"id":4299,"depth":708,"text":7280},"When :object is a Mesh",{"id":4521,"depth":708,"text":7282},"When :object is a Group",{"id":4862,"depth":708,"text":4863},{"id":5288,"depth":578,"text":5289},{"id":5545,"depth":578,"text":7286},"\u003CDecal> props",{"id":5747,"depth":578,"text":7288},"\u003CDecal> events",{"id":5888,"depth":578,"text":7290},"\u003CDecal> exposed (via ref)",{"id":6061,"depth":578,"text":7292},"\u003CDecalDebugUI> props",{"id":6212,"depth":578,"text":7294},"\u003CDecalDebugUI> events",{"id":6258,"depth":578,"text":6259},{"id":6318,"depth":578,"text":6319},{"id":6393,"depth":578,"text":6394},{"id":6475,"depth":578,"text":7299},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7300},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7305,"title":57,"body":7306,"description":7594,"extension":591,"links":592,"meta":7595,"navigation":594,"path":58,"seo":7596,"stem":59,"__hash__":7597},"docs/2.api/1.abstractions/edges.md",{"type":501,"value":7307,"toc":7590},[7308,7313,7329,7331,7508,7510,7527,7588],[608,7309,7310],{},[7311,7312],"abstractions-edges",{},[614,7314,2776,7315,7318,7319,7324,7325,7328],{},[618,7316,7317],{},"cientos"," package provides an abstraction of ",[1140,7320,7323],{"href":7321,"rel":7322},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1144],"EdgesGeometry"," from Three.js, ",[618,7326,7327],{},"\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.",[504,7330,15],{"id":624},[626,7332,7335],{"className":628,"code":7333,"highlights":7334,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Box, Edges, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CBox>\n      \u003CTresMeshBasicMaterial />\n      \u003CEdges />\n    \u003C/Box>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,827],[618,7336,7337,7357,7375,7403,7411,7415,7423,7431,7450,7458,7466,7475,7484,7492,7500],{"__ignoreMap":576},[637,7338,7339,7341,7343,7345,7347,7349,7351,7353,7355],{"class":639,"line":577},[637,7340,643],{"class":642},[637,7342,647],{"class":646},[637,7344,651],{"class":650},[637,7346,654],{"class":650},[637,7348,657],{"class":642},[637,7350,660],{"class":642},[637,7352,664],{"class":663},[637,7354,660],{"class":642},[637,7356,669],{"class":642},[637,7358,7359,7361,7363,7365,7367,7369,7371,7373],{"class":639,"line":578},[637,7360,677],{"class":676},[637,7362,680],{"class":642},[637,7364,715],{"class":683},[637,7366,693],{"class":642},[637,7368,696],{"class":676},[637,7370,699],{"class":642},[637,7372,724],{"class":663},[637,7374,705],{"class":642},[637,7376,7378,7380,7382,7384,7386,7389,7391,7393,7395,7397,7399,7401],{"class":7377,"line":708},[639,673],[637,7379,677],{"class":676},[637,7381,680],{"class":642},[637,7383,1397],{"class":683},[637,7385,687],{"class":642},[637,7387,7388],{"class":683}," Edges",[637,7390,687],{"class":642},[637,7392,690],{"class":683},[637,7394,693],{"class":642},[637,7396,696],{"class":676},[637,7398,699],{"class":642},[637,7400,702],{"class":663},[637,7402,705],{"class":642},[637,7404,7405,7407,7409],{"class":639,"line":729},[637,7406,732],{"class":642},[637,7408,647],{"class":646},[637,7410,669],{"class":642},[637,7412,7413],{"class":639,"line":739},[637,7414,742],{"emptyLinePlaceholder":594},[637,7416,7417,7419,7421],{"class":639,"line":745},[637,7418,643],{"class":642},[637,7420,750],{"class":646},[637,7422,669],{"class":642},[637,7424,7425,7427,7429],{"class":639,"line":755},[637,7426,758],{"class":642},[637,7428,761],{"class":646},[637,7430,669],{"class":642},[637,7432,7433,7435,7437,7439,7441,7443,7446,7448],{"class":639,"line":778},[637,7434,781],{"class":642},[637,7436,784],{"class":646},[637,7438,1485],{"class":650},[637,7440,657],{"class":642},[637,7442,660],{"class":642},[637,7444,7445],{"class":663},"[0, 2, 5]",[637,7447,660],{"class":642},[637,7449,787],{"class":642},[637,7451,7452,7454,7456],{"class":639,"line":790},[637,7453,781],{"class":642},[637,7455,795],{"class":646},[637,7457,787],{"class":642},[637,7459,7460,7462,7464],{"class":639,"line":800},[637,7461,781],{"class":642},[637,7463,217],{"class":646},[637,7465,669],{"class":642},[637,7467,7468,7470,7473],{"class":639,"line":805},[637,7469,853],{"class":642},[637,7471,7472],{"class":646},"TresMeshBasicMaterial",[637,7474,787],{"class":642},[637,7476,7478,7480,7482],{"class":7477,"line":827},[639,673],[637,7479,853],{"class":642},[637,7481,57],{"class":646},[637,7483,787],{"class":642},[637,7485,7486,7488,7490],{"class":639,"line":631},[637,7487,895],{"class":642},[637,7489,217],{"class":646},[637,7491,669],{"class":642},[637,7493,7494,7496,7498],{"class":639,"line":850},[637,7495,905],{"class":642},[637,7497,761],{"class":646},[637,7499,669],{"class":642},[637,7501,7502,7504,7506],{"class":639,"line":861},[637,7503,732],{"class":642},[637,7505,750],{"class":646},[637,7507,669],{"class":642},[504,7509,922],{"id":921},[614,7511,7512,7514,7515,7520,7521,7526],{},[618,7513,7327],{}," is based on ",[1140,7516,7519],{"href":7517,"rel":7518},"https://threejs.org/docs/#api/en/objects/LineSegments",[1144],"LineSegments"," & ",[1140,7522,7525],{"href":7523,"rel":7524},"https://threejs.org/docs/#api/en/objects/Line",[1144],"Line"," and supports all of its props.",[927,7528,7529,7539],{},[930,7530,7531],{},[933,7532,7533,7535,7537],{},[936,7534,938],{"align":997},[936,7536,941],{"align":997},[936,7538,944],{},[946,7540,7541,7572],{},[933,7542,7543,7548,7567],{},[951,7544,7545],{"align":997},[1669,7546,7547],{},"color",[951,7549,7550,7553,7554,7557,7558,2267,7563],{"align":997},[618,7551,7552],{},"THREE.Color"," — Color of the edges. ",[7555,7556],"br",{}," More informations : ",[1140,7559,7562],{"href":7560,"rel":7561},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1144],"TresColor",[1140,7564,7552],{"href":7565,"rel":7566},"https://threejs.org/docs/#api/en/math/Color",[1144],[951,7568,7569],{},[618,7570,7571],{},"#ff0000",[933,7573,7574,7579,7584],{},[951,7575,7576],{"align":997},[1669,7577,7578],{},"threshold",[951,7580,7581,7583],{"align":997},[618,7582,5352],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[951,7585,7586],{},[618,7587,1874],{},[1327,7589,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":7591},[7592,7593],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7594},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7599,"title":61,"body":7600,"description":8219,"extension":591,"links":592,"meta":8220,"navigation":594,"path":62,"seo":8221,"stem":63,"__hash__":8222},"docs/2.api/1.abstractions/fit.md",{"type":501,"value":7601,"toc":8215},[7602,7607,7613,7623,7629,7631,8079,8081,8212],[2295,7603,7604],{},[7605,7606],"abstractions-fit",{},[614,7608,7609,7612],{},[618,7610,7611],{},"\u003CFit />"," uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.",[614,7614,7615,7616,7619,7620,1146],{},"Alternatively, the children can be fit into a ",[618,7617,7618],{},"Box3"," or an ",[618,7621,7622],{},"Object3D",[614,7624,7625,7626,7628],{},"Or the children can simply be resized. With ",[618,7627,7611],{}," the children are scaled relative to the center of their calculated bounding box.",[504,7630,15],{"id":624},[626,7632,7635],{"className":628,"code":7633,"highlights":7634,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fit, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { BoxGeometry, MeshNormalMaterial } from 'three'\n\nconst positions: number[][] = []\nfor (let y = 100; y \u003C= 120; y += 10) {\n  for (let x = 100; x \u003C= 120; x += 10) {\n    positions.push([x, y, 9999])\n  }\n}\nconst geom = new BoxGeometry()\nconst mat = new MeshNormalMaterial()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4F4F4F\">\n    \u003CTresPerspectiveCamera :position=\"[1, 1, 1]\" />\n    \u003COrbitControls />\n    \u003CFit>\n      \u003CTresMesh\n        v-for=\"(pos, index) in positions\"\n        :key=\"index\"\n        :position=\"pos\"\n        :args=\"[geom, mat]\"\n      />\n    \u003C/Fit>\n    \u003CTresGridHelper :args=\"[1, 1]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,912,2703],[618,7636,7637,7657,7681,7699,7723,7727,7746,7788,7826,7853,7858,7862,7878,7893,7901,7905,7913,7932,7950,7958,7967,7973,7987,8001,8015,8029,8034,8043,8063,8071],{"__ignoreMap":576},[637,7638,7639,7641,7643,7645,7647,7649,7651,7653,7655],{"class":639,"line":577},[637,7640,643],{"class":642},[637,7642,647],{"class":646},[637,7644,651],{"class":650},[637,7646,654],{"class":650},[637,7648,657],{"class":642},[637,7650,660],{"class":642},[637,7652,664],{"class":663},[637,7654,660],{"class":642},[637,7656,669],{"class":642},[637,7658,7660,7662,7664,7667,7669,7671,7673,7675,7677,7679],{"class":7659,"line":578},[639,673],[637,7661,677],{"class":676},[637,7663,680],{"class":642},[637,7665,7666],{"class":683}," Fit",[637,7668,687],{"class":642},[637,7670,690],{"class":683},[637,7672,693],{"class":642},[637,7674,696],{"class":676},[637,7676,699],{"class":642},[637,7678,702],{"class":663},[637,7680,705],{"class":642},[637,7682,7683,7685,7687,7689,7691,7693,7695,7697],{"class":639,"line":708},[637,7684,677],{"class":676},[637,7686,680],{"class":642},[637,7688,715],{"class":683},[637,7690,693],{"class":642},[637,7692,696],{"class":676},[637,7694,699],{"class":642},[637,7696,724],{"class":663},[637,7698,705],{"class":642},[637,7700,7701,7703,7705,7708,7710,7713,7715,7717,7719,7721],{"class":639,"line":729},[637,7702,677],{"class":676},[637,7704,680],{"class":642},[637,7706,7707],{"class":683}," BoxGeometry",[637,7709,687],{"class":642},[637,7711,7712],{"class":683}," MeshNormalMaterial",[637,7714,693],{"class":642},[637,7716,696],{"class":676},[637,7718,699],{"class":642},[637,7720,4626],{"class":663},[637,7722,705],{"class":642},[637,7724,7725],{"class":639,"line":739},[637,7726,742],{"emptyLinePlaceholder":594},[637,7728,7729,7731,7734,7736,7738,7741,7743],{"class":639,"line":745},[637,7730,2415],{"class":650},[637,7732,7733],{"class":683}," positions",[637,7735,1218],{"class":642},[637,7737,5357],{"class":1200},[637,7739,7740],{"class":683},"[][] ",[637,7742,657],{"class":642},[637,7744,7745],{"class":683}," []\n",[637,7747,7748,7751,7753,7756,7759,7761,7764,7766,7768,7771,7774,7776,7778,7781,7784,7786],{"class":639,"line":755},[637,7749,7750],{"class":676},"for",[637,7752,3074],{"class":683},[637,7754,7755],{"class":650},"let",[637,7757,7758],{"class":683}," y ",[637,7760,657],{"class":642},[637,7762,7763],{"class":2501}," 100",[637,7765,4138],{"class":642},[637,7767,7758],{"class":683},[637,7769,7770],{"class":642},"\u003C=",[637,7772,7773],{"class":2501}," 120",[637,7775,4138],{"class":642},[637,7777,7758],{"class":683},[637,7779,7780],{"class":642},"+=",[637,7782,7783],{"class":2501}," 10",[637,7785,4734],{"class":683},[637,7787,3260],{"class":642},[637,7789,7790,7793,7795,7797,7800,7802,7804,7806,7808,7811,7813,7815,7817,7820,7822,7824],{"class":639,"line":778},[637,7791,7792],{"class":676},"  for",[637,7794,3074],{"class":646},[637,7796,7755],{"class":650},[637,7798,7799],{"class":683}," x",[637,7801,2431],{"class":642},[637,7803,7763],{"class":2501},[637,7805,4138],{"class":642},[637,7807,7799],{"class":683},[637,7809,7810],{"class":642}," \u003C=",[637,7812,7773],{"class":2501},[637,7814,4138],{"class":642},[637,7816,7799],{"class":683},[637,7818,7819],{"class":642}," +=",[637,7821,7783],{"class":2501},[637,7823,4734],{"class":646},[637,7825,3260],{"class":642},[637,7827,7828,7831,7833,7836,7838,7841,7843,7846,7848,7851],{"class":639,"line":790},[637,7829,7830],{"class":683},"    positions",[637,7832,1146],{"class":642},[637,7834,7835],{"class":2434},"push",[637,7837,3529],{"class":646},[637,7839,7840],{"class":683},"x",[637,7842,687],{"class":642},[637,7844,7845],{"class":683}," y",[637,7847,687],{"class":642},[637,7849,7850],{"class":2501}," 9999",[637,7852,2602],{"class":646},[637,7854,7855],{"class":639,"line":800},[637,7856,7857],{"class":642},"  }\n",[637,7859,7860],{"class":639,"line":805},[637,7861,1325],{"class":642},[637,7863,7864,7866,7869,7871,7874,7876],{"class":639,"line":827},[637,7865,2415],{"class":650},[637,7867,7868],{"class":683}," geom ",[637,7870,657],{"class":642},[637,7872,7873],{"class":642}," new",[637,7875,7707],{"class":2434},[637,7877,6535],{"class":683},[637,7879,7880,7882,7885,7887,7889,7891],{"class":639,"line":631},[637,7881,2415],{"class":650},[637,7883,7884],{"class":683}," mat ",[637,7886,657],{"class":642},[637,7888,7873],{"class":642},[637,7890,7712],{"class":2434},[637,7892,6535],{"class":683},[637,7894,7895,7897,7899],{"class":639,"line":850},[637,7896,732],{"class":642},[637,7898,647],{"class":646},[637,7900,669],{"class":642},[637,7902,7903],{"class":639,"line":861},[637,7904,742],{"emptyLinePlaceholder":594},[637,7906,7907,7909,7911],{"class":639,"line":872},[637,7908,643],{"class":642},[637,7910,750],{"class":646},[637,7912,669],{"class":642},[637,7914,7915,7917,7919,7921,7923,7925,7928,7930],{"class":639,"line":882},[637,7916,758],{"class":642},[637,7918,761],{"class":646},[637,7920,764],{"class":650},[637,7922,657],{"class":642},[637,7924,660],{"class":642},[637,7926,7927],{"class":663},"#4F4F4F",[637,7929,660],{"class":642},[637,7931,669],{"class":642},[637,7933,7934,7936,7938,7940,7942,7944,7946,7948],{"class":639,"line":632},[637,7935,781],{"class":642},[637,7937,784],{"class":646},[637,7939,1485],{"class":650},[637,7941,657],{"class":642},[637,7943,660],{"class":642},[637,7945,1966],{"class":663},[637,7947,660],{"class":642},[637,7949,787],{"class":642},[637,7951,7952,7954,7956],{"class":639,"line":902},[637,7953,781],{"class":642},[637,7955,795],{"class":646},[637,7957,787],{"class":642},[637,7959,7961,7963,7965],{"class":7960,"line":912},[639,673],[637,7962,781],{"class":642},[637,7964,61],{"class":646},[637,7966,669],{"class":642},[637,7968,7969,7971],{"class":639,"line":2625},[637,7970,853],{"class":642},[637,7972,5126],{"class":646},[637,7974,7975,7978,7980,7982,7985],{"class":639,"line":2634},[637,7976,7977],{"class":650},"        v-for",[637,7979,657],{"class":642},[637,7981,660],{"class":642},[637,7983,7984],{"class":663},"(pos, index) in positions",[637,7986,3131],{"class":642},[637,7988,7989,7992,7994,7996,7999],{"class":639,"line":2654},[637,7990,7991],{"class":650},"        :key",[637,7993,657],{"class":642},[637,7995,660],{"class":642},[637,7997,7998],{"class":663},"index",[637,8000,3131],{"class":642},[637,8002,8003,8006,8008,8010,8013],{"class":639,"line":2663},[637,8004,8005],{"class":650},"        :position",[637,8007,657],{"class":642},[637,8009,660],{"class":642},[637,8011,8012],{"class":663},"pos",[637,8014,3131],{"class":642},[637,8016,8017,8020,8022,8024,8027],{"class":639,"line":2672},[637,8018,8019],{"class":650},"        :args",[637,8021,657],{"class":642},[637,8023,660],{"class":642},[637,8025,8026],{"class":663},"[geom, mat]",[637,8028,3131],{"class":642},[637,8030,8031],{"class":639,"line":2681},[637,8032,8033],{"class":642},"      />\n",[637,8035,8037,8039,8041],{"class":8036,"line":2703},[639,673],[637,8038,895],{"class":642},[637,8040,61],{"class":646},[637,8042,669],{"class":642},[637,8044,8045,8047,8050,8052,8054,8056,8059,8061],{"class":639,"line":2747},[637,8046,781],{"class":642},[637,8048,8049],{"class":646},"TresGridHelper",[637,8051,1959],{"class":650},[637,8053,657],{"class":642},[637,8055,660],{"class":642},[637,8057,8058],{"class":663},"[1, 1]",[637,8060,660],{"class":642},[637,8062,787],{"class":642},[637,8064,8065,8067,8069],{"class":639,"line":2756},[637,8066,905],{"class":642},[637,8068,761],{"class":646},[637,8070,669],{"class":642},[637,8072,8073,8075,8077],{"class":639,"line":2765},[637,8074,732],{"class":642},[637,8076,750],{"class":646},[637,8078,669],{"class":642},[504,8080,922],{"id":921},[927,8082,8083,8092],{},[930,8084,8085],{},[933,8086,8087,8090],{},[936,8088,8089],{"align":997},"Name",[936,8091,941],{"align":997},[946,8093,8094,8188],{},[933,8095,8096,8101],{},[951,8097,8098],{"align":997},[1669,8099,8100],{},"into",[951,8102,958,8103,8105,8106,8180,8182,8183,8185],{"align":997},[618,8104,8100],{}," is:",[2213,8107,8108,8117,8125,8133,8141,8152,8159],{},[2216,8109,8110,8111,8113,8114,8116],{},"omitted or explicitly ",[618,8112,1179],{},": position/scale children to fit into a 1 × 1 × 1 ",[618,8115,7618],{}," at world origin.",[2216,8118,8119,8121,8122,8124],{},[618,8120,3656],{},": turn off ",[618,8123,7611],{},"; reset scale/position of children.",[2216,8126,8127,8129,8130,1146],{},[618,8128,5352],{},": convert argument to ",[618,8131,8132],{},"Vector3(number, number, number)",[2216,8134,8135,8129,8138,1146],{},[618,8136,8137],{},"[number, number, number]",[618,8139,8140],{},"Vector3",[2216,8142,8143,8145,8146,8148,8149,8151],{},[618,8144,8140],{},": position/scale children to fit inside a ",[618,8147,7618],{}," of size ",[618,8150,8140],{}," at target objects' cumulative center.",[2216,8153,8154,8156,8157,1146],{},[618,8155,7618],{},": position/scale children to fit inside ",[618,8158,7618],{},[2216,8160,8161,8163,8164,8166,8167,8166,8174,8176,8177,8179],{},[618,8162,7622],{},": position/scale children to fit inside calculated ",[618,8165,7618],{},". ",[1140,8168,1138,8171],{"href":8169,"rel":8170},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1144],[618,8172,8173],{},"THREE.Box3.setFromObject",[618,8175,7611],{}," must not contain the ",[618,8178,7622],{}," and vice-versa.",[7555,8181],{},"default:",[7555,8184],{},[618,8186,8187],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[933,8189,8190,8194],{},[951,8191,8192],{"align":997},[1669,8193,1135],{},[951,8195,8196,8204,8206,8182,8208,8210],{"align":997},[1140,8197,1138,8199,8201,8202],{"href":1142,"rel":8198},[1144],[618,8200,1135],{}," argument in ",[618,8203,8173],{},[7555,8205],{},[7555,8207],{},[7555,8209],{},[618,8211,971],{},[1327,8213,8214],{},"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":576,"searchDepth":577,"depth":578,"links":8216},[8217,8218],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8219},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8224,"title":65,"body":8225,"description":9444,"extension":591,"links":592,"meta":9445,"navigation":594,"path":66,"seo":9446,"stem":67,"__hash__":9447},"docs/2.api/1.abstractions/instances.md",{"type":501,"value":8226,"toc":9430},[8227,8232,8254,8271,8273,8681,8693,8697,8709,8778,8782,8785,8842,8846,8849,8862,8865,8869,8872,8947,8951,8966,9036,9064,9071,9075,9084,9134,9137,9141,9144,9162,9168,9171,9211,9227,9229,9232,9318,9327,9329,9408,9418,9427],[608,8228,8229],{},[8230,8231],"abstractions-instances",{},[614,8233,8234,8235,8238,8239,3063,8242,8245,8246,8249,8250,8253],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[618,8236,8237],{},"\u003CInstances />"," owns a single ",[618,8240,8241],{},"THREE.InstancedMesh",[618,8243,8244],{},"\u003CInstance />"," is a\nplaceholder that registers itself with it, so a ",[618,8247,8248],{},"v-for"," of a thousand nodes costs ",[1669,8251,8252],{},"one"," drawcall.",[614,8255,8256,8257,8259,8260,8262,8263,8266,8267,8270],{},"An ",[618,8258,8244],{}," behaves like any other node in the graph: give it ",[618,8261,4130],{},", nest it under a\ngroup, animate that group, toggle it with ",[618,8264,8265],{},"v-if",", listen for ",[618,8268,8269],{},"@click"," on one of them.",[504,8272,15],{"id":624},[626,8274,8277],{"className":628,"code":8275,"highlights":8276,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Instance, Instances } from '@tresjs/cientos'\nimport { BoxGeometry, MeshStandardMaterial } from 'three'\n\nconst geometry = new BoxGeometry(0.35, 0.35, 0.35)\nconst material = new MeshStandardMaterial()\n\nconst cubes = Array.from({ length: 900 }, (_, i) => [i % 30 - 15, 0, Math.floor(i / 30) - 15])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[14, 10, 14]\" />\n    \u003CInstances :geometry=\"geometry\" :material=\"material\">\n      \u003CInstance\n        v-for=\"(position, i) in cubes\"\n        :key=\"i\"\n        :position=\"position\"\n        color=\"#38bdf8\"\n      />\n    \u003C/Instances>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,850,872,882,632,902,912,2625],[618,8278,8279,8299,8317,8342,8365,8369,8398,8413,8417,8510,8518,8522,8530,8538,8558,8588,8596,8610,8624,8637,8652,8657,8665,8673],{"__ignoreMap":576},[637,8280,8281,8283,8285,8287,8289,8291,8293,8295,8297],{"class":639,"line":577},[637,8282,643],{"class":642},[637,8284,647],{"class":646},[637,8286,651],{"class":650},[637,8288,654],{"class":650},[637,8290,657],{"class":642},[637,8292,660],{"class":642},[637,8294,664],{"class":663},[637,8296,660],{"class":642},[637,8298,669],{"class":642},[637,8300,8301,8303,8305,8307,8309,8311,8313,8315],{"class":639,"line":578},[637,8302,677],{"class":676},[637,8304,680],{"class":642},[637,8306,715],{"class":683},[637,8308,693],{"class":642},[637,8310,696],{"class":676},[637,8312,699],{"class":642},[637,8314,724],{"class":663},[637,8316,705],{"class":642},[637,8318,8320,8322,8324,8327,8329,8332,8334,8336,8338,8340],{"class":8319,"line":708},[639,673],[637,8321,677],{"class":676},[637,8323,680],{"class":642},[637,8325,8326],{"class":683}," Instance",[637,8328,687],{"class":642},[637,8330,8331],{"class":683}," Instances",[637,8333,693],{"class":642},[637,8335,696],{"class":676},[637,8337,699],{"class":642},[637,8339,702],{"class":663},[637,8341,705],{"class":642},[637,8343,8344,8346,8348,8350,8352,8355,8357,8359,8361,8363],{"class":639,"line":729},[637,8345,677],{"class":676},[637,8347,680],{"class":642},[637,8349,7707],{"class":683},[637,8351,687],{"class":642},[637,8353,8354],{"class":683}," MeshStandardMaterial",[637,8356,693],{"class":642},[637,8358,696],{"class":676},[637,8360,699],{"class":642},[637,8362,4626],{"class":663},[637,8364,705],{"class":642},[637,8366,8367],{"class":639,"line":739},[637,8368,742],{"emptyLinePlaceholder":594},[637,8370,8371,8373,8376,8378,8380,8382,8384,8387,8389,8392,8394,8396],{"class":639,"line":745},[637,8372,2415],{"class":650},[637,8374,8375],{"class":683}," geometry ",[637,8377,657],{"class":642},[637,8379,7873],{"class":642},[637,8381,7707],{"class":2434},[637,8383,2437],{"class":683},[637,8385,8386],{"class":2501},"0.35",[637,8388,687],{"class":642},[637,8390,8391],{"class":2501}," 0.35",[637,8393,687],{"class":642},[637,8395,8391],{"class":2501},[637,8397,2448],{"class":683},[637,8399,8400,8402,8405,8407,8409,8411],{"class":639,"line":755},[637,8401,2415],{"class":650},[637,8403,8404],{"class":683}," material ",[637,8406,657],{"class":642},[637,8408,7873],{"class":642},[637,8410,8354],{"class":2434},[637,8412,6535],{"class":683},[637,8414,8415],{"class":639,"line":778},[637,8416,742],{"emptyLinePlaceholder":594},[637,8418,8419,8421,8424,8426,8429,8431,8434,8436,8439,8442,8444,8447,8450,8452,8455,8457,8460,8462,8464,8467,8470,8473,8476,8479,8481,8483,8485,8488,8490,8493,8496,8499,8501,8503,8506,8508],{"class":639,"line":790},[637,8420,2415],{"class":650},[637,8422,8423],{"class":683}," cubes ",[637,8425,657],{"class":642},[637,8427,8428],{"class":683}," Array",[637,8430,1146],{"class":642},[637,8432,8433],{"class":2434},"from",[637,8435,2437],{"class":683},[637,8437,8438],{"class":642},"{",[637,8440,8441],{"class":646}," length",[637,8443,1218],{"class":642},[637,8445,8446],{"class":2501}," 900",[637,8448,8449],{"class":642}," },",[637,8451,3074],{"class":642},[637,8453,8454],{"class":6838},"_",[637,8456,687],{"class":642},[637,8458,8459],{"class":6838}," i",[637,8461,3340],{"class":642},[637,8463,3677],{"class":650},[637,8465,8466],{"class":683}," [i ",[637,8468,8469],{"class":642},"%",[637,8471,8472],{"class":2501}," 30",[637,8474,8475],{"class":642}," -",[637,8477,8478],{"class":2501}," 15",[637,8480,687],{"class":642},[637,8482,2506],{"class":2501},[637,8484,687],{"class":642},[637,8486,8487],{"class":683}," Math",[637,8489,1146],{"class":642},[637,8491,8492],{"class":2434},"floor",[637,8494,8495],{"class":683},"(i ",[637,8497,8498],{"class":642},"/",[637,8500,8472],{"class":2501},[637,8502,4734],{"class":683},[637,8504,8505],{"class":642},"-",[637,8507,8478],{"class":2501},[637,8509,2602],{"class":683},[637,8511,8512,8514,8516],{"class":639,"line":800},[637,8513,732],{"class":642},[637,8515,647],{"class":646},[637,8517,669],{"class":642},[637,8519,8520],{"class":639,"line":805},[637,8521,742],{"emptyLinePlaceholder":594},[637,8523,8524,8526,8528],{"class":639,"line":827},[637,8525,643],{"class":642},[637,8527,750],{"class":646},[637,8529,669],{"class":642},[637,8531,8532,8534,8536],{"class":639,"line":631},[637,8533,758],{"class":642},[637,8535,761],{"class":646},[637,8537,669],{"class":642},[637,8539,8541,8543,8545,8547,8549,8551,8554,8556],{"class":8540,"line":850},[639,673],[637,8542,781],{"class":642},[637,8544,784],{"class":646},[637,8546,1485],{"class":650},[637,8548,657],{"class":642},[637,8550,660],{"class":642},[637,8552,8553],{"class":663},"[14, 10, 14]",[637,8555,660],{"class":642},[637,8557,787],{"class":642},[637,8559,8560,8562,8564,8567,8569,8571,8573,8575,8578,8580,8582,8584,8586],{"class":639,"line":861},[637,8561,781],{"class":642},[637,8563,65],{"class":646},[637,8565,8566],{"class":650}," :geometry",[637,8568,657],{"class":642},[637,8570,660],{"class":642},[637,8572,5256],{"class":663},[637,8574,660],{"class":642},[637,8576,8577],{"class":650}," :material",[637,8579,657],{"class":642},[637,8581,660],{"class":642},[637,8583,5200],{"class":663},[637,8585,660],{"class":642},[637,8587,669],{"class":642},[637,8589,8591,8593],{"class":8590,"line":872},[639,673],[637,8592,853],{"class":642},[637,8594,8595],{"class":646},"Instance\n",[637,8597,8599,8601,8603,8605,8608],{"class":8598,"line":882},[639,673],[637,8600,7977],{"class":650},[637,8602,657],{"class":642},[637,8604,660],{"class":642},[637,8606,8607],{"class":663},"(position, i) in cubes",[637,8609,3131],{"class":642},[637,8611,8613,8615,8617,8619,8622],{"class":8612,"line":632},[639,673],[637,8614,7991],{"class":650},[637,8616,657],{"class":642},[637,8618,660],{"class":642},[637,8620,8621],{"class":663},"i",[637,8623,3131],{"class":642},[637,8625,8627,8629,8631,8633,8635],{"class":8626,"line":902},[639,673],[637,8628,8005],{"class":650},[637,8630,657],{"class":642},[637,8632,660],{"class":642},[637,8634,4130],{"class":663},[637,8636,3131],{"class":642},[637,8638,8640,8643,8645,8647,8650],{"class":8639,"line":912},[639,673],[637,8641,8642],{"class":650},"        color",[637,8644,657],{"class":642},[637,8646,660],{"class":642},[637,8648,8649],{"class":663},"#38bdf8",[637,8651,3131],{"class":642},[637,8653,8655],{"class":8654,"line":2625},[639,673],[637,8656,8033],{"class":642},[637,8658,8659,8661,8663],{"class":639,"line":2634},[637,8660,895],{"class":642},[637,8662,65],{"class":646},[637,8664,669],{"class":642},[637,8666,8667,8669,8671],{"class":639,"line":2654},[637,8668,905],{"class":642},[637,8670,761],{"class":646},[637,8672,669],{"class":642},[637,8674,8675,8677,8679],{"class":639,"line":2663},[637,8676,732],{"class":642},[637,8678,750],{"class":646},[637,8680,669],{"class":642},[2005,8682,8683],{},[614,8684,2776,8685,3063,8687,8689,8690,8692],{},[618,8686,5256],{},[618,8688,5200],{}," are yours: ",[618,8691,8237],{}," never disposes them.",[504,8694,8696],{"id":8695},"per-instance-color","Per-instance color",[614,8698,8699,8701,8702,8704,8705,8708],{},[618,8700,8244],{}," takes a ",[618,8703,7547],{}," prop, written into the batch's ",[618,8706,8707],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[626,8710,8712],{"className":628,"code":8711,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" />\n",[618,8713,8714],{"__ignoreMap":576},[637,8715,8716,8718,8721,8723,8725,8727,8729,8732,8734,8736,8738,8740,8742,8744,8746,8748,8750,8752,8754,8757,8760,8762,8765,8767,8769,8771,8773,8776],{"class":639,"line":577},[637,8717,643],{"class":642},[637,8719,8720],{"class":646},"Instance",[637,8722,3029],{"class":642},[637,8724,4130],{"class":650},[637,8726,657],{"class":642},[637,8728,660],{"class":642},[637,8730,8731],{"class":683},"[",[637,8733,965],{"class":2501},[637,8735,687],{"class":642},[637,8737,2506],{"class":2501},[637,8739,687],{"class":642},[637,8741,2506],{"class":2501},[637,8743,2514],{"class":683},[637,8745,660],{"class":642},[637,8747,3029],{"class":642},[637,8749,7547],{"class":650},[637,8751,657],{"class":642},[637,8753,660],{"class":642},[637,8755,8756],{"class":683},"isSelected ",[637,8758,8759],{"class":642},"?",[637,8761,699],{"class":642},[637,8763,8764],{"class":663},"#f97316",[637,8766,2440],{"class":642},[637,8768,3029],{"class":642},[637,8770,699],{"class":642},[637,8772,8649],{"class":663},[637,8774,8775],{"class":642},"'\"",[637,8777,787],{"class":642},[504,8779,8781],{"id":8780},"pointer-events","Pointer events",[614,8783,8784],{},"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.",[626,8786,8788],{"className":628,"code":8787,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" />\n",[618,8789,8790],{"__ignoreMap":576},[637,8791,8792,8794,8796,8798,8800,8802,8804,8806,8808,8810,8813,8815,8817,8819,8822,8824,8826,8829,8831,8833,8836,8838,8840],{"class":639,"line":577},[637,8793,643],{"class":642},[637,8795,8720],{"class":646},[637,8797,3029],{"class":642},[637,8799,4130],{"class":650},[637,8801,657],{"class":642},[637,8803,660],{"class":642},[637,8805,4130],{"class":683},[637,8807,660],{"class":642},[637,8809,4254],{"class":642},[637,8811,8812],{"class":650},"click",[637,8814,657],{"class":642},[637,8816,660],{"class":642},[637,8818,5837],{"class":2434},[637,8820,8821],{"class":683},"(id)",[637,8823,660],{"class":642},[637,8825,4254],{"class":642},[637,8827,8828],{"class":650},"pointer-enter",[637,8830,657],{"class":642},[637,8832,660],{"class":642},[637,8834,8835],{"class":2434},"hover",[637,8837,8821],{"class":683},[637,8839,660],{"class":642},[637,8841,787],{"class":642},[504,8843,8845],{"id":8844},"hiding-instances","Hiding instances",[614,8847,8848],{},"Two ways, and they differ in what they cost:",[2213,8850,8851,8857],{},[2216,8852,8853,8856],{},[618,8854,8855],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2216,8858,8859,8861],{},[618,8860,8265],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[614,8863,8864],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[504,8866,8868],{"id":8867},"nesting-and-transforms","Nesting and transforms",[614,8870,8871],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[626,8873,8875],{"className":628,"code":8874,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n  \u003CLevioso>\n    \u003CTresGroup :position=\"[0, 3, 0]\">\n      \u003C!-- floats with the group, still the same drawcall -->\n      \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n    \u003C/TresGroup>\n  \u003C/Levioso>\n\u003C/Instances>\n",[618,8876,8877,8909,8914,8919,8924,8929,8934,8939],{"__ignoreMap":576},[637,8878,8879,8881,8883,8885,8887,8889,8891,8893,8895,8897,8899,8901,8903,8905,8907],{"class":639,"line":577},[637,8880,643],{"class":642},[637,8882,65],{"class":646},[637,8884,3029],{"class":642},[637,8886,5256],{"class":650},[637,8888,657],{"class":642},[637,8890,660],{"class":642},[637,8892,5256],{"class":683},[637,8894,660],{"class":642},[637,8896,3029],{"class":642},[637,8898,5200],{"class":650},[637,8900,657],{"class":642},[637,8902,660],{"class":642},[637,8904,5200],{"class":683},[637,8906,660],{"class":642},[637,8908,669],{"class":642},[637,8910,8911],{"class":639,"line":578},[637,8912,8913],{"class":683},"  \u003CLevioso>\n",[637,8915,8916],{"class":639,"line":708},[637,8917,8918],{"class":683},"    \u003CTresGroup :position=\"[0, 3, 0]\">\n",[637,8920,8921],{"class":639,"line":729},[637,8922,8923],{"class":683},"      \u003C!-- floats with the group, still the same drawcall -->\n",[637,8925,8926],{"class":639,"line":739},[637,8927,8928],{"class":683},"      \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[637,8930,8931],{"class":639,"line":745},[637,8932,8933],{"class":683},"    \u003C/TresGroup>\n",[637,8935,8936],{"class":639,"line":755},[637,8937,8938],{"class":683},"  \u003C/Levioso>\n",[637,8940,8941,8943,8945],{"class":639,"line":778},[637,8942,732],{"class":642},[637,8944,65],{"class":646},[637,8946,669],{"class":642},[504,8948,8950],{"id":8949},"animating-instances","Animating instances",[614,8952,8953,8954,8957,8958,8960,8961,8701,8963,8965],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[618,8955,8956],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[618,8959,7622],{},"\nname, and an ",[618,8962,8244],{},[618,8964,2971],{}," like any other node, so a clip can drive one directly.",[626,8967,8969],{"className":628,"code":8968,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n  \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n  \u003CTresGroup name=\"Rotor\">\n    \u003CInstance name=\"Blade\" />\n    \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n  \u003C/TresGroup>\n\u003C/Instances>\n",[618,8970,8971,9003,9008,9013,9018,9023,9028],{"__ignoreMap":576},[637,8972,8973,8975,8977,8979,8981,8983,8985,8987,8989,8991,8993,8995,8997,8999,9001],{"class":639,"line":577},[637,8974,643],{"class":642},[637,8976,65],{"class":646},[637,8978,3029],{"class":642},[637,8980,5256],{"class":650},[637,8982,657],{"class":642},[637,8984,660],{"class":642},[637,8986,5256],{"class":683},[637,8988,660],{"class":642},[637,8990,3029],{"class":642},[637,8992,5200],{"class":650},[637,8994,657],{"class":642},[637,8996,660],{"class":642},[637,8998,5200],{"class":683},[637,9000,660],{"class":642},[637,9002,669],{"class":642},[637,9004,9005],{"class":639,"line":578},[637,9006,9007],{"class":683},"  \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[637,9009,9010],{"class":639,"line":708},[637,9011,9012],{"class":683},"  \u003CTresGroup name=\"Rotor\">\n",[637,9014,9015],{"class":639,"line":729},[637,9016,9017],{"class":683},"    \u003CInstance name=\"Blade\" />\n",[637,9019,9020],{"class":639,"line":739},[637,9021,9022],{"class":683},"    \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[637,9024,9025],{"class":639,"line":745},[637,9026,9027],{"class":683},"  \u003C/TresGroup>\n",[637,9029,9030,9032,9034],{"class":639,"line":755},[637,9031,732],{"class":642},[637,9033,65],{"class":646},[637,9035,669],{"class":642},[2005,9037,9038],{},[614,9039,9040,9041,1672,9044,3063,9046,9049,9050,9052,9053,9056,9057,9059,9060,9063],{},"Inside a ",[618,9042,9043],{},"\u003CMerged />",[618,9045,2971],{},[618,9047,9048],{},"batch"," are different things: ",[618,9051,9048],{}," picks which\n",[618,9054,9055],{},"InstancedMesh"," to join, ",[618,9058,2971],{}," is what this node is called. ",[618,9061,9062],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[614,9065,9066,9067,9070],{},"A track that finds no node is not silent: three logs\n",[618,9068,9069],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[504,9072,9074],{"id":9073},"limit-and-growth","Limit and growth",[614,9076,9077,9080,9081,9083],{},[618,9078,9079],{},"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 ",[618,9082,9079],{}," would have avoided the reallocation.",[626,9085,9087],{"className":628,"code":9086,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[618,9088,9089],{"__ignoreMap":576},[637,9090,9091,9093,9095,9097,9099,9101,9103,9105,9107,9109,9111,9113,9115,9117,9119,9121,9123,9125,9127,9130,9132],{"class":639,"line":577},[637,9092,643],{"class":642},[637,9094,65],{"class":646},[637,9096,3029],{"class":642},[637,9098,5256],{"class":650},[637,9100,657],{"class":642},[637,9102,660],{"class":642},[637,9104,5256],{"class":683},[637,9106,660],{"class":642},[637,9108,3029],{"class":642},[637,9110,5200],{"class":650},[637,9112,657],{"class":642},[637,9114,660],{"class":642},[637,9116,5200],{"class":683},[637,9118,660],{"class":642},[637,9120,3029],{"class":642},[637,9122,9079],{"class":650},[637,9124,657],{"class":642},[637,9126,660],{"class":642},[637,9128,9129],{"class":2501},"5000",[637,9131,660],{"class":642},[637,9133,669],{"class":642},[614,9135,9136],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[504,9138,9140],{"id":9139},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[614,9142,9143],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[614,9145,9146,9147,9149,9150,9152,9153,9155,9156,9158,9159,9161],{},"Each ",[618,9148,8244],{}," is a real ",[618,9151,7622],{}," in the graph. That is precisely what buys you the ergonomics:\n",[618,9154,4130],{}," is just a transform, nesting under a group works because the group is its parent, ",[618,9157,8265],{},"\nworks because unmounting a node unregisters it, and ",[618,9160,8269],{}," 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.",[614,9163,9164,9165,9167],{},"What those nodes do ",[1669,9166,6341],{}," 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.",[614,9169,9170],{},"The costs that are real:",[927,9172,9173,9182],{},[930,9174,9175],{},[933,9176,9177,9179],{},[936,9178],{"align":997},[936,9180,9181],{"align":997},"Cost",[946,9183,9184,9192,9200],{},[933,9185,9186,9189],{},[951,9187,9188],{"align":997},"Per frame",[951,9190,9191],{"align":997},"One world-matrix update and one matrix multiply per instance.",[933,9193,9194,9197],{},[951,9195,9196],{"align":997},"On pointer move",[951,9198,9199],{"align":997},"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.",[933,9201,9202,9205],{},[951,9203,9204],{"align":997},"Memory",[951,9206,9207,9208,9210],{"align":997},"One bare ",[618,9209,7622],{}," per instance.",[2005,9212,9213],{},[614,9214,9215,9216,9219,9220,9223,9224,9226],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[618,9217,9218],{},"TresInstancedMesh"," whose ",[618,9221,9222],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[618,9225,8237],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[504,9228,922],{"id":921},[4051,9230,65],{"id":9231},"instances",[927,9233,9234,9244],{},[930,9235,9236],{},[933,9237,9238,9240,9242],{},[936,9239,938],{"align":997},[936,9241,941],{"align":997},[936,9243,944],{},[946,9245,9246,9260,9273,9287,9302],{},[933,9247,9248,9252,9255],{},[951,9249,9250],{"align":997},[618,9251,5256],{},[951,9253,9254],{"align":997},"Geometry shared by every instance. Not disposed by the component.",[951,9256,9257],{},[1674,9258,9259],{},"required",[933,9261,9262,9266,9269],{},[951,9263,9264],{"align":997},[618,9265,5200],{},[951,9267,9268],{"align":997},"Material shared by every instance. Not disposed by the component.",[951,9270,9271],{},[1674,9272,9259],{},[933,9274,9275,9279,9282],{},[951,9276,9277],{"align":997},[618,9278,9079],{},[951,9280,9281],{"align":997},"Initial buffer allocation. Grows automatically when exceeded.",[951,9283,9284],{},[618,9285,9286],{},"1000",[933,9288,9289,9293,9298],{},[951,9290,9291],{"align":997},[618,9292,9048],{},[951,9294,9295,9296,1146],{"align":997},"Key this batch registers under with an ancestor ",[618,9297,9043],{},[951,9299,9300],{},[618,9301,1179],{},[933,9303,9304,9308,9314],{},[951,9305,9306],{"align":997},[618,9307,2971],{},[951,9309,9310,9311,9313],{"align":997},"Name for the ",[618,9312,9055],{}," itself.",[951,9315,9316],{},[618,9317,1179],{},[614,9319,9320,9321,9323,9324,1146],{},"Exposes the underlying ",[618,9322,8241],{}," through ",[618,9325,9326],{},"instance",[4051,9328,8720],{"id":9326},[927,9330,9331,9341],{},[930,9332,9333],{},[933,9334,9335,9337,9339],{},[936,9336,938],{"align":997},[936,9338,941],{"align":997},[936,9340,944],{},[946,9342,9343,9362,9378,9393],{},[933,9344,9345,9349,9358],{},[951,9346,9347],{"align":997},[618,9348,9048],{},[951,9350,9351,9352,9355,9356,1146],{"align":997},"Batch to join, by its key in ",[618,9353,9354],{},"\u003CMerged :meshes />",". Omit for the nearest ",[618,9357,8237],{},[951,9359,9360],{},[618,9361,1179],{},[933,9363,9364,9368,9374],{},[951,9365,9366],{"align":997},[618,9367,2971],{},[951,9369,9370,9371,9373],{"align":997},"Name for this instance's node, so a mixer or ",[618,9372,4722],{}," can find it.",[951,9375,9376],{},[618,9377,1179],{},[933,9379,9380,9384,9389],{},[951,9381,9382],{"align":997},[618,9383,7547],{},[951,9385,9386,9387,1146],{"align":997},"Per-instance color, written into ",[618,9388,8707],{},[951,9390,9391],{},[618,9392,1179],{},[933,9394,9395,9399,9404],{},[951,9396,9397],{"align":997},[618,9398,7123],{},[951,9400,9401,9403],{"align":997},[618,9402,971],{}," drops the instance from the batch without unregistering it.",[951,9405,9406],{},[618,9407,961],{},[614,9409,9410,9411,1672,9413,1672,9415,9417],{},"Transform props (",[618,9412,4130],{},[618,9414,5627],{},[618,9416,5630],{},", …) and pointer events behave like any other node.",[9419,9420,9421],"read-more",{"to":78},[614,9422,9423,9424,9426],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[618,9425,9043],{}," is for.",[1327,9428,9429],{},"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":576,"searchDepth":577,"depth":578,"links":9431},[9432,9433,9434,9435,9436,9437,9438,9439,9440],{"id":624,"depth":578,"text":15},{"id":8695,"depth":578,"text":8696},{"id":8780,"depth":578,"text":8781},{"id":8844,"depth":578,"text":8845},{"id":8867,"depth":578,"text":8868},{"id":8949,"depth":578,"text":8950},{"id":9073,"depth":578,"text":9074},{"id":9139,"depth":578,"text":9140},{"id":921,"depth":578,"text":922,"children":9441},[9442,9443],{"id":9231,"depth":708,"text":65},{"id":9326,"depth":708,"text":8720},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9444},"8vKhux_ZHYFi--jFcKf3FugQpxaRNQANDCDzZT-Htl8",{"id":9449,"title":69,"body":9450,"description":9838,"extension":591,"links":592,"meta":9839,"navigation":594,"path":70,"seo":9840,"stem":71,"__hash__":9841},"docs/2.api/1.abstractions/levioso.md",{"type":501,"value":9451,"toc":9834},[9452,9457,9464,9473,9475,9759,9761,9832],[608,9453,9454],{},[9455,9456],"abstractions-levioso",{},[614,9458,9459],{},[9460,9461],"img",{"alt":9462,"src":9463},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[614,9465,2776,9466,9468,9469,9472],{},[618,9467,7317],{}," package provides a ",[618,9470,9471],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[504,9474,15],{"id":624},[626,9476,9479],{"className":628,"code":9477,"highlights":9478,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport { Levioso, OrbitControls, Box } from \"@tresjs/cientos\";\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x82dbc5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" :look-at=\"[0, 0, 0]\" />\n    \u003COrbitControls />\n    \u003CLevioso :speed=\"4\">\n      \u003CBox />\n    \u003C/Levioso>\n    \u003CTresAmbientLight :intensity=\"1\" />\n    \u003CTresDirectionalLight :intensity=\"1\" :position=\"[2, 2, 2]\" />\n    \u003CTresGridHelper :position=\"[0, -1, 0]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[708,805,631],[618,9480,9481,9501,9523,9553,9557,9565,9569,9577,9597,9628,9636,9658,9666,9675,9694,9724,9743,9751],{"__ignoreMap":576},[637,9482,9483,9485,9487,9489,9491,9493,9495,9497,9499],{"class":639,"line":577},[637,9484,643],{"class":642},[637,9486,647],{"class":646},[637,9488,651],{"class":650},[637,9490,654],{"class":650},[637,9492,657],{"class":642},[637,9494,660],{"class":642},[637,9496,664],{"class":663},[637,9498,660],{"class":642},[637,9500,669],{"class":642},[637,9502,9503,9505,9507,9509,9511,9513,9516,9518,9520],{"class":639,"line":578},[637,9504,677],{"class":676},[637,9506,680],{"class":642},[637,9508,715],{"class":683},[637,9510,693],{"class":642},[637,9512,696],{"class":676},[637,9514,9515],{"class":642}," \"",[637,9517,724],{"class":663},[637,9519,660],{"class":642},[637,9521,9522],{"class":642},";\n",[637,9524,9526,9528,9530,9533,9535,9537,9539,9541,9543,9545,9547,9549,9551],{"class":9525,"line":708},[639,673],[637,9527,677],{"class":676},[637,9529,680],{"class":642},[637,9531,9532],{"class":683}," Levioso",[637,9534,687],{"class":642},[637,9536,690],{"class":683},[637,9538,687],{"class":642},[637,9540,1397],{"class":683},[637,9542,693],{"class":642},[637,9544,696],{"class":676},[637,9546,9515],{"class":642},[637,9548,702],{"class":663},[637,9550,660],{"class":642},[637,9552,9522],{"class":642},[637,9554,9555],{"class":639,"line":729},[637,9556,742],{"emptyLinePlaceholder":594},[637,9558,9559,9561,9563],{"class":639,"line":739},[637,9560,732],{"class":642},[637,9562,647],{"class":646},[637,9564,669],{"class":642},[637,9566,9567],{"class":639,"line":745},[637,9568,742],{"emptyLinePlaceholder":594},[637,9570,9571,9573,9575],{"class":639,"line":755},[637,9572,643],{"class":642},[637,9574,750],{"class":646},[637,9576,669],{"class":642},[637,9578,9579,9581,9583,9586,9588,9590,9593,9595],{"class":639,"line":778},[637,9580,758],{"class":642},[637,9582,761],{"class":646},[637,9584,9585],{"class":650}," :clear-color",[637,9587,657],{"class":642},[637,9589,660],{"class":642},[637,9591,9592],{"class":663},"0x82dbc5",[637,9594,660],{"class":642},[637,9596,669],{"class":642},[637,9598,9599,9601,9603,9605,9607,9609,9612,9614,9617,9619,9621,9624,9626],{"class":639,"line":790},[637,9600,781],{"class":642},[637,9602,784],{"class":646},[637,9604,1485],{"class":650},[637,9606,657],{"class":642},[637,9608,660],{"class":642},[637,9610,9611],{"class":663},"[0, 0, 5]",[637,9613,660],{"class":642},[637,9615,9616],{"class":650}," :look-at",[637,9618,657],{"class":642},[637,9620,660],{"class":642},[637,9622,9623],{"class":663},"[0, 0, 0]",[637,9625,660],{"class":642},[637,9627,787],{"class":642},[637,9629,9630,9632,9634],{"class":639,"line":800},[637,9631,781],{"class":642},[637,9633,795],{"class":646},[637,9635,787],{"class":642},[637,9637,9639,9641,9644,9647,9649,9651,9654,9656],{"class":9638,"line":805},[639,673],[637,9640,781],{"class":642},[637,9642,9643],{"class":646},"Levioso",[637,9645,9646],{"class":650}," :speed",[637,9648,657],{"class":642},[637,9650,660],{"class":642},[637,9652,9653],{"class":663},"4",[637,9655,660],{"class":642},[637,9657,669],{"class":642},[637,9659,9660,9662,9664],{"class":639,"line":827},[637,9661,853],{"class":642},[637,9663,217],{"class":646},[637,9665,787],{"class":642},[637,9667,9669,9671,9673],{"class":9668,"line":631},[639,673],[637,9670,895],{"class":642},[637,9672,9643],{"class":646},[637,9674,669],{"class":642},[637,9676,9677,9679,9682,9684,9686,9688,9690,9692],{"class":639,"line":850},[637,9678,781],{"class":642},[637,9680,9681],{"class":646},"TresAmbientLight",[637,9683,1867],{"class":650},[637,9685,657],{"class":642},[637,9687,660],{"class":642},[637,9689,1874],{"class":663},[637,9691,660],{"class":642},[637,9693,787],{"class":642},[637,9695,9696,9698,9701,9703,9705,9707,9709,9711,9713,9715,9717,9720,9722],{"class":639,"line":861},[637,9697,781],{"class":642},[637,9699,9700],{"class":646},"TresDirectionalLight",[637,9702,1867],{"class":650},[637,9704,657],{"class":642},[637,9706,660],{"class":642},[637,9708,1874],{"class":663},[637,9710,660],{"class":642},[637,9712,1485],{"class":650},[637,9714,657],{"class":642},[637,9716,660],{"class":642},[637,9718,9719],{"class":663},"[2, 2, 2]",[637,9721,660],{"class":642},[637,9723,787],{"class":642},[637,9725,9726,9728,9730,9732,9734,9736,9739,9741],{"class":639,"line":872},[637,9727,781],{"class":642},[637,9729,8049],{"class":646},[637,9731,1485],{"class":650},[637,9733,657],{"class":642},[637,9735,660],{"class":642},[637,9737,9738],{"class":663},"[0, -1, 0]",[637,9740,660],{"class":642},[637,9742,787],{"class":642},[637,9744,9745,9747,9749],{"class":639,"line":882},[637,9746,905],{"class":642},[637,9748,761],{"class":646},[637,9750,669],{"class":642},[637,9752,9753,9755,9757],{"class":639,"line":632},[637,9754,732],{"class":642},[637,9756,750],{"class":646},[637,9758,669],{"class":642},[504,9760,922],{"id":921},[927,9762,9763,9773],{},[930,9764,9765],{},[933,9766,9767,9769,9771],{},[936,9768,938],{"align":997},[936,9770,941],{"align":997},[936,9772,944],{},[946,9774,9775,9789,9803,9817],{},[933,9776,9777,9782,9785],{},[951,9778,9779],{"align":997},[618,9780,9781],{},"speed",[951,9783,9784],{"align":997},"Floating speed, higher it rocks more 🤘.",[951,9786,9787],{},[618,9788,1874],{},[933,9790,9791,9796,9799],{},[951,9792,9793],{"align":997},[618,9794,9795],{},"rotationFactor",[951,9797,9798],{"align":997},"Factor for Euler rotation.",[951,9800,9801],{},[618,9802,1874],{},[933,9804,9805,9810,9813],{},[951,9806,9807],{"align":997},[618,9808,9809],{},"floatFactor",[951,9811,9812],{"align":997},"Factor for Up/down movement.",[951,9814,9815],{},[618,9816,1874],{},[933,9818,9819,9824,9827],{},[951,9820,9821],{"align":997},[618,9822,9823],{},"range",[951,9825,9826],{"align":997},"Range of y-axis values the object will float within.",[951,9828,9829],{},[618,9830,9831],{},"[-0.1, 0.1]",[1327,9833,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":9835},[9836,9837],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Make content float like magic with smooth animations.",{},{"title":69,"description":9838},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":9843,"title":73,"body":9844,"description":10488,"extension":591,"links":592,"meta":10489,"navigation":594,"path":74,"seo":10490,"stem":75,"__hash__":10491},"docs/2.api/1.abstractions/mask.md",{"type":501,"value":9845,"toc":10483},[9846,9851,9857,9890,9892,10355,10357,10420,10424,10431,10436,10451,10480],[608,9847,9848],{},[9849,9850],"abstractions-mask",{},[614,9852,9853,9856],{},[618,9854,9855],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3199,9858,9859,9877],{},[614,9860,9861,9862,9865,9866,9869,9870,9873,9874,1146],{},"To use ",[618,9863,9864],{},"\u003CMask />"," you ",[1674,9867,9868],{},"must"," add ",[618,9871,9872],{},":stencil=\"true\""," to your ",[618,9875,9876],{},"\u003CTresCanvas />",[614,9878,9879,9881,9882,9889],{},[618,9880,9864],{}," relies on the ",[1140,9883,9886],{"href":9884,"rel":9885},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1144],[618,9887,9888],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[504,9891,15],{"id":624},[626,9893,9896],{"className":628,"code":9894,"highlights":9895,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CTresGroup :scale=\"2\">\n      \u003CTresMesh>\n        \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" />\n        \u003CTresMeshBasicMaterial color=\"white\" />\n      \u003C/TresMesh>\n      \u003CMask :id=\"1\">\n        \u003CTresCircleGeometry />\n        \u003CTresMeshBasicMaterial color=\"#fbb03b\" />\n      \u003C/Mask>\n    \u003C/TresGroup>\n\n    \u003CTresMesh :position-z=\"-1\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n    \u003C/TresMesh>\n\n    \u003CTresMesh :position-z=\"-3\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n    \u003C/TresMesh>\n\n    \u003CTresMesh :position-z=\"-5\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,872,882,632,902],[618,9897,9898,9918,9947,9965,9973,9977,9985,10015,10023,10031,10035,10054,10062,10082,10100,10108,10128,10138,10158,10167,10175,10179,10199,10207,10227,10235,10239,10258,10266,10284,10292,10296,10315,10323,10331,10339,10347],{"__ignoreMap":576},[637,9899,9900,9902,9904,9906,9908,9910,9912,9914,9916],{"class":639,"line":577},[637,9901,643],{"class":642},[637,9903,647],{"class":646},[637,9905,651],{"class":650},[637,9907,654],{"class":650},[637,9909,657],{"class":642},[637,9911,660],{"class":642},[637,9913,664],{"class":663},[637,9915,660],{"class":642},[637,9917,669],{"class":642},[637,9919,9921,9923,9925,9928,9930,9932,9934,9937,9939,9941,9943,9945],{"class":9920,"line":578},[639,673],[637,9922,677],{"class":676},[637,9924,680],{"class":642},[637,9926,9927],{"class":683}," Mask",[637,9929,687],{"class":642},[637,9931,690],{"class":683},[637,9933,687],{"class":642},[637,9935,9936],{"class":683}," useMask",[637,9938,693],{"class":642},[637,9940,696],{"class":676},[637,9942,699],{"class":642},[637,9944,702],{"class":663},[637,9946,705],{"class":642},[637,9948,9949,9951,9953,9955,9957,9959,9961,9963],{"class":639,"line":708},[637,9950,677],{"class":676},[637,9952,680],{"class":642},[637,9954,715],{"class":683},[637,9956,693],{"class":642},[637,9958,696],{"class":676},[637,9960,699],{"class":642},[637,9962,724],{"class":663},[637,9964,705],{"class":642},[637,9966,9967,9969,9971],{"class":639,"line":729},[637,9968,732],{"class":642},[637,9970,647],{"class":646},[637,9972,669],{"class":642},[637,9974,9975],{"class":639,"line":739},[637,9976,742],{"emptyLinePlaceholder":594},[637,9978,9979,9981,9983],{"class":639,"line":745},[637,9980,643],{"class":642},[637,9982,750],{"class":646},[637,9984,669],{"class":642},[637,9986,9987,9989,9991,9994,9996,9998,10000,10002,10004,10006,10008,10011,10013],{"class":639,"line":755},[637,9988,758],{"class":642},[637,9990,761],{"class":646},[637,9992,9993],{"class":650}," :stencil",[637,9995,657],{"class":642},[637,9997,660],{"class":642},[637,9999,961],{"class":663},[637,10001,660],{"class":642},[637,10003,764],{"class":650},[637,10005,657],{"class":642},[637,10007,660],{"class":642},[637,10009,10010],{"class":663},"#4f4f4f",[637,10012,660],{"class":642},[637,10014,669],{"class":642},[637,10016,10017,10019,10021],{"class":639,"line":778},[637,10018,781],{"class":642},[637,10020,784],{"class":646},[637,10022,787],{"class":642},[637,10024,10025,10027,10029],{"class":639,"line":790},[637,10026,781],{"class":642},[637,10028,795],{"class":646},[637,10030,787],{"class":642},[637,10032,10033],{"class":639,"line":800},[637,10034,742],{"emptyLinePlaceholder":594},[637,10036,10037,10039,10042,10044,10046,10048,10050,10052],{"class":639,"line":805},[637,10038,781],{"class":642},[637,10040,10041],{"class":646},"TresGroup",[637,10043,813],{"class":650},[637,10045,657],{"class":642},[637,10047,660],{"class":642},[637,10049,820],{"class":663},[637,10051,660],{"class":642},[637,10053,669],{"class":642},[637,10055,10056,10058,10060],{"class":639,"line":827},[637,10057,853],{"class":642},[637,10059,856],{"class":646},[637,10061,669],{"class":642},[637,10063,10064,10066,10069,10071,10073,10075,10078,10080],{"class":639,"line":631},[637,10065,864],{"class":642},[637,10067,10068],{"class":646},"TresRingGeometry",[637,10070,1959],{"class":650},[637,10072,657],{"class":642},[637,10074,660],{"class":642},[637,10076,10077],{"class":663},"[0.95, 1, 64]",[637,10079,660],{"class":642},[637,10081,787],{"class":642},[637,10083,10084,10086,10088,10090,10092,10094,10096,10098],{"class":639,"line":850},[637,10085,864],{"class":642},[637,10087,7472],{"class":646},[637,10089,2689],{"class":650},[637,10091,657],{"class":642},[637,10093,660],{"class":642},[637,10095,2696],{"class":663},[637,10097,660],{"class":642},[637,10099,787],{"class":642},[637,10101,10102,10104,10106],{"class":639,"line":861},[637,10103,885],{"class":642},[637,10105,856],{"class":646},[637,10107,669],{"class":642},[637,10109,10111,10113,10115,10118,10120,10122,10124,10126],{"class":10110,"line":872},[639,673],[637,10112,853],{"class":642},[637,10114,73],{"class":646},[637,10116,10117],{"class":650}," :id",[637,10119,657],{"class":642},[637,10121,660],{"class":642},[637,10123,1874],{"class":663},[637,10125,660],{"class":642},[637,10127,669],{"class":642},[637,10129,10131,10133,10136],{"class":10130,"line":882},[639,673],[637,10132,864],{"class":642},[637,10134,10135],{"class":646},"TresCircleGeometry",[637,10137,787],{"class":642},[637,10139,10141,10143,10145,10147,10149,10151,10154,10156],{"class":10140,"line":632},[639,673],[637,10142,864],{"class":642},[637,10144,7472],{"class":646},[637,10146,2689],{"class":650},[637,10148,657],{"class":642},[637,10150,660],{"class":642},[637,10152,10153],{"class":663},"#fbb03b",[637,10155,660],{"class":642},[637,10157,787],{"class":642},[637,10159,10161,10163,10165],{"class":10160,"line":902},[639,673],[637,10162,885],{"class":642},[637,10164,73],{"class":646},[637,10166,669],{"class":642},[637,10168,10169,10171,10173],{"class":639,"line":912},[637,10170,895],{"class":642},[637,10172,10041],{"class":646},[637,10174,669],{"class":642},[637,10176,10177],{"class":639,"line":2625},[637,10178,742],{"emptyLinePlaceholder":594},[637,10180,10181,10183,10185,10188,10190,10192,10195,10197],{"class":639,"line":2634},[637,10182,781],{"class":642},[637,10184,856],{"class":646},[637,10186,10187],{"class":650}," :position-z",[637,10189,657],{"class":642},[637,10191,660],{"class":642},[637,10193,10194],{"class":663},"-1",[637,10196,660],{"class":642},[637,10198,669],{"class":642},[637,10200,10201,10203,10205],{"class":639,"line":2654},[637,10202,853],{"class":642},[637,10204,867],{"class":646},[637,10206,787],{"class":642},[637,10208,10209,10211,10213,10216,10218,10220,10223,10225],{"class":639,"line":2663},[637,10210,853],{"class":642},[637,10212,877],{"class":646},[637,10214,10215],{"class":650}," v-bind",[637,10217,657],{"class":642},[637,10219,660],{"class":642},[637,10221,10222],{"class":663},"useMask(1)",[637,10224,660],{"class":642},[637,10226,787],{"class":642},[637,10228,10229,10231,10233],{"class":639,"line":2672},[637,10230,895],{"class":642},[637,10232,856],{"class":646},[637,10234,669],{"class":642},[637,10236,10237],{"class":639,"line":2681},[637,10238,742],{"emptyLinePlaceholder":594},[637,10240,10241,10243,10245,10247,10249,10251,10254,10256],{"class":639,"line":2703},[637,10242,781],{"class":642},[637,10244,856],{"class":646},[637,10246,10187],{"class":650},[637,10248,657],{"class":642},[637,10250,660],{"class":642},[637,10252,10253],{"class":663},"-3",[637,10255,660],{"class":642},[637,10257,669],{"class":642},[637,10259,10260,10262,10264],{"class":639,"line":2747},[637,10261,853],{"class":642},[637,10263,867],{"class":646},[637,10265,787],{"class":642},[637,10267,10268,10270,10272,10274,10276,10278,10280,10282],{"class":639,"line":2756},[637,10269,853],{"class":642},[637,10271,877],{"class":646},[637,10273,10215],{"class":650},[637,10275,657],{"class":642},[637,10277,660],{"class":642},[637,10279,10222],{"class":663},[637,10281,660],{"class":642},[637,10283,787],{"class":642},[637,10285,10286,10288,10290],{"class":639,"line":2765},[637,10287,895],{"class":642},[637,10289,856],{"class":646},[637,10291,669],{"class":642},[637,10293,10294],{"class":639,"line":3922},[637,10295,742],{"emptyLinePlaceholder":594},[637,10297,10298,10300,10302,10304,10306,10308,10311,10313],{"class":639,"line":3953},[637,10299,781],{"class":642},[637,10301,856],{"class":646},[637,10303,10187],{"class":650},[637,10305,657],{"class":642},[637,10307,660],{"class":642},[637,10309,10310],{"class":663},"-5",[637,10312,660],{"class":642},[637,10314,669],{"class":642},[637,10316,10317,10319,10321],{"class":639,"line":3974},[637,10318,853],{"class":642},[637,10320,867],{"class":646},[637,10322,787],{"class":642},[637,10324,10325,10327,10329],{"class":639,"line":3993},[637,10326,853],{"class":642},[637,10328,877],{"class":646},[637,10330,787],{"class":642},[637,10332,10333,10335,10337],{"class":639,"line":4025},[637,10334,895],{"class":642},[637,10336,856],{"class":646},[637,10338,669],{"class":642},[637,10340,10341,10343,10345],{"class":639,"line":4034},[637,10342,905],{"class":642},[637,10344,761],{"class":646},[637,10346,669],{"class":642},[637,10348,10349,10351,10353],{"class":639,"line":4043},[637,10350,732],{"class":642},[637,10352,750],{"class":646},[637,10354,669],{"class":642},[504,10356,922],{"id":921},[927,10358,10359,10369],{},[930,10360,10361],{},[933,10362,10363,10365,10367],{},[936,10364,938],{"align":997},[936,10366,941],{"align":997},[936,10368,944],{},[946,10370,10371,10388,10404],{},[933,10372,10373,10380,10386],{},[951,10374,10375],{"align":997},[1669,10376,10377],{},[618,10378,10379],{},"id",[951,10381,10382,10383,10385],{"align":997},"Id of the stencil buffer to use. Each mask must have a ",[618,10384,5352],{}," id. Multiple masks can refer to the same id.",[951,10387],{},[933,10389,10390,10397,10400],{},[951,10391,10392],{"align":997},[1669,10393,10394],{},[618,10395,10396],{},"colorWrite",[951,10398,10399],{"align":997},"Whether the colors of the mask's own material will leak through.",[951,10401,10402],{},[618,10403,971],{},[933,10405,10406,10413,10416],{},[951,10407,10408],{"align":997},[1669,10409,10410],{},[618,10411,10412],{},"depthWrite",[951,10414,10415],{"align":997},"Whether the depth of the mask's own material will leak through.",[951,10417,10418],{},[618,10419,971],{},[504,10421,10423],{"id":10422},"usemask","useMask",[614,10425,10426,10427,10430],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[618,10428,10429],{},"v-bind"," on materials that should be affected by the mask.",[614,10432,10433],{},[1669,10434,10435],{},"Parameters:",[2213,10437,10438,10443],{},[2216,10439,10440,10442],{},[618,10441,10379],{}," - The mask id to use (number or Ref)",[2216,10444,10445,10448,10449],{},[618,10446,10447],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[618,10450,971],{},[626,10452,10454],{"className":628,"code":10453,"language":633,"meta":576,"style":576},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[618,10455,10456],{"__ignoreMap":576},[637,10457,10458,10460,10462,10464,10466,10468,10470,10472,10474,10476,10478],{"class":639,"line":577},[637,10459,643],{"class":642},[637,10461,877],{"class":646},[637,10463,10215],{"class":650},[637,10465,657],{"class":642},[637,10467,660],{"class":642},[637,10469,10423],{"class":2434},[637,10471,2437],{"class":683},[637,10473,1874],{"class":2501},[637,10475,3340],{"class":683},[637,10477,660],{"class":642},[637,10479,787],{"class":642},[1327,10481,10482],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":10484},[10485,10486,10487],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":10422,"depth":578,"text":10423},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10488},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":10493,"title":77,"body":10494,"description":11194,"extension":591,"links":592,"meta":11195,"navigation":594,"path":78,"seo":11196,"stem":79,"__hash__":11197},"docs/2.api/1.abstractions/merged.md",{"type":501,"value":10495,"toc":11188},[10496,10501,10512,10519,10521,10524,10741,10744,11011,11019,11023,11032,11100,11103,11107,11119,11121,11170,11175,11185],[608,10497,10498],{},[10499,10500],"abstractions-merged",{},[614,10502,10503,8701,10505,10508,10509,1146],{},[618,10504,9043],{},[618,10506,10507],{},"{ name: mesh }"," map and builds one instanced batch per entry. Any descendant,\nat any depth and in any component, joins one by key with ",[618,10510,10511],{},"\u003CInstance batch=\"...\" />",[614,10513,10514,10515,10518],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1669,10516,10517],{},"two"," drawcalls, not 98.",[504,10520,15],{"id":624},[614,10522,10523],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[626,10525,10528],{"className":628,"code":10526,"filename":10527,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Instance } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CInstance batch=\"Body\" :position=\"[0, 0.6, 0]\" />\n    \u003CInstance batch=\"Body\" :position=\"[0, 1.6, 0]\" :scale=\"0.6\" />\n    \u003CInstance batch=\"Eye\" :position=\"[-0.18, 1.7, 0.32]\" />\n    \u003CInstance batch=\"Eye\" :position=\"[0.18, 1.7, 0.32]\" />\n  \u003C/TresGroup>\n\u003C/template>\n","Robot.vue",[618,10529,10530,10550,10568,10576,10580,10588,10596,10626,10666,10696,10725,10733],{"__ignoreMap":576},[637,10531,10532,10534,10536,10538,10540,10542,10544,10546,10548],{"class":639,"line":577},[637,10533,643],{"class":642},[637,10535,647],{"class":646},[637,10537,651],{"class":650},[637,10539,654],{"class":650},[637,10541,657],{"class":642},[637,10543,660],{"class":642},[637,10545,664],{"class":663},[637,10547,660],{"class":642},[637,10549,669],{"class":642},[637,10551,10552,10554,10556,10558,10560,10562,10564,10566],{"class":639,"line":578},[637,10553,677],{"class":676},[637,10555,680],{"class":642},[637,10557,8326],{"class":683},[637,10559,693],{"class":642},[637,10561,696],{"class":676},[637,10563,699],{"class":642},[637,10565,702],{"class":663},[637,10567,705],{"class":642},[637,10569,10570,10572,10574],{"class":639,"line":708},[637,10571,732],{"class":642},[637,10573,647],{"class":646},[637,10575,669],{"class":642},[637,10577,10578],{"class":639,"line":729},[637,10579,742],{"emptyLinePlaceholder":594},[637,10581,10582,10584,10586],{"class":639,"line":739},[637,10583,643],{"class":642},[637,10585,750],{"class":646},[637,10587,669],{"class":642},[637,10589,10590,10592,10594],{"class":639,"line":745},[637,10591,758],{"class":642},[637,10593,10041],{"class":646},[637,10595,669],{"class":642},[637,10597,10598,10600,10602,10605,10607,10609,10611,10613,10615,10617,10619,10622,10624],{"class":639,"line":755},[637,10599,781],{"class":642},[637,10601,8720],{"class":646},[637,10603,10604],{"class":650}," batch",[637,10606,657],{"class":642},[637,10608,660],{"class":642},[637,10610,4729],{"class":663},[637,10612,660],{"class":642},[637,10614,1485],{"class":650},[637,10616,657],{"class":642},[637,10618,660],{"class":642},[637,10620,10621],{"class":663},"[0, 0.6, 0]",[637,10623,660],{"class":642},[637,10625,787],{"class":642},[637,10627,10628,10630,10632,10634,10636,10638,10640,10642,10644,10646,10648,10651,10653,10655,10657,10659,10662,10664],{"class":639,"line":778},[637,10629,781],{"class":642},[637,10631,8720],{"class":646},[637,10633,10604],{"class":650},[637,10635,657],{"class":642},[637,10637,660],{"class":642},[637,10639,4729],{"class":663},[637,10641,660],{"class":642},[637,10643,1485],{"class":650},[637,10645,657],{"class":642},[637,10647,660],{"class":642},[637,10649,10650],{"class":663},"[0, 1.6, 0]",[637,10652,660],{"class":642},[637,10654,813],{"class":650},[637,10656,657],{"class":642},[637,10658,660],{"class":642},[637,10660,10661],{"class":663},"0.6",[637,10663,660],{"class":642},[637,10665,787],{"class":642},[637,10667,10668,10670,10672,10674,10676,10678,10681,10683,10685,10687,10689,10692,10694],{"class":639,"line":790},[637,10669,781],{"class":642},[637,10671,8720],{"class":646},[637,10673,10604],{"class":650},[637,10675,657],{"class":642},[637,10677,660],{"class":642},[637,10679,10680],{"class":663},"Eye",[637,10682,660],{"class":642},[637,10684,1485],{"class":650},[637,10686,657],{"class":642},[637,10688,660],{"class":642},[637,10690,10691],{"class":663},"[-0.18, 1.7, 0.32]",[637,10693,660],{"class":642},[637,10695,787],{"class":642},[637,10697,10698,10700,10702,10704,10706,10708,10710,10712,10714,10716,10718,10721,10723],{"class":639,"line":800},[637,10699,781],{"class":642},[637,10701,8720],{"class":646},[637,10703,10604],{"class":650},[637,10705,657],{"class":642},[637,10707,660],{"class":642},[637,10709,10680],{"class":663},[637,10711,660],{"class":642},[637,10713,1485],{"class":650},[637,10715,657],{"class":642},[637,10717,660],{"class":642},[637,10719,10720],{"class":663},"[0.18, 1.7, 0.32]",[637,10722,660],{"class":642},[637,10724,787],{"class":642},[637,10726,10727,10729,10731],{"class":639,"line":805},[637,10728,905],{"class":642},[637,10730,10041],{"class":646},[637,10732,669],{"class":642},[637,10734,10735,10737,10739],{"class":639,"line":827},[637,10736,732],{"class":642},[637,10738,750],{"class":646},[637,10740,669],{"class":642},[614,10742,10743],{},"The provider hands over the meshes and renders as many copies as it likes:",[626,10745,10748],{"className":628,"code":10746,"highlights":10747,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Merged, useGLTF } from '@tresjs/cientos'\nimport Robot from './Robot.vue'\n\nconst { nodes } = useGLTF('/robot.glb')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[12, 9, 12]\" />\n    \u003CMerged :meshes=\"{ Body: nodes.Body, Eye: nodes.Eye }\">\n      \u003CRobot :position=\"[-2, 0, 0]\" />\n      \u003CRobot :position=\"[0, 0, 0]\" />\n      \u003CRobot :position=\"[2, 0, 0]\" />\n    \u003C/Merged>\n  \u003C/TresCanvas>\n\u003C/template>\n",[827,631,850,861,872,882,632],[618,10749,10750,10770,10788,10811,10827,10831,10856,10864,10868,10876,10884,10903,10924,10945,10964,10984,10993,11002],{"__ignoreMap":576},[637,10751,10752,10754,10756,10758,10760,10762,10764,10766,10768],{"class":639,"line":577},[637,10753,643],{"class":642},[637,10755,647],{"class":646},[637,10757,651],{"class":650},[637,10759,654],{"class":650},[637,10761,657],{"class":642},[637,10763,660],{"class":642},[637,10765,664],{"class":663},[637,10767,660],{"class":642},[637,10769,669],{"class":642},[637,10771,10772,10774,10776,10778,10780,10782,10784,10786],{"class":639,"line":578},[637,10773,677],{"class":676},[637,10775,680],{"class":642},[637,10777,715],{"class":683},[637,10779,693],{"class":642},[637,10781,696],{"class":676},[637,10783,699],{"class":642},[637,10785,724],{"class":663},[637,10787,705],{"class":642},[637,10789,10790,10792,10794,10797,10799,10801,10803,10805,10807,10809],{"class":639,"line":708},[637,10791,677],{"class":676},[637,10793,680],{"class":642},[637,10795,10796],{"class":683}," Merged",[637,10798,687],{"class":642},[637,10800,4347],{"class":683},[637,10802,693],{"class":642},[637,10804,696],{"class":676},[637,10806,699],{"class":642},[637,10808,702],{"class":663},[637,10810,705],{"class":642},[637,10812,10813,10815,10818,10820,10822,10825],{"class":639,"line":729},[637,10814,677],{"class":676},[637,10816,10817],{"class":683}," Robot ",[637,10819,8433],{"class":676},[637,10821,699],{"class":642},[637,10823,10824],{"class":663},"./Robot.vue",[637,10826,705],{"class":642},[637,10828,10829],{"class":639,"line":739},[637,10830,742],{"emptyLinePlaceholder":594},[637,10832,10833,10835,10837,10839,10841,10843,10845,10847,10849,10852,10854],{"class":639,"line":745},[637,10834,2415],{"class":650},[637,10836,680],{"class":642},[637,10838,4370],{"class":683},[637,10840,2428],{"class":642},[637,10842,2431],{"class":642},[637,10844,4347],{"class":2434},[637,10846,2437],{"class":683},[637,10848,2440],{"class":642},[637,10850,10851],{"class":663},"/robot.glb",[637,10853,2440],{"class":642},[637,10855,2448],{"class":683},[637,10857,10858,10860,10862],{"class":639,"line":755},[637,10859,732],{"class":642},[637,10861,647],{"class":646},[637,10863,669],{"class":642},[637,10865,10866],{"class":639,"line":778},[637,10867,742],{"emptyLinePlaceholder":594},[637,10869,10870,10872,10874],{"class":639,"line":790},[637,10871,643],{"class":642},[637,10873,750],{"class":646},[637,10875,669],{"class":642},[637,10877,10878,10880,10882],{"class":639,"line":800},[637,10879,758],{"class":642},[637,10881,761],{"class":646},[637,10883,669],{"class":642},[637,10885,10886,10888,10890,10892,10894,10896,10899,10901],{"class":639,"line":805},[637,10887,781],{"class":642},[637,10889,784],{"class":646},[637,10891,1485],{"class":650},[637,10893,657],{"class":642},[637,10895,660],{"class":642},[637,10897,10898],{"class":663},"[12, 9, 12]",[637,10900,660],{"class":642},[637,10902,787],{"class":642},[637,10904,10906,10908,10910,10913,10915,10917,10920,10922],{"class":10905,"line":827},[639,673],[637,10907,781],{"class":642},[637,10909,77],{"class":646},[637,10911,10912],{"class":650}," :meshes",[637,10914,657],{"class":642},[637,10916,660],{"class":642},[637,10918,10919],{"class":663},"{ Body: nodes.Body, Eye: nodes.Eye }",[637,10921,660],{"class":642},[637,10923,669],{"class":642},[637,10925,10927,10929,10932,10934,10936,10938,10941,10943],{"class":10926,"line":631},[639,673],[637,10928,853],{"class":642},[637,10930,10931],{"class":646},"Robot",[637,10933,1485],{"class":650},[637,10935,657],{"class":642},[637,10937,660],{"class":642},[637,10939,10940],{"class":663},"[-2, 0, 0]",[637,10942,660],{"class":642},[637,10944,787],{"class":642},[637,10946,10948,10950,10952,10954,10956,10958,10960,10962],{"class":10947,"line":850},[639,673],[637,10949,853],{"class":642},[637,10951,10931],{"class":646},[637,10953,1485],{"class":650},[637,10955,657],{"class":642},[637,10957,660],{"class":642},[637,10959,9623],{"class":663},[637,10961,660],{"class":642},[637,10963,787],{"class":642},[637,10965,10967,10969,10971,10973,10975,10977,10980,10982],{"class":10966,"line":861},[639,673],[637,10968,853],{"class":642},[637,10970,10931],{"class":646},[637,10972,1485],{"class":650},[637,10974,657],{"class":642},[637,10976,660],{"class":642},[637,10978,10979],{"class":663},"[2, 0, 0]",[637,10981,660],{"class":642},[637,10983,787],{"class":642},[637,10985,10987,10989,10991],{"class":10986,"line":872},[639,673],[637,10988,895],{"class":642},[637,10990,77],{"class":646},[637,10992,669],{"class":642},[637,10994,10996,10998,11000],{"class":10995,"line":882},[639,673],[637,10997,905],{"class":642},[637,10999,761],{"class":646},[637,11001,669],{"class":642},[637,11003,11005,11007,11009],{"class":11004,"line":632},[639,673],[637,11006,732],{"class":642},[637,11008,750],{"class":646},[637,11010,669],{"class":642},[2005,11012,11013],{},[614,11014,11015,11016,11018],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[618,11017,8244],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[504,11020,11022],{"id":11021},"instancing-a-whole-gltf","Instancing a whole glTF",[614,11024,11025,11027,11028,11031],{},[618,11026,133],{}," gives you ",[618,11029,11030],{},"nodes",", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[626,11033,11035],{"className":628,"code":11034,"language":633,"meta":576,"style":576},"\u003CMerged :meshes=\"{ Screw: nodes.Screw, Bolt: nodes.Bolt }\">\n  \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n\u003C/Merged>\n",[618,11036,11037,11087,11092],{"__ignoreMap":576},[637,11038,11039,11041,11043,11045,11048,11050,11052,11054,11057,11059,11062,11064,11067,11069,11072,11074,11076,11078,11081,11083,11085],{"class":639,"line":577},[637,11040,643],{"class":642},[637,11042,77],{"class":646},[637,11044,3029],{"class":642},[637,11046,11047],{"class":650},"meshes",[637,11049,657],{"class":642},[637,11051,660],{"class":642},[637,11053,8438],{"class":642},[637,11055,11056],{"class":646}," Screw",[637,11058,1218],{"class":642},[637,11060,11061],{"class":683}," nodes",[637,11063,1146],{"class":642},[637,11065,11066],{"class":683},"Screw",[637,11068,687],{"class":642},[637,11070,11071],{"class":646}," Bolt",[637,11073,1218],{"class":642},[637,11075,11061],{"class":683},[637,11077,1146],{"class":642},[637,11079,11080],{"class":683},"Bolt ",[637,11082,2428],{"class":642},[637,11084,660],{"class":642},[637,11086,669],{"class":642},[637,11088,11089],{"class":639,"line":578},[637,11090,11091],{"class":683},"  \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n",[637,11093,11094,11096,11098],{"class":639,"line":708},[637,11095,732],{"class":642},[637,11097,77],{"class":646},[637,11099,669],{"class":642},[614,11101,11102],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[504,11104,11106],{"id":11105},"opting-a-node-out","Opting a node out",[614,11108,8256,11109,11111,11112,11115,11116,11118],{},[618,11110,8244],{}," 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 ",[618,11113,11114],{},"\u003CTresMesh />","\ninstead of an ",[618,11117,8244],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[504,11120,922],{"id":921},[927,11122,11123,11133],{},[930,11124,11125],{},[933,11126,11127,11129,11131],{},[936,11128,938],{"align":997},[936,11130,941],{"align":997},[936,11132,944],{},[946,11134,11135,11151],{},[933,11136,11137,11141,11147],{},[951,11138,11139],{"align":997},[618,11140,11047],{},[951,11142,11143,11144,11146],{"align":997},"One batch per entry, keyed by what ",[618,11145,10511],{}," joins.",[951,11148,11149],{},[1674,11150,9259],{},[933,11152,11153,11157,11165],{},[951,11154,11155],{"align":997},[618,11156,9079],{},[951,11158,11159,11160,11162,11163,1146],{"align":997},"Initial buffer allocation per batch. One batch per entry in ",[618,11161,11047],{},", so it defaults lower than ",[618,11164,8237],{},[951,11166,11167],{},[618,11168,11169],{},"100",[614,11171,11172,11173,1146],{},"Exposes the named batch registry through ",[618,11174,9231],{},[9419,11176,11177],{"to":66},[614,11178,11179,11180,11182,11183,1146],{},"Per-instance colors, pointer events, visibility and the ",[618,11181,9079],{}," growth behaviour are documented on ",[618,11184,8237],{},[1327,11186,11187],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":11189},[11190,11191,11192,11193],{"id":624,"depth":578,"text":15},{"id":11021,"depth":578,"text":11022},{"id":11105,"depth":578,"text":11106},{"id":921,"depth":578,"text":922},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11194},"C2ZYlA8AWc0pX47Tdp8yJPJh6JofaryewUtJVMvgXZw",{"id":11199,"title":81,"body":11200,"description":11671,"extension":591,"links":592,"meta":11672,"navigation":594,"path":82,"seo":11673,"stem":83,"__hash__":11674},"docs/2.api/1.abstractions/outline.md",{"type":501,"value":11201,"toc":11667},[11202,11207,11218,11220,11567,11569,11665],[608,11203,11204],{},[11205,11206],"abstractions-outline",{},[614,11208,11209,11212,11213,3063,11215,1146],{},[618,11210,11211],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[618,11214,2310],{},[618,11216,11217],{},"\u003CTresSkinnedMesh>",[504,11219,15],{"id":624},[626,11221,11224],{"className":628,"code":11222,"highlights":11223,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, Outline } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n    \u003CTresAmbientLight :intensity=\"3.14\" />\n    \u003CTresPointLight :intensity=\"50\" :position=\"[2, 2, 0]\" />\n    \u003CTresMesh :position-x=\"-0.75\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshPhongMaterial />\n      \u003COutline :thickness=\"7.5\" color=\"#82dbc5\" />\n    \u003C/TresMesh>\n    \u003CTresMesh :position-x=\"0.75\">\n      \u003CTresSphereGeometry :args=\"[0.5]\" />\n      \u003CTresMeshPhongMaterial />\n      \u003COutline :thickness=\"7.5\" color=\"#fbb03b\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[708,861,912],[618,11225,11226,11246,11264,11288,11296,11300,11308,11326,11334,11342,11361,11392,11412,11420,11429,11461,11469,11487,11506,11514,11543,11551,11559],{"__ignoreMap":576},[637,11227,11228,11230,11232,11234,11236,11238,11240,11242,11244],{"class":639,"line":577},[637,11229,643],{"class":642},[637,11231,647],{"class":646},[637,11233,651],{"class":650},[637,11235,654],{"class":650},[637,11237,657],{"class":642},[637,11239,660],{"class":642},[637,11241,664],{"class":663},[637,11243,660],{"class":642},[637,11245,669],{"class":642},[637,11247,11248,11250,11252,11254,11256,11258,11260,11262],{"class":639,"line":578},[637,11249,677],{"class":676},[637,11251,680],{"class":642},[637,11253,715],{"class":683},[637,11255,693],{"class":642},[637,11257,696],{"class":676},[637,11259,699],{"class":642},[637,11261,724],{"class":663},[637,11263,705],{"class":642},[637,11265,11267,11269,11271,11273,11275,11278,11280,11282,11284,11286],{"class":11266,"line":708},[639,673],[637,11268,677],{"class":676},[637,11270,680],{"class":642},[637,11272,690],{"class":683},[637,11274,687],{"class":642},[637,11276,11277],{"class":683}," Outline",[637,11279,693],{"class":642},[637,11281,696],{"class":676},[637,11283,699],{"class":642},[637,11285,702],{"class":663},[637,11287,705],{"class":642},[637,11289,11290,11292,11294],{"class":639,"line":729},[637,11291,732],{"class":642},[637,11293,647],{"class":646},[637,11295,669],{"class":642},[637,11297,11298],{"class":639,"line":739},[637,11299,742],{"emptyLinePlaceholder":594},[637,11301,11302,11304,11306],{"class":639,"line":745},[637,11303,643],{"class":642},[637,11305,750],{"class":646},[637,11307,669],{"class":642},[637,11309,11310,11312,11314,11316,11318,11320,11322,11324],{"class":639,"line":755},[637,11311,758],{"class":642},[637,11313,761],{"class":646},[637,11315,764],{"class":650},[637,11317,657],{"class":642},[637,11319,660],{"class":642},[637,11321,10010],{"class":663},[637,11323,660],{"class":642},[637,11325,669],{"class":642},[637,11327,11328,11330,11332],{"class":639,"line":778},[637,11329,781],{"class":642},[637,11331,784],{"class":646},[637,11333,787],{"class":642},[637,11335,11336,11338,11340],{"class":639,"line":790},[637,11337,781],{"class":642},[637,11339,795],{"class":646},[637,11341,787],{"class":642},[637,11343,11344,11346,11348,11350,11352,11354,11357,11359],{"class":639,"line":800},[637,11345,781],{"class":642},[637,11347,9681],{"class":646},[637,11349,1867],{"class":650},[637,11351,657],{"class":642},[637,11353,660],{"class":642},[637,11355,11356],{"class":663},"3.14",[637,11358,660],{"class":642},[637,11360,787],{"class":642},[637,11362,11363,11365,11368,11370,11372,11374,11377,11379,11381,11383,11385,11388,11390],{"class":639,"line":805},[637,11364,781],{"class":642},[637,11366,11367],{"class":646},"TresPointLight",[637,11369,1867],{"class":650},[637,11371,657],{"class":642},[637,11373,660],{"class":642},[637,11375,11376],{"class":663},"50",[637,11378,660],{"class":642},[637,11380,1485],{"class":650},[637,11382,657],{"class":642},[637,11384,660],{"class":642},[637,11386,11387],{"class":663},"[2, 2, 0]",[637,11389,660],{"class":642},[637,11391,787],{"class":642},[637,11393,11394,11396,11398,11401,11403,11405,11408,11410],{"class":639,"line":827},[637,11395,781],{"class":642},[637,11397,856],{"class":646},[637,11399,11400],{"class":650}," :position-x",[637,11402,657],{"class":642},[637,11404,660],{"class":642},[637,11406,11407],{"class":663},"-0.75",[637,11409,660],{"class":642},[637,11411,669],{"class":642},[637,11413,11414,11416,11418],{"class":639,"line":631},[637,11415,853],{"class":642},[637,11417,867],{"class":646},[637,11419,787],{"class":642},[637,11421,11422,11424,11427],{"class":639,"line":850},[637,11423,853],{"class":642},[637,11425,11426],{"class":646},"TresMeshPhongMaterial",[637,11428,787],{"class":642},[637,11430,11432,11434,11436,11439,11441,11443,11446,11448,11450,11452,11454,11457,11459],{"class":11431,"line":861},[639,673],[637,11433,853],{"class":642},[637,11435,81],{"class":646},[637,11437,11438],{"class":650}," :thickness",[637,11440,657],{"class":642},[637,11442,660],{"class":642},[637,11444,11445],{"class":663},"7.5",[637,11447,660],{"class":642},[637,11449,2689],{"class":650},[637,11451,657],{"class":642},[637,11453,660],{"class":642},[637,11455,11456],{"class":663},"#82dbc5",[637,11458,660],{"class":642},[637,11460,787],{"class":642},[637,11462,11463,11465,11467],{"class":639,"line":872},[637,11464,895],{"class":642},[637,11466,856],{"class":646},[637,11468,669],{"class":642},[637,11470,11471,11473,11475,11477,11479,11481,11483,11485],{"class":639,"line":882},[637,11472,781],{"class":642},[637,11474,856],{"class":646},[637,11476,11400],{"class":650},[637,11478,657],{"class":642},[637,11480,660],{"class":642},[637,11482,2551],{"class":663},[637,11484,660],{"class":642},[637,11486,669],{"class":642},[637,11488,11489,11491,11493,11495,11497,11499,11502,11504],{"class":639,"line":632},[637,11490,853],{"class":642},[637,11492,3958],{"class":646},[637,11494,1959],{"class":650},[637,11496,657],{"class":642},[637,11498,660],{"class":642},[637,11500,11501],{"class":663},"[0.5]",[637,11503,660],{"class":642},[637,11505,787],{"class":642},[637,11507,11508,11510,11512],{"class":639,"line":902},[637,11509,853],{"class":642},[637,11511,11426],{"class":646},[637,11513,787],{"class":642},[637,11515,11517,11519,11521,11523,11525,11527,11529,11531,11533,11535,11537,11539,11541],{"class":11516,"line":912},[639,673],[637,11518,853],{"class":642},[637,11520,81],{"class":646},[637,11522,11438],{"class":650},[637,11524,657],{"class":642},[637,11526,660],{"class":642},[637,11528,11445],{"class":663},[637,11530,660],{"class":642},[637,11532,2689],{"class":650},[637,11534,657],{"class":642},[637,11536,660],{"class":642},[637,11538,10153],{"class":663},[637,11540,660],{"class":642},[637,11542,787],{"class":642},[637,11544,11545,11547,11549],{"class":639,"line":2625},[637,11546,895],{"class":642},[637,11548,856],{"class":646},[637,11550,669],{"class":642},[637,11552,11553,11555,11557],{"class":639,"line":2634},[637,11554,905],{"class":642},[637,11556,761],{"class":646},[637,11558,669],{"class":642},[637,11560,11561,11563,11565],{"class":639,"line":2654},[637,11562,732],{"class":642},[637,11564,750],{"class":646},[637,11566,669],{"class":642},[504,11568,922],{"id":921},[927,11570,11571,11581],{},[930,11572,11573],{},[933,11574,11575,11577,11579],{},[936,11576,922],{},[936,11578,941],{},[936,11580,944],{},[946,11582,11583,11595,11607,11619,11631,11644],{},[933,11584,11585,11587,11590],{},[951,11586,7547],{},[951,11588,11589],{},"Outline color",[951,11591,11592],{},[618,11593,11594],{},"'black'",[933,11596,11597,11600,11603],{},[951,11598,11599],{},"screenspace",[951,11601,11602],{},"Whether line thickness is independent of zoom",[951,11604,11605],{},[618,11606,971],{},[933,11608,11609,11612,11615],{},[951,11610,11611],{},"opacity",[951,11613,11614],{},"Outline opacity",[951,11616,11617],{},[618,11618,1874],{},[933,11620,11621,11624,11627],{},[951,11622,11623],{},"transparent",[951,11625,11626],{},"Outline transparency",[951,11628,11629],{},[618,11630,971],{},[933,11632,11633,11636,11639],{},[951,11634,11635],{},"thickness",[951,11637,11638],{},"Outline thickness",[951,11640,11641],{},[618,11642,11643],{},"0.05",[933,11645,11646,11649,11660],{},[951,11647,11648],{},"angle",[951,11650,11651,11652,11654,11655],{},"Geometry crease angle (",[618,11653,965],{}," is no crease).  See ",[1140,11656,11659],{"href":11657,"rel":11658},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1144],"BufferGeometryUtils.toCreasedNormals",[951,11661,11662],{},[618,11663,11664],{},"Math.PI",[1327,11666,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":11668},[11669,11670],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":11671},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":11676,"title":85,"body":11677,"description":12473,"extension":591,"links":592,"meta":12474,"navigation":594,"path":86,"seo":12475,"stem":87,"__hash__":12476},"docs/2.api/1.abstractions/sampler.md",{"type":501,"value":11678,"toc":12468},[11679,11684,11687,11689,11982,11984,12049,12053,12060,12465],[608,11680,11681],{},[11682,11683],"abstractions-sampler",{},[614,11685,11686],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[504,11688,15],{"id":624},[626,11690,11693],{"className":628,"code":11691,"highlights":11692,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CSampler :count=\"50\">\n      \u003CTresMesh>\n        \u003CTresTorusGeometry />\n      \u003C/TresMesh>\n\n      \u003CTresInstancedMesh :args=\"[null!, null!, 1000]\">\n        \u003CTresBoxGeometry :args=\"[0.1, 0.1, 0.1]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresInstancedMesh>\n    \u003C/Sampler>\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,805,827,631,850,861,872,882,632,902,912],[618,11694,11695,11715,11739,11757,11765,11769,11777,11796,11815,11823,11827,11847,11856,11866,11875,11880,11900,11920,11929,11938,11947,11966,11974],{"__ignoreMap":576},[637,11696,11697,11699,11701,11703,11705,11707,11709,11711,11713],{"class":639,"line":577},[637,11698,643],{"class":642},[637,11700,647],{"class":646},[637,11702,651],{"class":650},[637,11704,654],{"class":650},[637,11706,657],{"class":642},[637,11708,660],{"class":642},[637,11710,664],{"class":663},[637,11712,660],{"class":642},[637,11714,669],{"class":642},[637,11716,11718,11720,11722,11724,11726,11729,11731,11733,11735,11737],{"class":11717,"line":578},[639,673],[637,11719,677],{"class":676},[637,11721,680],{"class":642},[637,11723,690],{"class":683},[637,11725,687],{"class":642},[637,11727,11728],{"class":683}," Sampler",[637,11730,693],{"class":642},[637,11732,696],{"class":676},[637,11734,699],{"class":642},[637,11736,702],{"class":663},[637,11738,705],{"class":642},[637,11740,11741,11743,11745,11747,11749,11751,11753,11755],{"class":639,"line":708},[637,11742,677],{"class":676},[637,11744,680],{"class":642},[637,11746,715],{"class":683},[637,11748,693],{"class":642},[637,11750,696],{"class":676},[637,11752,699],{"class":642},[637,11754,724],{"class":663},[637,11756,705],{"class":642},[637,11758,11759,11761,11763],{"class":639,"line":729},[637,11760,732],{"class":642},[637,11762,647],{"class":646},[637,11764,669],{"class":642},[637,11766,11767],{"class":639,"line":739},[637,11768,742],{"emptyLinePlaceholder":594},[637,11770,11771,11773,11775],{"class":639,"line":745},[637,11772,643],{"class":642},[637,11774,750],{"class":646},[637,11776,669],{"class":642},[637,11778,11779,11781,11783,11785,11787,11789,11792,11794],{"class":639,"line":755},[637,11780,758],{"class":642},[637,11782,761],{"class":646},[637,11784,764],{"class":650},[637,11786,657],{"class":642},[637,11788,660],{"class":642},[637,11790,11791],{"class":663},"#82DBC5",[637,11793,660],{"class":642},[637,11795,669],{"class":642},[637,11797,11798,11800,11802,11804,11806,11808,11811,11813],{"class":639,"line":778},[637,11799,781],{"class":642},[637,11801,784],{"class":646},[637,11803,1485],{"class":650},[637,11805,657],{"class":642},[637,11807,660],{"class":642},[637,11809,11810],{"class":663},"[0, 0.5, 5]",[637,11812,660],{"class":642},[637,11814,787],{"class":642},[637,11816,11817,11819,11821],{"class":639,"line":790},[637,11818,781],{"class":642},[637,11820,795],{"class":646},[637,11822,787],{"class":642},[637,11824,11825],{"class":639,"line":800},[637,11826,742],{"emptyLinePlaceholder":594},[637,11828,11830,11832,11834,11837,11839,11841,11843,11845],{"class":11829,"line":805},[639,673],[637,11831,781],{"class":642},[637,11833,85],{"class":646},[637,11835,11836],{"class":650}," :count",[637,11838,657],{"class":642},[637,11840,660],{"class":642},[637,11842,11376],{"class":663},[637,11844,660],{"class":642},[637,11846,669],{"class":642},[637,11848,11850,11852,11854],{"class":11849,"line":827},[639,673],[637,11851,853],{"class":642},[637,11853,856],{"class":646},[637,11855,669],{"class":642},[637,11857,11859,11861,11864],{"class":11858,"line":631},[639,673],[637,11860,864],{"class":642},[637,11862,11863],{"class":646},"TresTorusGeometry",[637,11865,787],{"class":642},[637,11867,11869,11871,11873],{"class":11868,"line":850},[639,673],[637,11870,885],{"class":642},[637,11872,856],{"class":646},[637,11874,669],{"class":642},[637,11876,11878],{"class":11877,"line":861},[639,673],[637,11879,742],{"emptyLinePlaceholder":594},[637,11881,11883,11885,11887,11889,11891,11893,11896,11898],{"class":11882,"line":872},[639,673],[637,11884,853],{"class":642},[637,11886,9218],{"class":646},[637,11888,1959],{"class":650},[637,11890,657],{"class":642},[637,11892,660],{"class":642},[637,11894,11895],{"class":663},"[null!, null!, 1000]",[637,11897,660],{"class":642},[637,11899,669],{"class":642},[637,11901,11903,11905,11907,11909,11911,11913,11916,11918],{"class":11902,"line":882},[639,673],[637,11904,864],{"class":642},[637,11906,867],{"class":646},[637,11908,1959],{"class":650},[637,11910,657],{"class":642},[637,11912,660],{"class":642},[637,11914,11915],{"class":663},"[0.1, 0.1, 0.1]",[637,11917,660],{"class":642},[637,11919,787],{"class":642},[637,11921,11923,11925,11927],{"class":11922,"line":632},[639,673],[637,11924,864],{"class":642},[637,11926,877],{"class":646},[637,11928,787],{"class":642},[637,11930,11932,11934,11936],{"class":11931,"line":902},[639,673],[637,11933,885],{"class":642},[637,11935,9218],{"class":646},[637,11937,669],{"class":642},[637,11939,11941,11943,11945],{"class":11940,"line":912},[639,673],[637,11942,895],{"class":642},[637,11944,85],{"class":646},[637,11946,669],{"class":642},[637,11948,11949,11951,11953,11955,11957,11959,11962,11964],{"class":639,"line":2625},[637,11950,781],{"class":642},[637,11952,8049],{"class":646},[637,11954,1959],{"class":650},[637,11956,657],{"class":642},[637,11958,660],{"class":642},[637,11960,11961],{"class":663},"[10, 10]",[637,11963,660],{"class":642},[637,11965,787],{"class":642},[637,11967,11968,11970,11972],{"class":639,"line":2634},[637,11969,905],{"class":642},[637,11971,761],{"class":646},[637,11973,669],{"class":642},[637,11975,11976,11978,11980],{"class":639,"line":2654},[637,11977,732],{"class":642},[637,11979,750],{"class":646},[637,11981,669],{"class":642},[504,11983,922],{"id":921},[927,11985,11986,11994],{},[930,11987,11988],{},[933,11989,11990,11992],{},[936,11991,922],{},[936,11993,941],{},[946,11995,11996,12005,12016,12027,12038],{},[933,11997,11998,12000],{},[951,11999,5605],{},[951,12001,12002,12004],{},[1669,12003,4292],{}," Surface mesh from which to sample",[933,12006,12007,12010],{},[951,12008,12009],{},"count",[951,12011,12012,12015],{},[1669,12013,12014],{},"Number"," Number of samples",[933,12017,12018,12021],{},[951,12019,12020],{},"instanceMesh",[951,12022,12023,12026],{},[1669,12024,12025],{},"InstanceMesh"," InstanceMesh to scatter",[933,12028,12029,12032],{},[951,12030,12031],{},"weight",[951,12033,12034,12037],{},[1669,12035,12036],{},"String"," A vertex attribute to be used as a weight when sampling",[933,12039,12040,12043],{},[951,12041,12042],{},"transform",[951,12044,12045,12048],{},[1669,12046,12047],{},"Function"," A function that can be used as a custom sampling",[504,12050,12052],{"id":12051},"usesurfacesampler","useSurfaceSampler",[614,12054,12055,12056],{},"A hook to obtain the result of the ",[12057,12058,12059],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[626,12061,12064],{"className":628,"code":12062,"highlights":12063,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, useSurfaceSampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref, watch } from 'vue'\n\nconst torusRef = ref()\nconst instancesRef = ref()\n\nwatch(torusRef, (value) => {\n  useSurfaceSampler(value, 50, instancesRef.value, 'color')\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresMesh ref=\"torusRef\">\n      \u003CTresTorusGeometry />\n    \u003C/TresMesh>\n\n    \u003CTresInstancedMesh\n      ref=\"instancesRef\"\n      :args=\"[null!, null!, 1_000]\"\n    >\n      \u003CTresSphereGeometry :args=\"[0.1, 32, 32]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresInstancedMesh>\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,800],[618,12065,12066,12086,12110,12128,12151,12155,12168,12181,12185,12205,12239,12245,12253,12257,12265,12283,12301,12309,12313,12332,12340,12348,12352,12359,12373,12387,12392,12411,12419,12427,12431,12449,12457],{"__ignoreMap":576},[637,12067,12068,12070,12072,12074,12076,12078,12080,12082,12084],{"class":639,"line":577},[637,12069,643],{"class":642},[637,12071,647],{"class":646},[637,12073,651],{"class":650},[637,12075,654],{"class":650},[637,12077,657],{"class":642},[637,12079,660],{"class":642},[637,12081,664],{"class":663},[637,12083,660],{"class":642},[637,12085,669],{"class":642},[637,12087,12089,12091,12093,12095,12097,12100,12102,12104,12106,12108],{"class":12088,"line":578},[639,673],[637,12090,677],{"class":676},[637,12092,680],{"class":642},[637,12094,690],{"class":683},[637,12096,687],{"class":642},[637,12098,12099],{"class":683}," useSurfaceSampler",[637,12101,693],{"class":642},[637,12103,696],{"class":676},[637,12105,699],{"class":642},[637,12107,702],{"class":663},[637,12109,705],{"class":642},[637,12111,12112,12114,12116,12118,12120,12122,12124,12126],{"class":639,"line":708},[637,12113,677],{"class":676},[637,12115,680],{"class":642},[637,12117,715],{"class":683},[637,12119,693],{"class":642},[637,12121,696],{"class":676},[637,12123,699],{"class":642},[637,12125,724],{"class":663},[637,12127,705],{"class":642},[637,12129,12130,12132,12134,12136,12138,12141,12143,12145,12147,12149],{"class":639,"line":729},[637,12131,677],{"class":676},[637,12133,680],{"class":642},[637,12135,3872],{"class":683},[637,12137,687],{"class":642},[637,12139,12140],{"class":683}," watch",[637,12142,693],{"class":642},[637,12144,696],{"class":676},[637,12146,699],{"class":642},[637,12148,633],{"class":663},[637,12150,705],{"class":642},[637,12152,12153],{"class":639,"line":739},[637,12154,742],{"emptyLinePlaceholder":594},[637,12156,12157,12159,12162,12164,12166],{"class":639,"line":745},[637,12158,2415],{"class":650},[637,12160,12161],{"class":683}," torusRef ",[637,12163,657],{"class":642},[637,12165,3872],{"class":2434},[637,12167,6535],{"class":683},[637,12169,12170,12172,12175,12177,12179],{"class":639,"line":755},[637,12171,2415],{"class":650},[637,12173,12174],{"class":683}," instancesRef ",[637,12176,657],{"class":642},[637,12178,3872],{"class":2434},[637,12180,6535],{"class":683},[637,12182,12183],{"class":639,"line":778},[637,12184,742],{"emptyLinePlaceholder":594},[637,12186,12187,12190,12193,12195,12197,12199,12201,12203],{"class":639,"line":790},[637,12188,12189],{"class":2434},"watch",[637,12191,12192],{"class":683},"(torusRef",[637,12194,687],{"class":642},[637,12196,3074],{"class":642},[637,12198,3685],{"class":6838},[637,12200,3340],{"class":642},[637,12202,3677],{"class":650},[637,12204,1204],{"class":642},[637,12206,12208,12211,12213,12215,12217,12220,12222,12225,12227,12229,12231,12233,12235,12237],{"class":12207,"line":800},[639,673],[637,12209,12210],{"class":2434},"  useSurfaceSampler",[637,12212,2437],{"class":646},[637,12214,3685],{"class":683},[637,12216,687],{"class":642},[637,12218,12219],{"class":2501}," 50",[637,12221,687],{"class":642},[637,12223,12224],{"class":683}," instancesRef",[637,12226,1146],{"class":642},[637,12228,3685],{"class":683},[637,12230,687],{"class":642},[637,12232,699],{"class":642},[637,12234,7547],{"class":663},[637,12236,2440],{"class":642},[637,12238,2448],{"class":646},[637,12240,12241,12243],{"class":639,"line":805},[637,12242,2428],{"class":642},[637,12244,2448],{"class":683},[637,12246,12247,12249,12251],{"class":639,"line":827},[637,12248,732],{"class":642},[637,12250,647],{"class":646},[637,12252,669],{"class":642},[637,12254,12255],{"class":639,"line":631},[637,12256,742],{"emptyLinePlaceholder":594},[637,12258,12259,12261,12263],{"class":639,"line":850},[637,12260,643],{"class":642},[637,12262,750],{"class":646},[637,12264,669],{"class":642},[637,12266,12267,12269,12271,12273,12275,12277,12279,12281],{"class":639,"line":861},[637,12268,758],{"class":642},[637,12270,761],{"class":646},[637,12272,764],{"class":650},[637,12274,657],{"class":642},[637,12276,660],{"class":642},[637,12278,11791],{"class":663},[637,12280,660],{"class":642},[637,12282,669],{"class":642},[637,12284,12285,12287,12289,12291,12293,12295,12297,12299],{"class":639,"line":872},[637,12286,781],{"class":642},[637,12288,784],{"class":646},[637,12290,1485],{"class":650},[637,12292,657],{"class":642},[637,12294,660],{"class":642},[637,12296,11810],{"class":663},[637,12298,660],{"class":642},[637,12300,787],{"class":642},[637,12302,12303,12305,12307],{"class":639,"line":882},[637,12304,781],{"class":642},[637,12306,795],{"class":646},[637,12308,787],{"class":642},[637,12310,12311],{"class":639,"line":632},[637,12312,742],{"emptyLinePlaceholder":594},[637,12314,12315,12317,12319,12321,12323,12325,12328,12330],{"class":639,"line":902},[637,12316,781],{"class":642},[637,12318,856],{"class":646},[637,12320,3872],{"class":650},[637,12322,657],{"class":642},[637,12324,660],{"class":642},[637,12326,12327],{"class":663},"torusRef",[637,12329,660],{"class":642},[637,12331,669],{"class":642},[637,12333,12334,12336,12338],{"class":639,"line":912},[637,12335,853],{"class":642},[637,12337,11863],{"class":646},[637,12339,787],{"class":642},[637,12341,12342,12344,12346],{"class":639,"line":2625},[637,12343,895],{"class":642},[637,12345,856],{"class":646},[637,12347,669],{"class":642},[637,12349,12350],{"class":639,"line":2634},[637,12351,742],{"emptyLinePlaceholder":594},[637,12353,12354,12356],{"class":639,"line":2654},[637,12355,781],{"class":642},[637,12357,12358],{"class":646},"TresInstancedMesh\n",[637,12360,12361,12364,12366,12368,12371],{"class":639,"line":2663},[637,12362,12363],{"class":650},"      ref",[637,12365,657],{"class":642},[637,12367,660],{"class":642},[637,12369,12370],{"class":663},"instancesRef",[637,12372,3131],{"class":642},[637,12374,12375,12378,12380,12382,12385],{"class":639,"line":2672},[637,12376,12377],{"class":650},"      :args",[637,12379,657],{"class":642},[637,12381,660],{"class":642},[637,12383,12384],{"class":663},"[null!, null!, 1_000]",[637,12386,3131],{"class":642},[637,12388,12389],{"class":639,"line":2681},[637,12390,12391],{"class":642},"    >\n",[637,12393,12394,12396,12398,12400,12402,12404,12407,12409],{"class":639,"line":2703},[637,12395,853],{"class":642},[637,12397,3958],{"class":646},[637,12399,1959],{"class":650},[637,12401,657],{"class":642},[637,12403,660],{"class":642},[637,12405,12406],{"class":663},"[0.1, 32, 32]",[637,12408,660],{"class":642},[637,12410,787],{"class":642},[637,12412,12413,12415,12417],{"class":639,"line":2747},[637,12414,853],{"class":642},[637,12416,877],{"class":646},[637,12418,787],{"class":642},[637,12420,12421,12423,12425],{"class":639,"line":2756},[637,12422,895],{"class":642},[637,12424,9218],{"class":646},[637,12426,669],{"class":642},[637,12428,12429],{"class":639,"line":2765},[637,12430,742],{"emptyLinePlaceholder":594},[637,12432,12433,12435,12437,12439,12441,12443,12445,12447],{"class":639,"line":3922},[637,12434,781],{"class":642},[637,12436,8049],{"class":646},[637,12438,1959],{"class":650},[637,12440,657],{"class":642},[637,12442,660],{"class":642},[637,12444,11961],{"class":663},[637,12446,660],{"class":642},[637,12448,787],{"class":642},[637,12450,12451,12453,12455],{"class":639,"line":3953},[637,12452,905],{"class":642},[637,12454,761],{"class":646},[637,12456,669],{"class":642},[637,12458,12459,12461,12463],{"class":639,"line":3974},[637,12460,732],{"class":642},[637,12462,750],{"class":646},[637,12464,669],{"class":642},[1327,12466,12467],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":12469},[12470,12471,12472],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":12051,"depth":578,"text":12052},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":12473},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":12478,"title":89,"body":12479,"description":12786,"extension":591,"links":592,"meta":12787,"navigation":594,"path":90,"seo":12788,"stem":91,"__hash__":12789},"docs/2.api/1.abstractions/screen-sizer.md",{"type":501,"value":12480,"toc":12782},[12481,12486,12495,12498,12500,12772,12774,12780],[2295,12482,12483],{},[12484,12485],"abstractions-screen-sizer",{},[614,12487,1350,12488,12491,12492,12494],{},[618,12489,12490],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[618,12493,1874],{}," THREE world unit will be translated to 1 screen pixel.",[614,12496,12497],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[504,12499,15],{"id":624},[626,12501,12504],{"className":628,"code":12502,"highlights":12503,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, ScreenSizer } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#3f3f3f\">\n    \u003CTresPerspectiveCamera :position=\"[10, 10, 10]\" />\n    \u003COrbitControls />\n    \u003CScreenSizer>\n      \u003CTresMesh>\n        \u003CTresBoxGeometry :args=\"[100, 100, 100]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/ScreenSizer>\n    \u003CTresMesh :position-x=\"5\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800,861],[618,12505,12506,12526,12544,12568,12576,12580,12588,12607,12626,12634,12643,12651,12670,12678,12686,12695,12714,12722,12730,12738,12756,12764],{"__ignoreMap":576},[637,12507,12508,12510,12512,12514,12516,12518,12520,12522,12524],{"class":639,"line":577},[637,12509,643],{"class":642},[637,12511,647],{"class":646},[637,12513,651],{"class":650},[637,12515,654],{"class":650},[637,12517,657],{"class":642},[637,12519,660],{"class":642},[637,12521,664],{"class":663},[637,12523,660],{"class":642},[637,12525,669],{"class":642},[637,12527,12528,12530,12532,12534,12536,12538,12540,12542],{"class":639,"line":578},[637,12529,677],{"class":676},[637,12531,680],{"class":642},[637,12533,715],{"class":683},[637,12535,693],{"class":642},[637,12537,696],{"class":676},[637,12539,699],{"class":642},[637,12541,724],{"class":663},[637,12543,705],{"class":642},[637,12545,12547,12549,12551,12553,12555,12558,12560,12562,12564,12566],{"class":12546,"line":708},[639,673],[637,12548,677],{"class":676},[637,12550,680],{"class":642},[637,12552,690],{"class":683},[637,12554,687],{"class":642},[637,12556,12557],{"class":683}," ScreenSizer",[637,12559,693],{"class":642},[637,12561,696],{"class":676},[637,12563,699],{"class":642},[637,12565,702],{"class":663},[637,12567,705],{"class":642},[637,12569,12570,12572,12574],{"class":639,"line":729},[637,12571,732],{"class":642},[637,12573,647],{"class":646},[637,12575,669],{"class":642},[637,12577,12578],{"class":639,"line":739},[637,12579,742],{"emptyLinePlaceholder":594},[637,12581,12582,12584,12586],{"class":639,"line":745},[637,12583,643],{"class":642},[637,12585,750],{"class":646},[637,12587,669],{"class":642},[637,12589,12590,12592,12594,12596,12598,12600,12603,12605],{"class":639,"line":755},[637,12591,758],{"class":642},[637,12593,761],{"class":646},[637,12595,764],{"class":650},[637,12597,657],{"class":642},[637,12599,660],{"class":642},[637,12601,12602],{"class":663},"#3f3f3f",[637,12604,660],{"class":642},[637,12606,669],{"class":642},[637,12608,12609,12611,12613,12615,12617,12619,12622,12624],{"class":639,"line":778},[637,12610,781],{"class":642},[637,12612,784],{"class":646},[637,12614,1485],{"class":650},[637,12616,657],{"class":642},[637,12618,660],{"class":642},[637,12620,12621],{"class":663},"[10, 10, 10]",[637,12623,660],{"class":642},[637,12625,787],{"class":642},[637,12627,12628,12630,12632],{"class":639,"line":790},[637,12629,781],{"class":642},[637,12631,795],{"class":646},[637,12633,787],{"class":642},[637,12635,12637,12639,12641],{"class":12636,"line":800},[639,673],[637,12638,781],{"class":642},[637,12640,89],{"class":646},[637,12642,669],{"class":642},[637,12644,12645,12647,12649],{"class":639,"line":805},[637,12646,853],{"class":642},[637,12648,856],{"class":646},[637,12650,669],{"class":642},[637,12652,12653,12655,12657,12659,12661,12663,12666,12668],{"class":639,"line":827},[637,12654,864],{"class":642},[637,12656,867],{"class":646},[637,12658,1959],{"class":650},[637,12660,657],{"class":642},[637,12662,660],{"class":642},[637,12664,12665],{"class":663},"[100, 100, 100]",[637,12667,660],{"class":642},[637,12669,787],{"class":642},[637,12671,12672,12674,12676],{"class":639,"line":631},[637,12673,864],{"class":642},[637,12675,877],{"class":646},[637,12677,787],{"class":642},[637,12679,12680,12682,12684],{"class":639,"line":850},[637,12681,885],{"class":642},[637,12683,856],{"class":646},[637,12685,669],{"class":642},[637,12687,12689,12691,12693],{"class":12688,"line":861},[639,673],[637,12690,895],{"class":642},[637,12692,89],{"class":646},[637,12694,669],{"class":642},[637,12696,12697,12699,12701,12703,12705,12707,12710,12712],{"class":639,"line":872},[637,12698,781],{"class":642},[637,12700,856],{"class":646},[637,12702,11400],{"class":650},[637,12704,657],{"class":642},[637,12706,660],{"class":642},[637,12708,12709],{"class":663},"5",[637,12711,660],{"class":642},[637,12713,669],{"class":642},[637,12715,12716,12718,12720],{"class":639,"line":882},[637,12717,853],{"class":642},[637,12719,867],{"class":646},[637,12721,787],{"class":642},[637,12723,12724,12726,12728],{"class":639,"line":632},[637,12725,853],{"class":642},[637,12727,877],{"class":646},[637,12729,787],{"class":642},[637,12731,12732,12734,12736],{"class":639,"line":902},[637,12733,895],{"class":642},[637,12735,856],{"class":646},[637,12737,669],{"class":642},[637,12739,12740,12742,12744,12746,12748,12750,12752,12754],{"class":639,"line":912},[637,12741,781],{"class":642},[637,12743,8049],{"class":646},[637,12745,1959],{"class":650},[637,12747,657],{"class":642},[637,12749,660],{"class":642},[637,12751,11961],{"class":663},[637,12753,660],{"class":642},[637,12755,787],{"class":642},[637,12757,12758,12760,12762],{"class":639,"line":2625},[637,12759,905],{"class":642},[637,12761,761],{"class":646},[637,12763,669],{"class":642},[637,12765,12766,12768,12770],{"class":639,"line":2634},[637,12767,732],{"class":642},[637,12769,750],{"class":646},[637,12771,669],{"class":642},[504,12773,922],{"id":921},[614,12775,12776,12777,1146],{},"Inherits all props from ",[618,12778,12779],{},"THREE.Object3D",[1327,12781,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":12783},[12784,12785],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":89,"description":12786},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":12791,"title":93,"body":12792,"description":13162,"extension":591,"links":592,"meta":13163,"navigation":594,"path":94,"seo":13164,"stem":95,"__hash__":13165},"docs/2.api/1.abstractions/screen-space.md",{"type":501,"value":12793,"toc":13158},[12794,12799,12812,12834,12836,13062,13064,13156],[608,12795,12796],{},[12797,12798],"abstractions-screen-space",{},[614,12800,12801,12804,12805,12808,12809,1146],{},[618,12802,12803],{},"\u003CScreenSpace />"," wraps its children in a ",[618,12806,12807],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[618,12810,12811],{},":depth",[614,12813,12814,12815,1672,12817,1672,12819,1672,12821,12823,12824,12827,12828,7619,12831,1146],{},"Additionally, the ",[618,12816,955],{},[618,12818,978],{},[618,12820,997],{},[618,12822,1016],{}," props can be used to position them similarly to CSS ",[618,12825,12826],{},"position: absolute"," property when using a ",[618,12829,12830],{},"PerspectiveCamera",[618,12832,12833],{},"OrtographicCamera",[504,12835,15],{"id":624},[626,12837,12840],{"className":628,"code":12838,"highlights":12839,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, ScreenSpace } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CScreenSpace :depth=\"5\">\n      \u003CTresMesh>\n        \u003CTresTorusGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/ScreenSpace>\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,805,872],[618,12841,12842,12862,12886,12904,12912,12916,12924,12943,12951,12959,12963,12983,12991,12999,13007,13015,13024,13028,13046,13054],{"__ignoreMap":576},[637,12843,12844,12846,12848,12850,12852,12854,12856,12858,12860],{"class":639,"line":577},[637,12845,643],{"class":642},[637,12847,647],{"class":646},[637,12849,651],{"class":650},[637,12851,654],{"class":650},[637,12853,657],{"class":642},[637,12855,660],{"class":642},[637,12857,664],{"class":663},[637,12859,660],{"class":642},[637,12861,669],{"class":642},[637,12863,12865,12867,12869,12871,12873,12876,12878,12880,12882,12884],{"class":12864,"line":578},[639,673],[637,12866,677],{"class":676},[637,12868,680],{"class":642},[637,12870,690],{"class":683},[637,12872,687],{"class":642},[637,12874,12875],{"class":683}," ScreenSpace",[637,12877,693],{"class":642},[637,12879,696],{"class":676},[637,12881,699],{"class":642},[637,12883,702],{"class":663},[637,12885,705],{"class":642},[637,12887,12888,12890,12892,12894,12896,12898,12900,12902],{"class":639,"line":708},[637,12889,677],{"class":676},[637,12891,680],{"class":642},[637,12893,715],{"class":683},[637,12895,693],{"class":642},[637,12897,696],{"class":676},[637,12899,699],{"class":642},[637,12901,724],{"class":663},[637,12903,705],{"class":642},[637,12905,12906,12908,12910],{"class":639,"line":729},[637,12907,732],{"class":642},[637,12909,647],{"class":646},[637,12911,669],{"class":642},[637,12913,12914],{"class":639,"line":739},[637,12915,742],{"emptyLinePlaceholder":594},[637,12917,12918,12920,12922],{"class":639,"line":745},[637,12919,643],{"class":642},[637,12921,750],{"class":646},[637,12923,669],{"class":642},[637,12925,12926,12928,12930,12932,12934,12936,12939,12941],{"class":639,"line":755},[637,12927,758],{"class":642},[637,12929,761],{"class":646},[637,12931,764],{"class":650},[637,12933,657],{"class":642},[637,12935,660],{"class":642},[637,12937,12938],{"class":663},"#333",[637,12940,660],{"class":642},[637,12942,669],{"class":642},[637,12944,12945,12947,12949],{"class":639,"line":778},[637,12946,781],{"class":642},[637,12948,784],{"class":646},[637,12950,787],{"class":642},[637,12952,12953,12955,12957],{"class":639,"line":790},[637,12954,781],{"class":642},[637,12956,795],{"class":646},[637,12958,787],{"class":642},[637,12960,12961],{"class":639,"line":800},[637,12962,742],{"emptyLinePlaceholder":594},[637,12964,12966,12968,12970,12973,12975,12977,12979,12981],{"class":12965,"line":805},[639,673],[637,12967,781],{"class":642},[637,12969,93],{"class":646},[637,12971,12972],{"class":650}," :depth",[637,12974,657],{"class":642},[637,12976,660],{"class":642},[637,12978,12709],{"class":663},[637,12980,660],{"class":642},[637,12982,669],{"class":642},[637,12984,12985,12987,12989],{"class":639,"line":827},[637,12986,853],{"class":642},[637,12988,856],{"class":646},[637,12990,669],{"class":642},[637,12992,12993,12995,12997],{"class":639,"line":631},[637,12994,864],{"class":642},[637,12996,11863],{"class":646},[637,12998,787],{"class":642},[637,13000,13001,13003,13005],{"class":639,"line":850},[637,13002,864],{"class":642},[637,13004,877],{"class":646},[637,13006,787],{"class":642},[637,13008,13009,13011,13013],{"class":639,"line":861},[637,13010,885],{"class":642},[637,13012,856],{"class":646},[637,13014,669],{"class":642},[637,13016,13018,13020,13022],{"class":13017,"line":872},[639,673],[637,13019,895],{"class":642},[637,13021,93],{"class":646},[637,13023,669],{"class":642},[637,13025,13026],{"class":639,"line":882},[637,13027,742],{"emptyLinePlaceholder":594},[637,13029,13030,13032,13034,13036,13038,13040,13042,13044],{"class":639,"line":632},[637,13031,781],{"class":642},[637,13033,8049],{"class":646},[637,13035,1959],{"class":650},[637,13037,657],{"class":642},[637,13039,660],{"class":642},[637,13041,11961],{"class":663},[637,13043,660],{"class":642},[637,13045,787],{"class":642},[637,13047,13048,13050,13052],{"class":639,"line":902},[637,13049,905],{"class":642},[637,13051,761],{"class":646},[637,13053,669],{"class":642},[637,13055,13056,13058,13060],{"class":639,"line":912},[637,13057,732],{"class":642},[637,13059,750],{"class":646},[637,13061,669],{"class":642},[504,13063,922],{"id":921},[927,13065,13066,13076],{},[930,13067,13068],{},[933,13069,13070,13072,13074],{},[936,13071,938],{"align":997},[936,13073,941],{"align":997},[936,13075,944],{},[946,13077,13078,13092,13111,13125,13142],{},[933,13079,13080,13085,13088],{},[951,13081,13082],{"align":997},[618,13083,13084],{},"depth",[951,13086,13087],{"align":997},"Distance from the camera",[951,13089,13090],{},[618,13091,10194],{},[933,13093,13094,13098,13106],{},[951,13095,13096],{"align":997},[618,13097,955],{},[951,13099,13100,13101,13103,13104],{"align":997},"Similar to CSS ",[618,13102,955],{}," property. Cannot be used with ",[618,13105,978],{},[951,13107,13108,13110],{},[618,13109,1946],{}," (vertical center of the screen)",[933,13112,13113,13117,13123],{},[951,13114,13115],{"align":997},[618,13116,978],{},[951,13118,13100,13119,13103,13121],{"align":997},[618,13120,978],{},[618,13122,955],{},[951,13124],{},[933,13126,13127,13131,13137],{},[951,13128,13129],{"align":997},[618,13130,997],{},[951,13132,13100,13133,13103,13135],{"align":997},[618,13134,997],{},[618,13136,1016],{},[951,13138,13139,13141],{},[618,13140,1946],{}," (horizontal center of the screen)",[933,13143,13144,13148,13154],{},[951,13145,13146],{"align":997},[618,13147,1016],{},[951,13149,13100,13150,13103,13152],{"align":997},[618,13151,1016],{},[618,13153,997],{},[951,13155],{},[1327,13157,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":13159},[13160,13161],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Position objects in front of the camera with CSS-like positioning.",{},{"title":93,"description":13162},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",[13167,14391,14850,15151,15853,16209],{"id":13168,"title":103,"body":13169,"description":14387,"extension":591,"links":592,"meta":14388,"navigation":594,"path":104,"seo":14389,"stem":105,"__hash__":14390},"docs/2.api/2.controls/camera-controls.md",{"type":501,"value":13170,"toc":14378},[13171,13176,13187,13195,13197,13391,13396,13398,13401,13851,13854,13883,14008,14012,14141,14150,14153,14277,14281,14336,14375],[608,13172,13173],{},[13174,13175],"controls-camera-controls",{},[614,13177,13178,13183,13184,13186],{},[1140,13179,13182],{"href":13180,"rel":13181},"https://github.com/yomotsu/camera-controls",[1144],"CameraControls"," is a camera controller similar to ",[1140,13185,795],{"href":116}," yet supports smooth transitions and more features.",[614,13188,13189,13190,1146],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1140,13191,13194],{"href":13192,"rel":13193},"https://www.npmjs.com/package/camera-controls",[1144],"npm",[504,13196,15],{"id":624},[626,13198,13201],{"className":628,"code":13199,"highlights":13200,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { CameraControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCameraControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,13202,13203,13213,13232,13240,13248,13266,13285,13294,13312,13332,13340,13348,13367,13375,13383],{"__ignoreMap":576},[637,13204,13205,13207,13209,13211],{"class":639,"line":577},[637,13206,643],{"class":642},[637,13208,647],{"class":646},[637,13210,651],{"class":650},[637,13212,669],{"class":642},[637,13214,13215,13217,13219,13222,13224,13226,13228,13230],{"class":639,"line":578},[637,13216,677],{"class":676},[637,13218,680],{"class":642},[637,13220,13221],{"class":683}," CameraControls",[637,13223,693],{"class":642},[637,13225,696],{"class":676},[637,13227,9515],{"class":642},[637,13229,702],{"class":663},[637,13231,3131],{"class":642},[637,13233,13234,13236,13238],{"class":639,"line":708},[637,13235,732],{"class":642},[637,13237,647],{"class":646},[637,13239,669],{"class":642},[637,13241,13242,13244,13246],{"class":639,"line":729},[637,13243,643],{"class":642},[637,13245,750],{"class":646},[637,13247,669],{"class":642},[637,13249,13250,13252,13254,13256,13258,13260,13262,13264],{"class":639,"line":739},[637,13251,758],{"class":642},[637,13253,761],{"class":646},[637,13255,764],{"class":650},[637,13257,657],{"class":642},[637,13259,660],{"class":642},[637,13261,11791],{"class":663},[637,13263,660],{"class":642},[637,13265,669],{"class":642},[637,13267,13268,13270,13272,13274,13276,13278,13281,13283],{"class":639,"line":745},[637,13269,781],{"class":642},[637,13271,784],{"class":646},[637,13273,1485],{"class":650},[637,13275,657],{"class":642},[637,13277,660],{"class":642},[637,13279,13280],{"class":663},"[3, 3, 3]",[637,13282,660],{"class":642},[637,13284,787],{"class":642},[637,13286,13288,13290,13292],{"class":13287,"line":755},[639,673],[637,13289,781],{"class":642},[637,13291,13182],{"class":646},[637,13293,787],{"class":642},[637,13295,13296,13298,13300,13302,13304,13306,13308,13310],{"class":639,"line":778},[637,13297,781],{"class":642},[637,13299,217],{"class":646},[637,13301,813],{"class":650},[637,13303,657],{"class":642},[637,13305,660],{"class":642},[637,13307,820],{"class":663},[637,13309,660],{"class":642},[637,13311,669],{"class":642},[637,13313,13314,13316,13319,13321,13323,13325,13328,13330],{"class":639,"line":790},[637,13315,853],{"class":642},[637,13317,13318],{"class":646},"TresMeshToonMaterial",[637,13320,2689],{"class":650},[637,13322,657],{"class":642},[637,13324,660],{"class":642},[637,13326,13327],{"class":663},"orange",[637,13329,660],{"class":642},[637,13331,787],{"class":642},[637,13333,13334,13336,13338],{"class":639,"line":800},[637,13335,895],{"class":642},[637,13337,217],{"class":646},[637,13339,669],{"class":642},[637,13341,13342,13344,13346],{"class":639,"line":805},[637,13343,781],{"class":642},[637,13345,9681],{"class":646},[637,13347,787],{"class":642},[637,13349,13350,13352,13354,13356,13358,13360,13363,13365],{"class":639,"line":827},[637,13351,781],{"class":642},[637,13353,9700],{"class":646},[637,13355,1485],{"class":650},[637,13357,657],{"class":642},[637,13359,660],{"class":642},[637,13361,13362],{"class":663},"[0, 2, 4]",[637,13364,660],{"class":642},[637,13366,787],{"class":642},[637,13368,13369,13371,13373],{"class":639,"line":631},[637,13370,781],{"class":642},[637,13372,8049],{"class":646},[637,13374,787],{"class":642},[637,13376,13377,13379,13381],{"class":639,"line":850},[637,13378,905],{"class":642},[637,13380,761],{"class":646},[637,13382,669],{"class":642},[637,13384,13385,13387,13389],{"class":639,"line":861},[637,13386,732],{"class":642},[637,13388,750],{"class":646},[637,13390,669],{"class":642},[3199,13392,13393],{},[614,13394,13395],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[504,13397,922],{"id":921},[614,13399,13400],{},"Certainly! Here's the properties of the object in raw markdown table format:",[927,13402,13403,13413],{},[930,13404,13405],{},[933,13406,13407,13409,13411],{},[936,13408,938],{"align":997},[936,13410,941],{"align":997},[936,13412,944],{},[946,13414,13415,13429,13443,13457,13471,13485,13500,13515,13530,13545,13559,13575,13589,13603,13618,13633,13647,13662,13676,13690,13706,13721,13737,13751,13769,13784,13802,13816,13835],{},[933,13416,13417,13422,13425],{},[951,13418,13419],{"align":997},[1669,13420,13421],{},"makeDefault",[951,13423,13424],{"align":997},"Whether to make this the default controls.",[951,13426,13427],{},[618,13428,971],{},[933,13430,13431,13436,13439],{},[951,13432,13433],{"align":997},[1669,13434,13435],{},"camera",[951,13437,13438],{"align":997},"The camera to control.",[951,13440,13441],{},[618,13442,1179],{},[933,13444,13445,13450,13453],{},[951,13446,13447],{"align":997},[1669,13448,13449],{},"domElement",[951,13451,13452],{"align":997},"The DOM element to listen to.",[951,13454,13455],{},[618,13456,1179],{},[933,13458,13459,13464,13467],{},[951,13460,13461],{"align":997},[1669,13462,13463],{},"minPolarAngle",[951,13465,13466],{"align":997},"Minimum vertical angle in radians.",[951,13468,13469],{},[618,13470,965],{},[933,13472,13473,13478,13481],{},[951,13474,13475],{"align":997},[1669,13476,13477],{},"maxPolarAngle",[951,13479,13480],{"align":997},"Maximum vertical angle in radians.",[951,13482,13483],{},[618,13484,11664],{},[933,13486,13487,13492,13495],{},[951,13488,13489],{"align":997},[1669,13490,13491],{},"minAzimuthAngle",[951,13493,13494],{"align":997},"Minimum horizontal angle in radians.",[951,13496,13497],{},[618,13498,13499],{},"-Infinity",[933,13501,13502,13507,13510],{},[951,13503,13504],{"align":997},[1669,13505,13506],{},"maxAzimuthAngle",[951,13508,13509],{"align":997},"Maximum horizontal angle in radians.",[951,13511,13512],{},[618,13513,13514],{},"Infinity",[933,13516,13517,13522,13525],{},[951,13518,13519],{"align":997},[1669,13520,13521],{},"distance",[951,13523,13524],{"align":997},"Current distance.",[951,13526,13527],{},[618,13528,13529],{},"camera.position.z",[933,13531,13532,13537,13540],{},[951,13533,13534],{"align":997},[1669,13535,13536],{},"minDistance",[951,13538,13539],{"align":997},"Minimum distance for dolly. PerspectiveCamera only.",[951,13541,13542],{},[618,13543,13544],{},"Number.EPSILON",[933,13546,13547,13552,13555],{},[951,13548,13549],{"align":997},[1669,13550,13551],{},"maxDistance",[951,13553,13554],{"align":997},"Maximum distance for dolly. PerspectiveCamera only.",[951,13556,13557],{},[618,13558,13514],{},[933,13560,13561,13566,13571],{},[951,13562,13563],{"align":997},[1669,13564,13565],{},"infinityDolly",[951,13567,13568,13570],{"align":997},[618,13569,961],{}," to enable Infinity Dolly for wheel and pinch.",[951,13572,13573],{},[618,13574,971],{},[933,13576,13577,13582,13585],{},[951,13578,13579],{"align":997},[1669,13580,13581],{},"minZoom",[951,13583,13584],{"align":997},"Minimum camera zoom.",[951,13586,13587],{},[618,13588,1886],{},[933,13590,13591,13596,13599],{},[951,13592,13593],{"align":997},[1669,13594,13595],{},"maxZoom",[951,13597,13598],{"align":997},"Maximum camera zoom.",[951,13600,13601],{},[618,13602,13514],{},[933,13604,13605,13610,13613],{},[951,13606,13607],{"align":997},[1669,13608,13609],{},"smoothTime",[951,13611,13612],{"align":997},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[951,13614,13615],{},[618,13616,13617],{},"0.25",[933,13619,13620,13625,13628],{},[951,13621,13622],{"align":997},[1669,13623,13624],{},"draggingSmoothTime",[951,13626,13627],{"align":997},"The smoothTime while dragging.",[951,13629,13630],{},[618,13631,13632],{},"0.125",[933,13634,13635,13640,13643],{},[951,13636,13637],{"align":997},[1669,13638,13639],{},"maxSpeed",[951,13641,13642],{"align":997},"Max transition speed in units per second.",[951,13644,13645],{},[618,13646,13514],{},[933,13648,13649,13654,13657],{},[951,13650,13651],{"align":997},[1669,13652,13653],{},"azimuthRotateSpeed",[951,13655,13656],{"align":997},"Speed of azimuth (horizontal) rotation.",[951,13658,13659],{},[618,13660,13661],{},"1.0",[933,13663,13664,13669,13672],{},[951,13665,13666],{"align":997},[1669,13667,13668],{},"polarRotateSpeed",[951,13670,13671],{"align":997},"Speed of polar (vertical) rotation.",[951,13673,13674],{},[618,13675,13661],{},[933,13677,13678,13683,13686],{},[951,13679,13680],{"align":997},[1669,13681,13682],{},"dollySpeed",[951,13684,13685],{"align":997},"Speed of mouse-wheel dollying.",[951,13687,13688],{},[618,13689,13661],{},[933,13691,13692,13697,13702],{},[951,13693,13694],{"align":997},[1669,13695,13696],{},"dollyDragInverted",[951,13698,13699,13701],{"align":997},[618,13700,961],{}," to invert direction when dollying or zooming via drag.",[951,13703,13704],{},[618,13705,971],{},[933,13707,13708,13713,13716],{},[951,13709,13710],{"align":997},[1669,13711,13712],{},"truckSpeed",[951,13714,13715],{"align":997},"Speed of drag for truck and pedestal.",[951,13717,13718],{},[618,13719,13720],{},"2.0",[933,13722,13723,13728,13733],{},[951,13724,13725],{"align":997},[1669,13726,13727],{},"dollyToCursor",[951,13729,13730,13732],{"align":997},[618,13731,961],{}," to enable Dolly-in to the mouse cursor coords.",[951,13734,13735],{},[618,13736,971],{},[933,13738,13739,13744,13747],{},[951,13740,13741],{"align":997},[1669,13742,13743],{},"dragToOffset",[951,13745,13746],{"align":997},"Whether to drag to offset.",[951,13748,13749],{},[618,13750,971],{},[933,13752,13753,13758,13765],{},[951,13754,13755],{"align":997},[1669,13756,13757],{},"verticalDragToForward",[951,13759,13760,13761,13764],{"align":997},"The same as ",[618,13762,13763],{},".screenSpacePanning"," in Three.js's OrbitControls.",[951,13766,13767],{},[618,13768,971],{},[933,13770,13771,13776,13779],{},[951,13772,13773],{"align":997},[1669,13774,13775],{},"boundaryFriction",[951,13777,13778],{"align":997},"Friction ratio of the boundary.",[951,13780,13781],{},[618,13782,13783],{},"0.0",[933,13785,13786,13791,13798],{},[951,13787,13788],{"align":997},[1669,13789,13790],{},"restThreshold",[951,13792,13793,13794,13797],{"align":997},"Controls how soon the ",[618,13795,13796],{},"rest"," event fires as the camera slows.",[951,13799,13800],{},[618,13801,1886],{},[933,13803,13804,13809,13812],{},[951,13805,13806],{"align":997},[1669,13807,13808],{},"colliderMeshes",[951,13810,13811],{"align":997},"An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.",[951,13813,13814],{},[618,13815,3579],{},[933,13817,13818,13823,13826],{},[951,13819,13820],{"align":997},[1669,13821,13822],{},"mouseButtons",[951,13824,13825],{"align":997},"Configuration of actions on mouse input.",[951,13827,1138,13828,13834],{},[1140,13829,13831],{"href":13830},"#user-input-config",[618,13832,13833],{},"User input config"," for details",[933,13836,13837,13842,13845],{},[951,13838,13839],{"align":997},[1669,13840,13841],{},"touches",[951,13843,13844],{"align":997},"Configuration of actions on touch.",[951,13846,1138,13847,13834],{},[1140,13848,13849],{"href":13830},[618,13850,13833],{},[504,13852,13833],{"id":13853},"user-input-config",[614,13855,13856,13857,13859,13860,13862,13863,13871,13872,13874,13875,13878,13879,13882],{},"You can easily override the default user input config by defining ",[618,13858,13822],{}," and/or ",[618,13861,13841],{}," props that correspond to ",[1140,13864,13867,13870],{"href":13865,"rel":13866},"https://github.com/yomotsu/camera-controls?#user-input-config",[1144],[618,13868,13869],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[618,13873,13182],{}," class as ",[618,13876,13877],{},"BaseCameraControls"," which gives you access to the ",[618,13880,13881],{},"ACTION"," enum.",[626,13884,13886],{"className":628,"code":13885,"language":633,"meta":576,"style":576},"\u003Cscript lang=\"ts\" setup>\nimport { BaseCameraControls, CameraControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  ...\n  \u003CCameraControls\n    :mouse-buttons=\"{ left: BaseCameraControls.ACTION.DOLLY }\"\n    :touches=\"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }\"\n  />\n  ...\n\u003C/template>\n",[618,13887,13888,13908,13931,13939,13943,13951,13956,13963,13977,13991,13996,14000],{"__ignoreMap":576},[637,13889,13890,13892,13894,13896,13898,13900,13902,13904,13906],{"class":639,"line":577},[637,13891,643],{"class":642},[637,13893,647],{"class":646},[637,13895,654],{"class":650},[637,13897,657],{"class":642},[637,13899,660],{"class":642},[637,13901,664],{"class":663},[637,13903,660],{"class":642},[637,13905,651],{"class":650},[637,13907,669],{"class":642},[637,13909,13910,13912,13914,13917,13919,13921,13923,13925,13927,13929],{"class":639,"line":578},[637,13911,677],{"class":676},[637,13913,680],{"class":642},[637,13915,13916],{"class":683}," BaseCameraControls",[637,13918,687],{"class":642},[637,13920,13221],{"class":683},[637,13922,693],{"class":642},[637,13924,696],{"class":676},[637,13926,699],{"class":642},[637,13928,702],{"class":663},[637,13930,705],{"class":642},[637,13932,13933,13935,13937],{"class":639,"line":708},[637,13934,732],{"class":642},[637,13936,647],{"class":646},[637,13938,669],{"class":642},[637,13940,13941],{"class":639,"line":729},[637,13942,742],{"emptyLinePlaceholder":594},[637,13944,13945,13947,13949],{"class":639,"line":739},[637,13946,643],{"class":642},[637,13948,750],{"class":646},[637,13950,669],{"class":642},[637,13952,13953],{"class":639,"line":745},[637,13954,13955],{"class":683},"  ...\n",[637,13957,13958,13960],{"class":639,"line":755},[637,13959,758],{"class":642},[637,13961,13962],{"class":646},"CameraControls\n",[637,13964,13965,13968,13970,13972,13975],{"class":639,"line":778},[637,13966,13967],{"class":650},"    :mouse-buttons",[637,13969,657],{"class":642},[637,13971,660],{"class":642},[637,13973,13974],{"class":663},"{ left: BaseCameraControls.ACTION.DOLLY }",[637,13976,3131],{"class":642},[637,13978,13979,13982,13984,13986,13989],{"class":639,"line":790},[637,13980,13981],{"class":650},"    :touches",[637,13983,657],{"class":642},[637,13985,660],{"class":642},[637,13987,13988],{"class":663},"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }",[637,13990,3131],{"class":642},[637,13992,13993],{"class":639,"line":800},[637,13994,13995],{"class":642},"  />\n",[637,13997,13998],{"class":639,"line":805},[637,13999,13955],{"class":683},[637,14001,14002,14004,14006],{"class":639,"line":827},[637,14003,732],{"class":642},[637,14005,750],{"class":646},[637,14007,669],{"class":642},[4051,14009,14011],{"id":14010},"mouse-buttons","Mouse buttons",[927,14013,14014,14026],{},[930,14015,14016],{},[933,14017,14018,14021,14024],{},[936,14019,14020],{},"Button to assign",[936,14022,14023],{},"Options",[936,14025,944],{},[946,14027,14028,14060,14085,14115],{},[933,14029,14030,14035,14056],{},[951,14031,14032],{},[618,14033,14034],{},"mouseButtons.left",[951,14036,14037,14040,14041,14040,14044,14040,14047,14040,14050,14040,14053],{},[618,14038,14039],{},"ROTATE"," | ",[618,14042,14043],{},"TRUCK",[618,14045,14046],{},"OFFSET",[618,14048,14049],{},"DOLLY",[618,14051,14052],{},"ZOOM",[618,14054,14055],{},"NONE",[951,14057,14058],{},[618,14059,14039],{},[933,14061,14062,14067,14081],{},[951,14063,14064],{},[618,14065,14066],{},"mouseButtons.right",[951,14068,14069,14040,14071,14040,14073,14040,14075,14040,14077,14040,14079],{},[618,14070,14039],{},[618,14072,14043],{},[618,14074,14046],{},[618,14076,14049],{},[618,14078,14052],{},[618,14080,14055],{},[951,14082,14083],{},[618,14084,14043],{},[933,14086,14087,14093,14107],{},[951,14088,14089,14092],{},[618,14090,14091],{},"mouseButtons.wheel"," ¹",[951,14094,14095,14040,14097,14040,14099,14040,14101,14040,14103,14040,14105],{},[618,14096,14039],{},[618,14098,14043],{},[618,14100,14046],{},[618,14102,14049],{},[618,14104,14052],{},[618,14106,14055],{},[951,14108,14109,14111,14112,14114],{},[618,14110,14049],{}," for Perspective camera, ",[618,14113,14052],{}," for Orthographic camera.",[933,14116,14117,14123,14137],{},[951,14118,14119,14122],{},[618,14120,14121],{},"mouseButtons.middle"," ²",[951,14124,14125,14040,14127,14040,14129,14040,14131,14040,14133,14040,14135],{},[618,14126,14039],{},[618,14128,14043],{},[618,14130,14046],{},[618,14132,14049],{},[618,14134,14052],{},[618,14136,14055],{},[951,14138,14139],{},[618,14140,14049],{},[14142,14143,14144,14147],"ol",{},[2216,14145,14146],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[2216,14148,14149],{},"Mouse wheel \"button\" click event.",[4051,14151,14152],{"id":13841},"Touches",[927,14154,14155,14166],{},[930,14156,14157],{},[933,14158,14159,14162,14164],{},[936,14160,14161],{},"Fingers to assign",[936,14163,14023],{},[936,14165,944],{},[946,14167,14168,14196,14244],{},[933,14169,14170,14175,14192],{},[951,14171,14172],{},[618,14173,14174],{},"touches.one",[951,14176,14177,14040,14180,14040,14183,14040,14186,14040,14188,14040,14190],{},[618,14178,14179],{},"TOUCH_ROTATE",[618,14181,14182],{},"TOUCH_TRUCK",[618,14184,14185],{},"TOUCH_OFFSET",[618,14187,14049],{},[618,14189,14052],{},[618,14191,14055],{},[951,14193,14194],{},[618,14195,14179],{},[933,14197,14198,14203,14237],{},[951,14199,14200],{},[618,14201,14202],{},"touches.two",[951,14204,14205,14040,14208,14040,14211,14040,14214,14040,14217,14040,14220,14040,14223,14040,14226,14040,14229,14040,14231,14040,14233,14040,14235],{},[618,14206,14207],{},"TOUCH_DOLLY_TRUCK",[618,14209,14210],{},"TOUCH_DOLLY_OFFSET",[618,14212,14213],{},"TOUCH_DOLLY_ROTATE",[618,14215,14216],{},"TOUCH_ZOOM_TRUCK",[618,14218,14219],{},"TOUCH_ZOOM_OFFSET",[618,14221,14222],{},"TOUCH_ZOOM_ROTATE",[618,14224,14225],{},"TOUCH_DOLLY",[618,14227,14228],{},"TOUCH_ZOOM",[618,14230,14179],{},[618,14232,14182],{},[618,14234,14185],{},[618,14236,14055],{},[951,14238,14239,14111,14241,14243],{},[618,14240,14207],{},[618,14242,14216],{}," for Othographic camera.",[933,14245,14246,14251,14273],{},[951,14247,14248],{},[618,14249,14250],{},"touches.three",[951,14252,14253,14040,14255,14040,14257,14040,14259,14040,14261,14040,14263,14040,14265,14040,14267,14040,14269,14040,14271],{},[618,14254,14207],{},[618,14256,14210],{},[618,14258,14213],{},[618,14260,14216],{},[618,14262,14219],{},[618,14264,14222],{},[618,14266,14179],{},[618,14268,14182],{},[618,14270,14185],{},[618,14272,14055],{},[951,14274,14275],{},[618,14276,14182],{},[504,14278,14280],{"id":14279},"events","Events",[626,14282,14284],{"className":628,"code":14283,"language":633,"meta":576,"style":576},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[618,14285,14286],{"__ignoreMap":576},[637,14287,14288,14290,14292,14294,14297,14299,14301,14304,14306,14308,14311,14313,14315,14318,14320,14322,14325,14327,14329,14332,14334],{"class":639,"line":577},[637,14289,643],{"class":642},[637,14291,13182],{"class":646},[637,14293,4254],{"class":642},[637,14295,14296],{"class":650},"change",[637,14298,657],{"class":642},[637,14300,660],{"class":642},[637,14302,14303],{"class":683},"onChange",[637,14305,660],{"class":642},[637,14307,4254],{"class":642},[637,14309,14310],{"class":650},"start",[637,14312,657],{"class":642},[637,14314,660],{"class":642},[637,14316,14317],{"class":683},"onStart",[637,14319,660],{"class":642},[637,14321,4254],{"class":642},[637,14323,14324],{"class":650},"end",[637,14326,657],{"class":642},[637,14328,660],{"class":642},[637,14330,14331],{"class":683},"onEnd",[637,14333,660],{"class":642},[637,14335,787],{"class":642},[927,14337,14338,14346],{},[930,14339,14340],{},[933,14341,14342,14344],{},[936,14343,5759],{"align":997},[936,14345,941],{"align":997},[946,14347,14348,14357,14366],{},[933,14349,14350,14354],{},[951,14351,14352],{"align":997},[1669,14353,14310],{},[951,14355,14356],{"align":997},"Dispatched when the control starts to change.",[933,14358,14359,14363],{},[951,14360,14361],{"align":997},[1669,14362,14296],{},[951,14364,14365],{"align":997},"Dispatched when the control changes.",[933,14367,14368,14372],{},[951,14369,14370],{"align":997},[1669,14371,14324],{},[951,14373,14374],{"align":997},"Dispatched when the control ends to change.",[1327,14376,14377],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .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":576,"searchDepth":577,"depth":578,"links":14379},[14380,14381,14382,14386],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":13853,"depth":578,"text":13833,"children":14383},[14384,14385],{"id":14010,"depth":708,"text":14011},{"id":13841,"depth":708,"text":14152},{"id":14279,"depth":578,"text":14280},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":103,"description":14387},"2hfwAcOw9kCB60pKAgItRmaKk8A71rNBCTtreEGn7EI",{"id":14392,"title":107,"body":14393,"description":14846,"extension":591,"links":592,"meta":14847,"navigation":594,"path":108,"seo":14848,"stem":109,"__hash__":14849},"docs/2.api/2.controls/keyboard-controls.md",{"type":501,"value":14394,"toc":14841},[14395,14400,14406,14491,14507,14509,14664,14668,14670,14749,14751,14802,14838],[608,14396,14397],{},[14398,14399],"controls-keyboard-controls",{},[614,14401,14402,14405],{},[618,14403,14404],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[927,14407,14408,14417],{},[930,14409,14410],{},[933,14411,14412,14415],{},[936,14413,14414],{"align":997},"Keyboard",[936,14416,6406],{"align":997},[946,14418,14419,14432,14445,14458,14471,14481],{},[933,14420,14421,14429],{},[951,14422,14423,3336,14426],{"align":997},[618,14424,14425],{},"W",[618,14427,14428],{},"↑",[951,14430,14431],{"align":997},"Move forward",[933,14433,14434,14442],{},[951,14435,14436,3336,14439],{"align":997},[618,14437,14438],{},"S",[618,14440,14441],{},"↓",[951,14443,14444],{"align":997},"Move backward",[933,14446,14447,14455],{},[951,14448,14449,3336,14452],{"align":997},[618,14450,14451],{},"A",[618,14453,14454],{},"←",[951,14456,14457],{"align":997},"Move left",[933,14459,14460,14468],{},[951,14461,14462,3336,14465],{"align":997},[618,14463,14464],{},"D",[618,14466,14467],{},"→",[951,14469,14470],{"align":997},"Move right",[933,14472,14473,14478],{},[951,14474,14475],{"align":997},[618,14476,14477],{},"E",[951,14479,14480],{"align":997},"Move up",[933,14482,14483,14488],{},[951,14484,14485],{"align":997},[618,14486,14487],{},"Q",[951,14489,14490],{"align":997},"Move down",[2005,14492,14493],{},[614,14494,14495,14498,14499,14502,14503,1146],{},[618,14496,14497],{},"KeyboardControls"," uses ",[618,14500,14501],{},"PointerLockControls"," under the hood. You can use ",[1140,14504,14506],{"href":14505},"pointer-lock-controls#props","PointerLockControls props and events",[504,14508,15],{"id":624},[626,14510,14513],{"className":628,"code":14511,"highlights":14512,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { KeyboardControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CKeyboardControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,14514,14515,14535,14553,14577,14585,14589,14597,14605,14613,14631,14640,14648,14656],{"__ignoreMap":576},[637,14516,14517,14519,14521,14523,14525,14527,14529,14531,14533],{"class":639,"line":577},[637,14518,643],{"class":642},[637,14520,647],{"class":646},[637,14522,651],{"class":650},[637,14524,654],{"class":650},[637,14526,657],{"class":642},[637,14528,660],{"class":642},[637,14530,664],{"class":663},[637,14532,660],{"class":642},[637,14534,669],{"class":642},[637,14536,14537,14539,14541,14543,14545,14547,14549,14551],{"class":639,"line":578},[637,14538,677],{"class":676},[637,14540,680],{"class":642},[637,14542,715],{"class":683},[637,14544,693],{"class":642},[637,14546,696],{"class":676},[637,14548,699],{"class":642},[637,14550,724],{"class":663},[637,14552,705],{"class":642},[637,14554,14556,14558,14560,14563,14565,14567,14569,14571,14573,14575],{"class":14555,"line":708},[639,673],[637,14557,677],{"class":676},[637,14559,680],{"class":642},[637,14561,14562],{"class":683}," KeyboardControls",[637,14564,687],{"class":642},[637,14566,1397],{"class":683},[637,14568,693],{"class":642},[637,14570,696],{"class":676},[637,14572,699],{"class":642},[637,14574,702],{"class":663},[637,14576,705],{"class":642},[637,14578,14579,14581,14583],{"class":639,"line":729},[637,14580,732],{"class":642},[637,14582,647],{"class":646},[637,14584,669],{"class":642},[637,14586,14587],{"class":639,"line":739},[637,14588,742],{"emptyLinePlaceholder":594},[637,14590,14591,14593,14595],{"class":639,"line":745},[637,14592,643],{"class":642},[637,14594,750],{"class":646},[637,14596,669],{"class":642},[637,14598,14599,14601,14603],{"class":639,"line":755},[637,14600,758],{"class":642},[637,14602,761],{"class":646},[637,14604,669],{"class":642},[637,14606,14607,14609,14611],{"class":639,"line":778},[637,14608,781],{"class":642},[637,14610,784],{"class":646},[637,14612,787],{"class":642},[637,14614,14615,14617,14619,14621,14623,14625,14627,14629],{"class":639,"line":790},[637,14616,781],{"class":642},[637,14618,217],{"class":646},[637,14620,1939],{"class":650},[637,14622,657],{"class":642},[637,14624,660],{"class":642},[637,14626,1946],{"class":663},[637,14628,660],{"class":642},[637,14630,787],{"class":642},[637,14632,14634,14636,14638],{"class":14633,"line":800},[639,673],[637,14635,781],{"class":642},[637,14637,14497],{"class":646},[637,14639,787],{"class":642},[637,14641,14642,14644,14646],{"class":639,"line":805},[637,14643,781],{"class":642},[637,14645,8049],{"class":646},[637,14647,787],{"class":642},[637,14649,14650,14652,14654],{"class":639,"line":827},[637,14651,905],{"class":642},[637,14653,761],{"class":646},[637,14655,669],{"class":642},[637,14657,14658,14660,14662],{"class":639,"line":631},[637,14659,732],{"class":642},[637,14661,750],{"class":646},[637,14663,669],{"class":642},[3199,14665,14666],{},[614,14667,13395],{},[504,14669,922],{"id":921},[927,14671,14672,14682],{},[930,14673,14674],{},[933,14675,14676,14678,14680],{},[936,14677,938],{"align":997},[936,14679,941],{"align":997},[936,14681,944],{},[946,14683,14684,14696,14711,14723,14735],{},[933,14685,14686,14691,14694],{},[951,14687,14688],{"align":997},[1669,14689,14690],{},"moveSpeed",[951,14692,14693],{"align":997},"Speed movement.",[951,14695,5729],{},[933,14697,14698,14702,14707],{},[951,14699,14700],{"align":997},[1669,14701,13421],{},[951,14703,958,14704,14706],{"align":997},[618,14705,961],{},", the controls will be set as the default controls for the scene.",[951,14708,14709],{},[618,14710,961],{},[933,14712,14713,14717,14719],{},[951,14714,14715],{"align":997},[1669,14716,13435],{},[951,14718,13438],{"align":997},[951,14720,14721],{},[618,14722,1179],{},[933,14724,14725,14729,14731],{},[951,14726,14727],{"align":997},[1669,14728,13449],{},[951,14730,13452],{"align":997},[951,14732,14733],{},[618,14734,1179],{},[933,14736,14737,14742,14745],{},[951,14738,14739],{"align":997},[1669,14740,14741],{},"selector",[951,14743,14744],{"align":997},"Accept an id element as string. If set, the new element will be used as the trigger",[951,14746,14747],{},[618,14748,1179],{},[504,14750,14280],{"id":14279},[626,14752,14754],{"className":628,"code":14753,"language":633,"meta":576,"style":576},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[618,14755,14756],{"__ignoreMap":576},[637,14757,14758,14760,14762,14764,14766,14768,14770,14772,14774,14776,14779,14781,14783,14785,14788,14790,14792,14795,14798,14800],{"class":639,"line":577},[637,14759,643],{"class":642},[637,14761,14497],{"class":646},[637,14763,4254],{"class":642},[637,14765,14296],{"class":650},[637,14767,657],{"class":642},[637,14769,660],{"class":642},[637,14771,14303],{"class":683},[637,14773,660],{"class":642},[637,14775,4254],{"class":642},[637,14777,14778],{"class":650},"is-lock",[637,14780,657],{"class":642},[637,14782,660],{"class":642},[637,14784,2437],{"class":642},[637,14786,14787],{"class":6838},"state",[637,14789,3340],{"class":642},[637,14791,3677],{"class":650},[637,14793,14794],{"class":2434}," isActive",[637,14796,14797],{"class":683},"(state)",[637,14799,660],{"class":642},[637,14801,787],{"class":683},[927,14803,14804,14812],{},[930,14805,14806],{},[933,14807,14808,14810],{},[936,14809,5759],{"align":997},[936,14811,941],{"align":997},[946,14813,14814,14830],{},[933,14815,14816,14821],{},[951,14817,14818],{"align":997},[1669,14819,14820],{},"isLock",[951,14822,14823,14824,14826,14827,14829],{"align":997},"Return ",[618,14825,961],{}," if \"lock\", ",[618,14828,971],{}," if \"unlock\" events are triggered.",[933,14831,14832,14836],{},[951,14833,14834],{"align":997},[1669,14835,14296],{},[951,14837,14365],{"align":997},[1327,14839,14840],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":14842},[14843,14844,14845],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",{},{"title":107,"description":14846},"AiV8qE1JDgLILe5KGuJAaEvSAzQi0kQx9m-mrBt-6b0",{"id":14851,"title":111,"body":14852,"description":15147,"extension":591,"links":592,"meta":15148,"navigation":594,"path":112,"seo":15149,"stem":113,"__hash__":15150},"docs/2.api/2.controls/map-controls.md",{"type":501,"value":14853,"toc":15143},[14854,14859,14867,14869,15059,15064,15066,15136,15141],[608,14855,14856],{},[14857,14858],"controls-map-controls",{},[614,14860,14861,14866],{},[1140,14862,14865],{"href":14863,"rel":14864},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1144],"MapControls"," similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.",[504,14868,15],{"id":624},[626,14870,14873],{"className":628,"code":14871,"highlights":14872,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { MapControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CMapControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,14874,14875,14885,14904,14912,14920,14938,14956,14965,14983,15001,15009,15017,15035,15043,15051],{"__ignoreMap":576},[637,14876,14877,14879,14881,14883],{"class":639,"line":577},[637,14878,643],{"class":642},[637,14880,647],{"class":646},[637,14882,651],{"class":650},[637,14884,669],{"class":642},[637,14886,14887,14889,14891,14894,14896,14898,14900,14902],{"class":639,"line":578},[637,14888,677],{"class":676},[637,14890,680],{"class":642},[637,14892,14893],{"class":683}," MapControls",[637,14895,693],{"class":642},[637,14897,696],{"class":676},[637,14899,9515],{"class":642},[637,14901,702],{"class":663},[637,14903,3131],{"class":642},[637,14905,14906,14908,14910],{"class":639,"line":708},[637,14907,732],{"class":642},[637,14909,647],{"class":646},[637,14911,669],{"class":642},[637,14913,14914,14916,14918],{"class":639,"line":729},[637,14915,643],{"class":642},[637,14917,750],{"class":646},[637,14919,669],{"class":642},[637,14921,14922,14924,14926,14928,14930,14932,14934,14936],{"class":639,"line":739},[637,14923,758],{"class":642},[637,14925,761],{"class":646},[637,14927,764],{"class":650},[637,14929,657],{"class":642},[637,14931,660],{"class":642},[637,14933,11791],{"class":663},[637,14935,660],{"class":642},[637,14937,669],{"class":642},[637,14939,14940,14942,14944,14946,14948,14950,14952,14954],{"class":639,"line":745},[637,14941,781],{"class":642},[637,14943,784],{"class":646},[637,14945,1485],{"class":650},[637,14947,657],{"class":642},[637,14949,660],{"class":642},[637,14951,13280],{"class":663},[637,14953,660],{"class":642},[637,14955,787],{"class":642},[637,14957,14959,14961,14963],{"class":14958,"line":755},[639,673],[637,14960,781],{"class":642},[637,14962,14865],{"class":646},[637,14964,787],{"class":642},[637,14966,14967,14969,14971,14973,14975,14977,14979,14981],{"class":639,"line":778},[637,14968,781],{"class":642},[637,14970,217],{"class":646},[637,14972,813],{"class":650},[637,14974,657],{"class":642},[637,14976,660],{"class":642},[637,14978,820],{"class":663},[637,14980,660],{"class":642},[637,14982,669],{"class":642},[637,14984,14985,14987,14989,14991,14993,14995,14997,14999],{"class":639,"line":790},[637,14986,853],{"class":642},[637,14988,13318],{"class":646},[637,14990,2689],{"class":650},[637,14992,657],{"class":642},[637,14994,660],{"class":642},[637,14996,13327],{"class":663},[637,14998,660],{"class":642},[637,15000,787],{"class":642},[637,15002,15003,15005,15007],{"class":639,"line":800},[637,15004,895],{"class":642},[637,15006,217],{"class":646},[637,15008,669],{"class":642},[637,15010,15011,15013,15015],{"class":639,"line":805},[637,15012,781],{"class":642},[637,15014,9681],{"class":646},[637,15016,787],{"class":642},[637,15018,15019,15021,15023,15025,15027,15029,15031,15033],{"class":639,"line":827},[637,15020,781],{"class":642},[637,15022,9700],{"class":646},[637,15024,1485],{"class":650},[637,15026,657],{"class":642},[637,15028,660],{"class":642},[637,15030,13362],{"class":663},[637,15032,660],{"class":642},[637,15034,787],{"class":642},[637,15036,15037,15039,15041],{"class":639,"line":631},[637,15038,781],{"class":642},[637,15040,8049],{"class":646},[637,15042,787],{"class":642},[637,15044,15045,15047,15049],{"class":639,"line":850},[637,15046,905],{"class":642},[637,15048,761],{"class":646},[637,15050,669],{"class":642},[637,15052,15053,15055,15057],{"class":639,"line":861},[637,15054,732],{"class":642},[637,15056,750],{"class":646},[637,15058,669],{"class":642},[3199,15060,15061],{},[614,15062,15063],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[504,15065,922],{"id":921},[927,15067,15068,15078],{},[930,15069,15070],{},[933,15071,15072,15074,15076],{},[936,15073,938],{"align":997},[936,15075,941],{"align":997},[936,15077,944],{},[946,15079,15080,15094,15106,15119],{},[933,15081,15082,15086,15090],{},[951,15083,15084],{"align":997},[1669,15085,13421],{},[951,15087,958,15088,14706],{"align":997},[618,15089,961],{},[951,15091,15092],{},[618,15093,971],{},[933,15095,15096,15100,15102],{},[951,15097,15098],{"align":997},[1669,15099,13435],{},[951,15101,13438],{"align":997},[951,15103,15104],{},[618,15105,1179],{},[933,15107,15108,15112,15115],{},[951,15109,15110],{"align":997},[1669,15111,13449],{},[951,15113,15114],{"align":997},"The dom element to listen to.",[951,15116,15117],{},[618,15118,1179],{},[933,15120,15121,15126,15132],{},[951,15122,15123],{"align":997},[1669,15124,15125],{},"screenSpacePanning",[951,15127,15128,15129,15131],{"align":997},"Defines how the camera's position is translated when panning. If ",[618,15130,961],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[951,15133,15134],{},[618,15135,971],{},[2005,15137,15138],{},[614,15139,15140],{},"All the props of the orbit controls component apply here too.",[1327,15142,14377],{},{"title":576,"searchDepth":577,"depth":578,"links":15144},[15145,15146],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"similar to OrbitControls but for map views",{},{"title":111,"description":15147},"kfzpqZnb7itAV_eVKFqO6wVSm6EFixFWw9fpJO8O0ac",{"id":15152,"title":115,"body":15153,"description":15849,"extension":591,"links":592,"meta":15850,"navigation":594,"path":116,"seo":15851,"stem":117,"__hash__":15852},"docs/2.api/2.controls/orbit-controls.md",{"type":501,"value":15154,"toc":15844},[15155,15160,15167,15169,15358,15362,15364,15755,15757,15806,15842],[608,15156,15157],{},[15158,15159],"controls-orbit-controls",{},[614,15161,15162,15166],{},[1140,15163,795],{"href":15164,"rel":15165},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1144]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[504,15168,15],{"id":624},[626,15170,15173],{"className":628,"code":15171,"highlights":15172,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { OrbitControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003COrbitControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,15174,15175,15185,15203,15211,15219,15237,15255,15264,15282,15300,15308,15316,15334,15342,15350],{"__ignoreMap":576},[637,15176,15177,15179,15181,15183],{"class":639,"line":577},[637,15178,643],{"class":642},[637,15180,647],{"class":646},[637,15182,651],{"class":650},[637,15184,669],{"class":642},[637,15186,15187,15189,15191,15193,15195,15197,15199,15201],{"class":639,"line":578},[637,15188,677],{"class":676},[637,15190,680],{"class":642},[637,15192,690],{"class":683},[637,15194,693],{"class":642},[637,15196,696],{"class":676},[637,15198,9515],{"class":642},[637,15200,702],{"class":663},[637,15202,3131],{"class":642},[637,15204,15205,15207,15209],{"class":639,"line":708},[637,15206,732],{"class":642},[637,15208,647],{"class":646},[637,15210,669],{"class":642},[637,15212,15213,15215,15217],{"class":639,"line":729},[637,15214,643],{"class":642},[637,15216,750],{"class":646},[637,15218,669],{"class":642},[637,15220,15221,15223,15225,15227,15229,15231,15233,15235],{"class":639,"line":739},[637,15222,758],{"class":642},[637,15224,761],{"class":646},[637,15226,764],{"class":650},[637,15228,657],{"class":642},[637,15230,660],{"class":642},[637,15232,11791],{"class":663},[637,15234,660],{"class":642},[637,15236,669],{"class":642},[637,15238,15239,15241,15243,15245,15247,15249,15251,15253],{"class":639,"line":745},[637,15240,781],{"class":642},[637,15242,784],{"class":646},[637,15244,1485],{"class":650},[637,15246,657],{"class":642},[637,15248,660],{"class":642},[637,15250,13280],{"class":663},[637,15252,660],{"class":642},[637,15254,787],{"class":642},[637,15256,15258,15260,15262],{"class":15257,"line":755},[639,673],[637,15259,781],{"class":642},[637,15261,795],{"class":646},[637,15263,787],{"class":642},[637,15265,15266,15268,15270,15272,15274,15276,15278,15280],{"class":639,"line":778},[637,15267,781],{"class":642},[637,15269,217],{"class":646},[637,15271,813],{"class":650},[637,15273,657],{"class":642},[637,15275,660],{"class":642},[637,15277,820],{"class":663},[637,15279,660],{"class":642},[637,15281,669],{"class":642},[637,15283,15284,15286,15288,15290,15292,15294,15296,15298],{"class":639,"line":790},[637,15285,853],{"class":642},[637,15287,13318],{"class":646},[637,15289,2689],{"class":650},[637,15291,657],{"class":642},[637,15293,660],{"class":642},[637,15295,13327],{"class":663},[637,15297,660],{"class":642},[637,15299,787],{"class":642},[637,15301,15302,15304,15306],{"class":639,"line":800},[637,15303,895],{"class":642},[637,15305,217],{"class":646},[637,15307,669],{"class":642},[637,15309,15310,15312,15314],{"class":639,"line":805},[637,15311,781],{"class":642},[637,15313,9681],{"class":646},[637,15315,787],{"class":642},[637,15317,15318,15320,15322,15324,15326,15328,15330,15332],{"class":639,"line":827},[637,15319,781],{"class":642},[637,15321,9700],{"class":646},[637,15323,1485],{"class":650},[637,15325,657],{"class":642},[637,15327,660],{"class":642},[637,15329,13362],{"class":663},[637,15331,660],{"class":642},[637,15333,787],{"class":642},[637,15335,15336,15338,15340],{"class":639,"line":631},[637,15337,781],{"class":642},[637,15339,8049],{"class":646},[637,15341,787],{"class":642},[637,15343,15344,15346,15348],{"class":639,"line":850},[637,15345,905],{"class":642},[637,15347,761],{"class":646},[637,15349,669],{"class":642},[637,15351,15352,15354,15356],{"class":639,"line":861},[637,15353,732],{"class":642},[637,15355,750],{"class":646},[637,15357,669],{"class":642},[3199,15359,15360],{},[614,15361,13395],{},[504,15363,922],{"id":921},[927,15365,15366,15376],{},[930,15367,15368],{},[933,15369,15370,15372,15374],{},[936,15371,938],{"align":997},[936,15373,941],{"align":997},[936,15375,944],{},[946,15377,15378,15392,15404,15416,15430,15446,15464,15478,15496,15510,15525,15540,15561,15579,15592,15605,15618,15631,15644,15657,15671,15685,15699,15713,15727,15741],{},[933,15379,15380,15384,15388],{},[951,15381,15382],{"align":997},[1669,15383,13421],{},[951,15385,958,15386,14706],{"align":997},[618,15387,961],{},[951,15389,15390],{},[618,15391,971],{},[933,15393,15394,15398,15400],{},[951,15395,15396],{"align":997},[1669,15397,13435],{},[951,15399,13438],{"align":997},[951,15401,15402],{},[618,15403,1179],{},[933,15405,15406,15410,15412],{},[951,15407,15408],{"align":997},[1669,15409,13449],{},[951,15411,15114],{"align":997},[951,15413,15414],{},[618,15415,1179],{},[933,15417,15418,15423,15426],{},[951,15419,15420],{"align":997},[1669,15421,15422],{},"target",[951,15424,15425],{"align":997},"The target to orbit around.",[951,15427,15428],{},[618,15429,1179],{},[933,15431,15432,15437,15442],{},[951,15433,15434],{"align":997},[1669,15435,15436],{},"enableDamping",[951,15438,958,15439,15441],{"align":997},[618,15440,961],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[951,15443,15444],{},[618,15445,961],{},[933,15447,15448,15453,15460],{},[951,15449,15450],{"align":997},[1669,15451,15452],{},"dampingFactor",[951,15454,15455,15456,15459],{"align":997},"The damping inertia used if ",[618,15457,15458],{},".enableDamping"," is set to true.",[951,15461,15462],{},[618,15463,11643],{},[933,15465,15466,15471,15474],{},[951,15467,15468],{"align":997},[1669,15469,15470],{},"autoRotate",[951,15472,15473],{"align":997},"Set to true to automatically rotate around the target.",[951,15475,15476],{},[618,15477,971],{},[933,15479,15480,15485,15492],{},[951,15481,15482],{"align":997},[1669,15483,15484],{},"autoRotateSpeed",[951,15486,15487,15488,15491],{"align":997},"How fast to rotate around the target if ",[618,15489,15490],{},".autoRotate"," is true.",[951,15493,15494],{},[618,15495,820],{},[933,15497,15498,15503,15506],{},[951,15499,15500],{"align":997},[1669,15501,15502],{},"enablePan",[951,15504,15505],{"align":997},"Whether to enable panning.",[951,15507,15508],{},[618,15509,961],{},[933,15511,15512,15517,15520],{},[951,15513,15514],{"align":997},[1669,15515,15516],{},"keyPanSpeed",[951,15518,15519],{"align":997},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[951,15521,15522],{},[618,15523,15524],{},"7.0",[933,15526,15527,15532,15535],{},[951,15528,15529],{"align":997},[1669,15530,15531],{},"keys",[951,15533,15534],{"align":997},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[951,15536,15537],{},[618,15538,15539],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[933,15541,15542,15546,15557],{},[951,15543,15544],{"align":997},[1669,15545,13506],{},[951,15547,15548,15549,15552,15553,15556],{"align":997},"How far you can orbit horizontally, upper limit. If set, the interval ",[637,15550,15551],{}," min, max"," must be a sub-interval of ",[637,15554,15555],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[951,15558,15559],{},[618,15560,13514],{},[933,15562,15563,15567,15575],{},[951,15564,15565],{"align":997},[1669,15566,13491],{},[951,15568,15569,15570,15552,15572,15574],{"align":997},"How far you can orbit horizontally, lower limit. If set, the interval ",[637,15571,15551],{},[637,15573,15555],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[951,15576,15577],{},[618,15578,13499],{},[933,15580,15581,15585,15588],{},[951,15582,15583],{"align":997},[1669,15584,13477],{},[951,15586,15587],{"align":997},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[951,15589,15590],{},[618,15591,11664],{},[933,15593,15594,15598,15601],{},[951,15595,15596],{"align":997},[1669,15597,13463],{},[951,15599,15600],{"align":997},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[951,15602,15603],{},[618,15604,965],{},[933,15606,15607,15611,15614],{},[951,15608,15609],{"align":997},[1669,15610,13536],{},[951,15612,15613],{"align":997},"The minimum distance of the camera to the target. Default is 0.",[951,15615,15616],{},[618,15617,965],{},[933,15619,15620,15624,15627],{},[951,15621,15622],{"align":997},[1669,15623,13551],{},[951,15625,15626],{"align":997},"The maximum distance of the camera to the target. Default is Infinity.",[951,15628,15629],{},[618,15630,13514],{},[933,15632,15633,15637,15640],{},[951,15634,15635],{"align":997},[1669,15636,13581],{},[951,15638,15639],{"align":997},"The minimum field of view angle, in radians. Default is 0.",[951,15641,15642],{},[618,15643,965],{},[933,15645,15646,15650,15653],{},[951,15647,15648],{"align":997},[1669,15649,13595],{},[951,15651,15652],{"align":997},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[951,15654,15655],{},[618,15656,13514],{},[933,15658,15659,15663,15666],{},[951,15660,15661],{"align":997},[1669,15662,13841],{},[951,15664,15665],{"align":997},"This object contains references to the touch actions used by the controls.",[951,15667,15668],{},[618,15669,15670],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[933,15672,15673,15677,15680],{},[951,15674,15675],{"align":997},[1669,15676,13822],{},[951,15678,15679],{"align":997},"This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.",[951,15681,15682],{},[618,15683,15684],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[933,15686,15687,15692,15695],{},[951,15688,15689],{"align":997},[1669,15690,15691],{},"enableZoom",[951,15693,15694],{"align":997},"Whether to enable zooming.",[951,15696,15697],{},[618,15698,961],{},[933,15700,15701,15706,15709],{},[951,15702,15703],{"align":997},[1669,15704,15705],{},"zoomSpeed",[951,15707,15708],{"align":997},"How fast to zoom in and out. Default is 1.",[951,15710,15711],{},[618,15712,1874],{},[933,15714,15715,15720,15723],{},[951,15716,15717],{"align":997},[1669,15718,15719],{},"enableRotate",[951,15721,15722],{"align":997},"Whether to enable rotating.",[951,15724,15725],{},[618,15726,961],{},[933,15728,15729,15734,15737],{},[951,15730,15731],{"align":997},[1669,15732,15733],{},"rotateSpeed",[951,15735,15736],{"align":997},"How fast to rotate around the target. Default is 1.",[951,15738,15739],{},[618,15740,1874],{},[933,15742,15743,15747,15751],{},[951,15744,15745],{"align":997},[1669,15746,15125],{},[951,15748,15128,15749,15131],{"align":997},[618,15750,961],{},[951,15752,15753],{},[618,15754,961],{},[504,15756,14280],{"id":14279},[626,15758,15760],{"className":628,"code":15759,"language":633,"meta":576,"style":576},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[618,15761,15762],{"__ignoreMap":576},[637,15763,15764,15766,15768,15770,15772,15774,15776,15778,15780,15782,15784,15786,15788,15790,15792,15794,15796,15798,15800,15802,15804],{"class":639,"line":577},[637,15765,643],{"class":642},[637,15767,795],{"class":646},[637,15769,4254],{"class":642},[637,15771,14296],{"class":650},[637,15773,657],{"class":642},[637,15775,660],{"class":642},[637,15777,14303],{"class":683},[637,15779,660],{"class":642},[637,15781,4254],{"class":642},[637,15783,14310],{"class":650},[637,15785,657],{"class":642},[637,15787,660],{"class":642},[637,15789,14317],{"class":683},[637,15791,660],{"class":642},[637,15793,4254],{"class":642},[637,15795,14324],{"class":650},[637,15797,657],{"class":642},[637,15799,660],{"class":642},[637,15801,14331],{"class":683},[637,15803,660],{"class":642},[637,15805,787],{"class":642},[927,15807,15808,15816],{},[930,15809,15810],{},[933,15811,15812,15814],{},[936,15813,5759],{"align":997},[936,15815,941],{"align":997},[946,15817,15818,15826,15834],{},[933,15819,15820,15824],{},[951,15821,15822],{"align":997},[1669,15823,14310],{},[951,15825,14356],{"align":997},[933,15827,15828,15832],{},[951,15829,15830],{"align":997},[1669,15831,14296],{},[951,15833,14365],{"align":997},[933,15835,15836,15840],{},[951,15837,15838],{"align":997},[1669,15839,14324],{},[951,15841,14374],{"align":997},[1327,15843,14377],{},{"title":576,"searchDepth":577,"depth":578,"links":15845},[15846,15847,15848],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},"Allows you to orbit around the scene",{},{"title":115,"description":15849},"XWrClwQmT_iqfXhEFazDO2swYkiJCagLQjTOAb5xuyM",{"id":15854,"title":119,"body":15855,"description":16205,"extension":591,"links":592,"meta":16206,"navigation":594,"path":120,"seo":16207,"stem":121,"__hash__":16208},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":501,"value":15856,"toc":16200},[15857,15862,15869,15888,15890,16045,16049,16051,16116,16118,16165,16198],[608,15858,15859],{},[15860,15861],"controls-pointer-lock-controls",{},[614,15863,15864,15868],{},[1140,15865,14501],{"href":15866,"rel":15867},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1144]," is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.",[3199,15870,15871],{},[614,15872,15873,15874,15887],{},"This control uses the ",[637,15875,15877,15880],{"style":15876},"background-color:#222;padding:0.25rem;border-radius:4px;",[1140,15878],{"href":116,"style":15879},"color:#f7f7f7;text-decoration:none",[1140,15881,15884],{"href":15882,"rel":15883},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1144],[618,15885,15886],{},"Pointer Lock API",", the same rules are applied, for example, you need to interact with the browser to \"lock\" or start the event.\nIn addition, you need to wait 1 second between canceling and re-starting the event",[504,15889,15],{"id":624},[626,15891,15894],{"className":628,"code":15892,"highlights":15893,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointerLockControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CPointerLockControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,15895,15896,15916,15934,15958,15966,15970,15978,15986,15994,16012,16021,16029,16037],{"__ignoreMap":576},[637,15897,15898,15900,15902,15904,15906,15908,15910,15912,15914],{"class":639,"line":577},[637,15899,643],{"class":642},[637,15901,647],{"class":646},[637,15903,651],{"class":650},[637,15905,654],{"class":650},[637,15907,657],{"class":642},[637,15909,660],{"class":642},[637,15911,664],{"class":663},[637,15913,660],{"class":642},[637,15915,669],{"class":642},[637,15917,15918,15920,15922,15924,15926,15928,15930,15932],{"class":639,"line":578},[637,15919,677],{"class":676},[637,15921,680],{"class":642},[637,15923,715],{"class":683},[637,15925,693],{"class":642},[637,15927,696],{"class":676},[637,15929,699],{"class":642},[637,15931,724],{"class":663},[637,15933,705],{"class":642},[637,15935,15937,15939,15941,15944,15946,15948,15950,15952,15954,15956],{"class":15936,"line":708},[639,673],[637,15938,677],{"class":676},[637,15940,680],{"class":642},[637,15942,15943],{"class":683}," PointerLockControls",[637,15945,687],{"class":642},[637,15947,1397],{"class":683},[637,15949,693],{"class":642},[637,15951,696],{"class":676},[637,15953,699],{"class":642},[637,15955,702],{"class":663},[637,15957,705],{"class":642},[637,15959,15960,15962,15964],{"class":639,"line":729},[637,15961,732],{"class":642},[637,15963,647],{"class":646},[637,15965,669],{"class":642},[637,15967,15968],{"class":639,"line":739},[637,15969,742],{"emptyLinePlaceholder":594},[637,15971,15972,15974,15976],{"class":639,"line":745},[637,15973,643],{"class":642},[637,15975,750],{"class":646},[637,15977,669],{"class":642},[637,15979,15980,15982,15984],{"class":639,"line":755},[637,15981,758],{"class":642},[637,15983,761],{"class":646},[637,15985,669],{"class":642},[637,15987,15988,15990,15992],{"class":639,"line":778},[637,15989,781],{"class":642},[637,15991,784],{"class":646},[637,15993,787],{"class":642},[637,15995,15996,15998,16000,16002,16004,16006,16008,16010],{"class":639,"line":790},[637,15997,781],{"class":642},[637,15999,217],{"class":646},[637,16001,1939],{"class":650},[637,16003,657],{"class":642},[637,16005,660],{"class":642},[637,16007,1946],{"class":663},[637,16009,660],{"class":642},[637,16011,787],{"class":642},[637,16013,16015,16017,16019],{"class":16014,"line":800},[639,673],[637,16016,781],{"class":642},[637,16018,14501],{"class":646},[637,16020,787],{"class":642},[637,16022,16023,16025,16027],{"class":639,"line":805},[637,16024,781],{"class":642},[637,16026,8049],{"class":646},[637,16028,787],{"class":642},[637,16030,16031,16033,16035],{"class":639,"line":827},[637,16032,905],{"class":642},[637,16034,761],{"class":646},[637,16036,669],{"class":642},[637,16038,16039,16041,16043],{"class":639,"line":631},[637,16040,732],{"class":642},[637,16042,750],{"class":646},[637,16044,669],{"class":642},[3199,16046,16047],{},[614,16048,13395],{},[504,16050,922],{"id":921},[927,16052,16053,16063],{},[930,16054,16055],{},[933,16056,16057,16059,16061],{},[936,16058,938],{"align":997},[936,16060,941],{"align":997},[936,16062,944],{},[946,16064,16065,16079,16091,16103],{},[933,16066,16067,16071,16075],{},[951,16068,16069],{"align":997},[1669,16070,13421],{},[951,16072,958,16073,14706],{"align":997},[618,16074,961],{},[951,16076,16077],{},[618,16078,971],{},[933,16080,16081,16085,16087],{},[951,16082,16083],{"align":997},[1669,16084,13435],{},[951,16086,13438],{"align":997},[951,16088,16089],{},[618,16090,1179],{},[933,16092,16093,16097,16099],{},[951,16094,16095],{"align":997},[1669,16096,13449],{},[951,16098,15114],{"align":997},[951,16100,16101],{},[618,16102,1179],{},[933,16104,16105,16109,16112],{},[951,16106,16107],{"align":997},[1669,16108,14741],{},[951,16110,16111],{"align":997},"Accept an id element as string, if it is set, the new element will be used as the trigger",[951,16113,16114],{},[618,16115,1179],{},[504,16117,14280],{"id":14279},[626,16119,16121],{"className":628,"code":16120,"language":633,"meta":576,"style":576},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[618,16122,16123],{"__ignoreMap":576},[637,16124,16125,16127,16129,16131,16133,16135,16137,16139,16141,16143,16145,16147,16149,16151,16153,16155,16157,16159,16161,16163],{"class":639,"line":577},[637,16126,643],{"class":642},[637,16128,14501],{"class":646},[637,16130,4254],{"class":642},[637,16132,14296],{"class":650},[637,16134,657],{"class":642},[637,16136,660],{"class":642},[637,16138,14303],{"class":683},[637,16140,660],{"class":642},[637,16142,4254],{"class":642},[637,16144,14778],{"class":650},[637,16146,657],{"class":642},[637,16148,660],{"class":642},[637,16150,2437],{"class":642},[637,16152,14787],{"class":6838},[637,16154,3340],{"class":642},[637,16156,3677],{"class":650},[637,16158,14794],{"class":2434},[637,16160,14797],{"class":683},[637,16162,660],{"class":642},[637,16164,787],{"class":683},[927,16166,16167,16175],{},[930,16168,16169],{},[933,16170,16171,16173],{},[936,16172,5759],{"align":997},[936,16174,941],{"align":997},[946,16176,16177,16190],{},[933,16178,16179,16183],{},[951,16180,16181],{"align":997},[1669,16182,14820],{},[951,16184,14823,16185,14826,16187,16189],{"align":997},[618,16186,961],{},[618,16188,971],{}," if \"unlock\" events are trigger.",[933,16191,16192,16196],{},[951,16193,16194],{"align":997},[1669,16195,14296],{},[951,16197,14365],{"align":997},[1327,16199,14840],{},{"title":576,"searchDepth":577,"depth":578,"links":16201},[16202,16203,16204],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":119,"description":16205},"vV10imj42ZYLgsDF4-C_pkzy24eb_ucQLr8NOacrAsg",{"id":16210,"title":123,"body":16211,"description":16908,"extension":591,"links":592,"meta":16909,"navigation":594,"path":124,"seo":16910,"stem":125,"__hash__":16911},"docs/2.api/2.controls/transform-controls.md",{"type":501,"value":16212,"toc":16898},[16213,16220,16225,16227,16238,16434,16452,16456,16459,16463,16468,16471,16508,16512,16517,16520,16555,16558,16563,16566,16601,16603,16829,16831,16892,16895],[614,16214,2776,16215,16219],{},[1140,16216,123],{"href":16217,"rel":16218},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1144]," are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender",[608,16221,16222],{},[16223,16224],"controls-transform-controls",{},[504,16226,15],{"id":624},[614,16228,16229,16230,16233,16234,16237],{},"To use the Transform Controls, simply add the ",[618,16231,16232],{},"TransformControls"," component to your scene. You can pass the ",[618,16235,16236],{},"templateRef","of the instance you want to control as a prop.",[626,16239,16242],{"className":628,"code":16240,"highlights":16241,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nconst boxRef = shallowRef()\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003COrbitControls make-default />\n    \u003CTransformControls :object=\"boxRef\" />\n    \u003CTresMesh ref=\"boxRef\" :position=\"[0, 4, 0]\" cast-shadow>\n      \u003CTresBoxGeometry :args=\"[1.5, 1.5, 1.5]\" />\n      \u003CTresMeshToonMaterial color=\"#4F4F4F\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[755,778],[618,16243,16244,16254,16267,16275,16283,16291,16310,16321,16341,16373,16392,16410,16418,16426],{"__ignoreMap":576},[637,16245,16246,16248,16250,16252],{"class":639,"line":577},[637,16247,643],{"class":642},[637,16249,647],{"class":646},[637,16251,651],{"class":650},[637,16253,669],{"class":642},[637,16255,16256,16258,16261,16263,16265],{"class":639,"line":578},[637,16257,2415],{"class":650},[637,16259,16260],{"class":683}," boxRef ",[637,16262,657],{"class":642},[637,16264,3498],{"class":2434},[637,16266,6535],{"class":683},[637,16268,16269,16271,16273],{"class":639,"line":708},[637,16270,732],{"class":642},[637,16272,647],{"class":646},[637,16274,669],{"class":642},[637,16276,16277,16279,16281],{"class":639,"line":729},[637,16278,643],{"class":642},[637,16280,750],{"class":646},[637,16282,669],{"class":642},[637,16284,16285,16287,16289],{"class":639,"line":739},[637,16286,758],{"class":642},[637,16288,761],{"class":646},[637,16290,669],{"class":642},[637,16292,16293,16295,16297,16299,16301,16303,16306,16308],{"class":639,"line":745},[637,16294,781],{"class":642},[637,16296,784],{"class":646},[637,16298,1959],{"class":650},[637,16300,657],{"class":642},[637,16302,660],{"class":642},[637,16304,16305],{"class":663},"[45, 1, 0.1, 1000]",[637,16307,660],{"class":642},[637,16309,787],{"class":642},[637,16311,16313,16315,16317,16319],{"class":16312,"line":755},[639,673],[637,16314,781],{"class":642},[637,16316,795],{"class":646},[637,16318,1851],{"class":650},[637,16320,787],{"class":642},[637,16322,16324,16326,16328,16330,16332,16334,16337,16339],{"class":16323,"line":778},[639,673],[637,16325,781],{"class":642},[637,16327,16232],{"class":646},[637,16329,4448],{"class":650},[637,16331,657],{"class":642},[637,16333,660],{"class":642},[637,16335,16336],{"class":663},"boxRef",[637,16338,660],{"class":642},[637,16340,787],{"class":642},[637,16342,16343,16345,16347,16349,16351,16353,16355,16357,16359,16361,16363,16366,16368,16371],{"class":639,"line":790},[637,16344,781],{"class":642},[637,16346,856],{"class":646},[637,16348,3872],{"class":650},[637,16350,657],{"class":642},[637,16352,660],{"class":642},[637,16354,16336],{"class":663},[637,16356,660],{"class":642},[637,16358,1485],{"class":650},[637,16360,657],{"class":642},[637,16362,660],{"class":642},[637,16364,16365],{"class":663},"[0, 4, 0]",[637,16367,660],{"class":642},[637,16369,16370],{"class":650}," cast-shadow",[637,16372,669],{"class":642},[637,16374,16375,16377,16379,16381,16383,16385,16388,16390],{"class":639,"line":800},[637,16376,853],{"class":642},[637,16378,867],{"class":646},[637,16380,1959],{"class":650},[637,16382,657],{"class":642},[637,16384,660],{"class":642},[637,16386,16387],{"class":663},"[1.5, 1.5, 1.5]",[637,16389,660],{"class":642},[637,16391,787],{"class":642},[637,16393,16394,16396,16398,16400,16402,16404,16406,16408],{"class":639,"line":805},[637,16395,853],{"class":642},[637,16397,13318],{"class":646},[637,16399,2689],{"class":650},[637,16401,657],{"class":642},[637,16403,660],{"class":642},[637,16405,7927],{"class":663},[637,16407,660],{"class":642},[637,16409,787],{"class":642},[637,16411,16412,16414,16416],{"class":639,"line":827},[637,16413,895],{"class":642},[637,16415,856],{"class":646},[637,16417,669],{"class":642},[637,16419,16420,16422,16424],{"class":639,"line":631},[637,16421,905],{"class":642},[637,16423,761],{"class":646},[637,16425,669],{"class":642},[637,16427,16428,16430,16432],{"class":639,"line":850},[637,16429,732],{"class":642},[637,16431,750],{"class":646},[637,16433,669],{"class":642},[3199,16435,16436],{},[614,16437,16438,16439,16443,16444,16446,16447,16449,16450,1146],{},"If you are using other controls ",[637,16440,16441],{"style":15876},[1140,16442,795],{"href":116,"style":15879}," they will interfere with each other when dragging. To avoid this, you can set the ",[618,16445,13421],{}," prop to ",[618,16448,961],{}," on the ",[1669,16451,795],{},[504,16453,16455],{"id":16454},"modes","Modes",[614,16457,16458],{},"The Transform Controls can be used in three different modes:",[4051,16460,16462],{"id":16461},"translate","Translate",[614,16464,16465],{},[9460,16466],{"alt":16462,"src":16467},"/cientos/transform-controls-translate.png",[614,16469,16470],{},"The default mode allows you to move the object around the scene.",[626,16472,16474],{"className":628,"code":16473,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[618,16475,16476],{"__ignoreMap":576},[637,16477,16478,16480,16482,16484,16486,16488,16490,16492,16494,16497,16499,16501,16504,16506],{"class":639,"line":577},[637,16479,643],{"class":642},[637,16481,16232],{"class":646},[637,16483,6843],{"class":650},[637,16485,657],{"class":642},[637,16487,660],{"class":642},[637,16489,16461],{"class":663},[637,16491,660],{"class":642},[637,16493,3029],{"class":642},[637,16495,16496],{"class":650},"object",[637,16498,657],{"class":642},[637,16500,660],{"class":642},[637,16502,16503],{"class":683},"sphereRef",[637,16505,660],{"class":642},[637,16507,787],{"class":642},[4051,16509,16511],{"id":16510},"rotate","Rotate",[614,16513,16514],{},[9460,16515],{"alt":16511,"src":16516},"/cientos/transform-controls-rotate.png",[614,16518,16519],{},"The rotate mode allows you to rotate the object around the scene.",[626,16521,16523],{"className":628,"code":16522,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[618,16524,16525],{"__ignoreMap":576},[637,16526,16527,16529,16531,16533,16535,16537,16539,16541,16543,16545,16547,16549,16551,16553],{"class":639,"line":577},[637,16528,643],{"class":642},[637,16530,16232],{"class":646},[637,16532,6843],{"class":650},[637,16534,657],{"class":642},[637,16536,660],{"class":642},[637,16538,16510],{"class":663},[637,16540,660],{"class":642},[637,16542,3029],{"class":642},[637,16544,16496],{"class":650},[637,16546,657],{"class":642},[637,16548,660],{"class":642},[637,16550,16336],{"class":683},[637,16552,660],{"class":642},[637,16554,787],{"class":642},[4051,16556,16557],{"id":5630},"Scale",[614,16559,16560],{},[9460,16561],{"alt":16557,"src":16562},"/cientos/transform-controls-scale.png",[614,16564,16565],{},"The scale mode allows you to scale the object around the scene.",[626,16567,16569],{"className":628,"code":16568,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[618,16570,16571],{"__ignoreMap":576},[637,16572,16573,16575,16577,16579,16581,16583,16585,16587,16589,16591,16593,16595,16597,16599],{"class":639,"line":577},[637,16574,643],{"class":642},[637,16576,16232],{"class":646},[637,16578,6843],{"class":650},[637,16580,657],{"class":642},[637,16582,660],{"class":642},[637,16584,5630],{"class":663},[637,16586,660],{"class":642},[637,16588,3029],{"class":642},[637,16590,16496],{"class":650},[637,16592,657],{"class":642},[637,16594,660],{"class":642},[637,16596,16503],{"class":683},[637,16598,660],{"class":642},[637,16600,787],{"class":642},[504,16602,922],{"id":921},[927,16604,16605,16615],{},[930,16606,16607],{},[933,16608,16609,16611,16613],{},[936,16610,938],{"align":997},[936,16612,941],{"align":997},[936,16614,944],{},[946,16616,16617,16635,16654,16670,16705,16725,16739,16753,16767,16781,16797,16813],{},[933,16618,16619,16623,16631],{},[951,16620,16621],{"align":997},[1669,16622,16496],{},[951,16624,16625,16626,16630],{"align":997},"The instance ",[1140,16627,7622],{"href":16628,"rel":16629},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1144]," to control.",[951,16632,16633],{},[618,16634,3656],{},[933,16636,16637,16641,16650],{},[951,16638,16639],{"align":997},[1669,16640,6864],{},[951,16642,16643,16644,1672,16646,5611,16648,1146],{"align":997},"The mode of the controls. Can be ",[618,16645,16461],{},[618,16647,16510],{},[618,16649,5630],{},[951,16651,16652],{},[618,16653,16461],{},[933,16655,16656,16661,16666],{},[951,16657,16658],{"align":997},[1669,16659,16660],{},"enabled",[951,16662,958,16663,16665],{"align":997},[618,16664,961],{},", the controls will be enabled.",[951,16667,16668],{},[618,16669,961],{},[933,16671,16672,16677,16701],{},[951,16673,16674],{"align":997},[1669,16675,16676],{},"axis",[951,16678,16679,16680,1672,16683,1672,16686,1672,16689,1672,16692,1672,16695,1672,16698,1146],{"align":997},"The axis to use for the controls. Can be ",[618,16681,16682],{},"X",[618,16684,16685],{},"Y",[618,16687,16688],{},"Z",[618,16690,16691],{},"XY",[618,16693,16694],{},"YZ",[618,16696,16697],{},"XZ",[618,16699,16700],{},"XYZ",[951,16702,16703],{},[618,16704,16700],{},[933,16706,16707,16712,16721],{},[951,16708,16709],{"align":997},[1669,16710,16711],{},"space",[951,16713,16714,16715,5611,16718,1146],{"align":997},"The space to use for the controls. Can be ",[618,16716,16717],{},"local",[618,16719,16720],{},"world",[951,16722,16723],{},[618,16724,16717],{},[933,16726,16727,16732,16735],{},[951,16728,16729],{"align":997},[1669,16730,16731],{},"size",[951,16733,16734],{"align":997},"The size of the controls.",[951,16736,16737],{},[618,16738,1874],{},[933,16740,16741,16746,16749],{},[951,16742,16743],{"align":997},[1669,16744,16745],{},"translationSnap",[951,16747,16748],{"align":997},"The distance to snap to when translating. (World units)",[951,16750,16751],{},[618,16752,3656],{},[933,16754,16755,16760,16763],{},[951,16756,16757],{"align":997},[1669,16758,16759],{},"rotationSnap",[951,16761,16762],{"align":997},"The angle to snap to when rotating. (Radians)",[951,16764,16765],{},[618,16766,3656],{},[933,16768,16769,16774,16777],{},[951,16770,16771],{"align":997},[1669,16772,16773],{},"scaleSnap",[951,16775,16776],{"align":997},"The scale to snap to when scaling.",[951,16778,16779],{},[618,16780,3656],{},[933,16782,16783,16788,16793],{},[951,16784,16785],{"align":997},[1669,16786,16787],{},"showX",[951,16789,958,16790,16792],{"align":997},[618,16791,961],{},", the X-axis helper will be shown.",[951,16794,16795],{},[618,16796,961],{},[933,16798,16799,16804,16809],{},[951,16800,16801],{"align":997},[1669,16802,16803],{},"showY",[951,16805,958,16806,16808],{"align":997},[618,16807,961],{},", the Y-axis helper will be shown.",[951,16810,16811],{},[618,16812,961],{},[933,16814,16815,16820,16825],{},[951,16816,16817],{"align":997},[1669,16818,16819],{},"showZ",[951,16821,958,16822,16824],{"align":997},[618,16823,961],{},", the Z-axis helper will be shown.",[951,16826,16827],{},[618,16828,961],{},[504,16830,14280],{"id":14279},[927,16832,16833,16841],{},[930,16834,16835],{},[933,16836,16837,16839],{},[936,16838,5759],{"align":997},[936,16840,941],{"align":997},[946,16842,16843,16853,16862,16872,16882],{},[933,16844,16845,16850],{},[951,16846,16847],{"align":997},[1669,16848,16849],{},"dragging",[951,16851,16852],{"align":997},"Fired when the user starts or stops dragging the controls.",[933,16854,16855,16859],{},[951,16856,16857],{"align":997},[1669,16858,14296],{},[951,16860,16861],{"align":997},"Fired when the user changes the controls.",[933,16863,16864,16869],{},[951,16865,16866],{"align":997},[1669,16867,16868],{},"mouseDown",[951,16870,16871],{"align":997},"Fired when the user clicks on the controls.",[933,16873,16874,16879],{},[951,16875,16876],{"align":997},[1669,16877,16878],{},"mouseUp",[951,16880,16881],{"align":997},"Fired when the user releases the mouse button on the controls.",[933,16883,16884,16889],{},[951,16885,16886],{"align":997},[1669,16887,16888],{},"objectChange",[951,16890,16891],{"align":997},"Fired when the user changes the object.",[1327,16893,16894],{"scoped":594},"\nimg {\n    aspect-ratio: 16/9;\n    object-fit: cover;\n    object-position: top;\n    border-radius: 8px;\n}\n",[1327,16896,16897],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":16899},[16900,16901,16906,16907],{"id":624,"depth":578,"text":15},{"id":16454,"depth":578,"text":16455,"children":16902},[16903,16904,16905],{"id":16461,"depth":708,"text":16462},{"id":16510,"depth":708,"text":16511},{"id":5630,"depth":708,"text":16557},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":123,"description":16908},"rtA5mRjWCioaInPfcKtnEcdh3kG88FfwUz7CBNeBOWs",[16913,17958,18726,19344,19983,20618,22064,24914,25389],{"id":16914,"title":133,"body":16915,"description":17954,"extension":591,"links":592,"meta":17955,"navigation":594,"path":134,"seo":17956,"stem":135,"__hash__":17957},"docs/2.api/3.loaders/1.use-gltf.md",{"type":501,"value":16916,"toc":17946},[16917,16922,16929,16931,17309,17325,17397,17401,17535,17538,17607,17611,17614,17706,17709,17713,17729,17885,17894,17898,17907,17938,17943],[2295,16918,16919],{},[16920,16921],"loaders-gltf",{},[614,16923,16924,16925,16928],{},"A composable that allows you to easily load glb/glTF models into your ",[1669,16926,16927],{},"TresJS"," scene.",[504,16930,15],{"id":624},[16932,16933,16934,17084],"code-group",{},[626,16935,16939],{"className":628,"code":16936,"filename":16937,"highlights":16938,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\nconst { state, nodes, materials } = useGLTF(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state?.scene\" />\n\u003C/template>\n","TheModel.vue",[578,739],[618,16940,16941,16961,16980,16984,17000,17027,17035,17039,17047,17076],{"__ignoreMap":576},[637,16942,16943,16945,16947,16949,16951,16953,16955,16957,16959],{"class":639,"line":577},[637,16944,643],{"class":642},[637,16946,647],{"class":646},[637,16948,651],{"class":650},[637,16950,654],{"class":650},[637,16952,657],{"class":642},[637,16954,660],{"class":642},[637,16956,664],{"class":663},[637,16958,660],{"class":642},[637,16960,669],{"class":642},[637,16962,16964,16966,16968,16970,16972,16974,16976,16978],{"class":16963,"line":578},[639,673],[637,16965,677],{"class":676},[637,16967,680],{"class":642},[637,16969,4347],{"class":683},[637,16971,693],{"class":642},[637,16973,696],{"class":676},[637,16975,699],{"class":642},[637,16977,702],{"class":663},[637,16979,705],{"class":642},[637,16981,16982],{"class":639,"line":708},[637,16983,742],{"emptyLinePlaceholder":594},[637,16985,16986,16988,16991,16993,16995,16998],{"class":639,"line":729},[637,16987,2415],{"class":650},[637,16989,16990],{"class":683}," path ",[637,16992,657],{"class":642},[637,16994,699],{"class":642},[637,16996,16997],{"class":663},"./blender-cube.glb",[637,16999,705],{"class":642},[637,17001,17003,17005,17007,17009,17011,17013,17015,17018,17020,17022,17024],{"class":17002,"line":739},[639,673],[637,17004,2415],{"class":650},[637,17006,680],{"class":642},[637,17008,2420],{"class":683},[637,17010,687],{"class":642},[637,17012,11061],{"class":683},[637,17014,687],{"class":642},[637,17016,17017],{"class":683}," materials ",[637,17019,2428],{"class":642},[637,17021,2431],{"class":642},[637,17023,4347],{"class":2434},[637,17025,17026],{"class":683},"(path)\n",[637,17028,17029,17031,17033],{"class":639,"line":745},[637,17030,732],{"class":642},[637,17032,647],{"class":646},[637,17034,669],{"class":642},[637,17036,17037],{"class":639,"line":755},[637,17038,742],{"emptyLinePlaceholder":594},[637,17040,17041,17043,17045],{"class":639,"line":778},[637,17042,643],{"class":642},[637,17044,750],{"class":646},[637,17046,669],{"class":642},[637,17048,17049,17051,17053,17055,17057,17059,17061,17063,17065,17067,17069,17072,17074],{"class":639,"line":790},[637,17050,758],{"class":642},[637,17052,4434],{"class":646},[637,17054,2710],{"class":650},[637,17056,657],{"class":642},[637,17058,660],{"class":642},[637,17060,14787],{"class":663},[637,17062,660],{"class":642},[637,17064,4448],{"class":650},[637,17066,657],{"class":642},[637,17068,660],{"class":642},[637,17070,17071],{"class":663},"state?.scene",[637,17073,660],{"class":642},[637,17075,787],{"class":642},[637,17077,17078,17080,17082],{"class":639,"line":800},[637,17079,732],{"class":642},[637,17081,750],{"class":646},[637,17083,669],{"class":642},[626,17085,17088],{"className":628,"code":17086,"filename":17087,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#F78B3D\">\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[618,17089,17090,17110,17128,17146,17162,17170,17174,17182,17201,17220,17228,17237,17244,17257,17270,17275,17293,17301],{"__ignoreMap":576},[637,17091,17092,17094,17096,17098,17100,17102,17104,17106,17108],{"class":639,"line":577},[637,17093,643],{"class":642},[637,17095,647],{"class":646},[637,17097,651],{"class":650},[637,17099,654],{"class":650},[637,17101,657],{"class":642},[637,17103,660],{"class":642},[637,17105,664],{"class":663},[637,17107,660],{"class":642},[637,17109,669],{"class":642},[637,17111,17112,17114,17116,17118,17120,17122,17124,17126],{"class":639,"line":578},[637,17113,677],{"class":676},[637,17115,680],{"class":642},[637,17117,690],{"class":683},[637,17119,693],{"class":642},[637,17121,696],{"class":676},[637,17123,699],{"class":642},[637,17125,702],{"class":663},[637,17127,705],{"class":642},[637,17129,17130,17132,17134,17136,17138,17140,17142,17144],{"class":639,"line":708},[637,17131,677],{"class":676},[637,17133,680],{"class":642},[637,17135,715],{"class":683},[637,17137,693],{"class":642},[637,17139,696],{"class":676},[637,17141,699],{"class":642},[637,17143,724],{"class":663},[637,17145,705],{"class":642},[637,17147,17148,17150,17153,17155,17157,17160],{"class":639,"line":729},[637,17149,677],{"class":676},[637,17151,17152],{"class":683}," TheModel ",[637,17154,8433],{"class":676},[637,17156,699],{"class":642},[637,17158,17159],{"class":663},"./TheModel.vue",[637,17161,705],{"class":642},[637,17163,17164,17166,17168],{"class":639,"line":739},[637,17165,732],{"class":642},[637,17167,647],{"class":646},[637,17169,669],{"class":642},[637,17171,17172],{"class":639,"line":745},[637,17173,742],{"emptyLinePlaceholder":594},[637,17175,17176,17178,17180],{"class":639,"line":755},[637,17177,643],{"class":642},[637,17179,750],{"class":646},[637,17181,669],{"class":642},[637,17183,17184,17186,17188,17190,17192,17194,17197,17199],{"class":639,"line":778},[637,17185,758],{"class":642},[637,17187,761],{"class":646},[637,17189,764],{"class":650},[637,17191,657],{"class":642},[637,17193,660],{"class":642},[637,17195,17196],{"class":663},"#F78B3D",[637,17198,660],{"class":642},[637,17200,669],{"class":642},[637,17202,17203,17205,17207,17209,17211,17213,17216,17218],{"class":639,"line":790},[637,17204,781],{"class":642},[637,17206,784],{"class":646},[637,17208,1485],{"class":650},[637,17210,657],{"class":642},[637,17212,660],{"class":642},[637,17214,17215],{"class":663},"[3, 2, 5]",[637,17217,660],{"class":642},[637,17219,787],{"class":642},[637,17221,17222,17224,17226],{"class":639,"line":800},[637,17223,781],{"class":642},[637,17225,795],{"class":646},[637,17227,787],{"class":642},[637,17229,17230,17232,17235],{"class":639,"line":805},[637,17231,781],{"class":642},[637,17233,17234],{"class":646},"TheModel",[637,17236,787],{"class":642},[637,17238,17239,17241],{"class":639,"line":827},[637,17240,781],{"class":642},[637,17242,17243],{"class":646},"TresDirectionalLight\n",[637,17245,17246,17249,17251,17253,17255],{"class":639,"line":631},[637,17247,17248],{"class":650},"      :intensity",[637,17250,657],{"class":642},[637,17252,660],{"class":642},[637,17254,820],{"class":663},[637,17256,3131],{"class":642},[637,17258,17259,17262,17264,17266,17268],{"class":639,"line":850},[637,17260,17261],{"class":650},"      :position",[637,17263,657],{"class":642},[637,17265,660],{"class":642},[637,17267,13280],{"class":663},[637,17269,3131],{"class":642},[637,17271,17272],{"class":639,"line":861},[637,17273,17274],{"class":642},"    />\n",[637,17276,17277,17279,17281,17283,17285,17287,17289,17291],{"class":639,"line":872},[637,17278,781],{"class":642},[637,17280,9681],{"class":646},[637,17282,1867],{"class":650},[637,17284,657],{"class":642},[637,17286,660],{"class":642},[637,17288,1874],{"class":663},[637,17290,660],{"class":642},[637,17292,787],{"class":642},[637,17294,17295,17297,17299],{"class":639,"line":882},[637,17296,905],{"class":642},[637,17298,761],{"class":646},[637,17300,669],{"class":642},[637,17302,17303,17305,17307],{"class":639,"line":632},[637,17304,732],{"class":642},[637,17306,750],{"class":646},[637,17308,669],{"class":642},[614,17310,17311,17312,17314,17315,17318,17319,17324],{},"An advantage of using ",[618,17313,133],{}," is that you can pass a ",[618,17316,17317],{},"draco"," prop to enable ",[1140,17320,17323],{"href":17321,"rel":17322},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1144],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[626,17326,17328],{"className":1186,"code":17327,"language":664,"meta":576,"style":576},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[618,17329,17330,17348,17352],{"__ignoreMap":576},[637,17331,17332,17334,17336,17338,17340,17342,17344,17346],{"class":639,"line":577},[637,17333,677],{"class":676},[637,17335,680],{"class":642},[637,17337,4347],{"class":683},[637,17339,693],{"class":642},[637,17341,696],{"class":676},[637,17343,699],{"class":642},[637,17345,702],{"class":663},[637,17347,705],{"class":642},[637,17349,17350],{"class":639,"line":578},[637,17351,742],{"emptyLinePlaceholder":594},[637,17353,17354,17356,17358,17360,17362,17364,17366,17368,17370,17372,17374,17376,17378,17381,17383,17385,17387,17389,17391,17393,17395],{"class":639,"line":708},[637,17355,2415],{"class":650},[637,17357,680],{"class":642},[637,17359,2420],{"class":683},[637,17361,687],{"class":642},[637,17363,11061],{"class":683},[637,17365,687],{"class":642},[637,17367,17017],{"class":683},[637,17369,2428],{"class":642},[637,17371,2431],{"class":642},[637,17373,4347],{"class":2434},[637,17375,2437],{"class":683},[637,17377,2440],{"class":642},[637,17379,17380],{"class":663},"/models/AkuAku.gltf",[637,17382,2440],{"class":642},[637,17384,687],{"class":642},[637,17386,680],{"class":642},[637,17388,4392],{"class":646},[637,17390,1218],{"class":642},[637,17392,4398],{"class":4397},[637,17394,693],{"class":642},[637,17396,2448],{"class":683},[504,17398,17400],{"id":17399},"return-values","Return Values",[927,17402,17403,17413],{},[930,17404,17405],{},[933,17406,17407,17409,17411],{},[936,17408,8089],{"align":997},[936,17410,5969],{},[936,17412,941],{},[946,17414,17415,17432,17446,17460,17475,17490,17505,17520],{},[933,17416,17417,17421,17426],{},[951,17418,17419],{"align":997},[1669,17420,14787],{},[951,17422,17423],{},[618,17424,17425],{},"Ref\u003CGLTF | null>",[951,17427,17428,17429,17431],{},"The loaded GLTF, or ",[618,17430,3656],{}," until it arrives",[933,17433,17434,17438,17443],{},[951,17435,17436],{"align":997},[1669,17437,11030],{},[951,17439,17440],{},[618,17441,17442],{},"ComputedRef\u003CTNodes>",[951,17444,17445],{},"All nodes in the scene, keyed by name",[933,17447,17448,17452,17457],{},[951,17449,17450],{"align":997},[1669,17451,528],{},[951,17453,17454],{},[618,17455,17456],{},"ComputedRef\u003CTMaterials>",[951,17458,17459],{},"All materials in the scene, keyed by name",[933,17461,17462,17467,17472],{},[951,17463,17464],{"align":997},[1669,17465,17466],{},"isLoading",[951,17468,17469],{},[618,17470,17471],{},"Ref\u003Cboolean>",[951,17473,17474],{},"Whether the model is currently loading",[933,17476,17477,17482,17487],{},[951,17478,17479],{"align":997},[1669,17480,17481],{},"error",[951,17483,17484],{},[618,17485,17486],{},"Ref\u003Cunknown>",[951,17488,17489],{},"Whatever the loader threw, if anything",[933,17491,17492,17497,17502],{},[951,17493,17494],{"align":997},[1669,17495,17496],{},"progress",[951,17498,17499],{},[618,17500,17501],{},"{ loaded: number, total: number, percentage: number }",[951,17503,17504],{},"Progress of the current load",[933,17506,17507,17512,17517],{},[951,17508,17509],{"align":997},[1669,17510,17511],{},"load",[951,17513,17514],{},[618,17515,17516],{},"(path: string) => void",[951,17518,17519],{},"Load a different model into the same state",[933,17521,17522,17527,17532],{},[951,17523,17524],{"align":997},[1669,17525,17526],{},"execute",[951,17528,17529],{},[618,17530,17531],{},"(delay?: number) => Promise\u003CGLTF>",[951,17533,17534],{},"Re-run the load",[504,17536,14023],{"id":17537},"options",[927,17539,17540,17552],{},[930,17541,17542],{},[933,17543,17544,17546,17548,17550],{},[936,17545,8089],{"align":997},[936,17547,5969],{},[936,17549,944],{},[936,17551,941],{},[946,17553,17554,17572,17591],{},[933,17555,17556,17560,17565,17569],{},[951,17557,17558],{"align":997},[1669,17559,17317],{},[951,17561,17562],{},[618,17563,17564],{},"boolean",[951,17566,17567],{},[618,17568,971],{},[951,17570,17571],{},"Whether to enable Draco compression.",[933,17573,17574,17579,17583,17588],{},[951,17575,17576],{"align":997},[1669,17577,17578],{},"decoderPath",[951,17580,17581],{},[618,17582,3572],{},[951,17584,17585],{},[618,17586,17587],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[951,17589,17590],{},"Path to the Draco decoder.",[933,17592,17593,17598,17602,17604],{},[951,17594,17595],{"align":997},[1669,17596,17597],{},"traverse",[951,17599,17600],{},[618,17601,12047],{},[951,17603],{},[951,17605,17606],{},"A traverse function applied to the scene upon loading the model.",[504,17608,17610],{"id":17609},"accessing-nodes-and-materials","Accessing Nodes and Materials",[614,17612,17613],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[626,17615,17617],{"className":1186,"code":17616,"language":664,"meta":576,"style":576},"const { nodes, materials } = useGLTF('/model.glb')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[618,17618,17619,17648,17652,17657,17677,17681,17686],{"__ignoreMap":576},[637,17620,17621,17623,17625,17627,17629,17631,17633,17635,17637,17639,17641,17644,17646],{"class":639,"line":577},[637,17622,2415],{"class":650},[637,17624,680],{"class":642},[637,17626,11061],{"class":683},[637,17628,687],{"class":642},[637,17630,17017],{"class":683},[637,17632,2428],{"class":642},[637,17634,2431],{"class":642},[637,17636,4347],{"class":2434},[637,17638,2437],{"class":683},[637,17640,2440],{"class":642},[637,17642,17643],{"class":663},"/model.glb",[637,17645,2440],{"class":642},[637,17647,2448],{"class":683},[637,17649,17650],{"class":639,"line":578},[637,17651,742],{"emptyLinePlaceholder":594},[637,17653,17654],{"class":639,"line":708},[637,17655,17656],{"class":1209},"// Access a specific node\n",[637,17658,17659,17661,17664,17666,17668,17670,17672,17674],{"class":639,"line":729},[637,17660,2415],{"class":650},[637,17662,17663],{"class":683}," mesh ",[637,17665,657],{"class":642},[637,17667,11061],{"class":683},[637,17669,1146],{"class":642},[637,17671,3685],{"class":683},[637,17673,1146],{"class":642},[637,17675,17676],{"class":683},"MeshName\n",[637,17678,17679],{"class":639,"line":739},[637,17680,742],{"emptyLinePlaceholder":594},[637,17682,17683],{"class":639,"line":745},[637,17684,17685],{"class":1209},"// Access a specific material\n",[637,17687,17688,17690,17692,17694,17697,17699,17701,17703],{"class":639,"line":755},[637,17689,2415],{"class":650},[637,17691,8404],{"class":683},[637,17693,657],{"class":642},[637,17695,17696],{"class":683}," materials",[637,17698,1146],{"class":642},[637,17700,3685],{"class":683},[637,17702,1146],{"class":642},[637,17704,17705],{"class":683},"MaterialName\n",[614,17707,17708],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[504,17710,17712],{"id":17711},"typing-nodes-and-materials","Typing Nodes and Materials",[614,17714,17715,17716,3063,17718,17720,17721,17724,17725,17728],{},"The keys of ",[618,17717,11030],{},[618,17719,528],{}," come from the file, so by default both are a loose record and\n",[618,17722,17723],{},"nodes.value.Body"," is an ",[618,17726,17727],{},"any",". Pass the shape of your model as generics to get them typed:",[626,17730,17732],{"className":1186,"code":17731,"language":664,"meta":576,"style":576},"import type { Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('/models/robot.glb')\n\nnodes.value.Body.geometry // Mesh, not any\n",[618,17733,17734,17758,17776,17780,17799,17817,17821,17861,17865],{"__ignoreMap":576},[637,17735,17736,17738,17740,17742,17744,17746,17748,17750,17752,17754,17756],{"class":639,"line":577},[637,17737,677],{"class":676},[637,17739,3442],{"class":676},[637,17741,680],{"class":642},[637,17743,4617],{"class":683},[637,17745,687],{"class":642},[637,17747,8354],{"class":683},[637,17749,693],{"class":642},[637,17751,696],{"class":676},[637,17753,699],{"class":642},[637,17755,4626],{"class":663},[637,17757,705],{"class":642},[637,17759,17760,17762,17764,17766,17768,17770,17772,17774],{"class":639,"line":578},[637,17761,677],{"class":676},[637,17763,680],{"class":642},[637,17765,4347],{"class":683},[637,17767,693],{"class":642},[637,17769,696],{"class":676},[637,17771,699],{"class":642},[637,17773,702],{"class":663},[637,17775,705],{"class":642},[637,17777,17778],{"class":639,"line":708},[637,17779,742],{"emptyLinePlaceholder":594},[637,17781,17782,17784,17787,17789,17792,17794,17796],{"class":639,"line":729},[637,17783,5323],{"class":650},[637,17785,17786],{"class":1200}," ModelNodes",[637,17788,680],{"class":642},[637,17790,17791],{"class":646}," Body",[637,17793,1218],{"class":642},[637,17795,4617],{"class":1200},[637,17797,17798],{"class":642}," }\n",[637,17800,17801,17803,17806,17808,17811,17813,17815],{"class":639,"line":739},[637,17802,5323],{"class":650},[637,17804,17805],{"class":1200}," ModelMaterials",[637,17807,680],{"class":642},[637,17809,17810],{"class":646}," Skin",[637,17812,1218],{"class":642},[637,17814,8354],{"class":1200},[637,17816,17798],{"class":642},[637,17818,17819],{"class":639,"line":745},[637,17820,742],{"emptyLinePlaceholder":594},[637,17822,17823,17825,17827,17829,17831,17833,17835,17837,17839,17841,17844,17846,17848,17850,17852,17854,17857,17859],{"class":639,"line":755},[637,17824,2415],{"class":650},[637,17826,680],{"class":642},[637,17828,11061],{"class":683},[637,17830,687],{"class":642},[637,17832,17017],{"class":683},[637,17834,2428],{"class":642},[637,17836,2431],{"class":642},[637,17838,4347],{"class":2434},[637,17840,643],{"class":642},[637,17842,17843],{"class":1200},"ModelNodes",[637,17845,687],{"class":642},[637,17847,17805],{"class":1200},[637,17849,3651],{"class":642},[637,17851,2437],{"class":683},[637,17853,2440],{"class":642},[637,17855,17856],{"class":663},"/models/robot.glb",[637,17858,2440],{"class":642},[637,17860,2448],{"class":683},[637,17862,17863],{"class":639,"line":778},[637,17864,742],{"emptyLinePlaceholder":594},[637,17866,17867,17869,17871,17873,17875,17877,17879,17882],{"class":639,"line":790},[637,17868,11030],{"class":683},[637,17870,1146],{"class":642},[637,17872,3685],{"class":683},[637,17874,1146],{"class":642},[637,17876,4729],{"class":683},[637,17878,1146],{"class":642},[637,17880,17881],{"class":683},"geometry ",[637,17883,17884],{"class":1209},"// Mesh, not any\n",[2005,17886,17887],{},[614,17888,17889,17890,17893],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[618,17891,17892],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[504,17895,17897],{"id":17896},"generating-a-component-instead","Generating a Component Instead",[614,17899,17900,17901,17906],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1140,17902,17905],{"href":17903,"rel":17904},"https://docs.tresjs.org/cli/gltf",[1144],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[626,17908,17912],{"className":17909,"code":17910,"language":17911,"meta":576,"style":576},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n#   3 slots: Head, Body, Base\n","bash",[618,17913,17914,17928,17933],{"__ignoreMap":576},[637,17915,17916,17919,17922,17925],{"class":639,"line":577},[637,17917,17918],{"class":1200},"npx",[637,17920,17921],{"class":663}," @tresjs/cli",[637,17923,17924],{"class":663}," gltf",[637,17926,17927],{"class":663}," public/models/robot.glb\n",[637,17929,17930],{"class":639,"line":578},[637,17931,17932],{"class":1209},"# ✔ src/models/Robot.gen.vue\n",[637,17934,17935],{"class":639,"line":708},[637,17936,17937],{"class":1209},"#   3 slots: Head, Body, Base\n",[9419,17939,17940],{"to":20},[614,17941,17942],{},"The three ways to load a model, and when to reach for each one.",[1327,17944,17945],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":17947},[17948,17949,17950,17951,17952,17953],{"id":624,"depth":578,"text":15},{"id":17399,"depth":578,"text":17400},{"id":17537,"depth":578,"text":14023},{"id":17609,"depth":578,"text":17610},{"id":17711,"depth":578,"text":17712},{"id":17896,"depth":578,"text":17897},"A composable to load GLTF models in TresJS scenes.",{},{"title":133,"description":17954},"mVv2TZo5-pqLqIwJ-gYXHQx7OoCZ9HEO3CnPATpAwMA",{"id":17959,"title":137,"body":17960,"description":18722,"extension":591,"links":592,"meta":18723,"navigation":594,"path":138,"seo":18724,"stem":139,"__hash__":18725},"docs/2.api/3.loaders/2.gltf-model.md",{"type":501,"value":17961,"toc":18716},[17962,17966,17977,17979,18308,18312,18318,18561,18563,18658,18673,18677,18694,18709,18713],[2295,17963,17964],{},[16920,17965],{},[614,17967,2776,17968,17970,17971,17976],{},[618,17969,137],{}," component is a wrapper around ",[1140,17972,17974],{"href":17973},"./use-gltf",[618,17975,133],{}," composable and accepts the same options as props.",[504,17978,15],{"id":624},[16932,17980,17981,18094],{},[626,17982,17985],{"className":628,"code":17983,"filename":16937,"highlights":17984,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n",[578,778],[618,17986,17987,18007,18027,18031,18045,18053,18057,18065,18086],{"__ignoreMap":576},[637,17988,17989,17991,17993,17995,17997,17999,18001,18003,18005],{"class":639,"line":577},[637,17990,643],{"class":642},[637,17992,647],{"class":646},[637,17994,651],{"class":650},[637,17996,654],{"class":650},[637,17998,657],{"class":642},[637,18000,660],{"class":642},[637,18002,664],{"class":663},[637,18004,660],{"class":642},[637,18006,669],{"class":642},[637,18008,18010,18012,18014,18017,18019,18021,18023,18025],{"class":18009,"line":578},[639,673],[637,18011,677],{"class":676},[637,18013,680],{"class":642},[637,18015,18016],{"class":683}," GLTFModel",[637,18018,693],{"class":642},[637,18020,696],{"class":676},[637,18022,699],{"class":642},[637,18024,702],{"class":663},[637,18026,705],{"class":642},[637,18028,18029],{"class":639,"line":708},[637,18030,742],{"emptyLinePlaceholder":594},[637,18032,18033,18035,18037,18039,18041,18043],{"class":639,"line":729},[637,18034,2415],{"class":650},[637,18036,16990],{"class":683},[637,18038,657],{"class":642},[637,18040,699],{"class":642},[637,18042,16997],{"class":663},[637,18044,705],{"class":642},[637,18046,18047,18049,18051],{"class":639,"line":739},[637,18048,732],{"class":642},[637,18050,647],{"class":646},[637,18052,669],{"class":642},[637,18054,18055],{"class":639,"line":745},[637,18056,742],{"emptyLinePlaceholder":594},[637,18058,18059,18061,18063],{"class":639,"line":755},[637,18060,643],{"class":642},[637,18062,750],{"class":646},[637,18064,669],{"class":642},[637,18066,18068,18070,18072,18075,18077,18079,18082,18084],{"class":18067,"line":778},[639,673],[637,18069,758],{"class":642},[637,18071,137],{"class":646},[637,18073,18074],{"class":650}," :path",[637,18076,657],{"class":642},[637,18078,660],{"class":642},[637,18080,18081],{"class":663},"path",[637,18083,660],{"class":642},[637,18085,787],{"class":642},[637,18087,18088,18090,18092],{"class":639,"line":790},[637,18089,732],{"class":642},[637,18091,750],{"class":646},[637,18093,669],{"class":642},[626,18095,18096],{"className":628,"code":17086,"filename":17087,"language":633,"meta":576,"style":576},[618,18097,18098,18118,18136,18154,18168,18176,18180,18188,18206,18224,18232,18240,18246,18258,18270,18274,18292,18300],{"__ignoreMap":576},[637,18099,18100,18102,18104,18106,18108,18110,18112,18114,18116],{"class":639,"line":577},[637,18101,643],{"class":642},[637,18103,647],{"class":646},[637,18105,651],{"class":650},[637,18107,654],{"class":650},[637,18109,657],{"class":642},[637,18111,660],{"class":642},[637,18113,664],{"class":663},[637,18115,660],{"class":642},[637,18117,669],{"class":642},[637,18119,18120,18122,18124,18126,18128,18130,18132,18134],{"class":639,"line":578},[637,18121,677],{"class":676},[637,18123,680],{"class":642},[637,18125,690],{"class":683},[637,18127,693],{"class":642},[637,18129,696],{"class":676},[637,18131,699],{"class":642},[637,18133,702],{"class":663},[637,18135,705],{"class":642},[637,18137,18138,18140,18142,18144,18146,18148,18150,18152],{"class":639,"line":708},[637,18139,677],{"class":676},[637,18141,680],{"class":642},[637,18143,715],{"class":683},[637,18145,693],{"class":642},[637,18147,696],{"class":676},[637,18149,699],{"class":642},[637,18151,724],{"class":663},[637,18153,705],{"class":642},[637,18155,18156,18158,18160,18162,18164,18166],{"class":639,"line":729},[637,18157,677],{"class":676},[637,18159,17152],{"class":683},[637,18161,8433],{"class":676},[637,18163,699],{"class":642},[637,18165,17159],{"class":663},[637,18167,705],{"class":642},[637,18169,18170,18172,18174],{"class":639,"line":739},[637,18171,732],{"class":642},[637,18173,647],{"class":646},[637,18175,669],{"class":642},[637,18177,18178],{"class":639,"line":745},[637,18179,742],{"emptyLinePlaceholder":594},[637,18181,18182,18184,18186],{"class":639,"line":755},[637,18183,643],{"class":642},[637,18185,750],{"class":646},[637,18187,669],{"class":642},[637,18189,18190,18192,18194,18196,18198,18200,18202,18204],{"class":639,"line":778},[637,18191,758],{"class":642},[637,18193,761],{"class":646},[637,18195,764],{"class":650},[637,18197,657],{"class":642},[637,18199,660],{"class":642},[637,18201,17196],{"class":663},[637,18203,660],{"class":642},[637,18205,669],{"class":642},[637,18207,18208,18210,18212,18214,18216,18218,18220,18222],{"class":639,"line":790},[637,18209,781],{"class":642},[637,18211,784],{"class":646},[637,18213,1485],{"class":650},[637,18215,657],{"class":642},[637,18217,660],{"class":642},[637,18219,17215],{"class":663},[637,18221,660],{"class":642},[637,18223,787],{"class":642},[637,18225,18226,18228,18230],{"class":639,"line":800},[637,18227,781],{"class":642},[637,18229,795],{"class":646},[637,18231,787],{"class":642},[637,18233,18234,18236,18238],{"class":639,"line":805},[637,18235,781],{"class":642},[637,18237,17234],{"class":646},[637,18239,787],{"class":642},[637,18241,18242,18244],{"class":639,"line":827},[637,18243,781],{"class":642},[637,18245,17243],{"class":646},[637,18247,18248,18250,18252,18254,18256],{"class":639,"line":631},[637,18249,17248],{"class":650},[637,18251,657],{"class":642},[637,18253,660],{"class":642},[637,18255,820],{"class":663},[637,18257,3131],{"class":642},[637,18259,18260,18262,18264,18266,18268],{"class":639,"line":850},[637,18261,17261],{"class":650},[637,18263,657],{"class":642},[637,18265,660],{"class":642},[637,18267,13280],{"class":663},[637,18269,3131],{"class":642},[637,18271,18272],{"class":639,"line":861},[637,18273,17274],{"class":642},[637,18275,18276,18278,18280,18282,18284,18286,18288,18290],{"class":639,"line":872},[637,18277,781],{"class":642},[637,18279,9681],{"class":646},[637,18281,1867],{"class":650},[637,18283,657],{"class":642},[637,18285,660],{"class":642},[637,18287,1874],{"class":663},[637,18289,660],{"class":642},[637,18291,787],{"class":642},[637,18293,18294,18296,18298],{"class":639,"line":882},[637,18295,905],{"class":642},[637,18297,761],{"class":646},[637,18299,669],{"class":642},[637,18301,18302,18304,18306],{"class":639,"line":632},[637,18303,732],{"class":642},[637,18305,750],{"class":646},[637,18307,669],{"class":642},[504,18309,18311],{"id":18310},"model-reference","Model reference",[614,18313,18314,18315,18317],{},"The component exposes the loaded GLTF as ",[618,18316,9326],{},", so a template ref gets you the parsed model:",[626,18319,18321],{"className":628,"code":18320,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\nimport { ref, watch } from 'vue'\n\nconst modelRef = ref\u003CInstanceType\u003Ctypeof GLTFModel>>()\n\n// `instance` is null until the file lands, so watch it rather than the ref\nwatch(() => modelRef.value?.instance, (gltf) => {\n  gltf?.scene.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[618,18322,18323,18343,18361,18383,18387,18412,18416,18421,18455,18488,18494,18502,18506,18514,18521,18535,18549,18553],{"__ignoreMap":576},[637,18324,18325,18327,18329,18331,18333,18335,18337,18339,18341],{"class":639,"line":577},[637,18326,643],{"class":642},[637,18328,647],{"class":646},[637,18330,651],{"class":650},[637,18332,654],{"class":650},[637,18334,657],{"class":642},[637,18336,660],{"class":642},[637,18338,664],{"class":663},[637,18340,660],{"class":642},[637,18342,669],{"class":642},[637,18344,18345,18347,18349,18351,18353,18355,18357,18359],{"class":639,"line":578},[637,18346,677],{"class":676},[637,18348,680],{"class":642},[637,18350,18016],{"class":683},[637,18352,693],{"class":642},[637,18354,696],{"class":676},[637,18356,699],{"class":642},[637,18358,702],{"class":663},[637,18360,705],{"class":642},[637,18362,18363,18365,18367,18369,18371,18373,18375,18377,18379,18381],{"class":639,"line":708},[637,18364,677],{"class":676},[637,18366,680],{"class":642},[637,18368,3872],{"class":683},[637,18370,687],{"class":642},[637,18372,12140],{"class":683},[637,18374,693],{"class":642},[637,18376,696],{"class":676},[637,18378,699],{"class":642},[637,18380,633],{"class":663},[637,18382,705],{"class":642},[637,18384,18385],{"class":639,"line":729},[637,18386,742],{"emptyLinePlaceholder":594},[637,18388,18389,18391,18394,18396,18398,18400,18403,18406,18408,18410],{"class":639,"line":739},[637,18390,2415],{"class":650},[637,18392,18393],{"class":683}," modelRef ",[637,18395,657],{"class":642},[637,18397,3872],{"class":2434},[637,18399,643],{"class":642},[637,18401,18402],{"class":1200},"InstanceType",[637,18404,18405],{"class":642},"\u003Ctypeof",[637,18407,18016],{"class":683},[637,18409,3582],{"class":642},[637,18411,6535],{"class":683},[637,18413,18414],{"class":639,"line":745},[637,18415,742],{"emptyLinePlaceholder":594},[637,18417,18418],{"class":639,"line":755},[637,18419,18420],{"class":1209},"// `instance` is null until the file lands, so watch it rather than the ref\n",[637,18422,18423,18425,18427,18429,18431,18434,18436,18438,18440,18442,18444,18446,18449,18451,18453],{"class":639,"line":778},[637,18424,12189],{"class":2434},[637,18426,2437],{"class":683},[637,18428,3674],{"class":642},[637,18430,3677],{"class":650},[637,18432,18433],{"class":683}," modelRef",[637,18435,1146],{"class":642},[637,18437,3685],{"class":683},[637,18439,3688],{"class":642},[637,18441,9326],{"class":683},[637,18443,687],{"class":642},[637,18445,3074],{"class":642},[637,18447,18448],{"class":6838},"gltf",[637,18450,3340],{"class":642},[637,18452,3677],{"class":650},[637,18454,1204],{"class":642},[637,18456,18457,18460,18462,18465,18467,18469,18471,18474,18476,18478,18480,18482,18484,18486],{"class":639,"line":790},[637,18458,18459],{"class":683},"  gltf",[637,18461,3688],{"class":642},[637,18463,18464],{"class":683},"scene",[637,18466,1146],{"class":642},[637,18468,4130],{"class":683},[637,18470,1146],{"class":642},[637,18472,18473],{"class":2434},"set",[637,18475,2437],{"class":646},[637,18477,965],{"class":2501},[637,18479,687],{"class":642},[637,18481,2506],{"class":2501},[637,18483,687],{"class":642},[637,18485,2506],{"class":2501},[637,18487,2448],{"class":646},[637,18489,18490,18492],{"class":639,"line":800},[637,18491,2428],{"class":642},[637,18493,2448],{"class":683},[637,18495,18496,18498,18500],{"class":639,"line":805},[637,18497,732],{"class":642},[637,18499,647],{"class":646},[637,18501,669],{"class":642},[637,18503,18504],{"class":639,"line":827},[637,18505,742],{"emptyLinePlaceholder":594},[637,18507,18508,18510,18512],{"class":639,"line":631},[637,18509,643],{"class":642},[637,18511,750],{"class":646},[637,18513,669],{"class":642},[637,18515,18516,18518],{"class":639,"line":850},[637,18517,758],{"class":642},[637,18519,18520],{"class":646},"GLTFModel\n",[637,18522,18523,18526,18528,18530,18533],{"class":639,"line":861},[637,18524,18525],{"class":650},"    ref",[637,18527,657],{"class":642},[637,18529,660],{"class":642},[637,18531,18532],{"class":663},"modelRef",[637,18534,3131],{"class":642},[637,18536,18537,18540,18542,18544,18547],{"class":639,"line":872},[637,18538,18539],{"class":650},"    path",[637,18541,657],{"class":642},[637,18543,660],{"class":642},[637,18545,18546],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[637,18548,3131],{"class":642},[637,18550,18551],{"class":639,"line":882},[637,18552,13995],{"class":642},[637,18554,18555,18557,18559],{"class":639,"line":632},[637,18556,732],{"class":642},[637,18558,750],{"class":646},[637,18560,669],{"class":642},[504,18562,922],{"id":921},[927,18564,18565,18575],{},[930,18566,18567],{},[933,18568,18569,18571,18573],{},[936,18570,938],{"align":997},[936,18572,941],{"align":997},[936,18574,944],{},[946,18576,18577,18593,18610,18624,18642],{},[933,18578,18579,18583,18589],{},[951,18580,18581],{"align":997},[618,18582,18081],{},[951,18584,18585,18586,1146],{"align":997},"Path to the model file. ",[1669,18587,18588],{},"Required",[951,18590,18591],{},[618,18592,1179],{},[933,18594,18595,18599,18606],{},[951,18596,18597],{"align":997},[618,18598,17317],{},[951,18600,18601,18602,18605],{"align":997},"Enable ",[1140,18603,17323],{"href":17321,"rel":18604},[1144]," for the model.",[951,18607,18608],{},[618,18609,971],{},[933,18611,18612,18616,18619],{},[951,18613,18614],{"align":997},[618,18615,17578],{},[951,18617,18618],{"align":997},"Path to a Draco decoder.",[951,18620,18621],{},[618,18622,18623],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[933,18625,18626,18631,18638],{},[951,18627,18628],{"align":997},[618,18629,18630],{},"castShadow",[951,18632,18633,18634,18637],{"align":997},"Apply ",[618,18635,18636],{},"cast-shadow"," to all meshes inside your model.",[951,18639,18640],{},[618,18641,971],{},[933,18643,18644,18649,18654],{},[951,18645,18646],{"align":997},[618,18647,18648],{},"receiveShadow",[951,18650,18633,18651,18637],{"align":997},[618,18652,18653],{},"receive-shadow",[951,18655,18656],{},[618,18657,971],{},[2005,18659,18660],{},[614,18661,18662,18664,18665,18669,18670,18672],{},[618,18663,18081],{}," is not reactive: the component reads it once on setup. Use\n",[1140,18666,18667],{"href":17973},[618,18668,133],{}," with a ",[618,18671,5894],{}," path if you need to swap models at runtime.",[504,18674,18676],{"id":18675},"when-to-reach-for-something-else","When to reach for something else",[614,18678,18679,18681,18682,18684,18685,18689,18690,18693],{},[618,18680,137],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[618,18683,8265],{}," on. When you need that, use\n",[1140,18686,18687],{"href":17973},[618,18688,133],{}," to compose the parts yourself, or let the\n",[1140,18691,17905],{"href":17903,"rel":18692},[1144]," generate a typed component with a slot per node:",[626,18695,18697],{"className":17909,"code":18696,"language":17911,"meta":576,"style":576},"npx @tresjs/cli gltf public/models/robot.glb\n",[618,18698,18699],{"__ignoreMap":576},[637,18700,18701,18703,18705,18707],{"class":639,"line":577},[637,18702,17918],{"class":1200},[637,18704,17921],{"class":663},[637,18706,17924],{"class":663},[637,18708,17927],{"class":663},[9419,18710,18711],{"to":20},[614,18712,17942],{},[1327,18714,18715],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":18717},[18718,18719,18720,18721],{"id":624,"depth":578,"text":15},{"id":18310,"depth":578,"text":18311},{"id":921,"depth":578,"text":922},{"id":18675,"depth":578,"text":18676},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":137,"description":18722},"VQ_YsNV94FVy6HCRAYN67RLxTmb-4Gfn8UDFrpHDFcQ",{"id":18727,"title":141,"body":18728,"description":19340,"extension":591,"links":592,"meta":19341,"navigation":594,"path":142,"seo":19342,"stem":143,"__hash__":19343},"docs/2.api/3.loaders/3.use-fbx.md",{"type":501,"value":18729,"toc":19334},[18730,18735,18740,18742,19130,19132,19211,19213,19239,19241,19243,19329,19331],[2295,18731,18732],{},[18733,18734],"loaders-fbx",{},[614,18736,18737,18738,16928],{},"A composable that allows you to easily load FBX models into your ",[1669,18739,16927],{},[504,18741,15],{"id":624},[16932,18743,18744,18913],{},[626,18745,18748],{"className":628,"code":18746,"filename":16937,"highlights":18747,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useFBX } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'\nconst { state, nodes, materials } = useFBX(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state\" :scale=\"0.025\" />\n\u003C/template>\n",[578,745],[618,18749,18750,18770,18790,18794,18809,18821,18846,18854,18858,18866,18905],{"__ignoreMap":576},[637,18751,18752,18754,18756,18758,18760,18762,18764,18766,18768],{"class":639,"line":577},[637,18753,643],{"class":642},[637,18755,647],{"class":646},[637,18757,651],{"class":650},[637,18759,654],{"class":650},[637,18761,657],{"class":642},[637,18763,660],{"class":642},[637,18765,664],{"class":663},[637,18767,660],{"class":642},[637,18769,669],{"class":642},[637,18771,18773,18775,18777,18780,18782,18784,18786,18788],{"class":18772,"line":578},[639,673],[637,18774,677],{"class":676},[637,18776,680],{"class":642},[637,18778,18779],{"class":683}," useFBX",[637,18781,693],{"class":642},[637,18783,696],{"class":676},[637,18785,699],{"class":642},[637,18787,702],{"class":663},[637,18789,705],{"class":642},[637,18791,18792],{"class":639,"line":708},[637,18793,742],{"emptyLinePlaceholder":594},[637,18795,18796,18798,18800,18802,18804,18807],{"class":639,"line":729},[637,18797,2415],{"class":650},[637,18799,16990],{"class":683},[637,18801,657],{"class":642},[637,18803,699],{"class":642},[637,18805,18806],{"class":663},"https://raw.githubusercontent.com/",[637,18808,705],{"class":642},[637,18810,18811,18814,18816,18819],{"class":639,"line":739},[637,18812,18813],{"class":642},"  +",[637,18815,699],{"class":642},[637,18817,18818],{"class":663},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[637,18820,705],{"class":642},[637,18822,18824,18826,18828,18830,18832,18834,18836,18838,18840,18842,18844],{"class":18823,"line":745},[639,673],[637,18825,2415],{"class":650},[637,18827,680],{"class":642},[637,18829,2420],{"class":683},[637,18831,687],{"class":642},[637,18833,11061],{"class":683},[637,18835,687],{"class":642},[637,18837,17017],{"class":683},[637,18839,2428],{"class":642},[637,18841,2431],{"class":642},[637,18843,18779],{"class":2434},[637,18845,17026],{"class":683},[637,18847,18848,18850,18852],{"class":639,"line":755},[637,18849,732],{"class":642},[637,18851,647],{"class":646},[637,18853,669],{"class":642},[637,18855,18856],{"class":639,"line":778},[637,18857,742],{"emptyLinePlaceholder":594},[637,18859,18860,18862,18864],{"class":639,"line":790},[637,18861,643],{"class":642},[637,18863,750],{"class":646},[637,18865,669],{"class":642},[637,18867,18868,18870,18872,18874,18876,18878,18880,18882,18884,18886,18888,18890,18892,18894,18896,18898,18901,18903],{"class":639,"line":800},[637,18869,758],{"class":642},[637,18871,4434],{"class":646},[637,18873,2710],{"class":650},[637,18875,657],{"class":642},[637,18877,660],{"class":642},[637,18879,14787],{"class":663},[637,18881,660],{"class":642},[637,18883,4448],{"class":650},[637,18885,657],{"class":642},[637,18887,660],{"class":642},[637,18889,14787],{"class":663},[637,18891,660],{"class":642},[637,18893,813],{"class":650},[637,18895,657],{"class":642},[637,18897,660],{"class":642},[637,18899,18900],{"class":663},"0.025",[637,18902,660],{"class":642},[637,18904,787],{"class":642},[637,18906,18907,18909,18911],{"class":639,"line":805},[637,18908,732],{"class":642},[637,18910,750],{"class":646},[637,18912,669],{"class":642},[626,18914,18916],{"className":628,"code":18915,"filename":17087,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#1F90FF\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,18917,18918,18938,18956,18974,18988,18996,19000,19008,19027,19046,19054,19062,19068,19080,19092,19096,19114,19122],{"__ignoreMap":576},[637,18919,18920,18922,18924,18926,18928,18930,18932,18934,18936],{"class":639,"line":577},[637,18921,643],{"class":642},[637,18923,647],{"class":646},[637,18925,651],{"class":650},[637,18927,654],{"class":650},[637,18929,657],{"class":642},[637,18931,660],{"class":642},[637,18933,664],{"class":663},[637,18935,660],{"class":642},[637,18937,669],{"class":642},[637,18939,18940,18942,18944,18946,18948,18950,18952,18954],{"class":639,"line":578},[637,18941,677],{"class":676},[637,18943,680],{"class":642},[637,18945,690],{"class":683},[637,18947,693],{"class":642},[637,18949,696],{"class":676},[637,18951,699],{"class":642},[637,18953,702],{"class":663},[637,18955,705],{"class":642},[637,18957,18958,18960,18962,18964,18966,18968,18970,18972],{"class":639,"line":708},[637,18959,677],{"class":676},[637,18961,680],{"class":642},[637,18963,715],{"class":683},[637,18965,693],{"class":642},[637,18967,696],{"class":676},[637,18969,699],{"class":642},[637,18971,724],{"class":663},[637,18973,705],{"class":642},[637,18975,18976,18978,18980,18982,18984,18986],{"class":639,"line":729},[637,18977,677],{"class":676},[637,18979,17152],{"class":683},[637,18981,8433],{"class":676},[637,18983,699],{"class":642},[637,18985,17159],{"class":663},[637,18987,705],{"class":642},[637,18989,18990,18992,18994],{"class":639,"line":739},[637,18991,732],{"class":642},[637,18993,647],{"class":646},[637,18995,669],{"class":642},[637,18997,18998],{"class":639,"line":745},[637,18999,742],{"emptyLinePlaceholder":594},[637,19001,19002,19004,19006],{"class":639,"line":755},[637,19003,643],{"class":642},[637,19005,750],{"class":646},[637,19007,669],{"class":642},[637,19009,19010,19012,19014,19016,19018,19020,19023,19025],{"class":639,"line":778},[637,19011,758],{"class":642},[637,19013,761],{"class":646},[637,19015,764],{"class":650},[637,19017,657],{"class":642},[637,19019,660],{"class":642},[637,19021,19022],{"class":663},"#1F90FF",[637,19024,660],{"class":642},[637,19026,669],{"class":642},[637,19028,19029,19031,19033,19035,19037,19039,19042,19044],{"class":639,"line":790},[637,19030,781],{"class":642},[637,19032,784],{"class":646},[637,19034,1485],{"class":650},[637,19036,657],{"class":642},[637,19038,660],{"class":642},[637,19040,19041],{"class":663},"[11, 11, 11]",[637,19043,660],{"class":642},[637,19045,787],{"class":642},[637,19047,19048,19050,19052],{"class":639,"line":800},[637,19049,781],{"class":642},[637,19051,795],{"class":646},[637,19053,787],{"class":642},[637,19055,19056,19058,19060],{"class":639,"line":805},[637,19057,781],{"class":642},[637,19059,17234],{"class":646},[637,19061,787],{"class":642},[637,19063,19064,19066],{"class":639,"line":827},[637,19065,781],{"class":642},[637,19067,17243],{"class":646},[637,19069,19070,19072,19074,19076,19078],{"class":639,"line":631},[637,19071,17248],{"class":650},[637,19073,657],{"class":642},[637,19075,660],{"class":642},[637,19077,820],{"class":663},[637,19079,3131],{"class":642},[637,19081,19082,19084,19086,19088,19090],{"class":639,"line":850},[637,19083,17261],{"class":650},[637,19085,657],{"class":642},[637,19087,660],{"class":642},[637,19089,13280],{"class":663},[637,19091,3131],{"class":642},[637,19093,19094],{"class":639,"line":861},[637,19095,17274],{"class":642},[637,19097,19098,19100,19102,19104,19106,19108,19110,19112],{"class":639,"line":872},[637,19099,781],{"class":642},[637,19101,9681],{"class":646},[637,19103,1867],{"class":650},[637,19105,657],{"class":642},[637,19107,660],{"class":642},[637,19109,1874],{"class":663},[637,19111,660],{"class":642},[637,19113,787],{"class":642},[637,19115,19116,19118,19120],{"class":639,"line":882},[637,19117,905],{"class":642},[637,19119,761],{"class":646},[637,19121,669],{"class":642},[637,19123,19124,19126,19128],{"class":639,"line":632},[637,19125,732],{"class":642},[637,19127,750],{"class":646},[637,19129,669],{"class":642},[504,19131,17400],{"id":17399},[927,19133,19134,19144],{},[930,19135,19136],{},[933,19137,19138,19140,19142],{},[936,19139,8089],{"align":997},[936,19141,5969],{},[936,19143,941],{},[946,19145,19146,19159,19172,19185,19197],{},[933,19147,19148,19152,19156],{},[951,19149,19150],{"align":997},[1669,19151,14787],{},[951,19153,19154],{},[618,19155,4526],{},[951,19157,19158],{},"The loaded FBX model state",[933,19160,19161,19165,19169],{},[951,19162,19163],{"align":997},[1669,19164,11030],{},[951,19166,19167],{},[618,19168,16496],{},[951,19170,19171],{},"Computed object containing all nodes in the scene",[933,19173,19174,19178,19182],{},[951,19175,19176],{"align":997},[1669,19177,528],{},[951,19179,19180],{},[618,19181,16496],{},[951,19183,19184],{},"Computed object containing all materials in the scene",[933,19186,19187,19191,19195],{},[951,19188,19189],{"align":997},[1669,19190,17466],{},[951,19192,19193],{},[618,19194,17564],{},[951,19196,17474],{},[933,19198,19199,19203,19208],{},[951,19200,19201],{"align":997},[1669,19202,17526],{},[951,19204,19205],{},[618,19206,19207],{},"() => Promise\u003Cvoid>",[951,19209,19210],{},"Function to reload the model",[504,19212,14023],{"id":17537},[927,19214,19215,19225],{},[930,19216,19217],{},[933,19218,19219,19221,19223],{},[936,19220,8089],{"align":997},[936,19222,5969],{},[936,19224,941],{},[946,19226,19227],{},[933,19228,19229,19233,19237],{},[951,19230,19231],{"align":997},[1669,19232,17597],{},[951,19234,19235],{},[618,19236,12047],{},[951,19238,17606],{},[504,19240,17610],{"id":17609},[614,19242,17613],{},[626,19244,19246],{"className":1186,"code":19245,"language":664,"meta":576,"style":576},"const { nodes, materials } = useFBX('/model.fbx')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[618,19247,19248,19277,19281,19285,19303,19307,19311],{"__ignoreMap":576},[637,19249,19250,19252,19254,19256,19258,19260,19262,19264,19266,19268,19270,19273,19275],{"class":639,"line":577},[637,19251,2415],{"class":650},[637,19253,680],{"class":642},[637,19255,11061],{"class":683},[637,19257,687],{"class":642},[637,19259,17017],{"class":683},[637,19261,2428],{"class":642},[637,19263,2431],{"class":642},[637,19265,18779],{"class":2434},[637,19267,2437],{"class":683},[637,19269,2440],{"class":642},[637,19271,19272],{"class":663},"/model.fbx",[637,19274,2440],{"class":642},[637,19276,2448],{"class":683},[637,19278,19279],{"class":639,"line":578},[637,19280,742],{"emptyLinePlaceholder":594},[637,19282,19283],{"class":639,"line":708},[637,19284,17656],{"class":1209},[637,19286,19287,19289,19291,19293,19295,19297,19299,19301],{"class":639,"line":729},[637,19288,2415],{"class":650},[637,19290,17663],{"class":683},[637,19292,657],{"class":642},[637,19294,11061],{"class":683},[637,19296,1146],{"class":642},[637,19298,3685],{"class":683},[637,19300,1146],{"class":642},[637,19302,17676],{"class":683},[637,19304,19305],{"class":639,"line":739},[637,19306,742],{"emptyLinePlaceholder":594},[637,19308,19309],{"class":639,"line":745},[637,19310,17685],{"class":1209},[637,19312,19313,19315,19317,19319,19321,19323,19325,19327],{"class":639,"line":755},[637,19314,2415],{"class":650},[637,19316,8404],{"class":683},[637,19318,657],{"class":642},[637,19320,17696],{"class":683},[637,19322,1146],{"class":642},[637,19324,3685],{"class":683},[637,19326,1146],{"class":642},[637,19328,17705],{"class":683},[614,19330,17708],{},[1327,19332,19333],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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":576,"searchDepth":577,"depth":578,"links":19335},[19336,19337,19338,19339],{"id":624,"depth":578,"text":15},{"id":17399,"depth":578,"text":17400},{"id":17537,"depth":578,"text":14023},{"id":17609,"depth":578,"text":17610},"A composable to load FBX models in TresJS scenes.",{},{"title":141,"description":19340},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":19345,"title":145,"body":19346,"description":19979,"extension":591,"links":592,"meta":19980,"navigation":594,"path":146,"seo":19981,"stem":147,"__hash__":19982},"docs/2.api/3.loaders/4.fbx-model.md",{"type":501,"value":19347,"toc":19974},[19348,19352,19361,19363,19691,19693,19701,19914,19916,19971],[2295,19349,19350],{},[18733,19351],{},[614,19353,2776,19354,17970,19356,17976],{},[618,19355,145],{},[1140,19357,19359],{"href":19358},"./use-fbx",[618,19360,141],{},[504,19362,15],{"id":624},[16932,19364,19365,19477],{},[626,19366,19369],{"className":628,"code":19367,"filename":16937,"highlights":19368,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { FBXModel } from '@tresjs/cientos'\n\nconst path = './Jeep_done.fbx'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel :path=\"path\" />\n\u003C/template>\n",[578,778],[618,19370,19371,19391,19411,19415,19430,19438,19442,19450,19469],{"__ignoreMap":576},[637,19372,19373,19375,19377,19379,19381,19383,19385,19387,19389],{"class":639,"line":577},[637,19374,643],{"class":642},[637,19376,647],{"class":646},[637,19378,651],{"class":650},[637,19380,654],{"class":650},[637,19382,657],{"class":642},[637,19384,660],{"class":642},[637,19386,664],{"class":663},[637,19388,660],{"class":642},[637,19390,669],{"class":642},[637,19392,19394,19396,19398,19401,19403,19405,19407,19409],{"class":19393,"line":578},[639,673],[637,19395,677],{"class":676},[637,19397,680],{"class":642},[637,19399,19400],{"class":683}," FBXModel",[637,19402,693],{"class":642},[637,19404,696],{"class":676},[637,19406,699],{"class":642},[637,19408,702],{"class":663},[637,19410,705],{"class":642},[637,19412,19413],{"class":639,"line":708},[637,19414,742],{"emptyLinePlaceholder":594},[637,19416,19417,19419,19421,19423,19425,19428],{"class":639,"line":729},[637,19418,2415],{"class":650},[637,19420,16990],{"class":683},[637,19422,657],{"class":642},[637,19424,699],{"class":642},[637,19426,19427],{"class":663},"./Jeep_done.fbx",[637,19429,705],{"class":642},[637,19431,19432,19434,19436],{"class":639,"line":739},[637,19433,732],{"class":642},[637,19435,647],{"class":646},[637,19437,669],{"class":642},[637,19439,19440],{"class":639,"line":745},[637,19441,742],{"emptyLinePlaceholder":594},[637,19443,19444,19446,19448],{"class":639,"line":755},[637,19445,643],{"class":642},[637,19447,750],{"class":646},[637,19449,669],{"class":642},[637,19451,19453,19455,19457,19459,19461,19463,19465,19467],{"class":19452,"line":778},[639,673],[637,19454,758],{"class":642},[637,19456,145],{"class":646},[637,19458,18074],{"class":650},[637,19460,657],{"class":642},[637,19462,660],{"class":642},[637,19464,18081],{"class":663},[637,19466,660],{"class":642},[637,19468,787],{"class":642},[637,19470,19471,19473,19475],{"class":639,"line":790},[637,19472,732],{"class":642},[637,19474,750],{"class":646},[637,19476,669],{"class":642},[626,19478,19479],{"className":628,"code":17086,"filename":17087,"language":633,"meta":576,"style":576},[618,19480,19481,19501,19519,19537,19551,19559,19563,19571,19589,19607,19615,19623,19629,19641,19653,19657,19675,19683],{"__ignoreMap":576},[637,19482,19483,19485,19487,19489,19491,19493,19495,19497,19499],{"class":639,"line":577},[637,19484,643],{"class":642},[637,19486,647],{"class":646},[637,19488,651],{"class":650},[637,19490,654],{"class":650},[637,19492,657],{"class":642},[637,19494,660],{"class":642},[637,19496,664],{"class":663},[637,19498,660],{"class":642},[637,19500,669],{"class":642},[637,19502,19503,19505,19507,19509,19511,19513,19515,19517],{"class":639,"line":578},[637,19504,677],{"class":676},[637,19506,680],{"class":642},[637,19508,690],{"class":683},[637,19510,693],{"class":642},[637,19512,696],{"class":676},[637,19514,699],{"class":642},[637,19516,702],{"class":663},[637,19518,705],{"class":642},[637,19520,19521,19523,19525,19527,19529,19531,19533,19535],{"class":639,"line":708},[637,19522,677],{"class":676},[637,19524,680],{"class":642},[637,19526,715],{"class":683},[637,19528,693],{"class":642},[637,19530,696],{"class":676},[637,19532,699],{"class":642},[637,19534,724],{"class":663},[637,19536,705],{"class":642},[637,19538,19539,19541,19543,19545,19547,19549],{"class":639,"line":729},[637,19540,677],{"class":676},[637,19542,17152],{"class":683},[637,19544,8433],{"class":676},[637,19546,699],{"class":642},[637,19548,17159],{"class":663},[637,19550,705],{"class":642},[637,19552,19553,19555,19557],{"class":639,"line":739},[637,19554,732],{"class":642},[637,19556,647],{"class":646},[637,19558,669],{"class":642},[637,19560,19561],{"class":639,"line":745},[637,19562,742],{"emptyLinePlaceholder":594},[637,19564,19565,19567,19569],{"class":639,"line":755},[637,19566,643],{"class":642},[637,19568,750],{"class":646},[637,19570,669],{"class":642},[637,19572,19573,19575,19577,19579,19581,19583,19585,19587],{"class":639,"line":778},[637,19574,758],{"class":642},[637,19576,761],{"class":646},[637,19578,764],{"class":650},[637,19580,657],{"class":642},[637,19582,660],{"class":642},[637,19584,17196],{"class":663},[637,19586,660],{"class":642},[637,19588,669],{"class":642},[637,19590,19591,19593,19595,19597,19599,19601,19603,19605],{"class":639,"line":790},[637,19592,781],{"class":642},[637,19594,784],{"class":646},[637,19596,1485],{"class":650},[637,19598,657],{"class":642},[637,19600,660],{"class":642},[637,19602,17215],{"class":663},[637,19604,660],{"class":642},[637,19606,787],{"class":642},[637,19608,19609,19611,19613],{"class":639,"line":800},[637,19610,781],{"class":642},[637,19612,795],{"class":646},[637,19614,787],{"class":642},[637,19616,19617,19619,19621],{"class":639,"line":805},[637,19618,781],{"class":642},[637,19620,17234],{"class":646},[637,19622,787],{"class":642},[637,19624,19625,19627],{"class":639,"line":827},[637,19626,781],{"class":642},[637,19628,17243],{"class":646},[637,19630,19631,19633,19635,19637,19639],{"class":639,"line":631},[637,19632,17248],{"class":650},[637,19634,657],{"class":642},[637,19636,660],{"class":642},[637,19638,820],{"class":663},[637,19640,3131],{"class":642},[637,19642,19643,19645,19647,19649,19651],{"class":639,"line":850},[637,19644,17261],{"class":650},[637,19646,657],{"class":642},[637,19648,660],{"class":642},[637,19650,13280],{"class":663},[637,19652,3131],{"class":642},[637,19654,19655],{"class":639,"line":861},[637,19656,17274],{"class":642},[637,19658,19659,19661,19663,19665,19667,19669,19671,19673],{"class":639,"line":872},[637,19660,781],{"class":642},[637,19662,9681],{"class":646},[637,19664,1867],{"class":650},[637,19666,657],{"class":642},[637,19668,660],{"class":642},[637,19670,1874],{"class":663},[637,19672,660],{"class":642},[637,19674,787],{"class":642},[637,19676,19677,19679,19681],{"class":639,"line":882},[637,19678,905],{"class":642},[637,19680,761],{"class":646},[637,19682,669],{"class":642},[637,19684,19685,19687,19689],{"class":639,"line":632},[637,19686,732],{"class":642},[637,19688,750],{"class":646},[637,19690,669],{"class":642},[504,19692,18311],{"id":18310},[614,19694,19695,19696,1677,19698,19700],{},"You can access the model reference by passing a ",[618,19697,5894],{},[618,19699,145],{}," component and then using it to get the object.",[626,19702,19704],{"className":628,"code":19703,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from '@tresjs/core'\nimport { FBXModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n  // Do something with the model\n  model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx\"\n  />\n\u003C/template>\n",[618,19705,19706,19726,19747,19765,19769,19788,19792,19812,19817,19844,19850,19858,19862,19870,19877,19889,19902,19906],{"__ignoreMap":576},[637,19707,19708,19710,19712,19714,19716,19718,19720,19722,19724],{"class":639,"line":577},[637,19709,643],{"class":642},[637,19711,647],{"class":646},[637,19713,651],{"class":650},[637,19715,654],{"class":650},[637,19717,657],{"class":642},[637,19719,660],{"class":642},[637,19721,664],{"class":663},[637,19723,660],{"class":642},[637,19725,669],{"class":642},[637,19727,19728,19730,19732,19734,19737,19739,19741,19743,19745],{"class":639,"line":578},[637,19729,677],{"class":676},[637,19731,3442],{"class":676},[637,19733,680],{"class":642},[637,19735,19736],{"class":683}," TresObject",[637,19738,693],{"class":642},[637,19740,696],{"class":676},[637,19742,699],{"class":642},[637,19744,724],{"class":663},[637,19746,705],{"class":642},[637,19748,19749,19751,19753,19755,19757,19759,19761,19763],{"class":639,"line":708},[637,19750,677],{"class":676},[637,19752,680],{"class":642},[637,19754,19400],{"class":683},[637,19756,693],{"class":642},[637,19758,696],{"class":676},[637,19760,699],{"class":642},[637,19762,702],{"class":663},[637,19764,705],{"class":642},[637,19766,19767],{"class":639,"line":729},[637,19768,742],{"emptyLinePlaceholder":594},[637,19770,19771,19773,19775,19777,19779,19781,19784,19786],{"class":639,"line":739},[637,19772,2415],{"class":650},[637,19774,18393],{"class":683},[637,19776,657],{"class":642},[637,19778,3498],{"class":2434},[637,19780,643],{"class":642},[637,19782,19783],{"class":1200},"TresObject",[637,19785,3651],{"class":642},[637,19787,6535],{"class":683},[637,19789,19790],{"class":639,"line":745},[637,19791,742],{"emptyLinePlaceholder":594},[637,19793,19794,19796,19799,19801,19803,19806,19808,19810],{"class":639,"line":755},[637,19795,12189],{"class":2434},[637,19797,19798],{"class":683},"(modelRef",[637,19800,687],{"class":642},[637,19802,3074],{"class":642},[637,19804,19805],{"class":6838},"model",[637,19807,3340],{"class":642},[637,19809,3677],{"class":650},[637,19811,1204],{"class":642},[637,19813,19814],{"class":639,"line":778},[637,19815,19816],{"class":1209},"  // Do something with the model\n",[637,19818,19819,19822,19824,19826,19828,19830,19832,19834,19836,19838,19840,19842],{"class":639,"line":790},[637,19820,19821],{"class":683},"  model",[637,19823,1146],{"class":642},[637,19825,4130],{"class":683},[637,19827,1146],{"class":642},[637,19829,18473],{"class":2434},[637,19831,2437],{"class":646},[637,19833,965],{"class":2501},[637,19835,687],{"class":642},[637,19837,2506],{"class":2501},[637,19839,687],{"class":642},[637,19841,2506],{"class":2501},[637,19843,2448],{"class":646},[637,19845,19846,19848],{"class":639,"line":800},[637,19847,2428],{"class":642},[637,19849,2448],{"class":683},[637,19851,19852,19854,19856],{"class":639,"line":805},[637,19853,732],{"class":642},[637,19855,647],{"class":646},[637,19857,669],{"class":642},[637,19859,19860],{"class":639,"line":827},[637,19861,742],{"emptyLinePlaceholder":594},[637,19863,19864,19866,19868],{"class":639,"line":631},[637,19865,643],{"class":642},[637,19867,750],{"class":646},[637,19869,669],{"class":642},[637,19871,19872,19874],{"class":639,"line":850},[637,19873,758],{"class":642},[637,19875,19876],{"class":646},"FBXModel\n",[637,19878,19879,19881,19883,19885,19887],{"class":639,"line":861},[637,19880,18525],{"class":650},[637,19882,657],{"class":642},[637,19884,660],{"class":642},[637,19886,18532],{"class":663},[637,19888,3131],{"class":642},[637,19890,19891,19893,19895,19897,19900],{"class":639,"line":872},[637,19892,18539],{"class":650},[637,19894,657],{"class":642},[637,19896,660],{"class":642},[637,19898,19899],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[637,19901,3131],{"class":642},[637,19903,19904],{"class":639,"line":882},[637,19905,13995],{"class":642},[637,19907,19908,19910,19912],{"class":639,"line":632},[637,19909,732],{"class":642},[637,19911,750],{"class":646},[637,19913,669],{"class":642},[504,19915,922],{"id":921},[927,19917,19918,19928],{},[930,19919,19920],{},[933,19921,19922,19924,19926],{},[936,19923,938],{"align":997},[936,19925,941],{"align":997},[936,19927,944],{},[946,19929,19930,19943,19957],{},[933,19931,19932,19936,19939],{},[951,19933,19934],{"align":997},[618,19935,18081],{},[951,19937,19938],{"align":997},"Path to the model file.",[951,19940,19941],{},[618,19942,1179],{},[933,19944,19945,19949,19953],{},[951,19946,19947],{"align":997},[618,19948,18630],{},[951,19950,18633,19951,18637],{"align":997},[618,19952,18636],{},[951,19954,19955],{},[618,19956,971],{},[933,19958,19959,19963,19967],{},[951,19960,19961],{"align":997},[618,19962,18648],{},[951,19964,18633,19965,18637],{"align":997},[618,19966,18653],{},[951,19968,19969],{},[618,19970,971],{},[1327,19972,19973],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":19975},[19976,19977,19978],{"id":624,"depth":578,"text":15},{"id":18310,"depth":578,"text":18311},{"id":921,"depth":578,"text":922},"A component based on useFBX to load models in TresJS scenes.",{},{"title":145,"description":19979},"TBLk7umsoiJ37LzeU-f61yMZeJFhhM1KU9F-kfrD_I8",{"id":19984,"title":149,"body":19985,"description":20614,"extension":591,"links":592,"meta":20615,"navigation":594,"path":150,"seo":20616,"stem":151,"__hash__":20617},"docs/2.api/3.loaders/5.use-texture.md",{"type":501,"value":19986,"toc":20608},[19987,19992,20003,20005,20157,20159,20211,20213,20268,20272,20279,20605],[2295,19988,19989],{},[19990,19991],"loaders-use-texture",{},[614,19993,19994,19995,20000,20001,16928],{},"A composable that allows you to load textures using the ",[1140,19996,19999],{"href":19997,"rel":19998},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1144],"Three.js texture loader"," into your ",[1669,20002,16927],{},[504,20004,15],{"id":624},[626,20006,20009],{"className":628,"code":20007,"highlights":20008,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useTexture } from '@tresjs/cientos'\n\nconst { state: texture, isLoading, error } = useTexture(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :map=\"texture\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[578,729,800],[618,20010,20011,20031,20050,20054,20086,20094,20098,20106,20114,20122,20141,20149],{"__ignoreMap":576},[637,20012,20013,20015,20017,20019,20021,20023,20025,20027,20029],{"class":639,"line":577},[637,20014,643],{"class":642},[637,20016,647],{"class":646},[637,20018,651],{"class":650},[637,20020,654],{"class":650},[637,20022,657],{"class":642},[637,20024,660],{"class":642},[637,20026,664],{"class":663},[637,20028,660],{"class":642},[637,20030,669],{"class":642},[637,20032,20034,20036,20038,20040,20042,20044,20046,20048],{"class":20033,"line":578},[639,673],[637,20035,677],{"class":676},[637,20037,680],{"class":642},[637,20039,2359],{"class":683},[637,20041,693],{"class":642},[637,20043,696],{"class":676},[637,20045,699],{"class":642},[637,20047,702],{"class":663},[637,20049,705],{"class":642},[637,20051,20052],{"class":639,"line":708},[637,20053,742],{"emptyLinePlaceholder":594},[637,20055,20057,20059,20061,20063,20065,20068,20070,20073,20075,20078,20080,20082,20084],{"class":20056,"line":729},[639,673],[637,20058,2415],{"class":650},[637,20060,680],{"class":642},[637,20062,2420],{"class":646},[637,20064,1218],{"class":642},[637,20066,20067],{"class":683}," texture",[637,20069,687],{"class":642},[637,20071,20072],{"class":683}," isLoading",[637,20074,687],{"class":642},[637,20076,20077],{"class":683}," error ",[637,20079,2428],{"class":642},[637,20081,2431],{"class":642},[637,20083,2359],{"class":2434},[637,20085,17026],{"class":683},[637,20087,20088,20090,20092],{"class":639,"line":739},[637,20089,732],{"class":642},[637,20091,647],{"class":646},[637,20093,669],{"class":642},[637,20095,20096],{"class":639,"line":745},[637,20097,742],{"emptyLinePlaceholder":594},[637,20099,20100,20102,20104],{"class":639,"line":755},[637,20101,643],{"class":642},[637,20103,750],{"class":646},[637,20105,669],{"class":642},[637,20107,20108,20110,20112],{"class":639,"line":778},[637,20109,758],{"class":642},[637,20111,856],{"class":646},[637,20113,669],{"class":642},[637,20115,20116,20118,20120],{"class":639,"line":790},[637,20117,781],{"class":642},[637,20119,3958],{"class":646},[637,20121,787],{"class":642},[637,20123,20125,20127,20129,20131,20133,20135,20137,20139],{"class":20124,"line":800},[639,673],[637,20126,781],{"class":642},[637,20128,2686],{"class":646},[637,20130,2734],{"class":650},[637,20132,657],{"class":642},[637,20134,660],{"class":642},[637,20136,2717],{"class":663},[637,20138,660],{"class":642},[637,20140,787],{"class":642},[637,20142,20143,20145,20147],{"class":639,"line":805},[637,20144,905],{"class":642},[637,20146,856],{"class":646},[637,20148,669],{"class":642},[637,20150,20151,20153,20155],{"class":639,"line":827},[637,20152,732],{"class":642},[637,20154,750],{"class":646},[637,20156,669],{"class":642},[504,20158,14023],{"id":17537},[927,20160,20161,20173],{},[930,20162,20163],{},[933,20164,20165,20167,20169,20171],{},[936,20166,8089],{"align":997},[936,20168,5969],{},[936,20170,944],{},[936,20172,941],{},[946,20174,20175,20192],{},[933,20176,20177,20181,20185,20189],{},[951,20178,20179],{"align":997},[1669,20180,18081],{},[951,20182,20183],{},[618,20184,3572],{},[951,20186,20187],{},[618,20188,1179],{},[951,20190,20191],{},"The path to the texture.",[933,20193,20194,20199,20204,20208],{},[951,20195,20196],{"align":997},[1669,20197,20198],{},"manager",[951,20200,20201],{},[618,20202,20203],{},"THREE.LoadingManager",[951,20205,20206],{},[618,20207,1179],{},[951,20209,20210],{},"The loading manager to use for the texture.",[504,20212,17400],{"id":17399},[927,20214,20215,20225],{},[930,20216,20217],{},[933,20218,20219,20221,20223],{},[936,20220,8089],{"align":997},[936,20222,5969],{"align":997},[936,20224,941],{"align":997},[946,20226,20227,20241,20254],{},[933,20228,20229,20233,20238],{},[951,20230,20231],{"align":997},[618,20232,14787],{},[951,20234,20235],{"align":997},[618,20236,20237],{},"Texture | null",[951,20239,20240],{"align":997},"The loaded texture",[933,20242,20243,20247,20251],{},[951,20244,20245],{"align":997},[618,20246,17466],{},[951,20248,20249],{"align":997},[618,20250,17564],{},[951,20252,20253],{"align":997},"Whether the texture is loading",[933,20255,20256,20260,20265],{},[951,20257,20258],{"align":997},[618,20259,17481],{},[951,20261,20262],{"align":997},[618,20263,20264],{},"string | null",[951,20266,20267],{"align":997},"Error message if loading failed",[504,20269,20271],{"id":20270},"component-usage","Component Usage",[614,20273,20274,20275,20278],{},"You can also use the ",[618,20276,20277],{},"UseTexture"," component directly in your template:",[626,20280,20283],{"className":628,"code":20281,"highlights":20282,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { UseTexture } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'\n\nconst handleLoaded = (texture: Texture) => {\n  console.log('Loaded texture', texture)\n}\n\nconst handleError = (error: unknown) => {\n  console.error('error', error)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUseTexture\n    v-slot=\"{ state: texture }\"\n    :path=\"path\"\n    @loaded=\"handleLoaded\"\n    @error=\"handleError\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial :map=\"texture\" />\n    \u003C/TresMesh>\n  \u003C/UseTexture>\n\u003C/template>\n",[578,872,882,632,902,912,2625,2681],[618,20284,20285,20305,20325,20329,20344,20348,20372,20395,20399,20403,20427,20450,20454,20462,20466,20474,20482,20497,20511,20526,20541,20546,20554,20562,20580,20588,20597],{"__ignoreMap":576},[637,20286,20287,20289,20291,20293,20295,20297,20299,20301,20303],{"class":639,"line":577},[637,20288,643],{"class":642},[637,20290,647],{"class":646},[637,20292,651],{"class":650},[637,20294,654],{"class":650},[637,20296,657],{"class":642},[637,20298,660],{"class":642},[637,20300,664],{"class":663},[637,20302,660],{"class":642},[637,20304,669],{"class":642},[637,20306,20308,20310,20312,20315,20317,20319,20321,20323],{"class":20307,"line":578},[639,673],[637,20309,677],{"class":676},[637,20311,680],{"class":642},[637,20313,20314],{"class":683}," UseTexture",[637,20316,693],{"class":642},[637,20318,696],{"class":676},[637,20320,699],{"class":642},[637,20322,702],{"class":663},[637,20324,705],{"class":642},[637,20326,20327],{"class":639,"line":708},[637,20328,742],{"emptyLinePlaceholder":594},[637,20330,20331,20333,20335,20337,20339,20342],{"class":639,"line":729},[637,20332,2415],{"class":650},[637,20334,16990],{"class":683},[637,20336,657],{"class":642},[637,20338,699],{"class":642},[637,20340,20341],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[637,20343,705],{"class":642},[637,20345,20346],{"class":639,"line":739},[637,20347,742],{"emptyLinePlaceholder":594},[637,20349,20350,20352,20355,20357,20359,20361,20363,20366,20368,20370],{"class":639,"line":745},[637,20351,2415],{"class":650},[637,20353,20354],{"class":683}," handleLoaded ",[637,20356,657],{"class":642},[637,20358,3074],{"class":642},[637,20360,2717],{"class":6838},[637,20362,1218],{"class":642},[637,20364,20365],{"class":1200}," Texture",[637,20367,3340],{"class":642},[637,20369,3677],{"class":650},[637,20371,1204],{"class":642},[637,20373,20374,20376,20378,20380,20382,20384,20387,20389,20391,20393],{"class":639,"line":755},[637,20375,6854],{"class":683},[637,20377,1146],{"class":642},[637,20379,6859],{"class":2434},[637,20381,2437],{"class":646},[637,20383,2440],{"class":642},[637,20385,20386],{"class":663},"Loaded texture",[637,20388,2440],{"class":642},[637,20390,687],{"class":642},[637,20392,20067],{"class":683},[637,20394,2448],{"class":646},[637,20396,20397],{"class":639,"line":778},[637,20398,1325],{"class":642},[637,20400,20401],{"class":639,"line":790},[637,20402,742],{"emptyLinePlaceholder":594},[637,20404,20405,20407,20410,20412,20414,20416,20418,20421,20423,20425],{"class":639,"line":800},[637,20406,2415],{"class":650},[637,20408,20409],{"class":683}," handleError ",[637,20411,657],{"class":642},[637,20413,3074],{"class":642},[637,20415,17481],{"class":6838},[637,20417,1218],{"class":642},[637,20419,20420],{"class":1200}," unknown",[637,20422,3340],{"class":642},[637,20424,3677],{"class":650},[637,20426,1204],{"class":642},[637,20428,20429,20431,20433,20435,20437,20439,20441,20443,20445,20448],{"class":639,"line":805},[637,20430,6854],{"class":683},[637,20432,1146],{"class":642},[637,20434,17481],{"class":2434},[637,20436,2437],{"class":646},[637,20438,2440],{"class":642},[637,20440,17481],{"class":663},[637,20442,2440],{"class":642},[637,20444,687],{"class":642},[637,20446,20447],{"class":683}," error",[637,20449,2448],{"class":646},[637,20451,20452],{"class":639,"line":827},[637,20453,1325],{"class":642},[637,20455,20456,20458,20460],{"class":639,"line":631},[637,20457,732],{"class":642},[637,20459,647],{"class":646},[637,20461,669],{"class":642},[637,20463,20464],{"class":639,"line":850},[637,20465,742],{"emptyLinePlaceholder":594},[637,20467,20468,20470,20472],{"class":639,"line":861},[637,20469,643],{"class":642},[637,20471,750],{"class":646},[637,20473,669],{"class":642},[637,20475,20477,20479],{"class":20476,"line":872},[639,673],[637,20478,758],{"class":642},[637,20480,20481],{"class":646},"UseTexture\n",[637,20483,20485,20488,20490,20492,20495],{"class":20484,"line":882},[639,673],[637,20486,20487],{"class":650},"    v-slot",[637,20489,657],{"class":642},[637,20491,660],{"class":642},[637,20493,20494],{"class":663},"{ state: texture }",[637,20496,3131],{"class":642},[637,20498,20500,20503,20505,20507,20509],{"class":20499,"line":632},[639,673],[637,20501,20502],{"class":650},"    :path",[637,20504,657],{"class":642},[637,20506,660],{"class":642},[637,20508,18081],{"class":663},[637,20510,3131],{"class":642},[637,20512,20514,20517,20519,20521,20524],{"class":20513,"line":902},[639,673],[637,20515,20516],{"class":650},"    @loaded",[637,20518,657],{"class":642},[637,20520,660],{"class":642},[637,20522,20523],{"class":663},"handleLoaded",[637,20525,3131],{"class":642},[637,20527,20529,20532,20534,20536,20539],{"class":20528,"line":912},[639,673],[637,20530,20531],{"class":650},"    @error",[637,20533,657],{"class":642},[637,20535,660],{"class":642},[637,20537,20538],{"class":663},"handleError",[637,20540,3131],{"class":642},[637,20542,20544],{"class":20543,"line":2625},[639,673],[637,20545,5173],{"class":642},[637,20547,20548,20550,20552],{"class":639,"line":2634},[637,20549,781],{"class":642},[637,20551,856],{"class":646},[637,20553,669],{"class":642},[637,20555,20556,20558,20560],{"class":639,"line":2654},[637,20557,853],{"class":642},[637,20559,3958],{"class":646},[637,20561,787],{"class":642},[637,20563,20564,20566,20568,20570,20572,20574,20576,20578],{"class":639,"line":2663},[637,20565,853],{"class":642},[637,20567,2686],{"class":646},[637,20569,2734],{"class":650},[637,20571,657],{"class":642},[637,20573,660],{"class":642},[637,20575,2717],{"class":663},[637,20577,660],{"class":642},[637,20579,787],{"class":642},[637,20581,20582,20584,20586],{"class":639,"line":2672},[637,20583,895],{"class":642},[637,20585,856],{"class":646},[637,20587,669],{"class":642},[637,20589,20591,20593,20595],{"class":20590,"line":2681},[639,673],[637,20592,905],{"class":642},[637,20594,20277],{"class":646},[637,20596,669],{"class":642},[637,20598,20599,20601,20603],{"class":639,"line":2703},[637,20600,732],{"class":642},[637,20602,750],{"class":646},[637,20604,669],{"class":642},[1327,20606,20607],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":20609},[20610,20611,20612,20613],{"id":624,"depth":578,"text":15},{"id":17537,"depth":578,"text":14023},{"id":17399,"depth":578,"text":17400},{"id":20270,"depth":578,"text":20271},"A composable to load textures in TresJS scenes.",{},{"title":149,"description":20614},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":20619,"title":153,"body":20620,"description":22060,"extension":591,"links":592,"meta":22061,"navigation":594,"path":154,"seo":22062,"stem":155,"__hash__":22063},"docs/2.api/3.loaders/6.use-textures.md",{"type":501,"value":20621,"toc":22051},[20622,20627,20635,20637,20883,20887,20890,21917,21921,21925,21960,21964,22018,22022,22048],[2295,20623,20624],{},[20625,20626],"loaders-use-textures",{},[614,20628,20629,20630,20000,20633,16928],{},"A composable that allows you to load multiple textures at once using the ",[1140,20631,19999],{"href":19997,"rel":20632},[1144],[1669,20634,16927],{},[504,20636,15],{"id":624},[626,20638,20641],{"className":628,"code":20639,"highlights":20640,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useTextures } from '@tresjs/cientos'\n\n// Define an array of texture paths\nconst texturePaths = [\n  '/textures/color.jpg',\n  '/textures/normal.jpg',\n  '/textures/roughness.jpg'\n]\n\n// Load all textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial\n      :map=\"textures[0]\"\n      :normal-map=\"textures[1]\"\n      :roughness-map=\"textures[2]\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n",[578,827,902,912,2625],[618,20642,20643,20663,20682,20686,20691,20703,20714,20725,20734,20739,20743,20748,20775,20783,20787,20795,20803,20811,20818,20833,20848,20863,20867,20875],{"__ignoreMap":576},[637,20644,20645,20647,20649,20651,20653,20655,20657,20659,20661],{"class":639,"line":577},[637,20646,643],{"class":642},[637,20648,647],{"class":646},[637,20650,651],{"class":650},[637,20652,654],{"class":650},[637,20654,657],{"class":642},[637,20656,660],{"class":642},[637,20658,664],{"class":663},[637,20660,660],{"class":642},[637,20662,669],{"class":642},[637,20664,20666,20668,20670,20672,20674,20676,20678,20680],{"class":20665,"line":578},[639,673],[637,20667,677],{"class":676},[637,20669,680],{"class":642},[637,20671,2840],{"class":683},[637,20673,693],{"class":642},[637,20675,696],{"class":676},[637,20677,699],{"class":642},[637,20679,702],{"class":663},[637,20681,705],{"class":642},[637,20683,20684],{"class":639,"line":708},[637,20685,742],{"emptyLinePlaceholder":594},[637,20687,20688],{"class":639,"line":729},[637,20689,20690],{"class":1209},"// Define an array of texture paths\n",[637,20692,20693,20695,20698,20700],{"class":639,"line":739},[637,20694,2415],{"class":650},[637,20696,20697],{"class":683}," texturePaths ",[637,20699,657],{"class":642},[637,20701,20702],{"class":683}," [\n",[637,20704,20705,20707,20710,20712],{"class":639,"line":745},[637,20706,2876],{"class":642},[637,20708,20709],{"class":663},"/textures/color.jpg",[637,20711,2440],{"class":642},[637,20713,2488],{"class":642},[637,20715,20716,20718,20721,20723],{"class":639,"line":755},[637,20717,2876],{"class":642},[637,20719,20720],{"class":663},"/textures/normal.jpg",[637,20722,2440],{"class":642},[637,20724,2488],{"class":642},[637,20726,20727,20729,20732],{"class":639,"line":778},[637,20728,2876],{"class":642},[637,20730,20731],{"class":663},"/textures/roughness.jpg",[637,20733,705],{"class":642},[637,20735,20736],{"class":639,"line":790},[637,20737,20738],{"class":683},"]\n",[637,20740,20741],{"class":639,"line":800},[637,20742,742],{"emptyLinePlaceholder":594},[637,20744,20745],{"class":639,"line":805},[637,20746,20747],{"class":1209},"// Load all textures at once\n",[637,20749,20751,20753,20755,20758,20760,20762,20764,20766,20768,20770,20772],{"class":20750,"line":827},[639,673],[637,20752,2415],{"class":650},[637,20754,680],{"class":642},[637,20756,20757],{"class":683}," textures",[637,20759,687],{"class":642},[637,20761,20072],{"class":683},[637,20763,687],{"class":642},[637,20765,20077],{"class":683},[637,20767,2428],{"class":642},[637,20769,2431],{"class":642},[637,20771,2840],{"class":2434},[637,20773,20774],{"class":683},"(texturePaths)\n",[637,20776,20777,20779,20781],{"class":639,"line":631},[637,20778,732],{"class":642},[637,20780,647],{"class":646},[637,20782,669],{"class":642},[637,20784,20785],{"class":639,"line":850},[637,20786,742],{"emptyLinePlaceholder":594},[637,20788,20789,20791,20793],{"class":639,"line":861},[637,20790,643],{"class":642},[637,20792,750],{"class":646},[637,20794,669],{"class":642},[637,20796,20797,20799,20801],{"class":639,"line":872},[637,20798,758],{"class":642},[637,20800,856],{"class":646},[637,20802,669],{"class":642},[637,20804,20805,20807,20809],{"class":639,"line":882},[637,20806,781],{"class":642},[637,20808,3958],{"class":646},[637,20810,787],{"class":642},[637,20812,20813,20815],{"class":639,"line":632},[637,20814,781],{"class":642},[637,20816,20817],{"class":646},"TresMeshStandardMaterial\n",[637,20819,20821,20824,20826,20828,20831],{"class":20820,"line":902},[639,673],[637,20822,20823],{"class":650},"      :map",[637,20825,657],{"class":642},[637,20827,660],{"class":642},[637,20829,20830],{"class":663},"textures[0]",[637,20832,3131],{"class":642},[637,20834,20836,20839,20841,20843,20846],{"class":20835,"line":912},[639,673],[637,20837,20838],{"class":650},"      :normal-map",[637,20840,657],{"class":642},[637,20842,660],{"class":642},[637,20844,20845],{"class":663},"textures[1]",[637,20847,3131],{"class":642},[637,20849,20851,20854,20856,20858,20861],{"class":20850,"line":2625},[639,673],[637,20852,20853],{"class":650},"      :roughness-map",[637,20855,657],{"class":642},[637,20857,660],{"class":642},[637,20859,20860],{"class":663},"textures[2]",[637,20862,3131],{"class":642},[637,20864,20865],{"class":639,"line":2634},[637,20866,17274],{"class":642},[637,20868,20869,20871,20873],{"class":639,"line":2654},[637,20870,905],{"class":642},[637,20872,856],{"class":646},[637,20874,669],{"class":642},[637,20876,20877,20879,20881],{"class":639,"line":2663},[637,20878,732],{"class":642},[637,20880,750],{"class":646},[637,20882,669],{"class":642},[504,20884,20886],{"id":20885},"pbr-textures-example","PBR Textures Example",[614,20888,20889],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[626,20891,20894],{"className":628,"code":20892,"filename":20893,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'\nimport { MeshStandardMaterial } from 'three'\n\n// Load the 3D model\nconst { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })\nconst cube = computed(() => model.value?.nodes?.BlenderCube)\nconst material = computed(() => model.value?.materials?.Material)\n\n// Define texture paths\nconst texturePaths = [\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'\n]\n\n// Load all PBR textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\n// Apply textures to material when loaded\nwatch([material, textures], ([modelMaterial, textures]) => {\n  if (modelMaterial && textures && textures.length === texturePaths.length) {\n    // Cast to MeshStandardMaterial to access PBR properties\n    const pbrMaterial = modelMaterial as MeshStandardMaterial\n\n    // Apply textures\n    pbrMaterial.map = textures[0]\n    pbrMaterial.normalMap = textures[1]\n    pbrMaterial.roughnessMap = textures[2]\n    pbrMaterial.metalnessMap = textures[3]\n    pbrMaterial.displacementMap = textures[4]\n\n    // Set material properties\n    pbrMaterial.displacementScale = 0\n    pbrMaterial.metalness = 0.8\n    pbrMaterial.roughness = 0.2\n  }\n})\n\n// Handle loading state and errors\nwatch(isLoading, (_loading) => {\n  // Handle loading state\n})\n\nwatch(error, (errs) => {\n  if (errs) {\n    console.error('Error loading textures:', errs)\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CSuspense>\n      \u003CEnvironment preset=\"studio\" background :blur=\"1\" />\n    \u003C/Suspense>\n    \u003CTresPerspectiveCamera :position=\"[8, 8, 8]\" />\n    \u003COrbitControls />\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight :intensity=\"2\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[5, 5, 5]\" :intensity=\"0.5\" color=\"#ff0000\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[-5, 2, 2]\" :intensity=\"0.5\" color=\"#0000ff\" />\n    \u003CTresGroup position-y=\"2\">\n      \u003Cprimitive v-if=\"cube\" :object=\"cube\" />\n    \u003C/TresGroup>\n  \u003C/TresCanvas>\n\u003C/template>\n","PBRTextures.vue",[618,20895,20896,20916,20939,20970,20988,20992,20997,21038,21070,21101,21105,21110,21120,21131,21142,21153,21164,21173,21177,21181,21186,21210,21214,21219,21250,21287,21292,21311,21315,21320,21339,21358,21377,21397,21416,21420,21425,21439,21454,21469,21474,21481,21486,21492,21513,21519,21526,21531,21552,21565,21591,21596,21603,21612,21617,21626,21645,21655,21690,21699,21719,21728,21737,21756,21799,21841,21861,21890,21899,21908],{"__ignoreMap":576},[637,20897,20898,20900,20902,20904,20906,20908,20910,20912,20914],{"class":639,"line":577},[637,20899,643],{"class":642},[637,20901,647],{"class":646},[637,20903,651],{"class":650},[637,20905,654],{"class":650},[637,20907,657],{"class":642},[637,20909,660],{"class":642},[637,20911,664],{"class":663},[637,20913,660],{"class":642},[637,20915,669],{"class":642},[637,20917,20918,20920,20922,20924,20926,20929,20931,20933,20935,20937],{"class":639,"line":578},[637,20919,677],{"class":676},[637,20921,680],{"class":642},[637,20923,715],{"class":683},[637,20925,687],{"class":642},[637,20927,20928],{"class":683}," vLightHelper",[637,20930,693],{"class":642},[637,20932,696],{"class":676},[637,20934,699],{"class":642},[637,20936,724],{"class":663},[637,20938,705],{"class":642},[637,20940,20941,20943,20945,20948,20950,20952,20954,20956,20958,20960,20962,20964,20966,20968],{"class":639,"line":708},[637,20942,677],{"class":676},[637,20944,680],{"class":642},[637,20946,20947],{"class":683}," Environment",[637,20949,687],{"class":642},[637,20951,690],{"class":683},[637,20953,687],{"class":642},[637,20955,4347],{"class":683},[637,20957,687],{"class":642},[637,20959,2840],{"class":683},[637,20961,693],{"class":642},[637,20963,696],{"class":676},[637,20965,699],{"class":642},[637,20967,702],{"class":663},[637,20969,705],{"class":642},[637,20971,20972,20974,20976,20978,20980,20982,20984,20986],{"class":639,"line":729},[637,20973,677],{"class":676},[637,20975,680],{"class":642},[637,20977,8354],{"class":683},[637,20979,693],{"class":642},[637,20981,696],{"class":676},[637,20983,699],{"class":642},[637,20985,4626],{"class":663},[637,20987,705],{"class":642},[637,20989,20990],{"class":639,"line":739},[637,20991,742],{"emptyLinePlaceholder":594},[637,20993,20994],{"class":639,"line":745},[637,20995,20996],{"class":1209},"// Load the 3D model\n",[637,20998,20999,21001,21003,21005,21007,21009,21011,21013,21015,21017,21019,21022,21024,21026,21028,21030,21032,21034,21036],{"class":639,"line":755},[637,21000,2415],{"class":650},[637,21002,680],{"class":642},[637,21004,2420],{"class":646},[637,21006,1218],{"class":642},[637,21008,5009],{"class":683},[637,21010,2428],{"class":642},[637,21012,2431],{"class":642},[637,21014,4347],{"class":2434},[637,21016,2437],{"class":683},[637,21018,2440],{"class":642},[637,21020,21021],{"class":663},"/blender-cube-draco.glb",[637,21023,2440],{"class":642},[637,21025,687],{"class":642},[637,21027,680],{"class":642},[637,21029,4392],{"class":646},[637,21031,1218],{"class":642},[637,21033,4398],{"class":4397},[637,21035,693],{"class":642},[637,21037,2448],{"class":683},[637,21039,21040,21042,21045,21047,21049,21051,21053,21055,21057,21059,21061,21063,21065,21067],{"class":639,"line":778},[637,21041,2415],{"class":650},[637,21043,21044],{"class":683}," cube ",[637,21046,657],{"class":642},[637,21048,3489],{"class":2434},[637,21050,2437],{"class":683},[637,21052,3674],{"class":642},[637,21054,3677],{"class":650},[637,21056,5048],{"class":683},[637,21058,1146],{"class":642},[637,21060,3685],{"class":683},[637,21062,3688],{"class":642},[637,21064,11030],{"class":683},[637,21066,3688],{"class":642},[637,21068,21069],{"class":683},"BlenderCube)\n",[637,21071,21072,21074,21076,21078,21080,21082,21084,21086,21088,21090,21092,21094,21096,21098],{"class":639,"line":790},[637,21073,2415],{"class":650},[637,21075,8404],{"class":683},[637,21077,657],{"class":642},[637,21079,3489],{"class":2434},[637,21081,2437],{"class":683},[637,21083,3674],{"class":642},[637,21085,3677],{"class":650},[637,21087,5048],{"class":683},[637,21089,1146],{"class":642},[637,21091,3685],{"class":683},[637,21093,3688],{"class":642},[637,21095,528],{"class":683},[637,21097,3688],{"class":642},[637,21099,21100],{"class":683},"Material)\n",[637,21102,21103],{"class":639,"line":800},[637,21104,742],{"emptyLinePlaceholder":594},[637,21106,21107],{"class":639,"line":805},[637,21108,21109],{"class":1209},"// Define texture paths\n",[637,21111,21112,21114,21116,21118],{"class":639,"line":827},[637,21113,2415],{"class":650},[637,21115,20697],{"class":683},[637,21117,657],{"class":642},[637,21119,20702],{"class":683},[637,21121,21122,21124,21127,21129],{"class":639,"line":631},[637,21123,2876],{"class":642},[637,21125,21126],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[637,21128,2440],{"class":642},[637,21130,2488],{"class":642},[637,21132,21133,21135,21138,21140],{"class":639,"line":850},[637,21134,2876],{"class":642},[637,21136,21137],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[637,21139,2440],{"class":642},[637,21141,2488],{"class":642},[637,21143,21144,21146,21149,21151],{"class":639,"line":861},[637,21145,2876],{"class":642},[637,21147,21148],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[637,21150,2440],{"class":642},[637,21152,2488],{"class":642},[637,21154,21155,21157,21160,21162],{"class":639,"line":872},[637,21156,2876],{"class":642},[637,21158,21159],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[637,21161,2440],{"class":642},[637,21163,2488],{"class":642},[637,21165,21166,21168,21171],{"class":639,"line":882},[637,21167,2876],{"class":642},[637,21169,21170],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[637,21172,705],{"class":642},[637,21174,21175],{"class":639,"line":632},[637,21176,20738],{"class":683},[637,21178,21179],{"class":639,"line":902},[637,21180,742],{"emptyLinePlaceholder":594},[637,21182,21183],{"class":639,"line":912},[637,21184,21185],{"class":1209},"// Load all PBR textures at once\n",[637,21187,21188,21190,21192,21194,21196,21198,21200,21202,21204,21206,21208],{"class":639,"line":2625},[637,21189,2415],{"class":650},[637,21191,680],{"class":642},[637,21193,20757],{"class":683},[637,21195,687],{"class":642},[637,21197,20072],{"class":683},[637,21199,687],{"class":642},[637,21201,20077],{"class":683},[637,21203,2428],{"class":642},[637,21205,2431],{"class":642},[637,21207,2840],{"class":2434},[637,21209,20774],{"class":683},[637,21211,21212],{"class":639,"line":2634},[637,21213,742],{"emptyLinePlaceholder":594},[637,21215,21216],{"class":639,"line":2654},[637,21217,21218],{"class":1209},"// Apply textures to material when loaded\n",[637,21220,21221,21223,21226,21228,21231,21233,21236,21239,21241,21243,21246,21248],{"class":639,"line":2663},[637,21222,12189],{"class":2434},[637,21224,21225],{"class":683},"([material",[637,21227,687],{"class":642},[637,21229,21230],{"class":683}," textures]",[637,21232,687],{"class":642},[637,21234,21235],{"class":642}," ([",[637,21237,21238],{"class":6838},"modelMaterial",[637,21240,687],{"class":642},[637,21242,20757],{"class":6838},[637,21244,21245],{"class":642},"])",[637,21247,3677],{"class":650},[637,21249,1204],{"class":642},[637,21251,21252,21255,21257,21259,21262,21264,21266,21268,21270,21273,21276,21279,21281,21283,21285],{"class":639,"line":2672},[637,21253,21254],{"class":676},"  if",[637,21256,3074],{"class":646},[637,21258,21238],{"class":683},[637,21260,21261],{"class":642}," &&",[637,21263,20757],{"class":683},[637,21265,21261],{"class":642},[637,21267,20757],{"class":683},[637,21269,1146],{"class":642},[637,21271,21272],{"class":683},"length",[637,21274,21275],{"class":642}," ===",[637,21277,21278],{"class":683}," texturePaths",[637,21280,1146],{"class":642},[637,21282,21272],{"class":683},[637,21284,4734],{"class":646},[637,21286,3260],{"class":642},[637,21288,21289],{"class":639,"line":2681},[637,21290,21291],{"class":1209},"    // Cast to MeshStandardMaterial to access PBR properties\n",[637,21293,21294,21297,21300,21302,21305,21308],{"class":639,"line":2703},[637,21295,21296],{"class":650},"    const",[637,21298,21299],{"class":683}," pbrMaterial",[637,21301,2431],{"class":642},[637,21303,21304],{"class":683}," modelMaterial",[637,21306,21307],{"class":676}," as",[637,21309,21310],{"class":1200}," MeshStandardMaterial\n",[637,21312,21313],{"class":639,"line":2747},[637,21314,742],{"emptyLinePlaceholder":594},[637,21316,21317],{"class":639,"line":2756},[637,21318,21319],{"class":1209},"    // Apply textures\n",[637,21321,21322,21325,21327,21329,21331,21333,21335,21337],{"class":639,"line":2765},[637,21323,21324],{"class":683},"    pbrMaterial",[637,21326,1146],{"class":642},[637,21328,2981],{"class":683},[637,21330,2431],{"class":642},[637,21332,20757],{"class":683},[637,21334,8731],{"class":646},[637,21336,965],{"class":2501},[637,21338,20738],{"class":646},[637,21340,21341,21343,21345,21348,21350,21352,21354,21356],{"class":639,"line":3922},[637,21342,21324],{"class":683},[637,21344,1146],{"class":642},[637,21346,21347],{"class":683},"normalMap",[637,21349,2431],{"class":642},[637,21351,20757],{"class":683},[637,21353,8731],{"class":646},[637,21355,1874],{"class":2501},[637,21357,20738],{"class":646},[637,21359,21360,21362,21364,21367,21369,21371,21373,21375],{"class":639,"line":3953},[637,21361,21324],{"class":683},[637,21363,1146],{"class":642},[637,21365,21366],{"class":683},"roughnessMap",[637,21368,2431],{"class":642},[637,21370,20757],{"class":683},[637,21372,8731],{"class":646},[637,21374,820],{"class":2501},[637,21376,20738],{"class":646},[637,21378,21379,21381,21383,21386,21388,21390,21392,21395],{"class":639,"line":3974},[637,21380,21324],{"class":683},[637,21382,1146],{"class":642},[637,21384,21385],{"class":683},"metalnessMap",[637,21387,2431],{"class":642},[637,21389,20757],{"class":683},[637,21391,8731],{"class":646},[637,21393,21394],{"class":2501},"3",[637,21396,20738],{"class":646},[637,21398,21399,21401,21403,21406,21408,21410,21412,21414],{"class":639,"line":3993},[637,21400,21324],{"class":683},[637,21402,1146],{"class":642},[637,21404,21405],{"class":683},"displacementMap",[637,21407,2431],{"class":642},[637,21409,20757],{"class":683},[637,21411,8731],{"class":646},[637,21413,9653],{"class":2501},[637,21415,20738],{"class":646},[637,21417,21418],{"class":639,"line":4025},[637,21419,742],{"emptyLinePlaceholder":594},[637,21421,21422],{"class":639,"line":4034},[637,21423,21424],{"class":1209},"    // Set material properties\n",[637,21426,21427,21429,21431,21434,21436],{"class":639,"line":4043},[637,21428,21324],{"class":683},[637,21430,1146],{"class":642},[637,21432,21433],{"class":683},"displacementScale",[637,21435,2431],{"class":642},[637,21437,21438],{"class":2501}," 0\n",[637,21440,21442,21444,21446,21449,21451],{"class":639,"line":21441},38,[637,21443,21324],{"class":683},[637,21445,1146],{"class":642},[637,21447,21448],{"class":683},"metalness",[637,21450,2431],{"class":642},[637,21452,21453],{"class":2501}," 0.8\n",[637,21455,21457,21459,21461,21464,21466],{"class":639,"line":21456},39,[637,21458,21324],{"class":683},[637,21460,1146],{"class":642},[637,21462,21463],{"class":683},"roughness",[637,21465,2431],{"class":642},[637,21467,21468],{"class":2501}," 0.2\n",[637,21470,21472],{"class":639,"line":21471},40,[637,21473,7857],{"class":642},[637,21475,21477,21479],{"class":639,"line":21476},41,[637,21478,2428],{"class":642},[637,21480,2448],{"class":683},[637,21482,21484],{"class":639,"line":21483},42,[637,21485,742],{"emptyLinePlaceholder":594},[637,21487,21489],{"class":639,"line":21488},43,[637,21490,21491],{"class":1209},"// Handle loading state and errors\n",[637,21493,21495,21497,21500,21502,21504,21507,21509,21511],{"class":639,"line":21494},44,[637,21496,12189],{"class":2434},[637,21498,21499],{"class":683},"(isLoading",[637,21501,687],{"class":642},[637,21503,3074],{"class":642},[637,21505,21506],{"class":6838},"_loading",[637,21508,3340],{"class":642},[637,21510,3677],{"class":650},[637,21512,1204],{"class":642},[637,21514,21516],{"class":639,"line":21515},45,[637,21517,21518],{"class":1209},"  // Handle loading state\n",[637,21520,21522,21524],{"class":639,"line":21521},46,[637,21523,2428],{"class":642},[637,21525,2448],{"class":683},[637,21527,21529],{"class":639,"line":21528},47,[637,21530,742],{"emptyLinePlaceholder":594},[637,21532,21534,21536,21539,21541,21543,21546,21548,21550],{"class":639,"line":21533},48,[637,21535,12189],{"class":2434},[637,21537,21538],{"class":683},"(error",[637,21540,687],{"class":642},[637,21542,3074],{"class":642},[637,21544,21545],{"class":6838},"errs",[637,21547,3340],{"class":642},[637,21549,3677],{"class":650},[637,21551,1204],{"class":642},[637,21553,21555,21557,21559,21561,21563],{"class":639,"line":21554},49,[637,21556,21254],{"class":676},[637,21558,3074],{"class":646},[637,21560,21545],{"class":683},[637,21562,4734],{"class":646},[637,21564,3260],{"class":642},[637,21566,21568,21571,21573,21575,21577,21579,21582,21584,21586,21589],{"class":639,"line":21567},50,[637,21569,21570],{"class":683},"    console",[637,21572,1146],{"class":642},[637,21574,17481],{"class":2434},[637,21576,2437],{"class":646},[637,21578,2440],{"class":642},[637,21580,21581],{"class":663},"Error loading textures:",[637,21583,2440],{"class":642},[637,21585,687],{"class":642},[637,21587,21588],{"class":683}," errs",[637,21590,2448],{"class":646},[637,21592,21594],{"class":639,"line":21593},51,[637,21595,7857],{"class":642},[637,21597,21599,21601],{"class":639,"line":21598},52,[637,21600,2428],{"class":642},[637,21602,2448],{"class":683},[637,21604,21606,21608,21610],{"class":639,"line":21605},53,[637,21607,732],{"class":642},[637,21609,647],{"class":646},[637,21611,669],{"class":642},[637,21613,21615],{"class":639,"line":21614},54,[637,21616,742],{"emptyLinePlaceholder":594},[637,21618,21620,21622,21624],{"class":639,"line":21619},55,[637,21621,643],{"class":642},[637,21623,750],{"class":646},[637,21625,669],{"class":642},[637,21627,21629,21631,21633,21635,21637,21639,21641,21643],{"class":639,"line":21628},56,[637,21630,758],{"class":642},[637,21632,761],{"class":646},[637,21634,764],{"class":650},[637,21636,657],{"class":642},[637,21638,660],{"class":642},[637,21640,10010],{"class":663},[637,21642,660],{"class":642},[637,21644,669],{"class":642},[637,21646,21648,21650,21653],{"class":639,"line":21647},57,[637,21649,781],{"class":642},[637,21651,21652],{"class":646},"Suspense",[637,21654,669],{"class":642},[637,21656,21658,21660,21662,21665,21667,21669,21672,21674,21677,21680,21682,21684,21686,21688],{"class":639,"line":21657},58,[637,21659,853],{"class":642},[637,21661,375],{"class":646},[637,21663,21664],{"class":650}," preset",[637,21666,657],{"class":642},[637,21668,660],{"class":642},[637,21670,21671],{"class":663},"studio",[637,21673,660],{"class":642},[637,21675,21676],{"class":650}," background",[637,21678,21679],{"class":650}," :blur",[637,21681,657],{"class":642},[637,21683,660],{"class":642},[637,21685,1874],{"class":663},[637,21687,660],{"class":642},[637,21689,787],{"class":642},[637,21691,21693,21695,21697],{"class":639,"line":21692},59,[637,21694,895],{"class":642},[637,21696,21652],{"class":646},[637,21698,669],{"class":642},[637,21700,21702,21704,21706,21708,21710,21712,21715,21717],{"class":639,"line":21701},60,[637,21703,781],{"class":642},[637,21705,784],{"class":646},[637,21707,1485],{"class":650},[637,21709,657],{"class":642},[637,21711,660],{"class":642},[637,21713,21714],{"class":663},"[8, 8, 8]",[637,21716,660],{"class":642},[637,21718,787],{"class":642},[637,21720,21722,21724,21726],{"class":639,"line":21721},61,[637,21723,781],{"class":642},[637,21725,795],{"class":646},[637,21727,787],{"class":642},[637,21729,21731,21733,21735],{"class":639,"line":21730},62,[637,21732,781],{"class":642},[637,21734,8049],{"class":646},[637,21736,787],{"class":642},[637,21738,21740,21742,21744,21746,21748,21750,21752,21754],{"class":639,"line":21739},63,[637,21741,781],{"class":642},[637,21743,9681],{"class":646},[637,21745,1867],{"class":650},[637,21747,657],{"class":642},[637,21749,660],{"class":642},[637,21751,820],{"class":663},[637,21753,660],{"class":642},[637,21755,787],{"class":642},[637,21757,21759,21761,21763,21766,21768,21770,21772,21775,21777,21779,21781,21783,21785,21787,21789,21791,21793,21795,21797],{"class":639,"line":21758},64,[637,21760,781],{"class":642},[637,21762,9700],{"class":646},[637,21764,21765],{"class":650}," v-light-helper",[637,21767,1485],{"class":650},[637,21769,657],{"class":642},[637,21771,660],{"class":642},[637,21773,21774],{"class":663},"[5, 5, 5]",[637,21776,660],{"class":642},[637,21778,1867],{"class":650},[637,21780,657],{"class":642},[637,21782,660],{"class":642},[637,21784,1946],{"class":663},[637,21786,660],{"class":642},[637,21788,2689],{"class":650},[637,21790,657],{"class":642},[637,21792,660],{"class":642},[637,21794,7571],{"class":663},[637,21796,660],{"class":642},[637,21798,787],{"class":642},[637,21800,21802,21804,21806,21808,21810,21812,21814,21817,21819,21821,21823,21825,21827,21829,21831,21833,21835,21837,21839],{"class":639,"line":21801},65,[637,21803,781],{"class":642},[637,21805,9700],{"class":646},[637,21807,21765],{"class":650},[637,21809,1485],{"class":650},[637,21811,657],{"class":642},[637,21813,660],{"class":642},[637,21815,21816],{"class":663},"[-5, 2, 2]",[637,21818,660],{"class":642},[637,21820,1867],{"class":650},[637,21822,657],{"class":642},[637,21824,660],{"class":642},[637,21826,1946],{"class":663},[637,21828,660],{"class":642},[637,21830,2689],{"class":650},[637,21832,657],{"class":642},[637,21834,660],{"class":642},[637,21836,5744],{"class":663},[637,21838,660],{"class":642},[637,21840,787],{"class":642},[637,21842,21844,21846,21848,21851,21853,21855,21857,21859],{"class":639,"line":21843},66,[637,21845,781],{"class":642},[637,21847,10041],{"class":646},[637,21849,21850],{"class":650}," position-y",[637,21852,657],{"class":642},[637,21854,660],{"class":642},[637,21856,820],{"class":663},[637,21858,660],{"class":642},[637,21860,669],{"class":642},[637,21862,21864,21866,21868,21870,21872,21874,21876,21878,21880,21882,21884,21886,21888],{"class":639,"line":21863},67,[637,21865,853],{"class":642},[637,21867,4434],{"class":646},[637,21869,2710],{"class":650},[637,21871,657],{"class":642},[637,21873,660],{"class":642},[637,21875,3822],{"class":663},[637,21877,660],{"class":642},[637,21879,4448],{"class":650},[637,21881,657],{"class":642},[637,21883,660],{"class":642},[637,21885,3822],{"class":663},[637,21887,660],{"class":642},[637,21889,787],{"class":642},[637,21891,21893,21895,21897],{"class":639,"line":21892},68,[637,21894,895],{"class":642},[637,21896,10041],{"class":646},[637,21898,669],{"class":642},[637,21900,21902,21904,21906],{"class":639,"line":21901},69,[637,21903,905],{"class":642},[637,21905,761],{"class":646},[637,21907,669],{"class":642},[637,21909,21911,21913,21915],{"class":639,"line":21910},70,[637,21912,732],{"class":642},[637,21914,750],{"class":646},[637,21916,669],{"class":642},[504,21918,21920],{"id":21919},"api","API",[4051,21922,21924],{"id":21923},"parameters","Parameters",[927,21926,21927,21939],{},[930,21928,21929],{},[933,21930,21931,21933,21935,21937],{},[936,21932,8089],{"align":997},[936,21934,5969],{},[936,21936,944],{},[936,21938,941],{},[946,21940,21941],{},[933,21942,21943,21948,21953,21957],{},[951,21944,21945],{"align":997},[1669,21946,21947],{},"paths",[951,21949,21950],{},[618,21951,21952],{},"string[]",[951,21954,21955],{},[618,21956,1179],{},[951,21958,21959],{},"Array of paths to the textures.",[4051,21961,21963],{"id":21962},"returns","Returns",[927,21965,21966,21976],{},[930,21967,21968],{},[933,21969,21970,21972,21974],{},[936,21971,8089],{"align":997},[936,21973,5969],{},[936,21975,941],{},[946,21977,21978,21991,22004],{},[933,21979,21980,21984,21988],{},[951,21981,21982],{"align":997},[1669,21983,2953],{},[951,21985,21986],{},[618,21987,5593],{},[951,21989,21990],{},"Array of loaded textures.",[933,21992,21993,21997,22001],{},[951,21994,21995],{"align":997},[1669,21996,17466],{},[951,21998,21999],{},[618,22000,17564],{},[951,22002,22003],{},"Whether any textures are still loading.",[933,22005,22006,22010,22015],{},[951,22007,22008],{"align":997},[1669,22009,17481],{},[951,22011,22012],{},[618,22013,22014],{},"Error[] | null",[951,22016,22017],{},"Array of errors if any occurred during loading.",[504,22019,22021],{"id":22020},"benefits","Benefits",[2213,22023,22024,22030,22036,22042],{},[2216,22025,22026,22029],{},[1669,22027,22028],{},"Simplified API",": Load multiple textures with a single function call",[2216,22031,22032,22035],{},[1669,22033,22034],{},"Consolidated loading state",": Track loading state for all textures at once",[2216,22037,22038,22041],{},[1669,22039,22040],{},"Unified error handling",": Collect and report errors from all texture loads",[2216,22043,22044,22047],{},[1669,22045,22046],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1327,22049,22050],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":22052},[22053,22054,22055,22059],{"id":624,"depth":578,"text":15},{"id":20885,"depth":578,"text":20886},{"id":21919,"depth":578,"text":21920,"children":22056},[22057,22058],{"id":21923,"depth":708,"text":21924},{"id":21962,"depth":708,"text":21963},{"id":22020,"depth":578,"text":22021},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":153,"description":22060},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":22065,"title":157,"body":22066,"description":24910,"extension":591,"links":592,"meta":24911,"navigation":594,"path":158,"seo":24912,"stem":159,"__hash__":24913},"docs/2.api/3.loaders/7.use-svg.md",{"type":501,"value":22067,"toc":24885},[22068,22073,22086,22090,22095,22097,22576,22581,22595,22599,22602,22714,22716,22786,22788,22896,22900,22905,22961,22966,23271,23275,23280,23286,23291,23297,23313,23319,23334,23381,23384,23389,23400,23405,23408,23453,23457,23462,23465,23470,23479,23524,23528,23533,23545,23550,23592,23596,23599,23727,23731,23735,24038,24042,24336,24340,24347,24526,24528,24694,24698,24705,24708,24712,24722,24726,24750,24758,24771,24775,24802,24806,24826,24836,24844,24861,24868,24882],[2295,22069,22070],{},[22071,22072],"loaders-use-svg",{},[614,22074,22075,22076,22078,22079,22081,22082,22085],{},"Load and display SVG elements in your ",[1669,22077,16927],{}," scene. This guide covers both the ",[618,22080,157],{}," composable for advanced use cases and the ",[618,22083,22084],{},"SVG"," component for simple declarative rendering.",[504,22087,22089],{"id":22088},"usesvg-composable","useSVG Composable",[614,22091,2776,22092,22094],{},[618,22093,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4051,22096,15],{"id":624},[16932,22098,22099,22396],{},[626,22100,22103],{"className":628,"code":22101,"filename":16937,"highlights":22102,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[578,739,745,755,778],[618,22104,22105,22125,22145,22149,22165,22201,22213,22242,22249,22257,22261,22269,22288,22294,22308,22322,22336,22349,22353,22372,22380,22388],{"__ignoreMap":576},[637,22106,22107,22109,22111,22113,22115,22117,22119,22121,22123],{"class":639,"line":577},[637,22108,643],{"class":642},[637,22110,647],{"class":646},[637,22112,651],{"class":650},[637,22114,654],{"class":650},[637,22116,657],{"class":642},[637,22118,660],{"class":642},[637,22120,664],{"class":663},[637,22122,660],{"class":642},[637,22124,669],{"class":642},[637,22126,22128,22130,22132,22135,22137,22139,22141,22143],{"class":22127,"line":578},[639,673],[637,22129,677],{"class":676},[637,22131,680],{"class":642},[637,22133,22134],{"class":683}," useSVG",[637,22136,693],{"class":642},[637,22138,696],{"class":676},[637,22140,699],{"class":642},[637,22142,702],{"class":663},[637,22144,705],{"class":642},[637,22146,22147],{"class":639,"line":708},[637,22148,742],{"emptyLinePlaceholder":594},[637,22150,22151,22153,22156,22158,22160,22163],{"class":639,"line":729},[637,22152,2415],{"class":650},[637,22154,22155],{"class":683}," svgPath ",[637,22157,657],{"class":642},[637,22159,699],{"class":642},[637,22161,22162],{"class":663},"./logo.svg",[637,22164,705],{"class":642},[637,22166,22168,22170,22172,22174,22176,22179,22181,22183,22185,22188,22190,22192,22194,22197,22199],{"class":22167,"line":739},[639,673],[637,22169,2415],{"class":650},[637,22171,680],{"class":642},[637,22173,2420],{"class":683},[637,22175,687],{"class":642},[637,22177,22178],{"class":683}," layers",[637,22180,687],{"class":642},[637,22182,20072],{"class":683},[637,22184,687],{"class":642},[637,22186,22187],{"class":683}," dispose ",[637,22189,2428],{"class":642},[637,22191,2431],{"class":642},[637,22193,22134],{"class":2434},[637,22195,22196],{"class":683},"(svgPath",[637,22198,687],{"class":642},[637,22200,1204],{"class":642},[637,22202,22204,22207,22209,22211],{"class":22203,"line":745},[639,673],[637,22205,22206],{"class":646},"  skipFills",[637,22208,1218],{"class":642},[637,22210,6725],{"class":4397},[637,22212,2488],{"class":642},[637,22214,22216,22219,22221,22223,22226,22228,22230,22232,22235,22237,22240],{"class":22215,"line":755},[639,673],[637,22217,22218],{"class":646},"  fillMaterial",[637,22220,1218],{"class":642},[637,22222,680],{"class":642},[637,22224,22225],{"class":646}," transparent",[637,22227,1218],{"class":642},[637,22229,4398],{"class":4397},[637,22231,687],{"class":642},[637,22233,22234],{"class":646}," opacity",[637,22236,1218],{"class":642},[637,22238,22239],{"class":2501}," 0.8",[637,22241,17798],{"class":642},[637,22243,22245,22247],{"class":22244,"line":778},[639,673],[637,22246,2428],{"class":642},[637,22248,2448],{"class":683},[637,22250,22251,22253,22255],{"class":639,"line":790},[637,22252,732],{"class":642},[637,22254,647],{"class":646},[637,22256,669],{"class":642},[637,22258,22259],{"class":639,"line":800},[637,22260,742],{"emptyLinePlaceholder":594},[637,22262,22263,22265,22267],{"class":639,"line":805},[637,22264,643],{"class":642},[637,22266,750],{"class":646},[637,22268,669],{"class":642},[637,22270,22271,22273,22275,22277,22279,22281,22284,22286],{"class":639,"line":827},[637,22272,758],{"class":642},[637,22274,10041],{"class":646},[637,22276,2710],{"class":650},[637,22278,657],{"class":642},[637,22280,660],{"class":642},[637,22282,22283],{"class":663},"!isLoading",[637,22285,660],{"class":642},[637,22287,669],{"class":642},[637,22289,22290,22292],{"class":639,"line":631},[637,22291,781],{"class":642},[637,22293,5126],{"class":646},[637,22295,22296,22299,22301,22303,22306],{"class":639,"line":850},[637,22297,22298],{"class":650},"      v-for",[637,22300,657],{"class":642},[637,22302,660],{"class":642},[637,22304,22305],{"class":663},"(layer, index) in layers",[637,22307,3131],{"class":642},[637,22309,22310,22313,22315,22317,22320],{"class":639,"line":861},[637,22311,22312],{"class":650},"      :key",[637,22314,657],{"class":642},[637,22316,660],{"class":642},[637,22318,22319],{"class":663},"`layer-${index}`",[637,22321,3131],{"class":642},[637,22323,22324,22327,22329,22331,22334],{"class":639,"line":872},[637,22325,22326],{"class":650},"      :geometry",[637,22328,657],{"class":642},[637,22330,660],{"class":642},[637,22332,22333],{"class":663},"layer.geometry",[637,22335,3131],{"class":642},[637,22337,22338,22341,22343,22345,22347],{"class":639,"line":882},[637,22339,22340],{"class":650},"      :render-order",[637,22342,657],{"class":642},[637,22344,660],{"class":642},[637,22346,7998],{"class":663},[637,22348,3131],{"class":642},[637,22350,22351],{"class":639,"line":632},[637,22352,12391],{"class":642},[637,22354,22355,22357,22359,22361,22363,22365,22368,22370],{"class":639,"line":902},[637,22356,853],{"class":642},[637,22358,7472],{"class":646},[637,22360,10215],{"class":650},[637,22362,657],{"class":642},[637,22364,660],{"class":642},[637,22366,22367],{"class":663},"layer.material",[637,22369,660],{"class":642},[637,22371,787],{"class":642},[637,22373,22374,22376,22378],{"class":639,"line":912},[637,22375,895],{"class":642},[637,22377,856],{"class":646},[637,22379,669],{"class":642},[637,22381,22382,22384,22386],{"class":639,"line":2625},[637,22383,905],{"class":642},[637,22385,10041],{"class":646},[637,22387,669],{"class":642},[637,22389,22390,22392,22394],{"class":639,"line":2634},[637,22391,732],{"class":642},[637,22393,750],{"class":646},[637,22395,669],{"class":642},[626,22397,22399],{"className":628,"code":22398,"filename":17087,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,22400,22401,22421,22439,22457,22471,22479,22483,22491,22509,22528,22536,22544,22552,22560,22568],{"__ignoreMap":576},[637,22402,22403,22405,22407,22409,22411,22413,22415,22417,22419],{"class":639,"line":577},[637,22404,643],{"class":642},[637,22406,647],{"class":646},[637,22408,651],{"class":650},[637,22410,654],{"class":650},[637,22412,657],{"class":642},[637,22414,660],{"class":642},[637,22416,664],{"class":663},[637,22418,660],{"class":642},[637,22420,669],{"class":642},[637,22422,22423,22425,22427,22429,22431,22433,22435,22437],{"class":639,"line":578},[637,22424,677],{"class":676},[637,22426,680],{"class":642},[637,22428,690],{"class":683},[637,22430,693],{"class":642},[637,22432,696],{"class":676},[637,22434,699],{"class":642},[637,22436,702],{"class":663},[637,22438,705],{"class":642},[637,22440,22441,22443,22445,22447,22449,22451,22453,22455],{"class":639,"line":708},[637,22442,677],{"class":676},[637,22444,680],{"class":642},[637,22446,715],{"class":683},[637,22448,693],{"class":642},[637,22450,696],{"class":676},[637,22452,699],{"class":642},[637,22454,724],{"class":663},[637,22456,705],{"class":642},[637,22458,22459,22461,22463,22465,22467,22469],{"class":639,"line":729},[637,22460,677],{"class":676},[637,22462,17152],{"class":683},[637,22464,8433],{"class":676},[637,22466,699],{"class":642},[637,22468,17159],{"class":663},[637,22470,705],{"class":642},[637,22472,22473,22475,22477],{"class":639,"line":739},[637,22474,732],{"class":642},[637,22476,647],{"class":646},[637,22478,669],{"class":642},[637,22480,22481],{"class":639,"line":745},[637,22482,742],{"emptyLinePlaceholder":594},[637,22484,22485,22487,22489],{"class":639,"line":755},[637,22486,643],{"class":642},[637,22488,750],{"class":646},[637,22490,669],{"class":642},[637,22492,22493,22495,22497,22499,22501,22503,22505,22507],{"class":639,"line":778},[637,22494,758],{"class":642},[637,22496,761],{"class":646},[637,22498,764],{"class":650},[637,22500,657],{"class":642},[637,22502,660],{"class":642},[637,22504,12938],{"class":663},[637,22506,660],{"class":642},[637,22508,669],{"class":642},[637,22510,22511,22513,22515,22517,22519,22521,22524,22526],{"class":639,"line":790},[637,22512,781],{"class":642},[637,22514,784],{"class":646},[637,22516,1485],{"class":650},[637,22518,657],{"class":642},[637,22520,660],{"class":642},[637,22522,22523],{"class":663},"[0, 2, 10]",[637,22525,660],{"class":642},[637,22527,787],{"class":642},[637,22529,22530,22532,22534],{"class":639,"line":800},[637,22531,781],{"class":642},[637,22533,795],{"class":646},[637,22535,787],{"class":642},[637,22537,22538,22540,22542],{"class":639,"line":805},[637,22539,781],{"class":642},[637,22541,17234],{"class":646},[637,22543,787],{"class":642},[637,22545,22546,22548,22550],{"class":639,"line":827},[637,22547,781],{"class":642},[637,22549,9681],{"class":646},[637,22551,787],{"class":642},[637,22553,22554,22556,22558],{"class":639,"line":631},[637,22555,781],{"class":642},[637,22557,9700],{"class":646},[637,22559,787],{"class":642},[637,22561,22562,22564,22566],{"class":639,"line":850},[637,22563,905],{"class":642},[637,22565,761],{"class":646},[637,22567,669],{"class":642},[637,22569,22570,22572,22574],{"class":639,"line":861},[637,22571,732],{"class":642},[637,22573,750],{"class":646},[637,22575,669],{"class":642},[614,22577,2776,22578,22580],{},[618,22579,157],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[2213,22582,22583,22586,22589,22592],{},[2216,22584,22585],{},"Manually control layer rendering",[2216,22587,22588],{},"Apply custom animations to individual layers",[2216,22590,22591],{},"Access geometry data programmatically",[2216,22593,22594],{},"Implement complex material logic",[4051,22596,22598],{"id":22597},"svg-data-sources","SVG Data Sources",[614,22600,22601],{},"The composable accepts both file paths and inline SVG strings:",[626,22603,22605],{"className":1186,"code":22604,"language":664,"meta":576,"style":576},"import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[618,22606,22607,22625,22629,22634,22660,22664,22669,22684,22689,22697],{"__ignoreMap":576},[637,22608,22609,22611,22613,22615,22617,22619,22621,22623],{"class":639,"line":577},[637,22610,677],{"class":676},[637,22612,680],{"class":642},[637,22614,22134],{"class":683},[637,22616,693],{"class":642},[637,22618,696],{"class":676},[637,22620,699],{"class":642},[637,22622,702],{"class":663},[637,22624,705],{"class":642},[637,22626,22627],{"class":639,"line":578},[637,22628,742],{"emptyLinePlaceholder":594},[637,22630,22631],{"class":639,"line":708},[637,22632,22633],{"class":1209},"// From file\n",[637,22635,22636,22638,22640,22643,22645,22647,22649,22651,22653,22656,22658],{"class":639,"line":729},[637,22637,2415],{"class":650},[637,22639,680],{"class":642},[637,22641,22642],{"class":683}," layers ",[637,22644,2428],{"class":642},[637,22646,2431],{"class":642},[637,22648,22134],{"class":2434},[637,22650,2437],{"class":683},[637,22652,2440],{"class":642},[637,22654,22655],{"class":663},"/path/to/file.svg",[637,22657,2440],{"class":642},[637,22659,2448],{"class":683},[637,22661,22662],{"class":639,"line":739},[637,22663,742],{"emptyLinePlaceholder":594},[637,22665,22666],{"class":639,"line":745},[637,22667,22668],{"class":1209},"// Inline SVG string\n",[637,22670,22671,22673,22676,22678,22681],{"class":639,"line":755},[637,22672,2415],{"class":650},[637,22674,22675],{"class":683}," svgString ",[637,22677,657],{"class":642},[637,22679,22680],{"class":642}," `",[637,22682,22683],{"class":663},"\u003Csvg viewBox=\"0 0 100 100\">\n",[637,22685,22686],{"class":639,"line":778},[637,22687,22688],{"class":663},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[637,22690,22691,22694],{"class":639,"line":790},[637,22692,22693],{"class":663},"\u003C/svg>",[637,22695,22696],{"class":642},"`\n",[637,22698,22699,22701,22703,22705,22707,22709,22711],{"class":639,"line":800},[637,22700,2415],{"class":650},[637,22702,680],{"class":642},[637,22704,22642],{"class":683},[637,22706,2428],{"class":642},[637,22708,2431],{"class":642},[637,22710,22134],{"class":2434},[637,22712,22713],{"class":683},"(svgString)\n",[4051,22715,17400],{"id":17399},[927,22717,22718,22728],{},[930,22719,22720],{},[933,22721,22722,22724,22726],{},[936,22723,8089],{"align":997},[936,22725,5969],{},[936,22727,941],{},[946,22729,22730,22744,22759,22772],{},[933,22731,22732,22736,22741],{},[951,22733,22734],{"align":997},[1669,22735,14787],{},[951,22737,22738],{},[618,22739,22740],{},"SVGResult",[951,22742,22743],{},"The loaded SVG state from SVGLoader",[933,22745,22746,22751,22756],{},[951,22747,22748],{"align":997},[1669,22749,22750],{},"layers",[951,22752,22753],{},[618,22754,22755],{},"SVGLayer[]",[951,22757,22758],{},"Computed array of processed geometries and materials",[933,22760,22761,22765,22769],{},[951,22762,22763],{"align":997},[1669,22764,17466],{},[951,22766,22767],{},[618,22768,17564],{},[951,22770,22771],{},"Whether the SVG is currently loading",[933,22773,22774,22779,22783],{},[951,22775,22776],{"align":997},[1669,22777,22778],{},"dispose",[951,22780,22781],{},[618,22782,6021],{},[951,22784,22785],{},"Function to dispose of all geometries",[4051,22787,14023],{"id":17537},[927,22789,22790,22802],{},[930,22791,22792],{},[933,22793,22794,22796,22798,22800],{},[936,22795,8089],{"align":997},[936,22797,5969],{},[936,22799,944],{},[936,22801,941],{},[946,22803,22804,22822,22840,22859,22877],{},[933,22805,22806,22811,22815,22819],{},[951,22807,22808],{"align":997},[1669,22809,22810],{},"skipStrokes",[951,22812,22813],{},[618,22814,17564],{},[951,22816,22817],{},[618,22818,971],{},[951,22820,22821],{},"Whether to skip rendering strokes",[933,22823,22824,22829,22833,22837],{},[951,22825,22826],{"align":997},[1669,22827,22828],{},"skipFills",[951,22830,22831],{},[618,22832,17564],{},[951,22834,22835],{},[618,22836,971],{},[951,22838,22839],{},"Whether to skip rendering fills",[933,22841,22842,22847,22852,22856],{},[951,22843,22844],{"align":997},[1669,22845,22846],{},"fillMaterial",[951,22848,22849],{},[618,22850,22851],{},"MeshBasicMaterialParameters",[951,22853,22854],{},[618,22855,6125],{},[951,22857,22858],{},"Material properties for fill layers",[933,22860,22861,22866,22870,22874],{},[951,22862,22863],{"align":997},[1669,22864,22865],{},"strokeMaterial",[951,22867,22868],{},[618,22869,22851],{},[951,22871,22872],{},[618,22873,6125],{},[951,22875,22876],{},"Material properties for stroke layers",[933,22878,22879,22883,22888,22893],{},[951,22880,22881],{"align":997},[1669,22882,13084],{},[951,22884,22885],{},[618,22886,22887],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[951,22889,22890],{},[618,22891,22892],{},"'renderOrder'",[951,22894,22895],{},"How layers should be rendered in 3D space",[4051,22897,22899],{"id":22898},"working-with-layers","Working with Layers",[614,22901,2776,22902,22904],{},[618,22903,22750],{}," computed property returns an array of processed SVG elements, each containing:",[626,22906,22908],{"className":1186,"code":22907,"language":664,"meta":576,"style":576},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[618,22909,22910,22919,22932,22945,22957],{"__ignoreMap":576},[637,22911,22912,22914,22917],{"class":639,"line":577},[637,22913,5323],{"class":650},[637,22915,22916],{"class":1200}," SVGLayer",[637,22918,1204],{"class":642},[637,22920,22921,22924,22926,22929],{"class":639,"line":578},[637,22922,22923],{"class":646},"  geometry",[637,22925,1218],{"class":642},[637,22927,22928],{"class":1200}," BufferGeometry",[637,22930,22931],{"class":1209}," // Three.js geometry for the layer\n",[637,22933,22934,22937,22939,22942],{"class":639,"line":708},[637,22935,22936],{"class":646},"  material",[637,22938,1218],{"class":642},[637,22940,22941],{"class":1200}," MeshBasicMaterialParameters",[637,22943,22944],{"class":1209}," // Material properties\n",[637,22946,22947,22950,22952,22954],{"class":639,"line":729},[637,22948,22949],{"class":646},"  isStroke",[637,22951,1218],{"class":642},[637,22953,5454],{"class":1200},[637,22955,22956],{"class":1209}," // Whether this layer is a stroke or fill\n",[637,22958,22959],{"class":639,"line":739},[637,22960,1325],{"class":642},[22962,22963,22965],"h4",{"id":22964},"accessing-individual-layers","Accessing Individual Layers",[626,22967,22970],{"className":628,"code":22968,"highlights":22969,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[578,729],[618,22971,22972,22992,23011,23015,23041,23045,23050,23083,23131,23135,23143,23147,23155,23163,23169,23181,23193,23205,23209,23216,23229,23243,23247,23255,23263],{"__ignoreMap":576},[637,22973,22974,22976,22978,22980,22982,22984,22986,22988,22990],{"class":639,"line":577},[637,22975,643],{"class":642},[637,22977,647],{"class":646},[637,22979,651],{"class":650},[637,22981,654],{"class":650},[637,22983,657],{"class":642},[637,22985,660],{"class":642},[637,22987,664],{"class":663},[637,22989,660],{"class":642},[637,22991,669],{"class":642},[637,22993,22995,22997,22999,23001,23003,23005,23007,23009],{"class":22994,"line":578},[639,673],[637,22996,677],{"class":676},[637,22998,680],{"class":642},[637,23000,22134],{"class":683},[637,23002,693],{"class":642},[637,23004,696],{"class":676},[637,23006,699],{"class":642},[637,23008,702],{"class":663},[637,23010,705],{"class":642},[637,23012,23013],{"class":639,"line":708},[637,23014,742],{"emptyLinePlaceholder":594},[637,23016,23018,23020,23022,23024,23026,23028,23030,23032,23034,23037,23039],{"class":23017,"line":729},[639,673],[637,23019,2415],{"class":650},[637,23021,680],{"class":642},[637,23023,22642],{"class":683},[637,23025,2428],{"class":642},[637,23027,2431],{"class":642},[637,23029,22134],{"class":2434},[637,23031,2437],{"class":683},[637,23033,2440],{"class":642},[637,23035,23036],{"class":663},"/complex-icon.svg",[637,23038,2440],{"class":642},[637,23040,2448],{"class":683},[637,23042,23043],{"class":639,"line":739},[637,23044,742],{"emptyLinePlaceholder":594},[637,23046,23047],{"class":639,"line":745},[637,23048,23049],{"class":1209},"// Apply different materials based on layer type\n",[637,23051,23052,23054,23057,23059,23061,23064,23066,23068,23070,23073,23075,23077,23079,23081],{"class":639,"line":755},[637,23053,2415],{"class":650},[637,23055,23056],{"class":683}," getFillColor ",[637,23058,657],{"class":642},[637,23060,3074],{"class":642},[637,23062,23063],{"class":6838},"layer",[637,23065,1218],{"class":642},[637,23067,22916],{"class":1200},[637,23069,687],{"class":642},[637,23071,23072],{"class":6838}," index",[637,23074,1218],{"class":642},[637,23076,5357],{"class":1200},[637,23078,3340],{"class":642},[637,23080,3677],{"class":650},[637,23082,1204],{"class":642},[637,23084,23085,23088,23091,23093,23096,23099,23101,23104,23106,23108,23110,23113,23116,23119,23122,23124,23126,23129],{"class":639,"line":778},[637,23086,23087],{"class":676},"  return",[637,23089,23090],{"class":683}," layer",[637,23092,1146],{"class":642},[637,23094,23095],{"class":683},"isStroke",[637,23097,23098],{"class":642}," ?",[637,23100,699],{"class":642},[637,23102,23103],{"class":663},"#000000",[637,23105,2440],{"class":642},[637,23107,3029],{"class":642},[637,23109,22680],{"class":642},[637,23111,23112],{"class":663},"hsl(",[637,23114,23115],{"class":642},"${",[637,23117,23118],{"class":683},"index ",[637,23120,23121],{"class":642},"*",[637,23123,8472],{"class":2501},[637,23125,2428],{"class":642},[637,23127,23128],{"class":663},", 70%, 50%)",[637,23130,22696],{"class":642},[637,23132,23133],{"class":639,"line":790},[637,23134,1325],{"class":642},[637,23136,23137,23139,23141],{"class":639,"line":800},[637,23138,732],{"class":642},[637,23140,647],{"class":646},[637,23142,669],{"class":642},[637,23144,23145],{"class":639,"line":805},[637,23146,742],{"emptyLinePlaceholder":594},[637,23148,23149,23151,23153],{"class":639,"line":827},[637,23150,643],{"class":642},[637,23152,750],{"class":646},[637,23154,669],{"class":642},[637,23156,23157,23159,23161],{"class":639,"line":631},[637,23158,758],{"class":642},[637,23160,10041],{"class":646},[637,23162,669],{"class":642},[637,23164,23165,23167],{"class":639,"line":850},[637,23166,781],{"class":642},[637,23168,5126],{"class":646},[637,23170,23171,23173,23175,23177,23179],{"class":639,"line":861},[637,23172,22298],{"class":650},[637,23174,657],{"class":642},[637,23176,660],{"class":642},[637,23178,22305],{"class":663},[637,23180,3131],{"class":642},[637,23182,23183,23185,23187,23189,23191],{"class":639,"line":872},[637,23184,22312],{"class":650},[637,23186,657],{"class":642},[637,23188,660],{"class":642},[637,23190,7998],{"class":663},[637,23192,3131],{"class":642},[637,23194,23195,23197,23199,23201,23203],{"class":639,"line":882},[637,23196,22326],{"class":650},[637,23198,657],{"class":642},[637,23200,660],{"class":642},[637,23202,22333],{"class":663},[637,23204,3131],{"class":642},[637,23206,23207],{"class":639,"line":632},[637,23208,12391],{"class":642},[637,23210,23211,23213],{"class":639,"line":902},[637,23212,853],{"class":642},[637,23214,23215],{"class":646},"TresMeshBasicMaterial\n",[637,23217,23218,23221,23223,23225,23227],{"class":639,"line":912},[637,23219,23220],{"class":650},"        v-bind",[637,23222,657],{"class":642},[637,23224,660],{"class":642},[637,23226,22367],{"class":663},[637,23228,3131],{"class":642},[637,23230,23231,23234,23236,23238,23241],{"class":639,"line":2625},[637,23232,23233],{"class":650},"        :color",[637,23235,657],{"class":642},[637,23237,660],{"class":642},[637,23239,23240],{"class":663},"getFillColor(layer, index)",[637,23242,3131],{"class":642},[637,23244,23245],{"class":639,"line":2634},[637,23246,8033],{"class":642},[637,23248,23249,23251,23253],{"class":639,"line":2654},[637,23250,895],{"class":642},[637,23252,856],{"class":646},[637,23254,669],{"class":642},[637,23256,23257,23259,23261],{"class":639,"line":2663},[637,23258,905],{"class":642},[637,23260,10041],{"class":646},[637,23262,669],{"class":642},[637,23264,23265,23267,23269],{"class":639,"line":2672},[637,23266,732],{"class":642},[637,23268,750],{"class":646},[637,23270,669],{"class":642},[4051,23272,23274],{"id":23273},"depth-handling","Depth Handling",[614,23276,2776,23277,23279],{},[618,23278,13084],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[22962,23281,23283,23285],{"id":23282},"renderorder-default",[618,23284,22892],{}," (Default)",[614,23287,23288],{},[1669,23289,23290],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[614,23292,23293,23294,23296],{},"This is the default ",[618,23295,13084],{}," option.",[614,23298,23299,23300,2250,23302,23304,23305,23312],{},"This value sets the materials' ",[618,23301,10412],{},[618,23303,971],{}," and increments the mesh layers ",[1140,23306,23309],{"href":23307,"rel":23308},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1144],[618,23310,23311],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[614,23314,23315,23318],{},[1669,23316,23317],{},"Disadvantage",": Scene objects may render out of order.",[614,23320,23321,23322,23327,23328,23333],{},"SVG layers with higher ",[1140,23323,23325],{"href":23307,"rel":23324},[1144],[618,23326,23311],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1140,23329,23331],{"href":23307,"rel":23330},[1144],[618,23332,23311],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[626,23335,23337],{"className":1186,"code":23336,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[618,23338,23339],{"__ignoreMap":576},[637,23340,23341,23343,23345,23347,23349,23351,23353,23355,23357,23360,23362,23364,23366,23369,23371,23373,23375,23377,23379],{"class":639,"line":577},[637,23342,2415],{"class":650},[637,23344,680],{"class":642},[637,23346,22642],{"class":683},[637,23348,2428],{"class":642},[637,23350,2431],{"class":642},[637,23352,22134],{"class":2434},[637,23354,2437],{"class":683},[637,23356,2440],{"class":642},[637,23358,23359],{"class":663},"/icon.svg",[637,23361,2440],{"class":642},[637,23363,687],{"class":642},[637,23365,680],{"class":642},[637,23367,23368],{"class":646}," depth",[637,23370,1218],{"class":642},[637,23372,699],{"class":642},[637,23374,23311],{"class":663},[637,23376,2440],{"class":642},[637,23378,693],{"class":642},[637,23380,2448],{"class":683},[22962,23382,23383],{"id":23383},"flat",[614,23385,23386],{},[1669,23387,23388],{},"Use case: simple SVGs",[614,23390,23391,23392,2250,23398,1146],{},"This option sets the materials ",[1140,23393,23396],{"href":23394,"rel":23395},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1144],[618,23397,10412],{},[618,23399,971],{},[614,23401,23402,23404],{},[1669,23403,23317],{},": SVG layers may render out of order.",[614,23406,23407],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[626,23409,23411],{"className":1186,"code":23410,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[618,23412,23413],{"__ignoreMap":576},[637,23414,23415,23417,23419,23421,23423,23425,23427,23429,23431,23433,23435,23437,23439,23441,23443,23445,23447,23449,23451],{"class":639,"line":577},[637,23416,2415],{"class":650},[637,23418,680],{"class":642},[637,23420,22642],{"class":683},[637,23422,2428],{"class":642},[637,23424,2431],{"class":642},[637,23426,22134],{"class":2434},[637,23428,2437],{"class":683},[637,23430,2440],{"class":642},[637,23432,23359],{"class":663},[637,23434,2440],{"class":642},[637,23436,687],{"class":642},[637,23438,680],{"class":642},[637,23440,23368],{"class":646},[637,23442,1218],{"class":642},[637,23444,699],{"class":642},[637,23446,23383],{"class":663},[637,23448,2440],{"class":642},[637,23450,693],{"class":642},[637,23452,2448],{"class":683},[22962,23454,23456],{"id":23455},"offsetz","offsetZ",[614,23458,23459],{},[1669,23460,23461],{},"Use case: unscaled SVGs seen from the front",[614,23463,23464],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[614,23466,23467,23469],{},[1669,23468,23317],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[614,23471,23472,23473,23478],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1140,23474,23477],{"href":23475,"rel":23476},"https://en.wikipedia.org/wiki/Z-fighting",[1144],"z-fight",", particularly if the SVG is scaled down.",[626,23480,23482],{"className":1186,"code":23481,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[618,23483,23484],{"__ignoreMap":576},[637,23485,23486,23488,23490,23492,23494,23496,23498,23500,23502,23504,23506,23508,23510,23512,23514,23516,23518,23520,23522],{"class":639,"line":577},[637,23487,2415],{"class":650},[637,23489,680],{"class":642},[637,23491,22642],{"class":683},[637,23493,2428],{"class":642},[637,23495,2431],{"class":642},[637,23497,22134],{"class":2434},[637,23499,2437],{"class":683},[637,23501,2440],{"class":642},[637,23503,23359],{"class":663},[637,23505,2440],{"class":642},[637,23507,687],{"class":642},[637,23509,680],{"class":642},[637,23511,23368],{"class":646},[637,23513,1218],{"class":642},[637,23515,699],{"class":642},[637,23517,23456],{"class":663},[637,23519,2440],{"class":642},[637,23521,693],{"class":642},[637,23523,2448],{"class":683},[22962,23525,23526],{"id":5352},[618,23527,5352],{},[614,23529,23530],{},[1669,23531,23532],{},"Use case: SVGs seen from the front",[614,23534,23535,23536,23539,23540,23544],{},"This is the same as ",[618,23537,23538],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1140,23541,23543],{"href":23475,"rel":23542},[1144],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[614,23546,23547,23549],{},[1669,23548,23317],{},": \"Bottom\" of the \"stack\" is visible.",[626,23551,23553],{"className":1186,"code":23552,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[618,23554,23555],{"__ignoreMap":576},[637,23556,23557,23559,23561,23563,23565,23567,23569,23571,23573,23575,23577,23579,23581,23583,23585,23588,23590],{"class":639,"line":577},[637,23558,2415],{"class":650},[637,23560,680],{"class":642},[637,23562,22642],{"class":683},[637,23564,2428],{"class":642},[637,23566,2431],{"class":642},[637,23568,22134],{"class":2434},[637,23570,2437],{"class":683},[637,23572,2440],{"class":642},[637,23574,23359],{"class":663},[637,23576,2440],{"class":642},[637,23578,687],{"class":642},[637,23580,680],{"class":642},[637,23582,23368],{"class":646},[637,23584,1218],{"class":642},[637,23586,23587],{"class":2501}," 0.1",[637,23589,693],{"class":642},[637,23591,2448],{"class":683},[4051,23593,23595],{"id":23594},"memory-management","Memory Management",[614,23597,23598],{},"Always dispose of geometries when the component unmounts:",[626,23600,23602],{"className":628,"code":23601,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[618,23603,23604,23624,23642,23661,23665,23689,23693,23706,23713,23719],{"__ignoreMap":576},[637,23605,23606,23608,23610,23612,23614,23616,23618,23620,23622],{"class":639,"line":577},[637,23607,643],{"class":642},[637,23609,647],{"class":646},[637,23611,651],{"class":650},[637,23613,654],{"class":650},[637,23615,657],{"class":642},[637,23617,660],{"class":642},[637,23619,664],{"class":663},[637,23621,660],{"class":642},[637,23623,669],{"class":642},[637,23625,23626,23628,23630,23632,23634,23636,23638,23640],{"class":639,"line":578},[637,23627,677],{"class":676},[637,23629,680],{"class":642},[637,23631,22134],{"class":683},[637,23633,693],{"class":642},[637,23635,696],{"class":676},[637,23637,699],{"class":642},[637,23639,702],{"class":663},[637,23641,705],{"class":642},[637,23643,23644,23646,23648,23651,23653,23655,23657,23659],{"class":639,"line":708},[637,23645,677],{"class":676},[637,23647,680],{"class":642},[637,23649,23650],{"class":683}," onUnmounted",[637,23652,693],{"class":642},[637,23654,696],{"class":676},[637,23656,699],{"class":642},[637,23658,633],{"class":663},[637,23660,705],{"class":642},[637,23662,23663],{"class":639,"line":729},[637,23664,742],{"emptyLinePlaceholder":594},[637,23666,23667,23669,23671,23673,23675,23677,23679,23681,23683,23685,23687],{"class":639,"line":739},[637,23668,2415],{"class":650},[637,23670,680],{"class":642},[637,23672,22187],{"class":683},[637,23674,2428],{"class":642},[637,23676,2431],{"class":642},[637,23678,22134],{"class":2434},[637,23680,2437],{"class":683},[637,23682,2440],{"class":642},[637,23684,23359],{"class":663},[637,23686,2440],{"class":642},[637,23688,2448],{"class":683},[637,23690,23691],{"class":639,"line":745},[637,23692,742],{"emptyLinePlaceholder":594},[637,23694,23695,23698,23700,23702,23704],{"class":639,"line":755},[637,23696,23697],{"class":2434},"onUnmounted",[637,23699,2437],{"class":683},[637,23701,3674],{"class":642},[637,23703,3677],{"class":650},[637,23705,1204],{"class":642},[637,23707,23708,23711],{"class":639,"line":778},[637,23709,23710],{"class":2434},"  dispose",[637,23712,6535],{"class":646},[637,23714,23715,23717],{"class":639,"line":790},[637,23716,2428],{"class":642},[637,23718,2448],{"class":683},[637,23720,23721,23723,23725],{"class":639,"line":800},[637,23722,732],{"class":642},[637,23724,647],{"class":646},[637,23726,669],{"class":642},[4051,23728,23730],{"id":23729},"advanced-usage","Advanced Usage",[22962,23732,23734],{"id":23733},"conditional-layer-rendering","Conditional Layer Rendering",[626,23736,23738],{"className":628,"code":23737,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[618,23739,23740,23760,23778,23796,23800,23817,23842,23846,23864,23874,23885,23917,23921,23929,23933,23941,23949,23955,23968,23980,23992,23996,24014,24022,24030],{"__ignoreMap":576},[637,23741,23742,23744,23746,23748,23750,23752,23754,23756,23758],{"class":639,"line":577},[637,23743,643],{"class":642},[637,23745,647],{"class":646},[637,23747,651],{"class":650},[637,23749,654],{"class":650},[637,23751,657],{"class":642},[637,23753,660],{"class":642},[637,23755,664],{"class":663},[637,23757,660],{"class":642},[637,23759,669],{"class":642},[637,23761,23762,23764,23766,23768,23770,23772,23774,23776],{"class":639,"line":578},[637,23763,677],{"class":676},[637,23765,680],{"class":642},[637,23767,22134],{"class":683},[637,23769,693],{"class":642},[637,23771,696],{"class":676},[637,23773,699],{"class":642},[637,23775,702],{"class":663},[637,23777,705],{"class":642},[637,23779,23780,23782,23784,23786,23788,23790,23792,23794],{"class":639,"line":708},[637,23781,677],{"class":676},[637,23783,680],{"class":642},[637,23785,3489],{"class":683},[637,23787,693],{"class":642},[637,23789,696],{"class":676},[637,23791,699],{"class":642},[637,23793,633],{"class":663},[637,23795,705],{"class":642},[637,23797,23798],{"class":639,"line":729},[637,23799,742],{"emptyLinePlaceholder":594},[637,23801,23802,23804,23807,23809,23811,23813,23815],{"class":639,"line":739},[637,23803,2415],{"class":650},[637,23805,23806],{"class":683}," showDetails ",[637,23808,657],{"class":642},[637,23810,3872],{"class":2434},[637,23812,2437],{"class":683},[637,23814,961],{"class":4397},[637,23816,2448],{"class":683},[637,23818,23819,23821,23823,23825,23827,23829,23831,23833,23835,23838,23840],{"class":639,"line":745},[637,23820,2415],{"class":650},[637,23822,680],{"class":642},[637,23824,22642],{"class":683},[637,23826,2428],{"class":642},[637,23828,2431],{"class":642},[637,23830,22134],{"class":2434},[637,23832,2437],{"class":683},[637,23834,2440],{"class":642},[637,23836,23837],{"class":663},"/detailed-icon.svg",[637,23839,2440],{"class":642},[637,23841,2448],{"class":683},[637,23843,23844],{"class":639,"line":755},[637,23845,742],{"emptyLinePlaceholder":594},[637,23847,23848,23850,23853,23855,23857,23859,23861],{"class":639,"line":778},[637,23849,2415],{"class":650},[637,23851,23852],{"class":683}," visibleLayers ",[637,23854,657],{"class":642},[637,23856,3489],{"class":2434},[637,23858,2437],{"class":683},[637,23860,3674],{"class":642},[637,23862,23863],{"class":650}," =>\n",[637,23865,23866,23869,23871],{"class":639,"line":790},[637,23867,23868],{"class":683},"  showDetails",[637,23870,1146],{"class":642},[637,23872,23873],{"class":683},"value\n",[637,23875,23876,23879,23881,23883],{"class":639,"line":800},[637,23877,23878],{"class":642},"    ?",[637,23880,22178],{"class":683},[637,23882,1146],{"class":642},[637,23884,23873],{"class":683},[637,23886,23887,23890,23892,23894,23896,23898,23901,23903,23905,23907,23910,23912,23914],{"class":639,"line":805},[637,23888,23889],{"class":642},"    :",[637,23891,22178],{"class":683},[637,23893,1146],{"class":642},[637,23895,3685],{"class":683},[637,23897,1146],{"class":642},[637,23899,23900],{"class":2434},"filter",[637,23902,2437],{"class":683},[637,23904,23063],{"class":6838},[637,23906,3677],{"class":650},[637,23908,23909],{"class":642}," !",[637,23911,23063],{"class":683},[637,23913,1146],{"class":642},[637,23915,23916],{"class":683},"isStroke)\n",[637,23918,23919],{"class":639,"line":827},[637,23920,2448],{"class":683},[637,23922,23923,23925,23927],{"class":639,"line":631},[637,23924,732],{"class":642},[637,23926,647],{"class":646},[637,23928,669],{"class":642},[637,23930,23931],{"class":639,"line":850},[637,23932,742],{"emptyLinePlaceholder":594},[637,23934,23935,23937,23939],{"class":639,"line":861},[637,23936,643],{"class":642},[637,23938,750],{"class":646},[637,23940,669],{"class":642},[637,23942,23943,23945,23947],{"class":639,"line":872},[637,23944,758],{"class":642},[637,23946,10041],{"class":646},[637,23948,669],{"class":642},[637,23950,23951,23953],{"class":639,"line":882},[637,23952,781],{"class":642},[637,23954,5126],{"class":646},[637,23956,23957,23959,23961,23963,23966],{"class":639,"line":632},[637,23958,22298],{"class":650},[637,23960,657],{"class":642},[637,23962,660],{"class":642},[637,23964,23965],{"class":663},"(layer, index) in visibleLayers",[637,23967,3131],{"class":642},[637,23969,23970,23972,23974,23976,23978],{"class":639,"line":902},[637,23971,22312],{"class":650},[637,23973,657],{"class":642},[637,23975,660],{"class":642},[637,23977,7998],{"class":663},[637,23979,3131],{"class":642},[637,23981,23982,23984,23986,23988,23990],{"class":639,"line":912},[637,23983,22326],{"class":650},[637,23985,657],{"class":642},[637,23987,660],{"class":642},[637,23989,22333],{"class":663},[637,23991,3131],{"class":642},[637,23993,23994],{"class":639,"line":2625},[637,23995,12391],{"class":642},[637,23997,23998,24000,24002,24004,24006,24008,24010,24012],{"class":639,"line":2634},[637,23999,853],{"class":642},[637,24001,7472],{"class":646},[637,24003,10215],{"class":650},[637,24005,657],{"class":642},[637,24007,660],{"class":642},[637,24009,22367],{"class":663},[637,24011,660],{"class":642},[637,24013,787],{"class":642},[637,24015,24016,24018,24020],{"class":639,"line":2654},[637,24017,895],{"class":642},[637,24019,856],{"class":646},[637,24021,669],{"class":642},[637,24023,24024,24026,24028],{"class":639,"line":2663},[637,24025,905],{"class":642},[637,24027,10041],{"class":646},[637,24029,669],{"class":642},[637,24031,24032,24034,24036],{"class":639,"line":2672},[637,24033,732],{"class":642},[637,24035,750],{"class":646},[637,24037,669],{"class":642},[22962,24039,24041],{"id":24040},"material-customization-per-layer","Material Customization per Layer",[626,24043,24045],{"className":628,"code":24044,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[618,24046,24047,24067,24085,24089,24116,24124,24135,24145,24149,24158,24168,24179,24192,24196,24202,24210,24214,24222,24230,24236,24248,24260,24272,24276,24282,24294,24308,24312,24320,24328],{"__ignoreMap":576},[637,24048,24049,24051,24053,24055,24057,24059,24061,24063,24065],{"class":639,"line":577},[637,24050,643],{"class":642},[637,24052,647],{"class":646},[637,24054,651],{"class":650},[637,24056,654],{"class":650},[637,24058,657],{"class":642},[637,24060,660],{"class":642},[637,24062,664],{"class":663},[637,24064,660],{"class":642},[637,24066,669],{"class":642},[637,24068,24069,24071,24073,24075,24077,24079,24081,24083],{"class":639,"line":578},[637,24070,677],{"class":676},[637,24072,680],{"class":642},[637,24074,22134],{"class":683},[637,24076,693],{"class":642},[637,24078,696],{"class":676},[637,24080,699],{"class":642},[637,24082,702],{"class":663},[637,24084,705],{"class":642},[637,24086,24087],{"class":639,"line":708},[637,24088,742],{"emptyLinePlaceholder":594},[637,24090,24091,24093,24095,24097,24099,24101,24103,24105,24107,24110,24112,24114],{"class":639,"line":729},[637,24092,2415],{"class":650},[637,24094,680],{"class":642},[637,24096,22642],{"class":683},[637,24098,2428],{"class":642},[637,24100,2431],{"class":642},[637,24102,22134],{"class":2434},[637,24104,2437],{"class":683},[637,24106,2440],{"class":642},[637,24108,24109],{"class":663},"/logo.svg",[637,24111,2440],{"class":642},[637,24113,687],{"class":642},[637,24115,1204],{"class":642},[637,24117,24118,24120,24122],{"class":639,"line":739},[637,24119,22218],{"class":646},[637,24121,1218],{"class":642},[637,24123,1204],{"class":642},[637,24125,24126,24129,24131,24133],{"class":639,"line":745},[637,24127,24128],{"class":646},"    transparent",[637,24130,1218],{"class":642},[637,24132,4398],{"class":4397},[637,24134,2488],{"class":642},[637,24136,24137,24140,24142],{"class":639,"line":755},[637,24138,24139],{"class":646},"    opacity",[637,24141,1218],{"class":642},[637,24143,24144],{"class":2501}," 0.9\n",[637,24146,24147],{"class":639,"line":778},[637,24148,2597],{"class":642},[637,24150,24151,24154,24156],{"class":639,"line":790},[637,24152,24153],{"class":646},"  strokeMaterial",[637,24155,1218],{"class":642},[637,24157,1204],{"class":642},[637,24159,24160,24162,24164,24166],{"class":639,"line":800},[637,24161,24128],{"class":646},[637,24163,1218],{"class":642},[637,24165,4398],{"class":4397},[637,24167,2488],{"class":642},[637,24169,24170,24172,24174,24177],{"class":639,"line":805},[637,24171,24139],{"class":646},[637,24173,1218],{"class":642},[637,24175,24176],{"class":2501}," 1.0",[637,24178,2488],{"class":642},[637,24180,24181,24184,24186,24188,24190],{"class":639,"line":827},[637,24182,24183],{"class":646},"    color",[637,24185,1218],{"class":642},[637,24187,699],{"class":642},[637,24189,23103],{"class":663},[637,24191,705],{"class":642},[637,24193,24194],{"class":639,"line":631},[637,24195,7857],{"class":642},[637,24197,24198,24200],{"class":639,"line":850},[637,24199,2428],{"class":642},[637,24201,2448],{"class":683},[637,24203,24204,24206,24208],{"class":639,"line":861},[637,24205,732],{"class":642},[637,24207,647],{"class":646},[637,24209,669],{"class":642},[637,24211,24212],{"class":639,"line":872},[637,24213,742],{"emptyLinePlaceholder":594},[637,24215,24216,24218,24220],{"class":639,"line":882},[637,24217,643],{"class":642},[637,24219,750],{"class":646},[637,24221,669],{"class":642},[637,24223,24224,24226,24228],{"class":639,"line":632},[637,24225,758],{"class":642},[637,24227,10041],{"class":646},[637,24229,669],{"class":642},[637,24231,24232,24234],{"class":639,"line":902},[637,24233,781],{"class":642},[637,24235,5126],{"class":646},[637,24237,24238,24240,24242,24244,24246],{"class":639,"line":912},[637,24239,22298],{"class":650},[637,24241,657],{"class":642},[637,24243,660],{"class":642},[637,24245,22305],{"class":663},[637,24247,3131],{"class":642},[637,24249,24250,24252,24254,24256,24258],{"class":639,"line":2625},[637,24251,22312],{"class":650},[637,24253,657],{"class":642},[637,24255,660],{"class":642},[637,24257,7998],{"class":663},[637,24259,3131],{"class":642},[637,24261,24262,24264,24266,24268,24270],{"class":639,"line":2634},[637,24263,22326],{"class":650},[637,24265,657],{"class":642},[637,24267,660],{"class":642},[637,24269,22333],{"class":663},[637,24271,3131],{"class":642},[637,24273,24274],{"class":639,"line":2654},[637,24275,12391],{"class":642},[637,24277,24278,24280],{"class":639,"line":2663},[637,24279,853],{"class":642},[637,24281,23215],{"class":646},[637,24283,24284,24286,24288,24290,24292],{"class":639,"line":2672},[637,24285,23220],{"class":650},[637,24287,657],{"class":642},[637,24289,660],{"class":642},[637,24291,22367],{"class":663},[637,24293,3131],{"class":642},[637,24295,24296,24299,24301,24303,24306],{"class":639,"line":2681},[637,24297,24298],{"class":650},"        :wireframe",[637,24300,657],{"class":642},[637,24302,660],{"class":642},[637,24304,24305],{"class":663},"layer.isStroke",[637,24307,3131],{"class":642},[637,24309,24310],{"class":639,"line":2703},[637,24311,8033],{"class":642},[637,24313,24314,24316,24318],{"class":639,"line":2747},[637,24315,895],{"class":642},[637,24317,856],{"class":646},[637,24319,669],{"class":642},[637,24321,24322,24324,24326],{"class":639,"line":2756},[637,24323,905],{"class":642},[637,24325,10041],{"class":646},[637,24327,669],{"class":642},[637,24329,24330,24332,24334],{"class":639,"line":2765},[637,24331,732],{"class":642},[637,24333,750],{"class":646},[637,24335,669],{"class":642},[504,24337,24339],{"id":24338},"usesvg-component","UseSVG Component",[614,24341,24342,24343,24346],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[618,24344,24345],{},"UseSVG"," component:",[626,24348,24350],{"className":628,"code":24349,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[618,24351,24352,24372,24391,24399,24403,24411,24440,24447,24461,24474,24486,24493,24506,24510,24518],{"__ignoreMap":576},[637,24353,24354,24356,24358,24360,24362,24364,24366,24368,24370],{"class":639,"line":577},[637,24355,643],{"class":642},[637,24357,647],{"class":646},[637,24359,651],{"class":650},[637,24361,654],{"class":650},[637,24363,657],{"class":642},[637,24365,660],{"class":642},[637,24367,664],{"class":663},[637,24369,660],{"class":642},[637,24371,669],{"class":642},[637,24373,24374,24376,24378,24381,24383,24385,24387,24389],{"class":639,"line":578},[637,24375,677],{"class":676},[637,24377,680],{"class":642},[637,24379,24380],{"class":683}," UseSVG",[637,24382,693],{"class":642},[637,24384,696],{"class":676},[637,24386,699],{"class":642},[637,24388,702],{"class":663},[637,24390,705],{"class":642},[637,24392,24393,24395,24397],{"class":639,"line":708},[637,24394,732],{"class":642},[637,24396,647],{"class":646},[637,24398,669],{"class":642},[637,24400,24401],{"class":639,"line":729},[637,24402,742],{"emptyLinePlaceholder":594},[637,24404,24405,24407,24409],{"class":639,"line":739},[637,24406,643],{"class":642},[637,24408,750],{"class":646},[637,24410,669],{"class":642},[637,24412,24413,24415,24417,24419,24421,24423,24425,24427,24429,24431,24433,24436,24438],{"class":639,"line":745},[637,24414,758],{"class":642},[637,24416,10041],{"class":646},[637,24418,813],{"class":650},[637,24420,657],{"class":642},[637,24422,660],{"class":642},[637,24424,1886],{"class":663},[637,24426,660],{"class":642},[637,24428,1485],{"class":650},[637,24430,657],{"class":642},[637,24432,660],{"class":642},[637,24434,24435],{"class":663},"[-2.1, 1, 0]",[637,24437,660],{"class":642},[637,24439,669],{"class":642},[637,24441,24442,24444],{"class":639,"line":755},[637,24443,781],{"class":642},[637,24445,24446],{"class":646},"UseSVG\n",[637,24448,24449,24452,24454,24456,24459],{"class":639,"line":778},[637,24450,24451],{"class":650},"      src",[637,24453,657],{"class":642},[637,24455,660],{"class":642},[637,24457,24458],{"class":663},"/path/to/logo.svg",[637,24460,3131],{"class":642},[637,24462,24463,24466,24468,24470,24472],{"class":639,"line":790},[637,24464,24465],{"class":650},"      :skip-fills",[637,24467,657],{"class":642},[637,24469,660],{"class":642},[637,24471,971],{"class":663},[637,24473,3131],{"class":642},[637,24475,24476,24479,24481,24483],{"class":639,"line":800},[637,24477,24478],{"class":650},"      :fill-material",[637,24480,657],{"class":642},[637,24482,660],{"class":642},[637,24484,24485],{"class":663},"{ transparent: true,\n",[637,24487,24488,24491],{"class":639,"line":805},[637,24489,24490],{"class":663},"                        opacity: 0.8 }",[637,24492,3131],{"class":642},[637,24494,24495,24498,24500,24502,24504],{"class":639,"line":827},[637,24496,24497],{"class":650},"      depth",[637,24499,657],{"class":642},[637,24501,660],{"class":642},[637,24503,23311],{"class":663},[637,24505,3131],{"class":642},[637,24507,24508],{"class":639,"line":631},[637,24509,17274],{"class":642},[637,24511,24512,24514,24516],{"class":639,"line":850},[637,24513,905],{"class":642},[637,24515,10041],{"class":646},[637,24517,669],{"class":642},[637,24519,24520,24522,24524],{"class":639,"line":861},[637,24521,732],{"class":642},[637,24523,750],{"class":646},[637,24525,669],{"class":642},[4051,24527,922],{"id":921},[927,24529,24530,24542],{},[930,24531,24532],{},[933,24533,24534,24536,24538,24540],{},[936,24535,938],{"align":997},[936,24537,5969],{},[936,24539,941],{"align":997},[936,24541,944],{},[946,24543,24544,24564,24583,24602,24619,24636,24655,24673],{},[933,24545,24546,24551,24555,24562],{},[951,24547,24548],{"align":997},[1669,24549,24550],{},"src",[951,24552,24553],{},[618,24554,3572],{},[951,24556,24557,24558,24561],{"align":997},"Either a path to an SVG ",[1674,24559,24560],{},"or"," an SVG string",[951,24563],{},[933,24565,24566,24570,24574,24579],{},[951,24567,24568],{"align":997},[1669,24569,22810],{},[951,24571,24572],{},[618,24573,17564],{},[951,24575,958,24576,24578],{"align":997},[618,24577,961],{},", the SVG strokes will not be rendered.",[951,24580,24581],{},[618,24582,971],{},[933,24584,24585,24589,24593,24598],{},[951,24586,24587],{"align":997},[1669,24588,22828],{},[951,24590,24591],{},[618,24592,17564],{},[951,24594,958,24595,24597],{"align":997},[618,24596,961],{},", the SVG fills will not be rendered.",[951,24599,24600],{},[618,24601,971],{},[933,24603,24604,24608,24612,24615],{},[951,24605,24606],{"align":997},[1669,24607,22865],{},[951,24609,24610],{},[618,24611,22851],{},[951,24613,24614],{"align":997},"Props to assign to the stroke materials of the resulting meshes.",[951,24616,24617],{},[618,24618,1179],{},[933,24620,24621,24625,24629,24632],{},[951,24622,24623],{"align":997},[1669,24624,22846],{},[951,24626,24627],{},[618,24628,22851],{},[951,24630,24631],{"align":997},"Props to assign to the fill materials of the resulting meshes.",[951,24633,24634],{},[618,24635,1179],{},[933,24637,24638,24643,24648,24651],{},[951,24639,24640],{"align":997},[1669,24641,24642],{},"strokeMeshProps",[951,24644,24645],{},[618,24646,24647],{},"TresOptions",[951,24649,24650],{"align":997},"Props to assign to the resulting stroke meshes.",[951,24652,24653],{},[618,24654,1179],{},[933,24656,24657,24662,24666,24669],{},[951,24658,24659],{"align":997},[1669,24660,24661],{},"fillMeshProps",[951,24663,24664],{},[618,24665,24647],{},[951,24667,24668],{"align":997},"Props to assign to the resulting fill meshes.",[951,24670,24671],{},[618,24672,1179],{},[933,24674,24675,24679,24683,24690],{},[951,24676,24677],{"align":997},[1669,24678,13084],{},[951,24680,24681],{},[618,24682,22887],{},[951,24684,24685,24686,3340],{"align":997},"Specify how SVG layers are to be rendered. (",[1140,24687,24689],{"href":24688},"#depth-handling","See \"Depth\"",[951,24691,24692],{},[618,24693,23311],{},[504,24695,24697],{"id":24696},"troubleshooting","Troubleshooting",[24699,24700,24702],"alert",{"type":24701},"warning",[614,24703,24704],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[614,24706,24707],{},"Here are some things to try if you run into problems:",[4051,24709,24711],{"id":24710},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2213,24713,24714],{},[2216,24715,24716,24717,2250,24719,1146],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[618,24718,7571],{},[618,24720,24721],{},"rgb(255, 0, 0)",[4051,24723,24725],{"id":24724},"parts-of-the-svg-render-in-the-wrong-order-or-disappear-depending-on-viewing-angle","Parts of the SVG render in the wrong order or disappear, depending on viewing angle",[2213,24727,24728,24740],{},[2216,24729,24730,24731,24733,24734,1146],{},"In your ",[618,24732,157],{}," options, ",[1140,24735,24736,24737,24739],{"href":24688},"change the ",[618,24738,13084],{}," option",[2216,24741,24742,24743,24746,24747,1146],{},"In the SVG source, use ",[618,24744,24745],{},"fill=\"none\""," rather than ",[618,24748,24749],{},"fill-opacity=\"0\"",[4051,24751,24753,24754],{"id":24752},"parts-of-the-svg-z-fight","Parts of the SVG ",[1140,24755,24757],{"href":23475,"rel":24756},[1144],"\"z-fight\"",[2213,24759,24760,24768],{},[2216,24761,24730,24762,24733,24764,1146],{},[618,24763,157],{},[1140,24765,24736,24766,24739],{"href":24688},[618,24767,13084],{},[2216,24769,24770],{},"Increase the distance between the SVG and other on-screen elements.",[4051,24772,24774],{"id":24773},"the-svg-is-not-visible","The SVG is not visible",[2213,24776,24777,24780,24789,24795],{},[2216,24778,24779],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2216,24781,24782,24783,24785,24786,1146],{},"Try scaling the SVG down, e.g., wrap it in a ",[618,24784,10041],{}," with ",[618,24787,24788],{},":scale=\"0.01\"",[2216,24790,24791,24792,1146],{},"Try moving the SVG up (+y), e.g., ",[618,24793,24794],{},":position=\"[0,2,0]\"",[2216,24796,24797,24798,24801],{},"Check that ",[618,24799,24800],{},"layers.length > 0"," before rendering.",[4051,24803,24805],{"id":24804},"performance-issues-with-many-layers","Performance issues with many layers",[2213,24807,24808,24815,24823],{},[2216,24809,24810,24811,24814],{},"Use the ",[618,24812,24813],{},"dispose()"," function when components unmount to clean up geometries.",[2216,24816,24817,24818,5611,24820,24822],{},"Consider using ",[618,24819,22810],{},[618,24821,22828],{}," to reduce the number of rendered layers.",[2216,24824,24825],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[504,24827,24829,24830,24832,24833,24835],{"id":24828},"when-to-use-usesvg-vs-svg-component","When to Use ",[618,24831,157],{}," vs ",[618,24834,22084],{}," Component",[614,24837,24838],{},[1669,24839,24840,24841,24843],{},"Use ",[618,24842,157],{}," when you need:",[2213,24845,24846,24849,24852,24855,24858],{},[2216,24847,24848],{},"Direct access to individual SVG layers",[2216,24850,24851],{},"Custom rendering logic",[2216,24853,24854],{},"Layer-specific animations",[2216,24856,24857],{},"Programmatic geometry manipulation",[2216,24859,24860],{},"Advanced material customization per layer",[614,24862,24863],{},[1669,24864,24810,24865,24867],{},[618,24866,22084],{}," component when you need:",[2213,24869,24870,24873,24876,24879],{},[2216,24871,24872],{},"Simple, declarative SVG rendering",[2216,24874,24875],{},"Quick prototyping",[2216,24877,24878],{},"Standard SVG display without custom logic",[2216,24880,24881],{},"Less code and setup",[1327,24883,24884],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":24886},[24887,24897,24900,24908],{"id":22088,"depth":578,"text":22089,"children":24888},[24889,24890,24891,24892,24893,24894,24895,24896],{"id":624,"depth":708,"text":15},{"id":22597,"depth":708,"text":22598},{"id":17399,"depth":708,"text":17400},{"id":17537,"depth":708,"text":14023},{"id":22898,"depth":708,"text":22899},{"id":23273,"depth":708,"text":23274},{"id":23594,"depth":708,"text":23595},{"id":23729,"depth":708,"text":23730},{"id":24338,"depth":578,"text":24339,"children":24898},[24899],{"id":921,"depth":708,"text":922},{"id":24696,"depth":578,"text":24697,"children":24901},[24902,24903,24904,24906,24907],{"id":24710,"depth":708,"text":24711},{"id":24724,"depth":708,"text":24725},{"id":24752,"depth":708,"text":24905},"Parts of the SVG \"z-fight\"",{"id":24773,"depth":708,"text":24774},{"id":24804,"depth":708,"text":24805},{"id":24828,"depth":578,"text":24909},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":157,"description":24910},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":24915,"title":161,"body":24916,"description":25385,"extension":591,"links":592,"meta":25386,"navigation":594,"path":162,"seo":25387,"stem":163,"__hash__":25388},"docs/2.api/3.loaders/use-progress.md",{"type":501,"value":24917,"toc":25381},[24918,24925,24928,24930,24988,24994,25293,25304,25306,25362,25378],[614,24919,24920,24921,24924],{},"A composable to convenience wrap ",[618,24922,24923],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[614,24926,24927],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[504,24929,15],{"id":624},[626,24931,24933],{"className":1186,"code":24932,"language":664,"meta":576,"style":576},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[618,24934,24935,24954,24958],{"__ignoreMap":576},[637,24936,24937,24939,24941,24944,24946,24948,24950,24952],{"class":639,"line":577},[637,24938,677],{"class":676},[637,24940,680],{"class":642},[637,24942,24943],{"class":683}," useProgress",[637,24945,693],{"class":642},[637,24947,696],{"class":676},[637,24949,699],{"class":642},[637,24951,702],{"class":663},[637,24953,705],{"class":642},[637,24955,24956],{"class":639,"line":578},[637,24957,742],{"emptyLinePlaceholder":594},[637,24959,24960,24962,24964,24967,24969,24972,24974,24977,24979,24981,24984,24986],{"class":639,"line":708},[637,24961,2415],{"class":650},[637,24963,680],{"class":642},[637,24965,24966],{"class":683}," hasFinishLoading",[637,24968,687],{"class":642},[637,24970,24971],{"class":683}," progress",[637,24973,687],{"class":642},[637,24975,24976],{"class":683}," items ",[637,24978,2428],{"class":642},[637,24980,2431],{"class":642},[637,24982,24983],{"class":676}," await",[637,24985,24943],{"class":2434},[637,24987,6535],{"class":683},[614,24989,24990,24991,24993],{},"Then you can use the ",[618,24992,17496],{}," value to show a loading bar or a spinner:",[626,24995,24997],{"className":628,"code":24996,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003CTransition\n    name=\"fade-overlay\"\n    enter-active-class=\"opacity-1 transition-opacity duration-200\"\n    leave-active-class=\"opacity-0 transition-opacity duration-200\"\n  >\n    \u003Cdiv\n      v-show=\"!hasFinishLoading\"\n      class=\"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono\"\n    >\n      \u003Cdiv class=\"w-200px\">\n        Loading... {{ progress }} %\n        \u003Ci class=\"i-ic-twotone-catching-pokemon animate-rotate-in\">\u003C/i>\n      \u003C/div>\n    \u003C/div>\n  \u003C/Transition>\n  \u003CTresCanvas preset=\"realistic\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CEnvironment\n        background\n        :files=\"environmentFiles\"\n        path=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,24998,24999,25007,25014,25027,25041,25055,25059,25066,25080,25094,25098,25118,25123,25147,25155,25163,25172,25191,25209,25217,25225,25232,25237,25251,25265,25269,25277,25285],{"__ignoreMap":576},[637,25000,25001,25003,25005],{"class":639,"line":577},[637,25002,643],{"class":642},[637,25004,750],{"class":646},[637,25006,669],{"class":642},[637,25008,25009,25011],{"class":639,"line":578},[637,25010,758],{"class":642},[637,25012,25013],{"class":646},"Transition\n",[637,25015,25016,25018,25020,25022,25025],{"class":639,"line":708},[637,25017,5145],{"class":650},[637,25019,657],{"class":642},[637,25021,660],{"class":642},[637,25023,25024],{"class":663},"fade-overlay",[637,25026,3131],{"class":642},[637,25028,25029,25032,25034,25036,25039],{"class":639,"line":729},[637,25030,25031],{"class":650},"    enter-active-class",[637,25033,657],{"class":642},[637,25035,660],{"class":642},[637,25037,25038],{"class":663},"opacity-1 transition-opacity duration-200",[637,25040,3131],{"class":642},[637,25042,25043,25046,25048,25050,25053],{"class":639,"line":739},[637,25044,25045],{"class":650},"    leave-active-class",[637,25047,657],{"class":642},[637,25049,660],{"class":642},[637,25051,25052],{"class":663},"opacity-0 transition-opacity duration-200",[637,25054,3131],{"class":642},[637,25056,25057],{"class":639,"line":745},[637,25058,5173],{"class":642},[637,25060,25061,25063],{"class":639,"line":755},[637,25062,781],{"class":642},[637,25064,25065],{"class":646},"div\n",[637,25067,25068,25071,25073,25075,25078],{"class":639,"line":778},[637,25069,25070],{"class":650},"      v-show",[637,25072,657],{"class":642},[637,25074,660],{"class":642},[637,25076,25077],{"class":663},"!hasFinishLoading",[637,25079,3131],{"class":642},[637,25081,25082,25085,25087,25089,25092],{"class":639,"line":790},[637,25083,25084],{"class":650},"      class",[637,25086,657],{"class":642},[637,25088,660],{"class":642},[637,25090,25091],{"class":663},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[637,25093,3131],{"class":642},[637,25095,25096],{"class":639,"line":800},[637,25097,12391],{"class":642},[637,25099,25100,25102,25104,25107,25109,25111,25114,25116],{"class":639,"line":805},[637,25101,853],{"class":642},[637,25103,4119],{"class":646},[637,25105,25106],{"class":650}," class",[637,25108,657],{"class":642},[637,25110,660],{"class":642},[637,25112,25113],{"class":663},"w-200px",[637,25115,660],{"class":642},[637,25117,669],{"class":642},[637,25119,25120],{"class":639,"line":827},[637,25121,25122],{"class":683},"        Loading... {{ progress }} %\n",[637,25124,25125,25127,25129,25131,25133,25135,25138,25140,25143,25145],{"class":639,"line":631},[637,25126,864],{"class":642},[637,25128,8621],{"class":646},[637,25130,25106],{"class":650},[637,25132,657],{"class":642},[637,25134,660],{"class":642},[637,25136,25137],{"class":663},"i-ic-twotone-catching-pokemon animate-rotate-in",[637,25139,660],{"class":642},[637,25141,25142],{"class":642},">\u003C/",[637,25144,8621],{"class":646},[637,25146,669],{"class":642},[637,25148,25149,25151,25153],{"class":639,"line":850},[637,25150,885],{"class":642},[637,25152,4119],{"class":646},[637,25154,669],{"class":642},[637,25156,25157,25159,25161],{"class":639,"line":861},[637,25158,895],{"class":642},[637,25160,4119],{"class":646},[637,25162,669],{"class":642},[637,25164,25165,25167,25170],{"class":639,"line":872},[637,25166,905],{"class":642},[637,25168,25169],{"class":646},"Transition",[637,25171,669],{"class":642},[637,25173,25174,25176,25178,25180,25182,25184,25187,25189],{"class":639,"line":882},[637,25175,758],{"class":642},[637,25177,761],{"class":646},[637,25179,21664],{"class":650},[637,25181,657],{"class":642},[637,25183,660],{"class":642},[637,25185,25186],{"class":663},"realistic",[637,25188,660],{"class":642},[637,25190,669],{"class":642},[637,25192,25193,25195,25197,25199,25201,25203,25205,25207],{"class":639,"line":632},[637,25194,781],{"class":642},[637,25196,784],{"class":646},[637,25198,1485],{"class":650},[637,25200,657],{"class":642},[637,25202,660],{"class":642},[637,25204,19041],{"class":663},[637,25206,660],{"class":642},[637,25208,787],{"class":642},[637,25210,25211,25213,25215],{"class":639,"line":902},[637,25212,781],{"class":642},[637,25214,795],{"class":646},[637,25216,787],{"class":642},[637,25218,25219,25221,25223],{"class":639,"line":912},[637,25220,781],{"class":642},[637,25222,21652],{"class":646},[637,25224,669],{"class":642},[637,25226,25227,25229],{"class":639,"line":2625},[637,25228,853],{"class":642},[637,25230,25231],{"class":646},"Environment\n",[637,25233,25234],{"class":639,"line":2634},[637,25235,25236],{"class":650},"        background\n",[637,25238,25239,25242,25244,25246,25249],{"class":639,"line":2654},[637,25240,25241],{"class":650},"        :files",[637,25243,657],{"class":642},[637,25245,660],{"class":642},[637,25247,25248],{"class":663},"environmentFiles",[637,25250,3131],{"class":642},[637,25252,25253,25256,25258,25260,25263],{"class":639,"line":2663},[637,25254,25255],{"class":650},"        path",[637,25257,657],{"class":642},[637,25259,660],{"class":642},[637,25261,25262],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[637,25264,3131],{"class":642},[637,25266,25267],{"class":639,"line":2672},[637,25268,8033],{"class":642},[637,25270,25271,25273,25275],{"class":639,"line":2681},[637,25272,895],{"class":642},[637,25274,21652],{"class":646},[637,25276,669],{"class":642},[637,25278,25279,25281,25283],{"class":639,"line":2703},[637,25280,905],{"class":642},[637,25282,761],{"class":646},[637,25284,669],{"class":642},[637,25286,25287,25289,25291],{"class":639,"line":2747},[637,25288,732],{"class":642},[637,25290,750],{"class":646},[637,25292,669],{"class":642},[24699,25294,25295],{"type":24701},[614,25296,25297,25298,25303],{},"This component use top level await. Please check the ",[1140,25299,25302],{"href":25300,"rel":25301},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1144],"Suspense API"," for more info",[504,25305,17400],{"id":17399},[927,25307,25308,25318],{},[930,25309,25310],{},[933,25311,25312,25314,25316],{},[936,25313,8089],{"align":997},[936,25315,5969],{"align":997},[936,25317,941],{"align":997},[946,25319,25320,25334,25347],{},[933,25321,25322,25327,25331],{},[951,25323,25324],{"align":997},[618,25325,25326],{},"hasFinishLoading",[951,25328,25329],{"align":997},[618,25330,17564],{},[951,25332,25333],{"align":997},"Whether all items have finished loading",[933,25335,25336,25340,25344],{},[951,25337,25338],{"align":997},[618,25339,17496],{},[951,25341,25342],{"align":997},[618,25343,5352],{},[951,25345,25346],{"align":997},"Loading progress as percentage (0-100)",[933,25348,25349,25354,25359],{},[951,25350,25351],{"align":997},[618,25352,25353],{},"items",[951,25355,25356],{"align":997},[618,25357,25358],{},"Array",[951,25360,25361],{"align":997},"Array of loading items with their status",[3199,25363,25364],{},[614,25365,25366,25367,25372,25373,25303],{},"This component use top level await it needs to be wrapped on a ",[1140,25368,25370],{"href":25300,"rel":25369},[1144],[618,25371,21652],{},". Please check the ",[1140,25374,25376],{"href":25300,"rel":25375},[1144],[618,25377,25302],{},[1327,25379,25380],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":576,"searchDepth":577,"depth":578,"links":25382},[25383,25384],{"id":624,"depth":578,"text":15},{"id":17399,"depth":578,"text":17400},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":161,"description":25385},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":25390,"title":165,"body":25391,"description":25968,"extension":591,"links":592,"meta":25969,"navigation":594,"path":166,"seo":25970,"stem":167,"__hash__":25971},"docs/2.api/3.loaders/use-video-texture.md",{"type":501,"value":25392,"toc":25964},[25393,25398,25401,25408,25410,25847,25849,25952,25961],[2295,25394,25395],{},[25396,25397],"loaders-use-video-texture",{},[614,25399,25400],{},"A composable to easily use videos as textures in your meshes.",[614,25402,25403,25404],{},"This composable is based on the Drei ",[1140,25405,165],{"href":25406,"rel":25407},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1144],[504,25409,15],{"id":624},[16932,25411,25412,25627],{},[626,25413,25415],{"className":628,"code":25414,"filename":17087,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 5, 9]\"\n      :look-at=\"[0, 1, 0]\"\n    />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CTheModel />\n    \u003C/Suspense>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,25416,25417,25437,25455,25473,25487,25495,25499,25507,25525,25532,25545,25559,25563,25571,25579,25587,25595,25603,25611,25619],{"__ignoreMap":576},[637,25418,25419,25421,25423,25425,25427,25429,25431,25433,25435],{"class":639,"line":577},[637,25420,643],{"class":642},[637,25422,647],{"class":646},[637,25424,651],{"class":650},[637,25426,654],{"class":650},[637,25428,657],{"class":642},[637,25430,660],{"class":642},[637,25432,664],{"class":663},[637,25434,660],{"class":642},[637,25436,669],{"class":642},[637,25438,25439,25441,25443,25445,25447,25449,25451,25453],{"class":639,"line":578},[637,25440,677],{"class":676},[637,25442,680],{"class":642},[637,25444,690],{"class":683},[637,25446,693],{"class":642},[637,25448,696],{"class":676},[637,25450,699],{"class":642},[637,25452,702],{"class":663},[637,25454,705],{"class":642},[637,25456,25457,25459,25461,25463,25465,25467,25469,25471],{"class":639,"line":708},[637,25458,677],{"class":676},[637,25460,680],{"class":642},[637,25462,715],{"class":683},[637,25464,693],{"class":642},[637,25466,696],{"class":676},[637,25468,699],{"class":642},[637,25470,724],{"class":663},[637,25472,705],{"class":642},[637,25474,25475,25477,25479,25481,25483,25485],{"class":639,"line":729},[637,25476,677],{"class":676},[637,25478,17152],{"class":683},[637,25480,8433],{"class":676},[637,25482,699],{"class":642},[637,25484,17159],{"class":663},[637,25486,705],{"class":642},[637,25488,25489,25491,25493],{"class":639,"line":739},[637,25490,732],{"class":642},[637,25492,647],{"class":646},[637,25494,669],{"class":642},[637,25496,25497],{"class":639,"line":745},[637,25498,742],{"emptyLinePlaceholder":594},[637,25500,25501,25503,25505],{"class":639,"line":755},[637,25502,643],{"class":642},[637,25504,750],{"class":646},[637,25506,669],{"class":642},[637,25508,25509,25511,25513,25515,25517,25519,25521,25523],{"class":639,"line":778},[637,25510,758],{"class":642},[637,25512,761],{"class":646},[637,25514,764],{"class":650},[637,25516,657],{"class":642},[637,25518,660],{"class":642},[637,25520,12938],{"class":663},[637,25522,660],{"class":642},[637,25524,669],{"class":642},[637,25526,25527,25529],{"class":639,"line":790},[637,25528,781],{"class":642},[637,25530,25531],{"class":646},"TresPerspectiveCamera\n",[637,25533,25534,25536,25538,25540,25543],{"class":639,"line":800},[637,25535,17261],{"class":650},[637,25537,657],{"class":642},[637,25539,660],{"class":642},[637,25541,25542],{"class":663},"[0, 5, 9]",[637,25544,3131],{"class":642},[637,25546,25547,25550,25552,25554,25557],{"class":639,"line":805},[637,25548,25549],{"class":650},"      :look-at",[637,25551,657],{"class":642},[637,25553,660],{"class":642},[637,25555,25556],{"class":663},"[0, 1, 0]",[637,25558,3131],{"class":642},[637,25560,25561],{"class":639,"line":827},[637,25562,17274],{"class":642},[637,25564,25565,25567,25569],{"class":639,"line":631},[637,25566,781],{"class":642},[637,25568,795],{"class":646},[637,25570,787],{"class":642},[637,25572,25573,25575,25577],{"class":639,"line":850},[637,25574,781],{"class":642},[637,25576,21652],{"class":646},[637,25578,669],{"class":642},[637,25580,25581,25583,25585],{"class":639,"line":861},[637,25582,853],{"class":642},[637,25584,17234],{"class":646},[637,25586,787],{"class":642},[637,25588,25589,25591,25593],{"class":639,"line":872},[637,25590,895],{"class":642},[637,25592,21652],{"class":646},[637,25594,669],{"class":642},[637,25596,25597,25599,25601],{"class":639,"line":882},[637,25598,781],{"class":642},[637,25600,8049],{"class":646},[637,25602,787],{"class":642},[637,25604,25605,25607,25609],{"class":639,"line":632},[637,25606,781],{"class":642},[637,25608,9681],{"class":646},[637,25610,787],{"class":642},[637,25612,25613,25615,25617],{"class":639,"line":902},[637,25614,905],{"class":642},[637,25616,761],{"class":646},[637,25618,669],{"class":642},[637,25620,25621,25623,25625],{"class":639,"line":912},[637,25622,732],{"class":642},[637,25624,750],{"class":646},[637,25626,669],{"class":642},[626,25628,25632],{"className":628,"code":25629,"filename":25630,"highlights":25631,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Sphere, useVideoTexture } from '@tresjs/cientos'\n\nconst videoPath = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'\nconst texture = ref()\ntexture.value = await useVideoTexture(videoPath, { loop: false })\n\u003C/script>\n\n\u003Ctemplate>\n   \u003CSphere :position=\"[0, 2, 0]\">\n      \u003CTresMeshBasicMaterial :map=\"texture\" />\n    \u003C/Sphere>\n\u003C/template>\n","TheVideoTexture.vue",[708,778,631],[618,25633,25634,25654,25672,25697,25701,25716,25727,25739,25772,25780,25784,25792,25812,25831,25839],{"__ignoreMap":576},[637,25635,25636,25638,25640,25642,25644,25646,25648,25650,25652],{"class":639,"line":577},[637,25637,643],{"class":642},[637,25639,647],{"class":646},[637,25641,651],{"class":650},[637,25643,654],{"class":650},[637,25645,657],{"class":642},[637,25647,660],{"class":642},[637,25649,664],{"class":663},[637,25651,660],{"class":642},[637,25653,669],{"class":642},[637,25655,25656,25658,25660,25662,25664,25666,25668,25670],{"class":639,"line":578},[637,25657,677],{"class":676},[637,25659,680],{"class":642},[637,25661,3872],{"class":683},[637,25663,693],{"class":642},[637,25665,696],{"class":676},[637,25667,699],{"class":642},[637,25669,633],{"class":663},[637,25671,705],{"class":642},[637,25673,25675,25677,25679,25682,25684,25687,25689,25691,25693,25695],{"class":25674,"line":708},[639,673],[637,25676,677],{"class":676},[637,25678,680],{"class":642},[637,25680,25681],{"class":683}," Sphere",[637,25683,687],{"class":642},[637,25685,25686],{"class":683}," useVideoTexture",[637,25688,693],{"class":642},[637,25690,696],{"class":676},[637,25692,699],{"class":642},[637,25694,702],{"class":663},[637,25696,705],{"class":642},[637,25698,25699],{"class":639,"line":729},[637,25700,742],{"emptyLinePlaceholder":594},[637,25702,25703,25705,25708,25710,25712,25714],{"class":639,"line":739},[637,25704,2415],{"class":650},[637,25706,25707],{"class":683}," videoPath ",[637,25709,657],{"class":642},[637,25711,699],{"class":642},[637,25713,18806],{"class":663},[637,25715,705],{"class":642},[637,25717,25718,25720,25722,25725],{"class":639,"line":745},[637,25719,18813],{"class":642},[637,25721,699],{"class":642},[637,25723,25724],{"class":663},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[637,25726,705],{"class":642},[637,25728,25729,25731,25733,25735,25737],{"class":639,"line":755},[637,25730,2415],{"class":650},[637,25732,2425],{"class":683},[637,25734,657],{"class":642},[637,25736,3872],{"class":2434},[637,25738,6535],{"class":683},[637,25740,25742,25744,25746,25748,25750,25752,25754,25757,25759,25761,25764,25766,25768,25770],{"class":25741,"line":778},[639,673],[637,25743,2717],{"class":683},[637,25745,1146],{"class":642},[637,25747,6970],{"class":683},[637,25749,657],{"class":642},[637,25751,24983],{"class":676},[637,25753,25686],{"class":2434},[637,25755,25756],{"class":683},"(videoPath",[637,25758,687],{"class":642},[637,25760,680],{"class":642},[637,25762,25763],{"class":646}," loop",[637,25765,1218],{"class":642},[637,25767,6725],{"class":4397},[637,25769,693],{"class":642},[637,25771,2448],{"class":683},[637,25773,25774,25776,25778],{"class":639,"line":790},[637,25775,732],{"class":642},[637,25777,647],{"class":646},[637,25779,669],{"class":642},[637,25781,25782],{"class":639,"line":800},[637,25783,742],{"emptyLinePlaceholder":594},[637,25785,25786,25788,25790],{"class":639,"line":805},[637,25787,643],{"class":642},[637,25789,750],{"class":646},[637,25791,669],{"class":642},[637,25793,25794,25797,25799,25801,25803,25805,25808,25810],{"class":639,"line":827},[637,25795,25796],{"class":642},"   \u003C",[637,25798,285],{"class":646},[637,25800,1485],{"class":650},[637,25802,657],{"class":642},[637,25804,660],{"class":642},[637,25806,25807],{"class":663},"[0, 2, 0]",[637,25809,660],{"class":642},[637,25811,669],{"class":642},[637,25813,25815,25817,25819,25821,25823,25825,25827,25829],{"class":25814,"line":631},[639,673],[637,25816,853],{"class":642},[637,25818,7472],{"class":646},[637,25820,2734],{"class":650},[637,25822,657],{"class":642},[637,25824,660],{"class":642},[637,25826,2717],{"class":663},[637,25828,660],{"class":642},[637,25830,787],{"class":642},[637,25832,25833,25835,25837],{"class":639,"line":850},[637,25834,895],{"class":642},[637,25836,285],{"class":646},[637,25838,669],{"class":642},[637,25840,25841,25843,25845],{"class":639,"line":861},[637,25842,732],{"class":642},[637,25844,750],{"class":646},[637,25846,669],{"class":642},[504,25848,922],{"id":921},[927,25850,25851,25861],{},[930,25852,25853],{},[933,25854,25855,25857,25859],{},[936,25856,938],{"align":997},[936,25858,941],{"align":997},[936,25860,944],{},[946,25862,25863,25876,25890,25905,25917,25929,25940],{},[933,25864,25865,25869,25872],{},[951,25866,25867],{"align":997},[618,25868,24550],{},[951,25870,25871],{"align":997},"Path to the video.",[951,25873,25874],{},[618,25875,1179],{},[933,25877,25878,25883,25885],{},[951,25879,25880],{"align":997},[618,25881,25882],{},"unsuspend",[951,25884,19938],{"align":997},[951,25886,25887],{},[618,25888,25889],{},"loadedmetadata",[933,25891,25892,25897,25900],{},[951,25893,25894],{"align":997},[618,25895,25896],{},"crossOrigin",[951,25898,25899],{"align":997},"Whether to use CORS to fetch the related video.",[951,25901,25902],{},[618,25903,25904],{},"Anonymous",[933,25906,25907,25912,25915],{},[951,25908,25909],{"align":997},[618,25910,25911],{},"muted",[951,25913,25914],{"align":997},"Whether to set the audio silenced.",[951,25916,961],{},[933,25918,25919,25924,25927],{},[951,25920,25921],{"align":997},[618,25922,25923],{},"loop",[951,25925,25926],{"align":997},"Automatically seek back to the start upon reaching the end of the video.",[951,25928,961],{},[933,25930,25931,25935,25938],{},[951,25932,25933],{"align":997},[618,25934,14310],{},[951,25936,25937],{"align":997},"To play to the video once loaded or not.",[951,25939,961],{},[933,25941,25942,25947,25950],{},[951,25943,25944],{"align":997},[618,25945,25946],{},"playsInline",[951,25948,25949],{"align":997},"To be play the video inline or not.",[951,25951,961],{},[2213,25953,25954],{},[2216,25955,25956,25957,25960],{},"Any other attribute for a ",[618,25958,25959],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1327,25962,25963],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":576,"searchDepth":577,"depth":578,"links":25965},[25966,25967],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A composable to load video textures in TresJS scenes.",{},{"title":165,"description":25968},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",[25973,26379,26977,27419,27590,28204,28927,29696,29980],{"id":25974,"title":175,"body":25975,"description":26375,"extension":591,"links":592,"meta":26376,"navigation":594,"path":176,"seo":26377,"stem":177,"__hash__":26378},"docs/2.api/4.materials/custom-shader-material.md",{"type":501,"value":25976,"toc":26371},[25977,25982,26002,26004,26352,26354,26368],[2295,25978,25979],{},[25980,25981],"materials-custom-shader-material",{},[614,25983,2776,25984,25986,25987,25990,25991,25998,25999,1146],{},[618,25985,7317],{}," package provides ",[618,25988,25989],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1140,25992,25995],{"href":25993,"rel":25994},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1144],[618,25996,25997],{},"three-custom-shader-material"," class. As states in the repo, it ",[1674,26000,26001],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[504,26003,15],{"id":624},[626,26005,26008],{"className":628,"code":26006,"highlights":26007,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCustomShaderMaterial } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst customShaderMaterialRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresCustomShaderMaterial\n        ref=\"customShaderMaterialRef\"\n        :vertex-shader=\"vertexShader\"\n        :fragment-shader=\"fragmentShader\"\n        :uniforms=\"{\n          u_time: { value: 0 },\n          u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n          u_resolution: { value: new THREE.Vector2() }\n        }\"\n        :transparent=\"true\"\n        :side=\"THREE.DoubleSide\"\n        base-material=\"MeshLambertMaterial\"\n        silent\n        :map=\"texture\"\n        :color=\"0xff0000\"\n      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,631,850,861,872,882,632,902,912,2625,2634,2654,2663,2672,2681,2703],[618,26009,26010,26030,26050,26068,26072,26085,26093,26097,26105,26113,26131,26139,26147,26155,26170,26185,26200,26212,26218,26224,26230,26238,26252,26267,26282,26288,26302,26316,26320,26328,26336,26344],{"__ignoreMap":576},[637,26011,26012,26014,26016,26018,26020,26022,26024,26026,26028],{"class":639,"line":577},[637,26013,643],{"class":642},[637,26015,647],{"class":646},[637,26017,651],{"class":650},[637,26019,654],{"class":650},[637,26021,657],{"class":642},[637,26023,660],{"class":642},[637,26025,664],{"class":663},[637,26027,660],{"class":642},[637,26029,669],{"class":642},[637,26031,26033,26035,26037,26040,26042,26044,26046,26048],{"class":26032,"line":578},[639,673],[637,26034,677],{"class":676},[637,26036,680],{"class":642},[637,26038,26039],{"class":683}," TresCustomShaderMaterial",[637,26041,693],{"class":642},[637,26043,696],{"class":676},[637,26045,699],{"class":642},[637,26047,702],{"class":663},[637,26049,705],{"class":642},[637,26051,26052,26054,26056,26058,26060,26062,26064,26066],{"class":639,"line":708},[637,26053,677],{"class":676},[637,26055,680],{"class":642},[637,26057,3498],{"class":683},[637,26059,693],{"class":642},[637,26061,696],{"class":676},[637,26063,699],{"class":642},[637,26065,633],{"class":663},[637,26067,705],{"class":642},[637,26069,26070],{"class":639,"line":729},[637,26071,742],{"emptyLinePlaceholder":594},[637,26073,26074,26076,26079,26081,26083],{"class":639,"line":739},[637,26075,2415],{"class":650},[637,26077,26078],{"class":683}," customShaderMaterialRef ",[637,26080,657],{"class":642},[637,26082,3498],{"class":2434},[637,26084,6535],{"class":683},[637,26086,26087,26089,26091],{"class":639,"line":745},[637,26088,732],{"class":642},[637,26090,647],{"class":646},[637,26092,669],{"class":642},[637,26094,26095],{"class":639,"line":755},[637,26096,742],{"emptyLinePlaceholder":594},[637,26098,26099,26101,26103],{"class":639,"line":778},[637,26100,643],{"class":642},[637,26102,750],{"class":646},[637,26104,669],{"class":642},[637,26106,26107,26109,26111],{"class":639,"line":790},[637,26108,758],{"class":642},[637,26110,761],{"class":646},[637,26112,669],{"class":642},[637,26114,26115,26117,26119,26121,26123,26125,26127,26129],{"class":639,"line":800},[637,26116,781],{"class":642},[637,26118,784],{"class":646},[637,26120,1485],{"class":650},[637,26122,657],{"class":642},[637,26124,660],{"class":642},[637,26126,13280],{"class":663},[637,26128,660],{"class":642},[637,26130,787],{"class":642},[637,26132,26133,26135,26137],{"class":639,"line":805},[637,26134,781],{"class":642},[637,26136,856],{"class":646},[637,26138,669],{"class":642},[637,26140,26141,26143,26145],{"class":639,"line":827},[637,26142,853],{"class":642},[637,26144,867],{"class":646},[637,26146,787],{"class":642},[637,26148,26150,26152],{"class":26149,"line":631},[639,673],[637,26151,853],{"class":642},[637,26153,26154],{"class":646},"TresCustomShaderMaterial\n",[637,26156,26158,26161,26163,26165,26168],{"class":26157,"line":850},[639,673],[637,26159,26160],{"class":650},"        ref",[637,26162,657],{"class":642},[637,26164,660],{"class":642},[637,26166,26167],{"class":663},"customShaderMaterialRef",[637,26169,3131],{"class":642},[637,26171,26173,26176,26178,26180,26183],{"class":26172,"line":861},[639,673],[637,26174,26175],{"class":650},"        :vertex-shader",[637,26177,657],{"class":642},[637,26179,660],{"class":642},[637,26181,26182],{"class":663},"vertexShader",[637,26184,3131],{"class":642},[637,26186,26188,26191,26193,26195,26198],{"class":26187,"line":872},[639,673],[637,26189,26190],{"class":650},"        :fragment-shader",[637,26192,657],{"class":642},[637,26194,660],{"class":642},[637,26196,26197],{"class":663},"fragmentShader",[637,26199,3131],{"class":642},[637,26201,26203,26206,26208,26210],{"class":26202,"line":882},[639,673],[637,26204,26205],{"class":650},"        :uniforms",[637,26207,657],{"class":642},[637,26209,660],{"class":642},[637,26211,3260],{"class":663},[637,26213,26215],{"class":26214,"line":632},[639,673],[637,26216,26217],{"class":663},"          u_time: { value: 0 },\n",[637,26219,26221],{"class":26220,"line":902},[639,673],[637,26222,26223],{"class":663},"          u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n",[637,26225,26227],{"class":26226,"line":912},[639,673],[637,26228,26229],{"class":663},"          u_resolution: { value: new THREE.Vector2() }\n",[637,26231,26233,26236],{"class":26232,"line":2625},[639,673],[637,26234,26235],{"class":663},"        }",[637,26237,3131],{"class":642},[637,26239,26241,26244,26246,26248,26250],{"class":26240,"line":2634},[639,673],[637,26242,26243],{"class":650},"        :transparent",[637,26245,657],{"class":642},[637,26247,660],{"class":642},[637,26249,961],{"class":663},[637,26251,3131],{"class":642},[637,26253,26255,26258,26260,26262,26265],{"class":26254,"line":2654},[639,673],[637,26256,26257],{"class":650},"        :side",[637,26259,657],{"class":642},[637,26261,660],{"class":642},[637,26263,26264],{"class":663},"THREE.DoubleSide",[637,26266,3131],{"class":642},[637,26268,26270,26273,26275,26277,26280],{"class":26269,"line":2663},[639,673],[637,26271,26272],{"class":650},"        base-material",[637,26274,657],{"class":642},[637,26276,660],{"class":642},[637,26278,26279],{"class":663},"MeshLambertMaterial",[637,26281,3131],{"class":642},[637,26283,26285],{"class":26284,"line":2672},[639,673],[637,26286,26287],{"class":650},"        silent\n",[637,26289,26291,26294,26296,26298,26300],{"class":26290,"line":2681},[639,673],[637,26292,26293],{"class":650},"        :map",[637,26295,657],{"class":642},[637,26297,660],{"class":642},[637,26299,2717],{"class":663},[637,26301,3131],{"class":642},[637,26303,26305,26307,26309,26311,26314],{"class":26304,"line":2703},[639,673],[637,26306,23233],{"class":650},[637,26308,657],{"class":642},[637,26310,660],{"class":642},[637,26312,26313],{"class":663},"0xff0000",[637,26315,3131],{"class":642},[637,26317,26318],{"class":639,"line":2747},[637,26319,8033],{"class":642},[637,26321,26322,26324,26326],{"class":639,"line":2756},[637,26323,895],{"class":642},[637,26325,856],{"class":646},[637,26327,669],{"class":642},[637,26329,26330,26332,26334],{"class":639,"line":2765},[637,26331,781],{"class":642},[637,26333,9681],{"class":646},[637,26335,787],{"class":642},[637,26337,26338,26340,26342],{"class":639,"line":3922},[637,26339,905],{"class":642},[637,26341,761],{"class":646},[637,26343,669],{"class":642},[637,26345,26346,26348,26350],{"class":639,"line":3953},[637,26347,732],{"class":642},[637,26349,750],{"class":646},[637,26351,669],{"class":642},[504,26353,922],{"id":921},[614,26355,26356,26357,26360,26361,26363,26364,1146],{},"Being a wrapper around the ",[618,26358,26359],{},"CustomShaderMaterial"," class, the ",[618,26362,25989],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1140,26365,26367],{"href":25993,"rel":26366},[1144],"official repo",[1327,26369,26370],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":26372},[26373,26374],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":175,"description":26375},"_HOuAJQ5DQ9SpzOn3sJ32tgM-mbRXc16CsR6Pu3n5Bg",{"id":26380,"title":179,"body":26381,"description":26973,"extension":591,"links":592,"meta":26974,"navigation":594,"path":180,"seo":26975,"stem":181,"__hash__":26976},"docs/2.api/4.materials/glass-material.md",{"type":501,"value":26382,"toc":26964},[26383,26388,26399,26401,26405,26601,26603,26610,26614,26949,26953,26961],[2295,26384,26385],{},[26386,26387],"materials-glass-material",{},[614,26389,2776,26390,26392,26393,26396,26397,1146],{},[618,26391,7317],{}," package provides a new",[618,26394,26395],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[618,26398,2998],{},[504,26400,15],{"id":624},[4051,26402,26404],{"id":26403},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[626,26406,26409],{"className":628,"code":26407,"highlights":26408,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh>\n      \u003CTresTorusGeometry />\n      \u003CMeshGlassMaterial />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,800],[618,26410,26411,26431,26450,26469,26477,26481,26489,26497,26525,26533,26542,26551,26559,26567,26585,26593],{"__ignoreMap":576},[637,26412,26413,26415,26417,26419,26421,26423,26425,26427,26429],{"class":639,"line":577},[637,26414,643],{"class":642},[637,26416,647],{"class":646},[637,26418,651],{"class":650},[637,26420,654],{"class":650},[637,26422,657],{"class":642},[637,26424,660],{"class":642},[637,26426,664],{"class":663},[637,26428,660],{"class":642},[637,26430,669],{"class":642},[637,26432,26434,26436,26438,26440,26442,26444,26446,26448],{"class":26433,"line":578},[639,673],[637,26435,677],{"class":676},[637,26437,680],{"class":642},[637,26439,715],{"class":683},[637,26441,693],{"class":642},[637,26443,696],{"class":676},[637,26445,699],{"class":642},[637,26447,724],{"class":663},[637,26449,705],{"class":642},[637,26451,26452,26454,26456,26459,26461,26463,26465,26467],{"class":639,"line":708},[637,26453,677],{"class":676},[637,26455,680],{"class":642},[637,26457,26458],{"class":683}," MeshGlassMaterial",[637,26460,693],{"class":642},[637,26462,696],{"class":676},[637,26464,699],{"class":642},[637,26466,702],{"class":663},[637,26468,705],{"class":642},[637,26470,26471,26473,26475],{"class":639,"line":729},[637,26472,732],{"class":642},[637,26474,647],{"class":646},[637,26476,669],{"class":642},[637,26478,26479],{"class":639,"line":739},[637,26480,742],{"emptyLinePlaceholder":594},[637,26482,26483,26485,26487],{"class":639,"line":745},[637,26484,643],{"class":642},[637,26486,750],{"class":646},[637,26488,669],{"class":642},[637,26490,26491,26493,26495],{"class":639,"line":755},[637,26492,758],{"class":642},[637,26494,761],{"class":646},[637,26496,669],{"class":642},[637,26498,26499,26501,26503,26505,26507,26509,26511,26513,26515,26517,26519,26521,26523],{"class":639,"line":778},[637,26500,781],{"class":642},[637,26502,784],{"class":646},[637,26504,1485],{"class":650},[637,26506,657],{"class":642},[637,26508,660],{"class":642},[637,26510,13280],{"class":663},[637,26512,660],{"class":642},[637,26514,9616],{"class":650},[637,26516,657],{"class":642},[637,26518,660],{"class":642},[637,26520,9623],{"class":663},[637,26522,660],{"class":642},[637,26524,787],{"class":642},[637,26526,26527,26529,26531],{"class":639,"line":790},[637,26528,781],{"class":642},[637,26530,856],{"class":646},[637,26532,669],{"class":642},[637,26534,26536,26538,26540],{"class":26535,"line":800},[639,673],[637,26537,853],{"class":642},[637,26539,11863],{"class":646},[637,26541,787],{"class":642},[637,26543,26544,26546,26549],{"class":639,"line":805},[637,26545,853],{"class":642},[637,26547,26548],{"class":646},"MeshGlassMaterial",[637,26550,787],{"class":642},[637,26552,26553,26555,26557],{"class":639,"line":827},[637,26554,895],{"class":642},[637,26556,856],{"class":646},[637,26558,669],{"class":642},[637,26560,26561,26563,26565],{"class":639,"line":631},[637,26562,781],{"class":642},[637,26564,9681],{"class":646},[637,26566,787],{"class":642},[637,26568,26569,26571,26573,26575,26577,26579,26581,26583],{"class":639,"line":850},[637,26570,781],{"class":642},[637,26572,9700],{"class":646},[637,26574,1485],{"class":650},[637,26576,657],{"class":642},[637,26578,660],{"class":642},[637,26580,13362],{"class":663},[637,26582,660],{"class":642},[637,26584,787],{"class":642},[637,26586,26587,26589,26591],{"class":639,"line":861},[637,26588,905],{"class":642},[637,26590,761],{"class":646},[637,26592,669],{"class":642},[637,26594,26595,26597,26599],{"class":639,"line":872},[637,26596,732],{"class":642},[637,26598,750],{"class":646},[637,26600,669],{"class":642},[504,26602,922],{"id":921},[614,26604,26605,26606,26609],{},"No props are required. The component extends ",[618,26607,26608],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4051,26611,26613],{"id":26612},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[626,26615,26618],{"className":628,"code":26616,"highlights":26617,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial, Box } from '@tresjs/cientos'\n\nconst glassMaterialRef = shallowRef()\nconst boxRef = shallowRef()\n\nwatch(glassMaterialRef, value => {\n  // For good practice we dispose the old material\n  boxRef.value.instance.material.dispose()\n\n  // We assign the new MeshGlassMaterialClass\n  boxRef.value.instance.material = value.MeshGlassMaterialClass\n})\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresTorusGeometry />\n    \u003CMeshGlassMaterial ref=\"glassMaterialRef\" />\n  \u003C/TresMesh>\n  \u003C!-- Mesh to be replaced -->\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry />\n    \u003CMeshBasicMaterial  />\n  \u003C/TresMesh>\n\u003C/template>\n",[729,745,755,778,790,800,805,827,631,850,861,912],[618,26619,26620,26640,26666,26684,26707,26711,26725,26738,26743,26760,26766,26790,26795,26801,26827,26834,26842,26850,26858,26866,26886,26894,26899,26917,26925,26933,26941],{"__ignoreMap":576},[637,26621,26622,26624,26626,26628,26630,26632,26634,26636,26638],{"class":639,"line":577},[637,26623,643],{"class":642},[637,26625,647],{"class":646},[637,26627,651],{"class":650},[637,26629,654],{"class":650},[637,26631,657],{"class":642},[637,26633,660],{"class":642},[637,26635,664],{"class":663},[637,26637,660],{"class":642},[637,26639,669],{"class":642},[637,26641,26642,26644,26646,26648,26650,26652,26654,26656,26658,26660,26662,26664],{"class":639,"line":578},[637,26643,677],{"class":676},[637,26645,680],{"class":642},[637,26647,3872],{"class":683},[637,26649,687],{"class":642},[637,26651,3498],{"class":683},[637,26653,687],{"class":642},[637,26655,12140],{"class":683},[637,26657,693],{"class":642},[637,26659,696],{"class":676},[637,26661,699],{"class":642},[637,26663,633],{"class":663},[637,26665,705],{"class":642},[637,26667,26668,26670,26672,26674,26676,26678,26680,26682],{"class":639,"line":708},[637,26669,677],{"class":676},[637,26671,680],{"class":642},[637,26673,715],{"class":683},[637,26675,693],{"class":642},[637,26677,696],{"class":676},[637,26679,699],{"class":642},[637,26681,724],{"class":663},[637,26683,705],{"class":642},[637,26685,26687,26689,26691,26693,26695,26697,26699,26701,26703,26705],{"class":26686,"line":729},[639,673],[637,26688,677],{"class":676},[637,26690,680],{"class":642},[637,26692,26458],{"class":683},[637,26694,687],{"class":642},[637,26696,1397],{"class":683},[637,26698,693],{"class":642},[637,26700,696],{"class":676},[637,26702,699],{"class":642},[637,26704,702],{"class":663},[637,26706,705],{"class":642},[637,26708,26709],{"class":639,"line":739},[637,26710,742],{"emptyLinePlaceholder":594},[637,26712,26714,26716,26719,26721,26723],{"class":26713,"line":745},[639,673],[637,26715,2415],{"class":650},[637,26717,26718],{"class":683}," glassMaterialRef ",[637,26720,657],{"class":642},[637,26722,3498],{"class":2434},[637,26724,6535],{"class":683},[637,26726,26728,26730,26732,26734,26736],{"class":26727,"line":755},[639,673],[637,26729,2415],{"class":650},[637,26731,16260],{"class":683},[637,26733,657],{"class":642},[637,26735,3498],{"class":2434},[637,26737,6535],{"class":683},[637,26739,26741],{"class":26740,"line":778},[639,673],[637,26742,742],{"emptyLinePlaceholder":594},[637,26744,26746,26748,26751,26753,26756,26758],{"class":26745,"line":790},[639,673],[637,26747,12189],{"class":2434},[637,26749,26750],{"class":683},"(glassMaterialRef",[637,26752,687],{"class":642},[637,26754,26755],{"class":6838}," value",[637,26757,3677],{"class":650},[637,26759,1204],{"class":642},[637,26761,26763],{"class":26762,"line":800},[639,673],[637,26764,26765],{"class":1209},"  // For good practice we dispose the old material\n",[637,26767,26769,26772,26774,26776,26778,26780,26782,26784,26786,26788],{"class":26768,"line":805},[639,673],[637,26770,26771],{"class":683},"  boxRef",[637,26773,1146],{"class":642},[637,26775,3685],{"class":683},[637,26777,1146],{"class":642},[637,26779,9326],{"class":683},[637,26781,1146],{"class":642},[637,26783,5200],{"class":683},[637,26785,1146],{"class":642},[637,26787,22778],{"class":2434},[637,26789,6535],{"class":646},[637,26791,26793],{"class":26792,"line":827},[639,673],[637,26794,742],{"emptyLinePlaceholder":594},[637,26796,26798],{"class":26797,"line":631},[639,673],[637,26799,26800],{"class":1209},"  // We assign the new MeshGlassMaterialClass\n",[637,26802,26804,26806,26808,26810,26812,26814,26816,26818,26820,26822,26824],{"class":26803,"line":850},[639,673],[637,26805,26771],{"class":683},[637,26807,1146],{"class":642},[637,26809,3685],{"class":683},[637,26811,1146],{"class":642},[637,26813,9326],{"class":683},[637,26815,1146],{"class":642},[637,26817,5200],{"class":683},[637,26819,2431],{"class":642},[637,26821,26755],{"class":683},[637,26823,1146],{"class":642},[637,26825,26826],{"class":683},"MeshGlassMaterialClass\n",[637,26828,26830,26832],{"class":26829,"line":861},[639,673],[637,26831,2428],{"class":642},[637,26833,2448],{"class":683},[637,26835,26836,26838,26840],{"class":639,"line":872},[637,26837,732],{"class":642},[637,26839,647],{"class":646},[637,26841,669],{"class":642},[637,26843,26844,26846,26848],{"class":639,"line":882},[637,26845,643],{"class":642},[637,26847,750],{"class":646},[637,26849,669],{"class":642},[637,26851,26852,26854,26856],{"class":639,"line":632},[637,26853,758],{"class":642},[637,26855,856],{"class":646},[637,26857,669],{"class":642},[637,26859,26860,26862,26864],{"class":639,"line":902},[637,26861,781],{"class":642},[637,26863,11863],{"class":646},[637,26865,787],{"class":642},[637,26867,26869,26871,26873,26875,26877,26879,26882,26884],{"class":26868,"line":912},[639,673],[637,26870,781],{"class":642},[637,26872,26548],{"class":646},[637,26874,3872],{"class":650},[637,26876,657],{"class":642},[637,26878,660],{"class":642},[637,26880,26881],{"class":663},"glassMaterialRef",[637,26883,660],{"class":642},[637,26885,787],{"class":642},[637,26887,26888,26890,26892],{"class":639,"line":2625},[637,26889,905],{"class":642},[637,26891,856],{"class":646},[637,26893,669],{"class":642},[637,26895,26896],{"class":639,"line":2634},[637,26897,26898],{"class":1209},"  \u003C!-- Mesh to be replaced -->\n",[637,26900,26901,26903,26905,26907,26909,26911,26913,26915],{"class":639,"line":2654},[637,26902,758],{"class":642},[637,26904,856],{"class":646},[637,26906,3872],{"class":650},[637,26908,657],{"class":642},[637,26910,660],{"class":642},[637,26912,16336],{"class":663},[637,26914,660],{"class":642},[637,26916,669],{"class":642},[637,26918,26919,26921,26923],{"class":639,"line":2663},[637,26920,781],{"class":642},[637,26922,867],{"class":646},[637,26924,787],{"class":642},[637,26926,26927,26929,26931],{"class":639,"line":2672},[637,26928,781],{"class":642},[637,26930,2991],{"class":646},[637,26932,13995],{"class":642},[637,26934,26935,26937,26939],{"class":639,"line":2681},[637,26936,905],{"class":642},[637,26938,856],{"class":646},[637,26940,669],{"class":642},[637,26942,26943,26945,26947],{"class":639,"line":2703},[637,26944,732],{"class":642},[637,26946,750],{"class":646},[637,26948,669],{"class":642},[504,26950,26952],{"id":26951},"tips","Tips",[2213,26954,26955,26958],{},[2216,26956,26957],{},"For more fine tuning effects you can provide an environment map texture as an envMap and play with the intensity to achieve a more realistic effect",[2216,26959,26960],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1327,26962,26963],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .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":576,"searchDepth":577,"depth":578,"links":26965},[26966,26969,26972],{"id":624,"depth":578,"text":15,"children":26967},[26968],{"id":26403,"depth":708,"text":26404},{"id":921,"depth":578,"text":922,"children":26970},[26971],{"id":26612,"depth":708,"text":26613},{"id":26951,"depth":578,"text":26952},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":179,"description":26973},"oLHskfHH-pJ6DBy0QJ2dNa5baMGuKNpEQRJ-5FVmwvI",{"id":26978,"title":183,"body":26979,"description":27415,"extension":591,"links":592,"meta":27416,"navigation":594,"path":184,"seo":27417,"stem":185,"__hash__":27418},"docs/2.api/4.materials/holographic-material.md",{"type":501,"value":26980,"toc":27410},[26981,26986,26990,26993,26996,27001,27003,27184,27186,27408],[608,26982,26983],{},[26984,26985],"materials-holographic-material",{},[504,26987,26989],{"id":26988},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[614,26991,26992],{},"Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla Three.js. This enchanting Three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.",[614,26994,26995],{},"While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.",[2005,26997,26998],{},[614,26999,27000],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[504,27002,15],{"id":624},[626,27004,27007],{"className":628,"code":27005,"highlights":27006,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { HolographicMaterial, Sphere } from '@tresjs/cientos'\n\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=[0,0,0] />\n    \u003CSphere :scale=\"0.5\">\n      \u003CHolographicMaterial />\n    \u003C/Sphere>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,27008,27009,27029,27047,27071,27075,27083,27091,27099,27124,27142,27152,27160,27168,27176],{"__ignoreMap":576},[637,27010,27011,27013,27015,27017,27019,27021,27023,27025,27027],{"class":639,"line":577},[637,27012,643],{"class":642},[637,27014,647],{"class":646},[637,27016,651],{"class":650},[637,27018,654],{"class":650},[637,27020,657],{"class":642},[637,27022,660],{"class":642},[637,27024,664],{"class":663},[637,27026,660],{"class":642},[637,27028,669],{"class":642},[637,27030,27031,27033,27035,27037,27039,27041,27043,27045],{"class":639,"line":578},[637,27032,677],{"class":676},[637,27034,680],{"class":642},[637,27036,715],{"class":683},[637,27038,693],{"class":642},[637,27040,696],{"class":676},[637,27042,699],{"class":642},[637,27044,724],{"class":663},[637,27046,705],{"class":642},[637,27048,27050,27052,27054,27057,27059,27061,27063,27065,27067,27069],{"class":27049,"line":708},[639,673],[637,27051,677],{"class":676},[637,27053,680],{"class":642},[637,27055,27056],{"class":683}," HolographicMaterial",[637,27058,687],{"class":642},[637,27060,25681],{"class":683},[637,27062,693],{"class":642},[637,27064,696],{"class":676},[637,27066,699],{"class":642},[637,27068,702],{"class":663},[637,27070,705],{"class":642},[637,27072,27073],{"class":639,"line":729},[637,27074,742],{"emptyLinePlaceholder":594},[637,27076,27077,27079,27081],{"class":639,"line":739},[637,27078,732],{"class":642},[637,27080,647],{"class":646},[637,27082,669],{"class":642},[637,27084,27085,27087,27089],{"class":639,"line":745},[637,27086,643],{"class":642},[637,27088,750],{"class":646},[637,27090,669],{"class":642},[637,27092,27093,27095,27097],{"class":639,"line":755},[637,27094,758],{"class":642},[637,27096,761],{"class":646},[637,27098,669],{"class":642},[637,27100,27101,27103,27105,27107,27109,27111,27113,27115,27117,27119,27122],{"class":639,"line":778},[637,27102,781],{"class":642},[637,27104,784],{"class":646},[637,27106,1485],{"class":650},[637,27108,657],{"class":642},[637,27110,660],{"class":642},[637,27112,13280],{"class":663},[637,27114,660],{"class":642},[637,27116,9616],{"class":650},[637,27118,657],{"class":642},[637,27120,27121],{"class":663},"[0,0,0]",[637,27123,787],{"class":642},[637,27125,27126,27128,27130,27132,27134,27136,27138,27140],{"class":639,"line":790},[637,27127,781],{"class":642},[637,27129,285],{"class":646},[637,27131,813],{"class":650},[637,27133,657],{"class":642},[637,27135,660],{"class":642},[637,27137,1946],{"class":663},[637,27139,660],{"class":642},[637,27141,669],{"class":642},[637,27143,27145,27147,27150],{"class":27144,"line":800},[639,673],[637,27146,853],{"class":642},[637,27148,27149],{"class":646},"HolographicMaterial",[637,27151,787],{"class":642},[637,27153,27154,27156,27158],{"class":639,"line":805},[637,27155,895],{"class":642},[637,27157,285],{"class":646},[637,27159,669],{"class":642},[637,27161,27162,27164,27166],{"class":639,"line":827},[637,27163,781],{"class":642},[637,27165,9681],{"class":646},[637,27167,787],{"class":642},[637,27169,27170,27172,27174],{"class":639,"line":631},[637,27171,905],{"class":642},[637,27173,761],{"class":646},[637,27175,669],{"class":642},[637,27177,27178,27180,27182],{"class":639,"line":850},[637,27179,732],{"class":642},[637,27181,750],{"class":646},[637,27183,669],{"class":642},[504,27185,922],{"id":921},[927,27187,27188,27201],{},[930,27189,27190],{},[933,27191,27192,27194,27196,27198],{},[936,27193,938],{"align":997},[936,27195,941],{"align":997},[936,27197,5969],{},[936,27199,27200],{},"default",[946,27202,27203,27222,27240,27259,27278,27296,27315,27334,27352,27370,27388],{},[933,27204,27205,27210,27213,27217],{},[951,27206,27207],{"align":997},[1669,27208,27209],{},"fresnelAmount",[951,27211,27212],{"align":997},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[951,27214,27215],{},[618,27216,12014],{},[951,27218,27219],{},[618,27220,27221],{},"0.45",[933,27223,27224,27229,27232,27236],{},[951,27225,27226],{"align":997},[1669,27227,27228],{},"fresnelOpacity",[951,27230,27231],{"align":997},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[951,27233,27234],{},[618,27235,12014],{},[951,27237,27238],{},[618,27239,13661],{},[933,27241,27242,27247,27250,27254],{},[951,27243,27244],{"align":997},[1669,27245,27246],{},"scanlineSize",[951,27248,27249],{"align":997},"Size of the scanlines. Ranges from 1 to 15.",[951,27251,27252],{},[618,27253,12014],{},[951,27255,27256],{},[618,27257,27258],{},"8.0",[933,27260,27261,27266,27269,27273],{},[951,27262,27263],{"align":997},[1669,27264,27265],{},"hologramBrightness",[951,27267,27268],{"align":997},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[951,27270,27271],{},[618,27272,12014],{},[951,27274,27275],{},[618,27276,27277],{},"1.2",[933,27279,27280,27285,27288,27292],{},[951,27281,27282],{"align":997},[1669,27283,27284],{},"signalSpeed",[951,27286,27287],{"align":997},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[951,27289,27290],{},[618,27291,12014],{},[951,27293,27294],{},[618,27295,27221],{},[933,27297,27298,27303,27306,27310],{},[951,27299,27300],{"align":997},[1669,27301,27302],{},"hologramColor",[951,27304,27305],{"align":997},"Specifies the color of the hologram.",[951,27307,27308],{},[618,27309,12036],{},[951,27311,27312],{},[618,27313,27314],{},"\"#00d5ff\"",[933,27316,27317,27322,27325,27330],{},[951,27318,27319],{"align":997},[1669,27320,27321],{},"enableBlinking",[951,27323,27324],{"align":997},"Enables or disables the blinking effect.",[951,27326,27327],{},[618,27328,27329],{},"Boolean",[951,27331,27332],{},[618,27333,961],{},[933,27335,27336,27341,27344,27348],{},[951,27337,27338],{"align":997},[1669,27339,27340],{},"hologramOpacity",[951,27342,27343],{"align":997},"Specifies the opacity of the hologram.",[951,27345,27346],{},[618,27347,12014],{},[951,27349,27350],{},[618,27351,13661],{},[933,27353,27354,27359,27362,27366],{},[951,27355,27356],{"align":997},[1669,27357,27358],{},"blinkFresnelOnly",[951,27360,27361],{"align":997},"Enables or disables the blinking effect for the Fresnel only.",[951,27363,27364],{},[618,27365,27329],{},[951,27367,27368],{},[618,27369,961],{},[933,27371,27372,27377,27380,27384],{},[951,27373,27374],{"align":997},[1669,27375,27376],{},"enableAdditive",[951,27378,27379],{"align":997},"Enables or disables the Additive Blend Mode.",[951,27381,27382],{},[618,27383,27329],{},[951,27385,27386],{},[618,27387,961],{},[933,27389,27390,27395,27398,27403],{},[951,27391,27392],{"align":997},[1669,27393,27394],{},"side",[951,27396,27397],{"align":997},"Specifies side for the material, as String.",[951,27399,27400],{},[618,27401,27402],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[951,27404,27405],{},[618,27406,27407],{},"FrontSide",[1327,27409,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":27411},[27412,27413,27414],{"id":26988,"depth":578,"text":26989},{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":183,"description":27415},"xIEPkRUmuLTvzMRufIpFP12igw1vvqL43oWczW_i5i4",{"id":27420,"title":187,"body":27421,"description":27586,"extension":591,"links":592,"meta":27587,"navigation":594,"path":188,"seo":27588,"stem":189,"__hash__":27589},"docs/2.api/4.materials/mesh-discard-material.md",{"type":501,"value":27422,"toc":27583},[27423,27429,27431,27581],[614,27424,27425,27428],{},[618,27426,27427],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[504,27430,15],{"id":624},[626,27432,27435],{"className":628,"code":27433,"highlights":27434,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshDiscardMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CMeshDiscardMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,805],[618,27436,27437,27457,27475,27495,27503,27507,27515,27523,27531,27539,27547,27557,27565,27573],{"__ignoreMap":576},[637,27438,27439,27441,27443,27445,27447,27449,27451,27453,27455],{"class":639,"line":577},[637,27440,643],{"class":642},[637,27442,647],{"class":646},[637,27444,651],{"class":650},[637,27446,654],{"class":650},[637,27448,657],{"class":642},[637,27450,660],{"class":642},[637,27452,664],{"class":663},[637,27454,660],{"class":642},[637,27456,669],{"class":642},[637,27458,27459,27461,27463,27465,27467,27469,27471,27473],{"class":639,"line":578},[637,27460,677],{"class":676},[637,27462,680],{"class":642},[637,27464,715],{"class":683},[637,27466,693],{"class":642},[637,27468,696],{"class":676},[637,27470,699],{"class":642},[637,27472,724],{"class":663},[637,27474,705],{"class":642},[637,27476,27478,27480,27482,27485,27487,27489,27491,27493],{"class":27477,"line":708},[639,673],[637,27479,677],{"class":676},[637,27481,680],{"class":642},[637,27483,27484],{"class":683}," MeshDiscardMaterial",[637,27486,693],{"class":642},[637,27488,696],{"class":676},[637,27490,699],{"class":642},[637,27492,702],{"class":663},[637,27494,705],{"class":642},[637,27496,27497,27499,27501],{"class":639,"line":729},[637,27498,732],{"class":642},[637,27500,647],{"class":646},[637,27502,669],{"class":642},[637,27504,27505],{"class":639,"line":739},[637,27506,742],{"emptyLinePlaceholder":594},[637,27508,27509,27511,27513],{"class":639,"line":745},[637,27510,643],{"class":642},[637,27512,750],{"class":646},[637,27514,669],{"class":642},[637,27516,27517,27519,27521],{"class":639,"line":755},[637,27518,758],{"class":642},[637,27520,761],{"class":646},[637,27522,669],{"class":642},[637,27524,27525,27527,27529],{"class":639,"line":778},[637,27526,781],{"class":642},[637,27528,784],{"class":646},[637,27530,787],{"class":642},[637,27532,27533,27535,27537],{"class":639,"line":790},[637,27534,781],{"class":642},[637,27536,856],{"class":646},[637,27538,669],{"class":642},[637,27540,27541,27543,27545],{"class":639,"line":800},[637,27542,853],{"class":642},[637,27544,867],{"class":646},[637,27546,787],{"class":642},[637,27548,27550,27552,27555],{"class":27549,"line":805},[639,673],[637,27551,853],{"class":642},[637,27553,27554],{"class":646},"MeshDiscardMaterial",[637,27556,787],{"class":642},[637,27558,27559,27561,27563],{"class":639,"line":827},[637,27560,895],{"class":642},[637,27562,856],{"class":646},[637,27564,669],{"class":642},[637,27566,27567,27569,27571],{"class":639,"line":631},[637,27568,905],{"class":642},[637,27570,761],{"class":646},[637,27572,669],{"class":642},[637,27574,27575,27577,27579],{"class":639,"line":850},[637,27576,732],{"class":642},[637,27578,750],{"class":646},[637,27580,669],{"class":642},[1327,27582,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":27584},[27585],{"id":624,"depth":578,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":187,"description":27586},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":27591,"title":191,"body":27592,"description":28200,"extension":591,"links":592,"meta":28201,"navigation":594,"path":192,"seo":28202,"stem":193,"__hash__":28203},"docs/2.api/4.materials/mesh-portal-material.md",{"type":501,"value":27593,"toc":28195},[27594,27599,27607,27623,27635,27637,27928,27930,28023,28027,28037,28113,28157,28181,28192],[608,27595,27596],{},[27597,27598],"materials-mesh-portal-material",{},[614,27600,2776,27601,9468,27603,27606],{},[618,27602,7317],{},[618,27604,27605],{},"\u003CMeshPortalMaterial />"," component that renders its\ndeclarative children into a private off-main scene and projects that scene onto the\nhost mesh as a perspective-correct window.",[614,27608,27609,27610,27613,27614,27617,27618,27620,27621,5574],{},"Children declared inside the component render into the ",[1669,27611,27612],{},"portal scene",", not the main\nscene. The portal scene is rendered to a frame buffer each frame using the active\ncamera, so contents sit in world-space (move the camera and you get parallax through\nthe surface, not a flat decal). The mesh geometry masks the result, and ",[618,27615,27616],{},"blend","\ncross-fades between the world (",[618,27619,965],{},") and the portal (",[618,27622,1874],{},[2005,27624,27625],{},[614,27626,27627,27628,27634],{},"This component is a port of the ",[1140,27629,27633],{"href":27630,"rel":27631,"target":27632},"https://drei.docs.pmnd.rs/portals/mesh-portal-material",[1144],"_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[504,27636,15],{"id":624},[626,27638,27640],{"className":628,"code":27639,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshPortalMaterial, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" />\n    \u003COrbitControls />\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[3, 4]\" />\n      \u003CMeshPortalMaterial :blend=\"0\">\n        \u003C!-- children render INTO the portal scene -->\n        \u003CTresAmbientLight :intensity=\"0.5\" />\n        \u003CTresMesh :position=\"[0, 0, -1]\">\n          \u003CTresTorusKnotGeometry :args=\"[0.6, 0.25, 128, 32]\" />\n          \u003CTresMeshStandardMaterial color=\"#fbb03b\" />\n        \u003C/TresMesh>\n      \u003C/MeshPortalMaterial>\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,27641,27642,27662,27680,27703,27711,27715,27723,27731,27750,27758,27766,27786,27806,27811,27829,27848,27869,27887,27896,27904,27912,27920],{"__ignoreMap":576},[637,27643,27644,27646,27648,27650,27652,27654,27656,27658,27660],{"class":639,"line":577},[637,27645,643],{"class":642},[637,27647,647],{"class":646},[637,27649,651],{"class":650},[637,27651,654],{"class":650},[637,27653,657],{"class":642},[637,27655,660],{"class":642},[637,27657,664],{"class":663},[637,27659,660],{"class":642},[637,27661,669],{"class":642},[637,27663,27664,27666,27668,27670,27672,27674,27676,27678],{"class":639,"line":578},[637,27665,677],{"class":676},[637,27667,680],{"class":642},[637,27669,715],{"class":683},[637,27671,693],{"class":642},[637,27673,696],{"class":676},[637,27675,699],{"class":642},[637,27677,724],{"class":663},[637,27679,705],{"class":642},[637,27681,27682,27684,27686,27689,27691,27693,27695,27697,27699,27701],{"class":639,"line":708},[637,27683,677],{"class":676},[637,27685,680],{"class":642},[637,27687,27688],{"class":683}," MeshPortalMaterial",[637,27690,687],{"class":642},[637,27692,690],{"class":683},[637,27694,693],{"class":642},[637,27696,696],{"class":676},[637,27698,699],{"class":642},[637,27700,702],{"class":663},[637,27702,705],{"class":642},[637,27704,27705,27707,27709],{"class":639,"line":729},[637,27706,732],{"class":642},[637,27708,647],{"class":646},[637,27710,669],{"class":642},[637,27712,27713],{"class":639,"line":739},[637,27714,742],{"emptyLinePlaceholder":594},[637,27716,27717,27719,27721],{"class":639,"line":745},[637,27718,643],{"class":642},[637,27720,750],{"class":646},[637,27722,669],{"class":642},[637,27724,27725,27727,27729],{"class":639,"line":755},[637,27726,758],{"class":642},[637,27728,761],{"class":646},[637,27730,669],{"class":642},[637,27732,27733,27735,27737,27739,27741,27743,27746,27748],{"class":639,"line":778},[637,27734,781],{"class":642},[637,27736,784],{"class":646},[637,27738,1485],{"class":650},[637,27740,657],{"class":642},[637,27742,660],{"class":642},[637,27744,27745],{"class":663},"[0, 0, 6]",[637,27747,660],{"class":642},[637,27749,787],{"class":642},[637,27751,27752,27754,27756],{"class":639,"line":790},[637,27753,781],{"class":642},[637,27755,795],{"class":646},[637,27757,787],{"class":642},[637,27759,27760,27762,27764],{"class":639,"line":800},[637,27761,781],{"class":642},[637,27763,856],{"class":646},[637,27765,669],{"class":642},[637,27767,27768,27770,27773,27775,27777,27779,27782,27784],{"class":639,"line":805},[637,27769,853],{"class":642},[637,27771,27772],{"class":646},"TresPlaneGeometry",[637,27774,1959],{"class":650},[637,27776,657],{"class":642},[637,27778,660],{"class":642},[637,27780,27781],{"class":663},"[3, 4]",[637,27783,660],{"class":642},[637,27785,787],{"class":642},[637,27787,27788,27790,27793,27796,27798,27800,27802,27804],{"class":639,"line":827},[637,27789,853],{"class":642},[637,27791,27792],{"class":646},"MeshPortalMaterial",[637,27794,27795],{"class":650}," :blend",[637,27797,657],{"class":642},[637,27799,660],{"class":642},[637,27801,965],{"class":663},[637,27803,660],{"class":642},[637,27805,669],{"class":642},[637,27807,27808],{"class":639,"line":631},[637,27809,27810],{"class":1209},"        \u003C!-- children render INTO the portal scene -->\n",[637,27812,27813,27815,27817,27819,27821,27823,27825,27827],{"class":639,"line":850},[637,27814,864],{"class":642},[637,27816,9681],{"class":646},[637,27818,1867],{"class":650},[637,27820,657],{"class":642},[637,27822,660],{"class":642},[637,27824,1946],{"class":663},[637,27826,660],{"class":642},[637,27828,787],{"class":642},[637,27830,27831,27833,27835,27837,27839,27841,27844,27846],{"class":639,"line":861},[637,27832,864],{"class":642},[637,27834,856],{"class":646},[637,27836,1485],{"class":650},[637,27838,657],{"class":642},[637,27840,660],{"class":642},[637,27842,27843],{"class":663},"[0, 0, -1]",[637,27845,660],{"class":642},[637,27847,669],{"class":642},[637,27849,27850,27853,27856,27858,27860,27862,27865,27867],{"class":639,"line":872},[637,27851,27852],{"class":642},"          \u003C",[637,27854,27855],{"class":646},"TresTorusKnotGeometry",[637,27857,1959],{"class":650},[637,27859,657],{"class":642},[637,27861,660],{"class":642},[637,27863,27864],{"class":663},"[0.6, 0.25, 128, 32]",[637,27866,660],{"class":642},[637,27868,787],{"class":642},[637,27870,27871,27873,27875,27877,27879,27881,27883,27885],{"class":639,"line":882},[637,27872,27852],{"class":642},[637,27874,2686],{"class":646},[637,27876,2689],{"class":650},[637,27878,657],{"class":642},[637,27880,660],{"class":642},[637,27882,10153],{"class":663},[637,27884,660],{"class":642},[637,27886,787],{"class":642},[637,27888,27889,27892,27894],{"class":639,"line":632},[637,27890,27891],{"class":642},"        \u003C/",[637,27893,856],{"class":646},[637,27895,669],{"class":642},[637,27897,27898,27900,27902],{"class":639,"line":902},[637,27899,885],{"class":642},[637,27901,27792],{"class":646},[637,27903,669],{"class":642},[637,27905,27906,27908,27910],{"class":639,"line":912},[637,27907,895],{"class":642},[637,27909,856],{"class":646},[637,27911,669],{"class":642},[637,27913,27914,27916,27918],{"class":639,"line":2625},[637,27915,905],{"class":642},[637,27917,761],{"class":646},[637,27919,669],{"class":642},[637,27921,27922,27924,27926],{"class":639,"line":2634},[637,27923,732],{"class":642},[637,27925,750],{"class":646},[637,27927,669],{"class":642},[504,27929,922],{"id":921},[927,27931,27932,27944],{},[930,27933,27934],{},[933,27935,27936,27938,27940,27942],{},[936,27937,938],{},[936,27939,5969],{},[936,27941,944],{},[936,27943,941],{},[946,27945,27946,27968,27987,28005],{},[933,27947,27948,27952,27956,27960],{},[951,27949,27950],{},[618,27951,27616],{},[951,27953,27954],{},[618,27955,5352],{},[951,27957,27958],{},[618,27959,965],{},[951,27961,27962,27964,27965,27967],{},[618,27963,965],{}," = world only, ",[618,27966,1874],{}," = portal only; cross-fades between.",[933,27969,27970,27975,27979,27984],{},[951,27971,27972],{},[618,27973,27974],{},"resolution",[951,27976,27977],{},[618,27978,5352],{},[951,27980,27981],{},[618,27982,27983],{},"512",[951,27985,27986],{},"Frame buffer resolution for the portal render.",[933,27988,27989,27994,27998,28002],{},[951,27990,27991],{},[618,27992,27993],{},"worldUnits",[951,27995,27996],{},[618,27997,17564],{},[951,27999,28000],{},[618,28001,971],{},[951,28003,28004],{},"Keep portal contents in world units instead of host-relative.",[933,28006,28007,28012,28016,28020],{},[951,28008,28009],{},[618,28010,28011],{},"renderPriority",[951,28013,28014],{},[618,28015,5352],{},[951,28017,28018],{},[618,28019,965],{},[951,28021,28022],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[504,28024,28026],{"id":28025},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[614,28028,28029,28032,28033,28036],{},[618,28030,28031],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[1669,28034,28035],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[626,28038,28040],{"className":628,"code":28039,"language":633,"meta":576,"style":576},"\u003CMeshPortalMaterial :blend=\"blend\">\n  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n  \u003CSuspense>\n    \u003CEnvironment preset=\"dawn\" :background=\"true\" />\n  \u003C/Suspense>\n\n  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" />\n\n  \u003C!-- ...portal scene contents... -->\n\u003C/MeshPortalMaterial>\n",[618,28041,28042,28062,28067,28072,28077,28082,28086,28091,28096,28100,28105],{"__ignoreMap":576},[637,28043,28044,28046,28048,28050,28052,28054,28056,28058,28060],{"class":639,"line":577},[637,28045,643],{"class":642},[637,28047,27792],{"class":646},[637,28049,3029],{"class":642},[637,28051,27616],{"class":650},[637,28053,657],{"class":642},[637,28055,660],{"class":642},[637,28057,27616],{"class":683},[637,28059,660],{"class":642},[637,28061,669],{"class":642},[637,28063,28064],{"class":639,"line":578},[637,28065,28066],{"class":683},"  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[637,28068,28069],{"class":639,"line":708},[637,28070,28071],{"class":683},"  \u003CSuspense>\n",[637,28073,28074],{"class":639,"line":729},[637,28075,28076],{"class":683},"    \u003CEnvironment preset=\"dawn\" :background=\"true\" />\n",[637,28078,28079],{"class":639,"line":739},[637,28080,28081],{"class":683},"  \u003C/Suspense>\n",[637,28083,28084],{"class":639,"line":745},[637,28085,742],{"emptyLinePlaceholder":594},[637,28087,28088],{"class":639,"line":755},[637,28089,28090],{"class":683},"  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[637,28092,28093],{"class":639,"line":778},[637,28094,28095],{"class":683},"  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" />\n",[637,28097,28098],{"class":639,"line":790},[637,28099,742],{"emptyLinePlaceholder":594},[637,28101,28102],{"class":639,"line":800},[637,28103,28104],{"class":683},"  \u003C!-- ...portal scene contents... -->\n",[637,28106,28107,28109,28111],{"class":639,"line":805},[637,28108,732],{"class":642},[637,28110,27792],{"class":646},[637,28112,669],{"class":642},[2005,28114,28115],{},[614,28116,28117,28120,28121,28124,28125,28127,28128,8498,28131,28134,28135,8498,28138,28141,28142,28145,28146,28149,28150,28153,28154,28156],{},[1669,28118,28119],{},"How it works:"," the component ",[618,28122,28123],{},"provide()","s a context whose ",[618,28126,18464],{}," points at the\nprivate portal scene. Vue's ",[618,28129,28130],{},"provide",[618,28132,28133],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[618,28136,28137],{},"\u003CTresPortal>",[618,28139,28140],{},"\u003CTeleport>","), so both imperative\nhelpers (",[618,28143,28144],{},"useTres().scene",", e.g. ",[618,28147,28148],{},"\u003CEnvironment>",") and declarative ",[618,28151,28152],{},"attach"," configure\nthe portal scene. Only the ",[618,28155,18464],{}," is swapped — renderer, camera and sizes are shared.",[3199,28158,28159],{},[614,28160,28161,28164,28165,28167,28168,28171,28172,28174,28175,28180],{},[1669,28162,28163],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[618,28166,27616],{}," takeover stays\nin sync. To do this it calls ",[618,28169,28170],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[618,28173,28031],{}," effectively opts out of\n",[1140,28176,28179],{"href":28177,"rel":28178,"target":27632},"https://docs.tresjs.org/api/advanced/performance#mode-on-demand",[1144],"on-demand rendering"," while mounted.",[2005,28182,28183],{},[614,28184,28185,3194,28188,28191],{},[1669,28186,28187],{},"Limitations (MVP):",[618,28189,28190],{},"blur"," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1327,28193,28194],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .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":576,"searchDepth":577,"depth":578,"links":28196},[28197,28198,28199],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":28025,"depth":578,"text":28026},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.",{},{"title":191,"description":28200},"ohfbKC7GzCyDLCAu6PE_RcaQcHLETnumKwxeb3qJ82E",{"id":28205,"title":195,"body":28206,"description":28923,"extension":591,"links":592,"meta":28924,"navigation":594,"path":196,"seo":28925,"stem":197,"__hash__":28926},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":501,"value":28207,"toc":28919},[28208,28213,28224,28233,28240,28242,28624,28626,28896,28917],[608,28209,28210],{},[28211,28212],"materials-mesh-reflection-material",{},[614,28214,2776,28215,9468,28217,28220,28221,1146],{},[618,28216,7317],{},[618,28218,28219],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[618,28222,28223],{},"Scene",[614,28225,28226,28227,28232],{},"The component is based on the excellent ",[1140,28228,28231],{"href":28229,"rel":28230},"https://github.com/pmndrs/drei",[1144],"Drei"," component of the same name.",[614,28234,28235,28236,28239],{},"It extends ",[618,28237,28238],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[504,28241,15],{"id":624},[626,28243,28246],{"className":628,"code":28244,"highlights":28245,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshReflectionMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\">\n      \u003CTresPlaneGeometry :args=\"[10, 10]\" />\n      \u003CMeshReflectionMaterial\n        :blur=\"[300, 100]\"\n        :mixBlur=\"30\"\n        :mixStrength=\"80\"\n        :mixContrast=\"1\"\n        color=\"#a0a0a0\"\n        metalness=\"0.5\"\n        roughness=\"1\"\n        mirror=\"0\"\n      />\n    \u003C/TresMesh>\n    \u003CTresMesh :position=\"[0, 1, 0]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,872,882,632,902],[618,28247,28248,28268,28286,28306,28314,28318,28326,28334,28362,28382,28400,28407,28421,28435,28449,28462,28476,28490,28504,28518,28522,28530,28548,28556,28574,28582,28590,28608,28616],{"__ignoreMap":576},[637,28249,28250,28252,28254,28256,28258,28260,28262,28264,28266],{"class":639,"line":577},[637,28251,643],{"class":642},[637,28253,647],{"class":646},[637,28255,651],{"class":650},[637,28257,654],{"class":650},[637,28259,657],{"class":642},[637,28261,660],{"class":642},[637,28263,664],{"class":663},[637,28265,660],{"class":642},[637,28267,669],{"class":642},[637,28269,28270,28272,28274,28276,28278,28280,28282,28284],{"class":639,"line":578},[637,28271,677],{"class":676},[637,28273,680],{"class":642},[637,28275,715],{"class":683},[637,28277,693],{"class":642},[637,28279,696],{"class":676},[637,28281,699],{"class":642},[637,28283,724],{"class":663},[637,28285,705],{"class":642},[637,28287,28289,28291,28293,28296,28298,28300,28302,28304],{"class":28288,"line":708},[639,673],[637,28290,677],{"class":676},[637,28292,680],{"class":642},[637,28294,28295],{"class":683}," MeshReflectionMaterial",[637,28297,693],{"class":642},[637,28299,696],{"class":676},[637,28301,699],{"class":642},[637,28303,702],{"class":663},[637,28305,705],{"class":642},[637,28307,28308,28310,28312],{"class":639,"line":729},[637,28309,732],{"class":642},[637,28311,647],{"class":646},[637,28313,669],{"class":642},[637,28315,28316],{"class":639,"line":739},[637,28317,742],{"emptyLinePlaceholder":594},[637,28319,28320,28322,28324],{"class":639,"line":745},[637,28321,643],{"class":642},[637,28323,750],{"class":646},[637,28325,669],{"class":642},[637,28327,28328,28330,28332],{"class":639,"line":755},[637,28329,758],{"class":642},[637,28331,761],{"class":646},[637,28333,669],{"class":642},[637,28335,28336,28338,28340,28342,28344,28346,28348,28350,28352,28354,28356,28358,28360],{"class":639,"line":778},[637,28337,781],{"class":642},[637,28339,784],{"class":646},[637,28341,1485],{"class":650},[637,28343,657],{"class":642},[637,28345,660],{"class":642},[637,28347,13280],{"class":663},[637,28349,660],{"class":642},[637,28351,9616],{"class":650},[637,28353,657],{"class":642},[637,28355,660],{"class":642},[637,28357,9623],{"class":663},[637,28359,660],{"class":642},[637,28361,787],{"class":642},[637,28363,28364,28366,28368,28371,28373,28375,28378,28380],{"class":639,"line":790},[637,28365,781],{"class":642},[637,28367,856],{"class":646},[637,28369,28370],{"class":650}," :rotation",[637,28372,657],{"class":642},[637,28374,660],{"class":642},[637,28376,28377],{"class":663},"[-Math.PI / 2, 0, 0]",[637,28379,660],{"class":642},[637,28381,669],{"class":642},[637,28383,28384,28386,28388,28390,28392,28394,28396,28398],{"class":639,"line":800},[637,28385,853],{"class":642},[637,28387,27772],{"class":646},[637,28389,1959],{"class":650},[637,28391,657],{"class":642},[637,28393,660],{"class":642},[637,28395,11961],{"class":663},[637,28397,660],{"class":642},[637,28399,787],{"class":642},[637,28401,28402,28404],{"class":639,"line":805},[637,28403,853],{"class":642},[637,28405,28406],{"class":646},"MeshReflectionMaterial\n",[637,28408,28409,28412,28414,28416,28419],{"class":639,"line":827},[637,28410,28411],{"class":650},"        :blur",[637,28413,657],{"class":642},[637,28415,660],{"class":642},[637,28417,28418],{"class":663},"[300, 100]",[637,28420,3131],{"class":642},[637,28422,28423,28426,28428,28430,28433],{"class":639,"line":631},[637,28424,28425],{"class":650},"        :mixBlur",[637,28427,657],{"class":642},[637,28429,660],{"class":642},[637,28431,28432],{"class":663},"30",[637,28434,3131],{"class":642},[637,28436,28437,28440,28442,28444,28447],{"class":639,"line":850},[637,28438,28439],{"class":650},"        :mixStrength",[637,28441,657],{"class":642},[637,28443,660],{"class":642},[637,28445,28446],{"class":663},"80",[637,28448,3131],{"class":642},[637,28450,28451,28454,28456,28458,28460],{"class":639,"line":861},[637,28452,28453],{"class":650},"        :mixContrast",[637,28455,657],{"class":642},[637,28457,660],{"class":642},[637,28459,1874],{"class":663},[637,28461,3131],{"class":642},[637,28463,28465,28467,28469,28471,28474],{"class":28464,"line":872},[639,673],[637,28466,8642],{"class":650},[637,28468,657],{"class":642},[637,28470,660],{"class":642},[637,28472,28473],{"class":663},"#a0a0a0",[637,28475,3131],{"class":642},[637,28477,28479,28482,28484,28486,28488],{"class":28478,"line":882},[639,673],[637,28480,28481],{"class":650},"        metalness",[637,28483,657],{"class":642},[637,28485,660],{"class":642},[637,28487,1946],{"class":663},[637,28489,3131],{"class":642},[637,28491,28493,28496,28498,28500,28502],{"class":28492,"line":632},[639,673],[637,28494,28495],{"class":650},"        roughness",[637,28497,657],{"class":642},[637,28499,660],{"class":642},[637,28501,1874],{"class":663},[637,28503,3131],{"class":642},[637,28505,28507,28510,28512,28514,28516],{"class":28506,"line":902},[639,673],[637,28508,28509],{"class":650},"        mirror",[637,28511,657],{"class":642},[637,28513,660],{"class":642},[637,28515,965],{"class":663},[637,28517,3131],{"class":642},[637,28519,28520],{"class":639,"line":912},[637,28521,8033],{"class":642},[637,28523,28524,28526,28528],{"class":639,"line":2625},[637,28525,895],{"class":642},[637,28527,856],{"class":646},[637,28529,669],{"class":642},[637,28531,28532,28534,28536,28538,28540,28542,28544,28546],{"class":639,"line":2634},[637,28533,781],{"class":642},[637,28535,856],{"class":646},[637,28537,1485],{"class":650},[637,28539,657],{"class":642},[637,28541,660],{"class":642},[637,28543,25556],{"class":663},[637,28545,660],{"class":642},[637,28547,669],{"class":642},[637,28549,28550,28552,28554],{"class":639,"line":2654},[637,28551,853],{"class":642},[637,28553,867],{"class":646},[637,28555,787],{"class":642},[637,28557,28558,28560,28562,28564,28566,28568,28570,28572],{"class":639,"line":2663},[637,28559,853],{"class":642},[637,28561,2686],{"class":646},[637,28563,2689],{"class":650},[637,28565,657],{"class":642},[637,28567,660],{"class":642},[637,28569,13327],{"class":663},[637,28571,660],{"class":642},[637,28573,787],{"class":642},[637,28575,28576,28578,28580],{"class":639,"line":2672},[637,28577,895],{"class":642},[637,28579,856],{"class":646},[637,28581,669],{"class":642},[637,28583,28584,28586,28588],{"class":639,"line":2681},[637,28585,781],{"class":642},[637,28587,9681],{"class":646},[637,28589,787],{"class":642},[637,28591,28592,28594,28596,28598,28600,28602,28604,28606],{"class":639,"line":2703},[637,28593,781],{"class":642},[637,28595,9700],{"class":646},[637,28597,1485],{"class":650},[637,28599,657],{"class":642},[637,28601,660],{"class":642},[637,28603,13362],{"class":663},[637,28605,660],{"class":642},[637,28607,787],{"class":642},[637,28609,28610,28612,28614],{"class":639,"line":2747},[637,28611,905],{"class":642},[637,28613,761],{"class":646},[637,28615,669],{"class":642},[637,28617,28618,28620,28622],{"class":639,"line":2756},[637,28619,732],{"class":642},[637,28621,750],{"class":646},[637,28623,669],{"class":642},[504,28625,922],{"id":921},[927,28627,28628,28638],{},[930,28629,28630],{},[933,28631,28632,28634,28636],{},[936,28633,8089],{"align":997},[936,28635,941],{"align":997},[936,28637,944],{},[946,28639,28640,28654,28668,28682,28699,28713,28727,28741,28755,28769,28786,28800,28814,28828,28852,28866,28882],{},[933,28641,28642,28646,28649],{},[951,28643,28644],{"align":997},[618,28645,27974],{},[951,28647,28648],{"align":997},"Length in pixels of one side of the square reflective textures",[951,28650,28651],{},[618,28652,28653],{},"256",[933,28655,28656,28661,28664],{},[951,28657,28658],{"align":997},[618,28659,28660],{},"mix",[951,28662,28663],{"align":997},"Overall strength of the reflection",[951,28665,28666],{},[618,28667,1874],{},[933,28669,28670,28675,28678],{},[951,28671,28672],{"align":997},[618,28673,28674],{},"sharpMix",[951,28676,28677],{"align":997},"Strength of the sharp reflection on smooth surfaces",[951,28679,28680],{},[618,28681,1874],{},[933,28683,28684,28689,28695],{},[951,28685,28686],{"align":997},[618,28687,28688],{},"sharpDepthScale",[951,28690,28691,28692,28694],{"align":997},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,28693,965],{},", a depth texture will be created",[951,28696,28697],{},[618,28698,1874],{},[933,28700,28701,28706,28709],{},[951,28702,28703],{"align":997},[618,28704,28705],{},"sharpDepthBias",[951,28707,28708],{"align":997},"Sharp reflection depth falloff bias",[951,28710,28711],{},[618,28712,965],{},[933,28714,28715,28720,28723],{},[951,28716,28717],{"align":997},[618,28718,28719],{},"sharpDepthEdgeMin",[951,28721,28722],{"align":997},"Sharp reflection depth falloff start",[951,28724,28725],{},[618,28726,965],{},[933,28728,28729,28734,28737],{},[951,28730,28731],{"align":997},[618,28732,28733],{},"sharpDepthEdgeMax",[951,28735,28736],{"align":997},"Sharp reflection depth falloff end",[951,28738,28739],{},[618,28740,5729],{},[933,28742,28743,28748,28751],{},[951,28744,28745],{"align":997},[618,28746,28747],{},"blurMixSmooth",[951,28749,28750],{"align":997},"Strength of the blurred reflection on smooth surfaces",[951,28752,28753],{},[618,28754,1874],{},[933,28756,28757,28762,28765],{},[951,28758,28759],{"align":997},[618,28760,28761],{},"blurMixRough",[951,28763,28764],{"align":997},"Strength of the blurred reflection on rough surfaces",[951,28766,28767],{},[618,28768,1874],{},[933,28770,28771,28776,28782],{},[951,28772,28773],{"align":997},[618,28774,28775],{},"blurDepthScale",[951,28777,28778,28779,28781],{"align":997},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,28780,965],{},", depth texture will be rendered",[951,28783,28784],{},[618,28785,1874],{},[933,28787,28788,28793,28796],{},[951,28789,28790],{"align":997},[618,28791,28792],{},"blurDepthBias",[951,28794,28795],{"align":997},"Blurred reflection depth spread bias",[951,28797,28798],{},[618,28799,965],{},[933,28801,28802,28807,28810],{},[951,28803,28804],{"align":997},[618,28805,28806],{},"blurDepthEdgeMin",[951,28808,28809],{"align":997},"Blurred reflection depth spread start",[951,28811,28812],{},[618,28813,965],{},[933,28815,28816,28821,28824],{},[951,28817,28818],{"align":997},[618,28819,28820],{},"blurDepthEdgeMax",[951,28822,28823],{"align":997},"Blurred reflection depth spread end",[951,28825,28826],{},[618,28827,5729],{},[933,28829,28830,28835,28848],{},[951,28831,28832],{"align":997},[618,28833,28834],{},"blurSize",[951,28836,28837,28838,28841,28842,5611,28845,28847],{"align":997},"Size of the blur. If ",[618,28839,28840],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[618,28843,28844],{},"[0, 0]",[618,28846,965],{},", a blur texture will be rendered",[951,28849,28850],{},[618,28851,28844],{},[933,28853,28854,28859,28862],{},[951,28855,28856],{"align":997},[618,28857,28858],{},"distortionMap",[951,28860,28861],{"align":997},"Texture for offsetting the reflection",[951,28863,28864],{},[618,28865,1179],{},[933,28867,28868,28873,28878],{},[951,28869,28870],{"align":997},[618,28871,28872],{},"distortion",[951,28874,28875,28876],{"align":997},"Influence of ",[618,28877,28858],{},[951,28879,28880],{},[618,28881,965],{},[933,28883,28884,28889,28892],{},[951,28885,28886],{"align":997},[618,28887,28888],{},"reflectorOffset",[951,28890,28891],{"align":997},"Offsets the reflection",[951,28893,28894],{},[618,28895,965],{},[614,28897,28898,28899,28901,28902,1672,28904,1672,28906,1672,28908,1672,28910,1672,28912,1672,28914,28916],{},"Additionally, the component extends ",[618,28900,28238],{}," and accepts all the same props including ",[618,28903,7547],{},[618,28905,21463],{},[618,28907,21448],{},[618,28909,2981],{},[618,28911,21347],{},[618,28913,21366],{},[618,28915,21385],{},", and more.",[1327,28918,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":28920},[28921,28922],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":195,"description":28923},"-dhKiUbKV5dPMARGNmTRwR-6x_sfsh0AlnXCQ6x3KUM",{"id":28928,"title":199,"body":28929,"description":29692,"extension":591,"links":592,"meta":29693,"navigation":594,"path":200,"seo":29694,"stem":201,"__hash__":29695},"docs/2.api/4.materials/mesh-transmission-material.md",{"type":501,"value":28930,"toc":29687},[28931,28936,28944,28951,28960,28962,29217,29219,29643,29648,29650,29685],[608,28932,28933],{},[28934,28935],"materials-mesh-transmission-material",{},[614,28937,2776,28938,9468,28940,28943],{},[618,28939,7317],{},[618,28941,28942],{},"\u003CMeshTransmissionMaterial />"," component that produces high-quality glass and transmission effects.",[614,28945,28946,28947,28950],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[618,28948,28949],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[2005,28952,28953],{},[614,28954,27627,28955,27634],{},[1140,28956,28959],{"href":28957,"rel":28958,"target":27632},"https://drei.docs.pmnd.rs/shaders/mesh-transmission-material",[1144],"drei MeshTransmissionMaterial",[504,28961,15],{"id":624},[626,28963,28966],{"className":628,"code":28964,"highlights":28965,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshTransmissionMaterial, Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n    \u003CEnvironment preset=\"city\" />\n    \u003CTresMesh>\n      \u003CTresTorusKnotGeometry :args=\"[1, 0.3, 128, 32]\" />\n      \u003CMeshTransmissionMaterial\n        :transmission=\"1\"\n        :thickness=\"0.5\"\n        :chromatic-aberration=\"0.03\"\n        :resolution=\"512\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850,861,872],[618,28967,28968,28988,29006,29030,29038,29042,29050,29058,29076,29095,29104,29124,29132,29146,29160,29175,29189,29193,29201,29209],{"__ignoreMap":576},[637,28969,28970,28972,28974,28976,28978,28980,28982,28984,28986],{"class":639,"line":577},[637,28971,643],{"class":642},[637,28973,647],{"class":646},[637,28975,651],{"class":650},[637,28977,654],{"class":650},[637,28979,657],{"class":642},[637,28981,660],{"class":642},[637,28983,664],{"class":663},[637,28985,660],{"class":642},[637,28987,669],{"class":642},[637,28989,28990,28992,28994,28996,28998,29000,29002,29004],{"class":639,"line":578},[637,28991,677],{"class":676},[637,28993,680],{"class":642},[637,28995,715],{"class":683},[637,28997,693],{"class":642},[637,28999,696],{"class":676},[637,29001,699],{"class":642},[637,29003,724],{"class":663},[637,29005,705],{"class":642},[637,29007,29009,29011,29013,29016,29018,29020,29022,29024,29026,29028],{"class":29008,"line":708},[639,673],[637,29010,677],{"class":676},[637,29012,680],{"class":642},[637,29014,29015],{"class":683}," MeshTransmissionMaterial",[637,29017,687],{"class":642},[637,29019,20947],{"class":683},[637,29021,693],{"class":642},[637,29023,696],{"class":676},[637,29025,699],{"class":642},[637,29027,702],{"class":663},[637,29029,705],{"class":642},[637,29031,29032,29034,29036],{"class":639,"line":729},[637,29033,732],{"class":642},[637,29035,647],{"class":646},[637,29037,669],{"class":642},[637,29039,29040],{"class":639,"line":739},[637,29041,742],{"emptyLinePlaceholder":594},[637,29043,29044,29046,29048],{"class":639,"line":745},[637,29045,643],{"class":642},[637,29047,750],{"class":646},[637,29049,669],{"class":642},[637,29051,29052,29054,29056],{"class":639,"line":755},[637,29053,758],{"class":642},[637,29055,761],{"class":646},[637,29057,669],{"class":642},[637,29059,29060,29062,29064,29066,29068,29070,29072,29074],{"class":639,"line":778},[637,29061,781],{"class":642},[637,29063,784],{"class":646},[637,29065,1485],{"class":650},[637,29067,657],{"class":642},[637,29069,660],{"class":642},[637,29071,9611],{"class":663},[637,29073,660],{"class":642},[637,29075,787],{"class":642},[637,29077,29078,29080,29082,29084,29086,29088,29091,29093],{"class":639,"line":790},[637,29079,781],{"class":642},[637,29081,375],{"class":646},[637,29083,21664],{"class":650},[637,29085,657],{"class":642},[637,29087,660],{"class":642},[637,29089,29090],{"class":663},"city",[637,29092,660],{"class":642},[637,29094,787],{"class":642},[637,29096,29098,29100,29102],{"class":29097,"line":800},[639,673],[637,29099,781],{"class":642},[637,29101,856],{"class":646},[637,29103,669],{"class":642},[637,29105,29107,29109,29111,29113,29115,29117,29120,29122],{"class":29106,"line":805},[639,673],[637,29108,853],{"class":642},[637,29110,27855],{"class":646},[637,29112,1959],{"class":650},[637,29114,657],{"class":642},[637,29116,660],{"class":642},[637,29118,29119],{"class":663},"[1, 0.3, 128, 32]",[637,29121,660],{"class":642},[637,29123,787],{"class":642},[637,29125,29127,29129],{"class":29126,"line":827},[639,673],[637,29128,853],{"class":642},[637,29130,29131],{"class":646},"MeshTransmissionMaterial\n",[637,29133,29135,29138,29140,29142,29144],{"class":29134,"line":631},[639,673],[637,29136,29137],{"class":650},"        :transmission",[637,29139,657],{"class":642},[637,29141,660],{"class":642},[637,29143,1874],{"class":663},[637,29145,3131],{"class":642},[637,29147,29149,29152,29154,29156,29158],{"class":29148,"line":850},[639,673],[637,29150,29151],{"class":650},"        :thickness",[637,29153,657],{"class":642},[637,29155,660],{"class":642},[637,29157,1946],{"class":663},[637,29159,3131],{"class":642},[637,29161,29163,29166,29168,29170,29173],{"class":29162,"line":861},[639,673],[637,29164,29165],{"class":650},"        :chromatic-aberration",[637,29167,657],{"class":642},[637,29169,660],{"class":642},[637,29171,29172],{"class":663},"0.03",[637,29174,3131],{"class":642},[637,29176,29178,29181,29183,29185,29187],{"class":29177,"line":872},[639,673],[637,29179,29180],{"class":650},"        :resolution",[637,29182,657],{"class":642},[637,29184,660],{"class":642},[637,29186,27983],{"class":663},[637,29188,3131],{"class":642},[637,29190,29191],{"class":639,"line":882},[637,29192,8033],{"class":642},[637,29194,29195,29197,29199],{"class":639,"line":632},[637,29196,895],{"class":642},[637,29198,856],{"class":646},[637,29200,669],{"class":642},[637,29202,29203,29205,29207],{"class":639,"line":902},[637,29204,905],{"class":642},[637,29206,761],{"class":646},[637,29208,669],{"class":642},[637,29210,29211,29213,29215],{"class":639,"line":912},[637,29212,732],{"class":642},[637,29214,750],{"class":646},[637,29216,669],{"class":642},[504,29218,922],{"id":921},[927,29220,29221,29234],{},[930,29222,29223],{},[933,29224,29225,29227,29229,29231],{},[936,29226,938],{"align":997},[936,29228,941],{"align":997},[936,29230,5969],{"align":997},[936,29232,944],{"align":29233},"center",[946,29235,29236,29258,29275,29292,29310,29328,29345,29363,29381,29400,29417,29435,29453,29471,29489,29507,29525,29542,29562,29581,29600,29622],{},[933,29237,29238,29243,29250,29254],{},[951,29239,29240],{"align":997},[618,29241,29242],{},"transmission",[951,29244,29245,29246,29249],{"align":997},"Glass opacity (maps to the internal ",[618,29247,29248],{},"_transmission"," uniform)",[951,29251,29252],{"align":997},[618,29253,5352],{},[951,29255,29256],{"align":29233},[618,29257,1874],{},[933,29259,29260,29264,29267,29271],{},[951,29261,29262],{"align":997},[618,29263,11635],{},[951,29265,29266],{"align":997},"Thickness of the glass volume",[951,29268,29269],{"align":997},[618,29270,5352],{},[951,29272,29273],{"align":29233},[618,29274,965],{},[933,29276,29277,29281,29284,29288],{},[951,29278,29279],{"align":997},[618,29280,21463],{},[951,29282,29283],{"align":997},"Surface roughness",[951,29285,29286],{"align":997},[618,29287,5352],{},[951,29289,29290],{"align":29233},[618,29291,965],{},[933,29293,29294,29299,29302,29306],{},[951,29295,29296],{"align":997},[618,29297,29298],{},"chromaticAberration",[951,29300,29301],{"align":997},"Chromatic aberration intensity",[951,29303,29304],{"align":997},[618,29305,5352],{},[951,29307,29308],{"align":29233},[618,29309,29172],{},[933,29311,29312,29317,29320,29324],{},[951,29313,29314],{"align":997},[618,29315,29316],{},"anisotropicBlur",[951,29318,29319],{"align":997},"Anisotropic blur amount",[951,29321,29322],{"align":997},[618,29323,5352],{},[951,29325,29326],{"align":29233},[618,29327,2163],{},[933,29329,29330,29334,29337,29341],{},[951,29331,29332],{"align":997},[618,29333,28872],{},[951,29335,29336],{"align":997},"Distortion amount",[951,29338,29339],{"align":997},[618,29340,5352],{},[951,29342,29343],{"align":29233},[618,29344,965],{},[933,29346,29347,29352,29355,29359],{},[951,29348,29349],{"align":997},[618,29350,29351],{},"distortionScale",[951,29353,29354],{"align":997},"Scale of the distortion noise",[951,29356,29357],{"align":997},[618,29358,5352],{},[951,29360,29361],{"align":29233},[618,29362,1946],{},[933,29364,29365,29370,29373,29377],{},[951,29366,29367],{"align":997},[618,29368,29369],{},"temporalDistortion",[951,29371,29372],{"align":997},"Animates the distortion over time",[951,29374,29375],{"align":997},[618,29376,5352],{},[951,29378,29379],{"align":29233},[618,29380,965],{},[933,29382,29383,29388,29391,29395],{},[951,29384,29385],{"align":997},[618,29386,29387],{},"ior",[951,29389,29390],{"align":997},"Index of refraction",[951,29392,29393],{"align":997},[618,29394,5352],{},[951,29396,29397],{"align":29233},[618,29398,29399],{},"1.5",[933,29401,29402,29406,29409,29413],{},[951,29403,29404],{"align":997},[618,29405,7547],{},[951,29407,29408],{"align":997},"Base color of the glass",[951,29410,29411],{"align":997},[618,29412,7562],{},[951,29414,29415],{"align":29233},[618,29416,2696],{},[933,29418,29419,29424,29427,29431],{},[951,29420,29421],{"align":997},[618,29422,29423],{},"clearcoat",[951,29425,29426],{"align":997},"Clearcoat layer intensity",[951,29428,29429],{"align":997},[618,29430,5352],{},[951,29432,29433],{"align":29233},[618,29434,965],{},[933,29436,29437,29442,29445,29449],{},[951,29438,29439],{"align":997},[618,29440,29441],{},"clearcoatRoughness",[951,29443,29444],{"align":997},"Clearcoat roughness",[951,29446,29447],{"align":997},[618,29448,5352],{},[951,29450,29451],{"align":29233},[618,29452,965],{},[933,29454,29455,29460,29463,29467],{},[951,29456,29457],{"align":997},[618,29458,29459],{},"attenuationDistance",[951,29461,29462],{"align":997},"Distance at which light is attenuated through the volume",[951,29464,29465],{"align":997},[618,29466,5352],{},[951,29468,29469],{"align":29233},[618,29470,13514],{},[933,29472,29473,29478,29481,29485],{},[951,29474,29475],{"align":997},[618,29476,29477],{},"attenuationColor",[951,29479,29480],{"align":997},"Color the light shifts to as it passes through the volume",[951,29482,29483],{"align":997},[618,29484,7562],{},[951,29486,29487],{"align":29233},[618,29488,2696],{},[933,29490,29491,29496,29499,29503],{},[951,29492,29493],{"align":997},[618,29494,29495],{},"backside",[951,29497,29498],{"align":997},"Render back faces into a separate buffer for proper glass thickness",[951,29500,29501],{"align":997},[618,29502,17564],{},[951,29504,29505],{"align":29233},[618,29506,971],{},[933,29508,29509,29514,29517,29521],{},[951,29510,29511],{"align":997},[618,29512,29513],{},"backsideThickness",[951,29515,29516],{"align":997},"Thickness used during the backside pass",[951,29518,29519],{"align":997},[618,29520,5352],{},[951,29522,29523],{"align":29233},[618,29524,965],{},[933,29526,29527,29531,29534,29538],{},[951,29528,29529],{"align":997},[618,29530,27974],{},[951,29532,29533],{"align":997},"Resolution of the FBO render target in pixels",[951,29535,29536],{"align":997},[618,29537,5352],{},[951,29539,29540],{"align":29233},[618,29541,28653],{},[933,29543,29544,29549,29554,29558],{},[951,29545,29546],{"align":997},[618,29547,29548],{},"backsideResolution",[951,29550,29551,29552],{"align":997},"Resolution of the backside FBO. Defaults to ",[618,29553,27974],{},[951,29555,29556],{"align":997},[618,29557,5352],{},[951,29559,29560],{"align":29233},[618,29561,27974],{},[933,29563,29564,29569,29572,29577],{},[951,29565,29566],{"align":997},[618,29567,29568],{},"background",[951,29570,29571],{"align":997},"Override the scene background during the FBO pass",[951,29573,29574],{"align":997},[618,29575,29576],{},"THREE.Color | null",[951,29578,29579],{"align":29233},[618,29580,1179],{},[933,29582,29583,29588,29591,29596],{},[951,29584,29585],{"align":997},[618,29586,29587],{},"buffer",[951,29589,29590],{"align":997},"Supply your own render-target texture, skipping the internal FBO pass",[951,29592,29593],{"align":997},[618,29594,29595],{},"THREE.Texture | null",[951,29597,29598],{"align":29233},[618,29599,1179],{},[933,29601,29602,29607,29613,29617],{},[951,29603,29604],{"align":997},[618,29605,29606],{},"samples",[951,29608,29609,29610],{"align":997},"Number of refraction samples. ",[1669,29611,29612],{},"Baked at compile time — changing requires remount.",[951,29614,29615],{"align":997},[618,29616,5352],{},[951,29618,29619],{"align":29233},[618,29620,29621],{},"6",[933,29623,29624,29629,29635,29639],{},[951,29625,29626],{"align":997},[618,29627,29628],{},"transmissionSampler",[951,29630,29631,29632],{"align":997},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[1669,29633,29634],{},"Baked at compile time.",[951,29636,29637],{"align":997},[618,29638,17564],{},[951,29640,29641],{"align":29233},[618,29642,971],{},[614,29644,29645,29646,28239],{},"The component extends ",[618,29647,26608],{},[504,29649,26952],{"id":26951},[2213,29651,29652,29660,29667,29675],{},[2216,29653,8256,29654,5611,29656,29659],{},[618,29655,28148],{},[618,29657,29658],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[2216,29661,29662,3063,29664,29666],{},[618,29663,29606],{},[618,29665,29628],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[2216,29668,18601,29669,29671,29672,29674],{},[618,29670,29495],{}," with a non-zero ",[618,29673,29513],{}," for more convincing thick-glass effects.",[2216,29676,29677,29678,29680,29681,29684],{},"Lower ",[618,29679,27974],{}," (e.g. ",[618,29682,29683],{},"128",") improves performance at the cost of refraction sharpness.",[1327,29686,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":29688},[29689,29690,29691],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":26951,"depth":578,"text":26952},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":199,"description":29692},"MSm1cDIVGWOO8lvYX_2hfQL4QLQbohqGi_4-iSPYgOA",{"id":29697,"title":203,"body":29698,"description":29976,"extension":591,"links":592,"meta":29977,"navigation":594,"path":204,"seo":29978,"stem":205,"__hash__":29979},"docs/2.api/4.materials/point-material.md",{"type":501,"value":29699,"toc":29972},[29700,29705,29715,29720,29722,29954,29956,29970],[2295,29701,29702],{},[29703,29704],"materials-point-material",{},[614,29706,29707,29710,29711,29714],{},[618,29708,29709],{},"\u003CPointMaterial />"," extends ",[618,29712,29713],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3199,29716,29717],{},[614,29718,29719],{},"N.B., stacking order and transparency of objects using THREE.PointsMaterial and by extension PointMaterial can be somewhat unintuitive, especially when combined with other on-screen objects. Please see discussions at threejs.org for more infomation.",[504,29721,15],{"id":624},[626,29723,29726],{"className":628,"code":29724,"highlights":29725,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointMaterial, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003COrbitControls />\n    \u003CTresPoints>\n      \u003CTresIcosahedronGeometry :args=\"[1, 4]\" />\n      \u003CPointMaterial\n        :size=\"5\"\n        color=\"orange\"\n      />\n    \u003C/TresPoints>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,827,631,850],[618,29727,29728,29748,29766,29790,29798,29802,29810,29818,29846,29854,29863,29883,29891,29905,29918,29922,29930,29938,29946],{"__ignoreMap":576},[637,29729,29730,29732,29734,29736,29738,29740,29742,29744,29746],{"class":639,"line":577},[637,29731,643],{"class":642},[637,29733,647],{"class":646},[637,29735,651],{"class":650},[637,29737,654],{"class":650},[637,29739,657],{"class":642},[637,29741,660],{"class":642},[637,29743,664],{"class":663},[637,29745,660],{"class":642},[637,29747,669],{"class":642},[637,29749,29750,29752,29754,29756,29758,29760,29762,29764],{"class":639,"line":578},[637,29751,677],{"class":676},[637,29753,680],{"class":642},[637,29755,715],{"class":683},[637,29757,693],{"class":642},[637,29759,696],{"class":676},[637,29761,699],{"class":642},[637,29763,724],{"class":663},[637,29765,705],{"class":642},[637,29767,29769,29771,29773,29776,29778,29780,29782,29784,29786,29788],{"class":29768,"line":708},[639,673],[637,29770,677],{"class":676},[637,29772,680],{"class":642},[637,29774,29775],{"class":683}," PointMaterial",[637,29777,687],{"class":642},[637,29779,690],{"class":683},[637,29781,693],{"class":642},[637,29783,696],{"class":676},[637,29785,699],{"class":642},[637,29787,702],{"class":663},[637,29789,705],{"class":642},[637,29791,29792,29794,29796],{"class":639,"line":729},[637,29793,732],{"class":642},[637,29795,647],{"class":646},[637,29797,669],{"class":642},[637,29799,29800],{"class":639,"line":739},[637,29801,742],{"emptyLinePlaceholder":594},[637,29803,29804,29806,29808],{"class":639,"line":745},[637,29805,643],{"class":642},[637,29807,750],{"class":646},[637,29809,669],{"class":642},[637,29811,29812,29814,29816],{"class":639,"line":755},[637,29813,758],{"class":642},[637,29815,761],{"class":646},[637,29817,669],{"class":642},[637,29819,29820,29822,29824,29826,29828,29830,29832,29834,29836,29838,29840,29842,29844],{"class":639,"line":778},[637,29821,781],{"class":642},[637,29823,784],{"class":646},[637,29825,1485],{"class":650},[637,29827,657],{"class":642},[637,29829,660],{"class":642},[637,29831,13280],{"class":663},[637,29833,660],{"class":642},[637,29835,9616],{"class":650},[637,29837,657],{"class":642},[637,29839,660],{"class":642},[637,29841,9623],{"class":663},[637,29843,660],{"class":642},[637,29845,787],{"class":642},[637,29847,29848,29850,29852],{"class":639,"line":790},[637,29849,781],{"class":642},[637,29851,795],{"class":646},[637,29853,787],{"class":642},[637,29855,29856,29858,29861],{"class":639,"line":800},[637,29857,781],{"class":642},[637,29859,29860],{"class":646},"TresPoints",[637,29862,669],{"class":642},[637,29864,29865,29867,29870,29872,29874,29876,29879,29881],{"class":639,"line":805},[637,29866,853],{"class":642},[637,29868,29869],{"class":646},"TresIcosahedronGeometry",[637,29871,1959],{"class":650},[637,29873,657],{"class":642},[637,29875,660],{"class":642},[637,29877,29878],{"class":663},"[1, 4]",[637,29880,660],{"class":642},[637,29882,787],{"class":642},[637,29884,29886,29888],{"class":29885,"line":827},[639,673],[637,29887,853],{"class":642},[637,29889,29890],{"class":646},"PointMaterial\n",[637,29892,29894,29897,29899,29901,29903],{"class":29893,"line":631},[639,673],[637,29895,29896],{"class":650},"        :size",[637,29898,657],{"class":642},[637,29900,660],{"class":642},[637,29902,12709],{"class":663},[637,29904,3131],{"class":642},[637,29906,29908,29910,29912,29914,29916],{"class":29907,"line":850},[639,673],[637,29909,8642],{"class":650},[637,29911,657],{"class":642},[637,29913,660],{"class":642},[637,29915,13327],{"class":663},[637,29917,3131],{"class":642},[637,29919,29920],{"class":639,"line":861},[637,29921,8033],{"class":642},[637,29923,29924,29926,29928],{"class":639,"line":872},[637,29925,895],{"class":642},[637,29927,29860],{"class":646},[637,29929,669],{"class":642},[637,29931,29932,29934,29936],{"class":639,"line":882},[637,29933,781],{"class":642},[637,29935,9681],{"class":646},[637,29937,787],{"class":642},[637,29939,29940,29942,29944],{"class":639,"line":632},[637,29941,905],{"class":642},[637,29943,761],{"class":646},[637,29945,669],{"class":642},[637,29947,29948,29950,29952],{"class":639,"line":902},[637,29949,732],{"class":642},[637,29951,750],{"class":646},[637,29953,669],{"class":642},[504,29955,922],{"id":921},[614,29957,29958,29959,29966,29967,1146],{},"All ",[1140,29960,29963,29965],{"href":29961,"rel":29962},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1144],[618,29964,29713],{}," properties"," are inherited by ",[618,29968,29969],{},"PointMaterial",[1327,29971,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":29973},[29974,29975],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":203,"description":29976},"KQarQWFbe_ZShVTsHEKL-hBviOOcUTm-CtCNsZFQ3jo",{"id":29981,"title":207,"body":29982,"description":30294,"extension":591,"links":592,"meta":30295,"navigation":594,"path":208,"seo":30296,"stem":209,"__hash__":30297},"docs/2.api/4.materials/wobble-material.md",{"type":501,"value":29983,"toc":30290},[29984,29989,29997,29999,30240,30242,30283,30288],[608,29985,29986],{},[29987,29988],"materials-wobble-material",{},[614,29990,2776,29991,9468,29993,29996],{},[618,29992,7317],{},[618,29994,29995],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[504,29998,15],{"id":624},[626,30000,30003],{"className":628,"code":30001,"highlights":30002,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshWobbleMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh>\n      \u003CTresTorusGeometry />\n      \u003CMeshWobbleMaterial\n        color=\"#f25042\"\n        :speed=\"1\"\n        :factor=\"0.6\"\n      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,805,827,631,850,861],[618,30004,30005,30025,30043,30063,30071,30075,30083,30091,30119,30127,30135,30143,30157,30171,30185,30190,30198,30206,30224,30232],{"__ignoreMap":576},[637,30006,30007,30009,30011,30013,30015,30017,30019,30021,30023],{"class":639,"line":577},[637,30008,643],{"class":642},[637,30010,647],{"class":646},[637,30012,651],{"class":650},[637,30014,654],{"class":650},[637,30016,657],{"class":642},[637,30018,660],{"class":642},[637,30020,664],{"class":663},[637,30022,660],{"class":642},[637,30024,669],{"class":642},[637,30026,30027,30029,30031,30033,30035,30037,30039,30041],{"class":639,"line":578},[637,30028,677],{"class":676},[637,30030,680],{"class":642},[637,30032,715],{"class":683},[637,30034,693],{"class":642},[637,30036,696],{"class":676},[637,30038,699],{"class":642},[637,30040,724],{"class":663},[637,30042,705],{"class":642},[637,30044,30046,30048,30050,30053,30055,30057,30059,30061],{"class":30045,"line":708},[639,673],[637,30047,677],{"class":676},[637,30049,680],{"class":642},[637,30051,30052],{"class":683}," MeshWobbleMaterial",[637,30054,693],{"class":642},[637,30056,696],{"class":676},[637,30058,699],{"class":642},[637,30060,702],{"class":663},[637,30062,705],{"class":642},[637,30064,30065,30067,30069],{"class":639,"line":729},[637,30066,732],{"class":642},[637,30068,647],{"class":646},[637,30070,669],{"class":642},[637,30072,30073],{"class":639,"line":739},[637,30074,742],{"emptyLinePlaceholder":594},[637,30076,30077,30079,30081],{"class":639,"line":745},[637,30078,643],{"class":642},[637,30080,750],{"class":646},[637,30082,669],{"class":642},[637,30084,30085,30087,30089],{"class":639,"line":755},[637,30086,758],{"class":642},[637,30088,761],{"class":646},[637,30090,669],{"class":642},[637,30092,30093,30095,30097,30099,30101,30103,30105,30107,30109,30111,30113,30115,30117],{"class":639,"line":778},[637,30094,781],{"class":642},[637,30096,784],{"class":646},[637,30098,1485],{"class":650},[637,30100,657],{"class":642},[637,30102,660],{"class":642},[637,30104,13280],{"class":663},[637,30106,660],{"class":642},[637,30108,9616],{"class":650},[637,30110,657],{"class":642},[637,30112,660],{"class":642},[637,30114,9623],{"class":663},[637,30116,660],{"class":642},[637,30118,787],{"class":642},[637,30120,30121,30123,30125],{"class":639,"line":790},[637,30122,781],{"class":642},[637,30124,856],{"class":646},[637,30126,669],{"class":642},[637,30128,30129,30131,30133],{"class":639,"line":800},[637,30130,853],{"class":642},[637,30132,11863],{"class":646},[637,30134,787],{"class":642},[637,30136,30138,30140],{"class":30137,"line":805},[639,673],[637,30139,853],{"class":642},[637,30141,30142],{"class":646},"MeshWobbleMaterial\n",[637,30144,30146,30148,30150,30152,30155],{"class":30145,"line":827},[639,673],[637,30147,8642],{"class":650},[637,30149,657],{"class":642},[637,30151,660],{"class":642},[637,30153,30154],{"class":663},"#f25042",[637,30156,3131],{"class":642},[637,30158,30160,30163,30165,30167,30169],{"class":30159,"line":631},[639,673],[637,30161,30162],{"class":650},"        :speed",[637,30164,657],{"class":642},[637,30166,660],{"class":642},[637,30168,1874],{"class":663},[637,30170,3131],{"class":642},[637,30172,30174,30177,30179,30181,30183],{"class":30173,"line":850},[639,673],[637,30175,30176],{"class":650},"        :factor",[637,30178,657],{"class":642},[637,30180,660],{"class":642},[637,30182,10661],{"class":663},[637,30184,3131],{"class":642},[637,30186,30188],{"class":30187,"line":861},[639,673],[637,30189,8033],{"class":642},[637,30191,30192,30194,30196],{"class":639,"line":872},[637,30193,895],{"class":642},[637,30195,856],{"class":646},[637,30197,669],{"class":642},[637,30199,30200,30202,30204],{"class":639,"line":882},[637,30201,781],{"class":642},[637,30203,9681],{"class":646},[637,30205,787],{"class":642},[637,30207,30208,30210,30212,30214,30216,30218,30220,30222],{"class":639,"line":632},[637,30209,781],{"class":642},[637,30211,9700],{"class":646},[637,30213,1485],{"class":650},[637,30215,657],{"class":642},[637,30217,660],{"class":642},[637,30219,13362],{"class":663},[637,30221,660],{"class":642},[637,30223,787],{"class":642},[637,30225,30226,30228,30230],{"class":639,"line":902},[637,30227,905],{"class":642},[637,30229,761],{"class":646},[637,30231,669],{"class":642},[637,30233,30234,30236,30238],{"class":639,"line":912},[637,30235,732],{"class":642},[637,30237,750],{"class":646},[637,30239,669],{"class":642},[504,30241,922],{"id":921},[927,30243,30244,30254],{},[930,30245,30246],{},[933,30247,30248,30250,30252],{},[936,30249,938],{"align":997},[936,30251,941],{"align":997},[936,30253,944],{},[946,30255,30256,30269],{},[933,30257,30258,30262,30265],{},[951,30259,30260],{"align":997},[1669,30261,9781],{},[951,30263,30264],{"align":997},"how fast the wobble effect would be.",[951,30266,30267],{},[618,30268,1874],{},[933,30270,30271,30276,30279],{},[951,30272,30273],{"align":997},[1669,30274,30275],{},"factor",[951,30277,30278],{"align":997},"how strong the wobble effect will deform the geometry",[951,30280,30281],{},[618,30282,1874],{},[614,30284,30285,30286,26609],{},"This material extends ",[618,30287,28238],{},[1327,30289,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":30291},[30292,30293],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":207,"description":30294},"FcmdcQOb0wna_07P1wVmXmyOFm6O2rnxJE44Peni4w8",[30299,30483,30989,31159,31337,31724,31960,32129,32670,32838,33436,33603,33778,34138,34315,34477,34638,34832,35008,35412,35580,35770,35959],{"id":30300,"title":217,"body":30301,"description":30479,"extension":591,"links":592,"meta":30480,"navigation":594,"path":218,"seo":30481,"stem":219,"__hash__":30482},"docs/2.api/5.shapes/box.md",{"type":501,"value":30302,"toc":30476},[30303,30308,30319,30327,30334,30336,30473],[608,30304,30305],{},[30306,30307],"shapes-box",{},[614,30309,2776,30310,9468,30312,30315,30316,1146],{},[618,30311,7317],{},[618,30313,30314],{},"\u003CBox />"," component that serves as a short-cut for a ",[618,30317,30318],{},"BoxGeometry",[626,30320,30325],{"className":30321,"code":30323,"language":30324},[30322],"language-text","args: [\n  width: number,\n  height: number,\n  depth: number,\n  widthSegments: number,\n  heightSegments: number,\n  depthSegments: number\n]\n","text",[618,30326,30323],{"__ignoreMap":576},[614,30328,30329,30330],{},"Reference: ",[1140,30331,30318],{"href":30332,"rel":30333},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1144],[504,30335,15],{"id":624},[626,30337,30339],{"className":628,"code":30338,"language":633,"meta":576,"style":576},"\u003CBox :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Box with a custom material transformations\n\u003CBox ref=\"boxRef\" :args=\"[1, 1, 1]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Box>\n",[618,30340,30341,30384,30388,30393,30460,30465],{"__ignoreMap":576},[637,30342,30343,30345,30347,30349,30352,30354,30356,30358,30360,30362,30364,30366,30368,30370,30372,30374,30376,30378,30380,30382],{"class":639,"line":577},[637,30344,643],{"class":642},[637,30346,217],{"class":646},[637,30348,3029],{"class":642},[637,30350,30351],{"class":650},"args",[637,30353,657],{"class":642},[637,30355,660],{"class":642},[637,30357,8731],{"class":683},[637,30359,1874],{"class":2501},[637,30361,687],{"class":642},[637,30363,2561],{"class":2501},[637,30365,687],{"class":642},[637,30367,2561],{"class":2501},[637,30369,2514],{"class":683},[637,30371,660],{"class":642},[637,30373,2689],{"class":650},[637,30375,657],{"class":642},[637,30377,660],{"class":642},[637,30379,13327],{"class":663},[637,30381,660],{"class":642},[637,30383,787],{"class":642},[637,30385,30386],{"class":639,"line":578},[637,30387,742],{"emptyLinePlaceholder":594},[637,30389,30390],{"class":639,"line":708},[637,30391,30392],{"class":683},"// Box with a custom material transformations\n",[637,30394,30395,30397,30399,30401,30403,30405,30407,30409,30411,30413,30415,30417,30419,30421,30423,30425,30427,30429,30431,30433,30435,30437,30439,30441,30443,30445,30447,30450,30452,30454,30456,30458],{"class":639,"line":729},[637,30396,643],{"class":642},[637,30398,217],{"class":646},[637,30400,3872],{"class":650},[637,30402,657],{"class":642},[637,30404,660],{"class":642},[637,30406,16336],{"class":663},[637,30408,660],{"class":642},[637,30410,3029],{"class":642},[637,30412,30351],{"class":650},[637,30414,657],{"class":642},[637,30416,660],{"class":642},[637,30418,8731],{"class":683},[637,30420,1874],{"class":2501},[637,30422,687],{"class":642},[637,30424,2561],{"class":2501},[637,30426,687],{"class":642},[637,30428,2561],{"class":2501},[637,30430,2514],{"class":683},[637,30432,660],{"class":642},[637,30434,3029],{"class":642},[637,30436,4130],{"class":650},[637,30438,657],{"class":642},[637,30440,660],{"class":642},[637,30442,8731],{"class":683},[637,30444,965],{"class":2501},[637,30446,687],{"class":642},[637,30448,30449],{"class":2501}," 4",[637,30451,687],{"class":642},[637,30453,2506],{"class":2501},[637,30455,2514],{"class":683},[637,30457,660],{"class":642},[637,30459,669],{"class":642},[637,30461,30462],{"class":639,"line":739},[637,30463,30464],{"class":683},"  \u003CTresMeshToonMaterial color=\"orange\" />\n",[637,30466,30467,30469,30471],{"class":639,"line":745},[637,30468,732],{"class":642},[637,30470,217],{"class":646},[637,30472,669],{"class":642},[1327,30474,30475],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":30477},[30478],{"id":624,"depth":578,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":30479},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":30484,"title":221,"body":30485,"description":30985,"extension":591,"links":592,"meta":30986,"navigation":594,"path":222,"seo":30987,"stem":223,"__hash__":30988},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":501,"value":30486,"toc":30981},[30487,30492,30500,30523,30525,30747,30749,30979],[2295,30488,30489],{},[30490,30491],"shapes-catmull-rom-curve3",{},[614,30493,2776,30494,9468,30496,30499],{},[618,30495,7317],{},[618,30497,30498],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[614,30501,30502,30504,30505,30512,30513,30516,30517],{},[618,30503,30498],{}," wraps ",[1140,30506,30509,30510],{"href":30507,"rel":30508},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1144],"Three.js's ",[618,30511,221],{}," functionality, but applies it to Cientos' ",[618,30514,30515],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1140,30518,30520,30521,1146],{"href":30519},"line2#props","all the props from ",[618,30522,30515],{},[504,30524,15],{"id":624},[626,30526,30529],{"className":628,"code":30527,"highlights":30528,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CatmullRomCurve3 } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCatmullRomCurve3\n      :points=\"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850],[618,30530,30531,30551,30569,30589,30608,30616,30620,30628,30636,30654,30662,30677,30691,30705,30719,30723,30731,30739],{"__ignoreMap":576},[637,30532,30533,30535,30537,30539,30541,30543,30545,30547,30549],{"class":639,"line":577},[637,30534,643],{"class":642},[637,30536,647],{"class":646},[637,30538,651],{"class":650},[637,30540,654],{"class":650},[637,30542,657],{"class":642},[637,30544,660],{"class":642},[637,30546,664],{"class":663},[637,30548,660],{"class":642},[637,30550,669],{"class":642},[637,30552,30553,30555,30557,30559,30561,30563,30565,30567],{"class":639,"line":578},[637,30554,677],{"class":676},[637,30556,680],{"class":642},[637,30558,715],{"class":683},[637,30560,693],{"class":642},[637,30562,696],{"class":676},[637,30564,699],{"class":642},[637,30566,724],{"class":663},[637,30568,705],{"class":642},[637,30570,30572,30574,30576,30579,30581,30583,30585,30587],{"class":30571,"line":708},[639,673],[637,30573,677],{"class":676},[637,30575,680],{"class":642},[637,30577,30578],{"class":683}," CatmullRomCurve3",[637,30580,693],{"class":642},[637,30582,696],{"class":676},[637,30584,699],{"class":642},[637,30586,702],{"class":663},[637,30588,705],{"class":642},[637,30590,30591,30593,30595,30598,30600,30602,30604,30606],{"class":639,"line":729},[637,30592,677],{"class":676},[637,30594,680],{"class":642},[637,30596,30597],{"class":683}," Vector3",[637,30599,693],{"class":642},[637,30601,696],{"class":676},[637,30603,699],{"class":642},[637,30605,4626],{"class":663},[637,30607,705],{"class":642},[637,30609,30610,30612,30614],{"class":639,"line":739},[637,30611,732],{"class":642},[637,30613,647],{"class":646},[637,30615,669],{"class":642},[637,30617,30618],{"class":639,"line":745},[637,30619,742],{"emptyLinePlaceholder":594},[637,30621,30622,30624,30626],{"class":639,"line":755},[637,30623,643],{"class":642},[637,30625,750],{"class":646},[637,30627,669],{"class":642},[637,30629,30630,30632,30634],{"class":639,"line":778},[637,30631,758],{"class":642},[637,30633,761],{"class":646},[637,30635,669],{"class":642},[637,30637,30638,30640,30642,30644,30646,30648,30650,30652],{"class":639,"line":790},[637,30639,781],{"class":642},[637,30641,784],{"class":646},[637,30643,1485],{"class":650},[637,30645,657],{"class":642},[637,30647,660],{"class":642},[637,30649,13280],{"class":663},[637,30651,660],{"class":642},[637,30653,787],{"class":642},[637,30655,30657,30659],{"class":30656,"line":800},[639,673],[637,30658,781],{"class":642},[637,30660,30661],{"class":646},"CatmullRomCurve3\n",[637,30663,30665,30668,30670,30672,30675],{"class":30664,"line":805},[639,673],[637,30666,30667],{"class":650},"      :points",[637,30669,657],{"class":642},[637,30671,660],{"class":642},[637,30673,30674],{"class":663},"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]",[637,30676,3131],{"class":642},[637,30678,30680,30683,30685,30687,30689],{"class":30679,"line":827},[639,673],[637,30681,30682],{"class":650},"      :segments",[637,30684,657],{"class":642},[637,30686,660],{"class":642},[637,30688,11376],{"class":663},[637,30690,3131],{"class":642},[637,30692,30694,30697,30699,30701,30703],{"class":30693,"line":631},[639,673],[637,30695,30696],{"class":650},"      color",[637,30698,657],{"class":642},[637,30700,660],{"class":642},[637,30702,13327],{"class":663},[637,30704,3131],{"class":642},[637,30706,30708,30711,30713,30715,30717],{"class":30707,"line":850},[639,673],[637,30709,30710],{"class":650},"      :line-width",[637,30712,657],{"class":642},[637,30714,660],{"class":642},[637,30716,21394],{"class":663},[637,30718,3131],{"class":642},[637,30720,30721],{"class":639,"line":861},[637,30722,17274],{"class":642},[637,30724,30725,30727,30729],{"class":639,"line":872},[637,30726,781],{"class":642},[637,30728,9681],{"class":646},[637,30730,787],{"class":642},[637,30732,30733,30735,30737],{"class":639,"line":882},[637,30734,905],{"class":642},[637,30736,761],{"class":646},[637,30738,669],{"class":642},[637,30740,30741,30743,30745],{"class":639,"line":632},[637,30742,732],{"class":642},[637,30744,750],{"class":646},[637,30746,669],{"class":642},[504,30748,922],{"id":921},[927,30750,30751,30763],{},[930,30752,30753],{},[933,30754,30755,30757,30759,30761],{},[936,30756,938],{},[936,30758,5969],{},[936,30760,941],{},[936,30762,944],{},[946,30764,30765,30780,30795,30809,30825,30839,30854,30868,30882,30895,30909,30923,30937,30951,30965],{},[933,30766,30767,30770,30775,30778],{},[951,30768,30769],{},"points",[951,30771,30772],{},[618,30773,30774],{},"Array\u003CVector3 | [number, number, number]>",[951,30776,30777],{},"Curve's control points",[951,30779],{},[933,30781,30782,30785,30789,30792],{},[951,30783,30784],{},"segments",[951,30786,30787],{},[618,30788,5352],{},[951,30790,30791],{},"Number of segments in the resulting curve (higher = smoother)",[951,30793,30794],{},"20",[933,30796,30797,30800,30804,30807],{},[951,30798,30799],{},"closed",[951,30801,30802],{},[618,30803,17564],{},[951,30805,30806],{},"The curve will loop back onto itself when this is true.",[951,30808,971],{},[933,30810,30811,30814,30819,30822],{},[951,30812,30813],{},"curveType",[951,30815,30816],{},[618,30817,30818],{},"'centripetal' | 'chordal' | 'catmullrom'",[951,30820,30821],{},"Curve type",[951,30823,30824],{},"'centripetal'",[933,30826,30827,30830,30834,30837],{},[951,30828,30829],{},"tension",[951,30831,30832],{},[618,30833,5352],{},[951,30835,30836],{},"Catmullrom's tension, when curveType is 'catmullrom'",[951,30838,1946],{},[933,30840,30841,30844,30849,30852],{},[951,30842,30843],{},"vertexColors",[951,30845,30846],{},[618,30847,30848],{},"TresColor[]",[951,30850,30851],{},"Vertex colors, if using",[951,30853,3656],{},[933,30855,30856,30858,30862,30865],{},[951,30857,7547],{},[951,30859,30860],{},[618,30861,7562],{},[951,30863,30864],{},"Color for the line – multiplies vertex colors",[951,30866,30867],{},"'white'",[933,30869,30870,30873,30877,30880],{},[951,30871,30872],{},"lineWidth",[951,30874,30875],{},[618,30876,5352],{},[951,30878,30879],{},"Width of the line – in world units with size attenuation, pixels otherwise",[951,30881,1874],{},[933,30883,30884,30886,30890,30893],{},[951,30885,27993],{},[951,30887,30888],{},[618,30889,17564],{},[951,30891,30892],{},"Whether the line width is in world units or pixels",[951,30894,971],{},[933,30896,30897,30900,30904,30907],{},[951,30898,30899],{},"alphaToCoverage",[951,30901,30902],{},[618,30903,17564],{},[951,30905,30906],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[951,30908,971],{},[933,30910,30911,30914,30918,30921],{},[951,30912,30913],{},"dashed",[951,30915,30916],{},[618,30917,17564],{},[951,30919,30920],{},"Whether the line is dashed",[951,30922,971],{},[933,30924,30925,30928,30932,30935],{},[951,30926,30927],{},"dashSize",[951,30929,30930],{},[618,30931,5352],{},[951,30933,30934],{},"Dash size",[951,30936,1874],{},[933,30938,30939,30942,30946,30949],{},[951,30940,30941],{},"gapSize",[951,30943,30944],{},[618,30945,5352],{},[951,30947,30948],{},"Gap size in dashed line",[951,30950,1874],{},[933,30952,30953,30956,30960,30963],{},[951,30954,30955],{},"dashScale",[951,30957,30958],{},[618,30959,5352],{},[951,30961,30962],{},"Scale of the dashes/gaps",[951,30964,1874],{},[933,30966,30967,30970,30974,30977],{},[951,30968,30969],{},"dashOffset",[951,30971,30972],{},[618,30973,5352],{},[951,30975,30976],{},"Dash offset",[951,30978,965],{},[1327,30980,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":30982},[30983,30984],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":221,"description":30985},"qeOP9WBmpA_w2Yd5qceOSBKv-l797GiqondBBAasbSM",{"id":30990,"title":225,"body":30991,"description":31155,"extension":591,"links":592,"meta":31156,"navigation":594,"path":226,"seo":31157,"stem":227,"__hash__":31158},"docs/2.api/5.shapes/circle.md",{"type":501,"value":30992,"toc":31152},[30993,30998,31008,31014,31020,31022,31150],[608,30994,30995],{},[30996,30997],"shapes-circle",{},[614,30999,2776,31000,9468,31002,30315,31005,1146],{},[618,31001,7317],{},[618,31003,31004],{},"\u003CCircle />",[618,31006,31007],{},"CircleGeometry",[626,31009,31012],{"className":31010,"code":31011,"language":30324},[30322],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[618,31013,31011],{"__ignoreMap":576},[614,31015,30329,31016],{},[1140,31017,31007],{"href":31018,"rel":31019},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1144],[504,31021,15],{"id":624},[626,31023,31025],{"className":628,"code":31024,"language":633,"meta":576,"style":576},"\u003CCircle :args=\"[1, 32]\" color=\"orange\" />\n\n// Circle with a custom material transformations\n\u003CCircle ref=\"circleRef\" :args=\"[1, 32]\" :position=\"[0, 0, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Circle>\n",[618,31026,31027,31066,31070,31075,31138,31142],{"__ignoreMap":576},[637,31028,31029,31031,31033,31035,31037,31039,31041,31043,31045,31047,31050,31052,31054,31056,31058,31060,31062,31064],{"class":639,"line":577},[637,31030,643],{"class":642},[637,31032,225],{"class":646},[637,31034,3029],{"class":642},[637,31036,30351],{"class":650},[637,31038,657],{"class":642},[637,31040,660],{"class":642},[637,31042,8731],{"class":683},[637,31044,1874],{"class":2501},[637,31046,687],{"class":642},[637,31048,31049],{"class":2501}," 32",[637,31051,2514],{"class":683},[637,31053,660],{"class":642},[637,31055,2689],{"class":650},[637,31057,657],{"class":642},[637,31059,660],{"class":642},[637,31061,13327],{"class":663},[637,31063,660],{"class":642},[637,31065,787],{"class":642},[637,31067,31068],{"class":639,"line":578},[637,31069,742],{"emptyLinePlaceholder":594},[637,31071,31072],{"class":639,"line":708},[637,31073,31074],{"class":683},"// Circle with a custom material transformations\n",[637,31076,31077,31079,31081,31083,31085,31087,31090,31092,31094,31096,31098,31100,31102,31104,31106,31108,31110,31112,31114,31116,31118,31120,31122,31124,31126,31128,31130,31132,31134,31136],{"class":639,"line":729},[637,31078,643],{"class":642},[637,31080,225],{"class":646},[637,31082,3872],{"class":650},[637,31084,657],{"class":642},[637,31086,660],{"class":642},[637,31088,31089],{"class":663},"circleRef",[637,31091,660],{"class":642},[637,31093,3029],{"class":642},[637,31095,30351],{"class":650},[637,31097,657],{"class":642},[637,31099,660],{"class":642},[637,31101,8731],{"class":683},[637,31103,1874],{"class":2501},[637,31105,687],{"class":642},[637,31107,31049],{"class":2501},[637,31109,2514],{"class":683},[637,31111,660],{"class":642},[637,31113,3029],{"class":642},[637,31115,4130],{"class":650},[637,31117,657],{"class":642},[637,31119,660],{"class":642},[637,31121,8731],{"class":683},[637,31123,965],{"class":2501},[637,31125,687],{"class":642},[637,31127,2506],{"class":2501},[637,31129,687],{"class":642},[637,31131,2506],{"class":2501},[637,31133,2514],{"class":683},[637,31135,660],{"class":642},[637,31137,669],{"class":642},[637,31139,31140],{"class":639,"line":739},[637,31141,30464],{"class":683},[637,31143,31144,31146,31148],{"class":639,"line":745},[637,31145,732],{"class":642},[637,31147,225],{"class":646},[637,31149,669],{"class":642},[1327,31151,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":31153},[31154],{"id":624,"depth":578,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":225,"description":31155},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":31160,"title":229,"body":31161,"description":31333,"extension":591,"links":592,"meta":31334,"navigation":594,"path":230,"seo":31335,"stem":231,"__hash__":31336},"docs/2.api/5.shapes/cone.md",{"type":501,"value":31162,"toc":31330},[31163,31168,31178,31184,31190,31192,31328],[608,31164,31165],{},[31166,31167],"shapes-cone",{},[614,31169,2776,31170,9468,31172,30315,31175,1146],{},[618,31171,7317],{},[618,31173,31174],{},"\u003CCone />",[618,31176,31177],{},"ConeGeometry",[626,31179,31182],{"className":31180,"code":31181,"language":30324},[30322],"args: [\n  radius: number,\n  height: number,\n  radialSegments: number,\n  heightSegments: number,\n  openEnded: boolean,\n  thetaStart: number,\n  thetaLength: number\n]\n",[618,31183,31181],{"__ignoreMap":576},[614,31185,30329,31186],{},[1140,31187,31177],{"href":31188,"rel":31189},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1144],[504,31191,15],{"id":624},[626,31193,31195],{"className":628,"code":31194,"language":633,"meta":576,"style":576},"\u003CCone :args=\"[1, 1, 8]\" color=\"orange\" />\n\n// Cone with a custom material transformations\n\u003CCone ref=\"coneRef\" :args=\"[1, 1, 8]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cone>\n",[618,31196,31197,31240,31244,31249,31316,31320],{"__ignoreMap":576},[637,31198,31199,31201,31203,31205,31207,31209,31211,31213,31215,31217,31219,31221,31224,31226,31228,31230,31232,31234,31236,31238],{"class":639,"line":577},[637,31200,643],{"class":642},[637,31202,229],{"class":646},[637,31204,3029],{"class":642},[637,31206,30351],{"class":650},[637,31208,657],{"class":642},[637,31210,660],{"class":642},[637,31212,8731],{"class":683},[637,31214,1874],{"class":2501},[637,31216,687],{"class":642},[637,31218,2561],{"class":2501},[637,31220,687],{"class":642},[637,31222,31223],{"class":2501}," 8",[637,31225,2514],{"class":683},[637,31227,660],{"class":642},[637,31229,2689],{"class":650},[637,31231,657],{"class":642},[637,31233,660],{"class":642},[637,31235,13327],{"class":663},[637,31237,660],{"class":642},[637,31239,787],{"class":642},[637,31241,31242],{"class":639,"line":578},[637,31243,742],{"emptyLinePlaceholder":594},[637,31245,31246],{"class":639,"line":708},[637,31247,31248],{"class":683},"// Cone with a custom material transformations\n",[637,31250,31251,31253,31255,31257,31259,31261,31264,31266,31268,31270,31272,31274,31276,31278,31280,31282,31284,31286,31288,31290,31292,31294,31296,31298,31300,31302,31304,31306,31308,31310,31312,31314],{"class":639,"line":729},[637,31252,643],{"class":642},[637,31254,229],{"class":646},[637,31256,3872],{"class":650},[637,31258,657],{"class":642},[637,31260,660],{"class":642},[637,31262,31263],{"class":663},"coneRef",[637,31265,660],{"class":642},[637,31267,3029],{"class":642},[637,31269,30351],{"class":650},[637,31271,657],{"class":642},[637,31273,660],{"class":642},[637,31275,8731],{"class":683},[637,31277,1874],{"class":2501},[637,31279,687],{"class":642},[637,31281,2561],{"class":2501},[637,31283,687],{"class":642},[637,31285,31223],{"class":2501},[637,31287,2514],{"class":683},[637,31289,660],{"class":642},[637,31291,3029],{"class":642},[637,31293,4130],{"class":650},[637,31295,657],{"class":642},[637,31297,660],{"class":642},[637,31299,8731],{"class":683},[637,31301,965],{"class":2501},[637,31303,687],{"class":642},[637,31305,30449],{"class":2501},[637,31307,687],{"class":642},[637,31309,2506],{"class":2501},[637,31311,2514],{"class":683},[637,31313,660],{"class":642},[637,31315,669],{"class":642},[637,31317,31318],{"class":639,"line":739},[637,31319,30464],{"class":683},[637,31321,31322,31324,31326],{"class":639,"line":745},[637,31323,732],{"class":642},[637,31325,229],{"class":646},[637,31327,669],{"class":642},[1327,31329,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":31331},[31332],{"id":624,"depth":578,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":31333},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":31338,"title":233,"body":31339,"description":31720,"extension":591,"links":592,"meta":31721,"navigation":594,"path":234,"seo":31722,"stem":235,"__hash__":31723},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":501,"value":31340,"toc":31716},[31341,31346,31355,31357,31610,31612,31621,31714],[2295,31342,31343],{},[31344,31345],"shapes-cubic-bezier-line",{},[614,31347,31348,31351,31352,31354],{},[618,31349,31350],{},"\u003CCubicBezierLine />"," renders a ",[618,31353,30515],{}," between start and end points, with additional 2 control points.",[504,31356,15],{"id":624},[626,31358,31360],{"className":628,"code":31359,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CubicBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCubicBezierLine\n      :start=\"new Vector3(-1, 0, 0)\"\n      :end=\"new Vector3(1, 0, 0)\"\n      :midA=\"new Vector3(-0.5, 1, 0)\"\n      :midB=\"new Vector3(0.5, 1, 0)\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,31361,31362,31382,31400,31419,31437,31445,31449,31457,31465,31483,31490,31504,31518,31532,31546,31558,31570,31582,31586,31594,31602],{"__ignoreMap":576},[637,31363,31364,31366,31368,31370,31372,31374,31376,31378,31380],{"class":639,"line":577},[637,31365,643],{"class":642},[637,31367,647],{"class":646},[637,31369,651],{"class":650},[637,31371,654],{"class":650},[637,31373,657],{"class":642},[637,31375,660],{"class":642},[637,31377,664],{"class":663},[637,31379,660],{"class":642},[637,31381,669],{"class":642},[637,31383,31384,31386,31388,31390,31392,31394,31396,31398],{"class":639,"line":578},[637,31385,677],{"class":676},[637,31387,680],{"class":642},[637,31389,715],{"class":683},[637,31391,693],{"class":642},[637,31393,696],{"class":676},[637,31395,699],{"class":642},[637,31397,724],{"class":663},[637,31399,705],{"class":642},[637,31401,31402,31404,31406,31409,31411,31413,31415,31417],{"class":639,"line":708},[637,31403,677],{"class":676},[637,31405,680],{"class":642},[637,31407,31408],{"class":683}," CubicBezierLine",[637,31410,693],{"class":642},[637,31412,696],{"class":676},[637,31414,699],{"class":642},[637,31416,702],{"class":663},[637,31418,705],{"class":642},[637,31420,31421,31423,31425,31427,31429,31431,31433,31435],{"class":639,"line":729},[637,31422,677],{"class":676},[637,31424,680],{"class":642},[637,31426,30597],{"class":683},[637,31428,693],{"class":642},[637,31430,696],{"class":676},[637,31432,699],{"class":642},[637,31434,4626],{"class":663},[637,31436,705],{"class":642},[637,31438,31439,31441,31443],{"class":639,"line":739},[637,31440,732],{"class":642},[637,31442,647],{"class":646},[637,31444,669],{"class":642},[637,31446,31447],{"class":639,"line":745},[637,31448,742],{"emptyLinePlaceholder":594},[637,31450,31451,31453,31455],{"class":639,"line":755},[637,31452,643],{"class":642},[637,31454,750],{"class":646},[637,31456,669],{"class":642},[637,31458,31459,31461,31463],{"class":639,"line":778},[637,31460,758],{"class":642},[637,31462,761],{"class":646},[637,31464,669],{"class":642},[637,31466,31467,31469,31471,31473,31475,31477,31479,31481],{"class":639,"line":790},[637,31468,781],{"class":642},[637,31470,784],{"class":646},[637,31472,1485],{"class":650},[637,31474,657],{"class":642},[637,31476,660],{"class":642},[637,31478,13280],{"class":663},[637,31480,660],{"class":642},[637,31482,787],{"class":642},[637,31484,31485,31487],{"class":639,"line":800},[637,31486,781],{"class":642},[637,31488,31489],{"class":646},"CubicBezierLine\n",[637,31491,31492,31495,31497,31499,31502],{"class":639,"line":805},[637,31493,31494],{"class":650},"      :start",[637,31496,657],{"class":642},[637,31498,660],{"class":642},[637,31500,31501],{"class":663},"new Vector3(-1, 0, 0)",[637,31503,3131],{"class":642},[637,31505,31506,31509,31511,31513,31516],{"class":639,"line":827},[637,31507,31508],{"class":650},"      :end",[637,31510,657],{"class":642},[637,31512,660],{"class":642},[637,31514,31515],{"class":663},"new Vector3(1, 0, 0)",[637,31517,3131],{"class":642},[637,31519,31520,31523,31525,31527,31530],{"class":639,"line":631},[637,31521,31522],{"class":650},"      :midA",[637,31524,657],{"class":642},[637,31526,660],{"class":642},[637,31528,31529],{"class":663},"new Vector3(-0.5, 1, 0)",[637,31531,3131],{"class":642},[637,31533,31534,31537,31539,31541,31544],{"class":639,"line":850},[637,31535,31536],{"class":650},"      :midB",[637,31538,657],{"class":642},[637,31540,660],{"class":642},[637,31542,31543],{"class":663},"new Vector3(0.5, 1, 0)",[637,31545,3131],{"class":642},[637,31547,31548,31550,31552,31554,31556],{"class":639,"line":861},[637,31549,30682],{"class":650},[637,31551,657],{"class":642},[637,31553,660],{"class":642},[637,31555,11376],{"class":663},[637,31557,3131],{"class":642},[637,31559,31560,31562,31564,31566,31568],{"class":639,"line":872},[637,31561,30696],{"class":650},[637,31563,657],{"class":642},[637,31565,660],{"class":642},[637,31567,13327],{"class":663},[637,31569,3131],{"class":642},[637,31571,31572,31574,31576,31578,31580],{"class":639,"line":882},[637,31573,30710],{"class":650},[637,31575,657],{"class":642},[637,31577,660],{"class":642},[637,31579,21394],{"class":663},[637,31581,3131],{"class":642},[637,31583,31584],{"class":639,"line":632},[637,31585,17274],{"class":642},[637,31587,31588,31590,31592],{"class":639,"line":902},[637,31589,781],{"class":642},[637,31591,9681],{"class":646},[637,31593,787],{"class":642},[637,31595,31596,31598,31600],{"class":639,"line":912},[637,31597,905],{"class":642},[637,31599,761],{"class":646},[637,31601,669],{"class":642},[637,31603,31604,31606,31608],{"class":639,"line":2625},[637,31605,732],{"class":642},[637,31607,750],{"class":646},[637,31609,669],{"class":642},[504,31611,922],{"id":921},[614,31613,31614,31616,31617,7219,31619,1146],{},[618,31615,31350],{}," inherits all props but ",[618,31618,30769],{},[618,31620,30515],{},[927,31622,31623,31635],{},[930,31624,31625],{},[933,31626,31627,31629,31631,31633],{},[936,31628,938],{},[936,31630,5969],{},[936,31632,941],{},[936,31634,944],{},[946,31636,31637,31653,31668,31684,31700],{},[933,31638,31639,31643,31648,31651],{},[951,31640,31641],{},[618,31642,14310],{},[951,31644,31645],{},[618,31646,31647],{},"Vector3 | [number, number, number]",[951,31649,31650],{},"Starting point",[951,31652],{},[933,31654,31655,31659,31663,31666],{},[951,31656,31657],{},[618,31658,14324],{},[951,31660,31661],{},[618,31662,31647],{},[951,31664,31665],{},"Ending point",[951,31667],{},[933,31669,31670,31675,31679,31682],{},[951,31671,31672],{},[618,31673,31674],{},"midA",[951,31676,31677],{},[618,31678,31647],{},[951,31680,31681],{},"First control point",[951,31683],{},[933,31685,31686,31691,31695,31698],{},[951,31687,31688],{},[618,31689,31690],{},"midB",[951,31692,31693],{},[618,31694,31647],{},[951,31696,31697],{},"Second control point",[951,31699],{},[933,31701,31702,31706,31710,31712],{},[951,31703,31704],{},[618,31705,30784],{},[951,31707,31708],{},[618,31709,5352],{},[951,31711,30791],{},[951,31713,30794],{},[1327,31715,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":31717},[31718,31719],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders a Line2 between start and end points with two control points.",{},{"title":233,"description":31720},"Bi4-z99FCo5x_LjzwKRj0meHtbAxC8tTMsvdiP4y5sU",{"id":31725,"title":237,"body":31726,"description":31956,"extension":591,"links":592,"meta":31957,"navigation":594,"path":238,"seo":31958,"stem":239,"__hash__":31959},"docs/2.api/5.shapes/cylinder.md",{"type":501,"value":31727,"toc":31953},[31728,31733,31743,31749,31755,31757,31950],[608,31729,31730],{},[31731,31732],"shapes-cylinder",{},[614,31734,2776,31735,9468,31737,30315,31740,1146],{},[618,31736,7317],{},[618,31738,31739],{},"\u003CCylinder />",[618,31741,31742],{},"CylinderGeometry",[626,31744,31747],{"className":31745,"code":31746,"language":30324},[30322],"args: [\n  radiusTop: number,\n  radiusBottom: number,\n  height: number,\n  radialSegments: number,\n  heightSegments: number,\n  openEnded: boolean,\n  thetaStart: number,\n  thetaLength: number\n]\n",[618,31748,31746],{"__ignoreMap":576},[614,31750,30329,31751],{},[1140,31752,31742],{"href":31753,"rel":31754},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1144],[504,31756,15],{"id":624},[626,31758,31760],{"className":628,"code":31759,"language":633,"meta":576,"style":576},"\u003CCylinder :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" color=\"orange\" />\n\n// Cylinder with a custom material transformations\n\u003CCylinder ref=\"cylinderRef\" :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cylinder>\n",[618,31761,31762,31834,31838,31843,31938,31942],{"__ignoreMap":576},[637,31763,31764,31766,31768,31770,31772,31774,31776,31778,31780,31782,31784,31786,31788,31790,31792,31794,31796,31798,31800,31802,31804,31806,31808,31810,31813,31815,31818,31820,31822,31824,31826,31828,31830,31832],{"class":639,"line":577},[637,31765,643],{"class":642},[637,31767,237],{"class":646},[637,31769,3029],{"class":642},[637,31771,30351],{"class":650},[637,31773,657],{"class":642},[637,31775,660],{"class":642},[637,31777,8731],{"class":683},[637,31779,1874],{"class":2501},[637,31781,687],{"class":642},[637,31783,2561],{"class":2501},[637,31785,687],{"class":642},[637,31787,2561],{"class":2501},[637,31789,687],{"class":642},[637,31791,31049],{"class":2501},[637,31793,687],{"class":642},[637,31795,2561],{"class":2501},[637,31797,687],{"class":642},[637,31799,6725],{"class":4397},[637,31801,687],{"class":642},[637,31803,2506],{"class":2501},[637,31805,687],{"class":642},[637,31807,8487],{"class":683},[637,31809,1146],{"class":642},[637,31811,31812],{"class":683},"PI ",[637,31814,23121],{"class":642},[637,31816,31817],{"class":2501}," 2",[637,31819,2514],{"class":683},[637,31821,660],{"class":642},[637,31823,2689],{"class":650},[637,31825,657],{"class":642},[637,31827,660],{"class":642},[637,31829,13327],{"class":663},[637,31831,660],{"class":642},[637,31833,787],{"class":642},[637,31835,31836],{"class":639,"line":578},[637,31837,742],{"emptyLinePlaceholder":594},[637,31839,31840],{"class":639,"line":708},[637,31841,31842],{"class":683},"// Cylinder with a custom material transformations\n",[637,31844,31845,31847,31849,31851,31853,31855,31858,31860,31862,31864,31866,31868,31870,31872,31874,31876,31878,31880,31882,31884,31886,31888,31890,31892,31894,31896,31898,31900,31902,31904,31906,31908,31910,31912,31914,31916,31918,31920,31922,31924,31926,31928,31930,31932,31934,31936],{"class":639,"line":729},[637,31846,643],{"class":642},[637,31848,237],{"class":646},[637,31850,3872],{"class":650},[637,31852,657],{"class":642},[637,31854,660],{"class":642},[637,31856,31857],{"class":663},"cylinderRef",[637,31859,660],{"class":642},[637,31861,3029],{"class":642},[637,31863,30351],{"class":650},[637,31865,657],{"class":642},[637,31867,660],{"class":642},[637,31869,8731],{"class":683},[637,31871,1874],{"class":2501},[637,31873,687],{"class":642},[637,31875,2561],{"class":2501},[637,31877,687],{"class":642},[637,31879,2561],{"class":2501},[637,31881,687],{"class":642},[637,31883,31049],{"class":2501},[637,31885,687],{"class":642},[637,31887,2561],{"class":2501},[637,31889,687],{"class":642},[637,31891,6725],{"class":4397},[637,31893,687],{"class":642},[637,31895,2506],{"class":2501},[637,31897,687],{"class":642},[637,31899,8487],{"class":683},[637,31901,1146],{"class":642},[637,31903,31812],{"class":683},[637,31905,23121],{"class":642},[637,31907,31817],{"class":2501},[637,31909,2514],{"class":683},[637,31911,660],{"class":642},[637,31913,3029],{"class":642},[637,31915,4130],{"class":650},[637,31917,657],{"class":642},[637,31919,660],{"class":642},[637,31921,8731],{"class":683},[637,31923,965],{"class":2501},[637,31925,687],{"class":642},[637,31927,30449],{"class":2501},[637,31929,687],{"class":642},[637,31931,2506],{"class":2501},[637,31933,2514],{"class":683},[637,31935,660],{"class":642},[637,31937,669],{"class":642},[637,31939,31940],{"class":639,"line":739},[637,31941,30464],{"class":683},[637,31943,31944,31946,31948],{"class":639,"line":745},[637,31945,732],{"class":642},[637,31947,237],{"class":646},[637,31949,669],{"class":642},[1327,31951,31952],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":31954},[31955],{"id":624,"depth":578,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":31956},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":31961,"title":241,"body":31962,"description":32125,"extension":591,"links":592,"meta":32126,"navigation":594,"path":242,"seo":32127,"stem":243,"__hash__":32128},"docs/2.api/5.shapes/dodecahedron.md",{"type":501,"value":31963,"toc":32122},[31964,31969,31979,31985,31991,31993,32120],[608,31965,31966],{},[31967,31968],"shapes-dodecahedron",{},[614,31970,2776,31971,9468,31973,30315,31976,1146],{},[618,31972,7317],{},[618,31974,31975],{},"\u003CDodecahedron />",[618,31977,31978],{},"DodecahedronGeometry",[626,31980,31983],{"className":31981,"code":31982,"language":30324},[30322],"args: [radius: number, detail: number]\n",[618,31984,31982],{"__ignoreMap":576},[614,31986,30329,31987],{},[1140,31988,31978],{"href":31989,"rel":31990},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1144],[504,31992,15],{"id":624},[626,31994,31996],{"className":628,"code":31995,"language":633,"meta":576,"style":576},"\u003CDodecahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Dodecahedron with a custom material transformations\n\u003CDodecahedron ref=\"dodecahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Dodecahedron>\n",[618,31997,31998,32036,32040,32045,32108,32112],{"__ignoreMap":576},[637,31999,32000,32002,32004,32006,32008,32010,32012,32014,32016,32018,32020,32022,32024,32026,32028,32030,32032,32034],{"class":639,"line":577},[637,32001,643],{"class":642},[637,32003,241],{"class":646},[637,32005,3029],{"class":642},[637,32007,30351],{"class":650},[637,32009,657],{"class":642},[637,32011,660],{"class":642},[637,32013,8731],{"class":683},[637,32015,1874],{"class":2501},[637,32017,687],{"class":642},[637,32019,2506],{"class":2501},[637,32021,2514],{"class":683},[637,32023,660],{"class":642},[637,32025,2689],{"class":650},[637,32027,657],{"class":642},[637,32029,660],{"class":642},[637,32031,13327],{"class":663},[637,32033,660],{"class":642},[637,32035,787],{"class":642},[637,32037,32038],{"class":639,"line":578},[637,32039,742],{"emptyLinePlaceholder":594},[637,32041,32042],{"class":639,"line":708},[637,32043,32044],{"class":683},"// Dodecahedron with a custom material transformations\n",[637,32046,32047,32049,32051,32053,32055,32057,32060,32062,32064,32066,32068,32070,32072,32074,32076,32078,32080,32082,32084,32086,32088,32090,32092,32094,32096,32098,32100,32102,32104,32106],{"class":639,"line":729},[637,32048,643],{"class":642},[637,32050,241],{"class":646},[637,32052,3872],{"class":650},[637,32054,657],{"class":642},[637,32056,660],{"class":642},[637,32058,32059],{"class":663},"dodecahedronRef",[637,32061,660],{"class":642},[637,32063,3029],{"class":642},[637,32065,30351],{"class":650},[637,32067,657],{"class":642},[637,32069,660],{"class":642},[637,32071,8731],{"class":683},[637,32073,1874],{"class":2501},[637,32075,687],{"class":642},[637,32077,2506],{"class":2501},[637,32079,2514],{"class":683},[637,32081,660],{"class":642},[637,32083,3029],{"class":642},[637,32085,4130],{"class":650},[637,32087,657],{"class":642},[637,32089,660],{"class":642},[637,32091,8731],{"class":683},[637,32093,820],{"class":2501},[637,32095,687],{"class":642},[637,32097,30449],{"class":2501},[637,32099,687],{"class":642},[637,32101,2506],{"class":2501},[637,32103,2514],{"class":683},[637,32105,660],{"class":642},[637,32107,669],{"class":642},[637,32109,32110],{"class":639,"line":739},[637,32111,30464],{"class":683},[637,32113,32114,32116,32118],{"class":639,"line":745},[637,32115,732],{"class":642},[637,32117,241],{"class":646},[637,32119,669],{"class":642},[1327,32121,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":32123},[32124],{"id":624,"depth":578,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":32125},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":32130,"title":245,"body":32131,"description":32666,"extension":591,"links":592,"meta":32667,"navigation":594,"path":246,"seo":32668,"stem":247,"__hash__":32669},"docs/2.api/5.shapes/grid.md",{"type":501,"value":32132,"toc":32662},[32133,32138,32144,32146,32476,32478,32660],[608,32134,32135],{},[32136,32137],"shapes-grid",{},[614,32139,32140,32143],{},[618,32141,32142],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[504,32145,15],{"id":624},[626,32147,32150],{"className":628,"code":32148,"highlights":32149,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Grid, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222222\">\n    \u003CTresPerspectiveCamera :position=\"[8, 10, 10]\" :fov=\"25\" />\n    \u003COrbitControls />\n    \u003CGrid\n      :args=\"[10.5, 10.5]\"\n      cell-color=\"#82dbc5\"\n      :cell-size=\"0.6\"\n      :cell-thickness=\"0.5\"\n      section-color=\"#fbb03b\"\n      :section-size=\"2\"\n      :section-thickness=\"1.3\"\n      :infinite-grid=\"true\"\n      :fade-from=\"0\"\n      :fade-distance=\"12\"\n      :fade-strength=\"1\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,800,805,827,631,850,861,872,882,632,902,912,2625],[618,32151,32152,32172,32196,32214,32222,32226,32234,32253,32284,32292,32300,32314,32328,32342,32356,32370,32384,32399,32413,32427,32442,32456,32460,32468],{"__ignoreMap":576},[637,32153,32154,32156,32158,32160,32162,32164,32166,32168,32170],{"class":639,"line":577},[637,32155,643],{"class":642},[637,32157,647],{"class":646},[637,32159,651],{"class":650},[637,32161,654],{"class":650},[637,32163,657],{"class":642},[637,32165,660],{"class":642},[637,32167,664],{"class":663},[637,32169,660],{"class":642},[637,32171,669],{"class":642},[637,32173,32175,32177,32179,32182,32184,32186,32188,32190,32192,32194],{"class":32174,"line":578},[639,673],[637,32176,677],{"class":676},[637,32178,680],{"class":642},[637,32180,32181],{"class":683}," Grid",[637,32183,687],{"class":642},[637,32185,690],{"class":683},[637,32187,693],{"class":642},[637,32189,696],{"class":676},[637,32191,699],{"class":642},[637,32193,702],{"class":663},[637,32195,705],{"class":642},[637,32197,32198,32200,32202,32204,32206,32208,32210,32212],{"class":639,"line":708},[637,32199,677],{"class":676},[637,32201,680],{"class":642},[637,32203,715],{"class":683},[637,32205,693],{"class":642},[637,32207,696],{"class":676},[637,32209,699],{"class":642},[637,32211,724],{"class":663},[637,32213,705],{"class":642},[637,32215,32216,32218,32220],{"class":639,"line":729},[637,32217,732],{"class":642},[637,32219,647],{"class":646},[637,32221,669],{"class":642},[637,32223,32224],{"class":639,"line":739},[637,32225,742],{"emptyLinePlaceholder":594},[637,32227,32228,32230,32232],{"class":639,"line":745},[637,32229,643],{"class":642},[637,32231,750],{"class":646},[637,32233,669],{"class":642},[637,32235,32236,32238,32240,32242,32244,32246,32249,32251],{"class":639,"line":755},[637,32237,758],{"class":642},[637,32239,761],{"class":646},[637,32241,764],{"class":650},[637,32243,657],{"class":642},[637,32245,660],{"class":642},[637,32247,32248],{"class":663},"#222222",[637,32250,660],{"class":642},[637,32252,669],{"class":642},[637,32254,32255,32257,32259,32261,32263,32265,32268,32270,32273,32275,32277,32280,32282],{"class":639,"line":778},[637,32256,781],{"class":642},[637,32258,784],{"class":646},[637,32260,1485],{"class":650},[637,32262,657],{"class":642},[637,32264,660],{"class":642},[637,32266,32267],{"class":663},"[8, 10, 10]",[637,32269,660],{"class":642},[637,32271,32272],{"class":650}," :fov",[637,32274,657],{"class":642},[637,32276,660],{"class":642},[637,32278,32279],{"class":663},"25",[637,32281,660],{"class":642},[637,32283,787],{"class":642},[637,32285,32286,32288,32290],{"class":639,"line":790},[637,32287,781],{"class":642},[637,32289,795],{"class":646},[637,32291,787],{"class":642},[637,32293,32295,32297],{"class":32294,"line":800},[639,673],[637,32296,781],{"class":642},[637,32298,32299],{"class":646},"Grid\n",[637,32301,32303,32305,32307,32309,32312],{"class":32302,"line":805},[639,673],[637,32304,12377],{"class":650},[637,32306,657],{"class":642},[637,32308,660],{"class":642},[637,32310,32311],{"class":663},"[10.5, 10.5]",[637,32313,3131],{"class":642},[637,32315,32317,32320,32322,32324,32326],{"class":32316,"line":827},[639,673],[637,32318,32319],{"class":650},"      cell-color",[637,32321,657],{"class":642},[637,32323,660],{"class":642},[637,32325,11456],{"class":663},[637,32327,3131],{"class":642},[637,32329,32331,32334,32336,32338,32340],{"class":32330,"line":631},[639,673],[637,32332,32333],{"class":650},"      :cell-size",[637,32335,657],{"class":642},[637,32337,660],{"class":642},[637,32339,10661],{"class":663},[637,32341,3131],{"class":642},[637,32343,32345,32348,32350,32352,32354],{"class":32344,"line":850},[639,673],[637,32346,32347],{"class":650},"      :cell-thickness",[637,32349,657],{"class":642},[637,32351,660],{"class":642},[637,32353,1946],{"class":663},[637,32355,3131],{"class":642},[637,32357,32359,32362,32364,32366,32368],{"class":32358,"line":861},[639,673],[637,32360,32361],{"class":650},"      section-color",[637,32363,657],{"class":642},[637,32365,660],{"class":642},[637,32367,10153],{"class":663},[637,32369,3131],{"class":642},[637,32371,32373,32376,32378,32380,32382],{"class":32372,"line":872},[639,673],[637,32374,32375],{"class":650},"      :section-size",[637,32377,657],{"class":642},[637,32379,660],{"class":642},[637,32381,820],{"class":663},[637,32383,3131],{"class":642},[637,32385,32387,32390,32392,32394,32397],{"class":32386,"line":882},[639,673],[637,32388,32389],{"class":650},"      :section-thickness",[637,32391,657],{"class":642},[637,32393,660],{"class":642},[637,32395,32396],{"class":663},"1.3",[637,32398,3131],{"class":642},[637,32400,32402,32405,32407,32409,32411],{"class":32401,"line":632},[639,673],[637,32403,32404],{"class":650},"      :infinite-grid",[637,32406,657],{"class":642},[637,32408,660],{"class":642},[637,32410,961],{"class":663},[637,32412,3131],{"class":642},[637,32414,32416,32419,32421,32423,32425],{"class":32415,"line":902},[639,673],[637,32417,32418],{"class":650},"      :fade-from",[637,32420,657],{"class":642},[637,32422,660],{"class":642},[637,32424,965],{"class":663},[637,32426,3131],{"class":642},[637,32428,32430,32433,32435,32437,32440],{"class":32429,"line":912},[639,673],[637,32431,32432],{"class":650},"      :fade-distance",[637,32434,657],{"class":642},[637,32436,660],{"class":642},[637,32438,32439],{"class":663},"12",[637,32441,3131],{"class":642},[637,32443,32445,32448,32450,32452,32454],{"class":32444,"line":2625},[639,673],[637,32446,32447],{"class":650},"      :fade-strength",[637,32449,657],{"class":642},[637,32451,660],{"class":642},[637,32453,1874],{"class":663},[637,32455,3131],{"class":642},[637,32457,32458],{"class":639,"line":2634},[637,32459,17274],{"class":642},[637,32461,32462,32464,32466],{"class":639,"line":2654},[637,32463,905],{"class":642},[637,32465,761],{"class":646},[637,32467,669],{"class":642},[637,32469,32470,32472,32474],{"class":639,"line":2663},[637,32471,732],{"class":642},[637,32473,750],{"class":646},[637,32475,669],{"class":642},[504,32477,922],{"id":921},[927,32479,32480,32490],{},[930,32481,32482],{},[933,32483,32484,32486,32488],{},[936,32485,938],{"align":997},[936,32487,941],{"align":997},[936,32489,944],{},[946,32491,32492,32506,32520,32534,32548,32562,32576,32590,32604,32618,32632,32646],{},[933,32493,32494,32499,32502],{},[951,32495,32496],{"align":997},[1669,32497,32498],{},"cellSize",[951,32500,32501],{"align":997},"Cell size",[951,32503,32504],{},[618,32505,1946],{},[933,32507,32508,32513,32516],{},[951,32509,32510],{"align":997},[1669,32511,32512],{},"cellThickness",[951,32514,32515],{"align":997},"Thickness of cell lines",[951,32517,32518],{},[618,32519,1946],{},[933,32521,32522,32527,32530],{},[951,32523,32524],{"align":997},[1669,32525,32526],{},"cellColor",[951,32528,32529],{"align":997},"Color of cell lines",[951,32531,32532],{},[618,32533,11594],{},[933,32535,32536,32541,32544],{},[951,32537,32538],{"align":997},[1669,32539,32540],{},"sectionSize",[951,32542,32543],{"align":997},"Section size",[951,32545,32546],{},[618,32547,1874],{},[933,32549,32550,32555,32558],{},[951,32551,32552],{"align":997},[1669,32553,32554],{},"sectionThickness",[951,32556,32557],{"align":997},"Thickness of section lines",[951,32559,32560],{},[618,32561,1874],{},[933,32563,32564,32569,32571],{},[951,32565,32566],{"align":997},[1669,32567,32568],{},"sectionColor",[951,32570,32529],{"align":997},[951,32572,32573],{},[618,32574,32575],{},"'blue'",[933,32577,32578,32583,32586],{},[951,32579,32580],{"align":997},[1669,32581,32582],{},"followCamera",[951,32584,32585],{"align":997},"Whether to follow camera",[951,32587,32588],{},[618,32589,971],{},[933,32591,32592,32597,32600],{},[951,32593,32594],{"align":997},[1669,32595,32596],{},"infiniteGrid",[951,32598,32599],{"align":997},"Whether to display an infinite grid",[951,32601,32602],{},[618,32603,971],{},[933,32605,32606,32611,32614],{},[951,32607,32608],{"align":997},[1669,32609,32610],{},"fadeDistance",[951,32612,32613],{"align":997},"Fade distance",[951,32615,32616],{},[618,32617,11169],{},[933,32619,32620,32625,32628],{},[951,32621,32622],{"align":997},[1669,32623,32624],{},"fadeStrength",[951,32626,32627],{"align":997},"Fade strength",[951,32629,32630],{},[618,32631,1874],{},[933,32633,32634,32639,32642],{},[951,32635,32636],{"align":997},[1669,32637,32638],{},"fadeFrom",[951,32640,32641],{"align":997},"Fade from camera (1) or origin (0) or in between",[951,32643,32644],{},[618,32645,1874],{},[933,32647,32648,32652,32655],{},[951,32649,32650],{"align":997},[1669,32651,27394],{},[951,32653,32654],{"align":997},"Material side",[951,32656,32657],{},[618,32658,32659],{},"THREE.BackSide",[1327,32661,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":32663},[32664,32665],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Shader-based grid plane with customizable cell and section lines.",{},{"title":245,"description":32666},"gUhcCJXpeIhlg4aOnkCR0HsAX8-yKo0ddjfKc6h8BKY",{"id":32671,"title":249,"body":32672,"description":32834,"extension":591,"links":592,"meta":32835,"navigation":594,"path":250,"seo":32836,"stem":251,"__hash__":32837},"docs/2.api/5.shapes/icosahedron.md",{"type":501,"value":32673,"toc":32831},[32674,32679,32689,32694,32700,32702,32829],[608,32675,32676],{},[32677,32678],"shapes-icosahedron",{},[614,32680,2776,32681,9468,32683,30315,32686,1146],{},[618,32682,7317],{},[618,32684,32685],{},"\u003CIcosahedron />",[618,32687,32688],{},"IcosahedronGeometry",[626,32690,32692],{"className":32691,"code":31982,"language":30324},[30322],[618,32693,31982],{"__ignoreMap":576},[614,32695,30329,32696],{},[1140,32697,32688],{"href":32698,"rel":32699},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1144],[504,32701,15],{"id":624},[626,32703,32705],{"className":628,"code":32704,"language":633,"meta":576,"style":576},"\u003CIcosahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Icosahedron with a custom material transformations\n\u003CIcosahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Icosahedron>\n",[618,32706,32707,32745,32749,32754,32817,32821],{"__ignoreMap":576},[637,32708,32709,32711,32713,32715,32717,32719,32721,32723,32725,32727,32729,32731,32733,32735,32737,32739,32741,32743],{"class":639,"line":577},[637,32710,643],{"class":642},[637,32712,249],{"class":646},[637,32714,3029],{"class":642},[637,32716,30351],{"class":650},[637,32718,657],{"class":642},[637,32720,660],{"class":642},[637,32722,8731],{"class":683},[637,32724,1874],{"class":2501},[637,32726,687],{"class":642},[637,32728,2506],{"class":2501},[637,32730,2514],{"class":683},[637,32732,660],{"class":642},[637,32734,2689],{"class":650},[637,32736,657],{"class":642},[637,32738,660],{"class":642},[637,32740,13327],{"class":663},[637,32742,660],{"class":642},[637,32744,787],{"class":642},[637,32746,32747],{"class":639,"line":578},[637,32748,742],{"emptyLinePlaceholder":594},[637,32750,32751],{"class":639,"line":708},[637,32752,32753],{"class":683},"// Icosahedron with a custom material transformations\n",[637,32755,32756,32758,32760,32762,32764,32766,32769,32771,32773,32775,32777,32779,32781,32783,32785,32787,32789,32791,32793,32795,32797,32799,32801,32803,32805,32807,32809,32811,32813,32815],{"class":639,"line":729},[637,32757,643],{"class":642},[637,32759,249],{"class":646},[637,32761,3872],{"class":650},[637,32763,657],{"class":642},[637,32765,660],{"class":642},[637,32767,32768],{"class":663},"icosahedronRef",[637,32770,660],{"class":642},[637,32772,3029],{"class":642},[637,32774,30351],{"class":650},[637,32776,657],{"class":642},[637,32778,660],{"class":642},[637,32780,8731],{"class":683},[637,32782,1874],{"class":2501},[637,32784,687],{"class":642},[637,32786,2506],{"class":2501},[637,32788,2514],{"class":683},[637,32790,660],{"class":642},[637,32792,3029],{"class":642},[637,32794,4130],{"class":650},[637,32796,657],{"class":642},[637,32798,660],{"class":642},[637,32800,8731],{"class":683},[637,32802,820],{"class":2501},[637,32804,687],{"class":642},[637,32806,30449],{"class":2501},[637,32808,687],{"class":642},[637,32810,2506],{"class":2501},[637,32812,2514],{"class":683},[637,32814,660],{"class":642},[637,32816,669],{"class":642},[637,32818,32819],{"class":639,"line":739},[637,32820,30464],{"class":683},[637,32822,32823,32825,32827],{"class":639,"line":745},[637,32824,732],{"class":642},[637,32826,249],{"class":646},[637,32828,669],{"class":642},[1327,32830,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":32832},[32833],{"id":624,"depth":578,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":32834},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":32839,"title":253,"body":32840,"description":33432,"extension":591,"links":592,"meta":33433,"navigation":594,"path":254,"seo":33434,"stem":255,"__hash__":33435},"docs/2.api/5.shapes/line2.md",{"type":501,"value":32841,"toc":33426},[32842,32847,32860,32862,33049,33051,33202,33205,33208,33213,33220,33283,33288,33420,33423],[2295,32843,32844],{},[32845,32846],"shapes-line2",{},[614,32848,2776,32849,9468,32851,32853,32854,1146],{},[618,32850,7317],{},[618,32852,30515],{}," component for creating 3-D lines. It wraps ",[1140,32855,30509,32858],{"href":32856,"rel":32857},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1144],[618,32859,253],{},[504,32861,15],{"id":624},[626,32863,32866],{"className":628,"code":32864,"highlights":32865,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Line2 } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CLine2\n      :points=\"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,778,790,800,805,827],[618,32867,32868,32888,32906,32926,32934,32938,32946,32954,32973,32981,32995,33008,33021,33025,33033,33041],{"__ignoreMap":576},[637,32869,32870,32872,32874,32876,32878,32880,32882,32884,32886],{"class":639,"line":577},[637,32871,643],{"class":642},[637,32873,647],{"class":646},[637,32875,651],{"class":650},[637,32877,654],{"class":650},[637,32879,657],{"class":642},[637,32881,660],{"class":642},[637,32883,664],{"class":663},[637,32885,660],{"class":642},[637,32887,669],{"class":642},[637,32889,32890,32892,32894,32896,32898,32900,32902,32904],{"class":639,"line":578},[637,32891,677],{"class":676},[637,32893,680],{"class":642},[637,32895,715],{"class":683},[637,32897,693],{"class":642},[637,32899,696],{"class":676},[637,32901,699],{"class":642},[637,32903,724],{"class":663},[637,32905,705],{"class":642},[637,32907,32909,32911,32913,32916,32918,32920,32922,32924],{"class":32908,"line":708},[639,673],[637,32910,677],{"class":676},[637,32912,680],{"class":642},[637,32914,32915],{"class":683}," Line2",[637,32917,693],{"class":642},[637,32919,696],{"class":676},[637,32921,699],{"class":642},[637,32923,702],{"class":663},[637,32925,705],{"class":642},[637,32927,32928,32930,32932],{"class":639,"line":729},[637,32929,732],{"class":642},[637,32931,647],{"class":646},[637,32933,669],{"class":642},[637,32935,32936],{"class":639,"line":739},[637,32937,742],{"emptyLinePlaceholder":594},[637,32939,32940,32942,32944],{"class":639,"line":745},[637,32941,643],{"class":642},[637,32943,750],{"class":646},[637,32945,669],{"class":642},[637,32947,32948,32950,32952],{"class":639,"line":755},[637,32949,758],{"class":642},[637,32951,761],{"class":646},[637,32953,669],{"class":642},[637,32955,32957,32959,32961,32963,32965,32967,32969,32971],{"class":32956,"line":778},[639,673],[637,32958,781],{"class":642},[637,32960,784],{"class":646},[637,32962,1485],{"class":650},[637,32964,657],{"class":642},[637,32966,660],{"class":642},[637,32968,13280],{"class":663},[637,32970,660],{"class":642},[637,32972,787],{"class":642},[637,32974,32976,32978],{"class":32975,"line":790},[639,673],[637,32977,781],{"class":642},[637,32979,32980],{"class":646},"Line2\n",[637,32982,32984,32986,32988,32990,32993],{"class":32983,"line":800},[639,673],[637,32985,30667],{"class":650},[637,32987,657],{"class":642},[637,32989,660],{"class":642},[637,32991,32992],{"class":663},"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]",[637,32994,3131],{"class":642},[637,32996,32998,33000,33002,33004,33006],{"class":32997,"line":805},[639,673],[637,32999,30696],{"class":650},[637,33001,657],{"class":642},[637,33003,660],{"class":642},[637,33005,13327],{"class":663},[637,33007,3131],{"class":642},[637,33009,33011,33013,33015,33017,33019],{"class":33010,"line":827},[639,673],[637,33012,30710],{"class":650},[637,33014,657],{"class":642},[637,33016,660],{"class":642},[637,33018,21394],{"class":663},[637,33020,3131],{"class":642},[637,33022,33023],{"class":639,"line":631},[637,33024,17274],{"class":642},[637,33026,33027,33029,33031],{"class":639,"line":850},[637,33028,781],{"class":642},[637,33030,9681],{"class":646},[637,33032,787],{"class":642},[637,33034,33035,33037,33039],{"class":639,"line":861},[637,33036,905],{"class":642},[637,33038,761],{"class":646},[637,33040,669],{"class":642},[637,33042,33043,33045,33047],{"class":639,"line":872},[637,33044,732],{"class":642},[637,33046,750],{"class":646},[637,33048,669],{"class":642},[504,33050,922],{"id":921},[927,33052,33053,33065],{},[930,33054,33055],{},[933,33056,33057,33059,33061,33063],{},[936,33058,938],{},[936,33060,5969],{},[936,33062,941],{},[936,33064,944],{},[946,33066,33067,33082,33094,33106,33118,33130,33142,33154,33166,33178,33190],{},[933,33068,33069,33071,33077,33080],{},[951,33070,30769],{},[951,33072,33073],{},[1140,33074,33076],{"href":33075},"#points","See below",[951,33078,33079],{},"Points representing the line",[951,33081],{},[933,33083,33084,33086,33090,33092],{},[951,33085,30843],{},[951,33087,33088],{},[618,33089,30848],{},[951,33091,30851],{},[951,33093,3656],{},[933,33095,33096,33098,33102,33104],{},[951,33097,7547],{},[951,33099,33100],{},[618,33101,7562],{},[951,33103,30864],{},[951,33105,30867],{},[933,33107,33108,33110,33114,33116],{},[951,33109,30872],{},[951,33111,33112],{},[618,33113,5352],{},[951,33115,30879],{},[951,33117,1874],{},[933,33119,33120,33122,33126,33128],{},[951,33121,27993],{},[951,33123,33124],{},[618,33125,17564],{},[951,33127,30892],{},[951,33129,971],{},[933,33131,33132,33134,33138,33140],{},[951,33133,30899],{},[951,33135,33136],{},[618,33137,17564],{},[951,33139,30906],{},[951,33141,971],{},[933,33143,33144,33146,33150,33152],{},[951,33145,30913],{},[951,33147,33148],{},[618,33149,17564],{},[951,33151,30920],{},[951,33153,971],{},[933,33155,33156,33158,33162,33164],{},[951,33157,30927],{},[951,33159,33160],{},[618,33161,5352],{},[951,33163,30934],{},[951,33165,1874],{},[933,33167,33168,33170,33174,33176],{},[951,33169,30941],{},[951,33171,33172],{},[618,33173,5352],{},[951,33175,30948],{},[951,33177,1874],{},[933,33179,33180,33182,33186,33188],{},[951,33181,30955],{},[951,33183,33184],{},[618,33185,5352],{},[951,33187,30962],{},[951,33189,1874],{},[933,33191,33192,33194,33198,33200],{},[951,33193,30969],{},[951,33195,33196],{},[618,33197,5352],{},[951,33199,30976],{},[951,33201,965],{},[4051,33203,33204],{"id":30769},"Points",[614,33206,33207],{},"The points prop has the following type:",[614,33209,33210],{},[618,33211,33212],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[614,33214,33215,33216,33219],{},"The passed array is converted to ",[618,33217,33218],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[927,33221,33222,33232],{},[930,33223,33224],{},[933,33225,33226,33229],{},[936,33227,33228],{},"Entry type",[936,33230,33231],{},"Interpretation",[946,33233,33234,33243,33255,33265,33274],{},[933,33235,33236,33240],{},[951,33237,33238],{},[618,33239,8140],{},[951,33241,33242],{},"Insert the vector's x, y, z into the result array",[933,33244,33245,33252],{},[951,33246,33247],{},[33248,33249,33250],"nobr",{},[618,33251,8137],{},[951,33253,33254],{},"Insert the array values into the result array",[933,33256,33257,33262],{},[951,33258,33259],{},[618,33260,33261],{},"Vector2",[951,33263,33264],{},"Insert the vector's x, y, then 0 into the result array",[933,33266,33267,33271],{},[951,33268,33269],{},[618,33270,28840],{},[951,33272,33273],{},"Insert the array values, then 0 into the result array",[933,33275,33276,33280],{},[951,33277,33278],{},[618,33279,5352],{},[951,33281,33282],{},"Insert the number into the result array",[3199,33284,33285],{},[614,33286,33287],{},"If you pass bare numbers in the points array, ensure that you pass triplets – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.",[626,33289,33291],{"className":628,"code":33290,"language":633,"meta":576,"style":576},"\u003C!-- Wrong -->\n\u003CLine2 :points=\"[[1,1], 2, 2, [3,3]]\" />\n\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n\n\u003C!-- Right -->\n\u003CLine2 :points=\"[[1, 1], 2, 2, 0, [3, 3]]\" />\n\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[618,33292,33293,33298,33348,33353,33357,33362,33415],{"__ignoreMap":576},[637,33294,33295],{"class":639,"line":577},[637,33296,33297],{"class":1209},"\u003C!-- Wrong -->\n",[637,33299,33300,33302,33304,33306,33308,33310,33312,33315,33317,33319,33321,33323,33325,33327,33329,33331,33333,33335,33337,33339,33341,33344,33346],{"class":639,"line":578},[637,33301,643],{"class":642},[637,33303,253],{"class":646},[637,33305,3029],{"class":642},[637,33307,30769],{"class":650},[637,33309,657],{"class":642},[637,33311,660],{"class":642},[637,33313,33314],{"class":683},"[[",[637,33316,1874],{"class":2501},[637,33318,687],{"class":642},[637,33320,1874],{"class":2501},[637,33322,2514],{"class":683},[637,33324,687],{"class":642},[637,33326,31817],{"class":2501},[637,33328,687],{"class":642},[637,33330,31817],{"class":2501},[637,33332,687],{"class":642},[637,33334,2498],{"class":683},[637,33336,21394],{"class":2501},[637,33338,687],{"class":642},[637,33340,21394],{"class":2501},[637,33342,33343],{"class":683},"]]",[637,33345,660],{"class":642},[637,33347,787],{"class":642},[637,33349,33350],{"class":639,"line":708},[637,33351,33352],{"class":1209},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[637,33354,33355],{"class":639,"line":729},[637,33356,742],{"emptyLinePlaceholder":594},[637,33358,33359],{"class":639,"line":739},[637,33360,33361],{"class":1209},"\u003C!-- Right -->\n",[637,33363,33364,33366,33368,33370,33372,33374,33376,33378,33380,33382,33384,33386,33388,33390,33392,33394,33396,33398,33400,33402,33404,33406,33409,33411,33413],{"class":639,"line":745},[637,33365,643],{"class":642},[637,33367,253],{"class":646},[637,33369,3029],{"class":642},[637,33371,30769],{"class":650},[637,33373,657],{"class":642},[637,33375,660],{"class":642},[637,33377,33314],{"class":683},[637,33379,1874],{"class":2501},[637,33381,687],{"class":642},[637,33383,2561],{"class":2501},[637,33385,2514],{"class":683},[637,33387,687],{"class":642},[637,33389,31817],{"class":2501},[637,33391,687],{"class":642},[637,33393,31817],{"class":2501},[637,33395,687],{"class":642},[637,33397,2506],{"class":2501},[637,33399,687],{"class":642},[637,33401,2498],{"class":683},[637,33403,21394],{"class":2501},[637,33405,687],{"class":642},[637,33407,33408],{"class":2501}," 3",[637,33410,33343],{"class":683},[637,33412,660],{"class":642},[637,33414,787],{"class":642},[637,33416,33417],{"class":639,"line":755},[637,33418,33419],{"class":1209},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[614,33421,33422],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1327,33424,33425],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":33427},[33428,33429],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":33430},[33431],{"id":30769,"depth":708,"text":33204},"Component for creating 3D lines using Three.js's Line2.",{},{"title":253,"description":33432},"3_PA8PNLJqkUe1WxI0VGct3uJ9JTkMiGeSxC7ZRsjNc",{"id":33437,"title":257,"body":33438,"description":33599,"extension":591,"links":592,"meta":33600,"navigation":594,"path":258,"seo":33601,"stem":259,"__hash__":33602},"docs/2.api/5.shapes/octahedron.md",{"type":501,"value":33439,"toc":33596},[33440,33445,33455,33460,33466,33468,33594],[608,33441,33442],{},[33443,33444],"shapes-octahedron",{},[614,33446,2776,33447,9468,33449,30315,33452,1146],{},[618,33448,7317],{},[618,33450,33451],{},"\u003COctahedron />",[618,33453,33454],{},"OctahedronGeometry",[626,33456,33458],{"className":33457,"code":31982,"language":30324},[30322],[618,33459,31982],{"__ignoreMap":576},[614,33461,30329,33462],{},[1140,33463,33454],{"href":33464,"rel":33465},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1144],[504,33467,15],{"id":624},[626,33469,33471],{"className":628,"code":33470,"language":633,"meta":576,"style":576},"\u003COctahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Octahedron with a custom material transformations\n\u003COctahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Octahedron>\n",[618,33472,33473,33511,33515,33520,33582,33586],{"__ignoreMap":576},[637,33474,33475,33477,33479,33481,33483,33485,33487,33489,33491,33493,33495,33497,33499,33501,33503,33505,33507,33509],{"class":639,"line":577},[637,33476,643],{"class":642},[637,33478,257],{"class":646},[637,33480,3029],{"class":642},[637,33482,30351],{"class":650},[637,33484,657],{"class":642},[637,33486,660],{"class":642},[637,33488,8731],{"class":683},[637,33490,1874],{"class":2501},[637,33492,687],{"class":642},[637,33494,2506],{"class":2501},[637,33496,2514],{"class":683},[637,33498,660],{"class":642},[637,33500,2689],{"class":650},[637,33502,657],{"class":642},[637,33504,660],{"class":642},[637,33506,13327],{"class":663},[637,33508,660],{"class":642},[637,33510,787],{"class":642},[637,33512,33513],{"class":639,"line":578},[637,33514,742],{"emptyLinePlaceholder":594},[637,33516,33517],{"class":639,"line":708},[637,33518,33519],{"class":683},"// Octahedron with a custom material transformations\n",[637,33521,33522,33524,33526,33528,33530,33532,33534,33536,33538,33540,33542,33544,33546,33548,33550,33552,33554,33556,33558,33560,33562,33564,33566,33568,33570,33572,33574,33576,33578,33580],{"class":639,"line":729},[637,33523,643],{"class":642},[637,33525,257],{"class":646},[637,33527,3872],{"class":650},[637,33529,657],{"class":642},[637,33531,660],{"class":642},[637,33533,32768],{"class":663},[637,33535,660],{"class":642},[637,33537,3029],{"class":642},[637,33539,30351],{"class":650},[637,33541,657],{"class":642},[637,33543,660],{"class":642},[637,33545,8731],{"class":683},[637,33547,1874],{"class":2501},[637,33549,687],{"class":642},[637,33551,2506],{"class":2501},[637,33553,2514],{"class":683},[637,33555,660],{"class":642},[637,33557,3029],{"class":642},[637,33559,4130],{"class":650},[637,33561,657],{"class":642},[637,33563,660],{"class":642},[637,33565,8731],{"class":683},[637,33567,820],{"class":2501},[637,33569,687],{"class":642},[637,33571,30449],{"class":2501},[637,33573,687],{"class":642},[637,33575,2506],{"class":2501},[637,33577,2514],{"class":683},[637,33579,660],{"class":642},[637,33581,669],{"class":642},[637,33583,33584],{"class":639,"line":739},[637,33585,30464],{"class":683},[637,33587,33588,33590,33592],{"class":639,"line":745},[637,33589,732],{"class":642},[637,33591,257],{"class":646},[637,33593,669],{"class":642},[1327,33595,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":33597},[33598],{"id":624,"depth":578,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":257,"description":33599},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":33604,"title":261,"body":33605,"description":33774,"extension":591,"links":592,"meta":33775,"navigation":594,"path":262,"seo":33776,"stem":263,"__hash__":33777},"docs/2.api/5.shapes/plane.md",{"type":501,"value":33606,"toc":33771},[33607,33612,33622,33628,33634,33639,33641,33769],[608,33608,33609],{},[33610,33611],"shapes-plane",{},[614,33613,2776,33614,9468,33616,30315,33619,1146],{},[618,33615,7317],{},[618,33617,33618],{},"\u003CPlane />",[618,33620,33621],{},"PlaneGeometry",[626,33623,33626],{"className":33624,"code":33625,"language":30324},[30322],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[618,33627,33625],{"__ignoreMap":576},[614,33629,30329,33630],{},[1140,33631,33621],{"href":33632,"rel":33633},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1144],[2005,33635,33636],{},[614,33637,33638],{},"A convenient default rotation is applied to the x-axis of the plane (-Math.PI / 2), so that it is facing up (along the Y axis).",[504,33640,15],{"id":624},[626,33642,33644],{"className":628,"code":33643,"language":633,"meta":576,"style":576},"\u003CPlane :args=\"[1, 1]\" color=\"orange\" />\n\n// Plane with a custom material transformations\n\u003CPlane ref=\"planeRef\" :args=\"[8, 8]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Plane>\n",[618,33645,33646,33684,33688,33693,33757,33761],{"__ignoreMap":576},[637,33647,33648,33650,33652,33654,33656,33658,33660,33662,33664,33666,33668,33670,33672,33674,33676,33678,33680,33682],{"class":639,"line":577},[637,33649,643],{"class":642},[637,33651,261],{"class":646},[637,33653,3029],{"class":642},[637,33655,30351],{"class":650},[637,33657,657],{"class":642},[637,33659,660],{"class":642},[637,33661,8731],{"class":683},[637,33663,1874],{"class":2501},[637,33665,687],{"class":642},[637,33667,2561],{"class":2501},[637,33669,2514],{"class":683},[637,33671,660],{"class":642},[637,33673,2689],{"class":650},[637,33675,657],{"class":642},[637,33677,660],{"class":642},[637,33679,13327],{"class":663},[637,33681,660],{"class":642},[637,33683,787],{"class":642},[637,33685,33686],{"class":639,"line":578},[637,33687,742],{"emptyLinePlaceholder":594},[637,33689,33690],{"class":639,"line":708},[637,33691,33692],{"class":683},"// Plane with a custom material transformations\n",[637,33694,33695,33697,33699,33701,33703,33705,33708,33710,33712,33714,33716,33718,33720,33723,33725,33727,33729,33731,33733,33735,33737,33739,33741,33743,33745,33747,33749,33751,33753,33755],{"class":639,"line":729},[637,33696,643],{"class":642},[637,33698,261],{"class":646},[637,33700,3872],{"class":650},[637,33702,657],{"class":642},[637,33704,660],{"class":642},[637,33706,33707],{"class":663},"planeRef",[637,33709,660],{"class":642},[637,33711,3029],{"class":642},[637,33713,30351],{"class":650},[637,33715,657],{"class":642},[637,33717,660],{"class":642},[637,33719,8731],{"class":683},[637,33721,33722],{"class":2501},"8",[637,33724,687],{"class":642},[637,33726,31223],{"class":2501},[637,33728,2514],{"class":683},[637,33730,660],{"class":642},[637,33732,3029],{"class":642},[637,33734,4130],{"class":650},[637,33736,657],{"class":642},[637,33738,660],{"class":642},[637,33740,8731],{"class":683},[637,33742,965],{"class":2501},[637,33744,687],{"class":642},[637,33746,30449],{"class":2501},[637,33748,687],{"class":642},[637,33750,2506],{"class":2501},[637,33752,2514],{"class":683},[637,33754,660],{"class":642},[637,33756,669],{"class":642},[637,33758,33759],{"class":639,"line":739},[637,33760,30464],{"class":683},[637,33762,33763,33765,33767],{"class":639,"line":745},[637,33764,732],{"class":642},[637,33766,261],{"class":646},[637,33768,669],{"class":642},[1327,33770,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":33772},[33773],{"id":624,"depth":578,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":33774},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":33779,"title":265,"body":33780,"description":34134,"extension":591,"links":592,"meta":34135,"navigation":594,"path":266,"seo":34136,"stem":267,"__hash__":34137},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":501,"value":33781,"toc":34130},[33782,33787,33795,33797,34032,34034,34042,34128],[2295,33783,33784],{},[33785,33786],"shapes-quadratic-bezier-line",{},[614,33788,33789,31351,33792,33794],{},[618,33790,33791],{},"\u003CQuadraticBezierLine />",[618,33793,30515],{}," between start and end points, with an optional control point.",[504,33796,15],{"id":624},[626,33798,33800],{"className":628,"code":33799,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { QuadraticBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CQuadraticBezierLine\n      :start=\"new Vector3(-1, 0, 0)\"\n      :end=\"new Vector3(1, 0, 0)\"\n      :mid=\"new Vector3(0, 1, 0)\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,33801,33802,33822,33840,33859,33877,33885,33889,33897,33905,33923,33930,33942,33954,33968,33980,33992,34004,34008,34016,34024],{"__ignoreMap":576},[637,33803,33804,33806,33808,33810,33812,33814,33816,33818,33820],{"class":639,"line":577},[637,33805,643],{"class":642},[637,33807,647],{"class":646},[637,33809,651],{"class":650},[637,33811,654],{"class":650},[637,33813,657],{"class":642},[637,33815,660],{"class":642},[637,33817,664],{"class":663},[637,33819,660],{"class":642},[637,33821,669],{"class":642},[637,33823,33824,33826,33828,33830,33832,33834,33836,33838],{"class":639,"line":578},[637,33825,677],{"class":676},[637,33827,680],{"class":642},[637,33829,715],{"class":683},[637,33831,693],{"class":642},[637,33833,696],{"class":676},[637,33835,699],{"class":642},[637,33837,724],{"class":663},[637,33839,705],{"class":642},[637,33841,33842,33844,33846,33849,33851,33853,33855,33857],{"class":639,"line":708},[637,33843,677],{"class":676},[637,33845,680],{"class":642},[637,33847,33848],{"class":683}," QuadraticBezierLine",[637,33850,693],{"class":642},[637,33852,696],{"class":676},[637,33854,699],{"class":642},[637,33856,702],{"class":663},[637,33858,705],{"class":642},[637,33860,33861,33863,33865,33867,33869,33871,33873,33875],{"class":639,"line":729},[637,33862,677],{"class":676},[637,33864,680],{"class":642},[637,33866,30597],{"class":683},[637,33868,693],{"class":642},[637,33870,696],{"class":676},[637,33872,699],{"class":642},[637,33874,4626],{"class":663},[637,33876,705],{"class":642},[637,33878,33879,33881,33883],{"class":639,"line":739},[637,33880,732],{"class":642},[637,33882,647],{"class":646},[637,33884,669],{"class":642},[637,33886,33887],{"class":639,"line":745},[637,33888,742],{"emptyLinePlaceholder":594},[637,33890,33891,33893,33895],{"class":639,"line":755},[637,33892,643],{"class":642},[637,33894,750],{"class":646},[637,33896,669],{"class":642},[637,33898,33899,33901,33903],{"class":639,"line":778},[637,33900,758],{"class":642},[637,33902,761],{"class":646},[637,33904,669],{"class":642},[637,33906,33907,33909,33911,33913,33915,33917,33919,33921],{"class":639,"line":790},[637,33908,781],{"class":642},[637,33910,784],{"class":646},[637,33912,1485],{"class":650},[637,33914,657],{"class":642},[637,33916,660],{"class":642},[637,33918,13280],{"class":663},[637,33920,660],{"class":642},[637,33922,787],{"class":642},[637,33924,33925,33927],{"class":639,"line":800},[637,33926,781],{"class":642},[637,33928,33929],{"class":646},"QuadraticBezierLine\n",[637,33931,33932,33934,33936,33938,33940],{"class":639,"line":805},[637,33933,31494],{"class":650},[637,33935,657],{"class":642},[637,33937,660],{"class":642},[637,33939,31501],{"class":663},[637,33941,3131],{"class":642},[637,33943,33944,33946,33948,33950,33952],{"class":639,"line":827},[637,33945,31508],{"class":650},[637,33947,657],{"class":642},[637,33949,660],{"class":642},[637,33951,31515],{"class":663},[637,33953,3131],{"class":642},[637,33955,33956,33959,33961,33963,33966],{"class":639,"line":631},[637,33957,33958],{"class":650},"      :mid",[637,33960,657],{"class":642},[637,33962,660],{"class":642},[637,33964,33965],{"class":663},"new Vector3(0, 1, 0)",[637,33967,3131],{"class":642},[637,33969,33970,33972,33974,33976,33978],{"class":639,"line":850},[637,33971,30682],{"class":650},[637,33973,657],{"class":642},[637,33975,660],{"class":642},[637,33977,11376],{"class":663},[637,33979,3131],{"class":642},[637,33981,33982,33984,33986,33988,33990],{"class":639,"line":861},[637,33983,30696],{"class":650},[637,33985,657],{"class":642},[637,33987,660],{"class":642},[637,33989,13327],{"class":663},[637,33991,3131],{"class":642},[637,33993,33994,33996,33998,34000,34002],{"class":639,"line":872},[637,33995,30710],{"class":650},[637,33997,657],{"class":642},[637,33999,660],{"class":642},[637,34001,21394],{"class":663},[637,34003,3131],{"class":642},[637,34005,34006],{"class":639,"line":882},[637,34007,17274],{"class":642},[637,34009,34010,34012,34014],{"class":639,"line":632},[637,34011,781],{"class":642},[637,34013,9681],{"class":646},[637,34015,787],{"class":642},[637,34017,34018,34020,34022],{"class":639,"line":902},[637,34019,905],{"class":642},[637,34021,761],{"class":646},[637,34023,669],{"class":642},[637,34025,34026,34028,34030],{"class":639,"line":912},[637,34027,732],{"class":642},[637,34029,750],{"class":646},[637,34031,669],{"class":642},[504,34033,922],{"id":921},[614,34035,34036,31616,34038,7219,34040,1146],{},[618,34037,33791],{},[618,34039,30769],{},[618,34041,30515],{},[927,34043,34044,34058],{},[930,34045,34046],{},[933,34047,34048,34050,34052,34054,34056],{},[936,34049,938],{},[936,34051,5969],{},[936,34053,941],{},[936,34055,944],{},[936,34057,18588],{},[946,34059,34060,34077,34093,34112],{},[933,34061,34062,34066,34070,34072,34074],{},[951,34063,34064],{},[618,34065,14310],{},[951,34067,34068],{},[618,34069,31647],{},[951,34071,31650],{},[951,34073],{},[951,34075,34076],{},"yes",[933,34078,34079,34083,34087,34089,34091],{},[951,34080,34081],{},[618,34082,14324],{},[951,34084,34085],{},[618,34086,31647],{},[951,34088,31665],{},[951,34090],{},[951,34092,34076],{},[933,34094,34095,34100,34104,34107,34109],{},[951,34096,34097],{},[618,34098,34099],{},"mid",[951,34101,34102],{},[618,34103,31647],{},[951,34105,34106],{},"Control point",[951,34108],{},[951,34110,34111],{},"no",[933,34113,34114,34118,34122,34124,34126],{},[951,34115,34116],{},[618,34117,30784],{},[951,34119,34120],{},[618,34121,5352],{},[951,34123,30791],{},[951,34125,30794],{},[951,34127,34111],{},[1327,34129,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":34131},[34132,34133],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders a Line2 between start and end points with an optional control point.",{},{"title":265,"description":34134},"hH6Hhkz4HlI9pLG1_7W6Yd5ehTKlLTzjWtTfZEcye0I",{"id":34139,"title":269,"body":34140,"description":34311,"extension":591,"links":592,"meta":34312,"navigation":594,"path":270,"seo":34313,"stem":271,"__hash__":34314},"docs/2.api/5.shapes/ring.md",{"type":501,"value":34141,"toc":34308},[34142,34147,34157,34163,34169,34171,34306],[608,34143,34144],{},[34145,34146],"shapes-ring",{},[614,34148,2776,34149,9468,34151,30315,34154,1146],{},[618,34150,7317],{},[618,34152,34153],{},"\u003CRing />",[618,34155,34156],{},"RingGeometry",[626,34158,34161],{"className":34159,"code":34160,"language":30324},[30322],"args: [\n  innerRadius: number,\n  outerRadius: number,\n  thetaSegments: number,\n  phiSegments: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[618,34162,34160],{"__ignoreMap":576},[614,34164,30329,34165],{},[1140,34166,34156],{"href":34167,"rel":34168},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1144],[504,34170,15],{"id":624},[626,34172,34174],{"className":628,"code":34173,"language":633,"meta":576,"style":576},"\u003CRing :args=\"[0.5, 1, 32]\" color=\"orange\" />\n\n// Ring with a custom material transformations\n\u003CRing ref=\"ringRef\" :args=\"[0.5, 1, 32]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Ring>\n",[618,34175,34176,34218,34222,34227,34294,34298],{"__ignoreMap":576},[637,34177,34178,34180,34182,34184,34186,34188,34190,34192,34194,34196,34198,34200,34202,34204,34206,34208,34210,34212,34214,34216],{"class":639,"line":577},[637,34179,643],{"class":642},[637,34181,269],{"class":646},[637,34183,3029],{"class":642},[637,34185,30351],{"class":650},[637,34187,657],{"class":642},[637,34189,660],{"class":642},[637,34191,8731],{"class":683},[637,34193,1946],{"class":2501},[637,34195,687],{"class":642},[637,34197,2561],{"class":2501},[637,34199,687],{"class":642},[637,34201,31049],{"class":2501},[637,34203,2514],{"class":683},[637,34205,660],{"class":642},[637,34207,2689],{"class":650},[637,34209,657],{"class":642},[637,34211,660],{"class":642},[637,34213,13327],{"class":663},[637,34215,660],{"class":642},[637,34217,787],{"class":642},[637,34219,34220],{"class":639,"line":578},[637,34221,742],{"emptyLinePlaceholder":594},[637,34223,34224],{"class":639,"line":708},[637,34225,34226],{"class":683},"// Ring with a custom material transformations\n",[637,34228,34229,34231,34233,34235,34237,34239,34242,34244,34246,34248,34250,34252,34254,34256,34258,34260,34262,34264,34266,34268,34270,34272,34274,34276,34278,34280,34282,34284,34286,34288,34290,34292],{"class":639,"line":729},[637,34230,643],{"class":642},[637,34232,269],{"class":646},[637,34234,3872],{"class":650},[637,34236,657],{"class":642},[637,34238,660],{"class":642},[637,34240,34241],{"class":663},"ringRef",[637,34243,660],{"class":642},[637,34245,3029],{"class":642},[637,34247,30351],{"class":650},[637,34249,657],{"class":642},[637,34251,660],{"class":642},[637,34253,8731],{"class":683},[637,34255,1946],{"class":2501},[637,34257,687],{"class":642},[637,34259,2561],{"class":2501},[637,34261,687],{"class":642},[637,34263,31049],{"class":2501},[637,34265,2514],{"class":683},[637,34267,660],{"class":642},[637,34269,3029],{"class":642},[637,34271,4130],{"class":650},[637,34273,657],{"class":642},[637,34275,660],{"class":642},[637,34277,8731],{"class":683},[637,34279,820],{"class":2501},[637,34281,687],{"class":642},[637,34283,30449],{"class":2501},[637,34285,687],{"class":642},[637,34287,2506],{"class":2501},[637,34289,2514],{"class":683},[637,34291,660],{"class":642},[637,34293,669],{"class":642},[637,34295,34296],{"class":639,"line":739},[637,34297,30464],{"class":683},[637,34299,34300,34302,34304],{"class":639,"line":745},[637,34301,732],{"class":642},[637,34303,269],{"class":646},[637,34305,669],{"class":642},[1327,34307,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":34309},[34310],{"id":624,"depth":578,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":34311},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":34316,"title":273,"body":34317,"description":34473,"extension":591,"links":592,"meta":34474,"navigation":594,"path":274,"seo":34475,"stem":275,"__hash__":34476},"docs/2.api/5.shapes/rounded-box.md",{"type":501,"value":34318,"toc":34470},[34319,34324,34335,34341,34347,34349,34468],[608,34320,34321],{},[34322,34323],"shapes-rounded-box",{},[614,34325,2776,34326,9468,34328,30315,34331,34334],{},[618,34327,7317],{},[618,34329,34330],{},"\u003CRoundedBox />",[618,34332,34333],{},"RoundedBoxGeometry"," .",[626,34336,34339],{"className":34337,"code":34338,"language":30324},[30322],"args: [\n  width: number, // default 1\n  height: number, // default 1\n  depth: number, // default 1\n  segments: number, // default 2\n  radius: number, // default 0.1\n]\n",[618,34340,34338],{"__ignoreMap":576},[614,34342,30329,34343],{},[1140,34344,34333],{"href":34345,"rel":34346},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1144],[504,34348,15],{"id":624},[626,34350,34352],{"className":628,"code":34351,"language":633,"meta":576,"style":576},"\u003CRoundedBox :args=\"[1, 1, 1, 2, 0.1]\" color=\"orange\" />\n\n// RoundedBox with a custom material transformations\n\u003CRoundedBox ref=\"boxRef\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/RoundedBox>\n",[618,34353,34354,34405,34409,34414,34456,34460],{"__ignoreMap":576},[637,34355,34356,34358,34361,34363,34365,34367,34369,34371,34373,34375,34377,34379,34381,34383,34385,34387,34389,34391,34393,34395,34397,34399,34401,34403],{"class":639,"line":577},[637,34357,643],{"class":642},[637,34359,34360],{"class":646},"RoundedBox",[637,34362,3029],{"class":642},[637,34364,30351],{"class":650},[637,34366,657],{"class":642},[637,34368,660],{"class":642},[637,34370,8731],{"class":683},[637,34372,1874],{"class":2501},[637,34374,687],{"class":642},[637,34376,2561],{"class":2501},[637,34378,687],{"class":642},[637,34380,2561],{"class":2501},[637,34382,687],{"class":642},[637,34384,31817],{"class":2501},[637,34386,687],{"class":642},[637,34388,23587],{"class":2501},[637,34390,2514],{"class":683},[637,34392,660],{"class":642},[637,34394,2689],{"class":650},[637,34396,657],{"class":642},[637,34398,660],{"class":642},[637,34400,13327],{"class":663},[637,34402,660],{"class":642},[637,34404,787],{"class":642},[637,34406,34407],{"class":639,"line":578},[637,34408,742],{"emptyLinePlaceholder":594},[637,34410,34411],{"class":639,"line":708},[637,34412,34413],{"class":683},"// RoundedBox with a custom material transformations\n",[637,34415,34416,34418,34420,34422,34424,34426,34428,34430,34432,34434,34436,34438,34440,34442,34444,34446,34448,34450,34452,34454],{"class":639,"line":729},[637,34417,643],{"class":642},[637,34419,34360],{"class":646},[637,34421,3872],{"class":650},[637,34423,657],{"class":642},[637,34425,660],{"class":642},[637,34427,16336],{"class":663},[637,34429,660],{"class":642},[637,34431,3029],{"class":642},[637,34433,4130],{"class":650},[637,34435,657],{"class":642},[637,34437,660],{"class":642},[637,34439,8731],{"class":683},[637,34441,965],{"class":2501},[637,34443,687],{"class":642},[637,34445,30449],{"class":2501},[637,34447,687],{"class":642},[637,34449,2506],{"class":2501},[637,34451,2514],{"class":683},[637,34453,660],{"class":642},[637,34455,669],{"class":642},[637,34457,34458],{"class":639,"line":739},[637,34459,30464],{"class":683},[637,34461,34462,34464,34466],{"class":639,"line":745},[637,34463,732],{"class":642},[637,34465,34360],{"class":646},[637,34467,669],{"class":642},[1327,34469,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":34471},[34472],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":34473},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":34478,"title":277,"body":34479,"description":34634,"extension":591,"links":592,"meta":34635,"navigation":594,"path":278,"seo":34636,"stem":279,"__hash__":34637},"docs/2.api/5.shapes/rounded-plane.md",{"type":501,"value":34480,"toc":34631},[34481,34486,34503,34509,34511,34629],[608,34482,34483],{},[34484,34485],"shapes-rounded-plane",{},[614,34487,2776,34488,9468,34490,30315,34493,34496,34497,34502],{},[618,34489,7317],{},[618,34491,34492],{},"\u003CRoundedPlane />",[618,34494,34495],{},"RoundedPlaneGeometry",": a plane with rounded corners. The geometry is vendored from ",[1140,34498,34501],{"href":34499,"rel":34500},"https://github.com/pmndrs/maath/blob/main/packages/maath/src/geometry.ts",[1144],"pmndrs/maath"," (MIT), so it ships with no extra dependency.",[626,34504,34507],{"className":34505,"code":34506,"language":30324},[30322],"args: [\n  width: number, // default 1\n  height: number, // default 1\n  radius: number, // default 0.2\n  segments: number, // default 16\n]\n",[618,34508,34506],{"__ignoreMap":576},[504,34510,15],{"id":624},[626,34512,34514],{"className":628,"code":34513,"language":633,"meta":576,"style":576},"\u003CRoundedPlane :args=\"[1.5, 1, 0.2, 16]\" color=\"orange\" />\n\n// RoundedPlane with a custom material\n\u003CRoundedPlane ref=\"planeRef\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshStandardMaterial color=\"orange\" />\n\u003C/RoundedPlane>\n",[618,34515,34516,34565,34569,34574,34616,34621],{"__ignoreMap":576},[637,34517,34518,34520,34523,34525,34527,34529,34531,34533,34535,34537,34539,34541,34544,34546,34549,34551,34553,34555,34557,34559,34561,34563],{"class":639,"line":577},[637,34519,643],{"class":642},[637,34521,34522],{"class":646},"RoundedPlane",[637,34524,3029],{"class":642},[637,34526,30351],{"class":650},[637,34528,657],{"class":642},[637,34530,660],{"class":642},[637,34532,8731],{"class":683},[637,34534,29399],{"class":2501},[637,34536,687],{"class":642},[637,34538,2561],{"class":2501},[637,34540,687],{"class":642},[637,34542,34543],{"class":2501}," 0.2",[637,34545,687],{"class":642},[637,34547,34548],{"class":2501}," 16",[637,34550,2514],{"class":683},[637,34552,660],{"class":642},[637,34554,2689],{"class":650},[637,34556,657],{"class":642},[637,34558,660],{"class":642},[637,34560,13327],{"class":663},[637,34562,660],{"class":642},[637,34564,787],{"class":642},[637,34566,34567],{"class":639,"line":578},[637,34568,742],{"emptyLinePlaceholder":594},[637,34570,34571],{"class":639,"line":708},[637,34572,34573],{"class":683},"// RoundedPlane with a custom material\n",[637,34575,34576,34578,34580,34582,34584,34586,34588,34590,34592,34594,34596,34598,34600,34602,34604,34606,34608,34610,34612,34614],{"class":639,"line":729},[637,34577,643],{"class":642},[637,34579,34522],{"class":646},[637,34581,3872],{"class":650},[637,34583,657],{"class":642},[637,34585,660],{"class":642},[637,34587,33707],{"class":663},[637,34589,660],{"class":642},[637,34591,3029],{"class":642},[637,34593,4130],{"class":650},[637,34595,657],{"class":642},[637,34597,660],{"class":642},[637,34599,8731],{"class":683},[637,34601,965],{"class":2501},[637,34603,687],{"class":642},[637,34605,30449],{"class":2501},[637,34607,687],{"class":642},[637,34609,2506],{"class":2501},[637,34611,2514],{"class":683},[637,34613,660],{"class":642},[637,34615,669],{"class":642},[637,34617,34618],{"class":639,"line":739},[637,34619,34620],{"class":683},"  \u003CTresMeshStandardMaterial color=\"orange\" />\n",[637,34622,34623,34625,34627],{"class":639,"line":745},[637,34624,732],{"class":642},[637,34626,34522],{"class":646},[637,34628,669],{"class":642},[1327,34630,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":34632},[34633],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedPlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":34634},"HH5158_07Il55CXeB5dFOKuUS3I52MwiYYeqEjcgDoM",{"id":34639,"title":281,"body":34640,"description":34828,"extension":591,"links":592,"meta":34829,"navigation":594,"path":282,"seo":34830,"stem":283,"__hash__":34831},"docs/2.api/5.shapes/screen-quad.md",{"type":501,"value":34641,"toc":34824},[34642,34647,34650,34652,34802,34806,34822],[2295,34643,34644],{},[34645,34646],"shapes-screen-quad",{},[614,34648,34649],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[504,34651,15],{"id":624},[626,34653,34655],{"className":628,"code":34654,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { ScreenQuad } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresOrthographicCamera />\n    \u003CScreenQuad>\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/ScreenQuad>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,34656,34657,34677,34695,34714,34722,34726,34734,34742,34751,34760,34778,34786,34794],{"__ignoreMap":576},[637,34658,34659,34661,34663,34665,34667,34669,34671,34673,34675],{"class":639,"line":577},[637,34660,643],{"class":642},[637,34662,647],{"class":646},[637,34664,651],{"class":650},[637,34666,654],{"class":650},[637,34668,657],{"class":642},[637,34670,660],{"class":642},[637,34672,664],{"class":663},[637,34674,660],{"class":642},[637,34676,669],{"class":642},[637,34678,34679,34681,34683,34685,34687,34689,34691,34693],{"class":639,"line":578},[637,34680,677],{"class":676},[637,34682,680],{"class":642},[637,34684,715],{"class":683},[637,34686,693],{"class":642},[637,34688,696],{"class":676},[637,34690,699],{"class":642},[637,34692,724],{"class":663},[637,34694,705],{"class":642},[637,34696,34697,34699,34701,34704,34706,34708,34710,34712],{"class":639,"line":708},[637,34698,677],{"class":676},[637,34700,680],{"class":642},[637,34702,34703],{"class":683}," ScreenQuad",[637,34705,693],{"class":642},[637,34707,696],{"class":676},[637,34709,699],{"class":642},[637,34711,702],{"class":663},[637,34713,705],{"class":642},[637,34715,34716,34718,34720],{"class":639,"line":729},[637,34717,732],{"class":642},[637,34719,647],{"class":646},[637,34721,669],{"class":642},[637,34723,34724],{"class":639,"line":739},[637,34725,742],{"emptyLinePlaceholder":594},[637,34727,34728,34730,34732],{"class":639,"line":745},[637,34729,643],{"class":642},[637,34731,750],{"class":646},[637,34733,669],{"class":642},[637,34735,34736,34738,34740],{"class":639,"line":755},[637,34737,758],{"class":642},[637,34739,761],{"class":646},[637,34741,669],{"class":642},[637,34743,34744,34746,34749],{"class":639,"line":778},[637,34745,781],{"class":642},[637,34747,34748],{"class":646},"TresOrthographicCamera",[637,34750,787],{"class":642},[637,34752,34753,34755,34758],{"class":639,"line":790},[637,34754,781],{"class":642},[637,34756,34757],{"class":646},"ScreenQuad",[637,34759,669],{"class":642},[637,34761,34762,34764,34766,34768,34770,34772,34774,34776],{"class":639,"line":800},[637,34763,853],{"class":642},[637,34765,13318],{"class":646},[637,34767,2689],{"class":650},[637,34769,657],{"class":642},[637,34771,660],{"class":642},[637,34773,13327],{"class":663},[637,34775,660],{"class":642},[637,34777,787],{"class":642},[637,34779,34780,34782,34784],{"class":639,"line":805},[637,34781,895],{"class":642},[637,34783,34757],{"class":646},[637,34785,669],{"class":642},[637,34787,34788,34790,34792],{"class":639,"line":827},[637,34789,905],{"class":642},[637,34791,761],{"class":646},[637,34793,669],{"class":642},[637,34795,34796,34798,34800],{"class":639,"line":631},[637,34797,732],{"class":642},[637,34799,750],{"class":646},[637,34801,669],{"class":642},[504,34803,34805],{"id":34804},"references","References",[2213,34807,34808,34815],{},[2216,34809,34810],{},[1140,34811,34814],{"href":34812,"rel":34813},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1144],"Why a triangle?",[2216,34816,34817],{},[1140,34818,34821],{"href":34819,"rel":34820},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1144],"Simple postprocessing in Three.js",[1327,34823,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":34825},[34826,34827],{"id":624,"depth":578,"text":15},{"id":34804,"depth":578,"text":34805},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":281,"description":34828},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":34833,"title":285,"body":34834,"description":35004,"extension":591,"links":592,"meta":35005,"navigation":594,"path":286,"seo":35006,"stem":287,"__hash__":35007},"docs/2.api/5.shapes/sphere.md",{"type":501,"value":34835,"toc":35001},[34836,34841,34851,34857,34863,34865,34999],[608,34837,34838],{},[34839,34840],"shapes-sphere",{},[614,34842,2776,34843,9468,34845,30315,34848,1146],{},[618,34844,7317],{},[618,34846,34847],{},"\u003CSphere />",[618,34849,34850],{},"SphereGeometry",[626,34852,34855],{"className":34853,"code":34854,"language":30324},[30322],"args: [\n  radius: number,\n  widthSegments: number,\n  heightSegments: number,\n  phiStart: number,\n  phiLength: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[618,34856,34854],{"__ignoreMap":576},[614,34858,30329,34859],{},[1140,34860,34850],{"href":34861,"rel":34862},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1144],[504,34864,15],{"id":624},[626,34866,34868],{"className":628,"code":34867,"language":633,"meta":576,"style":576},"\u003CSphere :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Sphere with a custom material transformations\n\u003CSphere ref=\"planeRef\" :args=\"[1, 1, 1]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Sphere>\n",[618,34869,34870,34912,34916,34921,34987,34991],{"__ignoreMap":576},[637,34871,34872,34874,34876,34878,34880,34882,34884,34886,34888,34890,34892,34894,34896,34898,34900,34902,34904,34906,34908,34910],{"class":639,"line":577},[637,34873,643],{"class":642},[637,34875,285],{"class":646},[637,34877,3029],{"class":642},[637,34879,30351],{"class":650},[637,34881,657],{"class":642},[637,34883,660],{"class":642},[637,34885,8731],{"class":683},[637,34887,1874],{"class":2501},[637,34889,687],{"class":642},[637,34891,2561],{"class":2501},[637,34893,687],{"class":642},[637,34895,2561],{"class":2501},[637,34897,2514],{"class":683},[637,34899,660],{"class":642},[637,34901,2689],{"class":650},[637,34903,657],{"class":642},[637,34905,660],{"class":642},[637,34907,13327],{"class":663},[637,34909,660],{"class":642},[637,34911,787],{"class":642},[637,34913,34914],{"class":639,"line":578},[637,34915,742],{"emptyLinePlaceholder":594},[637,34917,34918],{"class":639,"line":708},[637,34919,34920],{"class":683},"// Sphere with a custom material transformations\n",[637,34922,34923,34925,34927,34929,34931,34933,34935,34937,34939,34941,34943,34945,34947,34949,34951,34953,34955,34957,34959,34961,34963,34965,34967,34969,34971,34973,34975,34977,34979,34981,34983,34985],{"class":639,"line":729},[637,34924,643],{"class":642},[637,34926,285],{"class":646},[637,34928,3872],{"class":650},[637,34930,657],{"class":642},[637,34932,660],{"class":642},[637,34934,33707],{"class":663},[637,34936,660],{"class":642},[637,34938,3029],{"class":642},[637,34940,30351],{"class":650},[637,34942,657],{"class":642},[637,34944,660],{"class":642},[637,34946,8731],{"class":683},[637,34948,1874],{"class":2501},[637,34950,687],{"class":642},[637,34952,2561],{"class":2501},[637,34954,687],{"class":642},[637,34956,2561],{"class":2501},[637,34958,2514],{"class":683},[637,34960,660],{"class":642},[637,34962,3029],{"class":642},[637,34964,4130],{"class":650},[637,34966,657],{"class":642},[637,34968,660],{"class":642},[637,34970,8731],{"class":683},[637,34972,820],{"class":2501},[637,34974,687],{"class":642},[637,34976,30449],{"class":2501},[637,34978,687],{"class":642},[637,34980,2506],{"class":2501},[637,34982,2514],{"class":683},[637,34984,660],{"class":642},[637,34986,669],{"class":642},[637,34988,34989],{"class":639,"line":739},[637,34990,30464],{"class":683},[637,34992,34993,34995,34997],{"class":639,"line":745},[637,34994,732],{"class":642},[637,34996,285],{"class":646},[637,34998,669],{"class":642},[1327,35000,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":35002},[35003],{"id":624,"depth":578,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":285,"description":35004},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":35009,"title":289,"body":35010,"description":35408,"extension":591,"links":592,"meta":35409,"navigation":594,"path":290,"seo":35410,"stem":291,"__hash__":35411},"docs/2.api/5.shapes/superformula.md",{"type":501,"value":35011,"toc":35403},[35012,35017,35030,35032,35268,35270,35280,35392,35396,35401],[608,35013,35014],{},[35015,35016],"shapes-super-formula",{},[614,35018,2776,35019,9468,35021,35024,35025,1146],{},[618,35020,7317],{},[618,35022,35023],{},"\u003CSuperformula />"," component that produces a configurable ",[1140,35026,35029],{"href":35027,"rel":35028},"https://en.wikipedia.org/wiki/Superformula",[1144],"3D plot of the superformula",[504,35031,15],{"id":624},[626,35033,35036],{"className":628,"code":35034,"highlights":35035,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Superformula } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CSuperformula\n      :width-segments=\"64\"\n      :height-segments=\"64\"\n      :num-arms-a=\"5\"\n      :exp-a=\"[40, 1.3, 0.9]\"\n      color=\"#ff6b6b\"\n    />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631,850],[618,35037,35038,35058,35076,35096,35104,35108,35116,35124,35142,35150,35165,35179,35193,35208,35222,35226,35234,35252,35260],{"__ignoreMap":576},[637,35039,35040,35042,35044,35046,35048,35050,35052,35054,35056],{"class":639,"line":577},[637,35041,643],{"class":642},[637,35043,647],{"class":646},[637,35045,651],{"class":650},[637,35047,654],{"class":650},[637,35049,657],{"class":642},[637,35051,660],{"class":642},[637,35053,664],{"class":663},[637,35055,660],{"class":642},[637,35057,669],{"class":642},[637,35059,35060,35062,35064,35066,35068,35070,35072,35074],{"class":639,"line":578},[637,35061,677],{"class":676},[637,35063,680],{"class":642},[637,35065,715],{"class":683},[637,35067,693],{"class":642},[637,35069,696],{"class":676},[637,35071,699],{"class":642},[637,35073,724],{"class":663},[637,35075,705],{"class":642},[637,35077,35079,35081,35083,35086,35088,35090,35092,35094],{"class":35078,"line":708},[639,673],[637,35080,677],{"class":676},[637,35082,680],{"class":642},[637,35084,35085],{"class":683}," Superformula",[637,35087,693],{"class":642},[637,35089,696],{"class":676},[637,35091,699],{"class":642},[637,35093,702],{"class":663},[637,35095,705],{"class":642},[637,35097,35098,35100,35102],{"class":639,"line":729},[637,35099,732],{"class":642},[637,35101,647],{"class":646},[637,35103,669],{"class":642},[637,35105,35106],{"class":639,"line":739},[637,35107,742],{"emptyLinePlaceholder":594},[637,35109,35110,35112,35114],{"class":639,"line":745},[637,35111,643],{"class":642},[637,35113,750],{"class":646},[637,35115,669],{"class":642},[637,35117,35118,35120,35122],{"class":639,"line":755},[637,35119,758],{"class":642},[637,35121,761],{"class":646},[637,35123,669],{"class":642},[637,35125,35126,35128,35130,35132,35134,35136,35138,35140],{"class":639,"line":778},[637,35127,781],{"class":642},[637,35129,784],{"class":646},[637,35131,1485],{"class":650},[637,35133,657],{"class":642},[637,35135,660],{"class":642},[637,35137,13280],{"class":663},[637,35139,660],{"class":642},[637,35141,787],{"class":642},[637,35143,35145,35147],{"class":35144,"line":790},[639,673],[637,35146,781],{"class":642},[637,35148,35149],{"class":646},"Superformula\n",[637,35151,35153,35156,35158,35160,35163],{"class":35152,"line":800},[639,673],[637,35154,35155],{"class":650},"      :width-segments",[637,35157,657],{"class":642},[637,35159,660],{"class":642},[637,35161,35162],{"class":663},"64",[637,35164,3131],{"class":642},[637,35166,35168,35171,35173,35175,35177],{"class":35167,"line":805},[639,673],[637,35169,35170],{"class":650},"      :height-segments",[637,35172,657],{"class":642},[637,35174,660],{"class":642},[637,35176,35162],{"class":663},[637,35178,3131],{"class":642},[637,35180,35182,35185,35187,35189,35191],{"class":35181,"line":827},[639,673],[637,35183,35184],{"class":650},"      :num-arms-a",[637,35186,657],{"class":642},[637,35188,660],{"class":642},[637,35190,12709],{"class":663},[637,35192,3131],{"class":642},[637,35194,35196,35199,35201,35203,35206],{"class":35195,"line":631},[639,673],[637,35197,35198],{"class":650},"      :exp-a",[637,35200,657],{"class":642},[637,35202,660],{"class":642},[637,35204,35205],{"class":663},"[40, 1.3, 0.9]",[637,35207,3131],{"class":642},[637,35209,35211,35213,35215,35217,35220],{"class":35210,"line":850},[639,673],[637,35212,30696],{"class":650},[637,35214,657],{"class":642},[637,35216,660],{"class":642},[637,35218,35219],{"class":663},"#ff6b6b",[637,35221,3131],{"class":642},[637,35223,35224],{"class":639,"line":861},[637,35225,17274],{"class":642},[637,35227,35228,35230,35232],{"class":639,"line":872},[637,35229,781],{"class":642},[637,35231,9681],{"class":646},[637,35233,787],{"class":642},[637,35235,35236,35238,35240,35242,35244,35246,35248,35250],{"class":639,"line":882},[637,35237,781],{"class":642},[637,35239,9700],{"class":646},[637,35241,1485],{"class":650},[637,35243,657],{"class":642},[637,35245,660],{"class":642},[637,35247,13362],{"class":663},[637,35249,660],{"class":642},[637,35251,787],{"class":642},[637,35253,35254,35256,35258],{"class":639,"line":632},[637,35255,905],{"class":642},[637,35257,761],{"class":646},[637,35259,669],{"class":642},[637,35261,35262,35264,35266],{"class":639,"line":902},[637,35263,732],{"class":642},[637,35265,750],{"class":646},[637,35267,669],{"class":642},[504,35269,922],{"id":921},[614,35271,2776,35272,35274,35275,35279],{},[618,35273,35023],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1140,35276,35278],{"href":35027,"rel":35277},[1144],"Wikipedia article about the superformula"," for more information about the function's arguments.",[927,35281,35282,35292],{},[930,35283,35284],{},[933,35285,35286,35288,35290],{},[936,35287,8089],{"align":997},[936,35289,941],{"align":997},[936,35291,944],{"align":997},[946,35293,35294,35309,35323,35337,35351,35365,35379],{},[933,35295,35296,35301,35304],{},[951,35297,35298],{"align":997},[1669,35299,35300],{},"widthSegments",[951,35302,35303],{"align":997},"Number of horizontal mesh segments",[951,35305,35306],{"align":997},[618,35307,35308],{},"32",[933,35310,35311,35316,35319],{},[951,35312,35313],{"align":997},[1669,35314,35315],{},"heightSegments",[951,35317,35318],{"align":997},"Number of vertical mesh segments",[951,35320,35321],{"align":997},[618,35322,35308],{},[933,35324,35325,35330,35333],{},[951,35326,35327],{"align":997},[1669,35328,35329],{},"numArmsA",[951,35331,35332],{"align":997},"For A, number of radial arms/ripples",[951,35334,35335],{"align":997},[618,35336,9653],{},[933,35338,35339,35344,35347],{},[951,35340,35341],{"align":997},[1669,35342,35343],{},"expA",[951,35345,35346],{"align":997},"A's 3 exponents",[951,35348,35349],{"align":997},[618,35350,35205],{},[933,35352,35353,35358,35361],{},[951,35354,35355],{"align":997},[1669,35356,35357],{},"numArmsB",[951,35359,35360],{"align":997},"For B, number of radial arms/ripples",[951,35362,35363],{"align":997},[618,35364,9653],{},[933,35366,35367,35372,35375],{},[951,35368,35369],{"align":997},[1669,35370,35371],{},"expB",[951,35373,35374],{"align":997},"B's 3 exponents",[951,35376,35377],{"align":997},[618,35378,35205],{},[933,35380,35381,35385,35388],{},[951,35382,35383],{"align":997},[1669,35384,7547],{},[951,35386,35387],{"align":997},"If no material is provided, a color for the default material",[951,35389,35390],{"align":997},[618,35391,30867],{},[504,35393,35395],{"id":35394},"slot","Slot",[614,35397,35398,35400],{},[618,35399,35023],{}," has a single slot for an optional material.",[1327,35402,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":35404},[35405,35406,35407],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":35394,"depth":578,"text":35395},"Produces a configurable 3D plot of the superformula.",{},{"title":289,"description":35408},"MwKL1T459MzFaCW-z9Syi59B9UEjgZjpfCi8goXNYmQ",{"id":35413,"title":293,"body":35414,"description":35576,"extension":591,"links":592,"meta":35577,"navigation":594,"path":294,"seo":35578,"stem":295,"__hash__":35579},"docs/2.api/5.shapes/tetrahedron.md",{"type":501,"value":35415,"toc":35573},[35416,35421,35431,35436,35442,35444,35571],[608,35417,35418],{},[35419,35420],"shapes-tetrahedron",{},[614,35422,2776,35423,9468,35425,30315,35428,1146],{},[618,35424,7317],{},[618,35426,35427],{},"\u003CTetrahedron />",[618,35429,35430],{},"TetrahedronGeometry",[626,35432,35434],{"className":35433,"code":31982,"language":30324},[30322],[618,35435,31982],{"__ignoreMap":576},[614,35437,30329,35438],{},[1140,35439,35430],{"href":35440,"rel":35441},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1144],[504,35443,15],{"id":624},[626,35445,35447],{"className":628,"code":35446,"language":633,"meta":576,"style":576},"\u003CTetrahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Tetrahedron with a custom material transformations\n\u003CTetrahedron ref=\"tetrahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Tetrahedron>\n",[618,35448,35449,35487,35491,35496,35559,35563],{"__ignoreMap":576},[637,35450,35451,35453,35455,35457,35459,35461,35463,35465,35467,35469,35471,35473,35475,35477,35479,35481,35483,35485],{"class":639,"line":577},[637,35452,643],{"class":642},[637,35454,293],{"class":646},[637,35456,3029],{"class":642},[637,35458,30351],{"class":650},[637,35460,657],{"class":642},[637,35462,660],{"class":642},[637,35464,8731],{"class":683},[637,35466,1874],{"class":2501},[637,35468,687],{"class":642},[637,35470,2506],{"class":2501},[637,35472,2514],{"class":683},[637,35474,660],{"class":642},[637,35476,2689],{"class":650},[637,35478,657],{"class":642},[637,35480,660],{"class":642},[637,35482,13327],{"class":663},[637,35484,660],{"class":642},[637,35486,787],{"class":642},[637,35488,35489],{"class":639,"line":578},[637,35490,742],{"emptyLinePlaceholder":594},[637,35492,35493],{"class":639,"line":708},[637,35494,35495],{"class":683},"// Tetrahedron with a custom material transformations\n",[637,35497,35498,35500,35502,35504,35506,35508,35511,35513,35515,35517,35519,35521,35523,35525,35527,35529,35531,35533,35535,35537,35539,35541,35543,35545,35547,35549,35551,35553,35555,35557],{"class":639,"line":729},[637,35499,643],{"class":642},[637,35501,293],{"class":646},[637,35503,3872],{"class":650},[637,35505,657],{"class":642},[637,35507,660],{"class":642},[637,35509,35510],{"class":663},"tetrahedronRef",[637,35512,660],{"class":642},[637,35514,3029],{"class":642},[637,35516,30351],{"class":650},[637,35518,657],{"class":642},[637,35520,660],{"class":642},[637,35522,8731],{"class":683},[637,35524,1874],{"class":2501},[637,35526,687],{"class":642},[637,35528,2506],{"class":2501},[637,35530,2514],{"class":683},[637,35532,660],{"class":642},[637,35534,3029],{"class":642},[637,35536,4130],{"class":650},[637,35538,657],{"class":642},[637,35540,660],{"class":642},[637,35542,8731],{"class":683},[637,35544,820],{"class":2501},[637,35546,687],{"class":642},[637,35548,30449],{"class":2501},[637,35550,687],{"class":642},[637,35552,2506],{"class":2501},[637,35554,2514],{"class":683},[637,35556,660],{"class":642},[637,35558,669],{"class":642},[637,35560,35561],{"class":639,"line":739},[637,35562,30464],{"class":683},[637,35564,35565,35567,35569],{"class":639,"line":745},[637,35566,732],{"class":642},[637,35568,293],{"class":646},[637,35570,669],{"class":642},[1327,35572,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":35574},[35575],{"id":624,"depth":578,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":293,"description":35576},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":35581,"title":297,"body":35582,"description":35766,"extension":591,"links":592,"meta":35767,"navigation":594,"path":298,"seo":35768,"stem":299,"__hash__":35769},"docs/2.api/5.shapes/torus.md",{"type":501,"value":35583,"toc":35763},[35584,35589,35599,35605,35611,35613,35761],[608,35585,35586],{},[35587,35588],"shapes-torus",{},[614,35590,2776,35591,9468,35593,30315,35596,1146],{},[618,35592,7317],{},[618,35594,35595],{},"\u003CTorus />",[618,35597,35598],{},"TorusGeometry",[626,35600,35603],{"className":35601,"code":35602,"language":30324},[30322],"args: [\n  radius: number,\n  tube: number,\n  radialSegments: number,\n  tubularSegments: number,\n  arc: number\n]\n",[618,35604,35602],{"__ignoreMap":576},[614,35606,30329,35607],{},[1140,35608,35598],{"href":35609,"rel":35610},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1144],[504,35612,15],{"id":624},[626,35614,35616],{"className":628,"code":35615,"language":633,"meta":576,"style":576},"\u003CTorus :args=\"[2, 0.4, 42, 100]\" color=\"orange\" />\n\n// Torus with a custom material transformations\n\u003CTorus ref=\"torusRef\" :args=\"[0.75, 0.4, 16, 80]\" :position=\"[-2, 6, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Torus>\n",[618,35617,35618,35666,35670,35675,35749,35753],{"__ignoreMap":576},[637,35619,35620,35622,35624,35626,35628,35630,35632,35634,35636,35638,35641,35643,35646,35648,35650,35652,35654,35656,35658,35660,35662,35664],{"class":639,"line":577},[637,35621,643],{"class":642},[637,35623,297],{"class":646},[637,35625,3029],{"class":642},[637,35627,30351],{"class":650},[637,35629,657],{"class":642},[637,35631,660],{"class":642},[637,35633,8731],{"class":683},[637,35635,820],{"class":2501},[637,35637,687],{"class":642},[637,35639,35640],{"class":2501}," 0.4",[637,35642,687],{"class":642},[637,35644,35645],{"class":2501}," 42",[637,35647,687],{"class":642},[637,35649,7763],{"class":2501},[637,35651,2514],{"class":683},[637,35653,660],{"class":642},[637,35655,2689],{"class":650},[637,35657,657],{"class":642},[637,35659,660],{"class":642},[637,35661,13327],{"class":663},[637,35663,660],{"class":642},[637,35665,787],{"class":642},[637,35667,35668],{"class":639,"line":578},[637,35669,742],{"emptyLinePlaceholder":594},[637,35671,35672],{"class":639,"line":708},[637,35673,35674],{"class":683},"// Torus with a custom material transformations\n",[637,35676,35677,35679,35681,35683,35685,35687,35689,35691,35693,35695,35697,35699,35701,35703,35705,35707,35709,35711,35713,35716,35718,35720,35722,35724,35726,35728,35730,35732,35734,35736,35739,35741,35743,35745,35747],{"class":639,"line":729},[637,35678,643],{"class":642},[637,35680,297],{"class":646},[637,35682,3872],{"class":650},[637,35684,657],{"class":642},[637,35686,660],{"class":642},[637,35688,12327],{"class":663},[637,35690,660],{"class":642},[637,35692,3029],{"class":642},[637,35694,30351],{"class":650},[637,35696,657],{"class":642},[637,35698,660],{"class":642},[637,35700,8731],{"class":683},[637,35702,2551],{"class":2501},[637,35704,687],{"class":642},[637,35706,35640],{"class":2501},[637,35708,687],{"class":642},[637,35710,34548],{"class":2501},[637,35712,687],{"class":642},[637,35714,35715],{"class":2501}," 80",[637,35717,2514],{"class":683},[637,35719,660],{"class":642},[637,35721,3029],{"class":642},[637,35723,4130],{"class":650},[637,35725,657],{"class":642},[637,35727,660],{"class":642},[637,35729,8731],{"class":683},[637,35731,8505],{"class":642},[637,35733,820],{"class":2501},[637,35735,687],{"class":642},[637,35737,35738],{"class":2501}," 6",[637,35740,687],{"class":642},[637,35742,2506],{"class":2501},[637,35744,2514],{"class":683},[637,35746,660],{"class":642},[637,35748,669],{"class":642},[637,35750,35751],{"class":639,"line":739},[637,35752,30464],{"class":683},[637,35754,35755,35757,35759],{"class":639,"line":745},[637,35756,732],{"class":642},[637,35758,297],{"class":646},[637,35760,669],{"class":642},[1327,35762,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":35764},[35765],{"id":624,"depth":578,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":297,"description":35766},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":35771,"title":301,"body":35772,"description":35955,"extension":591,"links":592,"meta":35956,"navigation":594,"path":302,"seo":35957,"stem":303,"__hash__":35958},"docs/2.api/5.shapes/torus-knot.md",{"type":501,"value":35773,"toc":35952},[35774,35779,35789,35795,35801,35803,35950],[608,35775,35776],{},[35777,35778],"shapes-torus-knot",{},[614,35780,2776,35781,9468,35783,30315,35786,1146],{},[618,35782,7317],{},[618,35784,35785],{},"\u003CTorusKnot />",[618,35787,35788],{},"TorusKnotGeometry",[626,35790,35793],{"className":35791,"code":35792,"language":30324},[30322],"args: [\n  radius: number,\n  tube: number,\n  tubularSegments: number,\n  radialSegments: number,\n  p: number,\n  q: number\n]\n",[618,35794,35792],{"__ignoreMap":576},[614,35796,30329,35797],{},[1140,35798,35788],{"href":35799,"rel":35800},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1144],[504,35802,15],{"id":624},[626,35804,35806],{"className":628,"code":35805,"language":633,"meta":576,"style":576},"\u003CTorusKnot :args=\"[0.6, 0.2, 64, 8]\" color=\"orange\" />\n\n// TorusKnot with a custom material transformations\n\u003CTorusKnot ref=\"torusKnotRef\" :args=\"[0.6, 0.2, 64, 8]\" :position=\"[-2, 6, 2]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/TorusKnot>\n",[618,35807,35808,35856,35860,35865,35938,35942],{"__ignoreMap":576},[637,35809,35810,35812,35815,35817,35819,35821,35823,35825,35827,35829,35831,35833,35836,35838,35840,35842,35844,35846,35848,35850,35852,35854],{"class":639,"line":577},[637,35811,643],{"class":642},[637,35813,35814],{"class":646},"TorusKnot",[637,35816,3029],{"class":642},[637,35818,30351],{"class":650},[637,35820,657],{"class":642},[637,35822,660],{"class":642},[637,35824,8731],{"class":683},[637,35826,10661],{"class":2501},[637,35828,687],{"class":642},[637,35830,34543],{"class":2501},[637,35832,687],{"class":642},[637,35834,35835],{"class":2501}," 64",[637,35837,687],{"class":642},[637,35839,31223],{"class":2501},[637,35841,2514],{"class":683},[637,35843,660],{"class":642},[637,35845,2689],{"class":650},[637,35847,657],{"class":642},[637,35849,660],{"class":642},[637,35851,13327],{"class":663},[637,35853,660],{"class":642},[637,35855,787],{"class":642},[637,35857,35858],{"class":639,"line":578},[637,35859,742],{"emptyLinePlaceholder":594},[637,35861,35862],{"class":639,"line":708},[637,35863,35864],{"class":683},"// TorusKnot with a custom material transformations\n",[637,35866,35867,35869,35871,35873,35875,35877,35880,35882,35884,35886,35888,35890,35892,35894,35896,35898,35900,35902,35904,35906,35908,35910,35912,35914,35916,35918,35920,35922,35924,35926,35928,35930,35932,35934,35936],{"class":639,"line":729},[637,35868,643],{"class":642},[637,35870,35814],{"class":646},[637,35872,3872],{"class":650},[637,35874,657],{"class":642},[637,35876,660],{"class":642},[637,35878,35879],{"class":663},"torusKnotRef",[637,35881,660],{"class":642},[637,35883,3029],{"class":642},[637,35885,30351],{"class":650},[637,35887,657],{"class":642},[637,35889,660],{"class":642},[637,35891,8731],{"class":683},[637,35893,10661],{"class":2501},[637,35895,687],{"class":642},[637,35897,34543],{"class":2501},[637,35899,687],{"class":642},[637,35901,35835],{"class":2501},[637,35903,687],{"class":642},[637,35905,31223],{"class":2501},[637,35907,2514],{"class":683},[637,35909,660],{"class":642},[637,35911,3029],{"class":642},[637,35913,4130],{"class":650},[637,35915,657],{"class":642},[637,35917,660],{"class":642},[637,35919,8731],{"class":683},[637,35921,8505],{"class":642},[637,35923,820],{"class":2501},[637,35925,687],{"class":642},[637,35927,35738],{"class":2501},[637,35929,687],{"class":642},[637,35931,31817],{"class":2501},[637,35933,2514],{"class":683},[637,35935,660],{"class":642},[637,35937,669],{"class":642},[637,35939,35940],{"class":639,"line":739},[637,35941,30464],{"class":683},[637,35943,35944,35946,35948],{"class":639,"line":745},[637,35945,732],{"class":642},[637,35947,35814],{"class":646},[637,35949,669],{"class":642},[1327,35951,30475],{},{"title":576,"searchDepth":577,"depth":578,"links":35953},[35954],{"id":624,"depth":578,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":301,"description":35955},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":35960,"title":305,"body":35961,"description":36335,"extension":591,"links":592,"meta":36336,"navigation":594,"path":306,"seo":36337,"stem":307,"__hash__":36338},"docs/2.api/5.shapes/tube.md",{"type":501,"value":35962,"toc":36331},[35963,35968,35978,35984,35986,36319,36322,36328],[608,35964,35965],{},[35966,35967],"shapes-tube",{},[614,35969,2776,35970,9468,35972,30315,35975,1146],{},[618,35971,7317],{},[618,35973,35974],{},"\u003CTube />",[618,35976,35977],{},"TubeGeometry",[614,35979,30329,35980],{},[1140,35981,35977],{"href":35982,"rel":35983},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1144],[504,35985,15],{"id":624},[626,35987,35989],{"className":628,"code":35988,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Tube } from '@tresjs/cientos'\nimport { CubicBezierCurve3, Vector3 } from 'three'\nimport { ref } from 'vue'\n\nconst tubePath = ref(new CubicBezierCurve3(\n  new Vector3(-1, 0, 0),\n  new Vector3(-0.5, -1, 0),\n  new Vector3(0.5, 1, 0),\n  new Vector3(1, 0, 0),\n))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- TubeGeometry needs a curve path to be construct -->\n  \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" color=\"orange\" />\n\n  \u003C!-- Tube with a custom material transformations -->\n  \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" :position=\"[0, 4, 0]\">\n    \u003CTresMeshToonMaterial color=\"orange\" />\n  \u003C/Tube>\n\u003C/template>\n",[618,35990,35991,36011,36030,36053,36071,36075,36095,36120,36146,36168,36190,36194,36202,36206,36214,36219,36248,36252,36257,36285,36303,36311],{"__ignoreMap":576},[637,35992,35993,35995,35997,35999,36001,36003,36005,36007,36009],{"class":639,"line":577},[637,35994,643],{"class":642},[637,35996,647],{"class":646},[637,35998,651],{"class":650},[637,36000,654],{"class":650},[637,36002,657],{"class":642},[637,36004,660],{"class":642},[637,36006,664],{"class":663},[637,36008,660],{"class":642},[637,36010,669],{"class":642},[637,36012,36013,36015,36017,36020,36022,36024,36026,36028],{"class":639,"line":578},[637,36014,677],{"class":676},[637,36016,680],{"class":642},[637,36018,36019],{"class":683}," Tube",[637,36021,693],{"class":642},[637,36023,696],{"class":676},[637,36025,699],{"class":642},[637,36027,702],{"class":663},[637,36029,705],{"class":642},[637,36031,36032,36034,36036,36039,36041,36043,36045,36047,36049,36051],{"class":639,"line":708},[637,36033,677],{"class":676},[637,36035,680],{"class":642},[637,36037,36038],{"class":683}," CubicBezierCurve3",[637,36040,687],{"class":642},[637,36042,30597],{"class":683},[637,36044,693],{"class":642},[637,36046,696],{"class":676},[637,36048,699],{"class":642},[637,36050,4626],{"class":663},[637,36052,705],{"class":642},[637,36054,36055,36057,36059,36061,36063,36065,36067,36069],{"class":639,"line":729},[637,36056,677],{"class":676},[637,36058,680],{"class":642},[637,36060,3872],{"class":683},[637,36062,693],{"class":642},[637,36064,696],{"class":676},[637,36066,699],{"class":642},[637,36068,633],{"class":663},[637,36070,705],{"class":642},[637,36072,36073],{"class":639,"line":739},[637,36074,742],{"emptyLinePlaceholder":594},[637,36076,36077,36079,36082,36084,36086,36088,36091,36093],{"class":639,"line":745},[637,36078,2415],{"class":650},[637,36080,36081],{"class":683}," tubePath ",[637,36083,657],{"class":642},[637,36085,3872],{"class":2434},[637,36087,2437],{"class":683},[637,36089,36090],{"class":642},"new",[637,36092,36038],{"class":2434},[637,36094,4698],{"class":683},[637,36096,36097,36100,36102,36104,36106,36108,36110,36112,36114,36116,36118],{"class":639,"line":755},[637,36098,36099],{"class":642},"  new",[637,36101,30597],{"class":2434},[637,36103,2437],{"class":683},[637,36105,8505],{"class":642},[637,36107,1874],{"class":2501},[637,36109,687],{"class":642},[637,36111,2506],{"class":2501},[637,36113,687],{"class":642},[637,36115,2506],{"class":2501},[637,36117,3340],{"class":683},[637,36119,2488],{"class":642},[637,36121,36122,36124,36126,36128,36130,36132,36134,36136,36138,36140,36142,36144],{"class":639,"line":778},[637,36123,36099],{"class":642},[637,36125,30597],{"class":2434},[637,36127,2437],{"class":683},[637,36129,8505],{"class":642},[637,36131,1946],{"class":2501},[637,36133,687],{"class":642},[637,36135,8475],{"class":642},[637,36137,1874],{"class":2501},[637,36139,687],{"class":642},[637,36141,2506],{"class":2501},[637,36143,3340],{"class":683},[637,36145,2488],{"class":642},[637,36147,36148,36150,36152,36154,36156,36158,36160,36162,36164,36166],{"class":639,"line":790},[637,36149,36099],{"class":642},[637,36151,30597],{"class":2434},[637,36153,2437],{"class":683},[637,36155,1946],{"class":2501},[637,36157,687],{"class":642},[637,36159,2561],{"class":2501},[637,36161,687],{"class":642},[637,36163,2506],{"class":2501},[637,36165,3340],{"class":683},[637,36167,2488],{"class":642},[637,36169,36170,36172,36174,36176,36178,36180,36182,36184,36186,36188],{"class":639,"line":800},[637,36171,36099],{"class":642},[637,36173,30597],{"class":2434},[637,36175,2437],{"class":683},[637,36177,1874],{"class":2501},[637,36179,687],{"class":642},[637,36181,2506],{"class":2501},[637,36183,687],{"class":642},[637,36185,2506],{"class":2501},[637,36187,3340],{"class":683},[637,36189,2488],{"class":642},[637,36191,36192],{"class":639,"line":805},[637,36193,7189],{"class":683},[637,36195,36196,36198,36200],{"class":639,"line":827},[637,36197,732],{"class":642},[637,36199,647],{"class":646},[637,36201,669],{"class":642},[637,36203,36204],{"class":639,"line":631},[637,36205,742],{"emptyLinePlaceholder":594},[637,36207,36208,36210,36212],{"class":639,"line":850},[637,36209,643],{"class":642},[637,36211,750],{"class":646},[637,36213,669],{"class":642},[637,36215,36216],{"class":639,"line":861},[637,36217,36218],{"class":1209},"  \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[637,36220,36221,36223,36225,36227,36229,36231,36234,36236,36238,36240,36242,36244,36246],{"class":639,"line":872},[637,36222,758],{"class":642},[637,36224,305],{"class":646},[637,36226,1959],{"class":650},[637,36228,657],{"class":642},[637,36230,660],{"class":642},[637,36232,36233],{"class":663},"[tubePath, 20, 0.2, 8, false]",[637,36235,660],{"class":642},[637,36237,2689],{"class":650},[637,36239,657],{"class":642},[637,36241,660],{"class":642},[637,36243,13327],{"class":663},[637,36245,660],{"class":642},[637,36247,787],{"class":642},[637,36249,36250],{"class":639,"line":882},[637,36251,742],{"emptyLinePlaceholder":594},[637,36253,36254],{"class":639,"line":632},[637,36255,36256],{"class":1209},"  \u003C!-- Tube with a custom material transformations -->\n",[637,36258,36259,36261,36263,36265,36267,36269,36271,36273,36275,36277,36279,36281,36283],{"class":639,"line":902},[637,36260,758],{"class":642},[637,36262,305],{"class":646},[637,36264,1959],{"class":650},[637,36266,657],{"class":642},[637,36268,660],{"class":642},[637,36270,36233],{"class":663},[637,36272,660],{"class":642},[637,36274,1485],{"class":650},[637,36276,657],{"class":642},[637,36278,660],{"class":642},[637,36280,16365],{"class":663},[637,36282,660],{"class":642},[637,36284,669],{"class":642},[637,36286,36287,36289,36291,36293,36295,36297,36299,36301],{"class":639,"line":912},[637,36288,781],{"class":642},[637,36290,13318],{"class":646},[637,36292,2689],{"class":650},[637,36294,657],{"class":642},[637,36296,660],{"class":642},[637,36298,13327],{"class":663},[637,36300,660],{"class":642},[637,36302,787],{"class":642},[637,36304,36305,36307,36309],{"class":639,"line":2625},[637,36306,905],{"class":642},[637,36308,305],{"class":646},[637,36310,669],{"class":642},[637,36312,36313,36315,36317],{"class":639,"line":2634},[637,36314,732],{"class":642},[637,36316,750],{"class":646},[637,36318,669],{"class":642},[504,36320,36321],{"id":30351},"Args",[626,36323,36326],{"className":36324,"code":36325,"language":30324},[30322],"type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3\n\nargs: [\n  path: CurveType,\n  tubularSegments: number,\n  radius: number,\n  radialSegments: number,\n  closed: boolean\n]\n",[618,36327,36325],{"__ignoreMap":576},[1327,36329,36330],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .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":576,"searchDepth":577,"depth":578,"links":36332},[36333,36334],{"id":624,"depth":578,"text":15},{"id":30351,"depth":578,"text":36321},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":305,"description":36335},"zVAYQCaOg4ZLIRgpfR02Fdo7jK-GAaHqfNXcfRiMzEs",[36340,36634,37074,37285,37583],{"id":36341,"title":315,"body":36342,"description":36630,"extension":591,"links":592,"meta":36631,"navigation":594,"path":316,"seo":36632,"stem":317,"__hash__":36633},"docs/2.api/6.debug-performance/helper.md",{"type":501,"value":36343,"toc":36626},[36344,36349,36355,36357,36584,36586,36624],[2295,36345,36346],{},[36347,36348],"debug-performance-helper",{},[614,36350,36351,36354],{},[618,36352,36353],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[504,36356,15],{"id":624},[626,36358,36361],{"className":628,"code":36359,"highlights":36360,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Helper } from '@tresjs/cientos'\nimport { BoxHelper } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresMesh ref=\"boxRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n      \u003CHelper :type=\"BoxHelper\" :args=\"[0xff0000]\" />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,631],[618,36362,36363,36383,36401,36421,36440,36448,36452,36460,36468,36486,36504,36512,36520,36552,36560,36568,36576],{"__ignoreMap":576},[637,36364,36365,36367,36369,36371,36373,36375,36377,36379,36381],{"class":639,"line":577},[637,36366,643],{"class":642},[637,36368,647],{"class":646},[637,36370,651],{"class":650},[637,36372,654],{"class":650},[637,36374,657],{"class":642},[637,36376,660],{"class":642},[637,36378,664],{"class":663},[637,36380,660],{"class":642},[637,36382,669],{"class":642},[637,36384,36385,36387,36389,36391,36393,36395,36397,36399],{"class":639,"line":578},[637,36386,677],{"class":676},[637,36388,680],{"class":642},[637,36390,715],{"class":683},[637,36392,693],{"class":642},[637,36394,696],{"class":676},[637,36396,699],{"class":642},[637,36398,724],{"class":663},[637,36400,705],{"class":642},[637,36402,36404,36406,36408,36411,36413,36415,36417,36419],{"class":36403,"line":708},[639,673],[637,36405,677],{"class":676},[637,36407,680],{"class":642},[637,36409,36410],{"class":683}," Helper",[637,36412,693],{"class":642},[637,36414,696],{"class":676},[637,36416,699],{"class":642},[637,36418,702],{"class":663},[637,36420,705],{"class":642},[637,36422,36423,36425,36427,36430,36432,36434,36436,36438],{"class":639,"line":729},[637,36424,677],{"class":676},[637,36426,680],{"class":642},[637,36428,36429],{"class":683}," BoxHelper",[637,36431,693],{"class":642},[637,36433,696],{"class":676},[637,36435,699],{"class":642},[637,36437,4626],{"class":663},[637,36439,705],{"class":642},[637,36441,36442,36444,36446],{"class":639,"line":739},[637,36443,732],{"class":642},[637,36445,647],{"class":646},[637,36447,669],{"class":642},[637,36449,36450],{"class":639,"line":745},[637,36451,742],{"emptyLinePlaceholder":594},[637,36453,36454,36456,36458],{"class":639,"line":755},[637,36455,643],{"class":642},[637,36457,750],{"class":646},[637,36459,669],{"class":642},[637,36461,36462,36464,36466],{"class":639,"line":778},[637,36463,758],{"class":642},[637,36465,761],{"class":646},[637,36467,669],{"class":642},[637,36469,36470,36472,36474,36476,36478,36480,36482,36484],{"class":639,"line":790},[637,36471,781],{"class":642},[637,36473,784],{"class":646},[637,36475,1485],{"class":650},[637,36477,657],{"class":642},[637,36479,660],{"class":642},[637,36481,13280],{"class":663},[637,36483,660],{"class":642},[637,36485,787],{"class":642},[637,36487,36488,36490,36492,36494,36496,36498,36500,36502],{"class":639,"line":800},[637,36489,781],{"class":642},[637,36491,856],{"class":646},[637,36493,3872],{"class":650},[637,36495,657],{"class":642},[637,36497,660],{"class":642},[637,36499,16336],{"class":663},[637,36501,660],{"class":642},[637,36503,669],{"class":642},[637,36505,36506,36508,36510],{"class":639,"line":805},[637,36507,853],{"class":642},[637,36509,867],{"class":646},[637,36511,787],{"class":642},[637,36513,36514,36516,36518],{"class":639,"line":827},[637,36515,853],{"class":642},[637,36517,877],{"class":646},[637,36519,787],{"class":642},[637,36521,36523,36525,36527,36530,36532,36534,36537,36539,36541,36543,36545,36548,36550],{"class":36522,"line":631},[639,673],[637,36524,853],{"class":642},[637,36526,315],{"class":646},[637,36528,36529],{"class":650}," :type",[637,36531,657],{"class":642},[637,36533,660],{"class":642},[637,36535,36536],{"class":663},"BoxHelper",[637,36538,660],{"class":642},[637,36540,1959],{"class":650},[637,36542,657],{"class":642},[637,36544,660],{"class":642},[637,36546,36547],{"class":663},"[0xff0000]",[637,36549,660],{"class":642},[637,36551,787],{"class":642},[637,36553,36554,36556,36558],{"class":639,"line":850},[637,36555,895],{"class":642},[637,36557,856],{"class":646},[637,36559,669],{"class":642},[637,36561,36562,36564,36566],{"class":639,"line":861},[637,36563,781],{"class":642},[637,36565,9681],{"class":646},[637,36567,787],{"class":642},[637,36569,36570,36572,36574],{"class":639,"line":872},[637,36571,905],{"class":642},[637,36573,761],{"class":646},[637,36575,669],{"class":642},[637,36577,36578,36580,36582],{"class":639,"line":882},[637,36579,732],{"class":642},[637,36581,750],{"class":646},[637,36583,669],{"class":642},[504,36585,922],{"id":921},[927,36587,36588,36598],{},[930,36589,36590],{},[933,36591,36592,36594,36596],{},[936,36593,938],{"align":997},[936,36595,941],{"align":997},[936,36597,944],{},[946,36599,36600,36611],{},[933,36601,36602,36606,36609],{},[951,36603,36604],{"align":997},[1669,36605,5517],{},[951,36607,36608],{"align":997},"Helper constructor - required",[951,36610],{},[933,36612,36613,36617,36620],{},[951,36614,36615],{"align":997},[1669,36616,30351],{},[951,36618,36619],{"align":997},"Helper constructor args",[951,36621,36622],{},[618,36623,3579],{},[1327,36625,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":36627},[36628,36629],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":315,"description":36630},"sOeaxtC-_woCHM-l_CN1ntMywo7uC7PTbXeoO7-e15E",{"id":36635,"title":319,"body":36636,"description":37070,"extension":591,"links":592,"meta":37071,"navigation":594,"path":320,"seo":37072,"stem":321,"__hash__":37073},"docs/2.api/6.debug-performance/lod.md",{"type":501,"value":36637,"toc":37066},[36638,36643,36646,36657,36659,37013,37015,37064],[2295,36639,36640],{},[36641,36642],"debug-performance-lod",{},[614,36644,36645],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[614,36647,36648,36651,36652,36656],{},[618,36649,36650],{},"\u003CLOD />"," is a wrapper for THREE's ",[1140,36653,319],{"href":36654,"rel":36655},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1144]," class.",[504,36658,15],{"id":624},[626,36660,36662],{"className":628,"code":36661,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { LOD } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CLOD :levels=\"[0, 5, 10]\">\n      \u003C!-- High detail mesh - shown when close -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial color=\"red\" />\n      \u003C/TresMesh>\n      \u003C!-- Medium detail mesh - shown at mid distance -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 16, 16]\" />\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003C!-- Low detail mesh - shown when far -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 8, 8]\" />\n        \u003CTresMeshStandardMaterial color=\"yellow\" />\n      \u003C/TresMesh>\n    \u003C/LOD>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,36663,36664,36684,36702,36721,36729,36733,36741,36749,36767,36787,36792,36800,36819,36838,36846,36851,36859,36878,36896,36904,36909,36917,36936,36955,36963,36971,36979,36997,37005],{"__ignoreMap":576},[637,36665,36666,36668,36670,36672,36674,36676,36678,36680,36682],{"class":639,"line":577},[637,36667,643],{"class":642},[637,36669,647],{"class":646},[637,36671,651],{"class":650},[637,36673,654],{"class":650},[637,36675,657],{"class":642},[637,36677,660],{"class":642},[637,36679,664],{"class":663},[637,36681,660],{"class":642},[637,36683,669],{"class":642},[637,36685,36686,36688,36690,36692,36694,36696,36698,36700],{"class":639,"line":578},[637,36687,677],{"class":676},[637,36689,680],{"class":642},[637,36691,715],{"class":683},[637,36693,693],{"class":642},[637,36695,696],{"class":676},[637,36697,699],{"class":642},[637,36699,724],{"class":663},[637,36701,705],{"class":642},[637,36703,36704,36706,36708,36711,36713,36715,36717,36719],{"class":639,"line":708},[637,36705,677],{"class":676},[637,36707,680],{"class":642},[637,36709,36710],{"class":683}," LOD",[637,36712,693],{"class":642},[637,36714,696],{"class":676},[637,36716,699],{"class":642},[637,36718,702],{"class":663},[637,36720,705],{"class":642},[637,36722,36723,36725,36727],{"class":639,"line":729},[637,36724,732],{"class":642},[637,36726,647],{"class":646},[637,36728,669],{"class":642},[637,36730,36731],{"class":639,"line":739},[637,36732,742],{"emptyLinePlaceholder":594},[637,36734,36735,36737,36739],{"class":639,"line":745},[637,36736,643],{"class":642},[637,36738,750],{"class":646},[637,36740,669],{"class":642},[637,36742,36743,36745,36747],{"class":639,"line":755},[637,36744,758],{"class":642},[637,36746,761],{"class":646},[637,36748,669],{"class":642},[637,36750,36751,36753,36755,36757,36759,36761,36763,36765],{"class":639,"line":778},[637,36752,781],{"class":642},[637,36754,784],{"class":646},[637,36756,1485],{"class":650},[637,36758,657],{"class":642},[637,36760,660],{"class":642},[637,36762,7445],{"class":663},[637,36764,660],{"class":642},[637,36766,787],{"class":642},[637,36768,36769,36771,36773,36776,36778,36780,36783,36785],{"class":639,"line":790},[637,36770,781],{"class":642},[637,36772,319],{"class":646},[637,36774,36775],{"class":650}," :levels",[637,36777,657],{"class":642},[637,36779,660],{"class":642},[637,36781,36782],{"class":663},"[0, 5, 10]",[637,36784,660],{"class":642},[637,36786,669],{"class":642},[637,36788,36789],{"class":639,"line":800},[637,36790,36791],{"class":1209},"      \u003C!-- High detail mesh - shown when close -->\n",[637,36793,36794,36796,36798],{"class":639,"line":805},[637,36795,853],{"class":642},[637,36797,856],{"class":646},[637,36799,669],{"class":642},[637,36801,36802,36804,36806,36808,36810,36812,36815,36817],{"class":639,"line":827},[637,36803,864],{"class":642},[637,36805,3958],{"class":646},[637,36807,1959],{"class":650},[637,36809,657],{"class":642},[637,36811,660],{"class":642},[637,36813,36814],{"class":663},"[1, 32, 32]",[637,36816,660],{"class":642},[637,36818,787],{"class":642},[637,36820,36821,36823,36825,36827,36829,36831,36834,36836],{"class":639,"line":631},[637,36822,864],{"class":642},[637,36824,2686],{"class":646},[637,36826,2689],{"class":650},[637,36828,657],{"class":642},[637,36830,660],{"class":642},[637,36832,36833],{"class":663},"red",[637,36835,660],{"class":642},[637,36837,787],{"class":642},[637,36839,36840,36842,36844],{"class":639,"line":850},[637,36841,885],{"class":642},[637,36843,856],{"class":646},[637,36845,669],{"class":642},[637,36847,36848],{"class":639,"line":861},[637,36849,36850],{"class":1209},"      \u003C!-- Medium detail mesh - shown at mid distance -->\n",[637,36852,36853,36855,36857],{"class":639,"line":872},[637,36854,853],{"class":642},[637,36856,856],{"class":646},[637,36858,669],{"class":642},[637,36860,36861,36863,36865,36867,36869,36871,36874,36876],{"class":639,"line":882},[637,36862,864],{"class":642},[637,36864,3958],{"class":646},[637,36866,1959],{"class":650},[637,36868,657],{"class":642},[637,36870,660],{"class":642},[637,36872,36873],{"class":663},"[1, 16, 16]",[637,36875,660],{"class":642},[637,36877,787],{"class":642},[637,36879,36880,36882,36884,36886,36888,36890,36892,36894],{"class":639,"line":632},[637,36881,864],{"class":642},[637,36883,2686],{"class":646},[637,36885,2689],{"class":650},[637,36887,657],{"class":642},[637,36889,660],{"class":642},[637,36891,13327],{"class":663},[637,36893,660],{"class":642},[637,36895,787],{"class":642},[637,36897,36898,36900,36902],{"class":639,"line":902},[637,36899,885],{"class":642},[637,36901,856],{"class":646},[637,36903,669],{"class":642},[637,36905,36906],{"class":639,"line":912},[637,36907,36908],{"class":1209},"      \u003C!-- Low detail mesh - shown when far -->\n",[637,36910,36911,36913,36915],{"class":639,"line":2625},[637,36912,853],{"class":642},[637,36914,856],{"class":646},[637,36916,669],{"class":642},[637,36918,36919,36921,36923,36925,36927,36929,36932,36934],{"class":639,"line":2634},[637,36920,864],{"class":642},[637,36922,3958],{"class":646},[637,36924,1959],{"class":650},[637,36926,657],{"class":642},[637,36928,660],{"class":642},[637,36930,36931],{"class":663},"[1, 8, 8]",[637,36933,660],{"class":642},[637,36935,787],{"class":642},[637,36937,36938,36940,36942,36944,36946,36948,36951,36953],{"class":639,"line":2654},[637,36939,864],{"class":642},[637,36941,2686],{"class":646},[637,36943,2689],{"class":650},[637,36945,657],{"class":642},[637,36947,660],{"class":642},[637,36949,36950],{"class":663},"yellow",[637,36952,660],{"class":642},[637,36954,787],{"class":642},[637,36956,36957,36959,36961],{"class":639,"line":2663},[637,36958,885],{"class":642},[637,36960,856],{"class":646},[637,36962,669],{"class":642},[637,36964,36965,36967,36969],{"class":639,"line":2672},[637,36966,895],{"class":642},[637,36968,319],{"class":646},[637,36970,669],{"class":642},[637,36972,36973,36975,36977],{"class":639,"line":2681},[637,36974,781],{"class":642},[637,36976,9681],{"class":646},[637,36978,787],{"class":642},[637,36980,36981,36983,36985,36987,36989,36991,36993,36995],{"class":639,"line":2703},[637,36982,781],{"class":642},[637,36984,9700],{"class":646},[637,36986,1485],{"class":650},[637,36988,657],{"class":642},[637,36990,660],{"class":642},[637,36992,13362],{"class":663},[637,36994,660],{"class":642},[637,36996,787],{"class":642},[637,36998,36999,37001,37003],{"class":639,"line":2747},[637,37000,905],{"class":642},[637,37002,761],{"class":646},[637,37004,669],{"class":642},[637,37006,37007,37009,37011],{"class":639,"line":2756},[637,37008,732],{"class":642},[637,37010,750],{"class":646},[637,37012,669],{"class":642},[504,37014,922],{"id":921},[927,37016,37017,37027],{},[930,37018,37019],{},[933,37020,37021,37023,37025],{},[936,37022,938],{"align":997},[936,37024,941],{"align":997},[936,37026,944],{},[946,37028,37029,37050],{},[933,37030,37031,37036,37048],{},[951,37032,37033],{"align":997},[1669,37034,37035],{},"levels",[951,37037,37038,37041,37042,37044,37045,37047],{"align":997},[618,37039,37040],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[618,37043,37035],{}," value for each ",[618,37046,319],{}," child.",[951,37049],{},[933,37051,37052,37057,37060],{},[951,37053,37054],{"align":997},[1669,37055,37056],{},"hysteresis",[951,37058,37059],{"align":997},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[951,37061,37062],{},[618,37063,13783],{},[1327,37065,28194],{},{"title":576,"searchDepth":577,"depth":578,"links":37067},[37068,37069],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":319,"description":37070},"Vf93ORp5sHYAGbVs0PWkO2EoHaFKA4HQ5pb0l8rQxoQ",{"id":37075,"title":323,"body":37076,"description":37281,"extension":591,"links":592,"meta":37282,"navigation":594,"path":324,"seo":37283,"stem":325,"__hash__":37284},"docs/2.api/6.debug-performance/stats.md",{"type":501,"value":37077,"toc":37277},[37078,37092,37101,37105,37222,37224,37258,37275],[614,37079,37080,37085,37086,37091],{},[1140,37081,37084],{"href":37082,"rel":37083},"https://github.com/mrdoob/stats.js/",[1144],"stats.js"," is a JavaScript performance monitor, made by ",[1140,37087,37090],{"href":37088,"rel":37089},"https://github.com/mrdoob",[1144],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[614,37093,37094,37097,37098,37100],{},[1669,37095,37096],{},"Cientos"," provides a component called ",[618,37099,323],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[504,37102,37104],{"id":37103},"basic-usage","Basic usage",[626,37106,37109],{"className":628,"code":37107,"highlights":37108,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stats } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStats />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,778],[618,37110,37111,37131,37149,37169,37177,37181,37189,37197,37206,37214],{"__ignoreMap":576},[637,37112,37113,37115,37117,37119,37121,37123,37125,37127,37129],{"class":639,"line":577},[637,37114,643],{"class":642},[637,37116,647],{"class":646},[637,37118,651],{"class":650},[637,37120,654],{"class":650},[637,37122,657],{"class":642},[637,37124,660],{"class":642},[637,37126,664],{"class":663},[637,37128,660],{"class":642},[637,37130,669],{"class":642},[637,37132,37133,37135,37137,37139,37141,37143,37145,37147],{"class":639,"line":578},[637,37134,677],{"class":676},[637,37136,680],{"class":642},[637,37138,715],{"class":683},[637,37140,693],{"class":642},[637,37142,696],{"class":676},[637,37144,699],{"class":642},[637,37146,724],{"class":663},[637,37148,705],{"class":642},[637,37150,37152,37154,37156,37159,37161,37163,37165,37167],{"class":37151,"line":708},[639,673],[637,37153,677],{"class":676},[637,37155,680],{"class":642},[637,37157,37158],{"class":683}," Stats",[637,37160,693],{"class":642},[637,37162,696],{"class":676},[637,37164,699],{"class":642},[637,37166,702],{"class":663},[637,37168,705],{"class":642},[637,37170,37171,37173,37175],{"class":639,"line":729},[637,37172,732],{"class":642},[637,37174,647],{"class":646},[637,37176,669],{"class":642},[637,37178,37179],{"class":639,"line":739},[637,37180,742],{"emptyLinePlaceholder":594},[637,37182,37183,37185,37187],{"class":639,"line":745},[637,37184,643],{"class":642},[637,37186,750],{"class":646},[637,37188,669],{"class":642},[637,37190,37191,37193,37195],{"class":639,"line":755},[637,37192,758],{"class":642},[637,37194,761],{"class":646},[637,37196,669],{"class":642},[637,37198,37200,37202,37204],{"class":37199,"line":778},[639,673],[637,37201,781],{"class":642},[637,37203,323],{"class":646},[637,37205,787],{"class":642},[637,37207,37208,37210,37212],{"class":639,"line":790},[637,37209,905],{"class":642},[637,37211,761],{"class":646},[637,37213,669],{"class":642},[637,37215,37216,37218,37220],{"class":639,"line":800},[637,37217,732],{"class":642},[637,37219,750],{"class":646},[637,37221,669],{"class":642},[504,37223,922],{"id":921},[927,37225,37226,37238],{},[930,37227,37228],{},[933,37229,37230,37232,37234,37236],{},[936,37231,938],{"align":997},[936,37233,5969],{},[936,37235,944],{},[936,37237,941],{},[946,37239,37240],{},[933,37241,37242,37247,37251,37255],{},[951,37243,37244],{"align":997},[1669,37245,37246],{},"showPanel",[951,37248,37249],{},[618,37250,5352],{},[951,37252,37253],{},[618,37254,965],{},[951,37256,37257],{},"FPS monitor.",[2213,37259,37260,37263,37266,37269],{},[2216,37261,37262],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2216,37264,37265],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2216,37267,37268],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2216,37270,37271,37272,1146],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1140,37273,37084],{"href":37082,"rel":37274},[1144],[1327,37276,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":37278},[37279,37280],{"id":37103,"depth":578,"text":37104},{"id":921,"depth":578,"text":922},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":323,"description":37281},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":37286,"title":327,"body":37287,"description":37579,"extension":591,"links":592,"meta":37580,"navigation":594,"path":328,"seo":37581,"stem":329,"__hash__":37582},"docs/2.api/6.debug-performance/stats-gl.md",{"type":501,"value":37288,"toc":37575},[37289,37307,37310,37312,37429,37431,37573],[614,37290,37291,37296,37297,37302,37303,37306],{},[1140,37292,37295],{"href":37293,"rel":37294},"https://github.com/RenaudRohlinger/stats-gl",[1144],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1140,37298,37301],{"href":37299,"rel":37300},"https://github.com/RenaudRohlinger",[1144],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1140,37304,37084],{"href":37082,"rel":37305},[1144],", capable of displaying CPU and GPU metrics.",[614,37308,37309],{},"In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.\nSimply drop the StatsGl component into your TresCanvas for easy performance monitoring.",[504,37311,37104],{"id":37103},[626,37313,37316],{"className":628,"code":37314,"highlights":37315,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { StatsGl } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStatsGl />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,778],[618,37317,37318,37338,37356,37376,37384,37388,37396,37404,37413,37421],{"__ignoreMap":576},[637,37319,37320,37322,37324,37326,37328,37330,37332,37334,37336],{"class":639,"line":577},[637,37321,643],{"class":642},[637,37323,647],{"class":646},[637,37325,651],{"class":650},[637,37327,654],{"class":650},[637,37329,657],{"class":642},[637,37331,660],{"class":642},[637,37333,664],{"class":663},[637,37335,660],{"class":642},[637,37337,669],{"class":642},[637,37339,37340,37342,37344,37346,37348,37350,37352,37354],{"class":639,"line":578},[637,37341,677],{"class":676},[637,37343,680],{"class":642},[637,37345,715],{"class":683},[637,37347,693],{"class":642},[637,37349,696],{"class":676},[637,37351,699],{"class":642},[637,37353,724],{"class":663},[637,37355,705],{"class":642},[637,37357,37359,37361,37363,37366,37368,37370,37372,37374],{"class":37358,"line":708},[639,673],[637,37360,677],{"class":676},[637,37362,680],{"class":642},[637,37364,37365],{"class":683}," StatsGl",[637,37367,693],{"class":642},[637,37369,696],{"class":676},[637,37371,699],{"class":642},[637,37373,702],{"class":663},[637,37375,705],{"class":642},[637,37377,37378,37380,37382],{"class":639,"line":729},[637,37379,732],{"class":642},[637,37381,647],{"class":646},[637,37383,669],{"class":642},[637,37385,37386],{"class":639,"line":739},[637,37387,742],{"emptyLinePlaceholder":594},[637,37389,37390,37392,37394],{"class":639,"line":745},[637,37391,643],{"class":642},[637,37393,750],{"class":646},[637,37395,669],{"class":642},[637,37397,37398,37400,37402],{"class":639,"line":755},[637,37399,758],{"class":642},[637,37401,761],{"class":646},[637,37403,669],{"class":642},[637,37405,37407,37409,37411],{"class":37406,"line":778},[639,673],[637,37408,781],{"class":642},[637,37410,327],{"class":646},[637,37412,787],{"class":642},[637,37414,37415,37417,37419],{"class":639,"line":790},[637,37416,905],{"class":642},[637,37418,761],{"class":646},[637,37420,669],{"class":642},[637,37422,37423,37425,37427],{"class":639,"line":800},[637,37424,732],{"class":642},[637,37426,750],{"class":646},[637,37428,669],{"class":642},[504,37430,14023],{"id":17537},[927,37432,37433,37445],{},[930,37434,37435],{},[933,37436,37437,37439,37441,37443],{},[936,37438,8089],{"align":997},[936,37440,5969],{},[936,37442,944],{},[936,37444,941],{},[946,37446,37447,37465,37483,37502,37520,37538,37556],{},[933,37448,37449,37454,37458,37462],{},[951,37450,37451],{"align":997},[1669,37452,37453],{},"logsPerSecond",[951,37455,37456],{},[618,37457,5352],{},[951,37459,37460],{},[618,37461,30794],{},[951,37463,37464],{},"How often to log performance data, in logs per second.",[933,37466,37467,37472,37476,37480],{},[951,37468,37469],{"align":997},[1669,37470,37471],{},"samplesLog",[951,37473,37474],{},[618,37475,5352],{},[951,37477,37478],{},[618,37479,11169],{},[951,37481,37482],{},"Number of recent log samples to keep for computing averages.",[933,37484,37485,37490,37494,37499],{},[951,37486,37487],{"align":997},[1669,37488,37489],{},"samplesGraph",[951,37491,37492],{},[618,37493,5352],{},[951,37495,37496],{},[618,37497,37498],{},"10",[951,37500,37501],{},"Number of recent graph samples to keep for computing averages.",[933,37503,37504,37509,37513,37517],{},[951,37505,37506],{"align":997},[1669,37507,37508],{},"precision",[951,37510,37511],{},[618,37512,5352],{},[951,37514,37515],{},[618,37516,820],{},[951,37518,37519],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[933,37521,37522,37527,37531,37535],{},[951,37523,37524],{"align":997},[1669,37525,37526],{},"horizontal",[951,37528,37529],{},[618,37530,17564],{},[951,37532,37533],{},[618,37534,961],{},[951,37536,37537],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[933,37539,37540,37545,37549,37553],{},[951,37541,37542],{"align":997},[1669,37543,37544],{},"minimal",[951,37546,37547],{},[618,37548,17564],{},[951,37550,37551],{},[618,37552,971],{},[951,37554,37555],{},"A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.",[933,37557,37558,37562,37566,37570],{},[951,37559,37560],{"align":997},[1669,37561,6864],{},[951,37563,37564],{},[618,37565,5352],{},[951,37567,37568],{},[618,37569,965],{},[951,37571,37572],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1327,37574,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":37576},[37577,37578],{"id":37103,"depth":578,"text":37104},{"id":17537,"depth":578,"text":14023},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":327,"description":37579},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":37584,"title":331,"body":37585,"description":38993,"extension":591,"links":592,"meta":38994,"navigation":594,"path":332,"seo":38995,"stem":333,"__hash__":38996},"docs/2.api/6.debug-performance/use-bvh.md",{"type":501,"value":37586,"toc":38969},[37587,37592,37599,37613,37617,37620,37625,37636,37638,37641,37806,37810,37813,37960,37964,37967,38257,38259,38273,38277,38330,38334,38340,38488,38492,38512,38514,38518,38521,38613,38617,38620,38663,38666,38670,38720,38724,38750,38754,38760,38916,38918,38922,38943,38947,38966],[608,37588,37589],{},[37590,37591],"debug-performance-use-bounding-volume-hierarchy",{},[614,37593,37594,37595,37598],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1669,37596,37597],{},"orders of magnitude",", especially for complex models with many triangles.",[614,37600,37601,37602,37607,37608,1146],{},"Built on top of ",[1140,37603,37606],{"href":37604,"rel":37605},"https://github.com/gkjohnson/three-mesh-bvh",[1144],"three-mesh-bvh"," by ",[1140,37609,37612],{"href":37610,"rel":37611},"https://github.com/gkjohnson",[1144],"Garrett Johnson",[504,37614,37616],{"id":37615},"what-is-bvh","What is BVH?",[614,37618,37619],{},"BVH (Bounding Volume Hierarchy) is a spatial data structure that organizes geometry into a tree of bounding boxes. Instead of testing every triangle during raycasting, the algorithm tests bounding boxes first and only checks triangles in boxes that intersect the ray. This reduces raycasting complexity from O(n) to O(log n).",[614,37621,37622],{},[1669,37623,37624],{},"Use cases:",[2213,37626,37627,37630,37633],{},[2216,37628,37629],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2216,37631,37632],{},"Complex models with thousands of triangles",[2216,37634,37635],{},"Scenes with multiple raycasting operations per frame",[504,37637,15],{"id":624},[4051,37639,37640],{"id":37103},"Basic Usage",[626,37642,37645],{"className":628,"code":37643,"highlights":37644,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/complex-model.glb')\nuseBVH(() => model.value?.scene)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n\u003C/template>\n",[578,739,745,755,778,800],[618,37646,37647,37667,37691,37695,37724,37745,37754,37759,37768,37797],{"__ignoreMap":576},[637,37648,37649,37651,37653,37655,37657,37659,37661,37663,37665],{"class":639,"line":577},[637,37650,643],{"class":642},[637,37652,647],{"class":646},[637,37654,651],{"class":650},[637,37656,654],{"class":650},[637,37658,657],{"class":642},[637,37660,660],{"class":642},[637,37662,664],{"class":663},[637,37664,660],{"class":642},[637,37666,669],{"class":642},[637,37668,37670,37672,37674,37676,37678,37681,37683,37685,37687,37689],{"class":37669,"line":578},[639,673],[637,37671,677],{"class":676},[637,37673,680],{"class":642},[637,37675,4347],{"class":683},[637,37677,687],{"class":642},[637,37679,37680],{"class":683}," useBVH",[637,37682,693],{"class":642},[637,37684,696],{"class":676},[637,37686,699],{"class":642},[637,37688,702],{"class":663},[637,37690,705],{"class":642},[637,37692,37693],{"class":639,"line":708},[637,37694,742],{"emptyLinePlaceholder":594},[637,37696,37697,37699,37701,37703,37705,37707,37709,37711,37713,37715,37717,37720,37722],{"class":639,"line":729},[637,37698,2415],{"class":650},[637,37700,680],{"class":642},[637,37702,2420],{"class":646},[637,37704,1218],{"class":642},[637,37706,5009],{"class":683},[637,37708,2428],{"class":642},[637,37710,2431],{"class":642},[637,37712,4347],{"class":2434},[637,37714,2437],{"class":683},[637,37716,2440],{"class":642},[637,37718,37719],{"class":663},"/models/complex-model.glb",[637,37721,2440],{"class":642},[637,37723,2448],{"class":683},[637,37725,37727,37729,37731,37733,37735,37737,37739,37741,37743],{"class":37726,"line":739},[639,673],[637,37728,331],{"class":2434},[637,37730,2437],{"class":683},[637,37732,3674],{"class":642},[637,37734,3677],{"class":650},[637,37736,5048],{"class":683},[637,37738,1146],{"class":642},[637,37740,3685],{"class":683},[637,37742,3688],{"class":642},[637,37744,5057],{"class":683},[637,37746,37748,37750,37752],{"class":37747,"line":745},[639,673],[637,37749,732],{"class":642},[637,37751,647],{"class":646},[637,37753,669],{"class":642},[637,37755,37757],{"class":37756,"line":755},[639,673],[637,37758,742],{"emptyLinePlaceholder":594},[637,37760,37762,37764,37766],{"class":37761,"line":778},[639,673],[637,37763,643],{"class":642},[637,37765,750],{"class":646},[637,37767,669],{"class":642},[637,37769,37770,37772,37774,37776,37778,37780,37782,37784,37786,37788,37790,37793,37795],{"class":639,"line":790},[637,37771,758],{"class":642},[637,37773,4434],{"class":646},[637,37775,2710],{"class":650},[637,37777,657],{"class":642},[637,37779,660],{"class":642},[637,37781,19805],{"class":663},[637,37783,660],{"class":642},[637,37785,4448],{"class":650},[637,37787,657],{"class":642},[637,37789,660],{"class":642},[637,37791,37792],{"class":663},"model.scene",[637,37794,660],{"class":642},[637,37796,787],{"class":642},[637,37798,37800,37802,37804],{"class":37799,"line":800},[639,673],[637,37801,732],{"class":642},[637,37803,750],{"class":646},[637,37805,669],{"class":642},[4051,37807,37809],{"id":37808},"with-debug-visualization","With Debug Visualization",[614,37811,37812],{},"Enable debug mode to visualize the BVH bounding boxes:",[626,37814,37817],{"className":628,"code":37815,"highlights":37816,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    debug: true, // Show BVH bounding boxes\n  }\n)\n\u003C/script>\n",[729,739,745,755],[618,37818,37819,37839,37861,37865,37895,37900,37907,37926,37930,37944,37948,37952],{"__ignoreMap":576},[637,37820,37821,37823,37825,37827,37829,37831,37833,37835,37837],{"class":639,"line":577},[637,37822,643],{"class":642},[637,37824,647],{"class":646},[637,37826,651],{"class":650},[637,37828,654],{"class":650},[637,37830,657],{"class":642},[637,37832,660],{"class":642},[637,37834,664],{"class":663},[637,37836,660],{"class":642},[637,37838,669],{"class":642},[637,37840,37841,37843,37845,37847,37849,37851,37853,37855,37857,37859],{"class":639,"line":578},[637,37842,677],{"class":676},[637,37844,680],{"class":642},[637,37846,4347],{"class":683},[637,37848,687],{"class":642},[637,37850,37680],{"class":683},[637,37852,693],{"class":642},[637,37854,696],{"class":676},[637,37856,699],{"class":642},[637,37858,702],{"class":663},[637,37860,705],{"class":642},[637,37862,37863],{"class":639,"line":708},[637,37864,742],{"emptyLinePlaceholder":594},[637,37866,37868,37870,37872,37874,37876,37878,37880,37882,37884,37886,37888,37891,37893],{"class":37867,"line":729},[639,673],[637,37869,2415],{"class":650},[637,37871,680],{"class":642},[637,37873,2420],{"class":646},[637,37875,1218],{"class":642},[637,37877,5009],{"class":683},[637,37879,2428],{"class":642},[637,37881,2431],{"class":642},[637,37883,4347],{"class":2434},[637,37885,2437],{"class":683},[637,37887,2440],{"class":642},[637,37889,37890],{"class":663},"/models/model.glb",[637,37892,2440],{"class":642},[637,37894,2448],{"class":683},[637,37896,37898],{"class":37897,"line":739},[639,673],[637,37899,742],{"emptyLinePlaceholder":594},[637,37901,37903,37905],{"class":37902,"line":745},[639,673],[637,37904,331],{"class":2434},[637,37906,4698],{"class":683},[637,37908,37910,37912,37914,37916,37918,37920,37922,37924],{"class":37909,"line":755},[639,673],[637,37911,4703],{"class":642},[637,37913,3677],{"class":650},[637,37915,5048],{"class":683},[637,37917,1146],{"class":642},[637,37919,3685],{"class":683},[637,37921,3688],{"class":642},[637,37923,18464],{"class":683},[637,37925,2488],{"class":642},[637,37927,37928],{"class":639,"line":778},[637,37929,2471],{"class":642},[637,37931,37932,37935,37937,37939,37941],{"class":639,"line":790},[637,37933,37934],{"class":646},"    debug",[637,37936,1218],{"class":642},[637,37938,4398],{"class":4397},[637,37940,687],{"class":642},[637,37942,37943],{"class":1209}," // Show BVH bounding boxes\n",[637,37945,37946],{"class":639,"line":800},[637,37947,7857],{"class":642},[637,37949,37950],{"class":639,"line":805},[637,37951,2448],{"class":683},[637,37953,37954,37956,37958],{"class":639,"line":827},[637,37955,732],{"class":642},[637,37957,647],{"class":646},[637,37959,669],{"class":642},[4051,37961,37963],{"id":37962},"reactive-enabled-state","Reactive Enabled State",[614,37965,37966],{},"Control BVH optimization dynamically:",[626,37968,37971],{"className":628,"code":37969,"highlights":37970,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst bvhEnabled = ref(true)\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    enabled: bvhEnabled,\n  }\n)\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"bvhEnabled = !bvhEnabled\">\n      Toggle BVH\n    \u003C/button>\n    \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n  \u003C/div>\n\u003C/template>\n",[729,745,755,778,790],[618,37972,37973,37993,38015,38037,38042,38059,38064,38093,38098,38105,38123,38127,38139,38143,38147,38151,38159,38163,38171,38179,38200,38205,38213,38241,38249],{"__ignoreMap":576},[637,37974,37975,37977,37979,37981,37983,37985,37987,37989,37991],{"class":639,"line":577},[637,37976,643],{"class":642},[637,37978,647],{"class":646},[637,37980,651],{"class":650},[637,37982,654],{"class":650},[637,37984,657],{"class":642},[637,37986,660],{"class":642},[637,37988,664],{"class":663},[637,37990,660],{"class":642},[637,37992,669],{"class":642},[637,37994,37995,37997,37999,38001,38003,38005,38007,38009,38011,38013],{"class":639,"line":578},[637,37996,677],{"class":676},[637,37998,680],{"class":642},[637,38000,3872],{"class":683},[637,38002,687],{"class":642},[637,38004,3489],{"class":683},[637,38006,693],{"class":642},[637,38008,696],{"class":676},[637,38010,699],{"class":642},[637,38012,633],{"class":663},[637,38014,705],{"class":642},[637,38016,38017,38019,38021,38023,38025,38027,38029,38031,38033,38035],{"class":639,"line":708},[637,38018,677],{"class":676},[637,38020,680],{"class":642},[637,38022,4347],{"class":683},[637,38024,687],{"class":642},[637,38026,37680],{"class":683},[637,38028,693],{"class":642},[637,38030,696],{"class":676},[637,38032,699],{"class":642},[637,38034,702],{"class":663},[637,38036,705],{"class":642},[637,38038,38040],{"class":38039,"line":729},[639,673],[637,38041,742],{"emptyLinePlaceholder":594},[637,38043,38044,38046,38049,38051,38053,38055,38057],{"class":639,"line":739},[637,38045,2415],{"class":650},[637,38047,38048],{"class":683}," bvhEnabled ",[637,38050,657],{"class":642},[637,38052,3872],{"class":2434},[637,38054,2437],{"class":683},[637,38056,961],{"class":4397},[637,38058,2448],{"class":683},[637,38060,38062],{"class":38061,"line":745},[639,673],[637,38063,742],{"emptyLinePlaceholder":594},[637,38065,38067,38069,38071,38073,38075,38077,38079,38081,38083,38085,38087,38089,38091],{"class":38066,"line":755},[639,673],[637,38068,2415],{"class":650},[637,38070,680],{"class":642},[637,38072,2420],{"class":646},[637,38074,1218],{"class":642},[637,38076,5009],{"class":683},[637,38078,2428],{"class":642},[637,38080,2431],{"class":642},[637,38082,4347],{"class":2434},[637,38084,2437],{"class":683},[637,38086,2440],{"class":642},[637,38088,37890],{"class":663},[637,38090,2440],{"class":642},[637,38092,2448],{"class":683},[637,38094,38096],{"class":38095,"line":778},[639,673],[637,38097,742],{"emptyLinePlaceholder":594},[637,38099,38101,38103],{"class":38100,"line":790},[639,673],[637,38102,331],{"class":2434},[637,38104,4698],{"class":683},[637,38106,38107,38109,38111,38113,38115,38117,38119,38121],{"class":639,"line":800},[637,38108,4703],{"class":642},[637,38110,3677],{"class":650},[637,38112,5048],{"class":683},[637,38114,1146],{"class":642},[637,38116,3685],{"class":683},[637,38118,3688],{"class":642},[637,38120,18464],{"class":683},[637,38122,2488],{"class":642},[637,38124,38125],{"class":639,"line":805},[637,38126,2471],{"class":642},[637,38128,38129,38132,38134,38137],{"class":639,"line":827},[637,38130,38131],{"class":646},"    enabled",[637,38133,1218],{"class":642},[637,38135,38136],{"class":683}," bvhEnabled",[637,38138,2488],{"class":642},[637,38140,38141],{"class":639,"line":631},[637,38142,7857],{"class":642},[637,38144,38145],{"class":639,"line":850},[637,38146,2448],{"class":683},[637,38148,38149],{"class":639,"line":861},[637,38150,742],{"emptyLinePlaceholder":594},[637,38152,38153,38155,38157],{"class":639,"line":872},[637,38154,732],{"class":642},[637,38156,647],{"class":646},[637,38158,669],{"class":642},[637,38160,38161],{"class":639,"line":882},[637,38162,742],{"emptyLinePlaceholder":594},[637,38164,38165,38167,38169],{"class":639,"line":632},[637,38166,643],{"class":642},[637,38168,750],{"class":646},[637,38170,669],{"class":642},[637,38172,38173,38175,38177],{"class":639,"line":902},[637,38174,758],{"class":642},[637,38176,4119],{"class":646},[637,38178,669],{"class":642},[637,38180,38181,38183,38186,38189,38191,38193,38196,38198],{"class":639,"line":912},[637,38182,781],{"class":642},[637,38184,38185],{"class":646},"button",[637,38187,38188],{"class":650}," @click",[637,38190,657],{"class":642},[637,38192,660],{"class":642},[637,38194,38195],{"class":663},"bvhEnabled = !bvhEnabled",[637,38197,660],{"class":642},[637,38199,669],{"class":642},[637,38201,38202],{"class":639,"line":2625},[637,38203,38204],{"class":683},"      Toggle BVH\n",[637,38206,38207,38209,38211],{"class":639,"line":2634},[637,38208,895],{"class":642},[637,38210,38185],{"class":646},[637,38212,669],{"class":642},[637,38214,38215,38217,38219,38221,38223,38225,38227,38229,38231,38233,38235,38237,38239],{"class":639,"line":2654},[637,38216,781],{"class":642},[637,38218,4434],{"class":646},[637,38220,2710],{"class":650},[637,38222,657],{"class":642},[637,38224,660],{"class":642},[637,38226,19805],{"class":663},[637,38228,660],{"class":642},[637,38230,4448],{"class":650},[637,38232,657],{"class":642},[637,38234,660],{"class":642},[637,38236,37792],{"class":663},[637,38238,660],{"class":642},[637,38240,787],{"class":642},[637,38242,38243,38245,38247],{"class":639,"line":2663},[637,38244,905],{"class":642},[637,38246,4119],{"class":646},[637,38248,669],{"class":642},[637,38250,38251,38253,38255],{"class":639,"line":2672},[637,38252,732],{"class":642},[637,38254,750],{"class":646},[637,38256,669],{"class":642},[504,38258,14023],{"id":17537},[614,38260,38261,38262,38265,38266,38269,38270,38272],{},"Options are divided into ",[1669,38263,38264],{},"reactive"," (can change at runtime) and ",[1669,38267,38268],{},"static"," (set once at creation - changing requires toggling ",[618,38271,16660],{}," off/on to rebuild).",[4051,38274,38276],{"id":38275},"reactive-options","Reactive Options",[927,38278,38279,38292],{},[930,38280,38281],{},[933,38282,38283,38286,38288,38290],{},[936,38284,38285],{"align":997},"Option",[936,38287,5969],{"align":997},[936,38289,944],{"align":997},[936,38291,941],{"align":997},[946,38293,38294,38312],{},[933,38295,38296,38300,38305,38309],{},[951,38297,38298],{"align":997},[1669,38299,16660],{},[951,38301,38302],{"align":997},[618,38303,38304],{},"MaybeRefOrGetter\u003Cboolean>",[951,38306,38307],{"align":997},[618,38308,961],{},[951,38310,38311],{"align":997},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[933,38313,38314,38319,38323,38327],{},[951,38315,38316],{"align":997},[1669,38317,38318],{},"debug",[951,38320,38321],{"align":997},[618,38322,38304],{},[951,38324,38325],{"align":997},[618,38326,971],{},[951,38328,38329],{"align":997},"Show debug visualization of BVH bounding boxes.",[4051,38331,38333],{"id":38332},"static-options-bvh-construction","Static Options (BVH Construction)",[614,38335,38336,38337,38339],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[618,38338,16660],{}," off/on to rebuild with new values.",[927,38341,38342,38354],{},[930,38343,38344],{},[933,38345,38346,38348,38350,38352],{},[936,38347,38285],{"align":997},[936,38349,5969],{"align":997},[936,38351,944],{"align":997},[936,38353,941],{"align":997},[946,38355,38356,38377,38397,38416,38434,38452,38470],{},[933,38357,38358,38363,38367,38371],{},[951,38359,38360],{"align":997},[1669,38361,38362],{},"firstHitOnly",[951,38364,38365],{"align":997},[618,38366,17564],{},[951,38368,38369],{"align":997},[618,38370,971],{},[951,38372,24840,38373,38376],{"align":997},[618,38374,38375],{},"raycastFirst"," for better performance when only the first hit is needed.",[933,38378,38379,38384,38389,38394],{},[951,38380,38381],{"align":997},[1669,38382,38383],{},"splitStrategy",[951,38385,38386],{"align":997},[618,38387,38388],{},"'CENTER' | 'AVERAGE' | 'SAH'",[951,38390,38391],{"align":997},[618,38392,38393],{},"'SAH'",[951,38395,38396],{"align":997},"BVH build strategy. See section below.",[933,38398,38399,38404,38408,38413],{},[951,38400,38401],{"align":997},[1669,38402,38403],{},"maxDepth",[951,38405,38406],{"align":997},[618,38407,5352],{},[951,38409,38410],{"align":997},[618,38411,38412],{},"40",[951,38414,38415],{"align":997},"Maximum tree depth for the BVH structure.",[933,38417,38418,38423,38427,38431],{},[951,38419,38420],{"align":997},[1669,38421,38422],{},"maxLeafSize",[951,38424,38425],{"align":997},[618,38426,5352],{},[951,38428,38429],{"align":997},[618,38430,37498],{},[951,38432,38433],{"align":997},"Target number of triangles per leaf node.",[933,38435,38436,38441,38445,38449],{},[951,38437,38438],{"align":997},[1669,38439,38440],{},"verbose",[951,38442,38443],{"align":997},[618,38444,17564],{},[951,38446,38447],{"align":997},[618,38448,971],{},[951,38450,38451],{"align":997},"Print construction warnings and progress to console.",[933,38453,38454,38459,38463,38467],{},[951,38455,38456],{"align":997},[1669,38457,38458],{},"setBoundingBox",[951,38460,38461],{"align":997},[618,38462,17564],{},[951,38464,38465],{"align":997},[618,38466,961],{},[951,38468,38469],{"align":997},"Automatically set geometry bounding box after BVH construction.",[933,38471,38472,38477,38481,38485],{},[951,38473,38474],{"align":997},[1669,38475,38476],{},"indirect",[951,38478,38479],{"align":997},[618,38480,17564],{},[951,38482,38483],{"align":997},[618,38484,971],{},[951,38486,38487],{"align":997},"If false, creates and rearranges index buffer for better performance.",[4051,38489,38491],{"id":38490},"split-strategies","Split Strategies",[2213,38493,38494,38500,38506],{},[2216,38495,38496,38499],{},[1669,38497,38498],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2216,38501,38502,38505],{},[1669,38503,38504],{},"AVERAGE"," - Balanced build time and runtime performance.",[2216,38507,38508,38511],{},[1669,38509,38510],{},"CENTER"," - Fastest to build, slower at runtime.",[504,38513,23730],{"id":23729},[4051,38515,38517],{"id":38516},"fine-tuning-performance","Fine-tuning Performance",[614,38519,38520],{},"Adjust BVH construction parameters for your use case:",[626,38522,38524],{"className":1186,"code":38523,"language":664,"meta":576,"style":576},"useBVH(\n  target,\n  {\n    splitStrategy: 'SAH', // Best runtime performance\n    maxDepth: 30, // Shallower tree (faster build)\n    maxLeafSize: 5, // Smaller leaves (better culling)\n    verbose: true, // Debug construction\n  }\n)\n",[618,38525,38526,38532,38539,38543,38562,38576,38591,38605,38609],{"__ignoreMap":576},[637,38527,38528,38530],{"class":639,"line":577},[637,38529,331],{"class":2434},[637,38531,4698],{"class":683},[637,38533,38534,38537],{"class":639,"line":578},[637,38535,38536],{"class":683},"  target",[637,38538,2488],{"class":642},[637,38540,38541],{"class":639,"line":708},[637,38542,2471],{"class":642},[637,38544,38545,38548,38550,38552,38555,38557,38559],{"class":639,"line":729},[637,38546,38547],{"class":646},"    splitStrategy",[637,38549,1218],{"class":642},[637,38551,699],{"class":642},[637,38553,38554],{"class":663},"SAH",[637,38556,2440],{"class":642},[637,38558,687],{"class":642},[637,38560,38561],{"class":1209}," // Best runtime performance\n",[637,38563,38564,38567,38569,38571,38573],{"class":639,"line":739},[637,38565,38566],{"class":646},"    maxDepth",[637,38568,1218],{"class":642},[637,38570,8472],{"class":2501},[637,38572,687],{"class":642},[637,38574,38575],{"class":1209}," // Shallower tree (faster build)\n",[637,38577,38578,38581,38583,38586,38588],{"class":639,"line":745},[637,38579,38580],{"class":646},"    maxLeafSize",[637,38582,1218],{"class":642},[637,38584,38585],{"class":2501}," 5",[637,38587,687],{"class":642},[637,38589,38590],{"class":1209}," // Smaller leaves (better culling)\n",[637,38592,38593,38596,38598,38600,38602],{"class":639,"line":755},[637,38594,38595],{"class":646},"    verbose",[637,38597,1218],{"class":642},[637,38599,4398],{"class":4397},[637,38601,687],{"class":642},[637,38603,38604],{"class":1209}," // Debug construction\n",[637,38606,38607],{"class":639,"line":778},[637,38608,7857],{"class":642},[637,38610,38611],{"class":639,"line":790},[637,38612,2448],{"class":683},[4051,38614,38616],{"id":38615},"first-hit-only-mode","First Hit Only Mode",[614,38618,38619],{},"When you only need the closest intersection (e.g., mouse picking):",[626,38621,38623],{"className":1186,"code":38622,"language":664,"meta":576,"style":576},"useBVH(\n  target,\n  {\n    firstHitOnly: true, // Uses raycastFirst internally\n  }\n)\n",[618,38624,38625,38631,38637,38641,38655,38659],{"__ignoreMap":576},[637,38626,38627,38629],{"class":639,"line":577},[637,38628,331],{"class":2434},[637,38630,4698],{"class":683},[637,38632,38633,38635],{"class":639,"line":578},[637,38634,38536],{"class":683},[637,38636,2488],{"class":642},[637,38638,38639],{"class":639,"line":708},[637,38640,2471],{"class":642},[637,38642,38643,38646,38648,38650,38652],{"class":639,"line":729},[637,38644,38645],{"class":646},"    firstHitOnly",[637,38647,1218],{"class":642},[637,38649,4398],{"class":4397},[637,38651,687],{"class":642},[637,38653,38654],{"class":1209}," // Uses raycastFirst internally\n",[637,38656,38657],{"class":639,"line":739},[637,38658,7857],{"class":642},[637,38660,38661],{"class":639,"line":745},[637,38662,2448],{"class":683},[614,38664,38665],{},"This is significantly faster than computing all intersections when you only need one.",[504,38667,38669],{"id":38668},"important-notes","Important Notes",[2213,38671,38672,38678,38697,38703,38714],{},[2216,38673,38674,38677],{},[1669,38675,38676],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2216,38679,38680,38683,38684,3063,38686,38688,38689,1672,38691,38693,38694,38696],{},[1669,38681,38682],{},"Reactive options",": Only ",[618,38685,16660],{},[618,38687,38318],{}," are reactive. Construction options (",[618,38690,38383],{},[618,38692,38403],{},", etc.) are static - to apply new values, toggle ",[618,38695,16660],{}," off/on.",[2216,38698,38699,38702],{},[1669,38700,38701],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2216,38704,38705,38708,38709,3063,38711,38713],{},[1669,38706,38707],{},"Automatic mesh detection",": Works with ",[618,38710,4292],{},[618,38712,6351],{}," instances.",[2216,38715,38716,38719],{},[1669,38717,38718],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[504,38721,38723],{"id":38722},"performance-tips","Performance Tips",[14142,38725,38726,38732,38738,38744],{},[2216,38727,38728,38731],{},[1669,38729,38730],{},"Use firstHitOnly"," when you only need the closest intersection",[2216,38733,38734,38737],{},[1669,38735,38736],{},"SAH strategy"," gives best runtime performance for production",[2216,38739,38740,38743],{},[1669,38741,38742],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2216,38745,38746,38749],{},[1669,38747,38748],{},"Enable debug mode"," during development to verify BVH coverage",[504,38751,38753],{"id":38752},"integration-with-usegltf","Integration with useGLTF",[614,38755,38756,38757,38759],{},"Perfect pairing with ",[618,38758,133],{}," for optimized model loading:",[626,38761,38763],{"className":628,"code":38762,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useBVH, useGLTF } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/high-poly-model.glb', {\n  draco: true\n})\n\nuseBVH(\n  () => model.value?.scene,\n  { splitStrategy: 'SAH' }\n)\n\u003C/script>\n",[618,38764,38765,38785,38807,38811,38842,38852,38858,38862,38868,38886,38904,38908],{"__ignoreMap":576},[637,38766,38767,38769,38771,38773,38775,38777,38779,38781,38783],{"class":639,"line":577},[637,38768,643],{"class":642},[637,38770,647],{"class":646},[637,38772,651],{"class":650},[637,38774,654],{"class":650},[637,38776,657],{"class":642},[637,38778,660],{"class":642},[637,38780,664],{"class":663},[637,38782,660],{"class":642},[637,38784,669],{"class":642},[637,38786,38787,38789,38791,38793,38795,38797,38799,38801,38803,38805],{"class":639,"line":578},[637,38788,677],{"class":676},[637,38790,680],{"class":642},[637,38792,37680],{"class":683},[637,38794,687],{"class":642},[637,38796,4347],{"class":683},[637,38798,693],{"class":642},[637,38800,696],{"class":676},[637,38802,699],{"class":642},[637,38804,702],{"class":663},[637,38806,705],{"class":642},[637,38808,38809],{"class":639,"line":708},[637,38810,742],{"emptyLinePlaceholder":594},[637,38812,38813,38815,38817,38819,38821,38823,38825,38827,38829,38831,38833,38836,38838,38840],{"class":639,"line":729},[637,38814,2415],{"class":650},[637,38816,680],{"class":642},[637,38818,2420],{"class":646},[637,38820,1218],{"class":642},[637,38822,5009],{"class":683},[637,38824,2428],{"class":642},[637,38826,2431],{"class":642},[637,38828,4347],{"class":2434},[637,38830,2437],{"class":683},[637,38832,2440],{"class":642},[637,38834,38835],{"class":663},"/models/high-poly-model.glb",[637,38837,2440],{"class":642},[637,38839,687],{"class":642},[637,38841,1204],{"class":642},[637,38843,38844,38847,38849],{"class":639,"line":739},[637,38845,38846],{"class":646},"  draco",[637,38848,1218],{"class":642},[637,38850,38851],{"class":4397}," true\n",[637,38853,38854,38856],{"class":639,"line":745},[637,38855,2428],{"class":642},[637,38857,2448],{"class":683},[637,38859,38860],{"class":639,"line":755},[637,38861,742],{"emptyLinePlaceholder":594},[637,38863,38864,38866],{"class":639,"line":778},[637,38865,331],{"class":2434},[637,38867,4698],{"class":683},[637,38869,38870,38872,38874,38876,38878,38880,38882,38884],{"class":639,"line":790},[637,38871,4703],{"class":642},[637,38873,3677],{"class":650},[637,38875,5048],{"class":683},[637,38877,1146],{"class":642},[637,38879,3685],{"class":683},[637,38881,3688],{"class":642},[637,38883,18464],{"class":683},[637,38885,2488],{"class":642},[637,38887,38888,38891,38894,38896,38898,38900,38902],{"class":639,"line":800},[637,38889,38890],{"class":642},"  {",[637,38892,38893],{"class":646}," splitStrategy",[637,38895,1218],{"class":642},[637,38897,699],{"class":642},[637,38899,38554],{"class":663},[637,38901,2440],{"class":642},[637,38903,17798],{"class":642},[637,38905,38906],{"class":639,"line":805},[637,38907,2448],{"class":683},[637,38909,38910,38912,38914],{"class":639,"line":827},[637,38911,732],{"class":642},[637,38913,647],{"class":646},[637,38915,669],{"class":642},[504,38917,24697],{"id":24696},[4051,38919,38921],{"id":38920},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2213,38923,38924,38927,38934],{},[2216,38925,38926],{},"Ensure meshes have valid geometry with position attributes",[2216,38928,38929,38930,38933],{},"Check console with ",[618,38931,38932],{},"verbose: true"," to see which meshes are skipped",[2216,38935,38936,38937,38939,38940,38942],{},"Verify the object is an ",[618,38938,7622],{}," (use ",[618,38941,4434],{}," in templates)",[4051,38944,38946],{"id":38945},"performance-not-improving","Performance not improving",[2213,38948,38949,38954,38960,38963],{},[2216,38950,18601,38951,38953],{},[618,38952,38362],{}," if you only need one intersection",[2216,38955,38956,38957,38959],{},"Try different split strategies (",[618,38958,38554],{}," is usually best)",[2216,38961,38962],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[2216,38964,38965],{},"Consider LOD for very distant objects",[1327,38967,38968],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":38970},[38971,38972,38977,38982,38986,38987,38988,38989],{"id":37615,"depth":578,"text":37616},{"id":624,"depth":578,"text":15,"children":38973},[38974,38975,38976],{"id":37103,"depth":708,"text":37640},{"id":37808,"depth":708,"text":37809},{"id":37962,"depth":708,"text":37963},{"id":17537,"depth":578,"text":14023,"children":38978},[38979,38980,38981],{"id":38275,"depth":708,"text":38276},{"id":38332,"depth":708,"text":38333},{"id":38490,"depth":708,"text":38491},{"id":23729,"depth":578,"text":23730,"children":38983},[38984,38985],{"id":38516,"depth":708,"text":38517},{"id":38615,"depth":708,"text":38616},{"id":38668,"depth":578,"text":38669},{"id":38722,"depth":578,"text":38723},{"id":38752,"depth":578,"text":38753},{"id":24696,"depth":578,"text":24697,"children":38990},[38991,38992],{"id":38920,"depth":708,"text":38921},{"id":38945,"depth":708,"text":38946},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":331,"description":38993},"Ubx_HIq-xEI-Pv2T8zVe8LT3sJ_wBF7VmDcGGpLgBYs",[38998,39536,40082,40473,40947,42461,43090],{"id":38999,"title":341,"body":39000,"description":39532,"extension":591,"links":592,"meta":39533,"navigation":594,"path":342,"seo":39534,"stem":343,"__hash__":39535},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":501,"value":39001,"toc":39527},[39002,39007,39021,39023,39299,39301,39493,39495,39505,39525],[608,39003,39004],{},[39005,39006],"light-shadow-accumulative-shadows",{},[614,39008,39009,4304,39012,39015,39016,1146],{},[618,39010,39011],{},"\u003CAccumulativeShadows />",[618,39013,39014],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1140,39017,39020],{"href":39018,"rel":39019},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1144],"Drei component of the same name",[504,39022,15],{"id":624},[626,39024,39027],{"className":628,"code":39025,"highlights":39026,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AccumulativeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#fbb03b\" :shadows=\"true\">\n      \u003CTresPerspectiveCamera\n      :look-at=\"[0, 0, 0]\"\n    />\n    \u003CTresMesh :position-y=\"0.3\" :scale=\"0.4\" :cast-shadow=\"true\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n    \u003CAccumulativeShadows\n      :blend=\"100\"\n      color=\"#fbb03b\"\n      once\n      :position-y=\"-0.4\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,861,872,882,632,902],[618,39028,39029,39049,39069,39087,39095,39099,39107,39136,39142,39154,39158,39199,39207,39215,39223,39231,39245,39258,39264,39279,39283,39291],{"__ignoreMap":576},[637,39030,39031,39033,39035,39037,39039,39041,39043,39045,39047],{"class":639,"line":577},[637,39032,643],{"class":642},[637,39034,647],{"class":646},[637,39036,651],{"class":650},[637,39038,654],{"class":650},[637,39040,657],{"class":642},[637,39042,660],{"class":642},[637,39044,664],{"class":663},[637,39046,660],{"class":642},[637,39048,669],{"class":642},[637,39050,39052,39054,39056,39059,39061,39063,39065,39067],{"class":39051,"line":578},[639,673],[637,39053,677],{"class":676},[637,39055,680],{"class":642},[637,39057,39058],{"class":683}," AccumulativeShadows",[637,39060,693],{"class":642},[637,39062,696],{"class":676},[637,39064,699],{"class":642},[637,39066,702],{"class":663},[637,39068,705],{"class":642},[637,39070,39071,39073,39075,39077,39079,39081,39083,39085],{"class":639,"line":708},[637,39072,677],{"class":676},[637,39074,680],{"class":642},[637,39076,715],{"class":683},[637,39078,693],{"class":642},[637,39080,696],{"class":676},[637,39082,699],{"class":642},[637,39084,724],{"class":663},[637,39086,705],{"class":642},[637,39088,39089,39091,39093],{"class":639,"line":729},[637,39090,732],{"class":642},[637,39092,647],{"class":646},[637,39094,669],{"class":642},[637,39096,39097],{"class":639,"line":739},[637,39098,742],{"emptyLinePlaceholder":594},[637,39100,39101,39103,39105],{"class":639,"line":745},[637,39102,643],{"class":642},[637,39104,750],{"class":646},[637,39106,669],{"class":642},[637,39108,39109,39111,39113,39115,39117,39119,39121,39123,39126,39128,39130,39132,39134],{"class":639,"line":755},[637,39110,758],{"class":642},[637,39112,761],{"class":646},[637,39114,764],{"class":650},[637,39116,657],{"class":642},[637,39118,660],{"class":642},[637,39120,10153],{"class":663},[637,39122,660],{"class":642},[637,39124,39125],{"class":650}," :shadows",[637,39127,657],{"class":642},[637,39129,660],{"class":642},[637,39131,961],{"class":663},[637,39133,660],{"class":642},[637,39135,669],{"class":642},[637,39137,39138,39140],{"class":639,"line":778},[637,39139,853],{"class":642},[637,39141,25531],{"class":646},[637,39143,39144,39146,39148,39150,39152],{"class":639,"line":790},[637,39145,25549],{"class":650},[637,39147,657],{"class":642},[637,39149,660],{"class":642},[637,39151,9623],{"class":663},[637,39153,3131],{"class":642},[637,39155,39156],{"class":639,"line":800},[637,39157,17274],{"class":642},[637,39159,39160,39162,39164,39166,39168,39170,39173,39175,39177,39179,39181,39184,39186,39189,39191,39193,39195,39197],{"class":639,"line":805},[637,39161,781],{"class":642},[637,39163,856],{"class":646},[637,39165,1939],{"class":650},[637,39167,657],{"class":642},[637,39169,660],{"class":642},[637,39171,39172],{"class":663},"0.3",[637,39174,660],{"class":642},[637,39176,813],{"class":650},[637,39178,657],{"class":642},[637,39180,660],{"class":642},[637,39182,39183],{"class":663},"0.4",[637,39185,660],{"class":642},[637,39187,39188],{"class":650}," :cast-shadow",[637,39190,657],{"class":642},[637,39192,660],{"class":642},[637,39194,961],{"class":663},[637,39196,660],{"class":642},[637,39198,669],{"class":642},[637,39200,39201,39203,39205],{"class":639,"line":827},[637,39202,853],{"class":642},[637,39204,27855],{"class":646},[637,39206,787],{"class":642},[637,39208,39209,39211,39213],{"class":639,"line":631},[637,39210,853],{"class":642},[637,39212,877],{"class":646},[637,39214,787],{"class":642},[637,39216,39217,39219,39221],{"class":639,"line":850},[637,39218,895],{"class":642},[637,39220,856],{"class":646},[637,39222,669],{"class":642},[637,39224,39226,39228],{"class":39225,"line":861},[639,673],[637,39227,781],{"class":642},[637,39229,39230],{"class":646},"AccumulativeShadows\n",[637,39232,39234,39237,39239,39241,39243],{"class":39233,"line":872},[639,673],[637,39235,39236],{"class":650},"      :blend",[637,39238,657],{"class":642},[637,39240,660],{"class":642},[637,39242,11169],{"class":663},[637,39244,3131],{"class":642},[637,39246,39248,39250,39252,39254,39256],{"class":39247,"line":882},[639,673],[637,39249,30696],{"class":650},[637,39251,657],{"class":642},[637,39253,660],{"class":642},[637,39255,10153],{"class":663},[637,39257,3131],{"class":642},[637,39259,39261],{"class":39260,"line":632},[639,673],[637,39262,39263],{"class":650},"      once\n",[637,39265,39267,39270,39272,39274,39277],{"class":39266,"line":902},[639,673],[637,39268,39269],{"class":650},"      :position-y",[637,39271,657],{"class":642},[637,39273,660],{"class":642},[637,39275,39276],{"class":663},"-0.4",[637,39278,3131],{"class":642},[637,39280,39281],{"class":639,"line":912},[637,39282,17274],{"class":642},[637,39284,39285,39287,39289],{"class":639,"line":2625},[637,39286,905],{"class":642},[637,39288,761],{"class":646},[637,39290,669],{"class":642},[637,39292,39293,39295,39297],{"class":639,"line":2634},[637,39294,732],{"class":642},[637,39296,750],{"class":646},[637,39298,669],{"class":642},[504,39300,922],{"id":921},[927,39302,39303,39313],{},[930,39304,39305],{},[933,39306,39307,39309,39311],{},[936,39308,938],{},[936,39310,941],{},[936,39312,944],{},[946,39314,39315,39328,39342,39366,39381,39397,39410,39423,39437,39450,39465,39479],{},[933,39316,39317,39321,39324],{},[951,39318,39319],{},[618,39320,3208],{},[951,39322,39323],{},"Whether shadow creation only happens once (resets after props change)",[951,39325,39326],{},[618,39327,971],{},[933,39329,39330,39335,39338],{},[951,39331,39332],{},[618,39333,39334],{},"accumulate",[951,39336,39337],{},"Whether shadows accumulate progressively over several frames",[951,39339,39340],{},[618,39341,961],{},[933,39343,39344,39349,39362],{},[951,39345,39346],{},[618,39347,39348],{},"frames",[951,39350,39351,39352,39355,39356,39358,39359,39361],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[618,39353,39354],{},"accumulate && once",", 1 frame will be consumed every update for ",[618,39357,39348],{}," updates. Otherwise, ",[618,39360,39348],{}," frames are consumed for every update.",[951,39363,39364],{},[618,39365,38412],{},[933,39367,39368,39372,39377],{},[951,39369,39370],{},[618,39371,27616],{},[951,39373,958,39374,39376],{},[618,39375,39334],{},", controls the refresh ratio",[951,39378,39379],{},[618,39380,11169],{},[933,39382,39383,39387,39393],{},[951,39384,39385],{},[618,39386,9079],{},[951,39388,39389,39390,39392],{},"If less than ",[618,39391,13514],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[951,39394,39395],{},[618,39396,13514],{},[933,39398,39399,39403,39406],{},[951,39400,39401],{},[618,39402,5630],{},[951,39404,39405],{},"Scale of the plane",[951,39407,39408],{},[618,39409,37498],{},[933,39411,39412,39416,39419],{},[951,39413,39414],{},[618,39415,11611],{},[951,39417,39418],{},"Opacity of the plane",[951,39420,39421],{},[618,39422,1874],{},[933,39424,39425,39430,39433],{},[951,39426,39427],{},[618,39428,39429],{},"alphaTest",[951,39431,39432],{},"Discards alpha pixels",[951,39434,39435],{},[618,39436,2106],{},[933,39438,39439,39443,39446],{},[951,39440,39441],{},[618,39442,7547],{},[951,39444,39445],{},"Shadow color",[951,39447,39448],{},[618,39449,11594],{},[933,39451,39452,39457,39461],{},[951,39453,39454],{},[618,39455,39456],{},"colorBlend",[951,39458,39389,39459,39392],{},[618,39460,13514],{},[951,39462,39463],{},[618,39464,13514],{},[933,39466,39467,39471,39474],{},[951,39468,39469],{},[618,39470,27974],{},[951,39472,39473],{},"Buffer resolution",[951,39475,39476],{},[618,39477,39478],{},"1024",[933,39480,39481,39486,39489],{},[951,39482,39483],{},[618,39484,39485],{},"toneMapped",[951,39487,39488],{},"Texture tonemapping",[951,39490,39491],{},[618,39492,961],{},[504,39494,35395],{"id":35394},[614,39496,39497,39498,39501,39502,1146],{},"You can bring your own lights to ",[618,39499,39500],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[618,39503,39504],{},"\u003CRandomizedLights />",[614,39506,39507,39508,39512,39513,39515,39516,39519,39520,39524],{},"By default, there's a ",[1140,39509,39510],{"href":362},[618,39511,39504],{}," instance provided in ",[618,39514,39500],{},"'s ",[618,39517,39518],{},"\u003Cslot />",". You can replace it with your own ",[1140,39521,39522],{"href":362},[618,39523,39504],{}," or an alternative by passing it as a child component.",[1327,39526,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":39528},[39529,39530,39531],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":35394,"depth":578,"text":35395},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":341,"description":39532},"52wZKp-YdSVGNT5yYFR1FOUZnGMwxDTUxyUOljm6OBA",{"id":39537,"title":345,"body":39538,"description":40078,"extension":591,"links":592,"meta":40079,"navigation":594,"path":346,"seo":40080,"stem":347,"__hash__":40081},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":501,"value":39539,"toc":40075},[39540,39545,39556,39558,39563,40072],[2295,39541,39542],{},[39543,39544],"light-shadow-bake-shadows",{},[614,39546,39547,37097,39549,39552,39553,39555],{},[1669,39548,37096],{},[618,39550,39551],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[618,39554,971],{},", so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.",[504,39557,37104],{"id":37103},[3199,39559,39560],{},[614,39561,39562],{},"You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.",[626,39564,39567],{"className":628,"code":39565,"highlights":39566,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { BakeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst cubeRef = shallowRef()\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.y = elapsed * 0.5\n    cubeRef.value.rotation.x = elapsed * 0.5\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas\n    clear-color=\"#82DBC5\"\n    shadows\n    @loop=\"onLoop\"\n  >\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 2, 5]\"\n      :look-at=\"[0, 0, 0]\"\n    />\n    \u003CBakeShadows />\n    \u003CTresMesh\n      ref=\"cubeRef\"\n      cast-shadow\n    >\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CTresMesh\n      receive-shadow\n      :position=\"[0, -2, 0]\"\n      :rotation-x=\"-Math.PI / 2\"\n    >\n      \u003CTresPlaneGeometry :args=\"[5, 5]\" />\n      \u003CTresMeshStandardMaterial :color=\"0xF7F7F7\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      cast-shadow\n      :position=\"[0, 10, 0]\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,2681],[618,39568,39569,39589,39609,39627,39645,39649,39662,39666,39696,39713,39741,39765,39769,39773,39781,39785,39793,39800,39813,39818,39832,39836,39842,39854,39866,39870,39879,39885,39897,39902,39906,39914,39932,39940,39946,39951,39964,39978,39982,40001,40021,40029,40035,40039,40052,40056,40064],{"__ignoreMap":576},[637,39570,39571,39573,39575,39577,39579,39581,39583,39585,39587],{"class":639,"line":577},[637,39572,643],{"class":642},[637,39574,647],{"class":646},[637,39576,651],{"class":650},[637,39578,654],{"class":650},[637,39580,657],{"class":642},[637,39582,660],{"class":642},[637,39584,664],{"class":663},[637,39586,660],{"class":642},[637,39588,669],{"class":642},[637,39590,39592,39594,39596,39599,39601,39603,39605,39607],{"class":39591,"line":578},[639,673],[637,39593,677],{"class":676},[637,39595,680],{"class":642},[637,39597,39598],{"class":683}," BakeShadows",[637,39600,693],{"class":642},[637,39602,696],{"class":676},[637,39604,699],{"class":642},[637,39606,702],{"class":663},[637,39608,705],{"class":642},[637,39610,39611,39613,39615,39617,39619,39621,39623,39625],{"class":639,"line":708},[637,39612,677],{"class":676},[637,39614,680],{"class":642},[637,39616,715],{"class":683},[637,39618,693],{"class":642},[637,39620,696],{"class":676},[637,39622,699],{"class":642},[637,39624,724],{"class":663},[637,39626,705],{"class":642},[637,39628,39629,39631,39633,39635,39637,39639,39641,39643],{"class":639,"line":729},[637,39630,677],{"class":676},[637,39632,680],{"class":642},[637,39634,3498],{"class":683},[637,39636,693],{"class":642},[637,39638,696],{"class":676},[637,39640,699],{"class":642},[637,39642,633],{"class":663},[637,39644,705],{"class":642},[637,39646,39647],{"class":639,"line":739},[637,39648,742],{"emptyLinePlaceholder":594},[637,39650,39651,39653,39656,39658,39660],{"class":639,"line":745},[637,39652,2415],{"class":650},[637,39654,39655],{"class":683}," cubeRef ",[637,39657,657],{"class":642},[637,39659,3498],{"class":2434},[637,39661,6535],{"class":683},[637,39663,39664],{"class":639,"line":755},[637,39665,742],{"emptyLinePlaceholder":594},[637,39667,39668,39671,39674,39677,39680,39683,39685,39687,39689,39691,39694],{"class":639,"line":778},[637,39669,39670],{"class":650},"function",[637,39672,39673],{"class":2434}," onLoop",[637,39675,39676],{"class":642},"({",[637,39678,39679],{"class":6838}," elapsed",[637,39681,39682],{"class":642}," }:",[637,39684,680],{"class":642},[637,39686,39679],{"class":646},[637,39688,1218],{"class":642},[637,39690,5357],{"class":1200},[637,39692,39693],{"class":642}," })",[637,39695,1204],{"class":642},[637,39697,39698,39700,39702,39705,39707,39709,39711],{"class":639,"line":790},[637,39699,21254],{"class":676},[637,39701,3074],{"class":646},[637,39703,39704],{"class":683},"cubeRef",[637,39706,1146],{"class":642},[637,39708,3685],{"class":683},[637,39710,4734],{"class":646},[637,39712,3260],{"class":642},[637,39714,39715,39718,39720,39722,39724,39726,39728,39731,39733,39735,39738],{"class":639,"line":800},[637,39716,39717],{"class":683},"    cubeRef",[637,39719,1146],{"class":642},[637,39721,3685],{"class":683},[637,39723,1146],{"class":642},[637,39725,5627],{"class":683},[637,39727,1146],{"class":642},[637,39729,39730],{"class":683},"y",[637,39732,2431],{"class":642},[637,39734,39679],{"class":683},[637,39736,39737],{"class":642}," *",[637,39739,39740],{"class":2501}," 0.5\n",[637,39742,39743,39745,39747,39749,39751,39753,39755,39757,39759,39761,39763],{"class":639,"line":805},[637,39744,39717],{"class":683},[637,39746,1146],{"class":642},[637,39748,3685],{"class":683},[637,39750,1146],{"class":642},[637,39752,5627],{"class":683},[637,39754,1146],{"class":642},[637,39756,7840],{"class":683},[637,39758,2431],{"class":642},[637,39760,39679],{"class":683},[637,39762,39737],{"class":642},[637,39764,39740],{"class":2501},[637,39766,39767],{"class":639,"line":827},[637,39768,7857],{"class":642},[637,39770,39771],{"class":639,"line":631},[637,39772,1325],{"class":642},[637,39774,39775,39777,39779],{"class":639,"line":850},[637,39776,732],{"class":642},[637,39778,647],{"class":646},[637,39780,669],{"class":642},[637,39782,39783],{"class":639,"line":861},[637,39784,742],{"emptyLinePlaceholder":594},[637,39786,39787,39789,39791],{"class":639,"line":872},[637,39788,643],{"class":642},[637,39790,750],{"class":646},[637,39792,669],{"class":642},[637,39794,39795,39797],{"class":639,"line":882},[637,39796,758],{"class":642},[637,39798,39799],{"class":646},"TresCanvas\n",[637,39801,39802,39805,39807,39809,39811],{"class":639,"line":632},[637,39803,39804],{"class":650},"    clear-color",[637,39806,657],{"class":642},[637,39808,660],{"class":642},[637,39810,11791],{"class":663},[637,39812,3131],{"class":642},[637,39814,39815],{"class":639,"line":902},[637,39816,39817],{"class":650},"    shadows\n",[637,39819,39820,39823,39825,39827,39830],{"class":639,"line":912},[637,39821,39822],{"class":650},"    @loop",[637,39824,657],{"class":642},[637,39826,660],{"class":642},[637,39828,39829],{"class":663},"onLoop",[637,39831,3131],{"class":642},[637,39833,39834],{"class":639,"line":2625},[637,39835,5173],{"class":642},[637,39837,39838,39840],{"class":639,"line":2634},[637,39839,781],{"class":642},[637,39841,25531],{"class":646},[637,39843,39844,39846,39848,39850,39852],{"class":639,"line":2654},[637,39845,17261],{"class":650},[637,39847,657],{"class":642},[637,39849,660],{"class":642},[637,39851,7445],{"class":663},[637,39853,3131],{"class":642},[637,39855,39856,39858,39860,39862,39864],{"class":639,"line":2663},[637,39857,25549],{"class":650},[637,39859,657],{"class":642},[637,39861,660],{"class":642},[637,39863,9623],{"class":663},[637,39865,3131],{"class":642},[637,39867,39868],{"class":639,"line":2672},[637,39869,17274],{"class":642},[637,39871,39873,39875,39877],{"class":39872,"line":2681},[639,673],[637,39874,781],{"class":642},[637,39876,39551],{"class":646},[637,39878,787],{"class":642},[637,39880,39881,39883],{"class":639,"line":2703},[637,39882,781],{"class":642},[637,39884,5126],{"class":646},[637,39886,39887,39889,39891,39893,39895],{"class":639,"line":2747},[637,39888,12363],{"class":650},[637,39890,657],{"class":642},[637,39892,660],{"class":642},[637,39894,39704],{"class":663},[637,39896,3131],{"class":642},[637,39898,39899],{"class":639,"line":2756},[637,39900,39901],{"class":650},"      cast-shadow\n",[637,39903,39904],{"class":639,"line":2765},[637,39905,12391],{"class":642},[637,39907,39908,39910,39912],{"class":639,"line":3922},[637,39909,853],{"class":642},[637,39911,867],{"class":646},[637,39913,787],{"class":642},[637,39915,39916,39918,39920,39922,39924,39926,39928,39930],{"class":639,"line":3953},[637,39917,853],{"class":642},[637,39919,2686],{"class":646},[637,39921,2689],{"class":650},[637,39923,657],{"class":642},[637,39925,660],{"class":642},[637,39927,13327],{"class":663},[637,39929,660],{"class":642},[637,39931,787],{"class":642},[637,39933,39934,39936,39938],{"class":639,"line":3974},[637,39935,895],{"class":642},[637,39937,856],{"class":646},[637,39939,669],{"class":642},[637,39941,39942,39944],{"class":639,"line":3993},[637,39943,781],{"class":642},[637,39945,5126],{"class":646},[637,39947,39948],{"class":639,"line":4025},[637,39949,39950],{"class":650},"      receive-shadow\n",[637,39952,39953,39955,39957,39959,39962],{"class":639,"line":4034},[637,39954,17261],{"class":650},[637,39956,657],{"class":642},[637,39958,660],{"class":642},[637,39960,39961],{"class":663},"[0, -2, 0]",[637,39963,3131],{"class":642},[637,39965,39966,39969,39971,39973,39976],{"class":639,"line":4043},[637,39967,39968],{"class":650},"      :rotation-x",[637,39970,657],{"class":642},[637,39972,660],{"class":642},[637,39974,39975],{"class":663},"-Math.PI / 2",[637,39977,3131],{"class":642},[637,39979,39980],{"class":639,"line":21441},[637,39981,12391],{"class":642},[637,39983,39984,39986,39988,39990,39992,39994,39997,39999],{"class":639,"line":21456},[637,39985,853],{"class":642},[637,39987,27772],{"class":646},[637,39989,1959],{"class":650},[637,39991,657],{"class":642},[637,39993,660],{"class":642},[637,39995,39996],{"class":663},"[5, 5]",[637,39998,660],{"class":642},[637,40000,787],{"class":642},[637,40002,40003,40005,40007,40010,40012,40014,40017,40019],{"class":639,"line":21471},[637,40004,853],{"class":642},[637,40006,2686],{"class":646},[637,40008,40009],{"class":650}," :color",[637,40011,657],{"class":642},[637,40013,660],{"class":642},[637,40015,40016],{"class":663},"0xF7F7F7",[637,40018,660],{"class":642},[637,40020,787],{"class":642},[637,40022,40023,40025,40027],{"class":639,"line":21476},[637,40024,895],{"class":642},[637,40026,856],{"class":646},[637,40028,669],{"class":642},[637,40030,40031,40033],{"class":639,"line":21483},[637,40032,781],{"class":642},[637,40034,17243],{"class":646},[637,40036,40037],{"class":639,"line":21488},[637,40038,39901],{"class":650},[637,40040,40041,40043,40045,40047,40050],{"class":639,"line":21494},[637,40042,17261],{"class":650},[637,40044,657],{"class":642},[637,40046,660],{"class":642},[637,40048,40049],{"class":663},"[0, 10, 0]",[637,40051,3131],{"class":642},[637,40053,40054],{"class":639,"line":21515},[637,40055,17274],{"class":642},[637,40057,40058,40060,40062],{"class":639,"line":21521},[637,40059,905],{"class":642},[637,40061,761],{"class":646},[637,40063,669],{"class":642},[637,40065,40066,40068,40070],{"class":639,"line":21528},[637,40067,732],{"class":642},[637,40069,750],{"class":646},[637,40071,669],{"class":642},[1327,40073,40074],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":40076},[40077],{"id":37103,"depth":578,"text":37104},"Bakes shadows in the first frame for performance optimization.",{},{"title":345,"description":40078},"hU2MwhHPZEp5uQ1ZY4cZSmx8JjSu1SZkY7M14ckgtTM",{"id":40083,"title":349,"body":40084,"description":40469,"extension":591,"links":592,"meta":40470,"navigation":594,"path":350,"seo":40471,"stem":351,"__hash__":40472},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":501,"value":40085,"toc":40465},[40086,40091,40100,40102,40369,40371,40373,40463],[608,40087,40088],{},[40089,40090],"light-shadow-circle-shadow",{},[614,40092,40093,40096,40097,1146],{},[618,40094,40095],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[618,40098,40099],{},"THREE.PlaneGeometry",[504,40101,15],{"id":624},[626,40103,40106],{"className":628,"code":40104,"highlights":40105,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CircleShadow, OrbitControls } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n    \u003CTresGroup :position-y=\"-0.5\">\n      \u003CTresMesh :position-y=\"1\">\n        \u003CTresBoxGeometry />\n        \u003CTresMeshToonMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003CCircleShadow :scale=\"1.5\" />\n    \u003C/TresGroup>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,861],[618,40107,40108,40128,40154,40174,40182,40186,40194,40212,40220,40228,40247,40265,40273,40291,40299,40319,40327,40335,40353,40361],{"__ignoreMap":576},[637,40109,40110,40112,40114,40116,40118,40120,40122,40124,40126],{"class":639,"line":577},[637,40111,643],{"class":642},[637,40113,647],{"class":646},[637,40115,651],{"class":650},[637,40117,654],{"class":650},[637,40119,657],{"class":642},[637,40121,660],{"class":642},[637,40123,664],{"class":663},[637,40125,660],{"class":642},[637,40127,669],{"class":642},[637,40129,40131,40133,40135,40138,40140,40142,40144,40146,40148,40150,40152],{"class":40130,"line":578},[639,673],[637,40132,677],{"class":676},[637,40134,680],{"class":642},[637,40136,40137],{"class":683}," CircleShadow",[637,40139,687],{"class":642},[637,40141,690],{"class":683},[637,40143,693],{"class":642},[637,40145,696],{"class":676},[637,40147,9515],{"class":642},[637,40149,702],{"class":663},[637,40151,660],{"class":642},[637,40153,9522],{"class":642},[637,40155,40156,40158,40160,40162,40164,40166,40168,40170,40172],{"class":639,"line":708},[637,40157,677],{"class":676},[637,40159,680],{"class":642},[637,40161,715],{"class":683},[637,40163,693],{"class":642},[637,40165,696],{"class":676},[637,40167,9515],{"class":642},[637,40169,724],{"class":663},[637,40171,660],{"class":642},[637,40173,9522],{"class":642},[637,40175,40176,40178,40180],{"class":639,"line":729},[637,40177,732],{"class":642},[637,40179,647],{"class":646},[637,40181,669],{"class":642},[637,40183,40184],{"class":639,"line":739},[637,40185,742],{"emptyLinePlaceholder":594},[637,40187,40188,40190,40192],{"class":639,"line":745},[637,40189,643],{"class":642},[637,40191,750],{"class":646},[637,40193,669],{"class":642},[637,40195,40196,40198,40200,40202,40204,40206,40208,40210],{"class":639,"line":755},[637,40197,758],{"class":642},[637,40199,761],{"class":646},[637,40201,764],{"class":650},[637,40203,657],{"class":642},[637,40205,660],{"class":642},[637,40207,11791],{"class":663},[637,40209,660],{"class":642},[637,40211,669],{"class":642},[637,40213,40214,40216,40218],{"class":639,"line":778},[637,40215,781],{"class":642},[637,40217,784],{"class":646},[637,40219,787],{"class":642},[637,40221,40222,40224,40226],{"class":639,"line":790},[637,40223,781],{"class":642},[637,40225,795],{"class":646},[637,40227,787],{"class":642},[637,40229,40230,40232,40234,40236,40238,40240,40243,40245],{"class":639,"line":800},[637,40231,781],{"class":642},[637,40233,10041],{"class":646},[637,40235,1939],{"class":650},[637,40237,657],{"class":642},[637,40239,660],{"class":642},[637,40241,40242],{"class":663},"-0.5",[637,40244,660],{"class":642},[637,40246,669],{"class":642},[637,40248,40249,40251,40253,40255,40257,40259,40261,40263],{"class":639,"line":805},[637,40250,853],{"class":642},[637,40252,856],{"class":646},[637,40254,1939],{"class":650},[637,40256,657],{"class":642},[637,40258,660],{"class":642},[637,40260,1874],{"class":663},[637,40262,660],{"class":642},[637,40264,669],{"class":642},[637,40266,40267,40269,40271],{"class":639,"line":827},[637,40268,864],{"class":642},[637,40270,867],{"class":646},[637,40272,787],{"class":642},[637,40274,40275,40277,40279,40281,40283,40285,40287,40289],{"class":639,"line":631},[637,40276,864],{"class":642},[637,40278,13318],{"class":646},[637,40280,2689],{"class":650},[637,40282,657],{"class":642},[637,40284,660],{"class":642},[637,40286,13327],{"class":663},[637,40288,660],{"class":642},[637,40290,787],{"class":642},[637,40292,40293,40295,40297],{"class":639,"line":850},[637,40294,885],{"class":642},[637,40296,856],{"class":646},[637,40298,669],{"class":642},[637,40300,40302,40304,40307,40309,40311,40313,40315,40317],{"class":40301,"line":861},[639,673],[637,40303,853],{"class":642},[637,40305,40306],{"class":646},"CircleShadow",[637,40308,813],{"class":650},[637,40310,657],{"class":642},[637,40312,660],{"class":642},[637,40314,29399],{"class":663},[637,40316,660],{"class":642},[637,40318,787],{"class":642},[637,40320,40321,40323,40325],{"class":639,"line":872},[637,40322,895],{"class":642},[637,40324,10041],{"class":646},[637,40326,669],{"class":642},[637,40328,40329,40331,40333],{"class":639,"line":882},[637,40330,781],{"class":642},[637,40332,9681],{"class":646},[637,40334,787],{"class":642},[637,40336,40337,40339,40341,40343,40345,40347,40349,40351],{"class":639,"line":632},[637,40338,781],{"class":642},[637,40340,9700],{"class":646},[637,40342,1485],{"class":650},[637,40344,657],{"class":642},[637,40346,660],{"class":642},[637,40348,13362],{"class":663},[637,40350,660],{"class":642},[637,40352,787],{"class":642},[637,40354,40355,40357,40359],{"class":639,"line":902},[637,40356,905],{"class":642},[637,40358,761],{"class":646},[637,40360,669],{"class":642},[637,40362,40363,40365,40367],{"class":639,"line":912},[637,40364,732],{"class":642},[637,40366,750],{"class":646},[637,40368,669],{"class":642},[504,40370,922],{"id":921},[614,40372,925],{},[927,40374,40375,40385],{},[930,40376,40377],{},[933,40378,40379,40381,40383],{},[936,40380,8089],{"align":997},[936,40382,941],{"align":997},[936,40384,944],{},[946,40386,40387,40403,40416,40436,40450],{},[933,40388,40389,40393,40399],{},[951,40390,40391],{"align":997},[618,40392,7547],{},[951,40394,40395,40396],{"align":997},"Color of the shadow as a ",[618,40397,40398],{},"Color | number | string",[951,40400,40401],{},[618,40402,11594],{},[933,40404,40405,40409,40412],{},[951,40406,40407],{"align":997},[618,40408,11611],{},[951,40410,40411],{"align":997},"Opacity of the shadow",[951,40413,40414],{},[618,40415,1946],{},[933,40417,40418,40423,40432],{},[951,40419,40420],{"align":997},[618,40421,40422],{},"offset",[951,40424,40425,40426,40428,40429,40431],{"align":997},"Placement of the first radial gradient color stop. ",[618,40427,13783],{}," is the center of the circle. ",[618,40430,13661],{}," is edge.",[951,40433,40434],{},[618,40435,965],{},[933,40437,40438,40443,40446],{},[951,40439,40440],{"align":997},[618,40441,40442],{},"fog",[951,40444,40445],{"align":997},"Whether the material is affected by fog",[951,40447,40448],{},[618,40449,971],{},[933,40451,40452,40456,40459],{},[951,40453,40454],{"align":997},[618,40455,10412],{},[951,40457,40458],{"align":997},"Whether rendering the material has any effect on the depth buffer",[951,40460,40461],{},[618,40462,971],{},[1327,40464,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":40466},[40467,40468],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":349,"description":40469},"TUy3Uz9v0MKp5WFl-uNVQ_T1BiUHugE-_tL8tI71jFo",{"id":40474,"title":353,"body":40475,"description":40943,"extension":591,"links":592,"meta":40944,"navigation":594,"path":354,"seo":40945,"stem":355,"__hash__":40946},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":501,"value":40476,"toc":40939},[40477,40482,40498,40500,40752,40754,40937],[608,40478,40479],{},[40480,40481],"light-shadow-contact-shadow",{},[614,40483,40484,40487,40488,37607,40493,1146],{},[618,40485,40486],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1140,40489,40492],{"href":40490,"rel":40491},"https://threejs.org/examples/webgl_shadow_contact.html",[1144],"Three.js contact shadows example",[1140,40494,40497],{"href":40495,"rel":40496},"https://twitter.com/mrdoob",[1144],"@mrdoob",[504,40499,15],{"id":624},[626,40501,40504],{"className":628,"code":40502,"highlights":40503,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"white\">\n    \u003CLevioso :speed=\"2\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n      \u003CTorusKnot :scale=\"0.45\">\n        \u003CTresMeshNormalMaterial />\n      \u003C/TorusKnot>\n    \u003C/Levioso>\n    \u003CContactShadows :position-y=\"-1\" color=\"#335\" :scale=\"20\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,631],[618,40505,40506,40526,40555,40573,40581,40585,40593,40611,40653,40671,40679,40687,40695,40736,40744],{"__ignoreMap":576},[637,40507,40508,40510,40512,40514,40516,40518,40520,40522,40524],{"class":639,"line":577},[637,40509,643],{"class":642},[637,40511,647],{"class":646},[637,40513,651],{"class":650},[637,40515,654],{"class":650},[637,40517,657],{"class":642},[637,40519,660],{"class":642},[637,40521,664],{"class":663},[637,40523,660],{"class":642},[637,40525,669],{"class":642},[637,40527,40529,40531,40533,40536,40538,40540,40542,40545,40547,40549,40551,40553],{"class":40528,"line":578},[639,673],[637,40530,677],{"class":676},[637,40532,680],{"class":642},[637,40534,40535],{"class":683}," ContactShadows",[637,40537,687],{"class":642},[637,40539,9532],{"class":683},[637,40541,687],{"class":642},[637,40543,40544],{"class":683}," TorusKnot",[637,40546,693],{"class":642},[637,40548,696],{"class":676},[637,40550,699],{"class":642},[637,40552,702],{"class":663},[637,40554,705],{"class":642},[637,40556,40557,40559,40561,40563,40565,40567,40569,40571],{"class":639,"line":708},[637,40558,677],{"class":676},[637,40560,680],{"class":642},[637,40562,715],{"class":683},[637,40564,693],{"class":642},[637,40566,696],{"class":676},[637,40568,699],{"class":642},[637,40570,724],{"class":663},[637,40572,705],{"class":642},[637,40574,40575,40577,40579],{"class":639,"line":729},[637,40576,732],{"class":642},[637,40578,647],{"class":646},[637,40580,669],{"class":642},[637,40582,40583],{"class":639,"line":739},[637,40584,742],{"emptyLinePlaceholder":594},[637,40586,40587,40589,40591],{"class":639,"line":745},[637,40588,643],{"class":642},[637,40590,750],{"class":646},[637,40592,669],{"class":642},[637,40594,40595,40597,40599,40601,40603,40605,40607,40609],{"class":639,"line":755},[637,40596,758],{"class":642},[637,40598,761],{"class":646},[637,40600,764],{"class":650},[637,40602,657],{"class":642},[637,40604,660],{"class":642},[637,40606,2696],{"class":663},[637,40608,660],{"class":642},[637,40610,669],{"class":642},[637,40612,40613,40615,40617,40619,40621,40623,40625,40627,40630,40632,40634,40637,40639,40642,40644,40646,40649,40651],{"class":639,"line":778},[637,40614,781],{"class":642},[637,40616,9643],{"class":646},[637,40618,9646],{"class":650},[637,40620,657],{"class":642},[637,40622,660],{"class":642},[637,40624,820],{"class":663},[637,40626,660],{"class":642},[637,40628,40629],{"class":650}," :range",[637,40631,657],{"class":642},[637,40633,660],{"class":642},[637,40635,40636],{"class":663},"[0, 0.7]",[637,40638,660],{"class":642},[637,40640,40641],{"class":650}," :rotation-factor",[637,40643,657],{"class":642},[637,40645,660],{"class":642},[637,40647,40648],{"class":663},"9",[637,40650,660],{"class":642},[637,40652,669],{"class":642},[637,40654,40655,40657,40659,40661,40663,40665,40667,40669],{"class":639,"line":790},[637,40656,853],{"class":642},[637,40658,35814],{"class":646},[637,40660,813],{"class":650},[637,40662,657],{"class":642},[637,40664,660],{"class":642},[637,40666,27221],{"class":663},[637,40668,660],{"class":642},[637,40670,669],{"class":642},[637,40672,40673,40675,40677],{"class":639,"line":800},[637,40674,864],{"class":642},[637,40676,877],{"class":646},[637,40678,787],{"class":642},[637,40680,40681,40683,40685],{"class":639,"line":805},[637,40682,885],{"class":642},[637,40684,35814],{"class":646},[637,40686,669],{"class":642},[637,40688,40689,40691,40693],{"class":639,"line":827},[637,40690,895],{"class":642},[637,40692,9643],{"class":646},[637,40694,669],{"class":642},[637,40696,40698,40700,40703,40705,40707,40709,40711,40713,40715,40717,40719,40722,40724,40726,40728,40730,40732,40734],{"class":40697,"line":631},[639,673],[637,40699,781],{"class":642},[637,40701,40702],{"class":646},"ContactShadows",[637,40704,1939],{"class":650},[637,40706,657],{"class":642},[637,40708,660],{"class":642},[637,40710,10194],{"class":663},[637,40712,660],{"class":642},[637,40714,2689],{"class":650},[637,40716,657],{"class":642},[637,40718,660],{"class":642},[637,40720,40721],{"class":663},"#335",[637,40723,660],{"class":642},[637,40725,813],{"class":650},[637,40727,657],{"class":642},[637,40729,660],{"class":642},[637,40731,30794],{"class":663},[637,40733,660],{"class":642},[637,40735,787],{"class":642},[637,40737,40738,40740,40742],{"class":639,"line":850},[637,40739,905],{"class":642},[637,40741,761],{"class":646},[637,40743,669],{"class":642},[637,40745,40746,40748,40750],{"class":639,"line":861},[637,40747,732],{"class":642},[637,40749,750],{"class":646},[637,40751,669],{"class":642},[504,40753,922],{"id":921},[927,40755,40756,40766],{},[930,40757,40758],{},[933,40759,40760,40762,40764],{},[936,40761,938],{},[936,40763,941],{},[936,40765,944],{},[946,40767,40768,40781,40794,40808,40824,40838,40852,40866,40880,40894,40907,40924],{},[933,40769,40770,40774,40777],{},[951,40771,40772],{},[618,40773,11611],{},[951,40775,40776],{},"The opacity of the shadows.",[951,40778,40779],{},[618,40780,1874],{},[933,40782,40783,40787,40790],{},[951,40784,40785],{},[618,40786,28190],{},[951,40788,40789],{},"The blur of the shadows.",[951,40791,40792],{},[618,40793,1874],{},[933,40795,40796,40800,40803],{},[951,40797,40798],{},[618,40799,7547],{},[951,40801,40802],{},"The color of the shadows.",[951,40804,40805],{},[618,40806,40807],{},"'#000000'",[933,40809,40810,40815,40820],{},[951,40811,40812],{},[618,40813,40814],{},"tint",[951,40816,40817,40818,1146],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[618,40819,7547],{},[951,40821,40822],{},[618,40823,1179],{},[933,40825,40826,40830,40836],{},[951,40827,40828],{},[618,40829,5630],{},[951,40831,40832,40833,1146],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[618,40834,40835],{},"[x, y]",[951,40837,37498],{},[933,40839,40840,40845,40848],{},[951,40841,40842],{},[618,40843,40844],{},"width",[951,40846,40847],{},"The width of the shadow plane.",[951,40849,40850],{},[618,40851,1874],{},[933,40853,40854,40859,40862],{},[951,40855,40856],{},[618,40857,40858],{},"height",[951,40860,40861],{},"The height of the shadow plane.",[951,40863,40864],{},[618,40865,1874],{},[933,40867,40868,40873,40876],{},[951,40869,40870],{},[618,40871,40872],{},"far",[951,40874,40875],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[951,40877,40878],{},[618,40879,37498],{},[933,40881,40882,40887,40890],{},[951,40883,40884],{},[618,40885,40886],{},"smooth",[951,40888,40889],{},"Whether the shadows should be smoothed to reduce artifacts.",[951,40891,40892],{},[618,40893,961],{},[933,40895,40896,40900,40903],{},[951,40897,40898],{},[618,40899,27974],{},[951,40901,40902],{},"The resolution of the shadow textures.",[951,40904,40905],{},[618,40906,27983],{},[933,40908,40909,40913,40919],{},[951,40910,40911],{},[618,40912,39348],{},[951,40914,40915,40916,40918],{},"For performance, optionally stop updating shadows after ",[618,40917,39348],{}," frames.",[951,40920,40921],{},[618,40922,40923],{},"Math.POSITIVE_INFINITY",[933,40925,40926,40930,40933],{},[951,40927,40928],{},[618,40929,10412],{},[951,40931,40932],{},"Whether the shadows should write to the depth buffer or not.",[951,40934,40935],{},[618,40936,971],{},[1327,40938,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":40940},[40941,40942],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":353,"description":40943},"o8ix90CI6-yelSPJOMj3eTHEv1PqdpDiKiRrYUJfBHQ",{"id":40948,"title":357,"body":40949,"description":42457,"extension":591,"links":592,"meta":42458,"navigation":594,"path":358,"seo":42459,"stem":359,"__hash__":42460},"docs/2.api/7.light-shadow/lensflare.md",{"type":501,"value":40950,"toc":42441},[40951,40956,40967,40969,41102,41104,41229,41233,41239,41247,41253,41310,41314,41320,41334,41341,41345,41371,41388,41394,41399,41404,41411,41417,41509,41514,41518,41523,41536,41540,41548,41603,41613,41616,41635,41644,41651,41655,41658,41666,41678,41686,41712,41719,41752,41756,41759,41803,41817,41822,41825,41828,41851,41870,41875,41879,41882,42012,42017,42022,42210,42216,42222,42225,42228,42438],[608,40952,40953],{},[40954,40955],"light-shadow-lensflare",{},[614,40957,40958,40961,40962,1146],{},[618,40959,40960],{},"\u003CLensflare />"," wraps the ",[1140,40963,40966],{"href":40964,"rel":40965},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1144],"Three.js Lensflare",[504,40968,15],{"id":624},[626,40970,40973],{"className":628,"code":40971,"highlights":40972,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Lensflare } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPointLight>\n      \u003CLensflare />\n    \u003C/TresPointLight>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,40974,40975,40995,41013,41033,41041,41045,41053,41061,41069,41078,41086,41094],{"__ignoreMap":576},[637,40976,40977,40979,40981,40983,40985,40987,40989,40991,40993],{"class":639,"line":577},[637,40978,643],{"class":642},[637,40980,647],{"class":646},[637,40982,651],{"class":650},[637,40984,654],{"class":650},[637,40986,657],{"class":642},[637,40988,660],{"class":642},[637,40990,664],{"class":663},[637,40992,660],{"class":642},[637,40994,669],{"class":642},[637,40996,40997,40999,41001,41003,41005,41007,41009,41011],{"class":639,"line":578},[637,40998,677],{"class":676},[637,41000,680],{"class":642},[637,41002,715],{"class":683},[637,41004,693],{"class":642},[637,41006,696],{"class":676},[637,41008,699],{"class":642},[637,41010,724],{"class":663},[637,41012,705],{"class":642},[637,41014,41016,41018,41020,41023,41025,41027,41029,41031],{"class":41015,"line":708},[639,673],[637,41017,677],{"class":676},[637,41019,680],{"class":642},[637,41021,41022],{"class":683}," Lensflare",[637,41024,693],{"class":642},[637,41026,696],{"class":676},[637,41028,699],{"class":642},[637,41030,702],{"class":663},[637,41032,705],{"class":642},[637,41034,41035,41037,41039],{"class":639,"line":729},[637,41036,732],{"class":642},[637,41038,647],{"class":646},[637,41040,669],{"class":642},[637,41042,41043],{"class":639,"line":739},[637,41044,742],{"emptyLinePlaceholder":594},[637,41046,41047,41049,41051],{"class":639,"line":745},[637,41048,643],{"class":642},[637,41050,750],{"class":646},[637,41052,669],{"class":642},[637,41054,41055,41057,41059],{"class":639,"line":755},[637,41056,758],{"class":642},[637,41058,761],{"class":646},[637,41060,669],{"class":642},[637,41062,41063,41065,41067],{"class":639,"line":778},[637,41064,781],{"class":642},[637,41066,11367],{"class":646},[637,41068,669],{"class":642},[637,41070,41072,41074,41076],{"class":41071,"line":790},[639,673],[637,41073,853],{"class":642},[637,41075,357],{"class":646},[637,41077,787],{"class":642},[637,41079,41080,41082,41084],{"class":639,"line":800},[637,41081,895],{"class":642},[637,41083,11367],{"class":646},[637,41085,669],{"class":642},[637,41087,41088,41090,41092],{"class":639,"line":805},[637,41089,905],{"class":642},[637,41091,761],{"class":646},[637,41093,669],{"class":642},[637,41095,41096,41098,41100],{"class":639,"line":827},[637,41097,732],{"class":642},[637,41099,750],{"class":646},[637,41101,669],{"class":642},[504,41103,922],{"id":921},[927,41105,41106,41116],{},[930,41107,41108],{},[933,41109,41110,41112,41114],{},[936,41111,8089],{"align":997},[936,41113,941],{"align":997},[936,41115,944],{"align":997},[946,41117,41118,41133,41148,41165,41181,41198,41213],{},[933,41119,41120,41124,41129],{},[951,41121,41122],{"align":997},[1669,41123,5630],{},[951,41125,41126,41128],{"align":997},[618,41127,5352],{}," – multiplier for lensflare element sizes",[951,41130,41131],{"align":997},[618,41132,13661],{},[933,41134,41135,41139,41144],{},[951,41136,41137],{"align":997},[1669,41138,13521],{},[951,41140,41141,41143],{"align":997},[618,41142,5352],{}," – multiplier for element distances from flare center",[951,41145,41146],{"align":997},[618,41147,13661],{},[933,41149,41150,41155,41161],{},[951,41151,41152],{"align":997},[1669,41153,41154],{},"elements",[951,41156,41157,41160],{"align":997},[618,41158,41159],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[951,41162,41163],{"align":997},[618,41164,1179],{},[933,41166,41167,41172,41177],{},[951,41168,41169],{"align":997},[1669,41170,41171],{},"seed",[951,41173,41174,41176],{"align":997},[618,41175,5352],{}," – random seed for generating random seeded elements",[951,41178,41179],{"align":997},[618,41180,1179],{},[933,41182,41183,41188,41194],{},[951,41184,41185],{"align":997},[1669,41186,41187],{},"seedProps",[951,41189,41190,41193],{"align":997},[618,41191,41192],{},"SeedProps[]"," – specifications for generating random seeded elements",[951,41195,41196],{"align":997},[618,41197,1179],{},[933,41199,41200,41204,41209],{},[951,41201,41202],{"align":997},[1669,41203,7547],{},[951,41205,41206,41208],{"align":997},[618,41207,7562],{}," – default color of lensflare elements",[951,41210,41211],{"align":997},[618,41212,1179],{},[933,41214,41215,41219,41225],{},[951,41216,41217],{"align":997},[1669,41218,2717],{},[951,41220,41221,41224],{"align":997},[618,41222,41223],{},"Texture | string"," – default texture of lensflare elements",[951,41226,41227],{"align":997},[618,41228,1179],{},[504,41230,41231],{"id":41154},[618,41232,41154],{},[614,41234,41235,41236,41238],{},"You can specify individual lensflare element properties directly using the component's ",[618,41237,41154],{}," prop.",[614,41240,2776,41241,41243,41244,1146],{},[618,41242,41154],{}," prop expects an instance of ",[618,41245,41246],{},"(Partial\u003CLensflareElementProps>)[]",[614,41248,41249,41250,41252],{},"Every object in ",[618,41251,41154],{}," may have any (or none) of the following properties.",[927,41254,41255,41263],{},[930,41256,41257],{},[933,41258,41259,41261],{},[936,41260,8089],{"align":997},[936,41262,941],{"align":997},[946,41264,41265,41277,41288,41299],{},[933,41266,41267,41271],{},[951,41268,41269],{"align":997},[1669,41270,2717],{},[951,41272,41273,41276],{"align":997},[618,41274,41275],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[933,41278,41279,41283],{},[951,41280,41281],{"align":997},[1669,41282,7547],{},[951,41284,41285,41287],{"align":997},[618,41286,7562],{}," - color of the lensflare element",[933,41289,41290,41294],{},[951,41291,41292],{"align":997},[1669,41293,13521],{},[951,41295,41296,41298],{"align":997},[618,41297,5352],{}," - distance of the lensflare element from the lensflare center",[933,41300,41301,41305],{},[951,41302,41303],{"align":997},[1669,41304,16731],{},[951,41306,41307,41309],{"align":997},[618,41308,5352],{}," - size of the lensflare element",[504,41311,41312],{"id":41171},[618,41313,41171],{},[614,41315,41316,41317,41319],{},"Adding a ",[618,41318,41171],{}," prop to a component enables seeded random element generation.",[614,41321,2776,41322,41324,41325,41330,41331,1146],{},[618,41323,41171],{}," prop is used as the \"seed\" in a ",[1140,41326,41329],{"href":41327,"rel":41328},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1144],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[618,41332,41333],{},"SeedProps",[2005,41335,41336],{},[614,41337,41338,41339,1146],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[637,41340],{},[4051,41342,41344],{"id":41343},"example","Example",[626,41346,41348],{"className":628,"code":41347,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"seedRef\" />\n",[618,41349,41350],{"__ignoreMap":576},[637,41351,41352,41354,41356,41358,41360,41362,41364,41367,41369],{"class":639,"line":577},[637,41353,643],{"class":642},[637,41355,357],{"class":646},[637,41357,3029],{"class":642},[637,41359,41171],{"class":650},[637,41361,657],{"class":642},[637,41363,660],{"class":642},[637,41365,41366],{"class":683},"seedRef",[637,41368,660],{"class":642},[637,41370,787],{"class":642},[614,41372,41373,41374,2250,41377,1672,41379,1672,41381,1672,41383,1672,41385,41387],{},"Below, the results of setting ",[618,41375,41376],{},"seedRef.value",[618,41378,965],{},[618,41380,1874],{},[618,41382,820],{},[618,41384,21394],{},[618,41386,9653],{},", respectively.",[614,41389,41390],{},[9460,41391],{"alt":41392,"src":41393},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[504,41395,41397],{"id":41396},"seedprops",[618,41398,41187],{},[614,41400,41316,41401,41403],{},[618,41402,41187],{}," prop to the component enables seeded random element generation.",[614,41405,2776,41406,41243,41408,41410],{},[618,41407,41187],{},[618,41409,41192],{},". It specifies rules and acceptable values for creating random lensflare elements.",[614,41412,41413,41414,41416],{},"Every element in ",[618,41415,41187],{}," has this shape.",[927,41418,41419,41429],{},[930,41420,41421],{},[933,41422,41423,41425,41427],{},[936,41424,8089],{"align":997},[936,41426,941],{"align":997},[936,41428,18588],{},[946,41430,41431,41444,41457,41470,41483,41496],{},[933,41432,41433,41437,41442],{},[951,41434,41435],{"align":997},[1669,41436,2717],{},[951,41438,41439,41441],{"align":997},[618,41440,21952],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[951,41443,34076],{},[933,41445,41446,41450,41455],{},[951,41447,41448],{"align":997},[1669,41449,7547],{},[951,41451,41452,41454],{"align":997},[618,41453,30848],{}," - array of 1 or more colors; a single color will be selected per generated element",[951,41456,34076],{},[933,41458,41459,41463,41468],{},[951,41460,41461],{"align":997},[1669,41462,13521],{},[951,41464,41465,41467],{"align":997},[618,41466,28840],{}," - minimum and maximum allowable distance from the flare center",[951,41469,34076],{},[933,41471,41472,41476,41481],{},[951,41473,41474],{"align":997},[1669,41475,16731],{},[951,41477,41478,41480],{"align":997},[618,41479,28840],{}," - minimum and maximum allowable size",[951,41482,34076],{},[933,41484,41485,41489,41494],{},[951,41486,41487],{"align":997},[1669,41488,21272],{},[951,41490,41491,41493],{"align":997},[618,41492,28840],{}," - minimum and maximum allowable number of elements to generate",[951,41495,34076],{},[933,41497,41498,41502,41507],{},[951,41499,41500],{"align":997},[1669,41501,41171],{},[951,41503,41504,41506],{"align":997},[618,41505,5352],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[951,41508,34111],{},[2005,41510,41511],{},[614,41512,41513],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[504,41515,41517],{"id":41516},"random-elements-and-non-random-properties","Random elements and non-random properties",[614,41519,41520,41522],{},[618,41521,40960],{}," was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements.",[626,41524,41526],{"className":628,"code":41525,"language":633,"meta":576,"style":576},"\u003CLensflare />\n",[618,41527,41528],{"__ignoreMap":576},[637,41529,41530,41532,41534],{"class":639,"line":577},[637,41531,643],{"class":642},[637,41533,357],{"class":646},[637,41535,787],{"class":642},[4051,41537,41539],{"id":41538},"non-random-properties","Non-random properties",[614,41541,41542,41543,41238],{},"You can provide a list of lensflare element properties using the ",[1140,41544,41546],{"href":41545},"#elements",[618,41547,41154],{},[626,41549,41551],{"className":628,"code":41550,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[618,41552,41553],{"__ignoreMap":576},[637,41554,41555,41557,41559,41561,41563,41565,41567,41569,41571,41573,41575,41577,41579,41581,41583,41585,41587,41589,41591,41593,41595,41597,41599,41601],{"class":639,"line":577},[637,41556,643],{"class":642},[637,41558,357],{"class":646},[637,41560,3029],{"class":642},[637,41562,41154],{"class":650},[637,41564,657],{"class":642},[637,41566,660],{"class":642},[637,41568,8731],{"class":683},[637,41570,8438],{"class":642},[637,41572,2689],{"class":646},[637,41574,1218],{"class":642},[637,41576,699],{"class":642},[637,41578,36833],{"class":663},[637,41580,2440],{"class":642},[637,41582,8449],{"class":642},[637,41584,680],{"class":642},[637,41586,2689],{"class":646},[637,41588,1218],{"class":642},[637,41590,699],{"class":642},[637,41592,36950],{"class":663},[637,41594,2440],{"class":642},[637,41596,693],{"class":642},[637,41598,2514],{"class":683},[637,41600,660],{"class":642},[637,41602,787],{"class":642},[614,41604,41605,41606,1672,41608,1672,41610,41612],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[618,41607,13521],{},[618,41609,16731],{},[618,41611,2717],{}," – will be filled in by the built-in defaults in this case.",[614,41614,41615],{},"You can also provide default props which will overwrite random generated props.",[626,41617,41619],{"className":628,"code":41618,"language":633,"meta":576,"style":576},"\u003CLensflare color:\"red\" />\n",[618,41620,41621],{"__ignoreMap":576},[637,41622,41623,41625,41627,41630,41633],{"class":639,"line":577},[637,41624,643],{"class":642},[637,41626,357],{"class":646},[637,41628,41629],{"class":650}," color:",[637,41631,41632],{"class":683},"\"red\" ",[637,41634,3167],{"class":642},[614,41636,41637,41638,41640,41641,41643],{},"Since ",[618,41639,41154],{}," is not defined here, the component will generate random lensflare elements. The specified ",[618,41642,7547],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[614,41645,1138,41646,41650],{},[1140,41647,41649],{"href":41648},"#precedence","precedence"," for details about how properties are filled in.",[4051,41652,41654],{"id":41653},"random-elements","Random elements",[614,41656,41657],{},"You can let the component generate random elements ...",[614,41659,41660,41661],{},"... by not adding an ",[1140,41662,41663,41665],{"href":41545},[618,41664,41154],{}," prop",[626,41667,41668],{"className":628,"code":41525,"language":633,"meta":576,"style":576},[618,41669,41670],{"__ignoreMap":576},[637,41671,41672,41674,41676],{"class":639,"line":577},[637,41673,643],{"class":642},[637,41675,357],{"class":646},[637,41677,787],{"class":642},[614,41679,41680,41681],{},"... by adding a ",[1140,41682,41684,41665],{"href":41683},"#seed",[618,41685,41171],{},[626,41687,41689],{"className":628,"code":41688,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"7127\" />\n",[618,41690,41691],{"__ignoreMap":576},[637,41692,41693,41695,41697,41699,41701,41703,41705,41708,41710],{"class":639,"line":577},[637,41694,643],{"class":642},[637,41696,357],{"class":646},[637,41698,3029],{"class":642},[637,41700,41171],{"class":650},[637,41702,657],{"class":642},[637,41704,660],{"class":642},[637,41706,41707],{"class":2501},"7127",[637,41709,660],{"class":642},[637,41711,787],{"class":642},[614,41713,41680,41714],{},[1140,41715,41717,41665],{"href":41716},"#seedprops",[618,41718,41187],{},[626,41720,41722],{"className":628,"code":41721,"language":633,"meta":576,"style":576},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[618,41723,41724],{"__ignoreMap":576},[637,41725,41726,41728,41730,41732,41734,41736,41738,41740,41743,41746,41748,41750],{"class":639,"line":577},[637,41727,643],{"class":642},[637,41729,357],{"class":646},[637,41731,3029],{"class":642},[637,41733,41187],{"class":650},[637,41735,657],{"class":642},[637,41737,660],{"class":642},[637,41739,8731],{"class":683},[637,41741,41742],{"class":642},"{...},",[637,41744,41745],{"class":642}," {...}",[637,41747,2514],{"class":683},[637,41749,660],{"class":642},[637,41751,787],{"class":642},[4051,41753,41755],{"id":41754},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[614,41757,41758],{},"You can mix your own properties and random elements.",[626,41760,41762],{"className":628,"code":41761,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[618,41763,41764],{"__ignoreMap":576},[637,41765,41766,41768,41770,41772,41774,41776,41778,41780,41782,41784,41786,41788,41790,41792,41794,41796,41799,41801],{"class":639,"line":577},[637,41767,643],{"class":642},[637,41769,357],{"class":646},[637,41771,3029],{"class":642},[637,41773,41154],{"class":650},[637,41775,657],{"class":642},[637,41777,660],{"class":642},[637,41779,8731],{"class":683},[637,41781,41742],{"class":642},[637,41783,41745],{"class":642},[637,41785,2514],{"class":683},[637,41787,660],{"class":642},[637,41789,3029],{"class":642},[637,41791,41171],{"class":650},[637,41793,657],{"class":642},[637,41795,660],{"class":642},[637,41797,41798],{"class":2501},"8193",[637,41800,660],{"class":642},[637,41802,787],{"class":642},[614,41804,41805,41806,3063,41808,41810,41811,41813,41814,1146],{},"Here, both ",[618,41807,41154],{},[618,41809,41171],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[618,41812,41154],{},", according to the ",[1140,41815,41816],{"href":41648},"order of precedence",[2005,41818,41819],{},[614,41820,41821],{},"When mixing random elements with elements, the final number of lensflare elements equals whichever is larger, the length of the array of generated random elements or the length of elements.",[4051,41823,41824],{"id":41649},"Precedence",[614,41826,41827],{},"If more than one source sets the same property on a given element, the following order of precendence is used. Higher in the list (lower number) equals higher precendence.",[14142,41829,41830,41834,41841,41848],{},[2216,41831,41832],{},[618,41833,41154],{},[2216,41835,41836,1672,41838,41840],{},[618,41837,7547],{},[618,41839,2717],{}," – default element properties",[2216,41842,41843,1672,41845,41847],{},[618,41844,41171],{},[618,41846,41187],{}," – generated random elements",[2216,41849,41850],{},"built-in default element properties",[2005,41852,41853],{},[614,41854,41855,3063,41857,41859,41860,41863,41864,41866,41867,41869],{},[618,41856,5630],{},[618,41858,13521],{}," are applied as ",[1669,41861,41862],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[618,41865,5630],{}," to make the entire lensflare larger or smaller, and ",[618,41868,13521],{}," to spread or compress the scattered elements.",[2005,41871,41872],{},[614,41873,41874],{},"If elements, seed, and seedProps are all undefined, a seed of 0 and built-in default seedProps will be used to generate the lensflare elements.",[4051,41876,41878],{"id":41877},"precedence-example","Precedence example",[614,41880,41881],{},"Here's an example of precedence. Assume this is in our vue template.",[626,41883,41885],{"className":628,"code":41884,"language":633,"meta":576,"style":576},"\u003CLensflare\n  :elements=\"[\n    {size:512, texture='http://example.net/circle.png'},\n    {color:'yellow', distance:0.5}\n  ]\"\n  :texture=\"http://example.net/ring.png\"\n  color=\"red\"\n  :seed=\"1\"\n/>\n",[618,41886,41887,41894,41907,41934,41959,41966,41982,41994,42008],{"__ignoreMap":576},[637,41888,41889,41891],{"class":639,"line":577},[637,41890,643],{"class":642},[637,41892,41893],{"class":646},"Lensflare\n",[637,41895,41896,41898,41900,41902,41904],{"class":639,"line":578},[637,41897,3136],{"class":642},[637,41899,41154],{"class":650},[637,41901,657],{"class":642},[637,41903,660],{"class":642},[637,41905,41906],{"class":683},"[\n",[637,41908,41909,41912,41914,41916,41918,41920,41922,41924,41926,41929,41931],{"class":639,"line":708},[637,41910,41911],{"class":642},"    {",[637,41913,16731],{"class":646},[637,41915,1218],{"class":642},[637,41917,27983],{"class":2501},[637,41919,687],{"class":642},[637,41921,20067],{"class":683},[637,41923,657],{"class":642},[637,41925,2440],{"class":642},[637,41927,41928],{"class":663},"http://example.net/circle.png",[637,41930,2440],{"class":642},[637,41932,41933],{"class":642},"},\n",[637,41935,41936,41938,41940,41942,41944,41946,41948,41950,41953,41955,41957],{"class":639,"line":729},[637,41937,41911],{"class":642},[637,41939,7547],{"class":646},[637,41941,1218],{"class":642},[637,41943,2440],{"class":642},[637,41945,36950],{"class":663},[637,41947,2440],{"class":642},[637,41949,687],{"class":642},[637,41951,41952],{"class":646}," distance",[637,41954,1218],{"class":642},[637,41956,1946],{"class":2501},[637,41958,1325],{"class":642},[637,41960,41961,41964],{"class":639,"line":739},[637,41962,41963],{"class":683},"  ]",[637,41965,3131],{"class":642},[637,41967,41968,41970,41972,41974,41976,41979],{"class":639,"line":745},[637,41969,3136],{"class":642},[637,41971,2717],{"class":650},[637,41973,657],{"class":642},[637,41975,660],{"class":642},[637,41977,41978],{"class":683},"http:",[637,41980,41981],{"class":1209},"//example.net/ring.png\"\n",[637,41983,41984,41986,41988,41990,41992],{"class":639,"line":755},[637,41985,5473],{"class":683},[637,41987,657],{"class":642},[637,41989,660],{"class":642},[637,41991,36833],{"class":650},[637,41993,3131],{"class":683},[637,41995,41996,41998,42000,42002,42004,42006],{"class":639,"line":778},[637,41997,3136],{"class":642},[637,41999,41171],{"class":650},[637,42001,657],{"class":642},[637,42003,660],{"class":642},[637,42005,1874],{"class":2501},[637,42007,3131],{"class":642},[637,42009,42010],{"class":639,"line":790},[637,42011,3167],{"class":683},[614,42013,42014,42016],{},[618,42015,41171],{}," is defined, so the component will produce random elements.",[614,42018,42019,42020,1218],{},"Assume the random element generator produces this, based on ",[618,42021,41171],{},[626,42023,42027],{"className":42024,"code":42025,"language":42026,"meta":576,"style":576},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n  {\n    color: 'white',\n    distance: 0,\n    size: 1024,\n    texture: 'http://example.net/rays.png',\n  },\n  {\n    color: 'white',\n    distance: 1,\n    size: 512,\n    texture: 'http://example.net/circle.png',\n  },\n  {\n    color: 'white',\n    distance: 2,\n    size: 512,\n    texture: 'http://example.net/circle.png',\n  },\n]\n","js",[618,42028,42029,42033,42037,42051,42062,42073,42089,42093,42097,42111,42121,42132,42146,42150,42154,42168,42178,42188,42202,42206],{"__ignoreMap":576},[637,42030,42031],{"class":639,"line":577},[637,42032,41906],{"class":683},[637,42034,42035],{"class":639,"line":578},[637,42036,2471],{"class":642},[637,42038,42039,42041,42043,42045,42047,42049],{"class":639,"line":708},[637,42040,24183],{"class":646},[637,42042,1218],{"class":642},[637,42044,699],{"class":642},[637,42046,2696],{"class":663},[637,42048,2440],{"class":642},[637,42050,2488],{"class":642},[637,42052,42053,42056,42058,42060],{"class":639,"line":729},[637,42054,42055],{"class":646},"    distance",[637,42057,1218],{"class":642},[637,42059,2506],{"class":2501},[637,42061,2488],{"class":642},[637,42063,42064,42066,42068,42071],{"class":639,"line":739},[637,42065,2544],{"class":646},[637,42067,1218],{"class":642},[637,42069,42070],{"class":2501}," 1024",[637,42072,2488],{"class":642},[637,42074,42075,42078,42080,42082,42085,42087],{"class":639,"line":745},[637,42076,42077],{"class":646},"    texture",[637,42079,1218],{"class":642},[637,42081,699],{"class":642},[637,42083,42084],{"class":663},"http://example.net/rays.png",[637,42086,2440],{"class":642},[637,42088,2488],{"class":642},[637,42090,42091],{"class":639,"line":755},[637,42092,2597],{"class":642},[637,42094,42095],{"class":639,"line":778},[637,42096,2471],{"class":642},[637,42098,42099,42101,42103,42105,42107,42109],{"class":639,"line":790},[637,42100,24183],{"class":646},[637,42102,1218],{"class":642},[637,42104,699],{"class":642},[637,42106,2696],{"class":663},[637,42108,2440],{"class":642},[637,42110,2488],{"class":642},[637,42112,42113,42115,42117,42119],{"class":639,"line":800},[637,42114,42055],{"class":646},[637,42116,1218],{"class":642},[637,42118,2561],{"class":2501},[637,42120,2488],{"class":642},[637,42122,42123,42125,42127,42130],{"class":639,"line":805},[637,42124,2544],{"class":646},[637,42126,1218],{"class":642},[637,42128,42129],{"class":2501}," 512",[637,42131,2488],{"class":642},[637,42133,42134,42136,42138,42140,42142,42144],{"class":639,"line":827},[637,42135,42077],{"class":646},[637,42137,1218],{"class":642},[637,42139,699],{"class":642},[637,42141,41928],{"class":663},[637,42143,2440],{"class":642},[637,42145,2488],{"class":642},[637,42147,42148],{"class":639,"line":631},[637,42149,2597],{"class":642},[637,42151,42152],{"class":639,"line":850},[637,42153,2471],{"class":642},[637,42155,42156,42158,42160,42162,42164,42166],{"class":639,"line":861},[637,42157,24183],{"class":646},[637,42159,1218],{"class":642},[637,42161,699],{"class":642},[637,42163,2696],{"class":663},[637,42165,2440],{"class":642},[637,42167,2488],{"class":642},[637,42169,42170,42172,42174,42176],{"class":639,"line":872},[637,42171,42055],{"class":646},[637,42173,1218],{"class":642},[637,42175,31817],{"class":2501},[637,42177,2488],{"class":642},[637,42179,42180,42182,42184,42186],{"class":639,"line":882},[637,42181,2544],{"class":646},[637,42183,1218],{"class":642},[637,42185,42129],{"class":2501},[637,42187,2488],{"class":642},[637,42189,42190,42192,42194,42196,42198,42200],{"class":639,"line":632},[637,42191,42077],{"class":646},[637,42193,1218],{"class":642},[637,42195,699],{"class":642},[637,42197,41928],{"class":663},[637,42199,2440],{"class":642},[637,42201,2488],{"class":642},[637,42203,42204],{"class":639,"line":902},[637,42205,2597],{"class":642},[637,42207,42208],{"class":639,"line":912},[637,42209,20738],{"class":683},[614,42211,42212,42213,42215],{},"When random elements are mixed with ",[618,42214,41154],{},", the final number of elements in the lensflare is determined by whichever is longer.",[614,42217,42218,42219,42221],{},"Here, ",[618,42220,41154],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[614,42223,42224],{},"Therefore, resulting lensflare will have 3 elements.",[614,42226,42227],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[626,42229,42231],{"className":42024,"code":42230,"language":42026,"meta":576,"style":576},"[\n  {\n    color: 'yellow', // from `elements`\n    distance: 0, // from random element generator\n    size: 512, // from `elements`\n    texture: 'http://example.net/circle.png', // from `elements`\n  },\n  {\n    color: 'red', // from component prop `color`\n    distance: 0.5, // from `elements`\n    size: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n  {\n    color: 'red', // from component prop `color`\n    distance: 2, // from random element generator\n    size: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n]\n",[618,42232,42233,42237,42241,42258,42271,42283,42299,42303,42307,42324,42336,42348,42366,42370,42374,42390,42402,42414,42430,42434],{"__ignoreMap":576},[637,42234,42235],{"class":639,"line":577},[637,42236,41906],{"class":683},[637,42238,42239],{"class":639,"line":578},[637,42240,2471],{"class":642},[637,42242,42243,42245,42247,42249,42251,42253,42255],{"class":639,"line":708},[637,42244,24183],{"class":646},[637,42246,1218],{"class":642},[637,42248,699],{"class":642},[637,42250,36950],{"class":663},[637,42252,2440],{"class":642},[637,42254,687],{"class":642},[637,42256,42257],{"class":1209}," // from `elements`\n",[637,42259,42260,42262,42264,42266,42268],{"class":639,"line":729},[637,42261,42055],{"class":646},[637,42263,1218],{"class":642},[637,42265,2506],{"class":2501},[637,42267,687],{"class":642},[637,42269,42270],{"class":1209}," // from random element generator\n",[637,42272,42273,42275,42277,42279,42281],{"class":639,"line":739},[637,42274,2544],{"class":646},[637,42276,1218],{"class":642},[637,42278,42129],{"class":2501},[637,42280,687],{"class":642},[637,42282,42257],{"class":1209},[637,42284,42285,42287,42289,42291,42293,42295,42297],{"class":639,"line":745},[637,42286,42077],{"class":646},[637,42288,1218],{"class":642},[637,42290,699],{"class":642},[637,42292,41928],{"class":663},[637,42294,2440],{"class":642},[637,42296,687],{"class":642},[637,42298,42257],{"class":1209},[637,42300,42301],{"class":639,"line":755},[637,42302,2597],{"class":642},[637,42304,42305],{"class":639,"line":778},[637,42306,2471],{"class":642},[637,42308,42309,42311,42313,42315,42317,42319,42321],{"class":639,"line":790},[637,42310,24183],{"class":646},[637,42312,1218],{"class":642},[637,42314,699],{"class":642},[637,42316,36833],{"class":663},[637,42318,2440],{"class":642},[637,42320,687],{"class":642},[637,42322,42323],{"class":1209}," // from component prop `color`\n",[637,42325,42326,42328,42330,42332,42334],{"class":639,"line":800},[637,42327,42055],{"class":646},[637,42329,1218],{"class":642},[637,42331,2511],{"class":2501},[637,42333,687],{"class":642},[637,42335,42257],{"class":1209},[637,42337,42338,42340,42342,42344,42346],{"class":639,"line":805},[637,42339,2544],{"class":646},[637,42341,1218],{"class":642},[637,42343,42129],{"class":2501},[637,42345,687],{"class":642},[637,42347,42270],{"class":1209},[637,42349,42350,42352,42354,42356,42359,42361,42363],{"class":639,"line":827},[637,42351,42077],{"class":646},[637,42353,1218],{"class":642},[637,42355,699],{"class":642},[637,42357,42358],{"class":663},"http://example.net/ring.png",[637,42360,2440],{"class":642},[637,42362,687],{"class":642},[637,42364,42365],{"class":1209}," // from component prop `texture`\n",[637,42367,42368],{"class":639,"line":631},[637,42369,2597],{"class":642},[637,42371,42372],{"class":639,"line":850},[637,42373,2471],{"class":642},[637,42375,42376,42378,42380,42382,42384,42386,42388],{"class":639,"line":861},[637,42377,24183],{"class":646},[637,42379,1218],{"class":642},[637,42381,699],{"class":642},[637,42383,36833],{"class":663},[637,42385,2440],{"class":642},[637,42387,687],{"class":642},[637,42389,42323],{"class":1209},[637,42391,42392,42394,42396,42398,42400],{"class":639,"line":872},[637,42393,42055],{"class":646},[637,42395,1218],{"class":642},[637,42397,31817],{"class":2501},[637,42399,687],{"class":642},[637,42401,42270],{"class":1209},[637,42403,42404,42406,42408,42410,42412],{"class":639,"line":882},[637,42405,2544],{"class":646},[637,42407,1218],{"class":642},[637,42409,42129],{"class":2501},[637,42411,687],{"class":642},[637,42413,42270],{"class":1209},[637,42415,42416,42418,42420,42422,42424,42426,42428],{"class":639,"line":632},[637,42417,42077],{"class":646},[637,42419,1218],{"class":642},[637,42421,699],{"class":642},[637,42423,42358],{"class":663},[637,42425,2440],{"class":642},[637,42427,687],{"class":642},[637,42429,42365],{"class":1209},[637,42431,42432],{"class":639,"line":902},[637,42433,2597],{"class":642},[637,42435,42436],{"class":639,"line":912},[637,42437,20738],{"class":683},[1327,42439,42440],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":42442},[42443,42444,42445,42446,42449,42450],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":41154,"depth":578,"text":41154},{"id":41171,"depth":578,"text":41171,"children":42447},[42448],{"id":41343,"depth":708,"text":41344},{"id":41396,"depth":578,"text":41187},{"id":41516,"depth":578,"text":41517,"children":42451},[42452,42453,42454,42455,42456],{"id":41538,"depth":708,"text":41539},{"id":41653,"depth":708,"text":41654},{"id":41754,"depth":708,"text":41755},{"id":41649,"depth":708,"text":41824},{"id":41877,"depth":708,"text":41878},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":357,"description":42457},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":42462,"title":361,"body":42463,"description":43086,"extension":591,"links":592,"meta":43087,"navigation":594,"path":362,"seo":43088,"stem":363,"__hash__":43089},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":501,"value":42464,"toc":43082},[42465,42470,42477,42485,42487,42915,42917,43080],[2295,42466,42467],{},[42468,42469],"light-shadow-randomized-lights",{},[614,42471,42472,42474,42475,1146],{},[618,42473,39504],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[618,42476,39011],{},[614,42478,42479,42480,1146],{},"It is based on this ",[1140,42481,42484],{"href":42482,"rel":42483},"http://drei.docs.pmnd.rs/staging/randomized-light",[1144],"Drei component",[504,42486,15],{"id":624},[626,42488,42491],{"className":628,"code":42489,"highlights":42490,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport {\n  RandomizedLights,\n  AccumulativeShadows,\n  OrbitControls,\n  Plane,\n} from \"@tresjs/cientos\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003COrbitControls />\n    \u003CAccumulativeShadows :blend=\"100\" color=\"#fbb03b\" once :position-y=\"-1\">\n      \u003CRandomizedLights\n        :ambient=\"0.25\"\n        :bias=\"0.001\"\n        :count=\"8\"\n        :intensity=\"Math.PI\"\n        :map-size=\"1024\"\n        :position=\"[5, 5, -10]\"\n        :radius=\"2\"\n      />\n    \u003C/AccumulativeShadows>\n    \u003CTresMesh cast-shadow>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n      \u003CTresMeshStandardMaterial />\n    \u003C/Plane>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[729,872,882,632,902,912,2625,2634,2654],[618,42492,42493,42513,42533,42539,42547,42554,42561,42568,42582,42590,42594,42602,42613,42632,42640,42682,42690,42704,42718,42732,42746,42760,42774,42788,42792,42800,42810,42818,42836,42844,42875,42883,42891,42899,42907],{"__ignoreMap":576},[637,42494,42495,42497,42499,42501,42503,42505,42507,42509,42511],{"class":639,"line":577},[637,42496,643],{"class":642},[637,42498,647],{"class":646},[637,42500,651],{"class":650},[637,42502,654],{"class":650},[637,42504,657],{"class":642},[637,42506,660],{"class":642},[637,42508,664],{"class":663},[637,42510,660],{"class":642},[637,42512,669],{"class":642},[637,42514,42515,42517,42519,42521,42523,42525,42527,42529,42531],{"class":639,"line":578},[637,42516,677],{"class":676},[637,42518,680],{"class":642},[637,42520,715],{"class":683},[637,42522,693],{"class":642},[637,42524,696],{"class":676},[637,42526,9515],{"class":642},[637,42528,724],{"class":663},[637,42530,660],{"class":642},[637,42532,9522],{"class":642},[637,42534,42535,42537],{"class":639,"line":708},[637,42536,677],{"class":676},[637,42538,1204],{"class":642},[637,42540,42542,42545],{"class":42541,"line":729},[639,673],[637,42543,42544],{"class":683},"  RandomizedLights",[637,42546,2488],{"class":642},[637,42548,42549,42552],{"class":639,"line":739},[637,42550,42551],{"class":683},"  AccumulativeShadows",[637,42553,2488],{"class":642},[637,42555,42556,42559],{"class":639,"line":745},[637,42557,42558],{"class":683},"  OrbitControls",[637,42560,2488],{"class":642},[637,42562,42563,42566],{"class":639,"line":755},[637,42564,42565],{"class":683},"  Plane",[637,42567,2488],{"class":642},[637,42569,42570,42572,42574,42576,42578,42580],{"class":639,"line":778},[637,42571,2428],{"class":642},[637,42573,696],{"class":676},[637,42575,9515],{"class":642},[637,42577,702],{"class":663},[637,42579,660],{"class":642},[637,42581,9522],{"class":642},[637,42583,42584,42586,42588],{"class":639,"line":790},[637,42585,732],{"class":642},[637,42587,647],{"class":646},[637,42589,669],{"class":642},[637,42591,42592],{"class":639,"line":800},[637,42593,742],{"emptyLinePlaceholder":594},[637,42595,42596,42598,42600],{"class":639,"line":805},[637,42597,643],{"class":642},[637,42599,750],{"class":646},[637,42601,669],{"class":642},[637,42603,42604,42606,42608,42611],{"class":639,"line":827},[637,42605,758],{"class":642},[637,42607,761],{"class":646},[637,42609,42610],{"class":650}," shadows",[637,42612,669],{"class":642},[637,42614,42615,42617,42619,42621,42623,42625,42628,42630],{"class":639,"line":631},[637,42616,781],{"class":642},[637,42618,784],{"class":646},[637,42620,1485],{"class":650},[637,42622,657],{"class":642},[637,42624,660],{"class":642},[637,42626,42627],{"class":663},"[0, 3, 5]",[637,42629,660],{"class":642},[637,42631,787],{"class":642},[637,42633,42634,42636,42638],{"class":639,"line":850},[637,42635,781],{"class":642},[637,42637,795],{"class":646},[637,42639,787],{"class":642},[637,42641,42642,42644,42647,42649,42651,42653,42655,42657,42659,42661,42663,42665,42667,42670,42672,42674,42676,42678,42680],{"class":639,"line":861},[637,42643,781],{"class":642},[637,42645,42646],{"class":646},"AccumulativeShadows",[637,42648,27795],{"class":650},[637,42650,657],{"class":642},[637,42652,660],{"class":642},[637,42654,11169],{"class":663},[637,42656,660],{"class":642},[637,42658,2689],{"class":650},[637,42660,657],{"class":642},[637,42662,660],{"class":642},[637,42664,10153],{"class":663},[637,42666,660],{"class":642},[637,42668,42669],{"class":650}," once",[637,42671,1939],{"class":650},[637,42673,657],{"class":642},[637,42675,660],{"class":642},[637,42677,10194],{"class":663},[637,42679,660],{"class":642},[637,42681,669],{"class":642},[637,42683,42685,42687],{"class":42684,"line":872},[639,673],[637,42686,853],{"class":642},[637,42688,42689],{"class":646},"RandomizedLights\n",[637,42691,42693,42696,42698,42700,42702],{"class":42692,"line":882},[639,673],[637,42694,42695],{"class":650},"        :ambient",[637,42697,657],{"class":642},[637,42699,660],{"class":642},[637,42701,13617],{"class":663},[637,42703,3131],{"class":642},[637,42705,42707,42710,42712,42714,42716],{"class":42706,"line":632},[639,673],[637,42708,42709],{"class":650},"        :bias",[637,42711,657],{"class":642},[637,42713,660],{"class":642},[637,42715,5701],{"class":663},[637,42717,3131],{"class":642},[637,42719,42721,42724,42726,42728,42730],{"class":42720,"line":902},[639,673],[637,42722,42723],{"class":650},"        :count",[637,42725,657],{"class":642},[637,42727,660],{"class":642},[637,42729,33722],{"class":663},[637,42731,3131],{"class":642},[637,42733,42735,42738,42740,42742,42744],{"class":42734,"line":912},[639,673],[637,42736,42737],{"class":650},"        :intensity",[637,42739,657],{"class":642},[637,42741,660],{"class":642},[637,42743,11664],{"class":663},[637,42745,3131],{"class":642},[637,42747,42749,42752,42754,42756,42758],{"class":42748,"line":2625},[639,673],[637,42750,42751],{"class":650},"        :map-size",[637,42753,657],{"class":642},[637,42755,660],{"class":642},[637,42757,39478],{"class":663},[637,42759,3131],{"class":642},[637,42761,42763,42765,42767,42769,42772],{"class":42762,"line":2634},[639,673],[637,42764,8005],{"class":650},[637,42766,657],{"class":642},[637,42768,660],{"class":642},[637,42770,42771],{"class":663},"[5, 5, -10]",[637,42773,3131],{"class":642},[637,42775,42777,42780,42782,42784,42786],{"class":42776,"line":2654},[639,673],[637,42778,42779],{"class":650},"        :radius",[637,42781,657],{"class":642},[637,42783,660],{"class":642},[637,42785,820],{"class":663},[637,42787,3131],{"class":642},[637,42789,42790],{"class":639,"line":2663},[637,42791,8033],{"class":642},[637,42793,42794,42796,42798],{"class":639,"line":2672},[637,42795,895],{"class":642},[637,42797,42646],{"class":646},[637,42799,669],{"class":642},[637,42801,42802,42804,42806,42808],{"class":639,"line":2681},[637,42803,781],{"class":642},[637,42805,856],{"class":646},[637,42807,16370],{"class":650},[637,42809,669],{"class":642},[637,42811,42812,42814,42816],{"class":639,"line":2703},[637,42813,853],{"class":642},[637,42815,867],{"class":646},[637,42817,787],{"class":642},[637,42819,42820,42822,42824,42826,42828,42830,42832,42834],{"class":639,"line":2747},[637,42821,853],{"class":642},[637,42823,13318],{"class":646},[637,42825,2689],{"class":650},[637,42827,657],{"class":642},[637,42829,660],{"class":642},[637,42831,13327],{"class":663},[637,42833,660],{"class":642},[637,42835,787],{"class":642},[637,42837,42838,42840,42842],{"class":639,"line":2756},[637,42839,895],{"class":642},[637,42841,856],{"class":646},[637,42843,669],{"class":642},[637,42845,42846,42848,42850,42852,42854,42856,42858,42860,42863,42865,42867,42869,42871,42873],{"class":639,"line":2765},[637,42847,781],{"class":642},[637,42849,261],{"class":646},[637,42851,1485],{"class":650},[637,42853,657],{"class":642},[637,42855,660],{"class":642},[637,42857,39961],{"class":663},[637,42859,660],{"class":642},[637,42861,42862],{"class":650}," receive-shadow",[637,42864,1959],{"class":650},[637,42866,657],{"class":642},[637,42868,660],{"class":642},[637,42870,11961],{"class":663},[637,42872,660],{"class":642},[637,42874,669],{"class":642},[637,42876,42877,42879,42881],{"class":639,"line":3922},[637,42878,853],{"class":642},[637,42880,2686],{"class":646},[637,42882,787],{"class":642},[637,42884,42885,42887,42889],{"class":639,"line":3953},[637,42886,895],{"class":642},[637,42888,261],{"class":646},[637,42890,669],{"class":642},[637,42892,42893,42895,42897],{"class":639,"line":3974},[637,42894,781],{"class":642},[637,42896,9681],{"class":646},[637,42898,787],{"class":642},[637,42900,42901,42903,42905],{"class":639,"line":3993},[637,42902,905],{"class":642},[637,42904,761],{"class":646},[637,42906,669],{"class":642},[637,42908,42909,42911,42913],{"class":639,"line":4025},[637,42910,732],{"class":642},[637,42912,750],{"class":646},[637,42914,669],{"class":642},[504,42916,922],{"id":921},[927,42918,42919,42929],{},[930,42920,42921],{},[933,42922,42923,42925,42927],{},[936,42924,938],{},[936,42926,941],{},[936,42928,944],{},[946,42930,42931,42944,42958,42971,42985,42998,43012,43026,43039,43053,43067],{},[933,42932,42933,42937,42940],{},[951,42934,42935],{},[618,42936,12009],{},[951,42938,42939],{},"Number of lights",[951,42941,42942],{},[618,42943,33722],{},[933,42945,42946,42951,42954],{},[951,42947,42948],{},[618,42949,42950],{},"radius",[951,42952,42953],{},"Radius of the jiggle, higher values make softer light",[951,42955,42956],{},[618,42957,1874],{},[933,42959,42960,42964,42967],{},[951,42961,42962],{},[618,42963,2065],{},[951,42965,42966],{},"Light intensity",[951,42968,42969],{},[618,42970,11664],{},[933,42972,42973,42978,42981],{},[951,42974,42975],{},[618,42976,42977],{},"ambient",[951,42979,42980],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[951,42982,42983],{},[618,42984,1946],{},[933,42986,42987,42991,42994],{},[951,42988,42989],{},[618,42990,18630],{},[951,42992,42993],{},"If the lights cast shadows",[951,42995,42996],{},[618,42997,961],{},[933,42999,43000,43005,43008],{},[951,43001,43002],{},[618,43003,43004],{},"bias",[951,43006,43007],{},"Default shadow bias",[951,43009,43010],{},[618,43011,965],{},[933,43013,43014,43019,43022],{},[951,43015,43016],{},[618,43017,43018],{},"mapSize",[951,43020,43021],{},"Size of the lights' shadow map",[951,43023,43024],{},[618,43025,27983],{},[933,43027,43028,43032,43035],{},[951,43029,43030],{},[618,43031,16731],{},[951,43033,43034],{},"Size of the lights' shadow camera frustum",[951,43036,43037],{},[618,43038,37498],{},[933,43040,43041,43046,43049],{},[951,43042,43043],{},[618,43044,43045],{},"near",[951,43047,43048],{},"Lights' shadow camera near value",[951,43050,43051],{},[618,43052,1946],{},[933,43054,43055,43059,43062],{},[951,43056,43057],{},[618,43058,40872],{},[951,43060,43061],{},"Lights' shadow camera far value",[951,43063,43064],{},[618,43065,43066],{},"500",[933,43068,43069,43073,43076],{},[951,43070,43071],{},[618,43072,4130],{},[951,43074,43075],{},"Position",[951,43077,43078],{},[618,43079,42771],{},[1327,43081,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":43083},[43084,43085],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":361,"description":43086},"79Dz6CbGDB6whT9LqG15v15q-nHtJLggTb7-YTnIEEE",{"id":43091,"title":365,"body":43092,"description":43485,"extension":591,"links":592,"meta":43486,"navigation":594,"path":366,"seo":43487,"stem":367,"__hash__":43488},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":501,"value":43093,"toc":43481},[43094,43099,43102,43104,43428,43430,43479],[608,43095,43096],{},[43097,43098],"light-shadow-soft-shadows",{},[614,43100,43101],{},"Injects percent closer soft shadows (pcss) into THREE's shader chunk. Mounting/unmounting this component or changing its props will cause all shaders to be recompiled.",[504,43103,15],{"id":624},[626,43105,43108],{"className":628,"code":43106,"highlights":43107,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { SoftShadows, Levioso, TorusKnot, Plane } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows clear-color=\"#82DBC5\">\n    \u003CLevioso :speed=\"4\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n      \u003CTorusKnot cast-shadow :scale=\"0.45\">\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TorusKnot>\n    \u003C/Levioso>\n    \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n      \u003CTresMeshStandardMaterial />\n    \u003C/Plane>\n    \u003CTresDirectionalLight cast-shadow :position=\"[0, 3, 0]\" />\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CSoftShadows />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,632],[618,43109,43110,43130,43165,43185,43193,43197,43205,43225,43263,43283,43301,43309,43317,43347,43355,43363,43384,43402,43412,43420],{"__ignoreMap":576},[637,43111,43112,43114,43116,43118,43120,43122,43124,43126,43128],{"class":639,"line":577},[637,43113,643],{"class":642},[637,43115,647],{"class":646},[637,43117,651],{"class":650},[637,43119,654],{"class":650},[637,43121,657],{"class":642},[637,43123,660],{"class":642},[637,43125,664],{"class":663},[637,43127,660],{"class":642},[637,43129,669],{"class":642},[637,43131,43133,43135,43137,43140,43142,43144,43146,43148,43150,43153,43155,43157,43159,43161,43163],{"class":43132,"line":578},[639,673],[637,43134,677],{"class":676},[637,43136,680],{"class":642},[637,43138,43139],{"class":683}," SoftShadows",[637,43141,687],{"class":642},[637,43143,9532],{"class":683},[637,43145,687],{"class":642},[637,43147,40544],{"class":683},[637,43149,687],{"class":642},[637,43151,43152],{"class":683}," Plane",[637,43154,693],{"class":642},[637,43156,696],{"class":676},[637,43158,9515],{"class":642},[637,43160,702],{"class":663},[637,43162,660],{"class":642},[637,43164,9522],{"class":642},[637,43166,43167,43169,43171,43173,43175,43177,43179,43181,43183],{"class":639,"line":708},[637,43168,677],{"class":676},[637,43170,680],{"class":642},[637,43172,715],{"class":683},[637,43174,693],{"class":642},[637,43176,696],{"class":676},[637,43178,9515],{"class":642},[637,43180,724],{"class":663},[637,43182,660],{"class":642},[637,43184,9522],{"class":642},[637,43186,43187,43189,43191],{"class":639,"line":729},[637,43188,732],{"class":642},[637,43190,647],{"class":646},[637,43192,669],{"class":642},[637,43194,43195],{"class":639,"line":739},[637,43196,742],{"emptyLinePlaceholder":594},[637,43198,43199,43201,43203],{"class":639,"line":745},[637,43200,643],{"class":642},[637,43202,750],{"class":646},[637,43204,669],{"class":642},[637,43206,43207,43209,43211,43213,43215,43217,43219,43221,43223],{"class":639,"line":755},[637,43208,758],{"class":642},[637,43210,761],{"class":646},[637,43212,42610],{"class":650},[637,43214,764],{"class":650},[637,43216,657],{"class":642},[637,43218,660],{"class":642},[637,43220,11791],{"class":663},[637,43222,660],{"class":642},[637,43224,669],{"class":642},[637,43226,43227,43229,43231,43233,43235,43237,43239,43241,43243,43245,43247,43249,43251,43253,43255,43257,43259,43261],{"class":639,"line":778},[637,43228,781],{"class":642},[637,43230,9643],{"class":646},[637,43232,9646],{"class":650},[637,43234,657],{"class":642},[637,43236,660],{"class":642},[637,43238,9653],{"class":663},[637,43240,660],{"class":642},[637,43242,40629],{"class":650},[637,43244,657],{"class":642},[637,43246,660],{"class":642},[637,43248,40636],{"class":663},[637,43250,660],{"class":642},[637,43252,40641],{"class":650},[637,43254,657],{"class":642},[637,43256,660],{"class":642},[637,43258,40648],{"class":663},[637,43260,660],{"class":642},[637,43262,669],{"class":642},[637,43264,43265,43267,43269,43271,43273,43275,43277,43279,43281],{"class":639,"line":790},[637,43266,853],{"class":642},[637,43268,35814],{"class":646},[637,43270,16370],{"class":650},[637,43272,813],{"class":650},[637,43274,657],{"class":642},[637,43276,660],{"class":642},[637,43278,27221],{"class":663},[637,43280,660],{"class":642},[637,43282,669],{"class":642},[637,43284,43285,43287,43289,43291,43293,43295,43297,43299],{"class":639,"line":800},[637,43286,864],{"class":642},[637,43288,2686],{"class":646},[637,43290,2689],{"class":650},[637,43292,657],{"class":642},[637,43294,660],{"class":642},[637,43296,13327],{"class":663},[637,43298,660],{"class":642},[637,43300,787],{"class":642},[637,43302,43303,43305,43307],{"class":639,"line":805},[637,43304,885],{"class":642},[637,43306,35814],{"class":646},[637,43308,669],{"class":642},[637,43310,43311,43313,43315],{"class":639,"line":827},[637,43312,895],{"class":642},[637,43314,9643],{"class":646},[637,43316,669],{"class":642},[637,43318,43319,43321,43323,43325,43327,43329,43331,43333,43335,43337,43339,43341,43343,43345],{"class":639,"line":631},[637,43320,781],{"class":642},[637,43322,261],{"class":646},[637,43324,1485],{"class":650},[637,43326,657],{"class":642},[637,43328,660],{"class":642},[637,43330,39961],{"class":663},[637,43332,660],{"class":642},[637,43334,42862],{"class":650},[637,43336,1959],{"class":650},[637,43338,657],{"class":642},[637,43340,660],{"class":642},[637,43342,11961],{"class":663},[637,43344,660],{"class":642},[637,43346,669],{"class":642},[637,43348,43349,43351,43353],{"class":639,"line":850},[637,43350,853],{"class":642},[637,43352,2686],{"class":646},[637,43354,787],{"class":642},[637,43356,43357,43359,43361],{"class":639,"line":861},[637,43358,895],{"class":642},[637,43360,261],{"class":646},[637,43362,669],{"class":642},[637,43364,43365,43367,43369,43371,43373,43375,43377,43380,43382],{"class":639,"line":872},[637,43366,781],{"class":642},[637,43368,9700],{"class":646},[637,43370,16370],{"class":650},[637,43372,1485],{"class":650},[637,43374,657],{"class":642},[637,43376,660],{"class":642},[637,43378,43379],{"class":663},"[0, 3, 0]",[637,43381,660],{"class":642},[637,43383,787],{"class":642},[637,43385,43386,43388,43390,43392,43394,43396,43398,43400],{"class":639,"line":882},[637,43387,781],{"class":642},[637,43389,9681],{"class":646},[637,43391,1867],{"class":650},[637,43393,657],{"class":642},[637,43395,660],{"class":642},[637,43397,1946],{"class":663},[637,43399,660],{"class":642},[637,43401,787],{"class":642},[637,43403,43405,43407,43410],{"class":43404,"line":632},[639,673],[637,43406,781],{"class":642},[637,43408,43409],{"class":646},"SoftShadows",[637,43411,787],{"class":642},[637,43413,43414,43416,43418],{"class":639,"line":902},[637,43415,905],{"class":642},[637,43417,761],{"class":646},[637,43419,669],{"class":642},[637,43421,43422,43424,43426],{"class":639,"line":912},[637,43423,732],{"class":642},[637,43425,750],{"class":646},[637,43427,669],{"class":642},[504,43429,922],{"id":921},[927,43431,43432,43442],{},[930,43433,43434],{},[933,43435,43436,43438,43440],{},[936,43437,8089],{"align":997},[936,43439,941],{"align":997},[936,43441,944],{},[946,43443,43444,43455,43466],{},[933,43445,43446,43448,43451],{},[951,43447,16731],{"align":997},[951,43449,43450],{"align":997},"Size of the light source (the larger the softer the light)",[951,43452,43453],{},[618,43454,32279],{},[933,43456,43457,43459,43462],{},[951,43458,29606],{"align":997},[951,43460,43461],{"align":997},"Number of samples (more samples less noise but more expensive)",[951,43463,43464],{},[618,43465,37498],{},[933,43467,43468,43471,43474],{},[951,43469,43470],{"align":997},"focus",[951,43472,43473],{"align":997},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[951,43475,43476,43478],{},[618,43477,965],{}," (the beginning)",[1327,43480,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":43482},[43483,43484],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":365,"description":43485},"WFVp3-okOdmyoKfWIXSoGlyt-AidaFEgkQYSqpSVti0",[43490,44568,45157,45412,45737,46335,47299,47690,48087,49824,50475],{"id":43491,"title":375,"body":43492,"description":44564,"extension":591,"links":592,"meta":44565,"navigation":594,"path":376,"seo":44566,"stem":377,"__hash__":44567},"docs/2.api/8.staging/1.environment.md",{"type":501,"value":43493,"toc":44551},[43494,43499,43509,43515,43517,43695,43702,43728,43733,43737,43744,43939,43943,43949,43972,43976,43994,44030,44043,44057,44074,44107,44111,44114,44199,44203,44209,44289,44294,44305,44307,44539,44542,44548],[608,43495,43496],{},[43497,43498],"staging-environment",{},[614,43500,43501,43502,43505,43506,1146],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[618,43503,43504],{},"scene.environment",", and optionally ",[618,43507,43508],{},"scene.background",[614,43510,43511,43512,43514],{},"It uses the composable ",[1140,43513,379],{"href":380}," under the hood to load the cubemap.",[504,43516,15],{"id":624},[626,43518,43520],{"className":628,"code":43519,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CEnvironment\n        :files=\"[\n          '/px.jpg',\n          '/nx.jpg',\n          '/py.jpg',\n          '/ny.jpg',\n          '/pz.jpg',\n          '/nz.jpg',\n        ]\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,43521,43522,43542,43560,43578,43586,43590,43598,43606,43614,43620,43630,43635,43640,43645,43650,43655,43660,43667,43671,43679,43687],{"__ignoreMap":576},[637,43523,43524,43526,43528,43530,43532,43534,43536,43538,43540],{"class":639,"line":577},[637,43525,643],{"class":642},[637,43527,647],{"class":646},[637,43529,651],{"class":650},[637,43531,654],{"class":650},[637,43533,657],{"class":642},[637,43535,660],{"class":642},[637,43537,664],{"class":663},[637,43539,660],{"class":642},[637,43541,669],{"class":642},[637,43543,43544,43546,43548,43550,43552,43554,43556,43558],{"class":639,"line":578},[637,43545,677],{"class":676},[637,43547,680],{"class":642},[637,43549,715],{"class":683},[637,43551,693],{"class":642},[637,43553,696],{"class":676},[637,43555,699],{"class":642},[637,43557,724],{"class":663},[637,43559,705],{"class":642},[637,43561,43562,43564,43566,43568,43570,43572,43574,43576],{"class":639,"line":708},[637,43563,677],{"class":676},[637,43565,680],{"class":642},[637,43567,20947],{"class":683},[637,43569,693],{"class":642},[637,43571,696],{"class":676},[637,43573,699],{"class":642},[637,43575,702],{"class":663},[637,43577,705],{"class":642},[637,43579,43580,43582,43584],{"class":639,"line":729},[637,43581,732],{"class":642},[637,43583,647],{"class":646},[637,43585,669],{"class":642},[637,43587,43588],{"class":639,"line":739},[637,43589,742],{"emptyLinePlaceholder":594},[637,43591,43592,43594,43596],{"class":639,"line":745},[637,43593,643],{"class":642},[637,43595,750],{"class":646},[637,43597,669],{"class":642},[637,43599,43600,43602,43604],{"class":639,"line":755},[637,43601,758],{"class":642},[637,43603,761],{"class":646},[637,43605,669],{"class":642},[637,43607,43608,43610,43612],{"class":639,"line":778},[637,43609,781],{"class":642},[637,43611,21652],{"class":646},[637,43613,669],{"class":642},[637,43615,43616,43618],{"class":639,"line":790},[637,43617,853],{"class":642},[637,43619,25231],{"class":646},[637,43621,43622,43624,43626,43628],{"class":639,"line":800},[637,43623,25241],{"class":650},[637,43625,657],{"class":642},[637,43627,660],{"class":642},[637,43629,41906],{"class":663},[637,43631,43632],{"class":639,"line":805},[637,43633,43634],{"class":663},"          '/px.jpg',\n",[637,43636,43637],{"class":639,"line":827},[637,43638,43639],{"class":663},"          '/nx.jpg',\n",[637,43641,43642],{"class":639,"line":631},[637,43643,43644],{"class":663},"          '/py.jpg',\n",[637,43646,43647],{"class":639,"line":850},[637,43648,43649],{"class":663},"          '/ny.jpg',\n",[637,43651,43652],{"class":639,"line":861},[637,43653,43654],{"class":663},"          '/pz.jpg',\n",[637,43656,43657],{"class":639,"line":872},[637,43658,43659],{"class":663},"          '/nz.jpg',\n",[637,43661,43662,43665],{"class":639,"line":882},[637,43663,43664],{"class":663},"        ]",[637,43666,3131],{"class":642},[637,43668,43669],{"class":639,"line":632},[637,43670,8033],{"class":642},[637,43672,43673,43675,43677],{"class":639,"line":902},[637,43674,895],{"class":642},[637,43676,21652],{"class":646},[637,43678,669],{"class":642},[637,43680,43681,43683,43685],{"class":639,"line":912},[637,43682,905],{"class":642},[637,43684,761],{"class":646},[637,43686,669],{"class":642},[637,43688,43689,43691,43693],{"class":639,"line":2625},[637,43690,732],{"class":642},[637,43692,750],{"class":646},[637,43694,669],{"class":642},[614,43696,43697,43698,43701],{},"You can also pass the ",[618,43699,43700],{},".hdr"," file directly:",[626,43703,43705],{"className":628,"code":43704,"language":633,"meta":576,"style":576},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[618,43706,43707,43715,43720],{"__ignoreMap":576},[637,43708,43709,43711,43713],{"class":639,"line":577},[637,43710,643],{"class":642},[637,43712,21652],{"class":646},[637,43714,669],{"class":642},[637,43716,43717],{"class":639,"line":578},[637,43718,43719],{"class":683},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[637,43721,43722,43724,43726],{"class":639,"line":708},[637,43723,732],{"class":642},[637,43725,21652],{"class":646},[637,43727,669],{"class":642},[614,43729,43730],{},[9460,43731],{"alt":375,"src":43732},"/cientos/envmaps.png",[504,43734,43736],{"id":43735},"texture-reference","Texture reference",[614,43738,19695,43739,1677,43741,41665],{},[618,43740,5894],{},[618,43742,43743],{},"\u003CEnvironment />",[626,43745,43748],{"className":628,"code":43746,"highlights":43747,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Environment } from '@tresjs/cientos'\n\nconst environmentRef = shallowRef()\n\nwatch(environmentRef, texture => {\n  console.log(texture)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEnvironment ref=\"environmentRef\" />\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :env-map=\"envMap\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[729,745,790,850,882],[618,43749,43750,43770,43788,43792,43806,43810,43826,43840,43846,43855,43859,43867,43886,43894,43903,43922,43930],{"__ignoreMap":576},[637,43751,43752,43754,43756,43758,43760,43762,43764,43766,43768],{"class":639,"line":577},[637,43753,643],{"class":642},[637,43755,647],{"class":646},[637,43757,651],{"class":650},[637,43759,654],{"class":650},[637,43761,657],{"class":642},[637,43763,660],{"class":642},[637,43765,664],{"class":663},[637,43767,660],{"class":642},[637,43769,669],{"class":642},[637,43771,43772,43774,43776,43778,43780,43782,43784,43786],{"class":639,"line":578},[637,43773,677],{"class":676},[637,43775,680],{"class":642},[637,43777,20947],{"class":683},[637,43779,693],{"class":642},[637,43781,696],{"class":676},[637,43783,699],{"class":642},[637,43785,702],{"class":663},[637,43787,705],{"class":642},[637,43789,43790],{"class":639,"line":708},[637,43791,742],{"emptyLinePlaceholder":594},[637,43793,43795,43797,43800,43802,43804],{"class":43794,"line":729},[639,673],[637,43796,2415],{"class":650},[637,43798,43799],{"class":683}," environmentRef ",[637,43801,657],{"class":642},[637,43803,3498],{"class":2434},[637,43805,6535],{"class":683},[637,43807,43808],{"class":639,"line":739},[637,43809,742],{"emptyLinePlaceholder":594},[637,43811,43813,43815,43818,43820,43822,43824],{"class":43812,"line":745},[639,673],[637,43814,12189],{"class":2434},[637,43816,43817],{"class":683},"(environmentRef",[637,43819,687],{"class":642},[637,43821,20067],{"class":6838},[637,43823,3677],{"class":650},[637,43825,1204],{"class":642},[637,43827,43828,43830,43832,43834,43836,43838],{"class":639,"line":755},[637,43829,6854],{"class":683},[637,43831,1146],{"class":642},[637,43833,6859],{"class":2434},[637,43835,2437],{"class":646},[637,43837,2717],{"class":683},[637,43839,2448],{"class":646},[637,43841,43842,43844],{"class":639,"line":778},[637,43843,2428],{"class":642},[637,43845,2448],{"class":683},[637,43847,43849,43851,43853],{"class":43848,"line":790},[639,673],[637,43850,732],{"class":642},[637,43852,647],{"class":646},[637,43854,669],{"class":642},[637,43856,43857],{"class":639,"line":800},[637,43858,742],{"emptyLinePlaceholder":594},[637,43860,43861,43863,43865],{"class":639,"line":805},[637,43862,643],{"class":642},[637,43864,750],{"class":646},[637,43866,669],{"class":642},[637,43868,43869,43871,43873,43875,43877,43879,43882,43884],{"class":639,"line":827},[637,43870,758],{"class":642},[637,43872,375],{"class":646},[637,43874,3872],{"class":650},[637,43876,657],{"class":642},[637,43878,660],{"class":642},[637,43880,43881],{"class":663},"environmentRef",[637,43883,660],{"class":642},[637,43885,787],{"class":642},[637,43887,43888,43890,43892],{"class":639,"line":631},[637,43889,758],{"class":642},[637,43891,856],{"class":646},[637,43893,669],{"class":642},[637,43895,43897,43899,43901],{"class":43896,"line":850},[639,673],[637,43898,781],{"class":642},[637,43900,3958],{"class":646},[637,43902,787],{"class":642},[637,43904,43905,43907,43909,43912,43914,43916,43918,43920],{"class":639,"line":861},[637,43906,781],{"class":642},[637,43908,2686],{"class":646},[637,43910,43911],{"class":650}," :env-map",[637,43913,657],{"class":642},[637,43915,660],{"class":642},[637,43917,29658],{"class":663},[637,43919,660],{"class":642},[637,43921,787],{"class":642},[637,43923,43924,43926,43928],{"class":639,"line":872},[637,43925,905],{"class":642},[637,43927,856],{"class":646},[637,43929,669],{"class":642},[637,43931,43933,43935,43937],{"class":43932,"line":882},[639,673],[637,43934,732],{"class":642},[637,43936,750],{"class":646},[637,43938,669],{"class":642},[504,43940,43942],{"id":43941},"presets","Presets",[614,43944,43945,43946,2027],{},"You can use one of the available presets by passing the ",[618,43947,43948],{},"preset",[626,43950,43952],{"className":628,"code":43951,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"city\" />\n",[618,43953,43954],{"__ignoreMap":576},[637,43955,43956,43958,43960,43962,43964,43966,43968,43970],{"class":639,"line":577},[637,43957,643],{"class":642},[637,43959,375],{"class":646},[637,43961,21664],{"class":650},[637,43963,657],{"class":642},[637,43965,660],{"class":642},[637,43967,29090],{"class":663},[637,43969,660],{"class":642},[637,43971,787],{"class":642},[4051,43973,43975],{"id":43974},"preset-quality","Preset quality",[614,43977,43978,43979,43986,43987,43990,43991,2027],{},"Presets are served from the ",[1140,43980,43983],{"href":43981,"rel":43982},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1144],[618,43984,43985],{},"Tresjs/assets"," CDN at ",[1669,43988,43989],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[618,43992,43993],{},"quality",[626,43995,43997],{"className":628,"code":43996,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[618,43998,43999],{"__ignoreMap":576},[637,44000,44001,44003,44005,44007,44009,44011,44014,44016,44019,44021,44023,44026,44028],{"class":639,"line":577},[637,44002,643],{"class":642},[637,44004,375],{"class":646},[637,44006,21664],{"class":650},[637,44008,657],{"class":642},[637,44010,660],{"class":642},[637,44012,44013],{"class":663},"sunset",[637,44015,660],{"class":642},[637,44017,44018],{"class":650}," quality",[637,44020,657],{"class":642},[637,44022,660],{"class":642},[637,44024,44025],{"class":663},"4k",[637,44027,660],{"class":642},[637,44029,787],{"class":642},[614,44031,44032,44033,44036,44037,1672,44040,1146],{},"Available tiers: ",[618,44034,44035],{},"'1k'"," (default), ",[618,44038,44039],{},"'2k'",[618,44041,44042],{},"'4k'",[24701,44044,44045],{},[614,44046,44047,44048,44051,44052,3336,44054,44056],{},"Higher tiers are significantly larger: ",[1669,44049,44050],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[618,44053,44039],{},[618,44055,44042],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[614,44058,2776,44059,44061,44062,44064,44065,3336,44068,44070,44071,44073],{},[618,44060,43993],{}," prop only applies when ",[618,44063,43948],{}," is set — it is ignored when loading via ",[618,44066,44067],{},"files",[618,44069,18081],{},". An unsupported value falls back to ",[618,44072,44035],{}," with a console warning.",[24701,44075,44076],{},[614,44077,44078,44087,44088,44090,44091,44094,44095,44097,44098,44100,44101,44103,44104,44106],{},[1669,44079,44080,44082,44083,44086],{},[618,44081,43993],{}," has no visible effect when you pass ",[1140,44084,44085],{"href":384},"Lightformers"," (or any children)."," With children present, ",[618,44089,28148],{}," bakes the environment and background into a ",[618,44092,44093],{},"WebGLCubeRenderTarget"," sized by the ",[618,44096,27974],{}," prop (default ",[618,44099,28653],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[618,44102,43993],{},". For a sharp high-res background, either omit the children or raise ",[618,44105,27974],{}," (a cube big enough to match 4K is expensive to render each frame).",[504,44108,44110],{"id":44109},"environment-rotation","Environment Rotation",[614,44112,44113],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[626,44115,44117],{"className":628,"code":44116,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003CEnvironment\n    preset=\"sunset\"\n    :background=\"true\"\n    :background-rotation=\"[0, Math.PI / 2, 0]\"\n    :environment-rotation=\"[0, Math.PI / 4, 0]\"\n  />\n\u003C/template>\n",[618,44118,44119,44127,44133,44146,44159,44173,44187,44191],{"__ignoreMap":576},[637,44120,44121,44123,44125],{"class":639,"line":577},[637,44122,643],{"class":642},[637,44124,750],{"class":646},[637,44126,669],{"class":642},[637,44128,44129,44131],{"class":639,"line":578},[637,44130,758],{"class":642},[637,44132,25231],{"class":646},[637,44134,44135,44138,44140,44142,44144],{"class":639,"line":708},[637,44136,44137],{"class":650},"    preset",[637,44139,657],{"class":642},[637,44141,660],{"class":642},[637,44143,44013],{"class":663},[637,44145,3131],{"class":642},[637,44147,44148,44151,44153,44155,44157],{"class":639,"line":729},[637,44149,44150],{"class":650},"    :background",[637,44152,657],{"class":642},[637,44154,660],{"class":642},[637,44156,961],{"class":663},[637,44158,3131],{"class":642},[637,44160,44161,44164,44166,44168,44171],{"class":639,"line":739},[637,44162,44163],{"class":650},"    :background-rotation",[637,44165,657],{"class":642},[637,44167,660],{"class":642},[637,44169,44170],{"class":663},"[0, Math.PI / 2, 0]",[637,44172,3131],{"class":642},[637,44174,44175,44178,44180,44182,44185],{"class":639,"line":745},[637,44176,44177],{"class":650},"    :environment-rotation",[637,44179,657],{"class":642},[637,44181,660],{"class":642},[637,44183,44184],{"class":663},"[0, Math.PI / 4, 0]",[637,44186,3131],{"class":642},[637,44188,44189],{"class":639,"line":755},[637,44190,13995],{"class":642},[637,44192,44193,44195,44197],{"class":639,"line":778},[637,44194,732],{"class":642},[637,44196,750],{"class":646},[637,44198,669],{"class":642},[4051,44200,44202],{"id":44201},"syncing-rotations","Syncing Rotations",[614,44204,44205,44206,2027],{},"You can sync the environment rotation with the background rotation using the ",[618,44207,44208],{},"syncMaterials",[626,44210,44212],{"className":628,"code":44211,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003CEnvironment\n    preset=\"sunset\"\n    :background=\"true\"\n    :sync-materials=\"true\"\n    :background-rotation=\"[0, Math.PI / 2, 0]\"\n  />\n\u003C/template>\n",[618,44213,44214,44222,44228,44240,44252,44265,44277,44281],{"__ignoreMap":576},[637,44215,44216,44218,44220],{"class":639,"line":577},[637,44217,643],{"class":642},[637,44219,750],{"class":646},[637,44221,669],{"class":642},[637,44223,44224,44226],{"class":639,"line":578},[637,44225,758],{"class":642},[637,44227,25231],{"class":646},[637,44229,44230,44232,44234,44236,44238],{"class":639,"line":708},[637,44231,44137],{"class":650},[637,44233,657],{"class":642},[637,44235,660],{"class":642},[637,44237,44013],{"class":663},[637,44239,3131],{"class":642},[637,44241,44242,44244,44246,44248,44250],{"class":639,"line":729},[637,44243,44150],{"class":650},[637,44245,657],{"class":642},[637,44247,660],{"class":642},[637,44249,961],{"class":663},[637,44251,3131],{"class":642},[637,44253,44254,44257,44259,44261,44263],{"class":639,"line":739},[637,44255,44256],{"class":650},"    :sync-materials",[637,44258,657],{"class":642},[637,44260,660],{"class":642},[637,44262,961],{"class":663},[637,44264,3131],{"class":642},[637,44266,44267,44269,44271,44273,44275],{"class":639,"line":745},[637,44268,44163],{"class":650},[637,44270,657],{"class":642},[637,44272,660],{"class":642},[637,44274,44170],{"class":663},[637,44276,3131],{"class":642},[637,44278,44279],{"class":639,"line":755},[637,44280,13995],{"class":642},[637,44282,44283,44285,44287],{"class":639,"line":778},[637,44284,732],{"class":642},[637,44286,750],{"class":646},[637,44288,669],{"class":642},[614,44290,4300,44291,44293],{},[618,44292,44208],{}," is enabled:",[2213,44295,44296,44299,44302],{},[2216,44297,44298],{},"The environment rotation will automatically match the background rotation",[2216,44300,44301],{},"All materials in the scene will update to reflect the new rotation",[2216,44303,44304],{},"This ensures visual consistency between the background and environment reflections",[504,44306,922],{"id":921},[927,44308,44309,44319],{},[930,44310,44311],{},[933,44312,44313,44315,44317],{},[936,44314,938],{"align":997},[936,44316,941],{"align":997},[936,44318,944],{},[946,44320,44321,44334,44347,44367,44382,44393,44406,44431,44442,44453,44464,44475,44487,44499,44514,44528],{},[933,44322,44323,44327,44330],{},[951,44324,44325],{"align":997},[618,44326,44067],{},[951,44328,44329],{"align":997},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[951,44331,44332],{},[618,44333,1179],{},[933,44335,44336,44340,44343],{},[951,44337,44338],{"align":997},[618,44339,18081],{},[951,44341,44342],{"align":997},"Path to the environment map files",[951,44344,44345],{},[618,44346,1179],{},[933,44348,44349,44354,44357],{},[951,44350,44351],{"align":997},[618,44352,44353],{},"encoding",[951,44355,44356],{"align":997},"Encoding of the environment map",[951,44358,44359,44362,44363,44366],{},[618,44360,44361],{},"SRGBColorSpace"," for array files, ",[618,44364,44365],{},"LinearEncoding"," for single texture",[933,44368,44369,44373,44378],{},[951,44370,44371],{"align":997},[618,44372,29568],{},[951,44374,958,44375,44377],{"align":997},[618,44376,961],{},", the environment map will be used as the scene background",[951,44379,44380],{},[618,44381,971],{},[933,44383,44384,44388,44391],{},[951,44385,44386],{"align":997},[618,44387,28190],{},[951,44389,44390],{"align":997},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[951,44392,965],{},[933,44394,44395,44399,44402],{},[951,44396,44397],{"align":997},[618,44398,43948],{},[951,44400,44401],{"align":997},"Preset environment map",[951,44403,44404],{},[618,44405,1179],{},[933,44407,44408,44412,44427],{},[951,44409,44410],{"align":997},[618,44411,43993],{},[951,44413,44414,44415,14040,44418,14040,44421,44423,44424,44426],{"align":997},"Resolution variant of the preset HDR (",[618,44416,44417],{},"1k",[618,44419,44420],{},"2k",[618,44422,44025],{},"). Only applies when ",[618,44425,43948],{}," is set",[951,44428,44429],{},[618,44430,44417],{},[933,44432,44433,44437,44440],{},[951,44434,44435],{"align":997},[618,44436,27974],{},[951,44438,44439],{"align":997},"The resolution of the WebGLCubeRenderTarget",[951,44441,28653],{},[933,44443,44444,44448,44451],{},[951,44445,44446],{"align":997},[618,44447,43045],{},[951,44449,44450],{"align":997},"The near of the CubeCamera",[951,44452,1874],{},[933,44454,44455,44459,44462],{},[951,44456,44457],{"align":997},[618,44458,40872],{},[951,44460,44461],{"align":997},"The far of the CubeCamera",[951,44463,9286],{},[933,44465,44466,44470,44473],{},[951,44467,44468],{"align":997},[618,44469,39348],{},[951,44471,44472],{"align":997},"The frames of the cubeCamera.update",[951,44474,13514],{},[933,44476,44477,44482,44485],{},[951,44478,44479],{"align":997},[618,44480,44481],{},"backgroundIntensity",[951,44483,44484],{"align":997},"Intensity of the background",[951,44486,1874],{},[933,44488,44489,44494,44497],{},[951,44490,44491],{"align":997},[618,44492,44493],{},"environmentIntensity",[951,44495,44496],{"align":997},"Intensity of the environment",[951,44498,1874],{},[933,44500,44501,44506,44509],{},[951,44502,44503],{"align":997},[618,44504,44505],{},"backgroundRotation",[951,44507,44508],{"align":997},"Rotation of the background (in radians)",[951,44510,44511],{},[637,44512,44513],{},"0, 0, 0",[933,44515,44516,44521,44524],{},[951,44517,44518],{"align":997},[618,44519,44520],{},"environmentRotation",[951,44522,44523],{"align":997},"Rotation of the environment (in radians)",[951,44525,44526],{},[637,44527,44513],{},[933,44529,44530,44534,44537],{},[951,44531,44532],{"align":997},[618,44533,44208],{},[951,44535,44536],{"align":997},"If true, environment rotation will sync with background rotation",[951,44538,971],{},[4051,44540,43942],{"id":44541},"presets-1",[626,44543,44546],{"className":44544,"code":44545,"language":30324},[30322],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[618,44547,44545],{"__ignoreMap":576},[1327,44549,44550],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":44552},[44553,44554,44555,44558,44561],{"id":624,"depth":578,"text":15},{"id":43735,"depth":578,"text":43736},{"id":43941,"depth":578,"text":43942,"children":44556},[44557],{"id":43974,"depth":708,"text":43975},{"id":44109,"depth":578,"text":44110,"children":44559},[44560],{"id":44201,"depth":708,"text":44202},{"id":921,"depth":578,"text":922,"children":44562},[44563],{"id":44541,"depth":708,"text":43942},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":375,"description":44564},"Jmd9cUvs-xIbV-RK7ZZXFZUkOqGMazbMRyhSpIpQ_LY",{"id":44569,"title":379,"body":44570,"description":45153,"extension":591,"links":592,"meta":45154,"navigation":594,"path":380,"seo":45155,"stem":381,"__hash__":45156},"docs/2.api/8.staging/2.use-environment.md",{"type":501,"value":44571,"toc":45149},[44572,44576,44585,44594,44596,44601,44803,44808,44841,44846,44930,44932,45147],[2295,44573,44574],{},[43497,44575],{},[614,44577,44578,44580,44581,43505,44583,1146],{},[618,44579,379],{}," composable that automatically sets up a global cubemap, which affects the default ",[618,44582,43504],{},[618,44584,43508],{},[614,44586,44587,44588,44593],{},"It uses the ",[1140,44589,44592],{"href":44590,"rel":44591},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1144],"CubeTextureLoader"," to load the cubemap",[504,44595,15],{"id":624},[3199,44597,44598],{},[614,44599,44600],{},"UseEnvironment needs to be wrapped by a Suspense component",[626,44602,44604],{"className":628,"code":44603,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useEnvironment } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\nconst texture = await useEnvironment({\n  files: [\n    '/textures/environmentMaps/0/px.jpg',\n    '/textures/environmentMaps/0/nx.jpg',\n    '/textures/environmentMaps/0/py.jpg',\n    '/textures/environmentMaps/0/ny.jpg',\n    '/textures/environmentMaps/0/pz.jpg',\n    '/textures/environmentMaps/0/nz.jpg',\n  ],\n  path: '',\n  encoding: SRGBColorSpace,\n})\n\u003C/script>\n",[618,44605,44606,44626,44645,44664,44668,44684,44693,44705,44716,44727,44738,44749,44760,44766,44778,44789,44795],{"__ignoreMap":576},[637,44607,44608,44610,44612,44614,44616,44618,44620,44622,44624],{"class":639,"line":577},[637,44609,643],{"class":642},[637,44611,647],{"class":646},[637,44613,651],{"class":650},[637,44615,654],{"class":650},[637,44617,657],{"class":642},[637,44619,660],{"class":642},[637,44621,664],{"class":663},[637,44623,660],{"class":642},[637,44625,669],{"class":642},[637,44627,44628,44630,44632,44635,44637,44639,44641,44643],{"class":639,"line":578},[637,44629,677],{"class":676},[637,44631,680],{"class":642},[637,44633,44634],{"class":683}," useEnvironment",[637,44636,693],{"class":642},[637,44638,696],{"class":676},[637,44640,699],{"class":642},[637,44642,702],{"class":663},[637,44644,705],{"class":642},[637,44646,44647,44649,44651,44654,44656,44658,44660,44662],{"class":639,"line":708},[637,44648,677],{"class":676},[637,44650,680],{"class":642},[637,44652,44653],{"class":683}," SRGBColorSpace",[637,44655,693],{"class":642},[637,44657,696],{"class":676},[637,44659,699],{"class":642},[637,44661,4626],{"class":663},[637,44663,705],{"class":642},[637,44665,44666],{"class":639,"line":729},[637,44667,742],{"emptyLinePlaceholder":594},[637,44669,44670,44672,44674,44676,44678,44680,44682],{"class":639,"line":739},[637,44671,2415],{"class":650},[637,44673,2425],{"class":683},[637,44675,657],{"class":642},[637,44677,24983],{"class":676},[637,44679,44634],{"class":2434},[637,44681,2437],{"class":683},[637,44683,3260],{"class":642},[637,44685,44686,44689,44691],{"class":639,"line":745},[637,44687,44688],{"class":646},"  files",[637,44690,1218],{"class":642},[637,44692,20702],{"class":683},[637,44694,44695,44698,44701,44703],{"class":639,"line":755},[637,44696,44697],{"class":642},"    '",[637,44699,44700],{"class":663},"/textures/environmentMaps/0/px.jpg",[637,44702,2440],{"class":642},[637,44704,2488],{"class":642},[637,44706,44707,44709,44712,44714],{"class":639,"line":778},[637,44708,44697],{"class":642},[637,44710,44711],{"class":663},"/textures/environmentMaps/0/nx.jpg",[637,44713,2440],{"class":642},[637,44715,2488],{"class":642},[637,44717,44718,44720,44723,44725],{"class":639,"line":790},[637,44719,44697],{"class":642},[637,44721,44722],{"class":663},"/textures/environmentMaps/0/py.jpg",[637,44724,2440],{"class":642},[637,44726,2488],{"class":642},[637,44728,44729,44731,44734,44736],{"class":639,"line":800},[637,44730,44697],{"class":642},[637,44732,44733],{"class":663},"/textures/environmentMaps/0/ny.jpg",[637,44735,2440],{"class":642},[637,44737,2488],{"class":642},[637,44739,44740,44742,44745,44747],{"class":639,"line":805},[637,44741,44697],{"class":642},[637,44743,44744],{"class":663},"/textures/environmentMaps/0/pz.jpg",[637,44746,2440],{"class":642},[637,44748,2488],{"class":642},[637,44750,44751,44753,44756,44758],{"class":639,"line":827},[637,44752,44697],{"class":642},[637,44754,44755],{"class":663},"/textures/environmentMaps/0/nz.jpg",[637,44757,2440],{"class":642},[637,44759,2488],{"class":642},[637,44761,44762,44764],{"class":639,"line":631},[637,44763,41963],{"class":683},[637,44765,2488],{"class":642},[637,44767,44768,44771,44773,44776],{"class":639,"line":850},[637,44769,44770],{"class":646},"  path",[637,44772,1218],{"class":642},[637,44774,44775],{"class":642}," ''",[637,44777,2488],{"class":642},[637,44779,44780,44783,44785,44787],{"class":639,"line":861},[637,44781,44782],{"class":646},"  encoding",[637,44784,1218],{"class":642},[637,44786,44653],{"class":683},[637,44788,2488],{"class":642},[637,44790,44791,44793],{"class":639,"line":872},[637,44792,2428],{"class":642},[637,44794,2448],{"class":683},[637,44796,44797,44799,44801],{"class":639,"line":882},[637,44798,732],{"class":642},[637,44800,647],{"class":646},[637,44802,669],{"class":642},[614,44804,24990,44805,44807],{},[618,44806,2717],{}," in your scene:",[626,44809,44812],{"className":628,"code":44810,"highlights":44811,"language":633,"meta":576,"style":576},"\u003CTresMesh>\n  \u003CTresSphereGeometry />\n  \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[708],[618,44813,44814,44822,44827,44833],{"__ignoreMap":576},[637,44815,44816,44818,44820],{"class":639,"line":577},[637,44817,643],{"class":642},[637,44819,856],{"class":646},[637,44821,669],{"class":642},[637,44823,44824],{"class":639,"line":578},[637,44825,44826],{"class":683},"  \u003CTresSphereGeometry />\n",[637,44828,44830],{"class":44829,"line":708},[639,673],[637,44831,44832],{"class":683},"  \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[637,44834,44835,44837,44839],{"class":639,"line":729},[637,44836,732],{"class":642},[637,44838,856],{"class":646},[637,44840,669],{"class":642},[614,44842,43697,44843,44845],{},[618,44844,43700],{}," file directly",[626,44847,44849],{"className":1186,"code":44848,"language":664,"meta":576,"style":576},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n  files: '/sunset.hdr',\n  path: '',\n  encoding: SRGBColorSpace,\n})\n",[618,44850,44851,44869,44873,44889,44904,44914,44924],{"__ignoreMap":576},[637,44852,44853,44855,44857,44859,44861,44863,44865,44867],{"class":639,"line":577},[637,44854,677],{"class":676},[637,44856,680],{"class":642},[637,44858,44634],{"class":683},[637,44860,693],{"class":642},[637,44862,696],{"class":676},[637,44864,699],{"class":642},[637,44866,702],{"class":663},[637,44868,705],{"class":642},[637,44870,44871],{"class":639,"line":578},[637,44872,742],{"emptyLinePlaceholder":594},[637,44874,44875,44877,44879,44881,44883,44885,44887],{"class":639,"line":708},[637,44876,2415],{"class":650},[637,44878,2425],{"class":683},[637,44880,657],{"class":642},[637,44882,24983],{"class":676},[637,44884,44634],{"class":2434},[637,44886,2437],{"class":683},[637,44888,3260],{"class":642},[637,44890,44891,44893,44895,44897,44900,44902],{"class":639,"line":729},[637,44892,44688],{"class":646},[637,44894,1218],{"class":642},[637,44896,699],{"class":642},[637,44898,44899],{"class":663},"/sunset.hdr",[637,44901,2440],{"class":642},[637,44903,2488],{"class":642},[637,44905,44906,44908,44910,44912],{"class":639,"line":739},[637,44907,44770],{"class":646},[637,44909,1218],{"class":642},[637,44911,44775],{"class":642},[637,44913,2488],{"class":642},[637,44915,44916,44918,44920,44922],{"class":639,"line":745},[637,44917,44782],{"class":646},[637,44919,1218],{"class":642},[637,44921,44653],{"class":683},[637,44923,2488],{"class":642},[637,44925,44926,44928],{"class":639,"line":755},[637,44927,2428],{"class":642},[637,44929,2448],{"class":683},[504,44931,14023],{"id":17537},[927,44933,44934,44946],{},[930,44935,44936],{},[933,44937,44938,44940,44942,44944],{},[936,44939,8089],{"align":997},[936,44941,5969],{},[936,44943,944],{},[936,44945,941],{},[946,44947,44948,44965,44982,45004,45023,45040,45057,45078,45095,45112,45130],{},[933,44949,44950,44954,44958,44962],{},[951,44951,44952],{"align":997},[1669,44953,44067],{},[951,44955,44956],{},[618,44957,25358],{},[951,44959,44960],{},[618,44961,1179],{},[951,44963,44964],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[933,44966,44967,44971,44975,44979],{},[951,44968,44969],{"align":997},[1669,44970,18081],{},[951,44972,44973],{},[618,44974,17564],{},[951,44976,44977],{},[618,44978,971],{},[951,44980,44981],{},"Path to the environment map files.",[933,44983,44984,44988,44993,45001],{},[951,44985,44986],{"align":997},[1669,44987,44353],{},[951,44989,44990],{},[618,44991,44992],{},"Encoding",[951,44994,44995,44997,44998,45000],{},[618,44996,44361],{}," for an array of files and ",[618,44999,44365],{}," for a single texture",[951,45002,45003],{},"Encoding of the environment map.",[933,45005,45006,45010,45014,45018],{},[951,45007,45008],{"align":997},[1669,45009,29568],{},[951,45011,45012],{},[618,45013,17564],{},[951,45015,45016],{},[618,45017,971],{},[951,45019,958,45020,45022],{},[618,45021,961],{}," the texture will be used as the scene background.",[933,45024,45025,45029,45033,45037],{},[951,45026,45027],{"align":997},[1669,45028,28190],{},[951,45030,45031],{},[618,45032,5352],{},[951,45034,45035],{},[618,45036,965],{},[951,45038,45039],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[933,45041,45042,45046,45050,45054],{},[951,45043,45044],{"align":997},[1669,45045,43948],{},[951,45047,45048],{},[618,45049,3572],{},[951,45051,45052],{},[618,45053,1179],{},[951,45055,45056],{},"Preset environment map.",[933,45058,45059,45063,45068,45072],{},[951,45060,45061],{"align":997},[1669,45062,43993],{},[951,45064,45065],{},[618,45066,45067],{},"'1k' | '2k' | '4k'",[951,45069,45070],{},[618,45071,44035],{},[951,45073,45074,45075,45077],{},"Resolution variant of the preset HDR. Only applies when ",[618,45076,43948],{}," is set. 4K ≈ 30–60MB.",[933,45079,45080,45084,45088,45092],{},[951,45081,45082],{"align":997},[1669,45083,44481],{},[951,45085,45086],{},[618,45087,5352],{},[951,45089,45090],{},[618,45091,1874],{},[951,45093,45094],{},"Intensity of the background.",[933,45096,45097,45101,45105,45109],{},[951,45098,45099],{"align":997},[1669,45100,44493],{},[951,45102,45103],{},[618,45104,5352],{},[951,45106,45107],{},[618,45108,1874],{},[951,45110,45111],{},"Intensity of the environment.",[933,45113,45114,45118,45123,45127],{},[951,45115,45116],{"align":997},[1669,45117,44505],{},[951,45119,45120],{},[618,45121,45122],{},"VectorFlexibleParams",[951,45124,45125],{},[618,45126,9623],{},[951,45128,45129],{},"Rotation of the background.",[933,45131,45132,45136,45140,45144],{},[951,45133,45134],{"align":997},[1669,45135,44520],{},[951,45137,45138],{},[618,45139,45122],{},[951,45141,45142],{},[618,45143,9623],{},[951,45145,45146],{},"Rotation of the environment.",[1327,45148,26370],{},{"title":576,"searchDepth":577,"depth":578,"links":45150},[45151,45152],{"id":624,"depth":578,"text":15},{"id":17537,"depth":578,"text":14023},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":379,"description":45153},"WFsmQOwv-yc23voKTzWwYBxnk1QVtMW5VaFbmbCf-8c",{"id":45158,"title":383,"body":45159,"description":45408,"extension":591,"links":592,"meta":45409,"navigation":594,"path":384,"seo":45410,"stem":385,"__hash__":45411},"docs/2.api/8.staging/3.lightformer.md",{"type":501,"value":45160,"toc":45405},[45161,45166,45172,45326,45328,45331,45403],[608,45162,45163],{},[45164,45165],"staging-lightformer",{},[614,45167,45168,45169,45171],{},"You can incorporate ",[618,45170,383],{}," into the environment just like a slot.",[626,45173,45175],{"className":628,"code":45174,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { Enviroment, LightFormer } from '@tres/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEnvironment>\n    \u003CLightformer :intensity=\"0.75\" :position=\"[0, 5, -9]\" />\n    \u003CLightformer from=\"ring\" :rotation-y=\"-Math.PI / 2\" :scale=\"[10, 10, 1]\" />\n  \u003C/Environment>\n\u003C/template>\n",[618,45176,45177,45187,45212,45220,45224,45232,45240,45269,45310,45318],{"__ignoreMap":576},[637,45178,45179,45181,45183,45185],{"class":639,"line":577},[637,45180,643],{"class":642},[637,45182,647],{"class":646},[637,45184,651],{"class":650},[637,45186,669],{"class":642},[637,45188,45189,45191,45193,45196,45198,45201,45203,45205,45207,45210],{"class":639,"line":578},[637,45190,677],{"class":676},[637,45192,680],{"class":642},[637,45194,45195],{"class":683}," Enviroment",[637,45197,687],{"class":642},[637,45199,45200],{"class":683}," LightFormer",[637,45202,693],{"class":642},[637,45204,696],{"class":676},[637,45206,699],{"class":642},[637,45208,45209],{"class":663},"@tres/cientos",[637,45211,705],{"class":642},[637,45213,45214,45216,45218],{"class":639,"line":708},[637,45215,732],{"class":642},[637,45217,647],{"class":646},[637,45219,669],{"class":642},[637,45221,45222],{"class":639,"line":729},[637,45223,742],{"emptyLinePlaceholder":594},[637,45225,45226,45228,45230],{"class":639,"line":739},[637,45227,643],{"class":642},[637,45229,750],{"class":646},[637,45231,669],{"class":642},[637,45233,45234,45236,45238],{"class":639,"line":745},[637,45235,758],{"class":642},[637,45237,375],{"class":646},[637,45239,669],{"class":642},[637,45241,45242,45244,45246,45248,45250,45252,45254,45256,45258,45260,45262,45265,45267],{"class":639,"line":755},[637,45243,781],{"class":642},[637,45245,383],{"class":646},[637,45247,1867],{"class":650},[637,45249,657],{"class":642},[637,45251,660],{"class":642},[637,45253,2551],{"class":663},[637,45255,660],{"class":642},[637,45257,1485],{"class":650},[637,45259,657],{"class":642},[637,45261,660],{"class":642},[637,45263,45264],{"class":663},"[0, 5, -9]",[637,45266,660],{"class":642},[637,45268,787],{"class":642},[637,45270,45271,45273,45275,45277,45279,45281,45284,45286,45289,45291,45293,45295,45297,45299,45301,45303,45306,45308],{"class":639,"line":778},[637,45272,781],{"class":642},[637,45274,383],{"class":646},[637,45276,696],{"class":650},[637,45278,657],{"class":642},[637,45280,660],{"class":642},[637,45282,45283],{"class":663},"ring",[637,45285,660],{"class":642},[637,45287,45288],{"class":650}," :rotation-y",[637,45290,657],{"class":642},[637,45292,660],{"class":642},[637,45294,39975],{"class":663},[637,45296,660],{"class":642},[637,45298,813],{"class":650},[637,45300,657],{"class":642},[637,45302,660],{"class":642},[637,45304,45305],{"class":663},"[10, 10, 1]",[637,45307,660],{"class":642},[637,45309,787],{"class":642},[637,45311,45312,45314,45316],{"class":639,"line":790},[637,45313,905],{"class":642},[637,45315,375],{"class":646},[637,45317,669],{"class":642},[637,45319,45320,45322,45324],{"class":639,"line":800},[637,45321,732],{"class":642},[637,45323,750],{"class":646},[637,45325,669],{"class":642},[4051,45327,922],{"id":921},[614,45329,45330],{},"Lightformer inherits from mesh, and its extension parameters include:",[927,45332,45333,45343],{},[930,45334,45335],{},[933,45336,45337,45339,45341],{},[936,45338,938],{"align":997},[936,45340,941],{"align":997},[936,45342,944],{},[946,45344,45345,45366,45377,45391],{},[933,45346,45347,45351,45362],{},[951,45348,45349],{"align":997},[618,45350,8433],{},[951,45352,45353,1672,45356,1672,45358,45361],{"align":997},[618,45354,45355],{},"circle",[618,45357,45283],{},[618,45359,45360],{},"rect",", or any other Mesh type",[951,45363,45364],{},[618,45365,45360],{},[933,45367,45368,45372,45375],{},[951,45369,45370],{"align":997},[618,45371,2065],{},[951,45373,45374],{"align":997},"The intensity of the light",[951,45376,1874],{},[933,45378,45379,45383,45386],{},[951,45380,45381],{"align":997},[618,45382,7547],{},[951,45384,45385],{"align":997},"The color of the light",[951,45387,45388],{},[618,45389,45390],{},"0xffffff",[933,45392,45393,45397,45400],{},[951,45394,45395],{"align":997},[618,45396,30351],{},[951,45398,45399],{"align":997},"The arguments of the Geometry",[951,45401,45402],{},"When using other geometries, set the corresponding arguments",[1327,45404,14377],{},{"title":576,"searchDepth":577,"depth":578,"links":45406},[45407],{"id":921,"depth":708,"text":922},"Addon for environment component that provided you custom lights.",{},{"title":383,"description":45408},"C3TURFuGqCgHegN3UPXdHHYIKEDi-0ACd5UIMvQeHcQ",{"id":45413,"title":387,"body":45414,"description":45733,"extension":591,"links":592,"meta":45734,"navigation":594,"path":388,"seo":45735,"stem":389,"__hash__":45736},"docs/2.api/8.staging/backdrop.md",{"type":501,"value":45415,"toc":45729},[45416,45421,45429,45431,45592,45595,45672,45674,45727],[608,45417,45418],{},[45419,45420],"staging-backdrop",{},[614,45422,2776,45423,9468,45425,45428],{},[618,45424,7317],{},[618,45426,45427],{},"\u003CBackdrop />"," component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.",[504,45430,15],{"id":624},[626,45432,45435],{"className":628,"code":45433,"highlights":45434,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Backdrop } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CBackdrop />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,45436,45437,45457,45475,45495,45503,45507,45515,45523,45541,45550,45558,45576,45584],{"__ignoreMap":576},[637,45438,45439,45441,45443,45445,45447,45449,45451,45453,45455],{"class":639,"line":577},[637,45440,643],{"class":642},[637,45442,647],{"class":646},[637,45444,651],{"class":650},[637,45446,654],{"class":650},[637,45448,657],{"class":642},[637,45450,660],{"class":642},[637,45452,664],{"class":663},[637,45454,660],{"class":642},[637,45456,669],{"class":642},[637,45458,45459,45461,45463,45465,45467,45469,45471,45473],{"class":639,"line":578},[637,45460,677],{"class":676},[637,45462,680],{"class":642},[637,45464,715],{"class":683},[637,45466,693],{"class":642},[637,45468,696],{"class":676},[637,45470,699],{"class":642},[637,45472,724],{"class":663},[637,45474,705],{"class":642},[637,45476,45478,45480,45482,45485,45487,45489,45491,45493],{"class":45477,"line":708},[639,673],[637,45479,677],{"class":676},[637,45481,680],{"class":642},[637,45483,45484],{"class":683}," Backdrop",[637,45486,693],{"class":642},[637,45488,696],{"class":676},[637,45490,699],{"class":642},[637,45492,702],{"class":663},[637,45494,705],{"class":642},[637,45496,45497,45499,45501],{"class":639,"line":729},[637,45498,732],{"class":642},[637,45500,647],{"class":646},[637,45502,669],{"class":642},[637,45504,45505],{"class":639,"line":739},[637,45506,742],{"emptyLinePlaceholder":594},[637,45508,45509,45511,45513],{"class":639,"line":745},[637,45510,643],{"class":642},[637,45512,750],{"class":646},[637,45514,669],{"class":642},[637,45516,45517,45519,45521],{"class":639,"line":755},[637,45518,758],{"class":642},[637,45520,761],{"class":646},[637,45522,669],{"class":642},[637,45524,45525,45527,45529,45531,45533,45535,45537,45539],{"class":639,"line":778},[637,45526,781],{"class":642},[637,45528,784],{"class":646},[637,45530,1485],{"class":650},[637,45532,657],{"class":642},[637,45534,660],{"class":642},[637,45536,42627],{"class":663},[637,45538,660],{"class":642},[637,45540,787],{"class":642},[637,45542,45544,45546,45548],{"class":45543,"line":790},[639,673],[637,45545,781],{"class":642},[637,45547,387],{"class":646},[637,45549,787],{"class":642},[637,45551,45552,45554,45556],{"class":639,"line":800},[637,45553,781],{"class":642},[637,45555,9681],{"class":646},[637,45557,787],{"class":642},[637,45559,45560,45562,45564,45566,45568,45570,45572,45574],{"class":639,"line":805},[637,45561,781],{"class":642},[637,45563,9700],{"class":646},[637,45565,1485],{"class":650},[637,45567,657],{"class":642},[637,45569,660],{"class":642},[637,45571,13362],{"class":663},[637,45573,660],{"class":642},[637,45575,787],{"class":642},[637,45577,45578,45580,45582],{"class":639,"line":827},[637,45579,905],{"class":642},[637,45581,761],{"class":646},[637,45583,669],{"class":642},[637,45585,45586,45588,45590],{"class":639,"line":631},[637,45587,732],{"class":642},[637,45589,750],{"class":646},[637,45591,669],{"class":642},[614,45593,45594],{},"Or with a custom material",[626,45596,45600],{"className":45597,"code":45598,"language":45599,"meta":576,"style":576},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBackdrop :floor=\"1.5\" :segments=\"20\" receive-shadow>\n  \u003CTresMeshPhysicalMaterial color=\"orange\" :roughness=\"1\" />\n\u003C/Backdrop>\n","html",[618,45601,45602,45634,45664],{"__ignoreMap":576},[637,45603,45604,45606,45608,45611,45613,45615,45617,45619,45622,45624,45626,45628,45630,45632],{"class":639,"line":577},[637,45605,643],{"class":642},[637,45607,387],{"class":646},[637,45609,45610],{"class":650}," :floor",[637,45612,657],{"class":642},[637,45614,660],{"class":642},[637,45616,29399],{"class":663},[637,45618,660],{"class":642},[637,45620,45621],{"class":650}," :segments",[637,45623,657],{"class":642},[637,45625,660],{"class":642},[637,45627,30794],{"class":663},[637,45629,660],{"class":642},[637,45631,42862],{"class":650},[637,45633,669],{"class":642},[637,45635,45636,45638,45641,45643,45645,45647,45649,45651,45654,45656,45658,45660,45662],{"class":639,"line":578},[637,45637,758],{"class":642},[637,45639,45640],{"class":646},"TresMeshPhysicalMaterial",[637,45642,2689],{"class":650},[637,45644,657],{"class":642},[637,45646,660],{"class":642},[637,45648,13327],{"class":663},[637,45650,660],{"class":642},[637,45652,45653],{"class":650}," :roughness",[637,45655,657],{"class":642},[637,45657,660],{"class":642},[637,45659,1874],{"class":663},[637,45661,660],{"class":642},[637,45663,787],{"class":642},[637,45665,45666,45668,45670],{"class":639,"line":708},[637,45667,732],{"class":642},[637,45669,387],{"class":646},[637,45671,669],{"class":642},[504,45673,922],{"id":921},[927,45675,45676,45688],{},[930,45677,45678],{},[933,45679,45680,45682,45684,45686],{},[936,45681,8089],{"align":997},[936,45683,5969],{"align":997},[936,45685,944],{},[936,45687,18588],{},[946,45689,45690,45703,45715],{},[933,45691,45692,45694,45696,45700],{},[951,45693,8492],{"align":997},[951,45695,5352],{"align":997},[951,45697,45698],{},[618,45699,13617],{},[951,45701,45702],{},"No",[933,45704,45705,45707,45709,45713],{},[951,45706,30784],{"align":997},[951,45708,5352],{"align":997},[951,45710,45711],{},[618,45712,30794],{},[951,45714,45702],{},[933,45716,45717,45719,45721,45725],{},[951,45718,18648],{"align":997},[951,45720,17564],{"align":997},[951,45722,45723],{},[618,45724,971],{},[951,45726,45702],{},[1327,45728,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":45730},[45731,45732],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A curved plane studio backdrop for presentational purposes.",{},{"title":387,"description":45733},"H0D0nxhSUngurmG2CpnQ3kEOUzOJchm3LVO_M0_yMnI",{"id":45738,"title":391,"body":45739,"description":46331,"extension":591,"links":592,"meta":46332,"navigation":594,"path":392,"seo":46333,"stem":393,"__hash__":46334},"docs/2.api/8.staging/ocean.md",{"type":501,"value":45740,"toc":46323},[45741,45746,45761,45766,45768,45901,45905,45914,45917,45932,45936,45939,46100,46102,46108,46321],[608,45742,45743],{},[45744,45745],"staging-ocean",{},[614,45747,45748,45751,45752,1146],{},[618,45749,45750],{},"\u003COcean />"," is a wrapper for the ",[1140,45753,45756,45757,45760],{"href":45754,"rel":45755},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1144],"Three.js ",[618,45758,45759],{},"Water"," add-on",[3199,45762,45763],{},[614,45764,45765],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[504,45767,15],{"id":624},[626,45769,45772],{"className":628,"code":45770,"highlights":45771,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003COcean />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,45773,45774,45794,45812,45832,45840,45844,45852,45860,45868,45877,45885,45893],{"__ignoreMap":576},[637,45775,45776,45778,45780,45782,45784,45786,45788,45790,45792],{"class":639,"line":577},[637,45777,643],{"class":642},[637,45779,647],{"class":646},[637,45781,651],{"class":650},[637,45783,654],{"class":650},[637,45785,657],{"class":642},[637,45787,660],{"class":642},[637,45789,664],{"class":663},[637,45791,660],{"class":642},[637,45793,669],{"class":642},[637,45795,45796,45798,45800,45802,45804,45806,45808,45810],{"class":639,"line":578},[637,45797,677],{"class":676},[637,45799,680],{"class":642},[637,45801,715],{"class":683},[637,45803,693],{"class":642},[637,45805,696],{"class":676},[637,45807,699],{"class":642},[637,45809,724],{"class":663},[637,45811,705],{"class":642},[637,45813,45815,45817,45819,45822,45824,45826,45828,45830],{"class":45814,"line":708},[639,673],[637,45816,677],{"class":676},[637,45818,680],{"class":642},[637,45820,45821],{"class":683}," Ocean",[637,45823,693],{"class":642},[637,45825,696],{"class":676},[637,45827,699],{"class":642},[637,45829,702],{"class":663},[637,45831,705],{"class":642},[637,45833,45834,45836,45838],{"class":639,"line":729},[637,45835,732],{"class":642},[637,45837,647],{"class":646},[637,45839,669],{"class":642},[637,45841,45842],{"class":639,"line":739},[637,45843,742],{"emptyLinePlaceholder":594},[637,45845,45846,45848,45850],{"class":639,"line":745},[637,45847,643],{"class":642},[637,45849,750],{"class":646},[637,45851,669],{"class":642},[637,45853,45854,45856,45858],{"class":639,"line":755},[637,45855,758],{"class":642},[637,45857,761],{"class":646},[637,45859,669],{"class":642},[637,45861,45862,45864,45866],{"class":639,"line":778},[637,45863,781],{"class":642},[637,45865,21652],{"class":646},[637,45867,669],{"class":642},[637,45869,45871,45873,45875],{"class":45870,"line":790},[639,673],[637,45872,853],{"class":642},[637,45874,391],{"class":646},[637,45876,787],{"class":642},[637,45878,45879,45881,45883],{"class":639,"line":800},[637,45880,895],{"class":642},[637,45882,21652],{"class":646},[637,45884,669],{"class":642},[637,45886,45887,45889,45891],{"class":639,"line":805},[637,45888,905],{"class":642},[637,45890,761],{"class":646},[637,45892,669],{"class":642},[637,45894,45895,45897,45899],{"class":639,"line":827},[637,45896,732],{"class":642},[637,45898,750],{"class":646},[637,45900,669],{"class":642},[4051,45902,45904],{"id":45903},"sky","SKY",[614,45906,45907,45909,45910,45913],{},[618,45908,45750],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[618,45911,45912],{},"\u003CSky />"," is not required for making this component work.)",[4051,45915,45916],{"id":40442},"Fog",[614,45918,2776,45919,45921,45922,5611,45926,45931],{},[618,45920,45750],{}," component also reacts when there's ",[1140,45923,45916],{"href":45924,"rel":45925},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1144],[1140,45927,45930],{"href":45928,"rel":45929},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1144],"FogExp2"," in your scene.",[504,45933,45935],{"id":45934},"custom-geometry","Custom Geometry",[614,45937,45938],{},"You can use custom geometry by adding it as a child.",[626,45940,45943],{"className":628,"code":45941,"highlights":45942,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003COcean>\n        \u003CTresCircleGeometry :args=\"[50, 16]\" />\n      \u003C/Ocean>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805],[618,45944,45945,45965,45983,46002,46010,46014,46022,46030,46038,46047,46067,46076,46084,46092],{"__ignoreMap":576},[637,45946,45947,45949,45951,45953,45955,45957,45959,45961,45963],{"class":639,"line":577},[637,45948,643],{"class":642},[637,45950,647],{"class":646},[637,45952,651],{"class":650},[637,45954,654],{"class":650},[637,45956,657],{"class":642},[637,45958,660],{"class":642},[637,45960,664],{"class":663},[637,45962,660],{"class":642},[637,45964,669],{"class":642},[637,45966,45967,45969,45971,45973,45975,45977,45979,45981],{"class":639,"line":578},[637,45968,677],{"class":676},[637,45970,680],{"class":642},[637,45972,715],{"class":683},[637,45974,693],{"class":642},[637,45976,696],{"class":676},[637,45978,699],{"class":642},[637,45980,724],{"class":663},[637,45982,705],{"class":642},[637,45984,45986,45988,45990,45992,45994,45996,45998,46000],{"class":45985,"line":708},[639,673],[637,45987,677],{"class":676},[637,45989,680],{"class":642},[637,45991,45821],{"class":683},[637,45993,693],{"class":642},[637,45995,696],{"class":676},[637,45997,699],{"class":642},[637,45999,702],{"class":663},[637,46001,705],{"class":642},[637,46003,46004,46006,46008],{"class":639,"line":729},[637,46005,732],{"class":642},[637,46007,647],{"class":646},[637,46009,669],{"class":642},[637,46011,46012],{"class":639,"line":739},[637,46013,742],{"emptyLinePlaceholder":594},[637,46015,46016,46018,46020],{"class":639,"line":745},[637,46017,643],{"class":642},[637,46019,750],{"class":646},[637,46021,669],{"class":642},[637,46023,46024,46026,46028],{"class":639,"line":755},[637,46025,758],{"class":642},[637,46027,761],{"class":646},[637,46029,669],{"class":642},[637,46031,46032,46034,46036],{"class":639,"line":778},[637,46033,781],{"class":642},[637,46035,21652],{"class":646},[637,46037,669],{"class":642},[637,46039,46041,46043,46045],{"class":46040,"line":790},[639,673],[637,46042,853],{"class":642},[637,46044,391],{"class":646},[637,46046,669],{"class":642},[637,46048,46050,46052,46054,46056,46058,46060,46063,46065],{"class":46049,"line":800},[639,673],[637,46051,864],{"class":642},[637,46053,10135],{"class":646},[637,46055,1959],{"class":650},[637,46057,657],{"class":642},[637,46059,660],{"class":642},[637,46061,46062],{"class":663},"[50, 16]",[637,46064,660],{"class":642},[637,46066,787],{"class":642},[637,46068,46070,46072,46074],{"class":46069,"line":805},[639,673],[637,46071,885],{"class":642},[637,46073,391],{"class":646},[637,46075,669],{"class":642},[637,46077,46078,46080,46082],{"class":639,"line":827},[637,46079,895],{"class":642},[637,46081,21652],{"class":646},[637,46083,669],{"class":642},[637,46085,46086,46088,46090],{"class":639,"line":631},[637,46087,905],{"class":642},[637,46089,761],{"class":646},[637,46091,669],{"class":642},[637,46093,46094,46096,46098],{"class":639,"line":850},[637,46095,732],{"class":642},[637,46097,750],{"class":646},[637,46099,669],{"class":642},[504,46101,922],{"id":921},[46103,46104,46105],"prose-tip",{},[614,46106,46107],{},"Props marked with ✅ support reactive changes at runtime. Props marked with ❌ are only read at construction time and cannot be changed after the component is mounted.",[927,46109,46110,46123],{},[930,46111,46112],{},[933,46113,46114,46116,46118,46120],{},[936,46115,938],{"align":997},[936,46117,941],{"align":997},[936,46119,944],{},[936,46121,46122],{"align":29233},"Reactive",[946,46124,46125,46142,46158,46177,46194,46211,46228,46244,46259,46275,46291,46306],{},[933,46126,46127,46132,46135,46139],{},[951,46128,46129],{"align":997},[1669,46130,46131],{},"textureWidth",[951,46133,46134],{"align":997},"Width of the mirror texture",[951,46136,46137],{},[618,46138,27983],{},[951,46140,46141],{"align":29233},"❌",[933,46143,46144,46149,46152,46156],{},[951,46145,46146],{"align":997},[1669,46147,46148],{},"textureHeight",[951,46150,46151],{"align":997},"Height of the mirror texture",[951,46153,46154],{},[618,46155,27983],{},[951,46157,46141],{"align":29233},[933,46159,46160,46165,46168,46175],{},[951,46161,46162],{"align":997},[1669,46163,46164],{},"waterNormals",[951,46166,46167],{"align":997},"URL of the water normal texture",[951,46169,46170],{},[1140,46171,46174],{"href":46172,"rel":46173},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1144],"Water_1_M_Normal.jpg",[951,46176,46141],{"align":29233},[933,46178,46179,46184,46187,46192],{},[951,46180,46181],{"align":997},[1669,46182,46183],{},"sunDirection",[951,46185,46186],{"align":997},"Sun direction to be reflected on the water",[951,46188,46189],{},[618,46190,46191],{},"Vector3(0,0,0)",[951,46193,46141],{"align":29233},[933,46195,46196,46201,46204,46208],{},[951,46197,46198],{"align":997},[1669,46199,46200],{},"sunColor",[951,46202,46203],{"align":997},"Sun color to be reflected on the water",[951,46205,46206],{},[618,46207,45390],{},[951,46209,46210],{"align":29233},"✅",[933,46212,46213,46218,46221,46226],{},[951,46214,46215],{"align":997},[1669,46216,46217],{},"waterColor",[951,46219,46220],{"align":997},"Water color",[951,46222,46223],{},[618,46224,46225],{},"0x001e0f",[951,46227,46210],{"align":29233},[933,46229,46230,46234,46237,46242],{},[951,46231,46232],{"align":997},[1669,46233,29351],{},[951,46235,46236],{"align":997},"Distortion scale on reflected objects",[951,46238,46239],{},[618,46240,46241],{},"3.7",[951,46243,46210],{"align":29233},[933,46245,46246,46250,46253,46257],{},[951,46247,46248],{"align":997},[1669,46249,16731],{},[951,46251,46252],{"align":997},"Size of the water normals",[951,46254,46255],{},[618,46256,1874],{},[951,46258,46210],{"align":29233},[933,46260,46261,46266,46269,46273],{},[951,46262,46263],{"align":997},[1669,46264,46265],{},"clipBias",[951,46267,46268],{"align":997},"Clip bias for the render target",[951,46270,46271],{},[618,46272,13783],{},[951,46274,46141],{"align":29233},[933,46276,46277,46282,46285,46289],{},[951,46278,46279],{"align":997},[1669,46280,46281],{},"alpha",[951,46283,46284],{"align":997},"Alpha transparency of the water",[951,46286,46287],{},[618,46288,13661],{},[951,46290,46210],{"align":29233},[933,46292,46293,46297,46300,46304],{},[951,46294,46295],{"align":997},[1669,46296,27394],{},[951,46298,46299],{"align":997},"Which side of the mesh renders the water",[951,46301,46302],{},[618,46303,27407],{},[951,46305,46141],{"align":29233},[933,46307,46308,46312,46315,46319],{},[951,46309,46310],{"align":997},[1669,46311,9781],{},[951,46313,46314],{"align":997},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[951,46316,46317],{},[618,46318,1874],{},[951,46320,46210],{"align":29233},[1327,46322,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":46324},[46325,46329,46330],{"id":624,"depth":578,"text":15,"children":46326},[46327,46328],{"id":45903,"depth":708,"text":45904},{"id":40442,"depth":708,"text":45916},{"id":45934,"depth":578,"text":45935},{"id":921,"depth":578,"text":922},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":391,"description":46331},"5q-r3e4Wze0nFZnJd16ECdI8wU7cxHU35-r6Z0qCmhU",{"id":46336,"title":395,"body":46337,"description":47295,"extension":591,"links":592,"meta":47296,"navigation":594,"path":396,"seo":47297,"stem":397,"__hash__":47298},"docs/2.api/8.staging/precipitation.md",{"type":501,"value":46338,"toc":47287},[46339,46344,46350,46352,46358,46501,46505,46508,46697,46701,46704,46889,46893,46896,47110,47113,47118,47120,47285],[608,46340,46341],{},[46342,46343],"staging-precipitation",{},[614,46345,46346,46349],{},[618,46347,46348],{},"\u003CPrecipitation />"," is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.",[504,46351,15],{"id":624},[614,46353,46354,46355,46357],{},"You can use ",[618,46356,46348],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[626,46359,46362],{"className":628,"code":46360,"highlights":46361,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,46363,46364,46384,46402,46422,46430,46434,46442,46450,46468,46477,46485,46493],{"__ignoreMap":576},[637,46365,46366,46368,46370,46372,46374,46376,46378,46380,46382],{"class":639,"line":577},[637,46367,643],{"class":642},[637,46369,647],{"class":646},[637,46371,651],{"class":650},[637,46373,654],{"class":650},[637,46375,657],{"class":642},[637,46377,660],{"class":642},[637,46379,664],{"class":663},[637,46381,660],{"class":642},[637,46383,669],{"class":642},[637,46385,46386,46388,46390,46392,46394,46396,46398,46400],{"class":639,"line":578},[637,46387,677],{"class":676},[637,46389,680],{"class":642},[637,46391,715],{"class":683},[637,46393,693],{"class":642},[637,46395,696],{"class":676},[637,46397,699],{"class":642},[637,46399,724],{"class":663},[637,46401,705],{"class":642},[637,46403,46405,46407,46409,46412,46414,46416,46418,46420],{"class":46404,"line":708},[639,673],[637,46406,677],{"class":676},[637,46408,680],{"class":642},[637,46410,46411],{"class":683}," Precipitation",[637,46413,693],{"class":642},[637,46415,696],{"class":676},[637,46417,699],{"class":642},[637,46419,702],{"class":663},[637,46421,705],{"class":642},[637,46423,46424,46426,46428],{"class":639,"line":729},[637,46425,732],{"class":642},[637,46427,647],{"class":646},[637,46429,669],{"class":642},[637,46431,46432],{"class":639,"line":739},[637,46433,742],{"emptyLinePlaceholder":594},[637,46435,46436,46438,46440],{"class":639,"line":745},[637,46437,643],{"class":642},[637,46439,750],{"class":646},[637,46441,669],{"class":642},[637,46443,46444,46446,46448],{"class":639,"line":755},[637,46445,758],{"class":642},[637,46447,761],{"class":646},[637,46449,669],{"class":642},[637,46451,46452,46454,46456,46458,46460,46462,46464,46466],{"class":639,"line":778},[637,46453,781],{"class":642},[637,46455,784],{"class":646},[637,46457,1485],{"class":650},[637,46459,657],{"class":642},[637,46461,660],{"class":642},[637,46463,42627],{"class":663},[637,46465,660],{"class":642},[637,46467,787],{"class":642},[637,46469,46471,46473,46475],{"class":46470,"line":790},[639,673],[637,46472,781],{"class":642},[637,46474,395],{"class":646},[637,46476,787],{"class":642},[637,46478,46479,46481,46483],{"class":639,"line":800},[637,46480,781],{"class":642},[637,46482,9681],{"class":646},[637,46484,787],{"class":642},[637,46486,46487,46489,46491],{"class":639,"line":805},[637,46488,905],{"class":642},[637,46490,761],{"class":646},[637,46492,669],{"class":642},[637,46494,46495,46497,46499],{"class":639,"line":827},[637,46496,732],{"class":642},[637,46498,750],{"class":646},[637,46500,669],{"class":642},[4051,46502,46504],{"id":46503},"rain","Rain",[614,46506,46507],{},"By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.",[626,46509,46512],{"className":628,"code":46510,"highlights":46511,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :count=\"2000\"\n      :speed=\"0.3\"\n      :randomness=\"0\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631],[618,46513,46514,46534,46552,46571,46579,46583,46591,46599,46617,46625,46640,46654,46668,46673,46681,46689],{"__ignoreMap":576},[637,46515,46516,46518,46520,46522,46524,46526,46528,46530,46532],{"class":639,"line":577},[637,46517,643],{"class":642},[637,46519,647],{"class":646},[637,46521,651],{"class":650},[637,46523,654],{"class":650},[637,46525,657],{"class":642},[637,46527,660],{"class":642},[637,46529,664],{"class":663},[637,46531,660],{"class":642},[637,46533,669],{"class":642},[637,46535,46536,46538,46540,46542,46544,46546,46548,46550],{"class":639,"line":578},[637,46537,677],{"class":676},[637,46539,680],{"class":642},[637,46541,715],{"class":683},[637,46543,693],{"class":642},[637,46545,696],{"class":676},[637,46547,699],{"class":642},[637,46549,724],{"class":663},[637,46551,705],{"class":642},[637,46553,46555,46557,46559,46561,46563,46565,46567,46569],{"class":46554,"line":708},[639,673],[637,46556,677],{"class":676},[637,46558,680],{"class":642},[637,46560,46411],{"class":683},[637,46562,693],{"class":642},[637,46564,696],{"class":676},[637,46566,699],{"class":642},[637,46568,702],{"class":663},[637,46570,705],{"class":642},[637,46572,46573,46575,46577],{"class":639,"line":729},[637,46574,732],{"class":642},[637,46576,647],{"class":646},[637,46578,669],{"class":642},[637,46580,46581],{"class":639,"line":739},[637,46582,742],{"emptyLinePlaceholder":594},[637,46584,46585,46587,46589],{"class":639,"line":745},[637,46586,643],{"class":642},[637,46588,750],{"class":646},[637,46590,669],{"class":642},[637,46592,46593,46595,46597],{"class":639,"line":755},[637,46594,758],{"class":642},[637,46596,761],{"class":646},[637,46598,669],{"class":642},[637,46600,46601,46603,46605,46607,46609,46611,46613,46615],{"class":639,"line":778},[637,46602,781],{"class":642},[637,46604,784],{"class":646},[637,46606,1485],{"class":650},[637,46608,657],{"class":642},[637,46610,660],{"class":642},[637,46612,42627],{"class":663},[637,46614,660],{"class":642},[637,46616,787],{"class":642},[637,46618,46620,46622],{"class":46619,"line":790},[639,673],[637,46621,781],{"class":642},[637,46623,46624],{"class":646},"Precipitation\n",[637,46626,46628,46631,46633,46635,46638],{"class":46627,"line":800},[639,673],[637,46629,46630],{"class":650},"      :count",[637,46632,657],{"class":642},[637,46634,660],{"class":642},[637,46636,46637],{"class":663},"2000",[637,46639,3131],{"class":642},[637,46641,46643,46646,46648,46650,46652],{"class":46642,"line":805},[639,673],[637,46644,46645],{"class":650},"      :speed",[637,46647,657],{"class":642},[637,46649,660],{"class":642},[637,46651,39172],{"class":663},[637,46653,3131],{"class":642},[637,46655,46657,46660,46662,46664,46666],{"class":46656,"line":827},[639,673],[637,46658,46659],{"class":650},"      :randomness",[637,46661,657],{"class":642},[637,46663,660],{"class":642},[637,46665,965],{"class":663},[637,46667,3131],{"class":642},[637,46669,46671],{"class":46670,"line":631},[639,673],[637,46672,17274],{"class":642},[637,46674,46675,46677,46679],{"class":639,"line":850},[637,46676,781],{"class":642},[637,46678,9681],{"class":646},[637,46680,787],{"class":642},[637,46682,46683,46685,46687],{"class":639,"line":861},[637,46684,905],{"class":642},[637,46686,761],{"class":646},[637,46688,669],{"class":642},[637,46690,46691,46693,46695],{"class":639,"line":872},[637,46692,732],{"class":642},[637,46694,750],{"class":646},[637,46696,669],{"class":642},[4051,46698,46700],{"id":46699},"storm","Storm",[614,46702,46703],{},"A storm effect? Easy just increase the randomness.",[626,46705,46708],{"className":628,"code":46706,"highlights":46707,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :count=\"3000\"\n      :speed=\"0.5\"\n      :randomness=\"1.5\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631],[618,46709,46710,46730,46748,46767,46775,46779,46787,46795,46813,46820,46834,46847,46860,46865,46873,46881],{"__ignoreMap":576},[637,46711,46712,46714,46716,46718,46720,46722,46724,46726,46728],{"class":639,"line":577},[637,46713,643],{"class":642},[637,46715,647],{"class":646},[637,46717,651],{"class":650},[637,46719,654],{"class":650},[637,46721,657],{"class":642},[637,46723,660],{"class":642},[637,46725,664],{"class":663},[637,46727,660],{"class":642},[637,46729,669],{"class":642},[637,46731,46732,46734,46736,46738,46740,46742,46744,46746],{"class":639,"line":578},[637,46733,677],{"class":676},[637,46735,680],{"class":642},[637,46737,715],{"class":683},[637,46739,693],{"class":642},[637,46741,696],{"class":676},[637,46743,699],{"class":642},[637,46745,724],{"class":663},[637,46747,705],{"class":642},[637,46749,46751,46753,46755,46757,46759,46761,46763,46765],{"class":46750,"line":708},[639,673],[637,46752,677],{"class":676},[637,46754,680],{"class":642},[637,46756,46411],{"class":683},[637,46758,693],{"class":642},[637,46760,696],{"class":676},[637,46762,699],{"class":642},[637,46764,702],{"class":663},[637,46766,705],{"class":642},[637,46768,46769,46771,46773],{"class":639,"line":729},[637,46770,732],{"class":642},[637,46772,647],{"class":646},[637,46774,669],{"class":642},[637,46776,46777],{"class":639,"line":739},[637,46778,742],{"emptyLinePlaceholder":594},[637,46780,46781,46783,46785],{"class":639,"line":745},[637,46782,643],{"class":642},[637,46784,750],{"class":646},[637,46786,669],{"class":642},[637,46788,46789,46791,46793],{"class":639,"line":755},[637,46790,758],{"class":642},[637,46792,761],{"class":646},[637,46794,669],{"class":642},[637,46796,46797,46799,46801,46803,46805,46807,46809,46811],{"class":639,"line":778},[637,46798,781],{"class":642},[637,46800,784],{"class":646},[637,46802,1485],{"class":650},[637,46804,657],{"class":642},[637,46806,660],{"class":642},[637,46808,42627],{"class":663},[637,46810,660],{"class":642},[637,46812,787],{"class":642},[637,46814,46816,46818],{"class":46815,"line":790},[639,673],[637,46817,781],{"class":642},[637,46819,46624],{"class":646},[637,46821,46823,46825,46827,46829,46832],{"class":46822,"line":800},[639,673],[637,46824,46630],{"class":650},[637,46826,657],{"class":642},[637,46828,660],{"class":642},[637,46830,46831],{"class":663},"3000",[637,46833,3131],{"class":642},[637,46835,46837,46839,46841,46843,46845],{"class":46836,"line":805},[639,673],[637,46838,46645],{"class":650},[637,46840,657],{"class":642},[637,46842,660],{"class":642},[637,46844,1946],{"class":663},[637,46846,3131],{"class":642},[637,46848,46850,46852,46854,46856,46858],{"class":46849,"line":827},[639,673],[637,46851,46659],{"class":650},[637,46853,657],{"class":642},[637,46855,660],{"class":642},[637,46857,29399],{"class":663},[637,46859,3131],{"class":642},[637,46861,46863],{"class":46862,"line":631},[639,673],[637,46864,17274],{"class":642},[637,46866,46867,46869,46871],{"class":639,"line":850},[637,46868,781],{"class":642},[637,46870,9681],{"class":646},[637,46872,787],{"class":642},[637,46874,46875,46877,46879],{"class":639,"line":861},[637,46876,905],{"class":642},[637,46878,761],{"class":646},[637,46880,669],{"class":642},[637,46882,46883,46885,46887],{"class":639,"line":872},[637,46884,732],{"class":642},[637,46886,750],{"class":646},[637,46888,669],{"class":642},[4051,46890,46892],{"id":46891},"beam","Beam",[614,46894,46895],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[626,46897,46900],{"className":628,"code":46898,"highlights":46899,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :area=\"[0.5, 0.5, 20]\"\n      :count=\"1000\"\n      :speed=\"0.2\"\n      :size=\"0.3\"\n      color=\"#00ff00\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631,850,861],[618,46901,46902,46922,46940,46959,46967,46971,46979,46987,47005,47012,47027,47040,47053,47067,47081,47086,47094,47102],{"__ignoreMap":576},[637,46903,46904,46906,46908,46910,46912,46914,46916,46918,46920],{"class":639,"line":577},[637,46905,643],{"class":642},[637,46907,647],{"class":646},[637,46909,651],{"class":650},[637,46911,654],{"class":650},[637,46913,657],{"class":642},[637,46915,660],{"class":642},[637,46917,664],{"class":663},[637,46919,660],{"class":642},[637,46921,669],{"class":642},[637,46923,46924,46926,46928,46930,46932,46934,46936,46938],{"class":639,"line":578},[637,46925,677],{"class":676},[637,46927,680],{"class":642},[637,46929,715],{"class":683},[637,46931,693],{"class":642},[637,46933,696],{"class":676},[637,46935,699],{"class":642},[637,46937,724],{"class":663},[637,46939,705],{"class":642},[637,46941,46943,46945,46947,46949,46951,46953,46955,46957],{"class":46942,"line":708},[639,673],[637,46944,677],{"class":676},[637,46946,680],{"class":642},[637,46948,46411],{"class":683},[637,46950,693],{"class":642},[637,46952,696],{"class":676},[637,46954,699],{"class":642},[637,46956,702],{"class":663},[637,46958,705],{"class":642},[637,46960,46961,46963,46965],{"class":639,"line":729},[637,46962,732],{"class":642},[637,46964,647],{"class":646},[637,46966,669],{"class":642},[637,46968,46969],{"class":639,"line":739},[637,46970,742],{"emptyLinePlaceholder":594},[637,46972,46973,46975,46977],{"class":639,"line":745},[637,46974,643],{"class":642},[637,46976,750],{"class":646},[637,46978,669],{"class":642},[637,46980,46981,46983,46985],{"class":639,"line":755},[637,46982,758],{"class":642},[637,46984,761],{"class":646},[637,46986,669],{"class":642},[637,46988,46989,46991,46993,46995,46997,46999,47001,47003],{"class":639,"line":778},[637,46990,781],{"class":642},[637,46992,784],{"class":646},[637,46994,1485],{"class":650},[637,46996,657],{"class":642},[637,46998,660],{"class":642},[637,47000,42627],{"class":663},[637,47002,660],{"class":642},[637,47004,787],{"class":642},[637,47006,47008,47010],{"class":47007,"line":790},[639,673],[637,47009,781],{"class":642},[637,47011,46624],{"class":646},[637,47013,47015,47018,47020,47022,47025],{"class":47014,"line":800},[639,673],[637,47016,47017],{"class":650},"      :area",[637,47019,657],{"class":642},[637,47021,660],{"class":642},[637,47023,47024],{"class":663},"[0.5, 0.5, 20]",[637,47026,3131],{"class":642},[637,47028,47030,47032,47034,47036,47038],{"class":47029,"line":805},[639,673],[637,47031,46630],{"class":650},[637,47033,657],{"class":642},[637,47035,660],{"class":642},[637,47037,9286],{"class":663},[637,47039,3131],{"class":642},[637,47041,47043,47045,47047,47049,47051],{"class":47042,"line":827},[639,673],[637,47044,46645],{"class":650},[637,47046,657],{"class":642},[637,47048,660],{"class":642},[637,47050,5729],{"class":663},[637,47052,3131],{"class":642},[637,47054,47056,47059,47061,47063,47065],{"class":47055,"line":631},[639,673],[637,47057,47058],{"class":650},"      :size",[637,47060,657],{"class":642},[637,47062,660],{"class":642},[637,47064,39172],{"class":663},[637,47066,3131],{"class":642},[637,47068,47070,47072,47074,47076,47079],{"class":47069,"line":850},[639,673],[637,47071,30696],{"class":650},[637,47073,657],{"class":642},[637,47075,660],{"class":642},[637,47077,47078],{"class":663},"#00ff00",[637,47080,3131],{"class":642},[637,47082,47084],{"class":47083,"line":861},[639,673],[637,47085,17274],{"class":642},[637,47087,47088,47090,47092],{"class":639,"line":872},[637,47089,781],{"class":642},[637,47091,9681],{"class":646},[637,47093,787],{"class":642},[637,47095,47096,47098,47100],{"class":639,"line":882},[637,47097,905],{"class":642},[637,47099,761],{"class":646},[637,47101,669],{"class":642},[637,47103,47104,47106,47108],{"class":639,"line":632},[637,47105,732],{"class":642},[637,47107,750],{"class":646},[637,47109,669],{"class":642},[614,47111,47112],{},"You can create much more! ☔",[3199,47114,47115],{},[614,47116,47117],{},"Be careful with the performance this components render infinite particles in movement",[504,47119,922],{"id":921},[927,47121,47122,47132],{},[930,47123,47124],{},[933,47125,47126,47128,47130],{},[936,47127,938],{"align":997},[936,47129,941],{"align":997},[936,47131,944],{},[946,47133,47134,47145,47160,47171,47182,47194,47205,47217,47228,47239,47251,47262,47273],{},[933,47135,47136,47140,47143],{},[951,47137,47138],{"align":997},[1669,47139,16731],{},[951,47141,47142],{"align":997},"The size of the drops.",[951,47144,2163],{},[933,47146,47147,47152,47155],{},[951,47148,47149],{"align":997},[1669,47150,47151],{},"area",[951,47153,47154],{"align":997},"The size of the precipitation area.",[951,47156,47157],{},[637,47158,47159],{},"10, 10, 20",[933,47161,47162,47166,47169],{},[951,47163,47164],{"align":997},[1669,47165,7547],{},[951,47167,47168],{"align":997},"The color of the drops.",[951,47170,45390],{},[933,47172,47173,47177,47180],{},[951,47174,47175],{"align":997},[1669,47176,2981],{},[951,47178,47179],{"align":997},"Color texture of the drops.",[951,47181,3656],{},[933,47183,47184,47189,47192],{},[951,47185,47186],{"align":997},[1669,47187,47188],{},"alphaMap",[951,47190,47191],{"align":997},"Alpha texture of the Drops.",[951,47193,3656],{},[933,47195,47196,47200,47203],{},[951,47197,47198],{"align":997},[1669,47199,39429],{},[951,47201,47202],{"align":997},"Enables the WebGL to know when not to render the pixel.",[951,47204,1886],{},[933,47206,47207,47211,47214],{},[951,47208,47209],{"align":997},[1669,47210,11611],{},[951,47212,47213],{"align":997},"Set the opacity of the drops.",[951,47215,47216],{},"0.8",[933,47218,47219,47223,47226],{},[951,47220,47221],{"align":997},[1669,47222,12009],{},[951,47224,47225],{"align":997},"Number of drops.",[951,47227,9129],{},[933,47229,47230,47234,47237],{},[951,47231,47232],{"align":997},[1669,47233,9781],{},[951,47235,47236],{"align":997},"Drops speed.",[951,47238,2163],{},[933,47240,47241,47246,47249],{},[951,47242,47243],{"align":997},[1669,47244,47245],{},"randomness",[951,47247,47248],{"align":997},"Add randomness to the drops.",[951,47250,1946],{},[933,47252,47253,47257,47260],{},[951,47254,47255],{"align":997},[1669,47256,10412],{},[951,47258,47259],{"align":997},"Whether should write to the depth buffer or not. drops.",[951,47261,961],{},[933,47263,47264,47268,47271],{},[951,47265,47266],{"align":997},[1669,47267,11623],{},[951,47269,47270],{"align":997},"Transparency on the drops texture",[951,47272,971],{},[933,47274,47275,47280,47283],{},[951,47276,47277],{"align":997},[1669,47278,47279],{},"sizeAttenuation",[951,47281,47282],{"align":997},"Keep the same size regardless distance. drops.",[951,47284,961],{},[1327,47286,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":47288},[47289,47294],{"id":624,"depth":578,"text":15,"children":47290},[47291,47292,47293],{"id":46503,"depth":708,"text":46504},{"id":46699,"depth":708,"text":46700},{"id":46891,"depth":708,"text":46892},{"id":921,"depth":578,"text":922},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":395,"description":47295},"tt7i9fbwRZ4B8AUSIJO4jMNnX2vDH4IJ9qHfravYfLs",{"id":47300,"title":399,"body":47301,"description":47686,"extension":591,"links":592,"meta":47687,"navigation":594,"path":400,"seo":47688,"stem":401,"__hash__":47689},"docs/2.api/8.staging/sky.md",{"type":501,"value":47302,"toc":47682},[47303,47308,47318,47320,47498,47500,47680],[608,47304,47305],{},[47306,47307],"staging-sky",{},[614,47309,47310,45751,47312,1146],{},[618,47311,45912],{},[1140,47313,45756,47316,45760],{"href":47314,"rel":47315},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1144],[618,47317,399],{},[504,47319,15],{"id":624},[626,47321,47324],{"className":628,"code":47322,"highlights":47323,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sky } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :tone-mapping-exposure=\"0.25\">\n    \u003CTresPerspectiveCamera :position=\"[0, 15, 200]\" />\n    \u003CSky />\n    \u003COrbitControls />\n    \u003CTresGridHelper :args=\"[1000, 20]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[578,790],[618,47325,47326,47346,47370,47388,47396,47400,47408,47427,47446,47455,47463,47482,47490],{"__ignoreMap":576},[637,47327,47328,47330,47332,47334,47336,47338,47340,47342,47344],{"class":639,"line":577},[637,47329,643],{"class":642},[637,47331,647],{"class":646},[637,47333,651],{"class":650},[637,47335,654],{"class":650},[637,47337,657],{"class":642},[637,47339,660],{"class":642},[637,47341,664],{"class":663},[637,47343,660],{"class":642},[637,47345,669],{"class":642},[637,47347,47349,47351,47353,47355,47357,47360,47362,47364,47366,47368],{"class":47348,"line":578},[639,673],[637,47350,677],{"class":676},[637,47352,680],{"class":642},[637,47354,690],{"class":683},[637,47356,687],{"class":642},[637,47358,47359],{"class":683}," Sky",[637,47361,693],{"class":642},[637,47363,696],{"class":676},[637,47365,699],{"class":642},[637,47367,702],{"class":663},[637,47369,705],{"class":642},[637,47371,47372,47374,47376,47378,47380,47382,47384,47386],{"class":639,"line":708},[637,47373,677],{"class":676},[637,47375,680],{"class":642},[637,47377,715],{"class":683},[637,47379,693],{"class":642},[637,47381,696],{"class":676},[637,47383,699],{"class":642},[637,47385,724],{"class":663},[637,47387,705],{"class":642},[637,47389,47390,47392,47394],{"class":639,"line":729},[637,47391,732],{"class":642},[637,47393,647],{"class":646},[637,47395,669],{"class":642},[637,47397,47398],{"class":639,"line":739},[637,47399,742],{"emptyLinePlaceholder":594},[637,47401,47402,47404,47406],{"class":639,"line":745},[637,47403,643],{"class":642},[637,47405,750],{"class":646},[637,47407,669],{"class":642},[637,47409,47410,47412,47414,47417,47419,47421,47423,47425],{"class":639,"line":755},[637,47411,758],{"class":642},[637,47413,761],{"class":646},[637,47415,47416],{"class":650}," :tone-mapping-exposure",[637,47418,657],{"class":642},[637,47420,660],{"class":642},[637,47422,13617],{"class":663},[637,47424,660],{"class":642},[637,47426,669],{"class":642},[637,47428,47429,47431,47433,47435,47437,47439,47442,47444],{"class":639,"line":778},[637,47430,781],{"class":642},[637,47432,784],{"class":646},[637,47434,1485],{"class":650},[637,47436,657],{"class":642},[637,47438,660],{"class":642},[637,47440,47441],{"class":663},"[0, 15, 200]",[637,47443,660],{"class":642},[637,47445,787],{"class":642},[637,47447,47449,47451,47453],{"class":47448,"line":790},[639,673],[637,47450,781],{"class":642},[637,47452,399],{"class":646},[637,47454,787],{"class":642},[637,47456,47457,47459,47461],{"class":639,"line":800},[637,47458,781],{"class":642},[637,47460,795],{"class":646},[637,47462,787],{"class":642},[637,47464,47465,47467,47469,47471,47473,47475,47478,47480],{"class":639,"line":805},[637,47466,781],{"class":642},[637,47468,8049],{"class":646},[637,47470,1959],{"class":650},[637,47472,657],{"class":642},[637,47474,660],{"class":642},[637,47476,47477],{"class":663},"[1000, 20]",[637,47479,660],{"class":642},[637,47481,787],{"class":642},[637,47483,47484,47486,47488],{"class":639,"line":827},[637,47485,905],{"class":642},[637,47487,761],{"class":646},[637,47489,669],{"class":642},[637,47491,47492,47494,47496],{"class":639,"line":631},[637,47493,732],{"class":642},[637,47495,750],{"class":646},[637,47497,669],{"class":642},[504,47499,922],{"id":921},[927,47501,47502,47516],{},[930,47503,47504],{},[933,47505,47506,47508,47510,47512,47514],{},[936,47507,8089],{"align":997},[936,47509,5969],{"align":997},[936,47511,941],{"align":997},[936,47513,944],{"align":997},[936,47515,18588],{"align":997},[946,47517,47518,47539,47563,47589,47613,47633,47660],{},[933,47519,47520,47525,47529,47532,47537],{},[951,47521,47522],{"align":997},[1669,47523,47524],{},"turbidity",[951,47526,47527],{"align":997},[618,47528,5352],{},[951,47530,47531],{"align":997},"Haziness",[951,47533,47534],{"align":997},[618,47535,47536],{},"3.4",[951,47538,45702],{"align":997},[933,47540,47541,47546,47550,47557,47561],{},[951,47542,47543],{"align":997},[1669,47544,47545],{},"rayleigh",[951,47547,47548],{"align":997},[618,47549,5352],{},[951,47551,47552],{"align":997},[1140,47553,47556],{"href":47554,"rel":47555},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1144],"Rayleigh scattering",[951,47558,47559],{"align":997},[618,47560,21394],{},[951,47562,45702],{"align":997},[933,47564,47565,47570,47574,47582,47587],{},[951,47566,47567],{"align":997},[1669,47568,47569],{},"mieCoefficient",[951,47571,47572],{"align":997},[618,47573,5352],{},[951,47575,47576,47581],{"align":997},[1140,47577,47580],{"href":47578,"rel":47579},"https://en.wikipedia.org/wiki/Mie_scattering",[1144],"Mie scattering"," amount",[951,47583,47584],{"align":997},[618,47585,47586],{},"0.005",[951,47588,45702],{"align":997},[933,47590,47591,47596,47600,47606,47611],{},[951,47592,47593],{"align":997},[1669,47594,47595],{},"mieDirectionalG",[951,47597,47598],{"align":997},[618,47599,5352],{},[951,47601,47602,47605],{"align":997},[1140,47603,47580],{"href":47578,"rel":47604},[1144]," direction",[951,47607,47608],{"align":997},[618,47609,47610],{},"0.7",[951,47612,45702],{"align":997},[933,47614,47615,47620,47624,47627,47631],{},[951,47616,47617],{"align":997},[1669,47618,47619],{},"elevation",[951,47621,47622],{"align":997},[618,47623,5352],{},[951,47625,47626],{"align":997},"Sun's elevation from the horizon, in degrees",[951,47628,47629],{"align":997},[618,47630,10661],{},[951,47632,45702],{"align":997},[933,47634,47635,47640,47644,47653,47658],{},[951,47636,47637],{"align":997},[1669,47638,47639],{},"azimuth",[951,47641,47642],{"align":997},[618,47643,5352],{},[951,47645,47646,47647,47652],{"align":997},"Sun's ",[1140,47648,47651],{"href":47649,"rel":47650},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1144],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[951,47654,47655],{"align":997},[618,47656,47657],{},"180",[951,47659,45702],{"align":997},[933,47661,47662,47666,47670,47673,47678],{},[951,47663,47664],{"align":997},[1669,47665,13521],{},[951,47667,47668],{"align":997},[618,47669,5352],{},[951,47671,47672],{"align":997},"Sky box scale",[951,47674,47675],{"align":997},[618,47676,47677],{},"450000",[951,47679,45702],{"align":997},[1327,47681,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":47683},[47684,47685],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":399,"description":47686},"gj-nWIhO12GxCs2jecdsUZVQa85u-DxXdL5B9nW79zk",{"id":47691,"title":403,"body":47692,"description":48083,"extension":591,"links":592,"meta":48084,"navigation":594,"path":404,"seo":48085,"stem":405,"__hash__":48086},"docs/2.api/8.staging/smoke.md",{"type":501,"value":47693,"toc":48077},[47694,47699,47705,47707,47712,47717,47873,47875,48067,48071,48075],[2295,47695,47696],{},[47697,47698],"staging-smoke",{},[614,47700,47701,47704],{},[618,47702,47703],{},"\u003CSmoke />"," is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful  smoke - cloud - fog effect",[504,47706,15],{"id":624},[3199,47708,47709],{},[614,47710,47711],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[614,47713,46354,47714,47716],{},[618,47715,47703],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[626,47718,47720],{"className":628,"code":47719,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Smoke } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CSuspense>\n      \u003CSmoke />\n    \u003C/Suspense>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,47721,47722,47742,47760,47779,47787,47791,47799,47807,47825,47833,47841,47849,47857,47865],{"__ignoreMap":576},[637,47723,47724,47726,47728,47730,47732,47734,47736,47738,47740],{"class":639,"line":577},[637,47725,643],{"class":642},[637,47727,647],{"class":646},[637,47729,651],{"class":650},[637,47731,654],{"class":650},[637,47733,657],{"class":642},[637,47735,660],{"class":642},[637,47737,664],{"class":663},[637,47739,660],{"class":642},[637,47741,669],{"class":642},[637,47743,47744,47746,47748,47750,47752,47754,47756,47758],{"class":639,"line":578},[637,47745,677],{"class":676},[637,47747,680],{"class":642},[637,47749,715],{"class":683},[637,47751,693],{"class":642},[637,47753,696],{"class":676},[637,47755,699],{"class":642},[637,47757,724],{"class":663},[637,47759,705],{"class":642},[637,47761,47762,47764,47766,47769,47771,47773,47775,47777],{"class":639,"line":708},[637,47763,677],{"class":676},[637,47765,680],{"class":642},[637,47767,47768],{"class":683}," Smoke",[637,47770,693],{"class":642},[637,47772,696],{"class":676},[637,47774,699],{"class":642},[637,47776,702],{"class":663},[637,47778,705],{"class":642},[637,47780,47781,47783,47785],{"class":639,"line":729},[637,47782,732],{"class":642},[637,47784,647],{"class":646},[637,47786,669],{"class":642},[637,47788,47789],{"class":639,"line":739},[637,47790,742],{"emptyLinePlaceholder":594},[637,47792,47793,47795,47797],{"class":639,"line":745},[637,47794,643],{"class":642},[637,47796,750],{"class":646},[637,47798,669],{"class":642},[637,47800,47801,47803,47805],{"class":639,"line":755},[637,47802,758],{"class":642},[637,47804,761],{"class":646},[637,47806,669],{"class":642},[637,47808,47809,47811,47813,47815,47817,47819,47821,47823],{"class":639,"line":778},[637,47810,781],{"class":642},[637,47812,784],{"class":646},[637,47814,1485],{"class":650},[637,47816,657],{"class":642},[637,47818,660],{"class":642},[637,47820,42627],{"class":663},[637,47822,660],{"class":642},[637,47824,787],{"class":642},[637,47826,47827,47829,47831],{"class":639,"line":790},[637,47828,781],{"class":642},[637,47830,21652],{"class":646},[637,47832,669],{"class":642},[637,47834,47835,47837,47839],{"class":639,"line":800},[637,47836,853],{"class":642},[637,47838,403],{"class":646},[637,47840,787],{"class":642},[637,47842,47843,47845,47847],{"class":639,"line":805},[637,47844,895],{"class":642},[637,47846,21652],{"class":646},[637,47848,669],{"class":642},[637,47850,47851,47853,47855],{"class":639,"line":827},[637,47852,781],{"class":642},[637,47854,9681],{"class":646},[637,47856,787],{"class":642},[637,47858,47859,47861,47863],{"class":639,"line":631},[637,47860,905],{"class":642},[637,47862,761],{"class":646},[637,47864,669],{"class":642},[637,47866,47867,47869,47871],{"class":639,"line":850},[637,47868,732],{"class":642},[637,47870,750],{"class":646},[637,47872,669],{"class":642},[504,47874,922],{"id":921},[927,47876,47877,47889],{},[930,47878,47879],{},[933,47880,47881,47883,47885,47887],{},[936,47882,8089],{"align":997},[936,47884,5969],{"align":997},[936,47886,941],{"align":997},[936,47888,944],{"align":997},[946,47890,47891,47909,47926,47943,47960,47977,47997,48015,48033,48051],{},[933,47892,47893,47897,47901,47904],{},[951,47894,47895],{"align":997},[1669,47896,7547],{},[951,47898,47899],{"align":997},[618,47900,7562],{},[951,47902,47903],{"align":997},"The color of the smoke.",[951,47905,47906],{"align":997},[618,47907,47908],{},"'#ffffff'",[933,47910,47911,47915,47919,47922],{},[951,47912,47913],{"align":997},[1669,47914,11611],{},[951,47916,47917],{"align":997},[618,47918,5352],{},[951,47920,47921],{"align":997},"The strength of the opacity.",[951,47923,47924],{"align":997},[618,47925,1946],{},[933,47927,47928,47932,47936,47939],{},[951,47929,47930],{"align":997},[1669,47931,9781],{},[951,47933,47934],{"align":997},[618,47935,5352],{},[951,47937,47938],{"align":997},"The rotation speed of the smoke.",[951,47940,47941],{"align":997},[618,47942,39183],{},[933,47944,47945,47949,47953,47956],{},[951,47946,47947],{"align":997},[1669,47948,13084],{},[951,47950,47951],{"align":997},[618,47952,5352],{},[951,47954,47955],{"align":997},"The base depth.",[951,47957,47958],{"align":997},[618,47959,39172],{},[933,47961,47962,47966,47970,47973],{},[951,47963,47964],{"align":997},[1669,47965,30784],{},[951,47967,47968],{"align":997},[618,47969,5352],{},[951,47971,47972],{"align":997},"The number of smoke to render.",[951,47974,47975],{"align":997},[618,47976,37498],{},[933,47978,47979,47983,47987,47990],{},[951,47980,47981],{"align":997},[1669,47982,2717],{},[951,47984,47985],{"align":997},[618,47986,3572],{},[951,47988,47989],{"align":997},"The texture of the smoke.",[951,47991,47992],{"align":997},[1140,47993,47996],{"href":47994,"rel":47995},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1144],"link",[933,47998,47999,48004,48008,48011],{},[951,48000,48001],{"align":997},[1669,48002,48003],{},"depthTest",[951,48005,48006],{"align":997},[618,48007,17564],{},[951,48009,48010],{"align":997},"The depthTest.",[951,48012,48013],{"align":997},[618,48014,971],{},[933,48016,48017,48022,48026,48029],{},[951,48018,48019],{"align":997},[1669,48020,48021],{},"spreadY",[951,48023,48024],{"align":997},[618,48025,5352],{},[951,48027,48028],{"align":997},"Spread on the Y axis.",[951,48030,48031],{"align":997},[618,48032,2163],{},[933,48034,48035,48040,48044,48047],{},[951,48036,48037],{"align":997},[1669,48038,48039],{},"spreadX",[951,48041,48042],{"align":997},[618,48043,5352],{},[951,48045,48046],{"align":997},"Spread on the X axis.",[951,48048,48049],{"align":997},[618,48050,1946],{},[933,48052,48053,48057,48061,48063],{},[951,48054,48055],{"align":997},[1669,48056,5630],{},[951,48058,48059],{"align":997},[618,48060,5352],{},[951,48062,5630],{"align":997},[951,48064,48065],{"align":997},[618,48066,1874],{},[4051,48068,48070],{"id":48069},"default-texture","Default texture",[614,48072,48073],{},[9460,48074],{"alt":48070,"src":47994},[1327,48076,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":48078},[48079,48080],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":48081},[48082],{"id":48069,"depth":708,"text":48070},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":403,"description":48083},"sbmmZ3rOQ9aBpjlOeEx_ISxnTzHqa7qssAvcFtfGBTQ",{"id":48088,"title":407,"body":48089,"description":49820,"extension":591,"links":592,"meta":49821,"navigation":594,"path":408,"seo":49822,"stem":409,"__hash__":49823},"docs/2.api/8.staging/sparkles.md",{"type":501,"value":48090,"toc":49811},[48091,48097,48099,48103,48270,48274,48277,48537,48541,48559,48586,48592,48609,48821,48825,48841,48870,48880,49172,49174,49809],[614,48092,48093,48096],{},[618,48094,48095],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[504,48098,15],{"id":624},[4051,48100,48102],{"id":48101},"basic","Basic",[626,48104,48107],{"className":628,"code":48105,"highlights":48106,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,805],[618,48108,48109,48129,48147,48167,48175,48179,48187,48195,48213,48221,48229,48238,48246,48254,48262],{"__ignoreMap":576},[637,48110,48111,48113,48115,48117,48119,48121,48123,48125,48127],{"class":639,"line":577},[637,48112,643],{"class":642},[637,48114,647],{"class":646},[637,48116,651],{"class":650},[637,48118,654],{"class":650},[637,48120,657],{"class":642},[637,48122,660],{"class":642},[637,48124,664],{"class":663},[637,48126,660],{"class":642},[637,48128,669],{"class":642},[637,48130,48131,48133,48135,48137,48139,48141,48143,48145],{"class":639,"line":578},[637,48132,677],{"class":676},[637,48134,680],{"class":642},[637,48136,715],{"class":683},[637,48138,693],{"class":642},[637,48140,696],{"class":676},[637,48142,699],{"class":642},[637,48144,724],{"class":663},[637,48146,705],{"class":642},[637,48148,48150,48152,48154,48157,48159,48161,48163,48165],{"class":48149,"line":708},[639,673],[637,48151,677],{"class":676},[637,48153,680],{"class":642},[637,48155,48156],{"class":683}," Sparkles",[637,48158,693],{"class":642},[637,48160,696],{"class":676},[637,48162,699],{"class":642},[637,48164,702],{"class":663},[637,48166,705],{"class":642},[637,48168,48169,48171,48173],{"class":639,"line":729},[637,48170,732],{"class":642},[637,48172,647],{"class":646},[637,48174,669],{"class":642},[637,48176,48177],{"class":639,"line":739},[637,48178,742],{"emptyLinePlaceholder":594},[637,48180,48181,48183,48185],{"class":639,"line":745},[637,48182,643],{"class":642},[637,48184,750],{"class":646},[637,48186,669],{"class":642},[637,48188,48189,48191,48193],{"class":639,"line":755},[637,48190,758],{"class":642},[637,48192,761],{"class":646},[637,48194,669],{"class":642},[637,48196,48197,48199,48201,48203,48205,48207,48209,48211],{"class":639,"line":778},[637,48198,781],{"class":642},[637,48200,784],{"class":646},[637,48202,1485],{"class":650},[637,48204,657],{"class":642},[637,48206,660],{"class":642},[637,48208,42627],{"class":663},[637,48210,660],{"class":642},[637,48212,787],{"class":642},[637,48214,48215,48217,48219],{"class":639,"line":790},[637,48216,781],{"class":642},[637,48218,856],{"class":646},[637,48220,669],{"class":642},[637,48222,48223,48225,48227],{"class":639,"line":800},[637,48224,853],{"class":642},[637,48226,3958],{"class":646},[637,48228,787],{"class":642},[637,48230,48232,48234,48236],{"class":48231,"line":805},[639,673],[637,48233,853],{"class":642},[637,48235,407],{"class":646},[637,48237,787],{"class":642},[637,48239,48240,48242,48244],{"class":639,"line":827},[637,48241,895],{"class":642},[637,48243,856],{"class":646},[637,48245,669],{"class":642},[637,48247,48248,48250,48252],{"class":639,"line":631},[637,48249,781],{"class":642},[637,48251,9681],{"class":646},[637,48253,787],{"class":642},[637,48255,48256,48258,48260],{"class":639,"line":850},[637,48257,905],{"class":642},[637,48259,761],{"class":646},[637,48261,669],{"class":642},[637,48263,48264,48266,48268],{"class":639,"line":861},[637,48265,732],{"class":642},[637,48267,750],{"class":646},[637,48269,669],{"class":642},[4051,48271,48273],{"id":48272},"with-tresdirectionallight","With TresDirectionalLight",[614,48275,48276],{},"By default, sparkles appear on the up-facing vertices. However, you can pass a directional light to the component. Moving the directional light will cause \"lit\" vertices to emit sparkles.",[626,48278,48281],{"className":628,"code":48279,"highlights":48280,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles :directional-light=\"directionalLightRef\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      ref=\"directionalLightRef\"\n      :position=\"[3, 3, 3]\"\n      :intensity=\"2\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[745,850,882],[618,48282,48283,48303,48321,48339,48357,48361,48375,48383,48387,48395,48403,48421,48429,48437,48458,48466,48472,48485,48497,48509,48513,48521,48529],{"__ignoreMap":576},[637,48284,48285,48287,48289,48291,48293,48295,48297,48299,48301],{"class":639,"line":577},[637,48286,643],{"class":642},[637,48288,647],{"class":646},[637,48290,651],{"class":650},[637,48292,654],{"class":650},[637,48294,657],{"class":642},[637,48296,660],{"class":642},[637,48298,664],{"class":663},[637,48300,660],{"class":642},[637,48302,669],{"class":642},[637,48304,48305,48307,48309,48311,48313,48315,48317,48319],{"class":639,"line":578},[637,48306,677],{"class":676},[637,48308,680],{"class":642},[637,48310,715],{"class":683},[637,48312,693],{"class":642},[637,48314,696],{"class":676},[637,48316,699],{"class":642},[637,48318,724],{"class":663},[637,48320,705],{"class":642},[637,48322,48323,48325,48327,48329,48331,48333,48335,48337],{"class":639,"line":708},[637,48324,677],{"class":676},[637,48326,680],{"class":642},[637,48328,48156],{"class":683},[637,48330,693],{"class":642},[637,48332,696],{"class":676},[637,48334,699],{"class":642},[637,48336,702],{"class":663},[637,48338,705],{"class":642},[637,48340,48341,48343,48345,48347,48349,48351,48353,48355],{"class":639,"line":729},[637,48342,677],{"class":676},[637,48344,680],{"class":642},[637,48346,3498],{"class":683},[637,48348,693],{"class":642},[637,48350,696],{"class":676},[637,48352,699],{"class":642},[637,48354,633],{"class":663},[637,48356,705],{"class":642},[637,48358,48359],{"class":639,"line":739},[637,48360,742],{"emptyLinePlaceholder":594},[637,48362,48364,48366,48369,48371,48373],{"class":48363,"line":745},[639,673],[637,48365,2415],{"class":650},[637,48367,48368],{"class":683}," directionalLightRef ",[637,48370,657],{"class":642},[637,48372,3498],{"class":2434},[637,48374,6535],{"class":683},[637,48376,48377,48379,48381],{"class":639,"line":755},[637,48378,732],{"class":642},[637,48380,647],{"class":646},[637,48382,669],{"class":642},[637,48384,48385],{"class":639,"line":778},[637,48386,742],{"emptyLinePlaceholder":594},[637,48388,48389,48391,48393],{"class":639,"line":790},[637,48390,643],{"class":642},[637,48392,750],{"class":646},[637,48394,669],{"class":642},[637,48396,48397,48399,48401],{"class":639,"line":800},[637,48398,758],{"class":642},[637,48400,761],{"class":646},[637,48402,669],{"class":642},[637,48404,48405,48407,48409,48411,48413,48415,48417,48419],{"class":639,"line":805},[637,48406,781],{"class":642},[637,48408,784],{"class":646},[637,48410,1485],{"class":650},[637,48412,657],{"class":642},[637,48414,660],{"class":642},[637,48416,42627],{"class":663},[637,48418,660],{"class":642},[637,48420,787],{"class":642},[637,48422,48423,48425,48427],{"class":639,"line":827},[637,48424,781],{"class":642},[637,48426,856],{"class":646},[637,48428,669],{"class":642},[637,48430,48431,48433,48435],{"class":639,"line":631},[637,48432,853],{"class":642},[637,48434,3958],{"class":646},[637,48436,787],{"class":642},[637,48438,48440,48442,48444,48447,48449,48451,48454,48456],{"class":48439,"line":850},[639,673],[637,48441,853],{"class":642},[637,48443,407],{"class":646},[637,48445,48446],{"class":650}," :directional-light",[637,48448,657],{"class":642},[637,48450,660],{"class":642},[637,48452,48453],{"class":663},"directionalLightRef",[637,48455,660],{"class":642},[637,48457,787],{"class":642},[637,48459,48460,48462,48464],{"class":639,"line":861},[637,48461,895],{"class":642},[637,48463,856],{"class":646},[637,48465,669],{"class":642},[637,48467,48468,48470],{"class":639,"line":872},[637,48469,781],{"class":642},[637,48471,17243],{"class":646},[637,48473,48475,48477,48479,48481,48483],{"class":48474,"line":882},[639,673],[637,48476,12363],{"class":650},[637,48478,657],{"class":642},[637,48480,660],{"class":642},[637,48482,48453],{"class":663},[637,48484,3131],{"class":642},[637,48486,48487,48489,48491,48493,48495],{"class":639,"line":632},[637,48488,17261],{"class":650},[637,48490,657],{"class":642},[637,48492,660],{"class":642},[637,48494,13280],{"class":663},[637,48496,3131],{"class":642},[637,48498,48499,48501,48503,48505,48507],{"class":639,"line":902},[637,48500,17248],{"class":650},[637,48502,657],{"class":642},[637,48504,660],{"class":642},[637,48506,820],{"class":663},[637,48508,3131],{"class":642},[637,48510,48511],{"class":639,"line":912},[637,48512,17274],{"class":642},[637,48514,48515,48517,48519],{"class":639,"line":2625},[637,48516,781],{"class":642},[637,48518,9681],{"class":646},[637,48520,787],{"class":642},[637,48522,48523,48525,48527],{"class":639,"line":2634},[637,48524,905],{"class":642},[637,48526,761],{"class":646},[637,48528,669],{"class":642},[637,48530,48531,48533,48535],{"class":639,"line":2654},[637,48532,732],{"class":642},[637,48534,750],{"class":646},[637,48536,669],{"class":642},[4051,48538,48540],{"id":48539},"sequences","Sequences",[614,48542,48543,48544,48547,48548,8166,48552,48554,48555,48558],{},"All props beginning with ",[618,48545,48546],{},":sequence-"," are used to define how a particle changes as it progresses ",[1140,48549,48551],{"href":48550},"#mixes","(See also: Mixes)",[618,48553,48546],{}," props are of the type ",[618,48556,48557],{},"Gradient\u003CT>",", which can be any one of:",[2213,48560,48561,48567,48573],{},[2216,48562,48563,48566],{},[618,48564,48565],{},"T",": a single value",[2216,48568,48569,48572],{},[618,48570,48571],{},"[T, T, T, ...]",": an evenly distributed series of values",[2216,48574,48575,48578,48579,48581,48582,2250,48584,1146],{},[618,48576,48577],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[618,48580,5352],{}," is a gradient \"stop\" from ",[618,48583,965],{},[618,48585,1874],{},[614,48587,48588,48589,1218],{},"For example, all of these are acceptable values for ",[618,48590,48591],{},"Gradient\u003CTresColor>",[2213,48593,48594,48599,48604],{},[2216,48595,48596],{},[618,48597,48598],{},"'red'",[2216,48600,48601],{},[618,48602,48603],{},"['red', 'blue', 'green']",[2216,48605,48606],{},[618,48607,48608],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[626,48610,48613],{"className":628,"code":48611,"highlights":48612,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles\n        :sequence-color=\"['red', 'blue', 'green']\"\n        :sequence-alpha=\"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]\"\n        :sequence-size=\"[0.0, 1.0, 0.5]\"\n      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[805,827,631,850],[618,48614,48615,48635,48653,48671,48679,48683,48691,48699,48717,48725,48733,48741,48755,48770,48785,48789,48797,48805,48813],{"__ignoreMap":576},[637,48616,48617,48619,48621,48623,48625,48627,48629,48631,48633],{"class":639,"line":577},[637,48618,643],{"class":642},[637,48620,647],{"class":646},[637,48622,651],{"class":650},[637,48624,654],{"class":650},[637,48626,657],{"class":642},[637,48628,660],{"class":642},[637,48630,664],{"class":663},[637,48632,660],{"class":642},[637,48634,669],{"class":642},[637,48636,48637,48639,48641,48643,48645,48647,48649,48651],{"class":639,"line":578},[637,48638,677],{"class":676},[637,48640,680],{"class":642},[637,48642,715],{"class":683},[637,48644,693],{"class":642},[637,48646,696],{"class":676},[637,48648,699],{"class":642},[637,48650,724],{"class":663},[637,48652,705],{"class":642},[637,48654,48655,48657,48659,48661,48663,48665,48667,48669],{"class":639,"line":708},[637,48656,677],{"class":676},[637,48658,680],{"class":642},[637,48660,48156],{"class":683},[637,48662,693],{"class":642},[637,48664,696],{"class":676},[637,48666,699],{"class":642},[637,48668,702],{"class":663},[637,48670,705],{"class":642},[637,48672,48673,48675,48677],{"class":639,"line":729},[637,48674,732],{"class":642},[637,48676,647],{"class":646},[637,48678,669],{"class":642},[637,48680,48681],{"class":639,"line":739},[637,48682,742],{"emptyLinePlaceholder":594},[637,48684,48685,48687,48689],{"class":639,"line":745},[637,48686,643],{"class":642},[637,48688,750],{"class":646},[637,48690,669],{"class":642},[637,48692,48693,48695,48697],{"class":639,"line":755},[637,48694,758],{"class":642},[637,48696,761],{"class":646},[637,48698,669],{"class":642},[637,48700,48701,48703,48705,48707,48709,48711,48713,48715],{"class":639,"line":778},[637,48702,781],{"class":642},[637,48704,784],{"class":646},[637,48706,1485],{"class":650},[637,48708,657],{"class":642},[637,48710,660],{"class":642},[637,48712,42627],{"class":663},[637,48714,660],{"class":642},[637,48716,787],{"class":642},[637,48718,48719,48721,48723],{"class":639,"line":790},[637,48720,781],{"class":642},[637,48722,856],{"class":646},[637,48724,669],{"class":642},[637,48726,48727,48729,48731],{"class":639,"line":800},[637,48728,853],{"class":642},[637,48730,3958],{"class":646},[637,48732,787],{"class":642},[637,48734,48736,48738],{"class":48735,"line":805},[639,673],[637,48737,853],{"class":642},[637,48739,48740],{"class":646},"Sparkles\n",[637,48742,48744,48747,48749,48751,48753],{"class":48743,"line":827},[639,673],[637,48745,48746],{"class":650},"        :sequence-color",[637,48748,657],{"class":642},[637,48750,660],{"class":642},[637,48752,48603],{"class":663},[637,48754,3131],{"class":642},[637,48756,48758,48761,48763,48765,48768],{"class":48757,"line":631},[639,673],[637,48759,48760],{"class":650},"        :sequence-alpha",[637,48762,657],{"class":642},[637,48764,660],{"class":642},[637,48766,48767],{"class":663},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[637,48769,3131],{"class":642},[637,48771,48773,48776,48778,48780,48783],{"class":48772,"line":850},[639,673],[637,48774,48775],{"class":650},"        :sequence-size",[637,48777,657],{"class":642},[637,48779,660],{"class":642},[637,48781,48782],{"class":663},"[0.0, 1.0, 0.5]",[637,48784,3131],{"class":642},[637,48786,48787],{"class":639,"line":861},[637,48788,8033],{"class":642},[637,48790,48791,48793,48795],{"class":639,"line":872},[637,48792,895],{"class":642},[637,48794,856],{"class":646},[637,48796,669],{"class":642},[637,48798,48799,48801,48803],{"class":639,"line":882},[637,48800,781],{"class":642},[637,48802,9681],{"class":646},[637,48804,787],{"class":642},[637,48806,48807,48809,48811],{"class":639,"line":632},[637,48808,905],{"class":642},[637,48810,761],{"class":646},[637,48812,669],{"class":642},[637,48814,48815,48817,48819],{"class":639,"line":902},[637,48816,732],{"class":642},[637,48818,750],{"class":646},[637,48820,669],{"class":642},[4051,48822,48824],{"id":48823},"mixes","Mixes",[614,48826,48543,48827,48830,48831,48833,48834,48837,48838,1146],{},[618,48828,48829],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[618,48832,48546],{}," prop. E.g., ",[618,48835,48836],{},":mix-alpha"," affects ",[618,48839,48840],{},":sequence-alpha",[2213,48842,48843,48861],{},[2216,48844,48845,48846,48848,48849,48851,48852,48854,48855],{},"If the ",[618,48847,48829],{}," prop is ",[618,48850,13783],{},", 'progress' through the ",[618,48853,48546],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1140,48856,48858],{"href":48857},"#precisely",[48859,48860,1874],"sup",{},[2216,48862,48845,48863,48848,48865,48851,48867,48869],{},[618,48864,48829],{},[618,48866,13661],{},[618,48868,48546],{}," is determined entirely by the particle's lifetime.",[614,48871,48872,48875,48876,48879],{},[1140,48873],{"id":48874},"precisely"," More precisely, the value is determined by the dot product of the ",[618,48877,48878],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[626,48881,48884],{"className":628,"code":48882,"highlights":48883,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles\n        :directional-light=\"directionalLightRef\"\n        :mix-color=\"0.8\"\n        :mix-alpha=\"0.5\"\n        :mix-size=\"0.2\"\n      />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      ref=\"directionalLightRef\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,850,861,872,882,632],[618,48885,48886,48906,48924,48943,48961,48965,48977,48985,48989,48997,49005,49023,49031,49039,49046,49060,49074,49088,49102,49106,49114,49120,49132,49144,49148,49156,49164],{"__ignoreMap":576},[637,48887,48888,48890,48892,48894,48896,48898,48900,48902,48904],{"class":639,"line":577},[637,48889,643],{"class":642},[637,48891,647],{"class":646},[637,48893,651],{"class":650},[637,48895,654],{"class":650},[637,48897,657],{"class":642},[637,48899,660],{"class":642},[637,48901,664],{"class":663},[637,48903,660],{"class":642},[637,48905,669],{"class":642},[637,48907,48908,48910,48912,48914,48916,48918,48920,48922],{"class":639,"line":578},[637,48909,677],{"class":676},[637,48911,680],{"class":642},[637,48913,715],{"class":683},[637,48915,693],{"class":642},[637,48917,696],{"class":676},[637,48919,699],{"class":642},[637,48921,724],{"class":663},[637,48923,705],{"class":642},[637,48925,48927,48929,48931,48933,48935,48937,48939,48941],{"class":48926,"line":708},[639,673],[637,48928,677],{"class":676},[637,48930,680],{"class":642},[637,48932,48156],{"class":683},[637,48934,693],{"class":642},[637,48936,696],{"class":676},[637,48938,699],{"class":642},[637,48940,702],{"class":663},[637,48942,705],{"class":642},[637,48944,48945,48947,48949,48951,48953,48955,48957,48959],{"class":639,"line":729},[637,48946,677],{"class":676},[637,48948,680],{"class":642},[637,48950,3498],{"class":683},[637,48952,693],{"class":642},[637,48954,696],{"class":676},[637,48956,699],{"class":642},[637,48958,633],{"class":663},[637,48960,705],{"class":642},[637,48962,48963],{"class":639,"line":739},[637,48964,742],{"emptyLinePlaceholder":594},[637,48966,48967,48969,48971,48973,48975],{"class":639,"line":745},[637,48968,2415],{"class":650},[637,48970,48368],{"class":683},[637,48972,657],{"class":642},[637,48974,3498],{"class":2434},[637,48976,6535],{"class":683},[637,48978,48979,48981,48983],{"class":639,"line":755},[637,48980,732],{"class":642},[637,48982,647],{"class":646},[637,48984,669],{"class":642},[637,48986,48987],{"class":639,"line":778},[637,48988,742],{"emptyLinePlaceholder":594},[637,48990,48991,48993,48995],{"class":639,"line":790},[637,48992,643],{"class":642},[637,48994,750],{"class":646},[637,48996,669],{"class":642},[637,48998,48999,49001,49003],{"class":639,"line":800},[637,49000,758],{"class":642},[637,49002,761],{"class":646},[637,49004,669],{"class":642},[637,49006,49007,49009,49011,49013,49015,49017,49019,49021],{"class":639,"line":805},[637,49008,781],{"class":642},[637,49010,784],{"class":646},[637,49012,1485],{"class":650},[637,49014,657],{"class":642},[637,49016,660],{"class":642},[637,49018,42627],{"class":663},[637,49020,660],{"class":642},[637,49022,787],{"class":642},[637,49024,49025,49027,49029],{"class":639,"line":827},[637,49026,781],{"class":642},[637,49028,856],{"class":646},[637,49030,669],{"class":642},[637,49032,49033,49035,49037],{"class":639,"line":631},[637,49034,853],{"class":642},[637,49036,3958],{"class":646},[637,49038,787],{"class":642},[637,49040,49042,49044],{"class":49041,"line":850},[639,673],[637,49043,853],{"class":642},[637,49045,48740],{"class":646},[637,49047,49049,49052,49054,49056,49058],{"class":49048,"line":861},[639,673],[637,49050,49051],{"class":650},"        :directional-light",[637,49053,657],{"class":642},[637,49055,660],{"class":642},[637,49057,48453],{"class":663},[637,49059,3131],{"class":642},[637,49061,49063,49066,49068,49070,49072],{"class":49062,"line":872},[639,673],[637,49064,49065],{"class":650},"        :mix-color",[637,49067,657],{"class":642},[637,49069,660],{"class":642},[637,49071,47216],{"class":663},[637,49073,3131],{"class":642},[637,49075,49077,49080,49082,49084,49086],{"class":49076,"line":882},[639,673],[637,49078,49079],{"class":650},"        :mix-alpha",[637,49081,657],{"class":642},[637,49083,660],{"class":642},[637,49085,1946],{"class":663},[637,49087,3131],{"class":642},[637,49089,49091,49094,49096,49098,49100],{"class":49090,"line":632},[639,673],[637,49092,49093],{"class":650},"        :mix-size",[637,49095,657],{"class":642},[637,49097,660],{"class":642},[637,49099,5729],{"class":663},[637,49101,3131],{"class":642},[637,49103,49104],{"class":639,"line":902},[637,49105,8033],{"class":642},[637,49107,49108,49110,49112],{"class":639,"line":912},[637,49109,895],{"class":642},[637,49111,856],{"class":646},[637,49113,669],{"class":642},[637,49115,49116,49118],{"class":639,"line":2625},[637,49117,781],{"class":642},[637,49119,17243],{"class":646},[637,49121,49122,49124,49126,49128,49130],{"class":639,"line":2634},[637,49123,12363],{"class":650},[637,49125,657],{"class":642},[637,49127,660],{"class":642},[637,49129,48453],{"class":663},[637,49131,3131],{"class":642},[637,49133,49134,49136,49138,49140,49142],{"class":639,"line":2654},[637,49135,17261],{"class":650},[637,49137,657],{"class":642},[637,49139,660],{"class":642},[637,49141,13280],{"class":663},[637,49143,3131],{"class":642},[637,49145,49146],{"class":639,"line":2663},[637,49147,17274],{"class":642},[637,49149,49150,49152,49154],{"class":639,"line":2672},[637,49151,781],{"class":642},[637,49153,9681],{"class":646},[637,49155,787],{"class":642},[637,49157,49158,49160,49162],{"class":639,"line":2681},[637,49159,905],{"class":642},[637,49161,761],{"class":646},[637,49163,669],{"class":642},[637,49165,49166,49168,49170],{"class":639,"line":2703},[637,49167,732],{"class":642},[637,49169,750],{"class":646},[637,49171,669],{"class":642},[504,49173,922],{"id":921},[927,49175,49176,49184],{},[930,49177,49178],{},[933,49179,49180,49182],{},[936,49181,8089],{"align":997},[936,49183,941],{"align":997},[946,49185,49186,49208,49241,49263,49283,49303,49323,49344,49364,49384,49404,49423,49442,49461,49481,49508,49529,49551,49571,49592,49613,49647,49668,49688,49709,49729,49749,49771,49790],{},[933,49187,49188,49192],{},[951,49189,49190],{"align":997},[1669,49191,2981],{},[951,49193,49194,49195,49197,49199,49200,49203,49205,49207],{"align":997},"Type: ",[618,49196,41223],{},[7555,49198],{},"Default: ",[618,49201,49202],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[7555,49204],{},[7555,49206],{},"Texture or image path for individual sparkles",[933,49209,49210,49214],{},[951,49211,49212],{"align":997},[1669,49213,5256],{},[951,49215,49194,49216,49219,49199,49221,49223,49225,49227,49228,49230],{"align":997},[618,49217,49218],{},"Object3D | BufferGeometry",[7555,49220],{},[618,49222,1179],{},[7555,49224],{},[7555,49226],{},"Vertices of the geometry will be used to emit sparkles. Geometry normals are used for sparkles' traveling direction and for responding to the directional light prop.",[7555,49229],{},[2213,49231,49232,49235,49238],{},[2216,49233,49234],{},"If provided, the component will use the passed geometry.",[2216,49236,49237],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2216,49239,49240],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[933,49242,49243,49247],{},[951,49244,49245],{"align":997},[1669,49246,48878],{},[951,49248,49194,49249,49251,49199,49253,49255,49257,49259,49260,49262],{"align":997},[618,49250,7622],{},[7555,49252],{},[618,49254,1179],{},[7555,49256],{},[7555,49258],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[618,49261,48878],{}," is provided, the default \"up\" vector will be used.",[933,49264,49265,49270],{},[951,49266,49267],{"align":997},[1669,49268,49269],{},"lifetimeSec",[951,49271,49194,49272,49274,49199,49276,49278,49280,49282],{"align":997},[618,49273,5352],{},[7555,49275],{},[618,49277,39183],{},[7555,49279],{},[7555,49281],{},"Particle lifetime in seconds",[933,49284,49285,49290],{},[951,49286,49287],{"align":997},[1669,49288,49289],{},"cooldownSec",[951,49291,49194,49292,49294,49199,49296,49298,49300,49302],{"align":997},[618,49293,5352],{},[7555,49295],{},[618,49297,13720],{},[7555,49299],{},[7555,49301],{},"Particle cooldown in seconds – time between lifetime end and respawn",[933,49304,49305,49310],{},[951,49306,49307],{"align":997},[1669,49308,49309],{},"normalThreshold",[951,49311,49194,49312,49314,49199,49316,49318,49320,49322],{"align":997},[618,49313,5352],{},[7555,49315],{},[618,49317,47610],{},[7555,49319],{},[7555,49321],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[933,49324,49325,49330],{},[951,49326,49327],{"align":997},[1669,49328,49329],{},"noiseScale",[951,49331,49194,49332,49334,49199,49336,49339,49341,49343],{"align":997},[618,49333,5352],{},[7555,49335],{},[618,49337,49338],{},"3.0",[7555,49340],{},[7555,49342],{},"Scale of the noise period (lower == more slowly cycling noise)",[933,49345,49346,49351],{},[951,49347,49348],{"align":997},[1669,49349,49350],{},"scaleNoise",[951,49352,49194,49353,49355,49199,49357,49359,49361,49363],{"align":997},[618,49354,5352],{},[7555,49356],{},[618,49358,13661],{},[7555,49360],{},[7555,49362],{},"Noise coefficient applied to particle scale",[933,49365,49366,49371],{},[951,49367,49368],{"align":997},[1669,49369,49370],{},"offsetNoise",[951,49372,49194,49373,49375,49199,49377,49379,49381,49383],{"align":997},[618,49374,5352],{},[7555,49376],{},[618,49378,2163],{},[7555,49380],{},[7555,49382],{},"Noise coefficient applied to particle offset",[933,49385,49386,49391],{},[951,49387,49388],{"align":997},[1669,49389,49390],{},"lifetimeNoise",[951,49392,49194,49393,49395,49199,49397,49399,49401,49403],{"align":997},[618,49394,5352],{},[7555,49396],{},[618,49398,13783],{},[7555,49400],{},[7555,49402],{},"Noise coefficient applied to particle lifetime",[933,49405,49406,49410],{},[951,49407,49408],{"align":997},[1669,49409,16731],{},[951,49411,49194,49412,49414,49199,49416,49418,49420,49422],{"align":997},[618,49413,5352],{},[7555,49415],{},[618,49417,13661],{},[7555,49419],{},[7555,49421],{},"Particle scale multiplier",[933,49424,49425,49429],{},[951,49426,49427],{"align":997},[1669,49428,46281],{},[951,49430,49194,49431,49433,49199,49435,49437,49439,49441],{"align":997},[618,49432,5352],{},[7555,49434],{},[618,49436,13661],{},[7555,49438],{},[7555,49440],{},"Opacity multiplier",[933,49443,49444,49448],{},[951,49445,49446],{"align":997},[1669,49447,40422],{},[951,49449,49194,49450,49452,49199,49454,49456,49458,49460],{"align":997},[618,49451,5352],{},[7555,49453],{},[618,49455,13661],{},[7555,49457],{},[7555,49459],{},"Offset multiplier",[933,49462,49463,49468],{},[951,49464,49465],{"align":997},[1669,49466,49467],{},"surfaceDistance",[951,49469,49194,49470,49472,49199,49474,49476,49478,49480],{"align":997},[618,49471,5352],{},[7555,49473],{},[618,49475,13661],{},[7555,49477],{},[7555,49479],{},"Surface distance multiplier",[933,49482,49483,49488],{},[951,49484,49485],{"align":997},[1669,49486,49487],{},"sequenceColor",[951,49489,49194,49490,49492,49199,49494,49497,49499,2440,49501,49504,49505,49507],{"align":997},[618,49491,48591],{},[7555,49493],{},[618,49495,49496],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7555,49498],{},[7555,49500],{},[1674,49502,49503],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7555,49506],{},"Color sequence as particles progress",[933,49509,49510,49515],{},[951,49511,49512],{"align":997},[1669,49513,49514],{},"sequenceAlpha",[951,49516,49194,49517,49520,49199,49522,49524,49526,49528],{"align":997},[618,49518,49519],{},"Gradient\u003Cnumber>",[7555,49521],{},[618,49523,48767],{},[7555,49525],{},[7555,49527],{},"Opacity sequence as particles progress",[933,49530,49531,49536],{},[951,49532,49533],{"align":997},[1669,49534,49535],{},"sequenceOffset",[951,49537,49194,49538,49541,49199,49543,49546,49548,49550],{"align":997},[618,49539,49540],{},"Gradient\u003C[number, number, number]>",[7555,49542],{},[618,49544,49545],{},"[0.0, 0.0, 0.0]",[7555,49547],{},[7555,49549],{},"Distance sequence as particles progress",[933,49552,49553,49558],{},[951,49554,49555],{"align":997},[1669,49556,49557],{},"sequenceNoise",[951,49559,49194,49560,49562,49199,49564,49566,49568,49570],{"align":997},[618,49561,49540],{},[7555,49563],{},[618,49565,11915],{},[7555,49567],{},[7555,49569],{},"Noise sequence as particles progress",[933,49572,49573,49578],{},[951,49574,49575],{"align":997},[1669,49576,49577],{},"sequenceSize",[951,49579,49194,49580,49582,49199,49584,49587,49589,49591],{"align":997},[618,49581,49519],{},[7555,49583],{},[618,49585,49586],{},"[0.0, 1.0]",[7555,49588],{},[7555,49590],{},"Size sequence as particles progress",[933,49593,49594,49599],{},[951,49595,49596],{"align":997},[1669,49597,49598],{},"sequenceSurfaceDistance",[951,49600,49194,49601,49603,49199,49605,49608,49610,49612],{"align":997},[618,49602,49519],{},[7555,49604],{},[618,49606,49607],{},"[0.05, 0.08, 0.1]",[7555,49609],{},[7555,49611],{},"Distance from surface (along normal) as particles progress",[933,49614,49615,49620],{},[951,49616,49617],{"align":997},[1669,49618,49619],{},"mixColor",[951,49621,49194,49622,49624,49199,49626,49628,49630,49632,49633,49635,49643,49644,49646],{"align":997},[618,49623,5352],{},[7555,49625],{},[618,49627,1946],{},[7555,49629],{},[7555,49631],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7555,49634],{},[2213,49636,49637,49640],{},[2216,49638,49639],{},"its normal \"facing\" the directionalLight",[2216,49641,49642],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7555,49645],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[933,49648,49649,49654],{},[951,49650,49651],{"align":997},[1669,49652,49653],{},"mixAlpha",[951,49655,49194,49656,49658,49199,49660,49663,49665,49667],{"align":997},[618,49657,5352],{},[7555,49659],{},[618,49661,49662],{},"1.",[7555,49664],{},[7555,49666],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[933,49669,49670,49675],{},[951,49671,49672],{"align":997},[1669,49673,49674],{},"mixOffset",[951,49676,49194,49677,49679,49199,49681,49683,49685,49687],{"align":997},[618,49678,5352],{},[7555,49680],{},[618,49682,49662],{},[7555,49684],{},[7555,49686],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[933,49689,49690,49695],{},[951,49691,49692],{"align":997},[1669,49693,49694],{},"mixSize",[951,49696,49194,49697,49699,49199,49701,49704,49706,49708],{"align":997},[618,49698,5352],{},[7555,49700],{},[618,49702,49703],{},"0.",[7555,49705],{},[7555,49707],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[933,49710,49711,49716],{},[951,49712,49713],{"align":997},[1669,49714,49715],{},"mixSurfaceDistance",[951,49717,49194,49718,49720,49199,49722,49724,49726,49728],{"align":997},[618,49719,5352],{},[7555,49721],{},[618,49723,49662],{},[7555,49725],{},[7555,49727],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[933,49730,49731,49736],{},[951,49732,49733],{"align":997},[1669,49734,49735],{},"mixNoise",[951,49737,49194,49738,49740,49199,49742,49744,49746,49748],{"align":997},[618,49739,5352],{},[7555,49741],{},[618,49743,49662],{},[7555,49745],{},[7555,49747],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[933,49750,49751,49756],{},[951,49752,49753],{"align":997},[1669,49754,49755],{},"blending",[951,49757,49194,49758,49761,49199,49763,49766,49768,49770],{"align":997},[618,49759,49760],{},"Blending",[7555,49762],{},[618,49764,49765],{},"AdditiveBlending",[7555,49767],{},[7555,49769],{},"Material blending",[933,49772,49773,49777],{},[951,49774,49775],{"align":997},[1669,49776,11623],{},[951,49778,49194,49779,49781,49199,49783,49785,49787,49789],{"align":997},[618,49780,17564],{},[7555,49782],{},[618,49784,961],{},[7555,49786],{},[7555,49788],{},"Material transparency",[933,49791,49792,49796],{},[951,49793,49794],{"align":997},[1669,49795,10412],{},[951,49797,49194,49798,49800,49199,49802,49804,49806,49808],{"align":997},[618,49799,17564],{},[7555,49801],{},[618,49803,971],{},[7555,49805],{},[7555,49807],{},"Material depth write",[1327,49810,11187],{},{"title":576,"searchDepth":577,"depth":578,"links":49812},[49813,49819],{"id":624,"depth":578,"text":15,"children":49814},[49815,49816,49817,49818],{"id":48101,"depth":708,"text":48102},{"id":48272,"depth":708,"text":48273},{"id":48539,"depth":708,"text":48540},{"id":48823,"depth":708,"text":48824},{"id":921,"depth":578,"text":922},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":407,"description":49820},"HM8JeL6MyPB0GIa8xnkj-A_wEWc2xfe0JgLNTCfq1Wg",{"id":49825,"title":411,"body":49826,"description":50471,"extension":591,"links":592,"meta":50472,"navigation":594,"path":412,"seo":50473,"stem":413,"__hash__":50474},"docs/2.api/8.staging/stage.md",{"type":501,"value":49827,"toc":50465},[49828,49833,49836,49850,49869,49918,49920,50247,50249,50361,50365,50368,50450,50462],[2295,49829,49830],{},[49831,49832],"staging-stage",{},[614,49834,49835],{},"This component creates a \"stage\" for your models. It sets up:",[2213,49837,49838,49841,49844,49847],{},[2216,49839,49840],{},"model lighting",[2216,49842,49843],{},"ground shadows",[2216,49845,49846],{},"zoom to fit",[2216,49848,49849],{},"environment",[2005,49851,49852,49855],{},[614,49853,49854],{},"If you are using other camera controls, be sure to make them the 'default'.",[626,49856,49857],{"className":628,"code":2030,"language":633,"meta":576,"style":576},[618,49858,49859],{"__ignoreMap":576},[637,49860,49861,49863,49865,49867],{"class":639,"line":577},[637,49862,643],{"class":642},[637,49864,795],{"class":646},[637,49866,1851],{"class":650},[637,49868,787],{"class":642},[2005,49870,49871,49874,49889],{},[614,49872,49873],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[626,49875,49877],{"className":628,"code":49876,"language":633,"meta":576,"style":576},"\u003CTresCanvas shadows />\n",[618,49878,49879],{"__ignoreMap":576},[637,49880,49881,49883,49885,49887],{"class":639,"line":577},[637,49882,643],{"class":642},[637,49884,761],{"class":646},[637,49886,42610],{"class":650},[637,49888,787],{"class":642},[626,49890,49892],{"className":628,"code":49891,"language":633,"meta":576,"style":576},"\u003CTresMesh cast-shadow />\n  ...\n\u003C/TresMesh>\n",[618,49893,49894,49904,49908],{"__ignoreMap":576},[637,49895,49896,49898,49900,49902],{"class":639,"line":577},[637,49897,643],{"class":642},[637,49899,856],{"class":646},[637,49901,16370],{"class":650},[637,49903,787],{"class":642},[637,49905,49906],{"class":639,"line":578},[637,49907,13955],{"class":683},[637,49909,49910,49912,49914,49916],{"class":639,"line":708},[637,49911,643],{"class":642},[637,49913,8498],{"class":683},[637,49915,856],{"class":646},[637,49917,669],{"class":642},[504,49919,15],{"id":624},[626,49921,49924],{"className":628,"code":49922,"highlights":49923,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stage, OrbitControls, Plane } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003COrbitControls make-default />\n    \u003CStage\n      lighting=\"rembrandt\"\n      shadows=\"contact\"\n      :adjust-camera=\"true\"\n      environment=\"city\"\n      :intensity=\"0.5\"\n    >\n      \u003CTresMesh cast-shadow>\n        \u003CTresBoxGeometry />\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[5, 5]\">\n        \u003CTresMeshStandardMaterial />\n      \u003C/Plane>\n    \u003C/Stage>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850,861],[618,49925,49926,49946,49964,49992,50000,50004,50012,50022,50040,50050,50058,50073,50088,50102,50116,50129,50133,50143,50151,50169,50177,50207,50215,50223,50231,50239],{"__ignoreMap":576},[637,49927,49928,49930,49932,49934,49936,49938,49940,49942,49944],{"class":639,"line":577},[637,49929,643],{"class":642},[637,49931,647],{"class":646},[637,49933,651],{"class":650},[637,49935,654],{"class":650},[637,49937,657],{"class":642},[637,49939,660],{"class":642},[637,49941,664],{"class":663},[637,49943,660],{"class":642},[637,49945,669],{"class":642},[637,49947,49948,49950,49952,49954,49956,49958,49960,49962],{"class":639,"line":578},[637,49949,677],{"class":676},[637,49951,680],{"class":642},[637,49953,715],{"class":683},[637,49955,693],{"class":642},[637,49957,696],{"class":676},[637,49959,699],{"class":642},[637,49961,724],{"class":663},[637,49963,705],{"class":642},[637,49965,49967,49969,49971,49974,49976,49978,49980,49982,49984,49986,49988,49990],{"class":49966,"line":708},[639,673],[637,49968,677],{"class":676},[637,49970,680],{"class":642},[637,49972,49973],{"class":683}," Stage",[637,49975,687],{"class":642},[637,49977,690],{"class":683},[637,49979,687],{"class":642},[637,49981,43152],{"class":683},[637,49983,693],{"class":642},[637,49985,696],{"class":676},[637,49987,699],{"class":642},[637,49989,702],{"class":663},[637,49991,705],{"class":642},[637,49993,49994,49996,49998],{"class":639,"line":729},[637,49995,732],{"class":642},[637,49997,647],{"class":646},[637,49999,669],{"class":642},[637,50001,50002],{"class":639,"line":739},[637,50003,742],{"emptyLinePlaceholder":594},[637,50005,50006,50008,50010],{"class":639,"line":745},[637,50007,643],{"class":642},[637,50009,750],{"class":646},[637,50011,669],{"class":642},[637,50013,50014,50016,50018,50020],{"class":639,"line":755},[637,50015,758],{"class":642},[637,50017,761],{"class":646},[637,50019,42610],{"class":650},[637,50021,669],{"class":642},[637,50023,50024,50026,50028,50030,50032,50034,50036,50038],{"class":639,"line":778},[637,50025,781],{"class":642},[637,50027,784],{"class":646},[637,50029,1485],{"class":650},[637,50031,657],{"class":642},[637,50033,660],{"class":642},[637,50035,42627],{"class":663},[637,50037,660],{"class":642},[637,50039,787],{"class":642},[637,50041,50042,50044,50046,50048],{"class":639,"line":790},[637,50043,781],{"class":642},[637,50045,795],{"class":646},[637,50047,1851],{"class":650},[637,50049,787],{"class":642},[637,50051,50053,50055],{"class":50052,"line":800},[639,673],[637,50054,781],{"class":642},[637,50056,50057],{"class":646},"Stage\n",[637,50059,50061,50064,50066,50068,50071],{"class":50060,"line":805},[639,673],[637,50062,50063],{"class":650},"      lighting",[637,50065,657],{"class":642},[637,50067,660],{"class":642},[637,50069,50070],{"class":663},"rembrandt",[637,50072,3131],{"class":642},[637,50074,50076,50079,50081,50083,50086],{"class":50075,"line":827},[639,673],[637,50077,50078],{"class":650},"      shadows",[637,50080,657],{"class":642},[637,50082,660],{"class":642},[637,50084,50085],{"class":663},"contact",[637,50087,3131],{"class":642},[637,50089,50091,50094,50096,50098,50100],{"class":50090,"line":631},[639,673],[637,50092,50093],{"class":650},"      :adjust-camera",[637,50095,657],{"class":642},[637,50097,660],{"class":642},[637,50099,961],{"class":663},[637,50101,3131],{"class":642},[637,50103,50105,50108,50110,50112,50114],{"class":50104,"line":850},[639,673],[637,50106,50107],{"class":650},"      environment",[637,50109,657],{"class":642},[637,50111,660],{"class":642},[637,50113,29090],{"class":663},[637,50115,3131],{"class":642},[637,50117,50119,50121,50123,50125,50127],{"class":50118,"line":861},[639,673],[637,50120,17248],{"class":650},[637,50122,657],{"class":642},[637,50124,660],{"class":642},[637,50126,1946],{"class":663},[637,50128,3131],{"class":642},[637,50130,50131],{"class":639,"line":872},[637,50132,12391],{"class":642},[637,50134,50135,50137,50139,50141],{"class":639,"line":882},[637,50136,853],{"class":642},[637,50138,856],{"class":646},[637,50140,16370],{"class":650},[637,50142,669],{"class":642},[637,50144,50145,50147,50149],{"class":639,"line":632},[637,50146,864],{"class":642},[637,50148,867],{"class":646},[637,50150,787],{"class":642},[637,50152,50153,50155,50157,50159,50161,50163,50165,50167],{"class":639,"line":902},[637,50154,864],{"class":642},[637,50156,2686],{"class":646},[637,50158,2689],{"class":650},[637,50160,657],{"class":642},[637,50162,660],{"class":642},[637,50164,13327],{"class":663},[637,50166,660],{"class":642},[637,50168,787],{"class":642},[637,50170,50171,50173,50175],{"class":639,"line":912},[637,50172,885],{"class":642},[637,50174,856],{"class":646},[637,50176,669],{"class":642},[637,50178,50179,50181,50183,50185,50187,50189,50191,50193,50195,50197,50199,50201,50203,50205],{"class":639,"line":2625},[637,50180,853],{"class":642},[637,50182,261],{"class":646},[637,50184,1485],{"class":650},[637,50186,657],{"class":642},[637,50188,660],{"class":642},[637,50190,39961],{"class":663},[637,50192,660],{"class":642},[637,50194,42862],{"class":650},[637,50196,1959],{"class":650},[637,50198,657],{"class":642},[637,50200,660],{"class":642},[637,50202,39996],{"class":663},[637,50204,660],{"class":642},[637,50206,669],{"class":642},[637,50208,50209,50211,50213],{"class":639,"line":2634},[637,50210,864],{"class":642},[637,50212,2686],{"class":646},[637,50214,787],{"class":642},[637,50216,50217,50219,50221],{"class":639,"line":2654},[637,50218,885],{"class":642},[637,50220,261],{"class":646},[637,50222,669],{"class":642},[637,50224,50225,50227,50229],{"class":639,"line":2663},[637,50226,895],{"class":642},[637,50228,411],{"class":646},[637,50230,669],{"class":642},[637,50232,50233,50235,50237],{"class":639,"line":2672},[637,50234,905],{"class":642},[637,50236,761],{"class":646},[637,50238,669],{"class":642},[637,50240,50241,50243,50245],{"class":639,"line":2681},[637,50242,732],{"class":642},[637,50244,750],{"class":646},[637,50246,669],{"class":642},[504,50248,922],{"id":921},[927,50250,50251,50261],{},[930,50252,50253],{},[933,50254,50255,50257,50259],{},[936,50256,938],{"align":997},[936,50258,941],{"align":997},[936,50260,944],{"align":997},[946,50262,50263,50281,50299,50317,50331,50347],{},[933,50264,50265,50270,50276],{},[951,50266,50267],{"align":997},[1669,50268,50269],{},"lighting",[951,50271,50272,50273],{"align":997},"Lighting setup. Options: ",[618,50274,50275],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[951,50277,50278],{"align":997},[618,50279,50280],{},"'rembrandt'",[933,50282,50283,50288,50294],{},[951,50284,50285],{"align":997},[1669,50286,50287],{},"shadows",[951,50289,50290,50291],{"align":997},"Controls the ground shadows. Options: ",[618,50292,50293],{},"boolean | 'contact' | 'accumulative' | StageShadows",[951,50295,50296],{"align":997},[618,50297,50298],{},"'contact'",[933,50300,50301,50306,50313],{},[951,50302,50303],{"align":997},[1669,50304,50305],{},"adjustCamera",[951,50307,50308,50309,50312],{"align":997},"Optionally wraps and thereby centers the models using ",[618,50310,50311],{},"\u003CBounds>",", can also be a camera offset",[951,50314,50315],{"align":997},[618,50316,961],{},[933,50318,50319,50323,50326],{},[951,50320,50321],{"align":997},[1669,50322,49849],{},[951,50324,50325],{"align":997},"The default environment",[951,50327,50328],{"align":997},[618,50329,50330],{},"'city'",[933,50332,50333,50337,50343],{},[951,50334,50335],{"align":997},[1669,50336,2065],{},[951,50338,50339,50340,50342],{"align":997},"Lighting intensity, ",[618,50341,965],{}," removes lights",[951,50344,50345],{"align":997},[618,50346,1946],{},[933,50348,50349,50354,50357],{},[951,50350,50351],{"align":997},[1669,50352,50353],{},"align",[951,50355,50356],{"align":997},"To adjust alignment",[951,50358,50359],{"align":997},[618,50360,1179],{},[4051,50362,50364],{"id":50363},"stageshadows-type","StageShadows Type",[614,50366,50367],{},"When using custom shadow configuration, you can pass an object with the following properties:",[927,50369,50370,50380],{},[930,50371,50372],{},[933,50373,50374,50376,50378],{},[936,50375,938],{"align":997},[936,50377,941],{"align":997},[936,50379,944],{"align":997},[946,50381,50382,50396,50409,50423,50437],{},[933,50383,50384,50388,50394],{},[951,50385,50386],{"align":997},[1669,50387,5517],{},[951,50389,50390,50391],{"align":997},"Shadow type: ",[618,50392,50393],{},"'contact' | 'accumulative'",[951,50395,8505],{"align":997},[933,50397,50398,50402,50405],{},[951,50399,50400],{"align":997},[1669,50401,40422],{},[951,50403,50404],{"align":997},"Shadow plane offset",[951,50406,50407],{"align":997},[618,50408,965],{},[933,50410,50411,50415,50418],{},[951,50412,50413],{"align":997},[1669,50414,43004],{},[951,50416,50417],{"align":997},"Shadow bias",[951,50419,50420],{"align":997},[618,50421,50422],{},"-0.0001",[933,50424,50425,50430,50433],{},[951,50426,50427],{"align":997},[1669,50428,50429],{},"normalBias",[951,50431,50432],{"align":997},"Shadow normal bias",[951,50434,50435],{"align":997},[618,50436,965],{},[933,50438,50439,50443,50446],{},[951,50440,50441],{"align":997},[1669,50442,16731],{},[951,50444,50445],{"align":997},"Shadow map size",[951,50447,50448],{"align":997},[618,50449,39478],{},[614,50451,50452,50453,1672,50456,1688,50459,1146],{},"Additionally inherits all props from ",[618,50454,50455],{},"AccumulativeShadowsProps",[618,50457,50458],{},"RandomizedLightsProps",[618,50460,50461],{},"ContactShadowsProps",[1327,50463,50464],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":50466},[50467,50468],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":50469},[50470],{"id":50363,"depth":708,"text":50364},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":411,"description":50471},"hSS8yTJaUJKvnoLWg1iE6UZbvoW8pB9UqSUcFjHv5sQ",{"id":50476,"title":415,"body":50477,"description":50750,"extension":591,"links":592,"meta":50751,"navigation":594,"path":416,"seo":50752,"stem":417,"__hash__":50753},"docs/2.api/8.staging/stars.md",{"type":501,"value":50478,"toc":50746},[50479,50484,50490,50492,50497,50640,50642,50744],[608,50480,50481],{},[50482,50483],"staging-stars",{},[614,50485,50486,50489],{},[618,50487,50488],{},"\u003CStars />"," is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect",[504,50491,15],{"id":624},[614,50493,46354,50494,50496],{},[618,50495,50488],{}," component without passing any props,",[626,50498,50501],{"className":628,"code":50499,"highlights":50500,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stars } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CStars />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,50502,50503,50523,50541,50561,50569,50573,50581,50589,50607,50616,50624,50632],{"__ignoreMap":576},[637,50504,50505,50507,50509,50511,50513,50515,50517,50519,50521],{"class":639,"line":577},[637,50506,643],{"class":642},[637,50508,647],{"class":646},[637,50510,651],{"class":650},[637,50512,654],{"class":650},[637,50514,657],{"class":642},[637,50516,660],{"class":642},[637,50518,664],{"class":663},[637,50520,660],{"class":642},[637,50522,669],{"class":642},[637,50524,50525,50527,50529,50531,50533,50535,50537,50539],{"class":639,"line":578},[637,50526,677],{"class":676},[637,50528,680],{"class":642},[637,50530,715],{"class":683},[637,50532,693],{"class":642},[637,50534,696],{"class":676},[637,50536,699],{"class":642},[637,50538,724],{"class":663},[637,50540,705],{"class":642},[637,50542,50544,50546,50548,50551,50553,50555,50557,50559],{"class":50543,"line":708},[639,673],[637,50545,677],{"class":676},[637,50547,680],{"class":642},[637,50549,50550],{"class":683}," Stars",[637,50552,693],{"class":642},[637,50554,696],{"class":676},[637,50556,699],{"class":642},[637,50558,702],{"class":663},[637,50560,705],{"class":642},[637,50562,50563,50565,50567],{"class":639,"line":729},[637,50564,732],{"class":642},[637,50566,647],{"class":646},[637,50568,669],{"class":642},[637,50570,50571],{"class":639,"line":739},[637,50572,742],{"emptyLinePlaceholder":594},[637,50574,50575,50577,50579],{"class":639,"line":745},[637,50576,643],{"class":642},[637,50578,750],{"class":646},[637,50580,669],{"class":642},[637,50582,50583,50585,50587],{"class":639,"line":755},[637,50584,758],{"class":642},[637,50586,761],{"class":646},[637,50588,669],{"class":642},[637,50590,50591,50593,50595,50597,50599,50601,50603,50605],{"class":639,"line":778},[637,50592,781],{"class":642},[637,50594,784],{"class":646},[637,50596,1485],{"class":650},[637,50598,657],{"class":642},[637,50600,660],{"class":642},[637,50602,42627],{"class":663},[637,50604,660],{"class":642},[637,50606,787],{"class":642},[637,50608,50610,50612,50614],{"class":50609,"line":790},[639,673],[637,50611,781],{"class":642},[637,50613,415],{"class":646},[637,50615,787],{"class":642},[637,50617,50618,50620,50622],{"class":639,"line":800},[637,50619,781],{"class":642},[637,50621,9681],{"class":646},[637,50623,787],{"class":642},[637,50625,50626,50628,50630],{"class":639,"line":805},[637,50627,905],{"class":642},[637,50629,761],{"class":646},[637,50631,669],{"class":642},[637,50633,50634,50636,50638],{"class":639,"line":827},[637,50635,732],{"class":642},[637,50637,750],{"class":646},[637,50639,669],{"class":642},[504,50641,922],{"id":921},[927,50643,50644,50654],{},[930,50645,50646],{},[933,50647,50648,50650,50652],{},[936,50649,938],{"align":997},[936,50651,941],{"align":997},[936,50653,944],{},[946,50655,50656,50667,50678,50689,50700,50711,50722,50733],{},[933,50657,50658,50662,50665],{},[951,50659,50660],{"align":997},[1669,50661,16731],{},[951,50663,50664],{"align":997},"The size of the stars",[951,50666,2163],{},[933,50668,50669,50673,50676],{},[951,50670,50671],{"align":997},[1669,50672,47279],{},[951,50674,50675],{"align":997},"keep the same size regardless distance.",[951,50677,961],{},[933,50679,50680,50684,50687],{},[951,50681,50682],{"align":997},[1669,50683,11623],{},[951,50685,50686],{"align":997},"show transparency on the stars texture",[951,50688,961],{},[933,50690,50691,50695,50698],{},[951,50692,50693],{"align":997},[1669,50694,39429],{},[951,50696,50697],{"align":997},"enables the WebGL to know when not to render the pixeltext.",[951,50699,1886],{},[933,50701,50702,50706,50709],{},[951,50703,50704],{"align":997},[1669,50705,47188],{},[951,50707,50708],{"align":997},"texture of the stars",[951,50710,3656],{},[933,50712,50713,50717,50720],{},[951,50714,50715],{"align":997},[1669,50716,12009],{},[951,50718,50719],{"align":997},"number of stars",[951,50721,9129],{},[933,50723,50724,50728,50731],{},[951,50725,50726],{"align":997},[1669,50727,13084],{},[951,50729,50730],{"align":997},"depth of star's shape",[951,50732,11376],{},[933,50734,50735,50739,50742],{},[951,50736,50737],{"align":997},[1669,50738,42950],{},[951,50740,50741],{"align":997},"Radius of star's shape",[951,50743,11169],{},[1327,50745,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":50747},[50748,50749],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":415,"description":50750},"nf8ELCqPC9wunPJnkUB5dskxDLHX1_sPobCeok4_v9w",[50755,51695,52095,53184,53559,59097,59699,60487,61771,62944],{"id":50756,"title":425,"body":50757,"description":51691,"extension":591,"links":592,"meta":51692,"navigation":594,"path":426,"seo":51693,"stem":427,"__hash__":51694},"docs/2.api/9.objects/animated-sprite.md",{"type":501,"value":50758,"toc":51673},[50759,50764,50779,50787,50789,50979,50989,50993,50999,51013,51022,51026,51033,51052,51056,51064,51068,51093,51095,51422,51424,51492,51495,51501,51505,51508,51513,51516,51528,51543,51545,51548,51585,51588,51600,51604,51612,51622,51628,51631,51661,51664,51671],[608,50760,50761],{},[50762,50763],"objects-animated-sprite",{},[614,50765,50766,50769,50770,50775,50776,50778],{},[618,50767,50768],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1140,50771,50774],{"href":50772,"rel":50773},"https://en.wikipedia.org/wiki/Texture_atlas",[1144],"texture atlas",". A typical ",[618,50777,50768],{}," will use:",[2213,50780,50781,50784],{},[2216,50782,50783],{},"An image containing multiple sprites",[2216,50785,50786],{},"A JSON atlas containing the individual sprite coordinates in the image",[504,50788,15],{"id":624},[626,50790,50793],{"className":628,"code":50791,"highlights":50792,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs/cientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CAnimatedSprite\n        image=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png\"\n        atlas=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json\"\n        :animation=\"currentAnimation\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,800,805,827,631,850],[618,50794,50795,50815,50835,50839,50861,50869,50873,50881,50889,50897,50905,50920,50935,50950,50955,50963,50971],{"__ignoreMap":576},[637,50796,50797,50799,50801,50803,50805,50807,50809,50811,50813],{"class":639,"line":577},[637,50798,643],{"class":642},[637,50800,647],{"class":646},[637,50802,651],{"class":650},[637,50804,654],{"class":650},[637,50806,657],{"class":642},[637,50808,660],{"class":642},[637,50810,664],{"class":663},[637,50812,660],{"class":642},[637,50814,669],{"class":642},[637,50816,50818,50820,50822,50825,50827,50829,50831,50833],{"class":50817,"line":578},[639,673],[637,50819,677],{"class":676},[637,50821,680],{"class":642},[637,50823,50824],{"class":683}," AnimatedSprite",[637,50826,693],{"class":642},[637,50828,696],{"class":676},[637,50830,699],{"class":642},[637,50832,702],{"class":663},[637,50834,705],{"class":642},[637,50836,50837],{"class":639,"line":708},[637,50838,742],{"emptyLinePlaceholder":594},[637,50840,50841,50843,50846,50848,50850,50852,50854,50857,50859],{"class":639,"line":729},[637,50842,2415],{"class":650},[637,50844,50845],{"class":683}," currentAnimation ",[637,50847,657],{"class":642},[637,50849,3872],{"class":2434},[637,50851,2437],{"class":683},[637,50853,2440],{"class":642},[637,50855,50856],{"class":663},"cientosIdle",[637,50858,2440],{"class":642},[637,50860,2448],{"class":683},[637,50862,50863,50865,50867],{"class":639,"line":739},[637,50864,732],{"class":642},[637,50866,647],{"class":646},[637,50868,669],{"class":642},[637,50870,50871],{"class":639,"line":745},[637,50872,742],{"emptyLinePlaceholder":594},[637,50874,50875,50877,50879],{"class":639,"line":755},[637,50876,643],{"class":642},[637,50878,750],{"class":646},[637,50880,669],{"class":642},[637,50882,50883,50885,50887],{"class":639,"line":778},[637,50884,758],{"class":642},[637,50886,761],{"class":646},[637,50888,669],{"class":642},[637,50890,50891,50893,50895],{"class":639,"line":790},[637,50892,781],{"class":642},[637,50894,21652],{"class":646},[637,50896,669],{"class":642},[637,50898,50900,50902],{"class":50899,"line":800},[639,673],[637,50901,853],{"class":642},[637,50903,50904],{"class":646},"AnimatedSprite\n",[637,50906,50908,50911,50913,50915,50918],{"class":50907,"line":805},[639,673],[637,50909,50910],{"class":650},"        image",[637,50912,657],{"class":642},[637,50914,660],{"class":642},[637,50916,50917],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[637,50919,3131],{"class":642},[637,50921,50923,50926,50928,50930,50933],{"class":50922,"line":827},[639,673],[637,50924,50925],{"class":650},"        atlas",[637,50927,657],{"class":642},[637,50929,660],{"class":642},[637,50931,50932],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[637,50934,3131],{"class":642},[637,50936,50938,50941,50943,50945,50948],{"class":50937,"line":631},[639,673],[637,50939,50940],{"class":650},"        :animation",[637,50942,657],{"class":642},[637,50944,660],{"class":642},[637,50946,50947],{"class":663},"currentAnimation",[637,50949,3131],{"class":642},[637,50951,50953],{"class":50952,"line":850},[639,673],[637,50954,8033],{"class":642},[637,50956,50957,50959,50961],{"class":639,"line":861},[637,50958,895],{"class":642},[637,50960,21652],{"class":646},[637,50962,669],{"class":642},[637,50964,50965,50967,50969],{"class":639,"line":872},[637,50966,905],{"class":642},[637,50968,761],{"class":646},[637,50970,669],{"class":642},[637,50972,50973,50975,50977],{"class":639,"line":882},[637,50974,732],{"class":642},[637,50976,750],{"class":646},[637,50978,669],{"class":642},[3199,50980,50981],{},[614,50982,50983,50985,50986,1146],{},[618,50984,50768],{}," loads resources asynchronously, so it must be wrapped in a ",[618,50987,50988],{},"\u003CSuspense />",[504,50990,50992],{"id":50991},"compiling-an-atlas","Compiling an atlas",[614,50994,50995,50996,50998],{},"In typical usage, ",[618,50997,50768],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2213,51000,51001,51007],{},[2216,51002,51003],{},[1140,51004,51006],{"href":50917,"rel":51005},[1144],"example compiled texture",[2216,51008,51009],{},[1140,51010,51012],{"href":50932,"rel":51011},[1144],"example JSON atlas",[614,51014,51015,51016,51021],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1140,51017,51020],{"href":51018,"rel":51019},"https://www.codeandweb.com/texturepacker",[1144],"TexturePacker"," useful.",[504,51023,51025],{"id":51024},"without-an-atlas","Without an atlas",[614,51027,51028,51029,51032],{},"There may be cases where you don't want to supply an atlas to the ",[618,51030,51031],{},"atlas"," prop. To do so:",[2213,51034,51035,51038,51041,51044],{},[2216,51036,51037],{},"Compile your source images into a single image texture.",[2216,51039,51040],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2216,51042,51043],{},"Ensure no extra padding has been added to the compiled image texture.",[2216,51045,51046,51047,51049,51050,1146],{},"Set the ",[618,51048,51031],{}," prop to number of columns, number of rows as ",[618,51051,28840],{},[504,51053,51055],{"id":51054},"spritesheets-in-the-wild","Spritesheets in the wild",[3199,51057,51058],{},[614,51059,51060,51061,51063],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[618,51062,50768],{},". In many cases, it's advisable to recompile the spritesheet.",[4051,51065,51067],{"id":51066},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2213,51069,51070,51073,51076,51079,51090],{},[2216,51071,51072],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2216,51074,51075],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[2216,51077,51078],{},"Export layers as individual images.",[2216,51080,51081,51082,51084,3194,51087,51089],{},"Name the individual images according to the following pattern: ",[7555,51083],{},[618,51085,51086],{},"[animation name][frame number].[extension]",[7555,51088],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2216,51091,51092],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[504,51094,922],{"id":921},[927,51096,51097,51107],{},[930,51098,51099],{},[933,51100,51101,51103,51105],{},[936,51102,8089],{"align":997},[936,51104,941],{"align":997},[936,51106,944],{"align":997},[946,51108,51109,51121,51159,51219,51233,51246,51270,51284,51298,51312,51326,51345,51368,51386,51404],{},[933,51110,51111,51114,51119],{},[951,51112,51113],{"align":997},"image",[951,51115,51116,51118],{"align":997},[618,51117,3572],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[951,51120],{"align":997},[933,51122,51123,51125,51157],{},[951,51124,51031],{"align":997},[951,51126,51127,51130,51131,51154,51156],{"align":997},[618,51128,51129],{},"string | Atlasish"," – ",[2213,51132,51133,51138,51143,51148],{},[2216,51134,958,51135,51137],{},[618,51136,3572],{},", the URL of the JSON atlas.",[2216,51139,958,51140,51142],{},[618,51141,5352],{},", the number of columns in the texture.",[2216,51144,958,51145,51147],{},[618,51146,28840],{},", the number of columns/rows in the texture.",[2216,51149,958,51150,51153],{},[618,51151,51152],{},"AtlasData",", the atlas as a JS object.",[7555,51155],{},"This prop is not reactive.",[951,51158],{"align":997},[933,51160,51161,51164,51217],{},[951,51162,51163],{"align":997},"definitions",[951,51165,51166,51169,51170,51172,51173,51175,51177,51178,51180,51182,51183],{"align":997},[618,51167,51168],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[618,51171,51163],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7555,51174],{},[7555,51176],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7555,51179],{},[7555,51181],{},"Here is how various definition strings convert to arrays of frames for playback:",[2213,51184,51185,51192,51199,51205,51211],{},[2216,51186,51187,51188,51191],{},"\"0,2,1\" - ",[637,51189,51190],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2216,51193,51194,51195,51198],{},"\"2(10)\" - ",[637,51196,51197],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2216,51200,51201,51202],{},"\"1-4\" - ",[637,51203,51204],{},"1,2,3,4",[2216,51206,51207,51208],{},"\"10-5(2)\" - ",[637,51209,51210],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2216,51212,51213,51214],{},"\"1-4(3),10(2)\" - ",[637,51215,51216],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[951,51218],{"align":997},[933,51220,51221,51224,51229],{},[951,51222,51223],{"align":997},"fps",[951,51225,51226,51228],{"align":997},[618,51227,5352],{}," – Desired frames per second of the animation.",[951,51230,51231],{"align":997},[618,51232,28432],{},[933,51234,51235,51237,51242],{},[951,51236,25923],{"align":997},[951,51238,51239,51241],{"align":997},[618,51240,17564],{}," – Whether or not the animation should loop.",[951,51243,51244],{"align":997},[618,51245,961],{},[933,51247,51248,51251,51266],{},[951,51249,51250],{"align":997},"animation",[951,51252,51253,51256,51257,51259,51260,51262,51263,51265],{"align":997},[618,51254,51255],{},"string | [number, number] | number"," – If ",[618,51258,3572],{},", name of the animation to play. If ",[618,51261,28840],{},", start and end frames of the animation. If ",[618,51264,5352],{},", frame number to display.",[951,51267,51268],{"align":997},[618,51269,965],{},[933,51271,51272,51275,51280],{},[951,51273,51274],{"align":997},"paused",[951,51276,51277,51279],{"align":997},[618,51278,17564],{}," – Whether the animation is paused.",[951,51281,51282],{"align":997},[618,51283,971],{},[933,51285,51286,51289,51294],{},[951,51287,51288],{"align":997},"reversed",[951,51290,51291,51293],{"align":997},[618,51292,17564],{}," – Whether to play the animation in reverse.",[951,51295,51296],{"align":997},[618,51297,971],{},[933,51299,51300,51303,51308],{},[951,51301,51302],{"align":997},"flipX",[951,51304,51305,51307],{"align":997},[618,51306,17564],{}," – Whether the sprite should be flipped, left to right.",[951,51309,51310],{"align":997},[618,51311,971],{},[933,51313,51314,51317,51322],{},[951,51315,51316],{"align":997},"resetOnEnd",[951,51318,51319,51321],{"align":997},[618,51320,17564],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[951,51323,51324],{"align":997},[618,51325,971],{},[933,51327,51328,51331,51341],{},[951,51329,51330],{"align":997},"asSprite",[951,51332,51333,51335,51336],{"align":997},[618,51334,17564],{}," – Whether to display the object as a THREE.Sprite. ",[1140,51337,51340],{"href":51338,"rel":51339},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1144],"See THREE.Sprite",[951,51342,51343],{"align":997},[618,51344,961],{},[933,51346,51347,51349,51363],{},[951,51348,29233],{"align":997},[951,51350,51351,51354,51355,51358,51359,51362],{"align":997},[618,51352,51353],{},"TresVector2"," – Anchor point of the object. A value of ",[637,51356,51357],{},"0.5, 0.5"," corresponds to the center. ",[637,51360,51361],{},"0, 0"," is left, bottom.",[951,51364,51365],{"align":997},[618,51366,51367],{},"[0.5, 0.5]",[933,51369,51370,51372,51382],{},[951,51371,39429],{"align":997},[951,51373,51374,51376,51377],{"align":997},[618,51375,5352],{}," – Alpha test value for the material. ",[1140,51378,51381],{"href":51379,"rel":51380},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1144],"See THREE.Material.alphaTest",[951,51383,51384],{"align":997},[618,51385,13783],{},[933,51387,51388,51390,51400],{},[951,51389,48003],{"align":997},[951,51391,51392,51394,51395],{"align":997},[618,51393,17564],{}," – Depth test value for the material. ",[1140,51396,51399],{"href":51397,"rel":51398},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1144],"See THREE.Material.depthTest",[951,51401,51402],{"align":997},[618,51403,961],{},[933,51405,51406,51408,51418],{},[951,51407,10412],{"align":997},[951,51409,51410,51412,51413],{"align":997},[618,51411,17564],{}," – Depth write value for the material. ",[1140,51414,51417],{"href":51415,"rel":51416},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1144],"See THREE.Material.depthWrite",[951,51419,51420],{"align":997},[618,51421,961],{},[504,51423,14280],{"id":14279},[927,51425,51426,51437],{},[930,51427,51428],{},[933,51429,51430,51432,51434],{},[936,51431,5759],{},[936,51433,941],{},[936,51435,51436],{},"Argument",[946,51438,51439,51454,51474],{},[933,51440,51441,51446,51449],{},[951,51442,51443],{},[618,51444,51445],{},"frame",[951,51447,51448],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[951,51450,51451,51453],{},[618,51452,3572],{}," – Name of the newly displayed frame",[933,51455,51456,51460,51469],{},[951,51457,51458],{},[618,51459,14324],{},[951,51461,51462,51463,51466,51467],{},"Emitted when the animation ends – ",[618,51464,51465],{},"props.loop"," must be set to ",[618,51468,971],{},[951,51470,51471,51473],{},[618,51472,3572],{}," – Name of the ending frame",[933,51475,51476,51480,51487],{},[951,51477,51478],{},[618,51479,25923],{},[951,51481,51482,51483,51466,51485],{},"Emitted when the animation loops – ",[618,51484,51465],{},[618,51486,961],{},[951,51488,51489,51491],{},[618,51490,3572],{}," – Name of the frame at the end of the loop",[504,51493,51494],{"id":51250},"Animation",[614,51496,2776,51497,51500],{},[618,51498,51499],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4051,51502,51504],{"id":51503},"using-named-animations-as-animation","Using named animations as animation",[614,51506,51507],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[614,51509,51510,51512],{},[618,51511,50768],{}," uses those filenames to automatically group images into animations.",[614,51514,51515],{},"Use either of the following naming conventions for your source images ...",[2213,51517,51518,51523],{},[2216,51519,51520],{},[618,51521,51522],{},"[animation name][frame number].[file_extension]",[2216,51524,51525],{},[618,51526,51527],{},"[animation name]_[frame number].[file_extension]",[614,51529,51530,51531,51533,51534,51537,51538,51540,51541,41238],{},"... then ",[618,51532,50768],{}," will automatically make all ",[618,51535,51536],{},"[animation name]"," available for playback. Just pass ",[618,51539,51536],{}," to the component's ",[618,51542,51499],{},[4051,51544,41344],{"id":41343},[614,51546,51547],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[927,51549,51550,51560],{},[930,51551,51552],{},[933,51553,51554,51557],{},[936,51555,51556],{},"Filenames",[936,51558,51559],{},"Animation name",[946,51561,51562,51569,51577],{},[933,51563,51564,51567],{},[951,51565,51566],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[951,51568,50856],{},[933,51570,51571,51574],{},[951,51572,51573],{},"cientosIdleToWalkTransition0000.png",[951,51575,51576],{},"cientosIdleToWalkTransition",[933,51578,51579,51582],{},[951,51580,51581],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[951,51583,51584],{},"cientosWalk",[504,51586,51587],{"id":51163},"Definitions",[614,51589,51590,51591,51594,51595,51599],{},"You can supply an object to the ",[618,51592,51593],{},":definitions"," prop. Any ",[1140,51596,51598],{"href":51597},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4051,51601,51603],{"id":51602},"demo","Demo",[614,51605,51606,51607,48848,51609,1146],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[618,51608,51499],{},[618,51610,51611],{},"'idle'",[614,51613,51614,51615,51617,51618,51621],{},"But below, we've added a ",[618,51616,51593],{}," prop with this value for the ",[618,51619,51620],{},"idle"," key:",[626,51623,51626],{"className":51624,"code":51625,"language":30324},[30322],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[618,51627,51625],{"__ignoreMap":576},[614,51629,51630],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2213,51632,51633,51642,51655],{},[2216,51634,51635,51638,51639,51641],{},[618,51636,51637],{},"0-5"," – Play all six images (",[618,51640,51637],{},") of the animation normally.",[2216,51643,51644,51647,51648,51651,51652,5574],{},[618,51645,51646],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[618,51649,51650],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[618,51653,51654],{},"3(20)",[2216,51656,51657,51660],{},[618,51658,51659],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[504,51662,51663],{"id":29233},"Center",[614,51665,51666,51667,51670],{},"In addition to being the sprite's anchor point, the ",[618,51668,51669],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1327,51672,26370],{},{"title":576,"searchDepth":577,"depth":578,"links":51674},[51675,51676,51677,51678,51681,51682,51683,51687,51690],{"id":624,"depth":578,"text":15},{"id":50991,"depth":578,"text":50992},{"id":51024,"depth":578,"text":51025},{"id":51054,"depth":578,"text":51055,"children":51679},[51680],{"id":51066,"depth":708,"text":51067},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},{"id":51250,"depth":578,"text":51494,"children":51684},[51685,51686],{"id":51503,"depth":708,"text":51504},{"id":41343,"depth":708,"text":41344},{"id":51163,"depth":578,"text":51587,"children":51688},[51689],{"id":51602,"depth":708,"text":51603},{"id":29233,"depth":578,"text":51663},"Display 2D animations defined in a texture atlas.",{},{"title":425,"description":51691},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":51696,"title":429,"body":51697,"description":52091,"extension":591,"links":592,"meta":52092,"navigation":594,"path":430,"seo":52093,"stem":431,"__hash__":52094},"docs/2.api/9.objects/cube-camera.md",{"type":501,"value":51698,"toc":52087},[51699,51704,51714,51719,51721,51988,51990,52085],[608,51700,51701],{},[51702,51703],"objects-cube-camera",{},[614,51705,51706,51709,51710,51713],{},[618,51707,51708],{},"\u003CCubeCamera />"," creates a ",[618,51711,51712],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[614,51715,51716,51718],{},[618,51717,51708],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[504,51720,15],{"id":624},[626,51722,51725],{"className":628,"code":51723,"highlights":51724,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls />\n\n    \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" />\n      \u003C/TresMesh>\n    \u003C/CubeCamera>\n\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,800,861],[618,51726,51727,51747,51771,51779,51783,51791,51799,51817,51825,51829,51860,51868,51886,51915,51923,51932,51936,51954,51972,51980],{"__ignoreMap":576},[637,51728,51729,51731,51733,51735,51737,51739,51741,51743,51745],{"class":639,"line":577},[637,51730,643],{"class":642},[637,51732,647],{"class":646},[637,51734,651],{"class":650},[637,51736,654],{"class":650},[637,51738,657],{"class":642},[637,51740,660],{"class":642},[637,51742,664],{"class":663},[637,51744,660],{"class":642},[637,51746,669],{"class":642},[637,51748,51750,51752,51754,51757,51759,51761,51763,51765,51767,51769],{"class":51749,"line":578},[639,673],[637,51751,677],{"class":676},[637,51753,680],{"class":642},[637,51755,51756],{"class":683}," CubeCamera",[637,51758,687],{"class":642},[637,51760,690],{"class":683},[637,51762,693],{"class":642},[637,51764,696],{"class":676},[637,51766,699],{"class":642},[637,51768,702],{"class":663},[637,51770,705],{"class":642},[637,51772,51773,51775,51777],{"class":639,"line":708},[637,51774,732],{"class":642},[637,51776,647],{"class":646},[637,51778,669],{"class":642},[637,51780,51781],{"class":639,"line":729},[637,51782,742],{"emptyLinePlaceholder":594},[637,51784,51785,51787,51789],{"class":639,"line":739},[637,51786,643],{"class":642},[637,51788,750],{"class":646},[637,51790,669],{"class":642},[637,51792,51793,51795,51797],{"class":639,"line":745},[637,51794,758],{"class":642},[637,51796,761],{"class":646},[637,51798,669],{"class":642},[637,51800,51801,51803,51805,51807,51809,51811,51813,51815],{"class":639,"line":755},[637,51802,781],{"class":642},[637,51804,784],{"class":646},[637,51806,1485],{"class":650},[637,51808,657],{"class":642},[637,51810,660],{"class":642},[637,51812,7445],{"class":663},[637,51814,660],{"class":642},[637,51816,787],{"class":642},[637,51818,51819,51821,51823],{"class":639,"line":778},[637,51820,781],{"class":642},[637,51822,795],{"class":646},[637,51824,787],{"class":642},[637,51826,51827],{"class":639,"line":790},[637,51828,742],{"emptyLinePlaceholder":594},[637,51830,51832,51834,51836,51839,51841,51843,51845,51847,51850,51852,51854,51856,51858],{"class":51831,"line":800},[639,673],[637,51833,781],{"class":642},[637,51835,429],{"class":646},[637,51837,51838],{"class":650}," :resolution",[637,51840,657],{"class":642},[637,51842,660],{"class":642},[637,51844,28653],{"class":663},[637,51846,660],{"class":642},[637,51848,51849],{"class":650}," :frames",[637,51851,657],{"class":642},[637,51853,660],{"class":642},[637,51855,13514],{"class":663},[637,51857,660],{"class":642},[637,51859,669],{"class":642},[637,51861,51862,51864,51866],{"class":639,"line":805},[637,51863,853],{"class":642},[637,51865,856],{"class":646},[637,51867,669],{"class":642},[637,51869,51870,51872,51874,51876,51878,51880,51882,51884],{"class":639,"line":827},[637,51871,864],{"class":642},[637,51873,3958],{"class":646},[637,51875,1959],{"class":650},[637,51877,657],{"class":642},[637,51879,660],{"class":642},[637,51881,36814],{"class":663},[637,51883,660],{"class":642},[637,51885,787],{"class":642},[637,51887,51888,51890,51892,51895,51897,51899,51901,51903,51905,51907,51909,51911,51913],{"class":639,"line":631},[637,51889,864],{"class":642},[637,51891,2686],{"class":646},[637,51893,51894],{"class":650}," :metalness",[637,51896,657],{"class":642},[637,51898,660],{"class":642},[637,51900,1874],{"class":663},[637,51902,660],{"class":642},[637,51904,45653],{"class":650},[637,51906,657],{"class":642},[637,51908,660],{"class":642},[637,51910,965],{"class":663},[637,51912,660],{"class":642},[637,51914,787],{"class":642},[637,51916,51917,51919,51921],{"class":639,"line":850},[637,51918,885],{"class":642},[637,51920,856],{"class":646},[637,51922,669],{"class":642},[637,51924,51926,51928,51930],{"class":51925,"line":861},[639,673],[637,51927,895],{"class":642},[637,51929,429],{"class":646},[637,51931,669],{"class":642},[637,51933,51934],{"class":639,"line":872},[637,51935,742],{"emptyLinePlaceholder":594},[637,51937,51938,51940,51942,51944,51946,51948,51950,51952],{"class":639,"line":882},[637,51939,781],{"class":642},[637,51941,9681],{"class":646},[637,51943,1867],{"class":650},[637,51945,657],{"class":642},[637,51947,660],{"class":642},[637,51949,1946],{"class":663},[637,51951,660],{"class":642},[637,51953,787],{"class":642},[637,51955,51956,51958,51960,51962,51964,51966,51968,51970],{"class":639,"line":632},[637,51957,781],{"class":642},[637,51959,9700],{"class":646},[637,51961,1485],{"class":650},[637,51963,657],{"class":642},[637,51965,660],{"class":642},[637,51967,13362],{"class":663},[637,51969,660],{"class":642},[637,51971,787],{"class":642},[637,51973,51974,51976,51978],{"class":639,"line":902},[637,51975,905],{"class":642},[637,51977,761],{"class":646},[637,51979,669],{"class":642},[637,51981,51982,51984,51986],{"class":639,"line":912},[637,51983,732],{"class":642},[637,51985,750],{"class":646},[637,51987,669],{"class":642},[504,51989,922],{"id":921},[927,51991,51992,52002],{},[930,51993,51994],{},[933,51995,51996,51998,52000],{},[936,51997,938],{"align":997},[936,51999,941],{"align":997},[936,52001,944],{},[946,52003,52004,52023,52037,52050,52063,52074],{},[933,52005,52006,52010,52019],{},[951,52007,52008],{"align":997},[618,52009,39348],{},[951,52011,52012,52013,52015,52016,52018],{"align":997},"Number of frames to render. Set to ",[618,52014,1874],{}," for a static scene. ",[618,52017,13514],{}," to update continuously.",[951,52020,52021],{},[618,52022,13514],{},[933,52024,52025,52029,52032],{},[951,52026,52027],{"align":997},[618,52028,27974],{},[951,52030,52031],{"align":997},"Resolution of the FBO",[951,52033,52034],{},[618,52035,52036],{},"255",[933,52038,52039,52043,52046],{},[951,52040,52041],{"align":997},[618,52042,43045],{},[951,52044,52045],{"align":997},"Camera near",[951,52047,52048],{},[618,52049,2163],{},[933,52051,52052,52056,52059],{},[951,52053,52054],{"align":997},[618,52055,40872],{},[951,52057,52058],{"align":997},"Camera far",[951,52060,52061],{},[618,52062,9286],{},[933,52064,52065,52069,52072],{},[951,52066,52067],{"align":997},[618,52068,29658],{},[951,52070,52071],{"align":997},"Custom environment map that is temporarily set as the scene's background",[951,52073],{},[933,52075,52076,52080,52083],{},[951,52077,52078],{"align":997},[618,52079,40442],{},[951,52081,52082],{"align":997},"Custom fog that is temporarily set as the scene's fog",[951,52084],{},[1327,52086,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":52088},[52089,52090],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render environment maps for reflective objects.",{},{"title":429,"description":52091},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":52096,"title":433,"body":52097,"description":53180,"extension":591,"links":592,"meta":53181,"navigation":594,"path":434,"seo":53182,"stem":435,"__hash__":53183},"docs/2.api/9.objects/fbo.md",{"type":501,"value":52098,"toc":53172},[52099,52104,52107,52114,52116,52709,52711,52825,52829,52831,52837,52844,52847,53083,53085,53169],[2295,52100,52101],{},[52102,52103],"objects-fbo",{},[614,52105,52106],{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[614,52108,52109,52110,52113],{},"Cientos provides an ",[618,52111,52112],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[504,52115,15],{"id":624},[626,52117,52120],{"className":628,"code":52118,"highlights":52119,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (!torusRef.value) { return }\n  torusRef.value.rotation.x = elapsed * 0.745\n  torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n    \u003CFbo\n      ref=\"fboRef\"\n      :depth=\"false\"\n      :settings=\"{ samples: 1 }\"\n    />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n      \u003CTresMeshBasicMaterial\n        :color=\"0xFFFFFF\"\n        :map=\"fboRef?.instance?.texture ?? null\"\n      />\n    \u003C/TresMesh>\n\n    \u003CTresMesh\n      ref=\"torusRef\"\n      :position=\"[3, 0, 0]\"\n    >\n      \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,2654,2663,2672,2681],[618,52121,52122,52142,52166,52186,52204,52222,52226,52259,52285,52289,52313,52337,52363,52388,52392,52400,52404,52412,52442,52460,52468,52472,52490,52498,52512,52526,52541,52545,52553,52571,52575,52581,52594,52607,52611,52619,52623,52629,52641,52654,52658,52677,52685,52693,52701],{"__ignoreMap":576},[637,52123,52124,52126,52128,52130,52132,52134,52136,52138,52140],{"class":639,"line":577},[637,52125,643],{"class":642},[637,52127,647],{"class":646},[637,52129,651],{"class":650},[637,52131,654],{"class":650},[637,52133,657],{"class":642},[637,52135,660],{"class":642},[637,52137,664],{"class":663},[637,52139,660],{"class":642},[637,52141,669],{"class":642},[637,52143,52145,52147,52149,52152,52154,52156,52158,52160,52162,52164],{"class":52144,"line":578},[639,673],[637,52146,677],{"class":676},[637,52148,680],{"class":642},[637,52150,52151],{"class":683}," Fbo",[637,52153,687],{"class":642},[637,52155,690],{"class":683},[637,52157,693],{"class":642},[637,52159,696],{"class":676},[637,52161,699],{"class":642},[637,52163,702],{"class":663},[637,52165,705],{"class":642},[637,52167,52168,52170,52172,52174,52176,52178,52180,52182,52184],{"class":639,"line":708},[637,52169,677],{"class":676},[637,52171,3442],{"class":676},[637,52173,680],{"class":642},[637,52175,19736],{"class":683},[637,52177,693],{"class":642},[637,52179,696],{"class":676},[637,52181,699],{"class":642},[637,52183,724],{"class":663},[637,52185,705],{"class":642},[637,52187,52188,52190,52192,52194,52196,52198,52200,52202],{"class":639,"line":729},[637,52189,677],{"class":676},[637,52191,680],{"class":642},[637,52193,715],{"class":683},[637,52195,693],{"class":642},[637,52197,696],{"class":676},[637,52199,699],{"class":642},[637,52201,724],{"class":663},[637,52203,705],{"class":642},[637,52205,52206,52208,52210,52212,52214,52216,52218,52220],{"class":639,"line":739},[637,52207,677],{"class":676},[637,52209,680],{"class":642},[637,52211,3498],{"class":683},[637,52213,693],{"class":642},[637,52215,696],{"class":676},[637,52217,699],{"class":642},[637,52219,633],{"class":663},[637,52221,705],{"class":642},[637,52223,52224],{"class":639,"line":745},[637,52225,742],{"emptyLinePlaceholder":594},[637,52227,52228,52230,52233,52235,52237,52239,52241,52243,52245,52247,52249,52251,52253,52255,52257],{"class":639,"line":755},[637,52229,2415],{"class":650},[637,52231,52232],{"class":683}," fboRef ",[637,52234,657],{"class":642},[637,52236,3498],{"class":2434},[637,52238,643],{"class":642},[637,52240,18402],{"class":1200},[637,52242,18405],{"class":642},[637,52244,52151],{"class":683},[637,52246,3651],{"class":642},[637,52248,3645],{"class":642},[637,52250,3648],{"class":1200},[637,52252,3651],{"class":642},[637,52254,2437],{"class":683},[637,52256,3656],{"class":642},[637,52258,2448],{"class":683},[637,52260,52261,52263,52265,52267,52269,52271,52273,52275,52277,52279,52281,52283],{"class":639,"line":778},[637,52262,2415],{"class":650},[637,52264,12161],{"class":683},[637,52266,657],{"class":642},[637,52268,3498],{"class":2434},[637,52270,643],{"class":642},[637,52272,19783],{"class":1200},[637,52274,3645],{"class":642},[637,52276,3648],{"class":1200},[637,52278,3651],{"class":642},[637,52280,2437],{"class":683},[637,52282,3656],{"class":642},[637,52284,2448],{"class":683},[637,52286,52287],{"class":639,"line":790},[637,52288,742],{"emptyLinePlaceholder":594},[637,52290,52291,52293,52295,52297,52299,52301,52303,52305,52307,52309,52311],{"class":639,"line":800},[637,52292,39670],{"class":650},[637,52294,39673],{"class":2434},[637,52296,39676],{"class":642},[637,52298,39679],{"class":6838},[637,52300,39682],{"class":642},[637,52302,680],{"class":642},[637,52304,39679],{"class":646},[637,52306,1218],{"class":642},[637,52308,5357],{"class":1200},[637,52310,39693],{"class":642},[637,52312,1204],{"class":642},[637,52314,52315,52317,52319,52322,52324,52326,52328,52330,52332,52335],{"class":639,"line":805},[637,52316,21254],{"class":676},[637,52318,3074],{"class":646},[637,52320,52321],{"class":642},"!",[637,52323,12327],{"class":683},[637,52325,1146],{"class":642},[637,52327,3685],{"class":683},[637,52329,4734],{"class":646},[637,52331,8438],{"class":642},[637,52333,52334],{"class":676}," return",[637,52336,17798],{"class":642},[637,52338,52339,52342,52344,52346,52348,52350,52352,52354,52356,52358,52360],{"class":639,"line":827},[637,52340,52341],{"class":683},"  torusRef",[637,52343,1146],{"class":642},[637,52345,3685],{"class":683},[637,52347,1146],{"class":642},[637,52349,5627],{"class":683},[637,52351,1146],{"class":642},[637,52353,7840],{"class":683},[637,52355,2431],{"class":642},[637,52357,39679],{"class":683},[637,52359,39737],{"class":642},[637,52361,52362],{"class":2501}," 0.745\n",[637,52364,52365,52367,52369,52371,52373,52375,52377,52379,52381,52383,52385],{"class":639,"line":631},[637,52366,52341],{"class":683},[637,52368,1146],{"class":642},[637,52370,3685],{"class":683},[637,52372,1146],{"class":642},[637,52374,5627],{"class":683},[637,52376,1146],{"class":642},[637,52378,39730],{"class":683},[637,52380,2431],{"class":642},[637,52382,39679],{"class":683},[637,52384,39737],{"class":642},[637,52386,52387],{"class":2501}," 0.361\n",[637,52389,52390],{"class":639,"line":850},[637,52391,1325],{"class":642},[637,52393,52394,52396,52398],{"class":639,"line":861},[637,52395,732],{"class":642},[637,52397,647],{"class":646},[637,52399,669],{"class":642},[637,52401,52402],{"class":639,"line":872},[637,52403,742],{"emptyLinePlaceholder":594},[637,52405,52406,52408,52410],{"class":639,"line":882},[637,52407,643],{"class":642},[637,52409,750],{"class":646},[637,52411,669],{"class":642},[637,52413,52414,52416,52418,52420,52422,52424,52427,52429,52432,52434,52436,52438,52440],{"class":639,"line":632},[637,52415,758],{"class":642},[637,52417,761],{"class":646},[637,52419,9585],{"class":650},[637,52421,657],{"class":642},[637,52423,660],{"class":642},[637,52425,52426],{"class":663},"0x222",[637,52428,660],{"class":642},[637,52430,52431],{"class":650}," @loop",[637,52433,657],{"class":642},[637,52435,660],{"class":642},[637,52437,39829],{"class":663},[637,52439,660],{"class":642},[637,52441,669],{"class":642},[637,52443,52444,52446,52448,52450,52452,52454,52456,52458],{"class":639,"line":902},[637,52445,781],{"class":642},[637,52447,784],{"class":646},[637,52449,1485],{"class":650},[637,52451,657],{"class":642},[637,52453,660],{"class":642},[637,52455,11810],{"class":663},[637,52457,660],{"class":642},[637,52459,787],{"class":642},[637,52461,52462,52464,52466],{"class":639,"line":912},[637,52463,781],{"class":642},[637,52465,795],{"class":646},[637,52467,787],{"class":642},[637,52469,52470],{"class":639,"line":2625},[637,52471,742],{"emptyLinePlaceholder":594},[637,52473,52474,52476,52478,52480,52482,52484,52486,52488],{"class":639,"line":2634},[637,52475,781],{"class":642},[637,52477,8049],{"class":646},[637,52479,1959],{"class":650},[637,52481,657],{"class":642},[637,52483,660],{"class":642},[637,52485,11961],{"class":663},[637,52487,660],{"class":642},[637,52489,787],{"class":642},[637,52491,52493,52495],{"class":52492,"line":2654},[639,673],[637,52494,781],{"class":642},[637,52496,52497],{"class":646},"Fbo\n",[637,52499,52501,52503,52505,52507,52510],{"class":52500,"line":2663},[639,673],[637,52502,12363],{"class":650},[637,52504,657],{"class":642},[637,52506,660],{"class":642},[637,52508,52509],{"class":663},"fboRef",[637,52511,3131],{"class":642},[637,52513,52515,52518,52520,52522,52524],{"class":52514,"line":2672},[639,673],[637,52516,52517],{"class":650},"      :depth",[637,52519,657],{"class":642},[637,52521,660],{"class":642},[637,52523,971],{"class":663},[637,52525,3131],{"class":642},[637,52527,52529,52532,52534,52536,52539],{"class":52528,"line":2681},[639,673],[637,52530,52531],{"class":650},"      :settings",[637,52533,657],{"class":642},[637,52535,660],{"class":642},[637,52537,52538],{"class":663},"{ samples: 1 }",[637,52540,3131],{"class":642},[637,52542,52543],{"class":639,"line":2703},[637,52544,17274],{"class":642},[637,52546,52547,52549,52551],{"class":639,"line":2747},[637,52548,781],{"class":642},[637,52550,856],{"class":646},[637,52552,669],{"class":642},[637,52554,52555,52557,52559,52561,52563,52565,52567,52569],{"class":639,"line":2756},[637,52556,853],{"class":642},[637,52558,867],{"class":646},[637,52560,1959],{"class":650},[637,52562,657],{"class":642},[637,52564,660],{"class":642},[637,52566,1966],{"class":663},[637,52568,660],{"class":642},[637,52570,787],{"class":642},[637,52572,52573],{"class":639,"line":2765},[637,52574,742],{"emptyLinePlaceholder":594},[637,52576,52577,52579],{"class":639,"line":3922},[637,52578,853],{"class":642},[637,52580,23215],{"class":646},[637,52582,52583,52585,52587,52589,52592],{"class":639,"line":3953},[637,52584,23233],{"class":650},[637,52586,657],{"class":642},[637,52588,660],{"class":642},[637,52590,52591],{"class":663},"0xFFFFFF",[637,52593,3131],{"class":642},[637,52595,52596,52598,52600,52602,52605],{"class":639,"line":3974},[637,52597,26293],{"class":650},[637,52599,657],{"class":642},[637,52601,660],{"class":642},[637,52603,52604],{"class":663},"fboRef?.instance?.texture ?? null",[637,52606,3131],{"class":642},[637,52608,52609],{"class":639,"line":3993},[637,52610,8033],{"class":642},[637,52612,52613,52615,52617],{"class":639,"line":4025},[637,52614,895],{"class":642},[637,52616,856],{"class":646},[637,52618,669],{"class":642},[637,52620,52621],{"class":639,"line":4034},[637,52622,742],{"emptyLinePlaceholder":594},[637,52624,52625,52627],{"class":639,"line":4043},[637,52626,781],{"class":642},[637,52628,5126],{"class":646},[637,52630,52631,52633,52635,52637,52639],{"class":639,"line":21441},[637,52632,12363],{"class":650},[637,52634,657],{"class":642},[637,52636,660],{"class":642},[637,52638,12327],{"class":663},[637,52640,3131],{"class":642},[637,52642,52643,52645,52647,52649,52652],{"class":639,"line":21456},[637,52644,17261],{"class":650},[637,52646,657],{"class":642},[637,52648,660],{"class":642},[637,52650,52651],{"class":663},"[3, 0, 0]",[637,52653,3131],{"class":642},[637,52655,52656],{"class":639,"line":21471},[637,52657,12391],{"class":642},[637,52659,52660,52662,52664,52666,52668,52670,52673,52675],{"class":639,"line":21476},[637,52661,853],{"class":642},[637,52663,11863],{"class":646},[637,52665,1959],{"class":650},[637,52667,657],{"class":642},[637,52669,660],{"class":642},[637,52671,52672],{"class":663},"[1, 0.5, 16, 100]",[637,52674,660],{"class":642},[637,52676,787],{"class":642},[637,52678,52679,52681,52683],{"class":639,"line":21483},[637,52680,853],{"class":642},[637,52682,877],{"class":646},[637,52684,787],{"class":642},[637,52686,52687,52689,52691],{"class":639,"line":21488},[637,52688,895],{"class":642},[637,52690,856],{"class":646},[637,52692,669],{"class":642},[637,52694,52695,52697,52699],{"class":639,"line":21494},[637,52696,905],{"class":642},[637,52698,761],{"class":646},[637,52700,669],{"class":642},[637,52702,52703,52705,52707],{"class":639,"line":21515},[637,52704,732],{"class":642},[637,52706,750],{"class":646},[637,52708,669],{"class":642},[504,52710,922],{"id":921},[927,52712,52713,52723],{},[930,52714,52715],{},[933,52716,52717,52719,52721],{},[936,52718,938],{"align":997},[936,52720,941],{"align":997},[936,52722,944],{},[946,52724,52725,52741,52757,52781,52807],{},[933,52726,52727,52733,52738],{},[951,52728,52729],{"align":997},[1669,52730,52731],{},[618,52732,40844],{},[951,52734,52735,52737],{"align":997},[618,52736,5352],{}," - The width of the FBO.",[951,52739,52740],{},"Width of the canvas",[933,52742,52743,52749,52754],{},[951,52744,52745],{"align":997},[1669,52746,52747],{},[618,52748,40858],{},[951,52750,52751,52753],{"align":997},[618,52752,5352],{}," - the height of the FBO",[951,52755,52756],{},"Height of the canvas",[933,52758,52759,52765,52777],{},[951,52760,52761],{"align":997},[1669,52762,52763],{},[618,52764,13084],{},[951,52766,52767,52769,52770,1146],{"align":997},[618,52768,17564],{}," - Whether or not the FBO should render the depth to a ",[1140,52771,52774],{"href":52772,"rel":52773},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1144],[618,52775,52776],{},"depthTexture",[951,52778,52779],{},[618,52780,971],{},[933,52782,52783,52790,52803],{},[951,52784,52785],{"align":997},[1669,52786,52787],{},[618,52788,52789],{},"settings",[951,52791,52792,52795,52796],{"align":997},[618,52793,52794],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1140,52797,52800,25106],{"href":52798,"rel":52799},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1144],[618,52801,52802],{},"WebGLRenderTarget",[951,52804,52805],{},[618,52806,6125],{},[933,52808,52809,52816,52821],{},[951,52810,52811],{"align":997},[1669,52812,52813],{},[618,52814,52815],{},"autoRender",[951,52817,52818,52820],{"align":997},[618,52819,17564],{}," - Whether to automatically render the FBO on the default scene.",[951,52822,52823],{},[618,52824,961],{},[504,52826,52828],{"id":52827},"usefbo","useFBO",[614,52830,52106],{},[614,52832,52833,52834,52836],{},"Cientos provides a ",[618,52835,52828],{}," composable to make it easy to use FBOs in your application.",[3199,52838,52839],{},[614,52840,2776,52841,52843],{},[618,52842,52828],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4051,52845,15],{"id":52846},"usage-1",[626,52848,52851],{"className":628,"code":52849,"highlights":52850,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n  depth: true,\n  width: 512,\n  height: 512,\n  settings: {\n    samples: 1,\n  },\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n    \u003CTresMeshBasicMaterial\n      :color=\"0xFFFFFF\"\n      :map=\"fboTarget?.texture ?? null\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n\n",[578,729,739,745,755,778,790,800,805,912],[618,52852,52853,52873,52893,52897,52913,52924,52935,52946,52956,52968,52973,52980,52988,52992,53000,53008,53026,53030,53036,53049,53063,53067,53075],{"__ignoreMap":576},[637,52854,52855,52857,52859,52861,52863,52865,52867,52869,52871],{"class":639,"line":577},[637,52856,643],{"class":642},[637,52858,647],{"class":646},[637,52860,651],{"class":650},[637,52862,654],{"class":650},[637,52864,657],{"class":642},[637,52866,660],{"class":642},[637,52868,664],{"class":663},[637,52870,660],{"class":642},[637,52872,669],{"class":642},[637,52874,52876,52878,52880,52883,52885,52887,52889,52891],{"class":52875,"line":578},[639,673],[637,52877,677],{"class":676},[637,52879,680],{"class":642},[637,52881,52882],{"class":683}," useFBO",[637,52884,693],{"class":642},[637,52886,696],{"class":676},[637,52888,699],{"class":642},[637,52890,702],{"class":663},[637,52892,705],{"class":642},[637,52894,52895],{"class":639,"line":708},[637,52896,742],{"emptyLinePlaceholder":594},[637,52898,52900,52902,52905,52907,52909,52911],{"class":52899,"line":729},[639,673],[637,52901,2415],{"class":650},[637,52903,52904],{"class":683}," fboTarget ",[637,52906,657],{"class":642},[637,52908,52882],{"class":2434},[637,52910,2437],{"class":683},[637,52912,3260],{"class":642},[637,52914,52916,52918,52920,52922],{"class":52915,"line":739},[639,673],[637,52917,1259],{"class":646},[637,52919,1218],{"class":642},[637,52921,4398],{"class":4397},[637,52923,2488],{"class":642},[637,52925,52927,52929,52931,52933],{"class":52926,"line":745},[639,673],[637,52928,1240],{"class":646},[637,52930,1218],{"class":642},[637,52932,42129],{"class":2501},[637,52934,2488],{"class":642},[637,52936,52938,52940,52942,52944],{"class":52937,"line":755},[639,673],[637,52939,1250],{"class":646},[637,52941,1218],{"class":642},[637,52943,42129],{"class":2501},[637,52945,2488],{"class":642},[637,52947,52949,52952,52954],{"class":52948,"line":778},[639,673],[637,52950,52951],{"class":646},"  settings",[637,52953,1218],{"class":642},[637,52955,1204],{"class":642},[637,52957,52959,52962,52964,52966],{"class":52958,"line":790},[639,673],[637,52960,52961],{"class":646},"    samples",[637,52963,1218],{"class":642},[637,52965,2561],{"class":2501},[637,52967,2488],{"class":642},[637,52969,52971],{"class":52970,"line":800},[639,673],[637,52972,2597],{"class":642},[637,52974,52976,52978],{"class":52975,"line":805},[639,673],[637,52977,2428],{"class":642},[637,52979,2448],{"class":683},[637,52981,52982,52984,52986],{"class":639,"line":827},[637,52983,732],{"class":642},[637,52985,647],{"class":646},[637,52987,669],{"class":642},[637,52989,52990],{"class":639,"line":631},[637,52991,742],{"emptyLinePlaceholder":594},[637,52993,52994,52996,52998],{"class":639,"line":850},[637,52995,643],{"class":642},[637,52997,750],{"class":646},[637,52999,669],{"class":642},[637,53001,53002,53004,53006],{"class":639,"line":861},[637,53003,758],{"class":642},[637,53005,856],{"class":646},[637,53007,669],{"class":642},[637,53009,53010,53012,53014,53016,53018,53020,53022,53024],{"class":639,"line":872},[637,53011,781],{"class":642},[637,53013,867],{"class":646},[637,53015,1959],{"class":650},[637,53017,657],{"class":642},[637,53019,660],{"class":642},[637,53021,1966],{"class":663},[637,53023,660],{"class":642},[637,53025,787],{"class":642},[637,53027,53028],{"class":639,"line":882},[637,53029,742],{"emptyLinePlaceholder":594},[637,53031,53032,53034],{"class":639,"line":632},[637,53033,781],{"class":642},[637,53035,23215],{"class":646},[637,53037,53038,53041,53043,53045,53047],{"class":639,"line":902},[637,53039,53040],{"class":650},"      :color",[637,53042,657],{"class":642},[637,53044,660],{"class":642},[637,53046,52591],{"class":663},[637,53048,3131],{"class":642},[637,53050,53052,53054,53056,53058,53061],{"class":53051,"line":912},[639,673],[637,53053,20823],{"class":650},[637,53055,657],{"class":642},[637,53057,660],{"class":642},[637,53059,53060],{"class":663},"fboTarget?.texture ?? null",[637,53062,3131],{"class":642},[637,53064,53065],{"class":639,"line":2625},[637,53066,17274],{"class":642},[637,53068,53069,53071,53073],{"class":639,"line":2634},[637,53070,905],{"class":642},[637,53072,856],{"class":646},[637,53074,669],{"class":642},[637,53076,53077,53079,53081],{"class":639,"line":2654},[637,53078,732],{"class":642},[637,53080,750],{"class":646},[637,53082,669],{"class":642},[4051,53084,14023],{"id":17537},[927,53086,53087,53097],{},[930,53088,53089],{},[933,53090,53091,53093,53095],{},[936,53092,938],{"align":997},[936,53094,941],{"align":997},[936,53096,944],{},[946,53098,53099,53113,53127,53148],{},[933,53100,53101,53107,53111],{},[951,53102,53103],{"align":997},[1669,53104,53105],{},[618,53106,40844],{},[951,53108,53109,52737],{"align":997},[618,53110,5352],{},[951,53112,52740],{},[933,53114,53115,53121,53125],{},[951,53116,53117],{"align":997},[1669,53118,53119],{},[618,53120,40858],{},[951,53122,53123,52753],{"align":997},[618,53124,5352],{},[951,53126,52756],{},[933,53128,53129,53135,53144],{},[951,53130,53131],{"align":997},[1669,53132,53133],{},[618,53134,13084],{},[951,53136,53137,52769,53139,1146],{"align":997},[618,53138,17564],{},[1140,53140,53142],{"href":52772,"rel":53141},[1144],[618,53143,52776],{},[951,53145,53146],{},[618,53147,971],{},[933,53149,53150,53156,53165],{},[951,53151,53152],{"align":997},[1669,53153,53154],{},[618,53155,52789],{},[951,53157,53158,52795,53160],{"align":997},[618,53159,52794],{},[1140,53161,53163,25106],{"href":52798,"rel":53162},[1144],[618,53164,52802],{},[951,53166,53167],{},[618,53168,6125],{},[1327,53170,53171],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":576,"searchDepth":577,"depth":578,"links":53173},[53174,53175,53176],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":52827,"depth":578,"text":52828,"children":53177},[53178,53179],{"id":52846,"depth":708,"text":15},{"id":17537,"depth":708,"text":14023},"Render to texture using Frame Buffer Objects.",{},{"title":433,"description":53180},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":53185,"title":437,"body":53186,"description":53555,"extension":591,"links":592,"meta":53556,"navigation":594,"path":438,"seo":53557,"stem":439,"__hash__":53558},"docs/2.api/9.objects/gradient-texture.md",{"type":501,"value":53187,"toc":53551},[53188,53193,53202,53204,53405,53407,53549],[2295,53189,53190],{},[53191,53192],"objects-gradient-texture",{},[614,53194,53195,53198,53199,53201],{},[618,53196,53197],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[618,53200,2981],{}," by default.",[504,53203,15],{"id":624},[626,53205,53207],{"className":628,"code":53206,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[2, 2]\" />\n      \u003CTresMeshBasicMaterial>\n        \u003CGradientTexture\n          :stops=\"[0, 1]\"\n          :colors=\"['#ff0000', '#0000ff']\"\n        />\n      \u003C/TresMeshBasicMaterial>\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,53208,53209,53229,53248,53256,53260,53268,53276,53294,53298,53306,53325,53333,53340,53354,53368,53373,53381,53389,53397],{"__ignoreMap":576},[637,53210,53211,53213,53215,53217,53219,53221,53223,53225,53227],{"class":639,"line":577},[637,53212,643],{"class":642},[637,53214,647],{"class":646},[637,53216,651],{"class":650},[637,53218,654],{"class":650},[637,53220,657],{"class":642},[637,53222,660],{"class":642},[637,53224,664],{"class":663},[637,53226,660],{"class":642},[637,53228,669],{"class":642},[637,53230,53231,53233,53235,53238,53240,53242,53244,53246],{"class":639,"line":578},[637,53232,677],{"class":676},[637,53234,680],{"class":642},[637,53236,53237],{"class":683}," GradientTexture",[637,53239,693],{"class":642},[637,53241,696],{"class":676},[637,53243,699],{"class":642},[637,53245,702],{"class":663},[637,53247,705],{"class":642},[637,53249,53250,53252,53254],{"class":639,"line":708},[637,53251,732],{"class":642},[637,53253,647],{"class":646},[637,53255,669],{"class":642},[637,53257,53258],{"class":639,"line":729},[637,53259,742],{"emptyLinePlaceholder":594},[637,53261,53262,53264,53266],{"class":639,"line":739},[637,53263,643],{"class":642},[637,53265,750],{"class":646},[637,53267,669],{"class":642},[637,53269,53270,53272,53274],{"class":639,"line":745},[637,53271,758],{"class":642},[637,53273,761],{"class":646},[637,53275,669],{"class":642},[637,53277,53278,53280,53282,53284,53286,53288,53290,53292],{"class":639,"line":755},[637,53279,781],{"class":642},[637,53281,784],{"class":646},[637,53283,1485],{"class":650},[637,53285,657],{"class":642},[637,53287,660],{"class":642},[637,53289,9611],{"class":663},[637,53291,660],{"class":642},[637,53293,787],{"class":642},[637,53295,53296],{"class":639,"line":778},[637,53297,742],{"emptyLinePlaceholder":594},[637,53299,53300,53302,53304],{"class":639,"line":790},[637,53301,781],{"class":642},[637,53303,856],{"class":646},[637,53305,669],{"class":642},[637,53307,53308,53310,53312,53314,53316,53318,53321,53323],{"class":639,"line":800},[637,53309,853],{"class":642},[637,53311,27772],{"class":646},[637,53313,1959],{"class":650},[637,53315,657],{"class":642},[637,53317,660],{"class":642},[637,53319,53320],{"class":663},"[2, 2]",[637,53322,660],{"class":642},[637,53324,787],{"class":642},[637,53326,53327,53329,53331],{"class":639,"line":805},[637,53328,853],{"class":642},[637,53330,7472],{"class":646},[637,53332,669],{"class":642},[637,53334,53335,53337],{"class":639,"line":827},[637,53336,864],{"class":642},[637,53338,53339],{"class":646},"GradientTexture\n",[637,53341,53342,53345,53347,53349,53352],{"class":639,"line":631},[637,53343,53344],{"class":650},"          :stops",[637,53346,657],{"class":642},[637,53348,660],{"class":642},[637,53350,53351],{"class":663},"[0, 1]",[637,53353,3131],{"class":642},[637,53355,53356,53359,53361,53363,53366],{"class":639,"line":850},[637,53357,53358],{"class":650},"          :colors",[637,53360,657],{"class":642},[637,53362,660],{"class":642},[637,53364,53365],{"class":663},"['#ff0000', '#0000ff']",[637,53367,3131],{"class":642},[637,53369,53370],{"class":639,"line":861},[637,53371,53372],{"class":642},"        />\n",[637,53374,53375,53377,53379],{"class":639,"line":872},[637,53376,885],{"class":642},[637,53378,7472],{"class":646},[637,53380,669],{"class":642},[637,53382,53383,53385,53387],{"class":639,"line":882},[637,53384,895],{"class":642},[637,53386,856],{"class":646},[637,53388,669],{"class":642},[637,53390,53391,53393,53395],{"class":639,"line":632},[637,53392,905],{"class":642},[637,53394,761],{"class":646},[637,53396,669],{"class":642},[637,53398,53399,53401,53403],{"class":639,"line":902},[637,53400,732],{"class":642},[637,53402,750],{"class":646},[637,53404,669],{"class":642},[504,53406,922],{"id":921},[927,53408,53409,53419],{},[930,53410,53411],{},[933,53412,53413,53415,53417],{},[936,53414,938],{"align":997},[936,53416,941],{"align":997},[936,53418,944],{},[946,53420,53421,53447,53462,53476,53489,53503,53520,53534],{},[933,53422,53423,53428,53445],{},[951,53424,53425],{"align":997},[618,53426,53427],{},"stops",[951,53429,4279,53430,53432,53433,3063,53435,53437,53438,53441,53442,1146],{"align":997},[618,53431,37040],{}," of values between ",[618,53434,965],{},[618,53436,1874],{}," representing the color positions in the gradient. ",[618,53439,53440],{},"stops.length"," should match ",[618,53443,53444],{},"color.length",[951,53446],{},[933,53448,53449,53454,53460],{},[951,53450,53451],{"align":997},[618,53452,53453],{},"colors",[951,53455,4279,53456,53459],{"align":997},[618,53457,53458],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[951,53461],{},[933,53463,53464,53468,53471],{},[951,53465,53466],{"align":997},[618,53467,28152],{},[951,53469,53470],{"align":997},"Where the component should be attached within its parent.",[951,53472,53473],{},[618,53474,53475],{},"'map'",[933,53477,53478,53482,53485],{},[951,53479,53480],{"align":997},[618,53481,40858],{},[951,53483,53484],{"align":997},"Height of the canvas used to draw the gradient.",[951,53486,53487],{},[618,53488,39478],{},[933,53490,53491,53495,53498],{},[951,53492,53493],{"align":997},[618,53494,40844],{},[951,53496,53497],{"align":997},"Width of the canvas used to draw the gradient.",[951,53499,53500],{},[618,53501,53502],{},"16",[933,53504,53505,53509,53515],{},[951,53506,53507],{"align":997},[618,53508,5517],{},[951,53510,53511,53514],{"align":997},[618,53512,53513],{},"'linear' | 'radial'"," Type of gradient to draw.",[951,53516,53517],{},[618,53518,53519],{},"'linear'",[933,53521,53522,53527,53530],{},[951,53523,53524],{"align":997},[618,53525,53526],{},"innerCircleRadius",[951,53528,53529],{"align":997},"Radius of the inner circle of a radial gradient.",[951,53531,53532],{},[618,53533,965],{},[933,53535,53536,53541,53544],{},[951,53537,53538],{"align":997},[618,53539,53540],{},"outerCircleRadius",[951,53542,53543],{"align":997},"Radius of the outer circle of a radial gradient.",[951,53545,53546],{},[618,53547,53548],{},"'auto'",[1327,53550,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":53552},[53553,53554],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create gradient textures for materials.",{},{"title":437,"description":53555},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":53560,"title":441,"body":53561,"description":59093,"extension":591,"links":592,"meta":59094,"navigation":594,"path":442,"seo":59095,"stem":443,"__hash__":59096},"docs/2.api/9.objects/html.md",{"type":501,"value":53562,"toc":59072},[53563,53566,53579,53584,53586,53994,53998,54005,54010,54026,54034,54039,54178,54183,54187,54211,54216,54345,54349,54373,54376,54400,54416,54436,54441,54605,54609,54614,54637,54649,54654,56302,56304,56327,56347,56388,56391,56406,56417,56452,56459,56483,56500,56505,57970,57976,57982,57987,58188,58205,58207,58566,58568,58588,58592,58670,58672,58844,59048,59051,59069],[614,53564,53565],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[614,53567,53568,53569,3063,53571,53574,53575,53578],{},"🚀 Works seamlessly with both ",[1669,53570,12830],{},[1669,53572,53573],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[618,53576,53577],{},"\u003CHtml>"," component.",[2295,53580,53581],{},[53582,53583],"objects-html",{},[504,53585,15],{"id":624},[626,53587,53590],{"className":628,"code":53588,"highlights":53589,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTresMesh :position=\"[1, 1, 1]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n      \u003CHtml\n        center\n        transform\n        :distance-factor=\"4\"\n        :position=\"[0, 0, 0.65]\"\n        :scale=\"[0.75, 0.75, 0.75]\"\n      >\n        \u003Ch1 class=\"title\">I'm a Box 📦\u003C/h1>\n      \u003C/Html>\n    \u003C/TresMesh>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n\u003Cstyle scoped>\n.title {\n  background-color: #1e1e1e;\n  color: #ffffff;\n  font-size: 0.75rem;\n  padding: 0.25rem;\n  border-radius: 0.375rem;\n}\n\u003C/style>\n",[578,631,850,861,872,882,632],[618,53591,53592,53612,53636,53654,53662,53666,53674,53692,53711,53719,53737,53745,53753,53761,53767,53773,53787,53801,53816,53821,53850,53859,53867,53875,53883,53891,53899,53910,53918,53933,53946,53958,53970,53982,53986],{"__ignoreMap":576},[637,53593,53594,53596,53598,53600,53602,53604,53606,53608,53610],{"class":639,"line":577},[637,53595,643],{"class":642},[637,53597,647],{"class":646},[637,53599,651],{"class":650},[637,53601,654],{"class":650},[637,53603,657],{"class":642},[637,53605,660],{"class":642},[637,53607,664],{"class":663},[637,53609,660],{"class":642},[637,53611,669],{"class":642},[637,53613,53615,53617,53619,53622,53624,53626,53628,53630,53632,53634],{"class":53614,"line":578},[639,673],[637,53616,677],{"class":676},[637,53618,680],{"class":642},[637,53620,53621],{"class":683}," Html",[637,53623,687],{"class":642},[637,53625,690],{"class":683},[637,53627,693],{"class":642},[637,53629,696],{"class":676},[637,53631,699],{"class":642},[637,53633,702],{"class":663},[637,53635,705],{"class":642},[637,53637,53638,53640,53642,53644,53646,53648,53650,53652],{"class":639,"line":708},[637,53639,677],{"class":676},[637,53641,680],{"class":642},[637,53643,715],{"class":683},[637,53645,693],{"class":642},[637,53647,696],{"class":676},[637,53649,699],{"class":642},[637,53651,724],{"class":663},[637,53653,705],{"class":642},[637,53655,53656,53658,53660],{"class":639,"line":729},[637,53657,732],{"class":642},[637,53659,647],{"class":646},[637,53661,669],{"class":642},[637,53663,53664],{"class":639,"line":739},[637,53665,742],{"emptyLinePlaceholder":594},[637,53667,53668,53670,53672],{"class":639,"line":745},[637,53669,643],{"class":642},[637,53671,750],{"class":646},[637,53673,669],{"class":642},[637,53675,53676,53678,53680,53682,53684,53686,53688,53690],{"class":639,"line":755},[637,53677,758],{"class":642},[637,53679,761],{"class":646},[637,53681,764],{"class":650},[637,53683,657],{"class":642},[637,53685,660],{"class":642},[637,53687,11791],{"class":663},[637,53689,660],{"class":642},[637,53691,669],{"class":642},[637,53693,53694,53696,53698,53700,53702,53704,53707,53709],{"class":639,"line":778},[637,53695,781],{"class":642},[637,53697,784],{"class":646},[637,53699,1485],{"class":650},[637,53701,657],{"class":642},[637,53703,660],{"class":642},[637,53705,53706],{"class":663},"[2, 2, 5]",[637,53708,660],{"class":642},[637,53710,787],{"class":642},[637,53712,53713,53715,53717],{"class":639,"line":790},[637,53714,781],{"class":642},[637,53716,795],{"class":646},[637,53718,787],{"class":642},[637,53720,53721,53723,53725,53727,53729,53731,53733,53735],{"class":639,"line":800},[637,53722,781],{"class":642},[637,53724,856],{"class":646},[637,53726,1485],{"class":650},[637,53728,657],{"class":642},[637,53730,660],{"class":642},[637,53732,1966],{"class":663},[637,53734,660],{"class":642},[637,53736,669],{"class":642},[637,53738,53739,53741,53743],{"class":639,"line":805},[637,53740,853],{"class":642},[637,53742,867],{"class":646},[637,53744,787],{"class":642},[637,53746,53747,53749,53751],{"class":639,"line":827},[637,53748,853],{"class":642},[637,53750,877],{"class":646},[637,53752,787],{"class":642},[637,53754,53756,53758],{"class":53755,"line":631},[639,673],[637,53757,853],{"class":642},[637,53759,53760],{"class":646},"Html\n",[637,53762,53764],{"class":53763,"line":850},[639,673],[637,53765,53766],{"class":650},"        center\n",[637,53768,53770],{"class":53769,"line":861},[639,673],[637,53771,53772],{"class":650},"        transform\n",[637,53774,53776,53779,53781,53783,53785],{"class":53775,"line":872},[639,673],[637,53777,53778],{"class":650},"        :distance-factor",[637,53780,657],{"class":642},[637,53782,660],{"class":642},[637,53784,9653],{"class":663},[637,53786,3131],{"class":642},[637,53788,53790,53792,53794,53796,53799],{"class":53789,"line":882},[639,673],[637,53791,8005],{"class":650},[637,53793,657],{"class":642},[637,53795,660],{"class":642},[637,53797,53798],{"class":663},"[0, 0, 0.65]",[637,53800,3131],{"class":642},[637,53802,53804,53807,53809,53811,53814],{"class":53803,"line":632},[639,673],[637,53805,53806],{"class":650},"        :scale",[637,53808,657],{"class":642},[637,53810,660],{"class":642},[637,53812,53813],{"class":663},"[0.75, 0.75, 0.75]",[637,53815,3131],{"class":642},[637,53817,53818],{"class":639,"line":902},[637,53819,53820],{"class":642},"      >\n",[637,53822,53823,53825,53828,53830,53832,53834,53837,53839,53841,53844,53846,53848],{"class":639,"line":912},[637,53824,864],{"class":642},[637,53826,53827],{"class":646},"h1",[637,53829,25106],{"class":650},[637,53831,657],{"class":642},[637,53833,660],{"class":642},[637,53835,53836],{"class":663},"title",[637,53838,660],{"class":642},[637,53840,3651],{"class":642},[637,53842,53843],{"class":683},"I'm a Box 📦",[637,53845,732],{"class":642},[637,53847,53827],{"class":646},[637,53849,669],{"class":642},[637,53851,53852,53854,53857],{"class":639,"line":2625},[637,53853,885],{"class":642},[637,53855,53856],{"class":646},"Html",[637,53858,669],{"class":642},[637,53860,53861,53863,53865],{"class":639,"line":2634},[637,53862,895],{"class":642},[637,53864,856],{"class":646},[637,53866,669],{"class":642},[637,53868,53869,53871,53873],{"class":639,"line":2654},[637,53870,781],{"class":642},[637,53872,8049],{"class":646},[637,53874,787],{"class":642},[637,53876,53877,53879,53881],{"class":639,"line":2663},[637,53878,781],{"class":642},[637,53880,9681],{"class":646},[637,53882,787],{"class":642},[637,53884,53885,53887,53889],{"class":639,"line":2672},[637,53886,905],{"class":642},[637,53888,761],{"class":646},[637,53890,669],{"class":642},[637,53892,53893,53895,53897],{"class":639,"line":2681},[637,53894,732],{"class":642},[637,53896,750],{"class":646},[637,53898,669],{"class":642},[637,53900,53901,53903,53905,53908],{"class":639,"line":2703},[637,53902,643],{"class":642},[637,53904,1327],{"class":646},[637,53906,53907],{"class":650}," scoped",[637,53909,669],{"class":642},[637,53911,53912,53914,53916],{"class":639,"line":2747},[637,53913,1146],{"class":642},[637,53915,53836],{"class":1200},[637,53917,1204],{"class":642},[637,53919,53920,53923,53925,53928,53931],{"class":639,"line":2756},[637,53921,53922],{"class":4129},"  background-color",[637,53924,1218],{"class":642},[637,53926,53927],{"class":642}," #",[637,53929,53930],{"class":683},"1e1e1e",[637,53932,9522],{"class":642},[637,53934,53935,53937,53939,53941,53944],{"class":639,"line":2765},[637,53936,5473],{"class":4129},[637,53938,1218],{"class":642},[637,53940,53927],{"class":642},[637,53942,53943],{"class":683},"ffffff",[637,53945,9522],{"class":642},[637,53947,53948,53951,53953,53956],{"class":639,"line":3922},[637,53949,53950],{"class":4129},"  font-size",[637,53952,1218],{"class":642},[637,53954,53955],{"class":2501}," 0.75rem",[637,53957,9522],{"class":642},[637,53959,53960,53963,53965,53968],{"class":639,"line":3953},[637,53961,53962],{"class":4129},"  padding",[637,53964,1218],{"class":642},[637,53966,53967],{"class":2501}," 0.25rem",[637,53969,9522],{"class":642},[637,53971,53972,53975,53977,53980],{"class":639,"line":3974},[637,53973,53974],{"class":4129},"  border-radius",[637,53976,1218],{"class":642},[637,53978,53979],{"class":2501}," 0.375rem",[637,53981,9522],{"class":642},[637,53983,53984],{"class":639,"line":3993},[637,53985,1325],{"class":642},[637,53987,53988,53990,53992],{"class":639,"line":4025},[637,53989,732],{"class":642},[637,53991,1327],{"class":646},[637,53993,669],{"class":642},[504,53995,53997],{"id":53996},"occlusion","Occlusion",[614,53999,54000,54001,54004],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[618,54002,54003],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[614,54006,54007,54008,41238],{},"Html can be hidden behind one or more objects in your scene using the ",[618,54009,54003],{},[626,54011,54013],{"className":628,"code":54012,"language":633,"meta":576,"style":576},"\u003CHtml occlude>\n",[618,54014,54015],{"__ignoreMap":576},[637,54016,54017,54019,54021,54024],{"class":639,"line":577},[637,54018,643],{"class":642},[637,54020,53856],{"class":646},[637,54022,54023],{"class":650}," occlude",[637,54025,669],{"class":642},[614,54027,958,54028,54030,54031,54033],{},[618,54029,54003],{},", then ",[618,54032,53577],{}," will be hidden by any objects that pass in front of its position.",[2295,54035,54036],{},[54037,54038],"objects-html-occlusion",{},[5307,54040,5309,54041,54044],{},[5311,54042,54043],{},"Demo code",[626,54045,54047],{"className":45597,"code":54046,"language":45599,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, -2]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml center transform occlude :distance-factor=\"4\" :position=\"[0, 0, 2]\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[618,54048,54049,54068,54076,54084,54134,54162,54170],{"__ignoreMap":576},[637,54050,54051,54053,54055,54057,54059,54061,54064,54066],{"class":639,"line":577},[637,54052,643],{"class":642},[637,54054,856],{"class":646},[637,54056,1485],{"class":650},[637,54058,657],{"class":642},[637,54060,660],{"class":642},[637,54062,54063],{"class":663},"[0, 1, -2]",[637,54065,660],{"class":642},[637,54067,669],{"class":642},[637,54069,54070,54072,54074],{"class":639,"line":578},[637,54071,758],{"class":642},[637,54073,867],{"class":646},[637,54075,787],{"class":642},[637,54077,54078,54080,54082],{"class":639,"line":708},[637,54079,758],{"class":642},[637,54081,877],{"class":646},[637,54083,787],{"class":642},[637,54085,54086,54088,54090,54093,54096,54098,54101,54103,54105,54107,54109,54111,54113,54115,54118,54120,54123,54125,54127,54130,54132],{"class":639,"line":729},[637,54087,758],{"class":642},[637,54089,45599],{"class":646},[637,54091,54092],{"class":650}," center",[637,54094,54095],{"class":650}," transform",[637,54097,54023],{"class":650},[637,54099,54100],{"class":650}," :distance-factor",[637,54102,657],{"class":642},[637,54104,660],{"class":642},[637,54106,9653],{"class":663},[637,54108,660],{"class":642},[637,54110,1485],{"class":650},[637,54112,657],{"class":642},[637,54114,660],{"class":642},[637,54116,54117],{"class":663},"[0, 0, 2]",[637,54119,660],{"class":642},[637,54121,54122],{"class":650}," :z-index-range",[637,54124,657],{"class":642},[637,54126,660],{"class":642},[637,54128,54129],{"class":663},"[28, 0]",[637,54131,660],{"class":642},[637,54133,669],{"class":642},[637,54135,54136,54138,54140,54142,54144,54146,54149,54151,54153,54156,54158,54160],{"class":639,"line":739},[637,54137,781],{"class":642},[637,54139,53827],{"class":646},[637,54141,25106],{"class":650},[637,54143,657],{"class":642},[637,54145,660],{"class":642},[637,54147,54148],{"class":663},"bg-white dark:bg-dark text-xs p-1 rounded",[637,54150,660],{"class":642},[637,54152,3651],{"class":642},[637,54154,54155],{"class":683},"Move camera",[637,54157,732],{"class":642},[637,54159,53827],{"class":646},[637,54161,669],{"class":642},[637,54163,54164,54166,54168],{"class":639,"line":745},[637,54165,905],{"class":642},[637,54167,45599],{"class":646},[637,54169,669],{"class":642},[637,54171,54172,54174,54176],{"class":639,"line":755},[637,54173,732],{"class":642},[637,54175,856],{"class":646},[637,54177,669],{"class":642},[614,54179,54180,54181,2027],{},"You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the ",[618,54182,54003],{},[4051,54184,54186],{"id":54185},"single-occluder","Single occluder",[626,54188,54190],{"className":628,"code":54189,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh]\">\n",[618,54191,54192],{"__ignoreMap":576},[637,54193,54194,54196,54198,54200,54202,54204,54207,54209],{"class":639,"line":577},[637,54195,643],{"class":642},[637,54197,53856],{"class":646},[637,54199,54023],{"class":650},[637,54201,657],{"class":642},[637,54203,660],{"class":642},[637,54205,54206],{"class":663},"[mesh]",[637,54208,660],{"class":642},[637,54210,669],{"class":642},[2295,54212,54213],{},[54214,54215],"objects-html-single-occluder",{},[5307,54217,5309,54218,54220],{},[5311,54219,54043],{},[626,54221,54223],{"className":45597,"code":54222,"language":45599,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml center transform :occlude=\"[sphereRef]\" :distance-factor=\"4\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[618,54224,54225,54243,54251,54259,54303,54329,54337],{"__ignoreMap":576},[637,54226,54227,54229,54231,54233,54235,54237,54239,54241],{"class":639,"line":577},[637,54228,643],{"class":642},[637,54230,856],{"class":646},[637,54232,1485],{"class":650},[637,54234,657],{"class":642},[637,54236,660],{"class":642},[637,54238,25556],{"class":663},[637,54240,660],{"class":642},[637,54242,669],{"class":642},[637,54244,54245,54247,54249],{"class":639,"line":578},[637,54246,758],{"class":642},[637,54248,867],{"class":646},[637,54250,787],{"class":642},[637,54252,54253,54255,54257],{"class":639,"line":708},[637,54254,758],{"class":642},[637,54256,877],{"class":646},[637,54258,787],{"class":642},[637,54260,54261,54263,54265,54267,54269,54272,54274,54276,54279,54281,54283,54285,54287,54289,54291,54293,54295,54297,54299,54301],{"class":639,"line":729},[637,54262,758],{"class":642},[637,54264,45599],{"class":646},[637,54266,54092],{"class":650},[637,54268,54095],{"class":650},[637,54270,54271],{"class":650}," :occlude",[637,54273,657],{"class":642},[637,54275,660],{"class":642},[637,54277,54278],{"class":663},"[sphereRef]",[637,54280,660],{"class":642},[637,54282,54100],{"class":650},[637,54284,657],{"class":642},[637,54286,660],{"class":642},[637,54288,9653],{"class":663},[637,54290,660],{"class":642},[637,54292,54122],{"class":650},[637,54294,657],{"class":642},[637,54296,660],{"class":642},[637,54298,54129],{"class":663},[637,54300,660],{"class":642},[637,54302,669],{"class":642},[637,54304,54305,54307,54309,54311,54313,54315,54317,54319,54321,54323,54325,54327],{"class":639,"line":739},[637,54306,781],{"class":642},[637,54308,53827],{"class":646},[637,54310,25106],{"class":650},[637,54312,657],{"class":642},[637,54314,660],{"class":642},[637,54316,54148],{"class":663},[637,54318,660],{"class":642},[637,54320,3651],{"class":642},[637,54322,54155],{"class":683},[637,54324,732],{"class":642},[637,54326,53827],{"class":646},[637,54328,669],{"class":642},[637,54330,54331,54333,54335],{"class":639,"line":745},[637,54332,905],{"class":642},[637,54334,45599],{"class":646},[637,54336,669],{"class":642},[637,54338,54339,54341,54343],{"class":639,"line":755},[637,54340,732],{"class":642},[637,54342,856],{"class":646},[637,54344,669],{"class":642},[4051,54346,54348],{"id":54347},"multiple-occluders","Multiple occluders",[626,54350,54352],{"className":628,"code":54351,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[618,54353,54354],{"__ignoreMap":576},[637,54355,54356,54358,54360,54362,54364,54366,54369,54371],{"class":639,"line":577},[637,54357,643],{"class":642},[637,54359,53856],{"class":646},[637,54361,54023],{"class":650},[637,54363,657],{"class":642},[637,54365,660],{"class":642},[637,54367,54368],{"class":663},"[mesh1, mesh2, mesh3, ...]",[637,54370,660],{"class":642},[637,54372,787],{"class":642},[614,54374,54375],{},"OR",[626,54377,54379],{"className":628,"code":54378,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"meshesArray\" />\n",[618,54380,54381],{"__ignoreMap":576},[637,54382,54383,54385,54387,54389,54391,54393,54396,54398],{"class":639,"line":577},[637,54384,643],{"class":642},[637,54386,53856],{"class":646},[637,54388,54023],{"class":650},[637,54390,657],{"class":642},[637,54392,660],{"class":642},[637,54394,54395],{"class":663},"meshesArray",[637,54397,660],{"class":642},[637,54399,787],{"class":642},[614,54401,54402,54403,54405,54406,54410,54411,54415],{},"In the demo below, a ",[618,54404,8248],{}," loop generates multiple spheres around the cube.\nAll resulting ",[1669,54407,54408],{},[618,54409,4292],{}," instances are collected into an array and passed to the ",[1669,54412,54413],{},[618,54414,54003],{}," prop, allowing each sphere to occlude the HTML content.",[614,54417,54418,54419,54424,54425,54428,54429,3063,54432,54435],{},"This demo also uses the ",[1669,54420,54421],{},[618,54422,54423],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1669,54426,54427],{},"reactive value"," to control element styles — for example, toggling between ",[1674,54430,54431],{},"light",[1674,54433,54434],{},"dark"," themes.",[2295,54437,54438],{},[54439,54440],"objects-html-occlude-complex-demo",{},[5307,54442,5309,54443,54445],{},[5311,54444,54043],{},[626,54446,54448],{"className":45597,"code":54447,"language":45599,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml\n    v-bind=\"htmlProps\"\n    :occlude=\"occluderRefs\"\n    :distance-factor=\"4\"\n    :z-index-range=\"[28, 0]\"\n    @on-occlude=\"(event: boolean) => isOccluded = event\"\n  >\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[618,54449,54450,54468,54476,54484,54491,54505,54519,54532,54545,54559,54563,54589,54597],{"__ignoreMap":576},[637,54451,54452,54454,54456,54458,54460,54462,54464,54466],{"class":639,"line":577},[637,54453,643],{"class":642},[637,54455,856],{"class":646},[637,54457,1485],{"class":650},[637,54459,657],{"class":642},[637,54461,660],{"class":642},[637,54463,25556],{"class":663},[637,54465,660],{"class":642},[637,54467,669],{"class":642},[637,54469,54470,54472,54474],{"class":639,"line":578},[637,54471,758],{"class":642},[637,54473,867],{"class":646},[637,54475,787],{"class":642},[637,54477,54478,54480,54482],{"class":639,"line":708},[637,54479,758],{"class":642},[637,54481,877],{"class":646},[637,54483,787],{"class":642},[637,54485,54486,54488],{"class":639,"line":729},[637,54487,758],{"class":642},[637,54489,54490],{"class":646},"html\n",[637,54492,54493,54496,54498,54500,54503],{"class":639,"line":739},[637,54494,54495],{"class":650},"    v-bind",[637,54497,657],{"class":642},[637,54499,660],{"class":642},[637,54501,54502],{"class":663},"htmlProps",[637,54504,3131],{"class":642},[637,54506,54507,54510,54512,54514,54517],{"class":639,"line":745},[637,54508,54509],{"class":650},"    :occlude",[637,54511,657],{"class":642},[637,54513,660],{"class":642},[637,54515,54516],{"class":663},"occluderRefs",[637,54518,3131],{"class":642},[637,54520,54521,54524,54526,54528,54530],{"class":639,"line":755},[637,54522,54523],{"class":650},"    :distance-factor",[637,54525,657],{"class":642},[637,54527,660],{"class":642},[637,54529,9653],{"class":663},[637,54531,3131],{"class":642},[637,54533,54534,54537,54539,54541,54543],{"class":639,"line":778},[637,54535,54536],{"class":650},"    :z-index-range",[637,54538,657],{"class":642},[637,54540,660],{"class":642},[637,54542,54129],{"class":663},[637,54544,3131],{"class":642},[637,54546,54547,54550,54552,54554,54557],{"class":639,"line":790},[637,54548,54549],{"class":650},"    @on-occlude",[637,54551,657],{"class":642},[637,54553,660],{"class":642},[637,54555,54556],{"class":663},"(event: boolean) => isOccluded = event",[637,54558,3131],{"class":642},[637,54560,54561],{"class":639,"line":800},[637,54562,5173],{"class":642},[637,54564,54565,54567,54569,54571,54573,54575,54577,54579,54581,54583,54585,54587],{"class":639,"line":805},[637,54566,781],{"class":642},[637,54568,53827],{"class":646},[637,54570,25106],{"class":650},[637,54572,657],{"class":642},[637,54574,660],{"class":642},[637,54576,54148],{"class":663},[637,54578,660],{"class":642},[637,54580,3651],{"class":642},[637,54582,54155],{"class":683},[637,54584,732],{"class":642},[637,54586,53827],{"class":646},[637,54588,669],{"class":642},[637,54590,54591,54593,54595],{"class":639,"line":827},[637,54592,905],{"class":642},[637,54594,45599],{"class":646},[637,54596,669],{"class":642},[637,54598,54599,54601,54603],{"class":639,"line":631},[637,54600,732],{"class":642},[637,54602,856],{"class":646},[637,54604,669],{"class":642},[4051,54606,54608],{"id":54607},"blending-occlusion","Blending Occlusion",[614,54610,54611,54613],{},[618,54612,53577],{}," can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using \"blending\" as the occlude prop.",[626,54615,54617],{"className":628,"code":54616,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"blending\">\n",[618,54618,54619],{"__ignoreMap":576},[637,54620,54621,54623,54625,54627,54629,54631,54633,54635],{"class":639,"line":577},[637,54622,643],{"class":642},[637,54624,53856],{"class":646},[637,54626,54023],{"class":650},[637,54628,657],{"class":642},[637,54630,660],{"class":642},[637,54632,49755],{"class":663},[637,54634,660],{"class":642},[637,54636,669],{"class":642},[614,54638,2776,54639,3194,54642,54645,54646,1146],{},[1669,54640,54641],{},"demo below ⬇️",[1674,54643,54644],{},"(left black example)"," shows a ",[1669,54647,54648],{},"basic usage example",[2295,54650,54651],{},[54652,54653],"objects-html-occlude-blending-demo",{},[5307,54655,5309,54656,54658],{},[5311,54657,54043],{},[626,54659,54697],{"className":628,"code":54660,"highlights":54661,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\nimport { CircleGeometry, MeshStandardMaterial } from 'three'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 1,\n  shadows: true,\n  alpha: true,\n}\n\nconst targetDirectionLightRef = shallowRef(null)\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n    bind: { castShadow: true, receiveShadow: true },\n  },\n]\n\nconst customGeometry = shallowRef(new CircleGeometry(1.25, 32))\n\nconst customMaterial = shallowRef(new MeshStandardMaterial({\n  color: 'red',\n  side: 2,\n  opacity: 1,\n  transparent: true,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n    \u003CTresCanvas v-bind=\"gl\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n      \u003COrbitControls />\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.35, 0.35]\"\n      >\n        \u003CTresMesh :position=\"[index * 3.5 - 3.5, 1, 0]\" v-bind=\"geometry.bind\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n          \u003CTresMeshNormalMaterial />\n        \u003C/TresMesh>\n      \u003C/Levioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[-4, .75, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-s p-2 bg-[#1B1C1E] text-light\">\n          BASIC 💛 \u003Cbr />\n          \u003Cem>occlude=blending\u003C/em>\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .85, -2]\"\n        :geometry=\"customGeometry\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-xs p-8 text-center bg-[#F6B03B] text-dark\">\n          CUSTOM \u003Cbr /> \u003Cstrong>CIRCLE \u003Cbr /> GEOMETRY\u003C/strong>\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        ref=\"targetDirectionLightRef\"\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, .5, -2]\"\n        :material=\"customMaterial\"\n        receive-shadow\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv style=\"width: 100px; height: auto; aspect-ratio: 250/250;\">\u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, 2.5, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-xs p-2 text-dark bg-[#FF0000]\">\n          \u003Cstrong>HTML + Custom material \u003C/strong> \u003Cbr />\n          \u003Cem>+ receive-shadow \u003C/em> ⬇️\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CTresDirectionalLight\n        v-if=\"targetDirectionLightRef?.instance\"\n        :target=\"targetDirectionLightRef?.instance\"\n        :shadow-normalBias=\"0.075\"\n        :position=\"[5, 0, 5]\"\n        :intensity=\"2\"\n        cast-shadow\n      />\n\n      \u003CTresGridHelper :position-y=\"-1\" />\n      \u003CTresAmbientLight :intensity=\"1\" />\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\u003C/style>\n\n",[578,3953,3993,4025,4034,4043,21441,21456,21730,21739,21758,21801,21843,21863,21892,21901,21910,54662,54663,21739,21758,21801,21843,21863,21892,21901,21910,54662,54663,54664,54665,54666,54667,54668,54669,54670,54671,54672,54673,54674,54675,54676,54677,54678,54679,54680,54681,54682,54683,54684,54685,54686,54687,54688,54689,54690,54691,54692,54693,54694,54695,54696],71,72,74,75,76,77,78,79,80,81,82,83,84,86,87,88,89,90,91,92,93,94,95,96,98,99,100,101,102,103,104,105,106,107,108,[618,54698,54699,54719,54746,54764,54782,54805,54809,54820,54835,54846,54857,54868,54872,54876,54893,54897,54908,54912,54927,54950,54954,54958,54972,54994,54998,55002,55016,55042,55069,55073,55077,55081,55110,55114,55136,55151,55163,55174,55186,55193,55201,55205,55213,55232,55251,55270,55278,55282,55289,55302,55315,55327,55341,55354,55368,55372,55402,55434,55442,55450,55458,55462,55469,55474,55479,55493,55507,55521,55526,55546,55558,55576,55585,55594,55599,55606,55611,55616,55629,55643,55658,55671,55676,55696,55734,55743,55752,55757,55764,55778,55783,55788,55801,55815,55830,55836,55849,55854,55878,55887,55892,55899,55904,55909,55922,55936,55949,55954,55974,55998,56019,56028,56037,56042,56049,56064,56078,56093,56107,56120,56126,56131,56136,56155,56174,56183,56192,56201,56206,56217,56227,56239,56250,56261,56274,56288,56293],{"__ignoreMap":576},[637,54700,54701,54703,54705,54707,54709,54711,54713,54715,54717],{"class":639,"line":577},[637,54702,643],{"class":642},[637,54704,647],{"class":646},[637,54706,651],{"class":650},[637,54708,654],{"class":650},[637,54710,657],{"class":642},[637,54712,660],{"class":642},[637,54714,664],{"class":663},[637,54716,660],{"class":642},[637,54718,669],{"class":642},[637,54720,54722,54724,54726,54728,54730,54732,54734,54736,54738,54740,54742,54744],{"class":54721,"line":578},[639,673],[637,54723,677],{"class":676},[637,54725,680],{"class":642},[637,54727,53621],{"class":683},[637,54729,687],{"class":642},[637,54731,9532],{"class":683},[637,54733,687],{"class":642},[637,54735,690],{"class":683},[637,54737,693],{"class":642},[637,54739,696],{"class":676},[637,54741,699],{"class":642},[637,54743,702],{"class":663},[637,54745,705],{"class":642},[637,54747,54748,54750,54752,54754,54756,54758,54760,54762],{"class":639,"line":708},[637,54749,677],{"class":676},[637,54751,680],{"class":642},[637,54753,715],{"class":683},[637,54755,693],{"class":642},[637,54757,696],{"class":676},[637,54759,699],{"class":642},[637,54761,724],{"class":663},[637,54763,705],{"class":642},[637,54765,54766,54768,54770,54772,54774,54776,54778,54780],{"class":639,"line":729},[637,54767,677],{"class":676},[637,54769,680],{"class":642},[637,54771,3498],{"class":683},[637,54773,693],{"class":642},[637,54775,696],{"class":676},[637,54777,699],{"class":642},[637,54779,633],{"class":663},[637,54781,705],{"class":642},[637,54783,54784,54786,54788,54791,54793,54795,54797,54799,54801,54803],{"class":639,"line":739},[637,54785,677],{"class":676},[637,54787,680],{"class":642},[637,54789,54790],{"class":683}," CircleGeometry",[637,54792,687],{"class":642},[637,54794,8354],{"class":683},[637,54796,693],{"class":642},[637,54798,696],{"class":676},[637,54800,699],{"class":642},[637,54802,4626],{"class":663},[637,54804,705],{"class":642},[637,54806,54807],{"class":639,"line":745},[637,54808,742],{"emptyLinePlaceholder":594},[637,54810,54811,54813,54816,54818],{"class":639,"line":755},[637,54812,2415],{"class":650},[637,54814,54815],{"class":683}," gl ",[637,54817,657],{"class":642},[637,54819,1204],{"class":642},[637,54821,54822,54825,54827,54829,54831,54833],{"class":639,"line":778},[637,54823,54824],{"class":646},"  clearColor",[637,54826,1218],{"class":642},[637,54828,699],{"class":642},[637,54830,11791],{"class":663},[637,54832,2440],{"class":642},[637,54834,2488],{"class":642},[637,54836,54837,54840,54842,54844],{"class":639,"line":790},[637,54838,54839],{"class":646},"  clearAlpha",[637,54841,1218],{"class":642},[637,54843,2561],{"class":2501},[637,54845,2488],{"class":642},[637,54847,54848,54851,54853,54855],{"class":639,"line":800},[637,54849,54850],{"class":646},"  shadows",[637,54852,1218],{"class":642},[637,54854,4398],{"class":4397},[637,54856,2488],{"class":642},[637,54858,54859,54862,54864,54866],{"class":639,"line":805},[637,54860,54861],{"class":646},"  alpha",[637,54863,1218],{"class":642},[637,54865,4398],{"class":4397},[637,54867,2488],{"class":642},[637,54869,54870],{"class":639,"line":827},[637,54871,1325],{"class":642},[637,54873,54874],{"class":639,"line":631},[637,54875,742],{"emptyLinePlaceholder":594},[637,54877,54878,54880,54883,54885,54887,54889,54891],{"class":639,"line":850},[637,54879,2415],{"class":650},[637,54881,54882],{"class":683}," targetDirectionLightRef ",[637,54884,657],{"class":642},[637,54886,3498],{"class":2434},[637,54888,2437],{"class":683},[637,54890,3656],{"class":642},[637,54892,2448],{"class":683},[637,54894,54895],{"class":639,"line":861},[637,54896,742],{"emptyLinePlaceholder":594},[637,54898,54899,54901,54904,54906],{"class":639,"line":872},[637,54900,2415],{"class":650},[637,54902,54903],{"class":683}," geometries ",[637,54905,657],{"class":642},[637,54907,20702],{"class":683},[637,54909,54910],{"class":639,"line":882},[637,54911,2471],{"class":642},[637,54913,54914,54917,54919,54921,54923,54925],{"class":639,"line":632},[637,54915,54916],{"class":646},"    component",[637,54918,1218],{"class":642},[637,54920,699],{"class":642},[637,54922,867],{"class":663},[637,54924,2440],{"class":642},[637,54926,2488],{"class":642},[637,54928,54929,54932,54934,54936,54938,54940,54942,54944,54946,54948],{"class":639,"line":902},[637,54930,54931],{"class":646},"    args",[637,54933,1218],{"class":642},[637,54935,2498],{"class":683},[637,54937,1874],{"class":2501},[637,54939,687],{"class":642},[637,54941,2561],{"class":2501},[637,54943,687],{"class":642},[637,54945,2561],{"class":2501},[637,54947,2514],{"class":683},[637,54949,2488],{"class":642},[637,54951,54952],{"class":639,"line":912},[637,54953,2597],{"class":642},[637,54955,54956],{"class":639,"line":2625},[637,54957,2471],{"class":642},[637,54959,54960,54962,54964,54966,54968,54970],{"class":639,"line":2634},[637,54961,54916],{"class":646},[637,54963,1218],{"class":642},[637,54965,699],{"class":642},[637,54967,3958],{"class":663},[637,54969,2440],{"class":642},[637,54971,2488],{"class":642},[637,54973,54974,54976,54978,54980,54982,54984,54986,54988,54990,54992],{"class":639,"line":2654},[637,54975,54931],{"class":646},[637,54977,1218],{"class":642},[637,54979,2498],{"class":683},[637,54981,47610],{"class":2501},[637,54983,687],{"class":642},[637,54985,31049],{"class":2501},[637,54987,687],{"class":642},[637,54989,31049],{"class":2501},[637,54991,2514],{"class":683},[637,54993,2488],{"class":642},[637,54995,54996],{"class":639,"line":2663},[637,54997,2597],{"class":642},[637,54999,55000],{"class":639,"line":2672},[637,55001,2471],{"class":642},[637,55003,55004,55006,55008,55010,55012,55014],{"class":639,"line":2681},[637,55005,54916],{"class":646},[637,55007,1218],{"class":642},[637,55009,699],{"class":642},[637,55011,11863],{"class":663},[637,55013,2440],{"class":642},[637,55015,2488],{"class":642},[637,55017,55018,55020,55022,55024,55026,55028,55030,55032,55034,55036,55038,55040],{"class":639,"line":2703},[637,55019,54931],{"class":646},[637,55021,1218],{"class":642},[637,55023,2498],{"class":683},[637,55025,1946],{"class":2501},[637,55027,687],{"class":642},[637,55029,34543],{"class":2501},[637,55031,687],{"class":642},[637,55033,34548],{"class":2501},[637,55035,687],{"class":642},[637,55037,7763],{"class":2501},[637,55039,2514],{"class":683},[637,55041,2488],{"class":642},[637,55043,55044,55047,55049,55051,55054,55056,55058,55060,55063,55065,55067],{"class":639,"line":2747},[637,55045,55046],{"class":646},"    bind",[637,55048,1218],{"class":642},[637,55050,680],{"class":642},[637,55052,55053],{"class":646}," castShadow",[637,55055,1218],{"class":642},[637,55057,4398],{"class":4397},[637,55059,687],{"class":642},[637,55061,55062],{"class":646}," receiveShadow",[637,55064,1218],{"class":642},[637,55066,4398],{"class":4397},[637,55068,7089],{"class":642},[637,55070,55071],{"class":639,"line":2756},[637,55072,2597],{"class":642},[637,55074,55075],{"class":639,"line":2765},[637,55076,20738],{"class":683},[637,55078,55079],{"class":639,"line":3922},[637,55080,742],{"emptyLinePlaceholder":594},[637,55082,55084,55086,55089,55091,55093,55095,55097,55099,55101,55104,55106,55108],{"class":55083,"line":3953},[639,673],[637,55085,2415],{"class":650},[637,55087,55088],{"class":683}," customGeometry ",[637,55090,657],{"class":642},[637,55092,3498],{"class":2434},[637,55094,2437],{"class":683},[637,55096,36090],{"class":642},[637,55098,54790],{"class":2434},[637,55100,2437],{"class":683},[637,55102,55103],{"class":2501},"1.25",[637,55105,687],{"class":642},[637,55107,31049],{"class":2501},[637,55109,7189],{"class":683},[637,55111,55112],{"class":639,"line":3974},[637,55113,742],{"emptyLinePlaceholder":594},[637,55115,55117,55119,55122,55124,55126,55128,55130,55132,55134],{"class":55116,"line":3993},[639,673],[637,55118,2415],{"class":650},[637,55120,55121],{"class":683}," customMaterial ",[637,55123,657],{"class":642},[637,55125,3498],{"class":2434},[637,55127,2437],{"class":683},[637,55129,36090],{"class":642},[637,55131,8354],{"class":2434},[637,55133,2437],{"class":683},[637,55135,3260],{"class":642},[637,55137,55139,55141,55143,55145,55147,55149],{"class":55138,"line":4025},[639,673],[637,55140,5473],{"class":646},[637,55142,1218],{"class":642},[637,55144,699],{"class":642},[637,55146,36833],{"class":663},[637,55148,2440],{"class":642},[637,55150,2488],{"class":642},[637,55152,55154,55157,55159,55161],{"class":55153,"line":4034},[639,673],[637,55155,55156],{"class":646},"  side",[637,55158,1218],{"class":642},[637,55160,31817],{"class":2501},[637,55162,2488],{"class":642},[637,55164,55166,55168,55170,55172],{"class":55165,"line":4043},[639,673],[637,55167,5485],{"class":646},[637,55169,1218],{"class":642},[637,55171,2561],{"class":2501},[637,55173,2488],{"class":642},[637,55175,55177,55180,55182,55184],{"class":55176,"line":21441},[639,673],[637,55178,55179],{"class":646},"  transparent",[637,55181,1218],{"class":642},[637,55183,4398],{"class":4397},[637,55185,2488],{"class":642},[637,55187,55189,55191],{"class":55188,"line":21456},[639,673],[637,55190,2428],{"class":642},[637,55192,7189],{"class":683},[637,55194,55195,55197,55199],{"class":639,"line":21471},[637,55196,732],{"class":642},[637,55198,647],{"class":646},[637,55200,669],{"class":642},[637,55202,55203],{"class":639,"line":21476},[637,55204,742],{"emptyLinePlaceholder":594},[637,55206,55207,55209,55211],{"class":639,"line":21483},[637,55208,643],{"class":642},[637,55210,750],{"class":646},[637,55212,669],{"class":642},[637,55214,55215,55217,55219,55221,55223,55225,55228,55230],{"class":639,"line":21488},[637,55216,758],{"class":642},[637,55218,4119],{"class":646},[637,55220,25106],{"class":650},[637,55222,657],{"class":642},[637,55224,660],{"class":642},[637,55226,55227],{"class":663},"html-demo-wrapper aspect-video",[637,55229,660],{"class":642},[637,55231,669],{"class":642},[637,55233,55234,55236,55238,55240,55242,55244,55247,55249],{"class":639,"line":21494},[637,55235,781],{"class":642},[637,55237,761],{"class":646},[637,55239,10215],{"class":650},[637,55241,657],{"class":642},[637,55243,660],{"class":642},[637,55245,55246],{"class":663},"gl",[637,55248,660],{"class":642},[637,55250,669],{"class":642},[637,55252,55253,55255,55257,55259,55261,55263,55266,55268],{"class":639,"line":21515},[637,55254,853],{"class":642},[637,55256,784],{"class":646},[637,55258,1485],{"class":650},[637,55260,657],{"class":642},[637,55262,660],{"class":642},[637,55264,55265],{"class":663},"[0, 1.5, 7.5]",[637,55267,660],{"class":642},[637,55269,787],{"class":642},[637,55271,55272,55274,55276],{"class":639,"line":21521},[637,55273,853],{"class":642},[637,55275,795],{"class":646},[637,55277,787],{"class":642},[637,55279,55280],{"class":639,"line":21528},[637,55281,742],{"emptyLinePlaceholder":594},[637,55283,55284,55286],{"class":639,"line":21533},[637,55285,853],{"class":642},[637,55287,55288],{"class":646},"Levioso\n",[637,55290,55291,55293,55295,55297,55300],{"class":639,"line":21554},[637,55292,7977],{"class":650},[637,55294,657],{"class":642},[637,55296,660],{"class":642},[637,55298,55299],{"class":663},"(geometry, index) in geometries",[637,55301,3131],{"class":642},[637,55303,55304,55306,55308,55310,55313],{"class":639,"line":21567},[637,55305,7991],{"class":650},[637,55307,657],{"class":642},[637,55309,660],{"class":642},[637,55311,55312],{"class":663},"`html-occlude-blending-demo-${index}`",[637,55314,3131],{"class":642},[637,55316,55317,55319,55321,55323,55325],{"class":639,"line":21593},[637,55318,30162],{"class":650},[637,55320,657],{"class":642},[637,55322,660],{"class":642},[637,55324,21394],{"class":663},[637,55326,3131],{"class":642},[637,55328,55329,55332,55334,55336,55339],{"class":639,"line":21598},[637,55330,55331],{"class":650},"        :float-factor",[637,55333,657],{"class":642},[637,55335,660],{"class":642},[637,55337,55338],{"class":663},"3.5",[637,55340,3131],{"class":642},[637,55342,55343,55346,55348,55350,55352],{"class":639,"line":21605},[637,55344,55345],{"class":650},"        :rotation-factor",[637,55347,657],{"class":642},[637,55349,660],{"class":642},[637,55351,1874],{"class":663},[637,55353,3131],{"class":642},[637,55355,55356,55359,55361,55363,55366],{"class":639,"line":21614},[637,55357,55358],{"class":650},"        :range",[637,55360,657],{"class":642},[637,55362,660],{"class":642},[637,55364,55365],{"class":663},"[-0.35, 0.35]",[637,55367,3131],{"class":642},[637,55369,55370],{"class":639,"line":21619},[637,55371,53820],{"class":642},[637,55373,55374,55376,55378,55380,55382,55384,55387,55389,55391,55393,55395,55398,55400],{"class":639,"line":21628},[637,55375,864],{"class":642},[637,55377,856],{"class":646},[637,55379,1485],{"class":650},[637,55381,657],{"class":642},[637,55383,660],{"class":642},[637,55385,55386],{"class":663},"[index * 3.5 - 3.5, 1, 0]",[637,55388,660],{"class":642},[637,55390,10215],{"class":650},[637,55392,657],{"class":642},[637,55394,660],{"class":642},[637,55396,55397],{"class":663},"geometry.bind",[637,55399,660],{"class":642},[637,55401,669],{"class":642},[637,55403,55404,55406,55409,55412,55414,55416,55419,55421,55423,55425,55427,55430,55432],{"class":639,"line":21647},[637,55405,27852],{"class":642},[637,55407,55408],{"class":646},"component",[637,55410,55411],{"class":650}," :is",[637,55413,657],{"class":642},[637,55415,660],{"class":642},[637,55417,55418],{"class":663},"geometry.component",[637,55420,660],{"class":642},[637,55422,1959],{"class":650},[637,55424,657],{"class":642},[637,55426,660],{"class":642},[637,55428,55429],{"class":663},"geometry.args",[637,55431,660],{"class":642},[637,55433,787],{"class":642},[637,55435,55436,55438,55440],{"class":639,"line":21657},[637,55437,27852],{"class":642},[637,55439,877],{"class":646},[637,55441,787],{"class":642},[637,55443,55444,55446,55448],{"class":639,"line":21692},[637,55445,27891],{"class":642},[637,55447,856],{"class":646},[637,55449,669],{"class":642},[637,55451,55452,55454,55456],{"class":639,"line":21701},[637,55453,885],{"class":642},[637,55455,9643],{"class":646},[637,55457,669],{"class":642},[637,55459,55460],{"class":639,"line":21721},[637,55461,742],{"emptyLinePlaceholder":594},[637,55463,55465,55467],{"class":55464,"line":21730},[639,673],[637,55466,853],{"class":642},[637,55468,53760],{"class":646},[637,55470,55472],{"class":55471,"line":21739},[639,673],[637,55473,53766],{"class":650},[637,55475,55477],{"class":55476,"line":21758},[639,673],[637,55478,53772],{"class":650},[637,55480,55482,55485,55487,55489,55491],{"class":55481,"line":21801},[639,673],[637,55483,55484],{"class":650},"        occlude",[637,55486,657],{"class":642},[637,55488,660],{"class":642},[637,55490,49755],{"class":663},[637,55492,3131],{"class":642},[637,55494,55496,55498,55500,55502,55505],{"class":55495,"line":21843},[639,673],[637,55497,8005],{"class":650},[637,55499,657],{"class":642},[637,55501,660],{"class":642},[637,55503,55504],{"class":663},"[-4, .75, -2]",[637,55506,3131],{"class":642},[637,55508,55510,55513,55515,55517,55519],{"class":55509,"line":21863},[639,673],[637,55511,55512],{"class":650},"        :z-index-range",[637,55514,657],{"class":642},[637,55516,660],{"class":642},[637,55518,54129],{"class":663},[637,55520,3131],{"class":642},[637,55522,55524],{"class":55523,"line":21892},[639,673],[637,55525,53820],{"class":642},[637,55527,55529,55531,55533,55535,55537,55539,55542,55544],{"class":55528,"line":21901},[639,673],[637,55530,864],{"class":642},[637,55532,4119],{"class":646},[637,55534,25106],{"class":650},[637,55536,657],{"class":642},[637,55538,660],{"class":642},[637,55540,55541],{"class":663},"text-center text-s p-2 bg-[#1B1C1E] text-light",[637,55543,660],{"class":642},[637,55545,669],{"class":642},[637,55547,55549,55552,55554,55556],{"class":55548,"line":21910},[639,673],[637,55550,55551],{"class":683},"          BASIC 💛 ",[637,55553,643],{"class":642},[637,55555,7555],{"class":646},[637,55557,787],{"class":642},[637,55559,55561,55563,55565,55567,55570,55572,55574],{"class":55560,"line":54662},[639,673],[637,55562,27852],{"class":642},[637,55564,1674],{"class":646},[637,55566,3651],{"class":642},[637,55568,55569],{"class":683},"occlude=blending",[637,55571,732],{"class":642},[637,55573,1674],{"class":646},[637,55575,669],{"class":642},[637,55577,55579,55581,55583],{"class":55578,"line":54663},[639,673],[637,55580,27891],{"class":642},[637,55582,4119],{"class":646},[637,55584,669],{"class":642},[637,55586,55588,55590,55592],{"class":639,"line":55587},73,[637,55589,885],{"class":642},[637,55591,53856],{"class":646},[637,55593,669],{"class":642},[637,55595,55597],{"class":55596,"line":54664},[639,673],[637,55598,742],{"emptyLinePlaceholder":594},[637,55600,55602,55604],{"class":55601,"line":54665},[639,673],[637,55603,853],{"class":642},[637,55605,53760],{"class":646},[637,55607,55609],{"class":55608,"line":54666},[639,673],[637,55610,53766],{"class":650},[637,55612,55614],{"class":55613,"line":54667},[639,673],[637,55615,53772],{"class":650},[637,55617,55619,55621,55623,55625,55627],{"class":55618,"line":54668},[639,673],[637,55620,55484],{"class":650},[637,55622,657],{"class":642},[637,55624,660],{"class":642},[637,55626,49755],{"class":663},[637,55628,3131],{"class":642},[637,55630,55632,55634,55636,55638,55641],{"class":55631,"line":54669},[639,673],[637,55633,8005],{"class":650},[637,55635,657],{"class":642},[637,55637,660],{"class":642},[637,55639,55640],{"class":663},"[0, .85, -2]",[637,55642,3131],{"class":642},[637,55644,55646,55649,55651,55653,55656],{"class":55645,"line":54670},[639,673],[637,55647,55648],{"class":650},"        :geometry",[637,55650,657],{"class":642},[637,55652,660],{"class":642},[637,55654,55655],{"class":663},"customGeometry",[637,55657,3131],{"class":642},[637,55659,55661,55663,55665,55667,55669],{"class":55660,"line":54671},[639,673],[637,55662,55512],{"class":650},[637,55664,657],{"class":642},[637,55666,660],{"class":642},[637,55668,54129],{"class":663},[637,55670,3131],{"class":642},[637,55672,55674],{"class":55673,"line":54672},[639,673],[637,55675,53820],{"class":642},[637,55677,55679,55681,55683,55685,55687,55689,55692,55694],{"class":55678,"line":54673},[639,673],[637,55680,864],{"class":642},[637,55682,4119],{"class":646},[637,55684,25106],{"class":650},[637,55686,657],{"class":642},[637,55688,660],{"class":642},[637,55690,55691],{"class":663},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[637,55693,660],{"class":642},[637,55695,669],{"class":642},[637,55697,55699,55702,55704,55706,55709,55712,55714,55716,55719,55721,55723,55725,55728,55730,55732],{"class":55698,"line":54674},[639,673],[637,55700,55701],{"class":683},"          CUSTOM ",[637,55703,643],{"class":642},[637,55705,7555],{"class":646},[637,55707,55708],{"class":642}," />",[637,55710,55711],{"class":642}," \u003C",[637,55713,1669],{"class":646},[637,55715,3651],{"class":642},[637,55717,55718],{"class":683},"CIRCLE ",[637,55720,643],{"class":642},[637,55722,7555],{"class":646},[637,55724,55708],{"class":642},[637,55726,55727],{"class":683}," GEOMETRY",[637,55729,732],{"class":642},[637,55731,1669],{"class":646},[637,55733,669],{"class":642},[637,55735,55737,55739,55741],{"class":639,"line":55736},85,[637,55738,27891],{"class":642},[637,55740,4119],{"class":646},[637,55742,669],{"class":642},[637,55744,55746,55748,55750],{"class":55745,"line":54675},[639,673],[637,55747,885],{"class":642},[637,55749,53856],{"class":646},[637,55751,669],{"class":642},[637,55753,55755],{"class":55754,"line":54676},[639,673],[637,55756,742],{"emptyLinePlaceholder":594},[637,55758,55760,55762],{"class":55759,"line":54677},[639,673],[637,55761,853],{"class":642},[637,55763,53760],{"class":646},[637,55765,55767,55769,55771,55773,55776],{"class":55766,"line":54678},[639,673],[637,55768,26160],{"class":650},[637,55770,657],{"class":642},[637,55772,660],{"class":642},[637,55774,55775],{"class":663},"targetDirectionLightRef",[637,55777,3131],{"class":642},[637,55779,55781],{"class":55780,"line":54679},[639,673],[637,55782,53766],{"class":650},[637,55784,55786],{"class":55785,"line":54680},[639,673],[637,55787,53772],{"class":650},[637,55789,55791,55793,55795,55797,55799],{"class":55790,"line":54681},[639,673],[637,55792,55484],{"class":650},[637,55794,657],{"class":642},[637,55796,660],{"class":642},[637,55798,49755],{"class":663},[637,55800,3131],{"class":642},[637,55802,55804,55806,55808,55810,55813],{"class":55803,"line":54682},[639,673],[637,55805,8005],{"class":650},[637,55807,657],{"class":642},[637,55809,660],{"class":642},[637,55811,55812],{"class":663},"[4, .5, -2]",[637,55814,3131],{"class":642},[637,55816,55818,55821,55823,55825,55828],{"class":55817,"line":54683},[639,673],[637,55819,55820],{"class":650},"        :material",[637,55822,657],{"class":642},[637,55824,660],{"class":642},[637,55826,55827],{"class":663},"customMaterial",[637,55829,3131],{"class":642},[637,55831,55833],{"class":55832,"line":54684},[639,673],[637,55834,55835],{"class":650},"        receive-shadow\n",[637,55837,55839,55841,55843,55845,55847],{"class":55838,"line":54685},[639,673],[637,55840,55512],{"class":650},[637,55842,657],{"class":642},[637,55844,660],{"class":642},[637,55846,54129],{"class":663},[637,55848,3131],{"class":642},[637,55850,55852],{"class":639,"line":55851},97,[637,55853,53820],{"class":642},[637,55855,55857,55859,55861,55863,55865,55867,55870,55872,55874,55876],{"class":55856,"line":54686},[639,673],[637,55858,864],{"class":642},[637,55860,4119],{"class":646},[637,55862,4122],{"class":650},[637,55864,657],{"class":642},[637,55866,660],{"class":642},[637,55868,55869],{"class":663},"width: 100px; height: auto; aspect-ratio: 250/250;",[637,55871,660],{"class":642},[637,55873,25142],{"class":642},[637,55875,4119],{"class":646},[637,55877,669],{"class":642},[637,55879,55881,55883,55885],{"class":55880,"line":54687},[639,673],[637,55882,885],{"class":642},[637,55884,53856],{"class":646},[637,55886,669],{"class":642},[637,55888,55890],{"class":55889,"line":54688},[639,673],[637,55891,742],{"emptyLinePlaceholder":594},[637,55893,55895,55897],{"class":55894,"line":54689},[639,673],[637,55896,853],{"class":642},[637,55898,53760],{"class":646},[637,55900,55902],{"class":55901,"line":54690},[639,673],[637,55903,53766],{"class":650},[637,55905,55907],{"class":55906,"line":54691},[639,673],[637,55908,53772],{"class":650},[637,55910,55912,55914,55916,55918,55920],{"class":55911,"line":54692},[639,673],[637,55913,55484],{"class":650},[637,55915,657],{"class":642},[637,55917,660],{"class":642},[637,55919,49755],{"class":663},[637,55921,3131],{"class":642},[637,55923,55925,55927,55929,55931,55934],{"class":55924,"line":54693},[639,673],[637,55926,8005],{"class":650},[637,55928,657],{"class":642},[637,55930,660],{"class":642},[637,55932,55933],{"class":663},"[4, 2.5, -2]",[637,55935,3131],{"class":642},[637,55937,55939,55941,55943,55945,55947],{"class":55938,"line":54694},[639,673],[637,55940,55512],{"class":650},[637,55942,657],{"class":642},[637,55944,660],{"class":642},[637,55946,54129],{"class":663},[637,55948,3131],{"class":642},[637,55950,55952],{"class":55951,"line":54695},[639,673],[637,55953,53820],{"class":642},[637,55955,55957,55959,55961,55963,55965,55967,55970,55972],{"class":55956,"line":54696},[639,673],[637,55958,864],{"class":642},[637,55960,4119],{"class":646},[637,55962,25106],{"class":650},[637,55964,657],{"class":642},[637,55966,660],{"class":642},[637,55968,55969],{"class":663},"text-center text-xs p-2 text-dark bg-[#FF0000]",[637,55971,660],{"class":642},[637,55973,669],{"class":642},[637,55975,55977,55979,55981,55983,55986,55988,55990,55992,55994,55996],{"class":639,"line":55976},109,[637,55978,27852],{"class":642},[637,55980,1669],{"class":646},[637,55982,3651],{"class":642},[637,55984,55985],{"class":683},"HTML + Custom material ",[637,55987,732],{"class":642},[637,55989,1669],{"class":646},[637,55991,3651],{"class":642},[637,55993,55711],{"class":642},[637,55995,7555],{"class":646},[637,55997,787],{"class":642},[637,55999,56001,56003,56005,56007,56010,56012,56014,56016],{"class":639,"line":56000},110,[637,56002,27852],{"class":642},[637,56004,1674],{"class":646},[637,56006,3651],{"class":642},[637,56008,56009],{"class":683},"+ receive-shadow ",[637,56011,732],{"class":642},[637,56013,1674],{"class":646},[637,56015,3651],{"class":642},[637,56017,56018],{"class":683}," ⬇️\n",[637,56020,56022,56024,56026],{"class":639,"line":56021},111,[637,56023,27891],{"class":642},[637,56025,4119],{"class":646},[637,56027,669],{"class":642},[637,56029,56031,56033,56035],{"class":639,"line":56030},112,[637,56032,885],{"class":642},[637,56034,53856],{"class":646},[637,56036,669],{"class":642},[637,56038,56040],{"class":639,"line":56039},113,[637,56041,742],{"emptyLinePlaceholder":594},[637,56043,56045,56047],{"class":639,"line":56044},114,[637,56046,853],{"class":642},[637,56048,17243],{"class":646},[637,56050,56052,56055,56057,56059,56062],{"class":639,"line":56051},115,[637,56053,56054],{"class":650},"        v-if",[637,56056,657],{"class":642},[637,56058,660],{"class":642},[637,56060,56061],{"class":663},"targetDirectionLightRef?.instance",[637,56063,3131],{"class":642},[637,56065,56067,56070,56072,56074,56076],{"class":639,"line":56066},116,[637,56068,56069],{"class":650},"        :target",[637,56071,657],{"class":642},[637,56073,660],{"class":642},[637,56075,56061],{"class":663},[637,56077,3131],{"class":642},[637,56079,56081,56084,56086,56088,56091],{"class":639,"line":56080},117,[637,56082,56083],{"class":650},"        :shadow-normalBias",[637,56085,657],{"class":642},[637,56087,660],{"class":642},[637,56089,56090],{"class":663},"0.075",[637,56092,3131],{"class":642},[637,56094,56096,56098,56100,56102,56105],{"class":639,"line":56095},118,[637,56097,8005],{"class":650},[637,56099,657],{"class":642},[637,56101,660],{"class":642},[637,56103,56104],{"class":663},"[5, 0, 5]",[637,56106,3131],{"class":642},[637,56108,56110,56112,56114,56116,56118],{"class":639,"line":56109},119,[637,56111,42737],{"class":650},[637,56113,657],{"class":642},[637,56115,660],{"class":642},[637,56117,820],{"class":663},[637,56119,3131],{"class":642},[637,56121,56123],{"class":639,"line":56122},120,[637,56124,56125],{"class":650},"        cast-shadow\n",[637,56127,56129],{"class":639,"line":56128},121,[637,56130,8033],{"class":642},[637,56132,56134],{"class":639,"line":56133},122,[637,56135,742],{"emptyLinePlaceholder":594},[637,56137,56139,56141,56143,56145,56147,56149,56151,56153],{"class":639,"line":56138},123,[637,56140,853],{"class":642},[637,56142,8049],{"class":646},[637,56144,1939],{"class":650},[637,56146,657],{"class":642},[637,56148,660],{"class":642},[637,56150,10194],{"class":663},[637,56152,660],{"class":642},[637,56154,787],{"class":642},[637,56156,56158,56160,56162,56164,56166,56168,56170,56172],{"class":639,"line":56157},124,[637,56159,853],{"class":642},[637,56161,9681],{"class":646},[637,56163,1867],{"class":650},[637,56165,657],{"class":642},[637,56167,660],{"class":642},[637,56169,1874],{"class":663},[637,56171,660],{"class":642},[637,56173,787],{"class":642},[637,56175,56177,56179,56181],{"class":639,"line":56176},125,[637,56178,895],{"class":642},[637,56180,761],{"class":646},[637,56182,669],{"class":642},[637,56184,56186,56188,56190],{"class":639,"line":56185},126,[637,56187,905],{"class":642},[637,56189,4119],{"class":646},[637,56191,669],{"class":642},[637,56193,56195,56197,56199],{"class":639,"line":56194},127,[637,56196,732],{"class":642},[637,56198,750],{"class":646},[637,56200,669],{"class":642},[637,56202,56204],{"class":639,"line":56203},128,[637,56205,742],{"emptyLinePlaceholder":594},[637,56207,56209,56211,56213,56215],{"class":639,"line":56208},129,[637,56210,643],{"class":642},[637,56212,1327],{"class":646},[637,56214,53907],{"class":650},[637,56216,669],{"class":642},[637,56218,56220,56222,56225],{"class":639,"line":56219},130,[637,56221,1146],{"class":642},[637,56223,56224],{"class":1200},"html-demo-wrapper",[637,56226,1204],{"class":642},[637,56228,56230,56232,56234,56237],{"class":639,"line":56229},131,[637,56231,1240],{"class":4129},[637,56233,1218],{"class":642},[637,56235,56236],{"class":2501}," 100%",[637,56238,9522],{"class":642},[637,56240,56242,56244,56246,56248],{"class":639,"line":56241},132,[637,56243,1250],{"class":4129},[637,56245,1218],{"class":642},[637,56247,56236],{"class":2501},[637,56249,9522],{"class":642},[637,56251,56253,56255,56257,56259],{"class":639,"line":56252},133,[637,56254,5345],{"class":4129},[637,56256,1218],{"class":642},[637,56258,4135],{"class":683},[637,56260,9522],{"class":642},[637,56262,56264,56267,56269,56272],{"class":639,"line":56263},134,[637,56265,56266],{"class":4129},"  overflow",[637,56268,1218],{"class":642},[637,56270,56271],{"class":683}," hidden",[637,56273,9522],{"class":642},[637,56275,56277,56279,56281,56283,56286],{"class":639,"line":56276},135,[637,56278,53922],{"class":4129},[637,56280,1218],{"class":642},[637,56282,53927],{"class":642},[637,56284,56285],{"class":683},"82dbc5",[637,56287,9522],{"class":642},[637,56289,56291],{"class":639,"line":56290},136,[637,56292,1325],{"class":642},[637,56294,56296,56298,56300],{"class":639,"line":56295},137,[637,56297,732],{"class":642},[637,56299,1327],{"class":646},[637,56301,669],{"class":642},[504,56303,45935],{"id":45934},[614,56305,56306,56307,56310,56311,56314,56315,56317,56318,56321,56322,56326],{},"By default, when using ",[618,56308,56309],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1669,56312,56313],{},"rectangular HTML elements"," (using a ",[618,56316,33621],{},").\nFor ",[1674,56319,56320],{},"non-rectangular content",", you can use the ",[1669,56323,56324],{},[618,56325,5256],{}," prop to provide a matching custom geometry.",[614,56328,56329,56330,3194,56333,56336,56337,56343,56344,1146],{},"In the ",[1669,56331,56332],{},"demo above ⬆️",[1674,56334,56335],{},"(middle yellow example)",", a ",[1140,56338,56341],{"href":56339,"rel":56340},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1144],[618,56342,31007],{}," is used as a ",[1669,56345,56346],{},"custom geometry",[56348,56349,56350],"prose-list",{},[2213,56351,56352,56361],{},[2216,56353,2776,56354,56356,56357,56360],{},[618,56355,5256],{}," prop only defines the ",[1669,56358,56359],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2216,56362,56363,56364,56371,56372,56375,56376,56379,56380,56387],{},"You can provide any ",[1140,56365,56368],{"href":56366,"rel":56367},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1144],[618,56369,56370],{},"BufferGeometry",", for example to simulate ",[1669,56373,56374],{},"CSS-like styles"," such as ",[618,56377,56378],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1140,56381,56384],{"href":56382,"rel":56383},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1144],[618,56385,56386],{},"RoundedRectangle / Squircle geometry"," for example).",[4051,56389,56390],{"id":2985},"Custom Material",[614,56392,56393,56394,56396,56397,3194,56399,56336,56402,56405],{},"You can also assign material properties to the HTML content using the ",[618,56395,5200],{}," prop.\nIn the ",[1669,56398,56332],{},[1674,56400,56401],{},"(right red example)",[1669,56403,56404],{},"custom material"," is used with shadow.",[2005,56407,56408],{},[614,56409,2776,56410,56412,56413,5883,56415,1146],{},[618,56411,5200],{}," prop is only available when ",[618,56414,56309],{},[1669,56416,16660],{},[2005,56418,56419],{},[614,56420,56421,56422,3063,56426,56430,56431,56434,56435,56437,56438,56440,56441,5611,56445,8166,56450],{},"Enable shadows using the ",[1669,56423,56424],{},[618,56425,18630],{},[1669,56427,56428],{},[618,56429,18648],{}," props.\nShadows are supported ",[1669,56432,56433],{},"only"," when using a ",[1669,56436,56404],{},". By default, shadows do ",[1669,56439,6341],{}," work with ",[1674,56442,56443],{},[618,56444,2991],{},[1674,56446,56447],{},[618,56448,56449],{},"ShaderMaterial",[7555,56451],{},[504,56453,56455,56456],{"id":56454},"using-transition","Using ",[618,56457,56458],{},"\u003CTransition>",[614,56460,56461,56462,56468,56469,56471,56472,56475,56476,3063,56479,56482],{},"The native Vue ",[1140,56463,56466],{"href":56464,"rel":56465},"https://vuejs.org/guide/built-ins/transition",[1144],[618,56467,56458],{}," component works seamlessly with ",[618,56470,53577],{},".\nThis means you can ",[1669,56473,56474],{},"animate"," how your projected HTML content ",[1674,56477,56478],{},"enters",[1674,56480,56481],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2005,56484,56485],{},[614,56486,29958,56487,56490,56491,1672,56494,1688,56496,56499],{},[1669,56488,56489],{},"standard interactions"," are supported just like on a regular HTML element — ",[1669,56492,56493],{},"hover effects",[1669,56495,14279],{},[1674,56497,56498],{},"any kind of DOM interaction"," are fully possible.",[608,56501,56502],{},[56503,56504],"objects-html-transition-demo",{},[5307,56506,5309,56507,56509],{},[5311,56508,54043],{},[626,56510,56513],{"className":628,"code":56511,"highlights":56512,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref } from 'vue'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 0,\n  shadows: true,\n  alpha: true,\n  antialias: true,\n}\n\nconst rootRef = ref\u003CHTMLElement>()\n\nconst bgColor = ref('#F6B03B')\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n  },\n  {\n    component: 'TresConeGeometry',\n    args: [0.7, 1.4, 32],\n  },\n]\n\nconst getRandomBackgroundColor = (): string => {\n  const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']\n  const idx = Math.floor(Math.random() * colors.length)\n  return colors[idx] ?? '#F6B03B'\n}\n\nconst updateBackgroundColor = () => {\n  bgColor.value = getRandomBackgroundColor()\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"rootRef\" class=\"html-demo-wrapper\">\n    \u003CTresCanvas v-bind=\"gl\" class=\"!pointer-events-none\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n      \u003COrbitControls :dom-element=\"rootRef\" />\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.4, 0.4]\"\n      >\n        \u003CTresMesh :position=\"[(index - (geometries.length - 1) / 2) * 2, 1, 0]\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n          \u003CTresMeshNormalMaterial />\n        \u003C/TresMesh>\n      \u003C/Levioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .75, -2]\"\n        :scale=\"1.15\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003CTransition name=\"transition-basic\">\n          \u003Ch1\n            v-if=\"showTransition\"\n            :style=\"{ backgroundColor: bgColor }\"\n            class=\"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg\"\n            @click=\"updateBackgroundColor\"\n          >\n            \u003Cstrong>TRANSITION + \u003C/strong>\u003Cbr />\n            \u003Cem>occlude=blending 💛\u003C/em>\n          \u003C/h1>\n        \u003C/Transition>\n      \u003C/Html>\n\n      \u003CTresGridHelper :position-y=\"-1.25\" />\n      \u003CTresAmbientLight :intensity=\"1\" />\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\n.html-demo-transition-heading:hover {\n  transform: scale(1.05);\n}\n\n.transition-basic-enter-from,\n.transition-basic-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n\n.transition-basic-enter-active,\n.transition-basic-leave-active {\n  transition: all 0.5s ease;\n}\n\n.transition-basic-enter-to,\n.transition-basic-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n\u003C/style>\n",[578,55587,54664,54665,54666,54667,54668,54669,54670,54671,54672,54673,54674,55736,54675,54676,54677,54678,54679,54680,54681],[618,56514,56515,56535,56562,56580,56598,56602,56612,56626,56636,56646,56656,56667,56671,56675,56695,56699,56721,56725,56735,56739,56753,56775,56779,56783,56797,56819,56823,56827,56841,56867,56871,56875,56890,56913,56917,56921,56925,56943,57016,57053,57074,57078,57082,57097,57113,57117,57125,57129,57137,57166,57195,57213,57232,57236,57242,57254,57266,57278,57290,57302,57315,57319,57338,57366,57374,57382,57390,57394,57400,57404,57408,57420,57433,57447,57460,57465,57485,57493,57508,57523,57538,57553,57559,57583,57601,57611,57620,57629,57634,57654,57673,57682,57691,57699,57703,57713,57721,57731,57741,57751,57761,57773,57777,57781,57794,57812,57816,57820,57829,57838,57848,57864,57868,57872,57881,57890,57908,57912,57916,57925,57934,57944,57958,57962],{"__ignoreMap":576},[637,56516,56517,56519,56521,56523,56525,56527,56529,56531,56533],{"class":639,"line":577},[637,56518,643],{"class":642},[637,56520,647],{"class":646},[637,56522,651],{"class":650},[637,56524,654],{"class":650},[637,56526,657],{"class":642},[637,56528,660],{"class":642},[637,56530,664],{"class":663},[637,56532,660],{"class":642},[637,56534,669],{"class":642},[637,56536,56538,56540,56542,56544,56546,56548,56550,56552,56554,56556,56558,56560],{"class":56537,"line":578},[639,673],[637,56539,677],{"class":676},[637,56541,680],{"class":642},[637,56543,53621],{"class":683},[637,56545,687],{"class":642},[637,56547,9532],{"class":683},[637,56549,687],{"class":642},[637,56551,690],{"class":683},[637,56553,693],{"class":642},[637,56555,696],{"class":676},[637,56557,699],{"class":642},[637,56559,702],{"class":663},[637,56561,705],{"class":642},[637,56563,56564,56566,56568,56570,56572,56574,56576,56578],{"class":639,"line":708},[637,56565,677],{"class":676},[637,56567,680],{"class":642},[637,56569,715],{"class":683},[637,56571,693],{"class":642},[637,56573,696],{"class":676},[637,56575,699],{"class":642},[637,56577,724],{"class":663},[637,56579,705],{"class":642},[637,56581,56582,56584,56586,56588,56590,56592,56594,56596],{"class":639,"line":729},[637,56583,677],{"class":676},[637,56585,680],{"class":642},[637,56587,3872],{"class":683},[637,56589,693],{"class":642},[637,56591,696],{"class":676},[637,56593,699],{"class":642},[637,56595,633],{"class":663},[637,56597,705],{"class":642},[637,56599,56600],{"class":639,"line":739},[637,56601,742],{"emptyLinePlaceholder":594},[637,56603,56604,56606,56608,56610],{"class":639,"line":745},[637,56605,2415],{"class":650},[637,56607,54815],{"class":683},[637,56609,657],{"class":642},[637,56611,1204],{"class":642},[637,56613,56614,56616,56618,56620,56622,56624],{"class":639,"line":755},[637,56615,54824],{"class":646},[637,56617,1218],{"class":642},[637,56619,699],{"class":642},[637,56621,11791],{"class":663},[637,56623,2440],{"class":642},[637,56625,2488],{"class":642},[637,56627,56628,56630,56632,56634],{"class":639,"line":778},[637,56629,54839],{"class":646},[637,56631,1218],{"class":642},[637,56633,2506],{"class":2501},[637,56635,2488],{"class":642},[637,56637,56638,56640,56642,56644],{"class":639,"line":790},[637,56639,54850],{"class":646},[637,56641,1218],{"class":642},[637,56643,4398],{"class":4397},[637,56645,2488],{"class":642},[637,56647,56648,56650,56652,56654],{"class":639,"line":800},[637,56649,54861],{"class":646},[637,56651,1218],{"class":642},[637,56653,4398],{"class":4397},[637,56655,2488],{"class":642},[637,56657,56658,56661,56663,56665],{"class":639,"line":805},[637,56659,56660],{"class":646},"  antialias",[637,56662,1218],{"class":642},[637,56664,4398],{"class":4397},[637,56666,2488],{"class":642},[637,56668,56669],{"class":639,"line":827},[637,56670,1325],{"class":642},[637,56672,56673],{"class":639,"line":631},[637,56674,742],{"emptyLinePlaceholder":594},[637,56676,56677,56679,56682,56684,56686,56688,56691,56693],{"class":639,"line":850},[637,56678,2415],{"class":650},[637,56680,56681],{"class":683}," rootRef ",[637,56683,657],{"class":642},[637,56685,3872],{"class":2434},[637,56687,643],{"class":642},[637,56689,56690],{"class":1200},"HTMLElement",[637,56692,3651],{"class":642},[637,56694,6535],{"class":683},[637,56696,56697],{"class":639,"line":861},[637,56698,742],{"emptyLinePlaceholder":594},[637,56700,56701,56703,56706,56708,56710,56712,56714,56717,56719],{"class":639,"line":872},[637,56702,2415],{"class":650},[637,56704,56705],{"class":683}," bgColor ",[637,56707,657],{"class":642},[637,56709,3872],{"class":2434},[637,56711,2437],{"class":683},[637,56713,2440],{"class":642},[637,56715,56716],{"class":663},"#F6B03B",[637,56718,2440],{"class":642},[637,56720,2448],{"class":683},[637,56722,56723],{"class":639,"line":882},[637,56724,742],{"emptyLinePlaceholder":594},[637,56726,56727,56729,56731,56733],{"class":639,"line":632},[637,56728,2415],{"class":650},[637,56730,54903],{"class":683},[637,56732,657],{"class":642},[637,56734,20702],{"class":683},[637,56736,56737],{"class":639,"line":902},[637,56738,2471],{"class":642},[637,56740,56741,56743,56745,56747,56749,56751],{"class":639,"line":912},[637,56742,54916],{"class":646},[637,56744,1218],{"class":642},[637,56746,699],{"class":642},[637,56748,867],{"class":663},[637,56750,2440],{"class":642},[637,56752,2488],{"class":642},[637,56754,56755,56757,56759,56761,56763,56765,56767,56769,56771,56773],{"class":639,"line":2625},[637,56756,54931],{"class":646},[637,56758,1218],{"class":642},[637,56760,2498],{"class":683},[637,56762,1874],{"class":2501},[637,56764,687],{"class":642},[637,56766,2561],{"class":2501},[637,56768,687],{"class":642},[637,56770,2561],{"class":2501},[637,56772,2514],{"class":683},[637,56774,2488],{"class":642},[637,56776,56777],{"class":639,"line":2634},[637,56778,2597],{"class":642},[637,56780,56781],{"class":639,"line":2654},[637,56782,2471],{"class":642},[637,56784,56785,56787,56789,56791,56793,56795],{"class":639,"line":2663},[637,56786,54916],{"class":646},[637,56788,1218],{"class":642},[637,56790,699],{"class":642},[637,56792,3958],{"class":663},[637,56794,2440],{"class":642},[637,56796,2488],{"class":642},[637,56798,56799,56801,56803,56805,56807,56809,56811,56813,56815,56817],{"class":639,"line":2672},[637,56800,54931],{"class":646},[637,56802,1218],{"class":642},[637,56804,2498],{"class":683},[637,56806,47610],{"class":2501},[637,56808,687],{"class":642},[637,56810,31049],{"class":2501},[637,56812,687],{"class":642},[637,56814,31049],{"class":2501},[637,56816,2514],{"class":683},[637,56818,2488],{"class":642},[637,56820,56821],{"class":639,"line":2681},[637,56822,2597],{"class":642},[637,56824,56825],{"class":639,"line":2703},[637,56826,2471],{"class":642},[637,56828,56829,56831,56833,56835,56837,56839],{"class":639,"line":2747},[637,56830,54916],{"class":646},[637,56832,1218],{"class":642},[637,56834,699],{"class":642},[637,56836,11863],{"class":663},[637,56838,2440],{"class":642},[637,56840,2488],{"class":642},[637,56842,56843,56845,56847,56849,56851,56853,56855,56857,56859,56861,56863,56865],{"class":639,"line":2756},[637,56844,54931],{"class":646},[637,56846,1218],{"class":642},[637,56848,2498],{"class":683},[637,56850,1946],{"class":2501},[637,56852,687],{"class":642},[637,56854,34543],{"class":2501},[637,56856,687],{"class":642},[637,56858,34548],{"class":2501},[637,56860,687],{"class":642},[637,56862,7763],{"class":2501},[637,56864,2514],{"class":683},[637,56866,2488],{"class":642},[637,56868,56869],{"class":639,"line":2765},[637,56870,2597],{"class":642},[637,56872,56873],{"class":639,"line":3922},[637,56874,2471],{"class":642},[637,56876,56877,56879,56881,56883,56886,56888],{"class":639,"line":3953},[637,56878,54916],{"class":646},[637,56880,1218],{"class":642},[637,56882,699],{"class":642},[637,56884,56885],{"class":663},"TresConeGeometry",[637,56887,2440],{"class":642},[637,56889,2488],{"class":642},[637,56891,56892,56894,56896,56898,56900,56902,56905,56907,56909,56911],{"class":639,"line":3974},[637,56893,54931],{"class":646},[637,56895,1218],{"class":642},[637,56897,2498],{"class":683},[637,56899,47610],{"class":2501},[637,56901,687],{"class":642},[637,56903,56904],{"class":2501}," 1.4",[637,56906,687],{"class":642},[637,56908,31049],{"class":2501},[637,56910,2514],{"class":683},[637,56912,2488],{"class":642},[637,56914,56915],{"class":639,"line":3993},[637,56916,2597],{"class":642},[637,56918,56919],{"class":639,"line":4025},[637,56920,20738],{"class":683},[637,56922,56923],{"class":639,"line":4034},[637,56924,742],{"emptyLinePlaceholder":594},[637,56926,56927,56929,56932,56934,56937,56939,56941],{"class":639,"line":4043},[637,56928,2415],{"class":650},[637,56930,56931],{"class":683}," getRandomBackgroundColor ",[637,56933,657],{"class":642},[637,56935,56936],{"class":642}," ():",[637,56938,5337],{"class":1200},[637,56940,3677],{"class":650},[637,56942,1204],{"class":642},[637,56944,56945,56948,56951,56953,56955,56957,56959,56961,56963,56965,56967,56969,56971,56973,56976,56978,56980,56982,56985,56987,56989,56991,56994,56996,56998,57000,57003,57005,57007,57009,57012,57014],{"class":639,"line":21441},[637,56946,56947],{"class":650},"  const",[637,56949,56950],{"class":683}," colors",[637,56952,2431],{"class":642},[637,56954,2498],{"class":646},[637,56956,2440],{"class":642},[637,56958,56716],{"class":663},[637,56960,2440],{"class":642},[637,56962,687],{"class":642},[637,56964,699],{"class":642},[637,56966,11791],{"class":663},[637,56968,2440],{"class":642},[637,56970,687],{"class":642},[637,56972,699],{"class":642},[637,56974,56975],{"class":663},"#FF5733",[637,56977,2440],{"class":642},[637,56979,687],{"class":642},[637,56981,699],{"class":642},[637,56983,56984],{"class":663},"#33FF57",[637,56986,2440],{"class":642},[637,56988,687],{"class":642},[637,56990,699],{"class":642},[637,56992,56993],{"class":663},"#3357FF",[637,56995,2440],{"class":642},[637,56997,687],{"class":642},[637,56999,699],{"class":642},[637,57001,57002],{"class":663},"#F333FF",[637,57004,2440],{"class":642},[637,57006,687],{"class":642},[637,57008,699],{"class":642},[637,57010,57011],{"class":663},"#33FFF5",[637,57013,2440],{"class":642},[637,57015,20738],{"class":646},[637,57017,57018,57020,57023,57025,57027,57029,57031,57033,57036,57038,57041,57043,57045,57047,57049,57051],{"class":639,"line":21456},[637,57019,56947],{"class":650},[637,57021,57022],{"class":683}," idx",[637,57024,2431],{"class":642},[637,57026,8487],{"class":683},[637,57028,1146],{"class":642},[637,57030,8492],{"class":2434},[637,57032,2437],{"class":646},[637,57034,57035],{"class":683},"Math",[637,57037,1146],{"class":642},[637,57039,57040],{"class":2434},"random",[637,57042,6984],{"class":646},[637,57044,23121],{"class":642},[637,57046,56950],{"class":683},[637,57048,1146],{"class":642},[637,57050,21272],{"class":683},[637,57052,2448],{"class":646},[637,57054,57055,57057,57059,57061,57064,57066,57068,57070,57072],{"class":639,"line":21471},[637,57056,23087],{"class":676},[637,57058,56950],{"class":683},[637,57060,8731],{"class":646},[637,57062,57063],{"class":683},"idx",[637,57065,5364],{"class":646},[637,57067,3694],{"class":642},[637,57069,699],{"class":642},[637,57071,56716],{"class":663},[637,57073,705],{"class":642},[637,57075,57076],{"class":639,"line":21476},[637,57077,1325],{"class":642},[637,57079,57080],{"class":639,"line":21483},[637,57081,742],{"emptyLinePlaceholder":594},[637,57083,57084,57086,57089,57091,57093,57095],{"class":639,"line":21488},[637,57085,2415],{"class":650},[637,57087,57088],{"class":683}," updateBackgroundColor ",[637,57090,657],{"class":642},[637,57092,7080],{"class":642},[637,57094,3677],{"class":650},[637,57096,1204],{"class":642},[637,57098,57099,57102,57104,57106,57108,57111],{"class":639,"line":21494},[637,57100,57101],{"class":683},"  bgColor",[637,57103,1146],{"class":642},[637,57105,3685],{"class":683},[637,57107,2431],{"class":642},[637,57109,57110],{"class":2434}," getRandomBackgroundColor",[637,57112,6535],{"class":646},[637,57114,57115],{"class":639,"line":21515},[637,57116,1325],{"class":642},[637,57118,57119,57121,57123],{"class":639,"line":21521},[637,57120,732],{"class":642},[637,57122,647],{"class":646},[637,57124,669],{"class":642},[637,57126,57127],{"class":639,"line":21528},[637,57128,742],{"emptyLinePlaceholder":594},[637,57130,57131,57133,57135],{"class":639,"line":21533},[637,57132,643],{"class":642},[637,57134,750],{"class":646},[637,57136,669],{"class":642},[637,57138,57139,57141,57143,57145,57147,57149,57152,57154,57156,57158,57160,57162,57164],{"class":639,"line":21554},[637,57140,758],{"class":642},[637,57142,4119],{"class":646},[637,57144,3872],{"class":650},[637,57146,657],{"class":642},[637,57148,660],{"class":642},[637,57150,57151],{"class":663},"rootRef",[637,57153,660],{"class":642},[637,57155,25106],{"class":650},[637,57157,657],{"class":642},[637,57159,660],{"class":642},[637,57161,56224],{"class":663},[637,57163,660],{"class":642},[637,57165,669],{"class":642},[637,57167,57168,57170,57172,57174,57176,57178,57180,57182,57184,57186,57188,57191,57193],{"class":639,"line":21567},[637,57169,781],{"class":642},[637,57171,761],{"class":646},[637,57173,10215],{"class":650},[637,57175,657],{"class":642},[637,57177,660],{"class":642},[637,57179,55246],{"class":663},[637,57181,660],{"class":642},[637,57183,25106],{"class":650},[637,57185,657],{"class":642},[637,57187,660],{"class":642},[637,57189,57190],{"class":663},"!pointer-events-none",[637,57192,660],{"class":642},[637,57194,669],{"class":642},[637,57196,57197,57199,57201,57203,57205,57207,57209,57211],{"class":639,"line":21593},[637,57198,853],{"class":642},[637,57200,784],{"class":646},[637,57202,1485],{"class":650},[637,57204,657],{"class":642},[637,57206,660],{"class":642},[637,57208,55265],{"class":663},[637,57210,660],{"class":642},[637,57212,787],{"class":642},[637,57214,57215,57217,57219,57222,57224,57226,57228,57230],{"class":639,"line":21598},[637,57216,853],{"class":642},[637,57218,795],{"class":646},[637,57220,57221],{"class":650}," :dom-element",[637,57223,657],{"class":642},[637,57225,660],{"class":642},[637,57227,57151],{"class":663},[637,57229,660],{"class":642},[637,57231,787],{"class":642},[637,57233,57234],{"class":639,"line":21605},[637,57235,742],{"emptyLinePlaceholder":594},[637,57237,57238,57240],{"class":639,"line":21614},[637,57239,853],{"class":642},[637,57241,55288],{"class":646},[637,57243,57244,57246,57248,57250,57252],{"class":639,"line":21619},[637,57245,7977],{"class":650},[637,57247,657],{"class":642},[637,57249,660],{"class":642},[637,57251,55299],{"class":663},[637,57253,3131],{"class":642},[637,57255,57256,57258,57260,57262,57264],{"class":639,"line":21628},[637,57257,7991],{"class":650},[637,57259,657],{"class":642},[637,57261,660],{"class":642},[637,57263,55312],{"class":663},[637,57265,3131],{"class":642},[637,57267,57268,57270,57272,57274,57276],{"class":639,"line":21647},[637,57269,30162],{"class":650},[637,57271,657],{"class":642},[637,57273,660],{"class":642},[637,57275,21394],{"class":663},[637,57277,3131],{"class":642},[637,57279,57280,57282,57284,57286,57288],{"class":639,"line":21657},[637,57281,55331],{"class":650},[637,57283,657],{"class":642},[637,57285,660],{"class":642},[637,57287,55338],{"class":663},[637,57289,3131],{"class":642},[637,57291,57292,57294,57296,57298,57300],{"class":639,"line":21692},[637,57293,55345],{"class":650},[637,57295,657],{"class":642},[637,57297,660],{"class":642},[637,57299,1874],{"class":663},[637,57301,3131],{"class":642},[637,57303,57304,57306,57308,57310,57313],{"class":639,"line":21701},[637,57305,55358],{"class":650},[637,57307,657],{"class":642},[637,57309,660],{"class":642},[637,57311,57312],{"class":663},"[-0.4, 0.4]",[637,57314,3131],{"class":642},[637,57316,57317],{"class":639,"line":21721},[637,57318,53820],{"class":642},[637,57320,57321,57323,57325,57327,57329,57331,57334,57336],{"class":639,"line":21730},[637,57322,864],{"class":642},[637,57324,856],{"class":646},[637,57326,1485],{"class":650},[637,57328,657],{"class":642},[637,57330,660],{"class":642},[637,57332,57333],{"class":663},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[637,57335,660],{"class":642},[637,57337,669],{"class":642},[637,57339,57340,57342,57344,57346,57348,57350,57352,57354,57356,57358,57360,57362,57364],{"class":639,"line":21739},[637,57341,27852],{"class":642},[637,57343,55408],{"class":646},[637,57345,55411],{"class":650},[637,57347,657],{"class":642},[637,57349,660],{"class":642},[637,57351,55418],{"class":663},[637,57353,660],{"class":642},[637,57355,1959],{"class":650},[637,57357,657],{"class":642},[637,57359,660],{"class":642},[637,57361,55429],{"class":663},[637,57363,660],{"class":642},[637,57365,787],{"class":642},[637,57367,57368,57370,57372],{"class":639,"line":21758},[637,57369,27852],{"class":642},[637,57371,877],{"class":646},[637,57373,787],{"class":642},[637,57375,57376,57378,57380],{"class":639,"line":21801},[637,57377,27891],{"class":642},[637,57379,856],{"class":646},[637,57381,669],{"class":642},[637,57383,57384,57386,57388],{"class":639,"line":21843},[637,57385,885],{"class":642},[637,57387,9643],{"class":646},[637,57389,669],{"class":642},[637,57391,57392],{"class":639,"line":21863},[637,57393,742],{"emptyLinePlaceholder":594},[637,57395,57396,57398],{"class":639,"line":21892},[637,57397,853],{"class":642},[637,57399,53760],{"class":646},[637,57401,57402],{"class":639,"line":21901},[637,57403,53766],{"class":650},[637,57405,57406],{"class":639,"line":21910},[637,57407,53772],{"class":650},[637,57409,57410,57412,57414,57416,57418],{"class":639,"line":54662},[637,57411,55484],{"class":650},[637,57413,657],{"class":642},[637,57415,660],{"class":642},[637,57417,49755],{"class":663},[637,57419,3131],{"class":642},[637,57421,57422,57424,57426,57428,57431],{"class":639,"line":54663},[637,57423,8005],{"class":650},[637,57425,657],{"class":642},[637,57427,660],{"class":642},[637,57429,57430],{"class":663},"[0, .75, -2]",[637,57432,3131],{"class":642},[637,57434,57436,57438,57440,57442,57445],{"class":57435,"line":55587},[639,673],[637,57437,53806],{"class":650},[637,57439,657],{"class":642},[637,57441,660],{"class":642},[637,57443,57444],{"class":663},"1.15",[637,57446,3131],{"class":642},[637,57448,57450,57452,57454,57456,57458],{"class":57449,"line":54664},[639,673],[637,57451,55512],{"class":650},[637,57453,657],{"class":642},[637,57455,660],{"class":642},[637,57457,54129],{"class":663},[637,57459,3131],{"class":642},[637,57461,57463],{"class":57462,"line":54665},[639,673],[637,57464,53820],{"class":642},[637,57466,57468,57470,57472,57474,57476,57478,57481,57483],{"class":57467,"line":54666},[639,673],[637,57469,864],{"class":642},[637,57471,25169],{"class":646},[637,57473,3815],{"class":650},[637,57475,657],{"class":642},[637,57477,660],{"class":642},[637,57479,57480],{"class":663},"transition-basic",[637,57482,660],{"class":642},[637,57484,669],{"class":642},[637,57486,57488,57490],{"class":57487,"line":54667},[639,673],[637,57489,27852],{"class":642},[637,57491,57492],{"class":646},"h1\n",[637,57494,57496,57499,57501,57503,57506],{"class":57495,"line":54668},[639,673],[637,57497,57498],{"class":650},"            v-if",[637,57500,657],{"class":642},[637,57502,660],{"class":642},[637,57504,57505],{"class":663},"showTransition",[637,57507,3131],{"class":642},[637,57509,57511,57514,57516,57518,57521],{"class":57510,"line":54669},[639,673],[637,57512,57513],{"class":650},"            :style",[637,57515,657],{"class":642},[637,57517,660],{"class":642},[637,57519,57520],{"class":663},"{ backgroundColor: bgColor }",[637,57522,3131],{"class":642},[637,57524,57526,57529,57531,57533,57536],{"class":57525,"line":54670},[639,673],[637,57527,57528],{"class":650},"            class",[637,57530,657],{"class":642},[637,57532,660],{"class":642},[637,57534,57535],{"class":663},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[637,57537,3131],{"class":642},[637,57539,57541,57544,57546,57548,57551],{"class":57540,"line":54671},[639,673],[637,57542,57543],{"class":650},"            @click",[637,57545,657],{"class":642},[637,57547,660],{"class":642},[637,57549,57550],{"class":663},"updateBackgroundColor",[637,57552,3131],{"class":642},[637,57554,57556],{"class":57555,"line":54672},[639,673],[637,57557,57558],{"class":642},"          >\n",[637,57560,57562,57565,57567,57569,57572,57574,57576,57579,57581],{"class":57561,"line":54673},[639,673],[637,57563,57564],{"class":642},"            \u003C",[637,57566,1669],{"class":646},[637,57568,3651],{"class":642},[637,57570,57571],{"class":683},"TRANSITION + ",[637,57573,732],{"class":642},[637,57575,1669],{"class":646},[637,57577,57578],{"class":642},">\u003C",[637,57580,7555],{"class":646},[637,57582,787],{"class":642},[637,57584,57586,57588,57590,57592,57595,57597,57599],{"class":57585,"line":54674},[639,673],[637,57587,57564],{"class":642},[637,57589,1674],{"class":646},[637,57591,3651],{"class":642},[637,57593,57594],{"class":683},"occlude=blending 💛",[637,57596,732],{"class":642},[637,57598,1674],{"class":646},[637,57600,669],{"class":642},[637,57602,57604,57607,57609],{"class":57603,"line":55736},[639,673],[637,57605,57606],{"class":642},"          \u003C/",[637,57608,53827],{"class":646},[637,57610,669],{"class":642},[637,57612,57614,57616,57618],{"class":57613,"line":54675},[639,673],[637,57615,27891],{"class":642},[637,57617,25169],{"class":646},[637,57619,669],{"class":642},[637,57621,57623,57625,57627],{"class":57622,"line":54676},[639,673],[637,57624,885],{"class":642},[637,57626,53856],{"class":646},[637,57628,669],{"class":642},[637,57630,57632],{"class":57631,"line":54677},[639,673],[637,57633,742],{"emptyLinePlaceholder":594},[637,57635,57637,57639,57641,57643,57645,57647,57650,57652],{"class":57636,"line":54678},[639,673],[637,57638,853],{"class":642},[637,57640,8049],{"class":646},[637,57642,1939],{"class":650},[637,57644,657],{"class":642},[637,57646,660],{"class":642},[637,57648,57649],{"class":663},"-1.25",[637,57651,660],{"class":642},[637,57653,787],{"class":642},[637,57655,57657,57659,57661,57663,57665,57667,57669,57671],{"class":57656,"line":54679},[639,673],[637,57658,853],{"class":642},[637,57660,9681],{"class":646},[637,57662,1867],{"class":650},[637,57664,657],{"class":642},[637,57666,660],{"class":642},[637,57668,1874],{"class":663},[637,57670,660],{"class":642},[637,57672,787],{"class":642},[637,57674,57676,57678,57680],{"class":57675,"line":54680},[639,673],[637,57677,895],{"class":642},[637,57679,761],{"class":646},[637,57681,669],{"class":642},[637,57683,57685,57687,57689],{"class":57684,"line":54681},[639,673],[637,57686,905],{"class":642},[637,57688,4119],{"class":646},[637,57690,669],{"class":642},[637,57692,57693,57695,57697],{"class":639,"line":54682},[637,57694,732],{"class":642},[637,57696,750],{"class":646},[637,57698,669],{"class":642},[637,57700,57701],{"class":639,"line":54683},[637,57702,742],{"emptyLinePlaceholder":594},[637,57704,57705,57707,57709,57711],{"class":639,"line":54684},[637,57706,643],{"class":642},[637,57708,1327],{"class":646},[637,57710,53907],{"class":650},[637,57712,669],{"class":642},[637,57714,57715,57717,57719],{"class":639,"line":54685},[637,57716,1146],{"class":642},[637,57718,56224],{"class":1200},[637,57720,1204],{"class":642},[637,57722,57723,57725,57727,57729],{"class":639,"line":55851},[637,57724,1240],{"class":4129},[637,57726,1218],{"class":642},[637,57728,56236],{"class":2501},[637,57730,9522],{"class":642},[637,57732,57733,57735,57737,57739],{"class":639,"line":54686},[637,57734,1250],{"class":4129},[637,57736,1218],{"class":642},[637,57738,56236],{"class":2501},[637,57740,9522],{"class":642},[637,57742,57743,57745,57747,57749],{"class":639,"line":54687},[637,57744,5345],{"class":4129},[637,57746,1218],{"class":642},[637,57748,4135],{"class":683},[637,57750,9522],{"class":642},[637,57752,57753,57755,57757,57759],{"class":639,"line":54688},[637,57754,56266],{"class":4129},[637,57756,1218],{"class":642},[637,57758,56271],{"class":683},[637,57760,9522],{"class":642},[637,57762,57763,57765,57767,57769,57771],{"class":639,"line":54689},[637,57764,53922],{"class":4129},[637,57766,1218],{"class":642},[637,57768,53927],{"class":642},[637,57770,56285],{"class":683},[637,57772,9522],{"class":642},[637,57774,57775],{"class":639,"line":54690},[637,57776,1325],{"class":642},[637,57778,57779],{"class":639,"line":54691},[637,57780,742],{"emptyLinePlaceholder":594},[637,57782,57783,57785,57788,57790,57792],{"class":639,"line":54692},[637,57784,1146],{"class":642},[637,57786,57787],{"class":1200},"html-demo-transition-heading",[637,57789,1218],{"class":642},[637,57791,8835],{"class":650},[637,57793,1204],{"class":642},[637,57795,57796,57799,57801,57804,57806,57809],{"class":639,"line":54693},[637,57797,57798],{"class":4129},"  transform",[637,57800,1218],{"class":642},[637,57802,57803],{"class":2434}," scale",[637,57805,2437],{"class":642},[637,57807,57808],{"class":2501},"1.05",[637,57810,57811],{"class":642},");\n",[637,57813,57814],{"class":639,"line":54694},[637,57815,1325],{"class":642},[637,57817,57818],{"class":639,"line":54695},[637,57819,742],{"emptyLinePlaceholder":594},[637,57821,57822,57824,57827],{"class":639,"line":54696},[637,57823,1146],{"class":642},[637,57825,57826],{"class":1200},"transition-basic-enter-from",[637,57828,2488],{"class":642},[637,57830,57831,57833,57836],{"class":639,"line":55976},[637,57832,1146],{"class":642},[637,57834,57835],{"class":1200},"transition-basic-leave-to",[637,57837,1204],{"class":642},[637,57839,57840,57842,57844,57846],{"class":639,"line":56000},[637,57841,5485],{"class":4129},[637,57843,1218],{"class":642},[637,57845,2506],{"class":2501},[637,57847,9522],{"class":642},[637,57849,57850,57852,57854,57857,57859,57862],{"class":639,"line":56021},[637,57851,57798],{"class":4129},[637,57853,1218],{"class":642},[637,57855,57856],{"class":2434}," translateY",[637,57858,2437],{"class":642},[637,57860,57861],{"class":2501},"-20px",[637,57863,57811],{"class":642},[637,57865,57866],{"class":639,"line":56030},[637,57867,1325],{"class":642},[637,57869,57870],{"class":639,"line":56039},[637,57871,742],{"emptyLinePlaceholder":594},[637,57873,57874,57876,57879],{"class":639,"line":56044},[637,57875,1146],{"class":642},[637,57877,57878],{"class":1200},"transition-basic-enter-active",[637,57880,2488],{"class":642},[637,57882,57883,57885,57888],{"class":639,"line":56051},[637,57884,1146],{"class":642},[637,57886,57887],{"class":1200},"transition-basic-leave-active",[637,57889,1204],{"class":642},[637,57891,57892,57895,57897,57900,57903,57906],{"class":639,"line":56066},[637,57893,57894],{"class":4129},"  transition",[637,57896,1218],{"class":642},[637,57898,57899],{"class":683}," all ",[637,57901,57902],{"class":2501},"0.5s",[637,57904,57905],{"class":683}," ease",[637,57907,9522],{"class":642},[637,57909,57910],{"class":639,"line":56080},[637,57911,1325],{"class":642},[637,57913,57914],{"class":639,"line":56095},[637,57915,742],{"emptyLinePlaceholder":594},[637,57917,57918,57920,57923],{"class":639,"line":56109},[637,57919,1146],{"class":642},[637,57921,57922],{"class":1200},"transition-basic-enter-to",[637,57924,2488],{"class":642},[637,57926,57927,57929,57932],{"class":639,"line":56122},[637,57928,1146],{"class":642},[637,57930,57931],{"class":1200},"transition-basic-leave-from",[637,57933,1204],{"class":642},[637,57935,57936,57938,57940,57942],{"class":639,"line":56128},[637,57937,5485],{"class":4129},[637,57939,1218],{"class":642},[637,57941,2561],{"class":2501},[637,57943,9522],{"class":642},[637,57945,57946,57948,57950,57952,57954,57956],{"class":639,"line":56133},[637,57947,57798],{"class":4129},[637,57949,1218],{"class":642},[637,57951,57856],{"class":2434},[637,57953,2437],{"class":642},[637,57955,965],{"class":2501},[637,57957,57811],{"class":642},[637,57959,57960],{"class":639,"line":56138},[637,57961,1325],{"class":642},[637,57963,57964,57966,57968],{"class":639,"line":56157},[637,57965,732],{"class":642},[637,57967,1327],{"class":646},[637,57969,669],{"class":642},[4051,57971,56455,57973],{"id":57972},"using-iframes",[618,57974,57975],{},"iframes",[614,57977,57978,57979,57981],{},"You can achieve pretty cool results with the ",[618,57980,53856],{}," component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage with a 3D model.",[2295,57983,57984],{},[57985,57986],"objects-html-iframe-demo",{},[5307,57988,5309,57989,57991],{},[5311,57990,54043],{},[626,57992,57994],{"className":45597,"code":57993,"language":45599,"meta":576,"style":576},"\u003Chtml\n  transform\n  center\n  :cast-shadow=\"true\"\n  :receive-shadow=\"true\"\n  occlude=\"blending\"\n  :z-index-range=\"[28, 0]\"\n  :position-y=\"2.5\"\n  :portal=\"portalRef\"\n  :style=\"{ userSelect: 'none' }\"\n>\n  \u003Ciframe class=\"w-[700px] h-[500px]\" src=\"https://tresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C/iframe>\n\u003C/html>\n",[618,57995,57996,58002,58007,58012,58025,58038,58051,58064,58078,58092,58106,58110,58180],{"__ignoreMap":576},[637,57997,57998,58000],{"class":639,"line":577},[637,57999,643],{"class":642},[637,58001,54490],{"class":646},[637,58003,58004],{"class":639,"line":578},[637,58005,58006],{"class":650},"  transform\n",[637,58008,58009],{"class":639,"line":708},[637,58010,58011],{"class":650},"  center\n",[637,58013,58014,58017,58019,58021,58023],{"class":639,"line":729},[637,58015,58016],{"class":650},"  :cast-shadow",[637,58018,657],{"class":642},[637,58020,660],{"class":642},[637,58022,961],{"class":663},[637,58024,3131],{"class":642},[637,58026,58027,58030,58032,58034,58036],{"class":639,"line":739},[637,58028,58029],{"class":650},"  :receive-shadow",[637,58031,657],{"class":642},[637,58033,660],{"class":642},[637,58035,961],{"class":663},[637,58037,3131],{"class":642},[637,58039,58040,58043,58045,58047,58049],{"class":639,"line":745},[637,58041,58042],{"class":650},"  occlude",[637,58044,657],{"class":642},[637,58046,660],{"class":642},[637,58048,49755],{"class":663},[637,58050,3131],{"class":642},[637,58052,58053,58056,58058,58060,58062],{"class":639,"line":755},[637,58054,58055],{"class":650},"  :z-index-range",[637,58057,657],{"class":642},[637,58059,660],{"class":642},[637,58061,54129],{"class":663},[637,58063,3131],{"class":642},[637,58065,58066,58069,58071,58073,58076],{"class":639,"line":778},[637,58067,58068],{"class":650},"  :position-y",[637,58070,657],{"class":642},[637,58072,660],{"class":642},[637,58074,58075],{"class":663},"2.5",[637,58077,3131],{"class":642},[637,58079,58080,58083,58085,58087,58090],{"class":639,"line":790},[637,58081,58082],{"class":650},"  :portal",[637,58084,657],{"class":642},[637,58086,660],{"class":642},[637,58088,58089],{"class":663},"portalRef",[637,58091,3131],{"class":642},[637,58093,58094,58097,58099,58101,58104],{"class":639,"line":800},[637,58095,58096],{"class":650},"  :style",[637,58098,657],{"class":642},[637,58100,660],{"class":642},[637,58102,58103],{"class":663},"{ userSelect: 'none' }",[637,58105,3131],{"class":642},[637,58107,58108],{"class":639,"line":805},[637,58109,669],{"class":642},[637,58111,58112,58114,58117,58119,58121,58123,58126,58128,58131,58133,58135,58138,58140,58143,58145,58147,58149,58151,58154,58156,58158,58161,58163,58166,58168,58170,58172,58174,58176,58178],{"class":639,"line":827},[637,58113,758],{"class":642},[637,58115,58116],{"class":646},"iframe",[637,58118,25106],{"class":650},[637,58120,657],{"class":642},[637,58122,660],{"class":642},[637,58124,58125],{"class":663},"w-[700px] h-[500px]",[637,58127,660],{"class":642},[637,58129,58130],{"class":650}," src",[637,58132,657],{"class":642},[637,58134,660],{"class":642},[637,58136,58137],{"class":663},"https://tresjs.org",[637,58139,660],{"class":642},[637,58141,58142],{"class":650}," frameborder",[637,58144,657],{"class":642},[637,58146,660],{"class":642},[637,58148,965],{"class":663},[637,58150,660],{"class":642},[637,58152,58153],{"class":650}," :width",[637,58155,657],{"class":642},[637,58157,660],{"class":642},[637,58159,58160],{"class":663},"700",[637,58162,660],{"class":642},[637,58164,58165],{"class":650}," :height",[637,58167,657],{"class":642},[637,58169,660],{"class":642},[637,58171,43066],{"class":663},[637,58173,660],{"class":642},[637,58175,25142],{"class":642},[637,58177,58116],{"class":646},[637,58179,669],{"class":642},[637,58181,58182,58184,58186],{"class":639,"line":631},[637,58183,732],{"class":642},[637,58185,45599],{"class":646},[637,58187,669],{"class":642},[58189,58190,58191],"info",{},[614,58192,58193,58194,58197,58198,58201,58202],{},"The demos use ",[618,58195,58196],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[618,58199,58200],{},"z-index: 30",").\n",[1669,58203,58204],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[504,58206,922],{"id":921},[927,58208,58209,58219],{},[930,58210,58211],{},[933,58212,58213,58215,58217],{},[936,58214,938],{},[936,58216,941],{},[936,58218,944],{},[946,58220,58221,58238,58253,58271,58295,58315,58332,58350,58361,58380,58403,58443,58481,58501,58534],{},[933,58222,58223,58227,58233],{},[951,58224,58225],{},[1669,58226,4737],{},[951,58228,58229,58230,1146],{},"Wrapping ",[1674,58231,58232],{},"HTML element",[951,58234,58235],{},[618,58236,58237],{},"'div'",[933,58239,58240,58245,58251],{},[951,58241,58242],{},[1669,58243,58244],{},"wrapperClass",[951,58246,2776,58247,58250],{},[618,58248,58249],{},"className"," of the wrapping element. element.",[951,58252],{},[933,58254,58255,58260,58267],{},[951,58256,58257],{},[1669,58258,58259],{},"prepend",[951,58261,58262,58263,58266],{},"Projects content ",[1674,58264,58265],{},"behind"," the canvas.",[951,58268,58269],{},[618,58270,971],{},[933,58272,58273,58277,58291],{},[951,58274,58275],{},[1669,58276,29233],{},[951,58278,1350,58279,8166,58282,58284,58285],{},[618,58280,58281],{},"transform: translate(-50%, -50%)",[7555,58283],{},"➡️ ",[1674,58286,58287,58288,58290],{},"Ignored in ",[1669,58289,12042],{}," mode.",[951,58292,58293],{},[618,58294,971],{},[933,58296,58297,58302,58311],{},[951,58298,58299],{},[1669,58300,58301],{},"fullscreen",[951,58303,58304,58305,58284,58307],{},"Aligns to the upper-left corner and fills the screen. ",[7555,58306],{},[1674,58308,58287,58309,58290],{},[1669,58310,12042],{},[951,58312,58313],{},[618,58314,971],{},[933,58316,58317,58322,58330],{},[951,58318,58319],{},[1669,58320,58321],{},"distanceFactor",[951,58323,58324,58325,58327,58328,1146],{},"Children are scaled by this factor and also by distance to a ",[618,58326,12830],{},", or zoom when using an ",[618,58329,53573],{},[951,58331],{},[933,58333,58334,58339,58345],{},[951,58335,58336],{},[1669,58337,58338],{},"zIndexRange",[951,58340,58341,58342,1146],{},"Defines the ",[1674,58343,58344],{},"Z-order range",[951,58346,58347],{},[618,58348,58349],{},"[16777271, 0]",[933,58351,58352,58356,58359],{},[951,58353,58354],{},[1669,58355,28035],{},[951,58357,58358],{},"Reference to a target container (for rendering into a different DOM node). container.",[951,58360],{},[933,58362,58363,58367,58376],{},[951,58364,58365],{},[1669,58366,12042],{},[951,58368,958,58369,58371,58372,58375],{},[618,58370,961],{},", applies ",[618,58373,58374],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[951,58377,58378],{},[618,58379,971],{},[933,58381,58382,58387,58399],{},[951,58383,58384],{},[1669,58385,58386],{},"sprite",[951,58388,58389,58390,8166,58392,58284,58394],{},"Renders as a ",[1674,58391,58386],{},[7555,58393],{},[1674,58395,58396,58397,58290],{},"Only in ",[1669,58398,12042],{},[951,58400,58401],{},[618,58402,971],{},[933,58404,58405,58410,58434],{},[951,58406,58407],{},[1669,58408,58409],{},"calculatePosition",[951,58411,58412,58413,58415,3194,58418,3194,58421,58423,58424,58427,58428,58284,58430],{},"Callback function to override the default positioning logic. ",[7555,58414],{},[1669,58416,58417],{},"Type:",[618,58419,58420],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7555,58422],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[618,58425,58426],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7555,58429],{},[1674,58431,58287,58432,58290],{},[1669,58433,12042],{},[951,58435,58436],{},[1140,58437,58440,58441],{"href":58438,"rel":58439},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1144],"Default ",[618,58442,58409],{},[933,58444,58445,58449,58479],{},[951,58446,58447],{},[1669,58448,54003],{},[951,58450,58451,58452,58454,58455,58457,58458,58461,58462,58464,58465,58468,58469,58454,58471,58474,58475,58478],{},"Enables occlusion. Possible values: ",[7555,58453],{},"- ",[618,58456,961],{}," → Occlusion against ",[1674,58459,58460],{},"all"," scene objects ",[7555,58463],{}," - ",[618,58466,58467],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7555,58470],{},[618,58472,58473],{},"'blending'"," → Uses a ",[1674,58476,58477],{},"blending-based"," occlusion method (CSS-like depth blending).",[951,58480],{},[933,58482,58483,58487,58493],{},[951,58484,58485],{},[1669,58486,5256],{},[951,58488,58489,58490,58492],{},"Custom ",[618,58491,5256],{}," to be used.",[951,58494,58495],{},[1140,58496,58499],{"href":58497,"rel":58498},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1144],[618,58500,33621],{},[933,58502,58503,58507,58532],{},[951,58504,58505],{},[1669,58506,5200],{},[951,58508,58509,3194,58515,3194,58517,58523,58524,3194,58526],{},[1669,58510,58511,58512,58514],{},"Custom shader ",[1674,58513,5200],{}," used for the occlusion mesh.",[7555,58516],{},[1669,58518,58519,58520,58522],{},"Only applies when ",[618,58521,56309],{}," is enabled"," (an occlusion mesh is created). ",[7555,58525],{},[1674,58527,58528,58529,58531],{},"Ignored in raycast occlusion modes (",[618,58530,961],{},", object refs).",[951,58533],{},[933,58535,58536,58541,58562],{},[951,58537,58538],{},[1669,58539,58540],{},"transparentMaterial",[951,58542,58543,3194,58549,3194,58551,3194,58556,3194,58558],{},[1669,58544,58545,58546,58548],{},"Enables ",[1674,58547,11623],{}," rendering for the occlusion material.",[7555,58550],{},[1669,58552,58519,58553,58555],{},[618,58554,56309],{}," creates an occlusion mesh.",[7555,58557],{},[1674,58559,58528,58560,58531],{},[618,58561,961],{},[951,58563,58564],{},[618,58565,971],{},[504,58567,14280],{"id":14279},[927,58569,58570,58578],{},[930,58571,58572],{},[933,58573,58574,58576],{},[936,58575,5759],{},[936,58577,941],{},[946,58579,58580],{},[933,58581,58582,58585],{},[951,58583,58584],{},"onOcclude",[951,58586,58587],{},"Called when the occlusion state changes.",[504,58589,58591],{"id":58590},"exposed-properties","Exposed properties",[927,58593,58594,58604],{},[930,58595,58596],{},[933,58597,58598,58600,58602],{},[936,58599,5966],{},[936,58601,5969],{},[936,58603,941],{},[946,58605,58606,58627,58647],{},[933,58607,58608,58612,58617],{},[951,58609,58610],{},[1669,58611,9326],{},[951,58613,58614],{},[618,58615,58616],{},"Ref\u003CTresObject3D | null>",[951,58618,58619,58620,58624,58625,1146],{},"Reference to the root ",[1669,58621,58622],{},[618,58623,5621],{}," used by ",[618,58626,53577],{},[933,58628,58629,58634,58638],{},[951,58630,58631],{},[1669,58632,58633],{},"isVisible",[951,58635,58636],{},[618,58637,17471],{},[951,58639,58640,58641,5611,58644,1146],{},"Reactive value that indicates whether the HTML content is ",[1669,58642,58643],{},"currently visible",[1669,58645,58646],{},"occluded",[933,58648,58649,58654,58658],{},[951,58650,58651],{},[1669,58652,58653],{},"occlusionMesh",[951,58655,58656],{},[618,58657,58616],{},[951,58659,58660,58661,58664,58665,5883,58667,58669],{},"Reference to the ",[1669,58662,58663],{},"occlusion mesh"," created when ",[618,58666,56309],{},[1669,58668,16660],{},". Used internally for geometry-based occlusion.",[504,58671,6259],{"id":6258},[2213,58673,58674,58707,58724,58779,58797],{},[2216,58675,58676,58677,58682,58683,58685,58686,5611,58689,58692,58693,58695,58696,58699,58700,58703,58704,58706],{},"✨ When using ",[1669,58678,58679],{},[618,58680,58681],{},"\u003CHtml occlude>",", if the ",[618,58684,53577],{}," component is ",[1669,58687,58688],{},"overlapping",[1669,58690,58691],{},"inside a 3D object",", it will be considered ",[1669,58694,58646],{}," and therefore ",[1669,58697,58698],{},"hidden",". To avoid this, ",[1669,58701,58702],{},"adjust the position"," of the ",[618,58705,53577],{}," component in your scene.",[2216,58708,58709,58710,58715,58716,58719,58720,58723],{},"🎨 When using ",[1669,58711,58712],{},[618,58713,58714],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1669,58717,58718],{},"selectable"," because it is rendered ",[1669,58721,58722],{},"behind the canvas",". This is required to achieve the blending effect.",[2216,58725,58726,58727,58729,58730,58732,58733],{},"⚙️ When using a ",[1669,58728,56404],{}," with occlusion in ",[618,58731,49755],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5307,58734,5309,58735,58738],{},[5311,58736,58737],{},"See more information",[14142,58739,58740,58751,58759,58766],{},[2216,58741,58742,58743,3074,58745,58747,58748,1146],{},"If you provide your own material, it must be ",[1669,58744,11623],{},[618,58746,3062],{},") with an ",[1669,58749,58750],{},"opacity \u003C 1",[2216,58752,58753,58754,58758],{},"If you are not providing a custom material, enable ",[1669,58755,58756],{},[618,58757,58540],{}," so the internal shader becomes transparent.",[2216,58760,58761,58762,58765],{},"The occlusion mesh requires a ",[1669,58763,58764],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2216,58767,58768,58769,16449,58772,1672,58774,58776,58777,1146],{},"To compensate for the transparent canvas, you may ",[1669,58770,58771],{},"reapply your previous clear-color as a CSS background",[618,58773,45599],{},[618,58775,4837],{},", or a wrapper ",[618,58778,4119],{},[2216,58780,58781,58782,58786,58787,58789,58790,58792,58793,58796],{},"🔶 When using ",[1669,58783,58784],{},[618,58785,58540],{},", overlapping ",[618,58788,53577],{}," elements (especially multiple ",[618,58791,56309],{}," instances) may cause ",[1669,58794,58795],{},"z-index or depth-order artifacts",".\nThis happens because the occlusion mesh uses transparency in the WebGL layer while the DOM element uses CSS stacking order.",[2216,58798,58799,58800,58802,58803,58805,58806],{},"🔵 To avoid thin border artifacts when using ",[618,58801,56309],{},", make sure your ",[618,58804,3197],{}," is fully transparent:",[626,58807,58809],{"className":628,"code":58808,"language":633,"meta":576,"style":576},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[618,58810,58811],{"__ignoreMap":576},[637,58812,58813,58815,58817,58819,58821,58823,58825,58827,58829,58831,58834,58836,58838,58840,58842],{"class":639,"line":577},[637,58814,643],{"class":642},[637,58816,761],{"class":646},[637,58818,3029],{"class":642},[637,58820,46281],{"class":650},[637,58822,657],{"class":642},[637,58824,660],{"class":642},[637,58826,961],{"class":4397},[637,58828,660],{"class":642},[637,58830,3029],{"class":642},[637,58832,58833],{"class":650},"clearAlpha",[637,58835,657],{"class":642},[637,58837,660],{"class":642},[637,58839,965],{"class":2501},[637,58841,660],{"class":642},[637,58843,787],{"class":642},[927,58845,58846,58856],{},[930,58847,58848],{},[933,58849,58850,58852,58854],{},[936,58851,938],{},[936,58853,941],{},[936,58855,944],{},[946,58857,58858,58871,58882,58895,58911,58926,58937,58950,58961,58974,58987,59000,59021,59036],{},[933,58859,58860,58864,58867],{},[951,58861,58862],{},[1669,58863,4737],{},[951,58865,58866],{},"Wrapping html element.",[951,58868,58869],{},[618,58870,58237],{},[933,58872,58873,58877,58880],{},[951,58874,58875],{},[1669,58876,58244],{},[951,58878,58879],{},"The className of the wrapping element.",[951,58881],{},[933,58883,58884,58888,58891],{},[951,58885,58886],{},[1669,58887,58259],{},[951,58889,58890],{},"Project content behind the canvas.",[951,58892,58893],{},[618,58894,971],{},[933,58896,58897,58901,58907],{},[951,58898,58899],{},[1669,58900,29233],{},[951,58902,58903,58904],{},"Adds a -50%/-50% CSS transform. ",[637,58905,58906],{},"Ignored in transform mode",[951,58908,58909],{},[618,58910,971],{},[933,58912,58913,58917,58922],{},[951,58914,58915],{},[1669,58916,58301],{},[951,58918,58919,58920],{},"Aligns to the upper-left corner, fills the screen. ",[637,58921,58906],{},[951,58923,58924],{},[618,58925,971],{},[933,58927,58928,58932,58935],{},[951,58929,58930],{},[1669,58931,58321],{},[951,58933,58934],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[951,58936],{},[933,58938,58939,58943,58946],{},[951,58940,58941],{},[1669,58942,58338],{},[951,58944,58945],{},"Z-order range.",[951,58947,58948],{},[618,58949,58349],{},[933,58951,58952,58956,58959],{},[951,58953,58954],{},[1669,58955,28035],{},[951,58957,58958],{},"Reference to target container.",[951,58960],{},[933,58962,58963,58967,58970],{},[951,58964,58965],{},[1669,58966,12042],{},[951,58968,58969],{},"If true, applies matrix3d transformations.",[951,58971,58972],{},[618,58973,971],{},[933,58975,58976,58980,58983],{},[951,58977,58978],{},[1669,58979,58386],{},[951,58981,58982],{},"Renders as sprite, but only in transform mode.",[951,58984,58985],{},[618,58986,971],{},[933,58988,58989,58993,58998],{},[951,58990,58991],{},[1669,58992,58409],{},[951,58994,58995,58996],{},"Override default positioning function. ",[637,58997,58906],{},[951,58999],{},[933,59001,59002,59006,59019],{},[951,59003,59004],{},[1669,59005,54003],{},[951,59007,59008,59009,1672,59011,1672,59013,1702,59016,59018],{},"Can be ",[618,59010,961],{},[618,59012,58467],{},[618,59014,59015],{},"'raycast'",[618,59017,58473],{},". True occludes the entire scene.",[951,59020],{},[933,59022,59023,59027,59032],{},[951,59024,59025],{},[1669,59026,5256],{},[951,59028,58489,59029,59031],{},[618,59030,5256],{}," to be use",[951,59033,59034],{},[618,59035,33621],{},[933,59037,59038,59042,59046],{},[951,59039,59040],{},[1669,59041,5200],{},[951,59043,58511,59044,59031],{},[618,59045,5200],{},[951,59047],{},[504,59049,14280],{"id":59050},"events-1",[927,59052,59053,59061],{},[930,59054,59055],{},[933,59056,59057,59059],{},[936,59058,5759],{},[936,59060,941],{},[946,59062,59063],{},[933,59064,59065,59067],{},[951,59066,58584],{},[951,59068,58587],{},[1327,59070,59071],{},"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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":59073},[59074,59075,59080,59083,59088,59089,59090,59091,59092],{"id":624,"depth":578,"text":15},{"id":53996,"depth":578,"text":53997,"children":59076},[59077,59078,59079],{"id":54185,"depth":708,"text":54186},{"id":54347,"depth":708,"text":54348},{"id":54607,"depth":708,"text":54608},{"id":45934,"depth":578,"text":45935,"children":59081},[59082],{"id":2985,"depth":708,"text":56390},{"id":56454,"depth":578,"text":59084,"children":59085},"Using \u003CTransition>",[59086],{"id":57972,"depth":708,"text":59087},"Using iframes",{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},{"id":58590,"depth":578,"text":58591},{"id":6258,"depth":578,"text":6259},{"id":59050,"depth":578,"text":14280},"Allows you put DOM elements in your Tres.js scene.",{},{"title":441,"description":59093},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":59098,"title":445,"body":59099,"description":59695,"extension":591,"links":592,"meta":59696,"navigation":594,"path":446,"seo":59697,"stem":447,"__hash__":59698},"docs/2.api/9.objects/image.md",{"type":501,"value":59100,"toc":59690},[59101,59106,59112,59114,59285,59287,59294,59502,59504,59527,59688],[608,59102,59103],{},[59104,59105],"objects-image",{},[614,59107,59108,59111],{},[618,59109,59110],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[504,59113,15],{"id":624},[626,59115,59118],{"className":628,"code":59116,"highlights":59117,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Image } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CImage\n      url=\"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG\"\n      :scale=\"[2, 2]\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827],[618,59119,59120,59140,59158,59178,59186,59190,59198,59206,59224,59228,59236,59251,59265,59269,59277],{"__ignoreMap":576},[637,59121,59122,59124,59126,59128,59130,59132,59134,59136,59138],{"class":639,"line":577},[637,59123,643],{"class":642},[637,59125,647],{"class":646},[637,59127,651],{"class":650},[637,59129,654],{"class":650},[637,59131,657],{"class":642},[637,59133,660],{"class":642},[637,59135,664],{"class":663},[637,59137,660],{"class":642},[637,59139,669],{"class":642},[637,59141,59142,59144,59146,59148,59150,59152,59154,59156],{"class":639,"line":578},[637,59143,677],{"class":676},[637,59145,680],{"class":642},[637,59147,715],{"class":683},[637,59149,693],{"class":642},[637,59151,696],{"class":676},[637,59153,699],{"class":642},[637,59155,724],{"class":663},[637,59157,705],{"class":642},[637,59159,59161,59163,59165,59168,59170,59172,59174,59176],{"class":59160,"line":708},[639,673],[637,59162,677],{"class":676},[637,59164,680],{"class":642},[637,59166,59167],{"class":683}," Image",[637,59169,693],{"class":642},[637,59171,696],{"class":676},[637,59173,699],{"class":642},[637,59175,702],{"class":663},[637,59177,705],{"class":642},[637,59179,59180,59182,59184],{"class":639,"line":729},[637,59181,732],{"class":642},[637,59183,647],{"class":646},[637,59185,669],{"class":642},[637,59187,59188],{"class":639,"line":739},[637,59189,742],{"emptyLinePlaceholder":594},[637,59191,59192,59194,59196],{"class":639,"line":745},[637,59193,643],{"class":642},[637,59195,750],{"class":646},[637,59197,669],{"class":642},[637,59199,59200,59202,59204],{"class":639,"line":755},[637,59201,758],{"class":642},[637,59203,761],{"class":646},[637,59205,669],{"class":642},[637,59207,59208,59210,59212,59214,59216,59218,59220,59222],{"class":639,"line":778},[637,59209,781],{"class":642},[637,59211,784],{"class":646},[637,59213,1485],{"class":650},[637,59215,657],{"class":642},[637,59217,660],{"class":642},[637,59219,9611],{"class":663},[637,59221,660],{"class":642},[637,59223,787],{"class":642},[637,59225,59226],{"class":639,"line":790},[637,59227,742],{"emptyLinePlaceholder":594},[637,59229,59231,59233],{"class":59230,"line":800},[639,673],[637,59232,781],{"class":642},[637,59234,59235],{"class":646},"Image\n",[637,59237,59239,59242,59244,59246,59249],{"class":59238,"line":805},[639,673],[637,59240,59241],{"class":650},"      url",[637,59243,657],{"class":642},[637,59245,660],{"class":642},[637,59247,59248],{"class":663},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[637,59250,3131],{"class":642},[637,59252,59254,59257,59259,59261,59263],{"class":59253,"line":827},[639,673],[637,59255,59256],{"class":650},"      :scale",[637,59258,657],{"class":642},[637,59260,660],{"class":642},[637,59262,53320],{"class":663},[637,59264,3131],{"class":642},[637,59266,59267],{"class":639,"line":631},[637,59268,17274],{"class":642},[637,59270,59271,59273,59275],{"class":639,"line":850},[637,59272,905],{"class":642},[637,59274,761],{"class":646},[637,59276,669],{"class":642},[637,59278,59279,59281,59283],{"class":639,"line":861},[637,59280,732],{"class":642},[637,59282,750],{"class":646},[637,59284,669],{"class":642},[504,59286,922],{"id":921},[3199,59288,59289],{},[614,59290,59291,59293],{},[618,59292,59110],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[927,59295,59296,59306],{},[930,59297,59298],{},[933,59299,59300,59302,59304],{},[936,59301,938],{"align":997},[936,59303,941],{"align":997},[936,59305,944],{},[946,59307,59308,59321,59337,59350,59364,59380,59394,59412,59430,59445,59461,59479,59490],{},[933,59309,59310,59314,59317],{},[951,59311,59312],{"align":997},[618,59313,30784],{},[951,59315,59316],{"align":997},"Number of divisions in the default geometry.",[951,59318,59319],{},[618,59320,1874],{},[933,59322,59323,59327,59333],{},[951,59324,59325],{"align":997},[618,59326,5630],{},[951,59328,59329,59330],{"align":997},"Scale of the geometry. ",[618,59331,59332],{},"number | [number, number]",[951,59334,59335],{},[618,59336,1874],{},[933,59338,59339,59343,59346],{},[951,59340,59341],{"align":997},[618,59342,7547],{},[951,59344,59345],{"align":997},"Color multiplied into the image texture.",[951,59347,59348],{},[618,59349,30867],{},[933,59351,59352,59357,59360],{},[951,59353,59354],{"align":997},[618,59355,59356],{},"zoom",[951,59358,59359],{"align":997},"Shrinks or enlarges the image texture.",[951,59361,59362],{},[618,59363,1874],{},[933,59365,59366,59370,59376],{},[951,59367,59368],{"align":997},[618,59369,42950],{},[951,59371,59372,59373,59375],{"align":997},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[618,59374,11623],{},".)",[951,59377,59378],{},[618,59379,965],{},[933,59381,59382,59387,59390],{},[951,59383,59384],{"align":997},[618,59385,59386],{},"grayscale",[951,59388,59389],{"align":997},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[951,59391,59392],{},[618,59393,965],{},[933,59395,59396,59400,59408],{},[951,59397,59398],{"align":997},[618,59399,39485],{},[951,59401,59402,59403],{"align":997},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1140,59404,59407],{"href":59405,"rel":59406},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1144],"See THREE.material.tonemapped",[951,59409,59410],{},[618,59411,965],{},[933,59413,59414,59418,59426],{},[951,59415,59416],{"align":997},[618,59417,11623],{},[951,59419,59420,59421],{"align":997},"Whether the image material should be transparent. ",[1140,59422,59425],{"href":59423,"rel":59424},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1144],"See THREE.material.transparent",[951,59427,59428],{},[618,59429,971],{},[933,59431,59432,59436,59441],{},[951,59433,59434],{"align":997},[618,59435,11623],{},[951,59437,59420,59438],{"align":997},[1140,59439,59425],{"href":59423,"rel":59440},[1144],[951,59442,59443],{},[618,59444,971],{},[933,59446,59447,59451,59457],{},[951,59448,59449],{"align":997},[618,59450,11611],{},[951,59452,59453,59454],{"align":997},"Opacity of the image material. ",[1140,59455,59425],{"href":59423,"rel":59456},[1144],[951,59458,59459],{},[618,59460,1874],{},[933,59462,59463,59467,59475],{},[951,59464,59465],{"align":997},[618,59466,27394],{},[951,59468,59469,59470],{"align":997},"THREE.Side of the image material. ",[1140,59471,59474],{"href":59472,"rel":59473},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1144],"See THREE.material.side",[951,59476,59477],{},[618,59478,27407],{},[933,59480,59481,59485,59488],{},[951,59482,59483],{"align":997},[618,59484,2717],{},[951,59486,59487],{"align":997},"Image texture to display on the geometry.",[951,59489],{},[933,59491,59492,59497,59500],{},[951,59493,59494],{"align":997},[618,59495,59496],{},"url",[951,59498,59499],{"align":997},"Image URL to load and display on the geometry.",[951,59501],{},[504,59503,6259],{"id":6258},[614,59505,59506,59507,59509,59510,59513,59514,59516,59517,59520,59521,5611,59524,5574],{},"By default, images loaded via the ",[618,59508,59496],{}," prop use the renderer’s output color space. For advanced control, pass a ",[618,59511,59512],{},"THREE.Texture"," via the ",[618,59515,2717],{}," prop and set its ",[618,59518,59519],{},"colorSpace"," (e.g., ",[618,59522,59523],{},"THREE.SRGBColorSpace",[618,59525,59526],{},"THREE.LinearSRGBColorSpace",[626,59528,59530],{"className":628,"code":59529,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n  texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[618,59531,59532,59542,59560,59578,59582,59600,59619,59635,59641,59649,59653,59661,59680],{"__ignoreMap":576},[637,59533,59534,59536,59538,59540],{"class":639,"line":577},[637,59535,643],{"class":642},[637,59537,647],{"class":646},[637,59539,651],{"class":650},[637,59541,669],{"class":642},[637,59543,59544,59546,59548,59550,59552,59554,59556,59558],{"class":639,"line":578},[637,59545,677],{"class":676},[637,59547,680],{"class":642},[637,59549,2359],{"class":683},[637,59551,693],{"class":642},[637,59553,696],{"class":676},[637,59555,699],{"class":642},[637,59557,702],{"class":663},[637,59559,705],{"class":642},[637,59561,59562,59564,59566,59568,59570,59572,59574,59576],{"class":639,"line":708},[637,59563,677],{"class":676},[637,59565,680],{"class":642},[637,59567,44653],{"class":683},[637,59569,693],{"class":642},[637,59571,696],{"class":676},[637,59573,699],{"class":642},[637,59575,4626],{"class":663},[637,59577,705],{"class":642},[637,59579,59580],{"class":639,"line":729},[637,59581,742],{"emptyLinePlaceholder":594},[637,59583,59584,59586,59588,59591,59593,59595,59597],{"class":639,"line":739},[637,59585,2415],{"class":650},[637,59587,680],{"class":642},[637,59589,59590],{"class":683}," state ",[637,59592,2428],{"class":642},[637,59594,2431],{"class":642},[637,59596,2359],{"class":2434},[637,59598,59599],{"class":683},"(URL)\n",[637,59601,59602,59604,59607,59609,59611,59613,59615,59617],{"class":639,"line":745},[637,59603,12189],{"class":2434},[637,59605,59606],{"class":683},"(state",[637,59608,687],{"class":642},[637,59610,3074],{"class":642},[637,59612,2717],{"class":6838},[637,59614,3340],{"class":642},[637,59616,3677],{"class":650},[637,59618,1204],{"class":642},[637,59620,59621,59624,59626,59628,59630,59632],{"class":639,"line":755},[637,59622,59623],{"class":683},"  texture",[637,59625,1146],{"class":642},[637,59627,59519],{"class":683},[637,59629,2431],{"class":642},[637,59631,44653],{"class":683},[637,59633,59634],{"class":1209}," // assign a custom color space\n",[637,59636,59637,59639],{"class":639,"line":778},[637,59638,2428],{"class":642},[637,59640,2448],{"class":683},[637,59642,59643,59645,59647],{"class":639,"line":790},[637,59644,732],{"class":642},[637,59646,647],{"class":646},[637,59648,669],{"class":642},[637,59650,59651],{"class":639,"line":800},[637,59652,742],{"emptyLinePlaceholder":594},[637,59654,59655,59657,59659],{"class":639,"line":805},[637,59656,643],{"class":642},[637,59658,750],{"class":646},[637,59660,669],{"class":642},[637,59662,59663,59665,59667,59670,59672,59674,59676,59678],{"class":639,"line":827},[637,59664,758],{"class":642},[637,59666,445],{"class":646},[637,59668,59669],{"class":650}," :texture",[637,59671,657],{"class":642},[637,59673,660],{"class":642},[637,59675,2717],{"class":663},[637,59677,660],{"class":642},[637,59679,787],{"class":642},[637,59681,59682,59684,59686],{"class":639,"line":631},[637,59683,732],{"class":642},[637,59685,750],{"class":646},[637,59687,669],{"class":642},[1327,59689,26963],{},{"title":576,"searchDepth":577,"depth":578,"links":59691},[59692,59693,59694],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":6258,"depth":578,"text":6259},"Display image textures with shader-based effects.",{},{"title":445,"description":59695},"X-ToNyUMXQZlkTHUsm9OM76zK6fPjZKmSgrWtCQht4g",{"id":59700,"title":449,"body":59701,"description":60483,"extension":591,"links":592,"meta":60484,"navigation":594,"path":450,"seo":60485,"stem":451,"__hash__":60486},"docs/2.api/9.objects/marching-cubes.md",{"type":501,"value":59702,"toc":60477},[59703,59708,59719,59722,59747,59749,60289,60291,60362,60366,60411,60415,60474],[608,59704,59705],{},[59706,59707],"objects-marching-cubes",{},[614,59709,59710,59713,59714,1146],{},[618,59711,59712],{},"\u003CMarchingCubes />"," is a wrapper around ",[1140,59715,59718],{"href":59716,"rel":59717},"https://threejs.org/examples/#webgl_marchingcubes",[1144],"THREE's Marching Cubes",[614,59720,59721],{},"It includes 3 components:",[2213,59723,59724,59737,59742],{},[2216,59725,59726,59728,59729,59732,59733,59736],{},[618,59727,59712],{}," – container element for ",[618,59730,59731],{},"\u003CMarchingCube />","s and ",[618,59734,59735],{},"\u003CMarchingPlane />","s",[2216,59738,59739,59741],{},[618,59740,59731],{}," - an individual metaball",[2216,59743,59744,59746],{},[618,59745,59735],{}," – optional bounding plane that interacts with the metaballs",[504,59748,15],{"id":624},[626,59750,59753],{"className":628,"code":59751,"highlights":59752,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { NoToneMapping, Vector3 } from 'three'\n\nconst rand = () => (Math.random() - 0.5) * 1.25\nconst positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n      \u003CMarchingPlane plane-type=\"y\" />\n      \u003CMarchingCube\n        v-for=\"position, i of positions\"\n        :key=\"i\"\n        :position=\"position\"\n      />\n      \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" />\n    \u003C/MarchingCubes>\n\n    \u003CTresAxesHelper />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,861,872,882,632,902,912,2625,2634,2654],[618,59754,59755,59775,59809,59827,59850,59854,59887,59944,59952,59956,59964,59994,60002,60010,60014,60045,60066,60074,60088,60101,60114,60119,60173,60182,60186,60194,60234,60273,60281],{"__ignoreMap":576},[637,59756,59757,59759,59761,59763,59765,59767,59769,59771,59773],{"class":639,"line":577},[637,59758,643],{"class":642},[637,59760,647],{"class":646},[637,59762,651],{"class":650},[637,59764,654],{"class":650},[637,59766,657],{"class":642},[637,59768,660],{"class":642},[637,59770,664],{"class":663},[637,59772,660],{"class":642},[637,59774,669],{"class":642},[637,59776,59778,59780,59782,59785,59787,59790,59792,59795,59797,59799,59801,59803,59805,59807],{"class":59777,"line":578},[639,673],[637,59779,677],{"class":676},[637,59781,680],{"class":642},[637,59783,59784],{"class":683}," MarchingCube",[637,59786,687],{"class":642},[637,59788,59789],{"class":683}," MarchingCubes",[637,59791,687],{"class":642},[637,59793,59794],{"class":683}," MarchingPlane",[637,59796,687],{"class":642},[637,59798,690],{"class":683},[637,59800,693],{"class":642},[637,59802,696],{"class":676},[637,59804,699],{"class":642},[637,59806,702],{"class":663},[637,59808,705],{"class":642},[637,59810,59811,59813,59815,59817,59819,59821,59823,59825],{"class":639,"line":708},[637,59812,677],{"class":676},[637,59814,680],{"class":642},[637,59816,715],{"class":683},[637,59818,693],{"class":642},[637,59820,696],{"class":676},[637,59822,699],{"class":642},[637,59824,724],{"class":663},[637,59826,705],{"class":642},[637,59828,59829,59831,59833,59836,59838,59840,59842,59844,59846,59848],{"class":639,"line":729},[637,59830,677],{"class":676},[637,59832,680],{"class":642},[637,59834,59835],{"class":683}," NoToneMapping",[637,59837,687],{"class":642},[637,59839,30597],{"class":683},[637,59841,693],{"class":642},[637,59843,696],{"class":676},[637,59845,699],{"class":642},[637,59847,4626],{"class":663},[637,59849,705],{"class":642},[637,59851,59852],{"class":639,"line":739},[637,59853,742],{"emptyLinePlaceholder":594},[637,59855,59856,59858,59861,59863,59865,59867,59870,59872,59874,59876,59878,59880,59882,59884],{"class":639,"line":745},[637,59857,2415],{"class":650},[637,59859,59860],{"class":683}," rand ",[637,59862,657],{"class":642},[637,59864,7080],{"class":642},[637,59866,3677],{"class":650},[637,59868,59869],{"class":683}," (Math",[637,59871,1146],{"class":642},[637,59873,57040],{"class":2434},[637,59875,6984],{"class":683},[637,59877,8505],{"class":642},[637,59879,2511],{"class":2501},[637,59881,4734],{"class":683},[637,59883,23121],{"class":642},[637,59885,59886],{"class":2501}," 1.25\n",[637,59888,59889,59891,59894,59896,59898,59900,59902,59904,59906,59908,59910,59913,59915,59917,59919,59921,59923,59925,59928,59930,59932,59935,59937,59939,59941],{"class":639,"line":755},[637,59890,2415],{"class":650},[637,59892,59893],{"class":683}," positions ",[637,59895,657],{"class":642},[637,59897,8428],{"class":683},[637,59899,1146],{"class":642},[637,59901,8433],{"class":2434},[637,59903,2437],{"class":683},[637,59905,8438],{"class":642},[637,59907,8441],{"class":646},[637,59909,1218],{"class":642},[637,59911,59912],{"class":2501}," 40",[637,59914,8449],{"class":642},[637,59916,7080],{"class":642},[637,59918,3677],{"class":650},[637,59920,7873],{"class":642},[637,59922,30597],{"class":2434},[637,59924,2437],{"class":683},[637,59926,59927],{"class":2434},"rand",[637,59929,3674],{"class":683},[637,59931,687],{"class":642},[637,59933,59934],{"class":2434}," rand",[637,59936,3674],{"class":683},[637,59938,687],{"class":642},[637,59940,59934],{"class":2434},[637,59942,59943],{"class":683},"()))\n",[637,59945,59946,59948,59950],{"class":639,"line":778},[637,59947,732],{"class":642},[637,59949,647],{"class":646},[637,59951,669],{"class":642},[637,59953,59954],{"class":639,"line":790},[637,59955,742],{"emptyLinePlaceholder":594},[637,59957,59958,59960,59962],{"class":639,"line":800},[637,59959,643],{"class":642},[637,59961,750],{"class":646},[637,59963,669],{"class":642},[637,59965,59966,59968,59970,59972,59974,59976,59978,59980,59983,59985,59987,59990,59992],{"class":639,"line":805},[637,59967,758],{"class":642},[637,59969,761],{"class":646},[637,59971,764],{"class":650},[637,59973,657],{"class":642},[637,59975,660],{"class":642},[637,59977,771],{"class":663},[637,59979,660],{"class":642},[637,59981,59982],{"class":650}," :tone-mapping",[637,59984,657],{"class":642},[637,59986,660],{"class":642},[637,59988,59989],{"class":663},"NoToneMapping",[637,59991,660],{"class":642},[637,59993,669],{"class":642},[637,59995,59996,59998,60000],{"class":639,"line":827},[637,59997,781],{"class":642},[637,59999,784],{"class":646},[637,60001,787],{"class":642},[637,60003,60004,60006,60008],{"class":639,"line":631},[637,60005,781],{"class":642},[637,60007,795],{"class":646},[637,60009,787],{"class":642},[637,60011,60012],{"class":639,"line":850},[637,60013,742],{"emptyLinePlaceholder":594},[637,60015,60017,60019,60021,60023,60025,60027,60029,60031,60034,60036,60038,60041,60043],{"class":60016,"line":861},[639,673],[637,60018,781],{"class":642},[637,60020,449],{"class":646},[637,60022,51838],{"class":650},[637,60024,657],{"class":642},[637,60026,660],{"class":642},[637,60028,38412],{"class":663},[637,60030,660],{"class":642},[637,60032,60033],{"class":650}," :max-poly-count",[637,60035,657],{"class":642},[637,60037,660],{"class":642},[637,60039,60040],{"class":663},"40000",[637,60042,660],{"class":642},[637,60044,669],{"class":642},[637,60046,60048,60050,60053,60056,60058,60060,60062,60064],{"class":60047,"line":872},[639,673],[637,60049,853],{"class":642},[637,60051,60052],{"class":646},"MarchingPlane",[637,60054,60055],{"class":650}," plane-type",[637,60057,657],{"class":642},[637,60059,660],{"class":642},[637,60061,39730],{"class":663},[637,60063,660],{"class":642},[637,60065,787],{"class":642},[637,60067,60069,60071],{"class":60068,"line":882},[639,673],[637,60070,853],{"class":642},[637,60072,60073],{"class":646},"MarchingCube\n",[637,60075,60077,60079,60081,60083,60086],{"class":60076,"line":632},[639,673],[637,60078,7977],{"class":650},[637,60080,657],{"class":642},[637,60082,660],{"class":642},[637,60084,60085],{"class":663},"position, i of positions",[637,60087,3131],{"class":642},[637,60089,60091,60093,60095,60097,60099],{"class":60090,"line":902},[639,673],[637,60092,7991],{"class":650},[637,60094,657],{"class":642},[637,60096,660],{"class":642},[637,60098,8621],{"class":663},[637,60100,3131],{"class":642},[637,60102,60104,60106,60108,60110,60112],{"class":60103,"line":912},[639,673],[637,60105,8005],{"class":650},[637,60107,657],{"class":642},[637,60109,660],{"class":642},[637,60111,4130],{"class":663},[637,60113,3131],{"class":642},[637,60115,60117],{"class":60116,"line":2625},[639,673],[637,60118,8033],{"class":642},[637,60120,60122,60124,60126,60129,60131,60133,60136,60138,60141,60143,60145,60147,60149,60151,60153,60155,60158,60160,60163,60165,60167,60169,60171],{"class":60121,"line":2634},[639,673],[637,60123,853],{"class":642},[637,60125,11426],{"class":646},[637,60127,60128],{"class":650}," specular",[637,60130,657],{"class":642},[637,60132,660],{"class":642},[637,60134,60135],{"class":663},"#111111",[637,60137,660],{"class":642},[637,60139,60140],{"class":650}," :shininess",[637,60142,657],{"class":642},[637,60144,660],{"class":642},[637,60146,28432],{"class":663},[637,60148,660],{"class":642},[637,60150,2689],{"class":650},[637,60152,657],{"class":642},[637,60154,660],{"class":642},[637,60156,60157],{"class":663},"#049ef4",[637,60159,660],{"class":642},[637,60161,60162],{"class":650}," :reflectivity",[637,60164,657],{"class":642},[637,60166,660],{"class":642},[637,60168,1874],{"class":663},[637,60170,660],{"class":642},[637,60172,787],{"class":642},[637,60174,60176,60178,60180],{"class":60175,"line":2654},[639,673],[637,60177,895],{"class":642},[637,60179,449],{"class":646},[637,60181,669],{"class":642},[637,60183,60184],{"class":639,"line":2663},[637,60185,742],{"emptyLinePlaceholder":594},[637,60187,60188,60190,60192],{"class":639,"line":2672},[637,60189,781],{"class":642},[637,60191,810],{"class":646},[637,60193,787],{"class":642},[637,60195,60196,60198,60200,60202,60204,60206,60209,60211,60213,60215,60217,60219,60221,60223,60225,60227,60230,60232],{"class":639,"line":2681},[637,60197,781],{"class":642},[637,60199,9700],{"class":646},[637,60201,2689],{"class":650},[637,60203,657],{"class":642},[637,60205,660],{"class":642},[637,60207,60208],{"class":663},"#ffffff",[637,60210,660],{"class":642},[637,60212,1867],{"class":650},[637,60214,657],{"class":642},[637,60216,660],{"class":642},[637,60218,21394],{"class":663},[637,60220,660],{"class":642},[637,60222,1485],{"class":650},[637,60224,657],{"class":642},[637,60226,660],{"class":642},[637,60228,60229],{"class":663},"[0, 200, 0]",[637,60231,660],{"class":642},[637,60233,787],{"class":642},[637,60235,60236,60238,60240,60242,60244,60246,60248,60250,60252,60254,60256,60258,60260,60262,60264,60266,60269,60271],{"class":639,"line":2703},[637,60237,781],{"class":642},[637,60239,9700],{"class":646},[637,60241,2689],{"class":650},[637,60243,657],{"class":642},[637,60245,660],{"class":642},[637,60247,60208],{"class":663},[637,60249,660],{"class":642},[637,60251,1867],{"class":650},[637,60253,657],{"class":642},[637,60255,660],{"class":642},[637,60257,21394],{"class":663},[637,60259,660],{"class":642},[637,60261,1485],{"class":650},[637,60263,657],{"class":642},[637,60265,660],{"class":642},[637,60267,60268],{"class":663},"[100, 200, 100]",[637,60270,660],{"class":642},[637,60272,787],{"class":642},[637,60274,60275,60277,60279],{"class":639,"line":2747},[637,60276,905],{"class":642},[637,60278,761],{"class":646},[637,60280,669],{"class":642},[637,60282,60283,60285,60287],{"class":639,"line":2756},[637,60284,732],{"class":642},[637,60286,750],{"class":646},[637,60288,669],{"class":642},[504,60290,922],{"id":921},[927,60292,60293,60303],{},[930,60294,60295],{},[933,60296,60297,60299,60301],{},[936,60298,938],{"align":997},[936,60300,941],{"align":997},[936,60302,944],{},[946,60304,60305,60319,60334,60348],{},[933,60306,60307,60311,60314],{},[951,60308,60309],{"align":997},[618,60310,27974],{},[951,60312,60313],{"align":997},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[951,60315,60316],{},[618,60317,60318],{},"28",[933,60320,60321,60326,60329],{},[951,60322,60323],{"align":997},[618,60324,60325],{},"maxPolyCount",[951,60327,60328],{"align":997},"Maximum number of polygons to generate.",[951,60330,60331],{},[618,60332,60333],{},"10000",[933,60335,60336,60341,60344],{},[951,60337,60338],{"align":997},[618,60339,60340],{},"enableUvs",[951,60342,60343],{"align":997},"Whether UVs are enabled.",[951,60345,60346],{},[618,60347,971],{},[933,60349,60350,60355,60358],{},[951,60351,60352],{"align":997},[618,60353,60354],{},"enableColors",[951,60356,60357],{"align":997},"Whether vertex colors are enabled.",[951,60359,60360],{},[618,60361,971],{},[504,60363,60365],{"id":60364},"marchingcube-props","MarchingCube Props",[927,60367,60368,60378],{},[930,60369,60370],{},[933,60371,60372,60374,60376],{},[936,60373,938],{"align":997},[936,60375,941],{"align":997},[936,60377,944],{},[946,60379,60380,60394],{},[933,60381,60382,60387,60390],{},[951,60383,60384],{"align":997},[618,60385,60386],{},"strength",[951,60388,60389],{"align":997},"How strongly this cube affects the marching cube field.",[951,60391,60392],{},[618,60393,1946],{},[933,60395,60396,60401,60407],{},[951,60397,60398],{"align":997},[618,60399,60400],{},"subtract",[951,60402,60403,60404,60406],{"align":997},"How quickly strength moves to ",[618,60405,965],{}," over distance.",[951,60408,60409],{},[618,60410,32439],{},[504,60412,60414],{"id":60413},"marchingplane-props","MarchingPlane Props",[927,60416,60417,60427],{},[930,60418,60419],{},[933,60420,60421,60423,60425],{},[936,60422,938],{"align":997},[936,60424,941],{"align":997},[936,60426,944],{},[946,60428,60429,60447,60460],{},[933,60430,60431,60436,60442],{},[951,60432,60433],{"align":997},[618,60434,60435],{},"planeType",[951,60437,60438,60439],{"align":997},"Which axis the plane appears on. ",[618,60440,60441],{},"'x' | 'y' | 'z'",[951,60443,60444],{},[618,60445,60446],{},"'x'",[933,60448,60449,60453,60456],{},[951,60450,60451],{"align":997},[618,60452,60386],{},[951,60454,60455],{"align":997},"How strongly this plane affects the marching cube field.",[951,60457,60458],{},[618,60459,1946],{},[933,60461,60462,60466,60470],{},[951,60463,60464],{"align":997},[618,60465,60400],{},[951,60467,60403,60468,60406],{"align":997},[618,60469,965],{},[951,60471,60472],{},[618,60473,32439],{},[1327,60475,60476],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":60478},[60479,60480,60481,60482],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":60364,"depth":578,"text":60365},{"id":60413,"depth":578,"text":60414},"Create organic blob-like shapes using metaballs.",{},{"title":449,"description":60483},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":60488,"title":453,"body":60489,"description":61767,"extension":591,"links":592,"meta":61768,"navigation":594,"path":454,"seo":61769,"stem":455,"__hash__":61770},"docs/2.api/9.objects/reflector.md",{"type":501,"value":60490,"toc":61760},[60491,60496,60510,60512,60730,60732,60815,60823,60827,60838,61441,61444,61447,61451,61757],[608,60492,60493],{},[60494,60495],"objects-reflector",{},[614,60497,2776,60498,60500,60501,60506,60507,60509],{},[618,60499,7317],{}," package provides an abstraction of the ",[1140,60502,60505],{"href":60503,"rel":60504},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1144],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[618,60508,4292],{}," so all the default props can be passed as well:",[504,60511,15],{"id":624},[626,60513,60515],{"className":628,"code":60514,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    \u003COrbitControls />\n\n    \u003CSuspense>\n      \u003CReflector\n        :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n        :position-y=\"-2\"\n        color=\"#fff\"\n      >\n        \u003CTresCircleGeometry :args=\"[10, 10]\" />\n      \u003C/Reflector>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,60516,60517,60537,60556,60564,60568,60576,60589,60608,60616,60620,60628,60635,60649,60663,60676,60680,60698,60706,60714,60722],{"__ignoreMap":576},[637,60518,60519,60521,60523,60525,60527,60529,60531,60533,60535],{"class":639,"line":577},[637,60520,643],{"class":642},[637,60522,647],{"class":646},[637,60524,651],{"class":650},[637,60526,654],{"class":650},[637,60528,657],{"class":642},[637,60530,660],{"class":642},[637,60532,664],{"class":663},[637,60534,660],{"class":642},[637,60536,669],{"class":642},[637,60538,60539,60541,60543,60546,60548,60550,60552,60554],{"class":639,"line":578},[637,60540,677],{"class":676},[637,60542,680],{"class":642},[637,60544,60545],{"class":683}," Reflector",[637,60547,693],{"class":642},[637,60549,696],{"class":676},[637,60551,699],{"class":642},[637,60553,702],{"class":663},[637,60555,705],{"class":642},[637,60557,60558,60560,60562],{"class":639,"line":708},[637,60559,732],{"class":642},[637,60561,647],{"class":646},[637,60563,669],{"class":642},[637,60565,60566],{"class":639,"line":729},[637,60567,742],{"emptyLinePlaceholder":594},[637,60569,60570,60572,60574],{"class":639,"line":739},[637,60571,643],{"class":642},[637,60573,750],{"class":646},[637,60575,669],{"class":642},[637,60577,60578,60580,60582,60584,60587],{"class":639,"line":745},[637,60579,758],{"class":642},[637,60581,761],{"class":646},[637,60583,42610],{"class":650},[637,60585,60586],{"class":650}," alpha",[637,60588,669],{"class":642},[637,60590,60591,60593,60595,60597,60599,60601,60604,60606],{"class":639,"line":755},[637,60592,781],{"class":642},[637,60594,784],{"class":646},[637,60596,1485],{"class":650},[637,60598,657],{"class":642},[637,60600,660],{"class":642},[637,60602,60603],{"class":663},"[0, 0, 3]",[637,60605,660],{"class":642},[637,60607,787],{"class":642},[637,60609,60610,60612,60614],{"class":639,"line":778},[637,60611,781],{"class":642},[637,60613,795],{"class":646},[637,60615,787],{"class":642},[637,60617,60618],{"class":639,"line":790},[637,60619,742],{"emptyLinePlaceholder":594},[637,60621,60622,60624,60626],{"class":639,"line":800},[637,60623,781],{"class":642},[637,60625,21652],{"class":646},[637,60627,669],{"class":642},[637,60629,60630,60632],{"class":639,"line":805},[637,60631,853],{"class":642},[637,60633,60634],{"class":646},"Reflector\n",[637,60636,60637,60640,60642,60644,60647],{"class":639,"line":827},[637,60638,60639],{"class":650},"        :rotation",[637,60641,657],{"class":642},[637,60643,660],{"class":642},[637,60645,60646],{"class":663},"[-Math.PI * 0.5, 0, 0]",[637,60648,3131],{"class":642},[637,60650,60651,60654,60656,60658,60661],{"class":639,"line":631},[637,60652,60653],{"class":650},"        :position-y",[637,60655,657],{"class":642},[637,60657,660],{"class":642},[637,60659,60660],{"class":663},"-2",[637,60662,3131],{"class":642},[637,60664,60665,60667,60669,60671,60674],{"class":639,"line":850},[637,60666,8642],{"class":650},[637,60668,657],{"class":642},[637,60670,660],{"class":642},[637,60672,60673],{"class":663},"#fff",[637,60675,3131],{"class":642},[637,60677,60678],{"class":639,"line":861},[637,60679,53820],{"class":642},[637,60681,60682,60684,60686,60688,60690,60692,60694,60696],{"class":639,"line":872},[637,60683,864],{"class":642},[637,60685,10135],{"class":646},[637,60687,1959],{"class":650},[637,60689,657],{"class":642},[637,60691,660],{"class":642},[637,60693,11961],{"class":663},[637,60695,660],{"class":642},[637,60697,787],{"class":642},[637,60699,60700,60702,60704],{"class":639,"line":882},[637,60701,885],{"class":642},[637,60703,453],{"class":646},[637,60705,669],{"class":642},[637,60707,60708,60710,60712],{"class":639,"line":632},[637,60709,895],{"class":642},[637,60711,21652],{"class":646},[637,60713,669],{"class":642},[637,60715,60716,60718,60720],{"class":639,"line":902},[637,60717,905],{"class":642},[637,60719,761],{"class":646},[637,60721,669],{"class":642},[637,60723,60724,60726,60728],{"class":639,"line":912},[637,60725,732],{"class":642},[637,60727,750],{"class":646},[637,60729,669],{"class":642},[504,60731,922],{"id":921},[927,60733,60734,60744],{},[930,60735,60736],{},[933,60737,60738,60740,60742],{},[936,60739,938],{"align":997},[936,60741,941],{"align":997},[936,60743,944],{},[946,60745,60746,60758,60769,60780,60791,60803],{},[933,60747,60748,60752,60755],{},[951,60749,60750],{"align":997},[1669,60751,7547],{},[951,60753,60754],{"align":997},"The base color that's combine with the mirror effect",[951,60756,60757],{},"'#333'",[933,60759,60760,60764,60767],{},[951,60761,60762],{"align":997},[1669,60763,46131],{},[951,60765,60766],{"align":997},"the width of the texture to render on the mirror",[951,60768,27983],{},[933,60770,60771,60775,60778],{},[951,60772,60773],{"align":997},[1669,60774,46148],{},[951,60776,60777],{"align":997},"the height of the texture to render on the mirror",[951,60779,27983],{},[933,60781,60782,60786,60789],{},[951,60783,60784],{"align":997},[1669,60785,46265],{},[951,60787,60788],{"align":997},"to use the clipBias property",[951,60790,965],{},[933,60792,60793,60798,60801],{},[951,60794,60795],{"align":997},[1669,60796,60797],{},"multisample",[951,60799,60800],{"align":997},"how many samplers will be render",[951,60802,9653],{},[933,60804,60805,60810,60812],{},[951,60806,60807],{"align":997},[1669,60808,60809],{},"shader",[951,60811,47989],{"align":997},[951,60813,60814],{},"Reflector.ReflectorShader",[3199,60816,60817],{},[614,60818,60819,60820,60822],{},"All the props except the ",[618,60821,7547],{},", are not reactive",[504,60824,60826],{"id":60825},"custom-mirror-effect","Custom mirror effect",[614,60828,60829,60830,1672,60833,1688,60835,60837],{},"You can provide your own shader by passing a full shader object with ",[618,60831,60832],{},"uniforms",[618,60834,26182],{},[618,60836,26197],{},". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[626,60839,60841],{"className":628,"code":60840,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = reflectorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CReflector\n    ref=\"reflectorRef\"\n    :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n    :position-y=\"-2\"\n    color=\"#fff\"\n    :shader=\"customShader\"\n  >\n    \u003CTresCircleGeometry :args=\"[10, 10]\" />\n  \u003C/Reflector>\n\u003C/template>\n",[618,60842,60843,60863,60881,60900,60918,60922,60935,60939,60950,60959,60975,60992,61009,61026,61030,61042,61047,61052,61057,61062,61067,61072,61077,61087,61098,61103,61108,61113,61117,61121,61126,61131,61136,61141,61146,61150,61154,61159,61164,61169,61174,61179,61184,61189,61194,61202,61206,61210,61227,61244,61273,61306,61312,61320,61324,61332,61338,61351,61364,61377,61389,61403,61407,61425,61433],{"__ignoreMap":576},[637,60844,60845,60847,60849,60851,60853,60855,60857,60859,60861],{"class":639,"line":577},[637,60846,643],{"class":642},[637,60848,647],{"class":646},[637,60850,651],{"class":650},[637,60852,654],{"class":650},[637,60854,657],{"class":642},[637,60856,660],{"class":642},[637,60858,664],{"class":663},[637,60860,660],{"class":642},[637,60862,669],{"class":642},[637,60864,60865,60867,60869,60871,60873,60875,60877,60879],{"class":639,"line":578},[637,60866,677],{"class":676},[637,60868,680],{"class":642},[637,60870,60545],{"class":683},[637,60872,693],{"class":642},[637,60874,696],{"class":676},[637,60876,699],{"class":642},[637,60878,702],{"class":663},[637,60880,705],{"class":642},[637,60882,60883,60885,60887,60890,60892,60894,60896,60898],{"class":639,"line":708},[637,60884,677],{"class":676},[637,60886,680],{"class":642},[637,60888,60889],{"class":683}," useLoop",[637,60891,693],{"class":642},[637,60893,696],{"class":676},[637,60895,699],{"class":642},[637,60897,724],{"class":663},[637,60899,705],{"class":642},[637,60901,60902,60904,60906,60908,60910,60912,60914,60916],{"class":639,"line":729},[637,60903,677],{"class":676},[637,60905,680],{"class":642},[637,60907,3498],{"class":683},[637,60909,693],{"class":642},[637,60911,696],{"class":676},[637,60913,699],{"class":642},[637,60915,633],{"class":663},[637,60917,705],{"class":642},[637,60919,60920],{"class":639,"line":739},[637,60921,742],{"emptyLinePlaceholder":594},[637,60923,60924,60926,60929,60931,60933],{"class":639,"line":745},[637,60925,2415],{"class":650},[637,60927,60928],{"class":683}," reflectorRef ",[637,60930,657],{"class":642},[637,60932,3498],{"class":2434},[637,60934,6535],{"class":683},[637,60936,60937],{"class":639,"line":755},[637,60938,742],{"emptyLinePlaceholder":594},[637,60940,60941,60943,60946,60948],{"class":639,"line":778},[637,60942,2415],{"class":650},[637,60944,60945],{"class":683}," customShader ",[637,60947,657],{"class":642},[637,60949,1204],{"class":642},[637,60951,60952,60955,60957],{"class":639,"line":790},[637,60953,60954],{"class":646},"  uniforms",[637,60956,1218],{"class":642},[637,60958,1204],{"class":642},[637,60960,60961,60963,60965,60967,60969,60971,60973],{"class":639,"line":800},[637,60962,24183],{"class":646},[637,60964,1218],{"class":642},[637,60966,680],{"class":642},[637,60968,26755],{"class":646},[637,60970,1218],{"class":642},[637,60972,3648],{"class":642},[637,60974,7089],{"class":642},[637,60976,60977,60980,60982,60984,60986,60988,60990],{"class":639,"line":805},[637,60978,60979],{"class":646},"    tDiffuse",[637,60981,1218],{"class":642},[637,60983,680],{"class":642},[637,60985,26755],{"class":646},[637,60987,1218],{"class":642},[637,60989,3648],{"class":642},[637,60991,7089],{"class":642},[637,60993,60994,60997,60999,61001,61003,61005,61007],{"class":639,"line":827},[637,60995,60996],{"class":646},"    textureMatrix",[637,60998,1218],{"class":642},[637,61000,680],{"class":642},[637,61002,26755],{"class":646},[637,61004,1218],{"class":642},[637,61006,3648],{"class":642},[637,61008,7089],{"class":642},[637,61010,61011,61014,61016,61018,61020,61022,61024],{"class":639,"line":631},[637,61012,61013],{"class":646},"    time",[637,61015,1218],{"class":642},[637,61017,680],{"class":642},[637,61019,26755],{"class":646},[637,61021,1218],{"class":642},[637,61023,2506],{"class":2501},[637,61025,7089],{"class":642},[637,61027,61028],{"class":639,"line":850},[637,61029,2597],{"class":642},[637,61031,61032,61035,61037,61040],{"class":639,"line":861},[637,61033,61034],{"class":646},"  vertexShader",[637,61036,1218],{"class":642},[637,61038,61039],{"class":1209}," /* glsl */",[637,61041,22696],{"class":642},[637,61043,61044],{"class":639,"line":872},[637,61045,61046],{"class":663},"    uniform mat4 textureMatrix;\n",[637,61048,61049],{"class":639,"line":882},[637,61050,61051],{"class":663},"    varying vec4 vUv;\n",[637,61053,61054],{"class":639,"line":632},[637,61055,61056],{"class":663},"    varying vec2 vPos;\n",[637,61058,61059],{"class":639,"line":902},[637,61060,61061],{"class":663},"    void main() {\n",[637,61063,61064],{"class":639,"line":912},[637,61065,61066],{"class":663},"      vUv = textureMatrix * vec4(position, 1.0);\n",[637,61068,61069],{"class":639,"line":2625},[637,61070,61071],{"class":663},"      vPos = position.xy;\n",[637,61073,61074],{"class":639,"line":2634},[637,61075,61076],{"class":663},"      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[637,61078,61079,61082,61085],{"class":639,"line":2654},[637,61080,61081],{"class":663},"    }",[637,61083,61084],{"class":642},"`",[637,61086,2488],{"class":642},[637,61088,61089,61092,61094,61096],{"class":639,"line":2663},[637,61090,61091],{"class":646},"  fragmentShader",[637,61093,1218],{"class":642},[637,61095,61039],{"class":1209},[637,61097,22696],{"class":642},[637,61099,61100],{"class":639,"line":2672},[637,61101,61102],{"class":663},"    uniform vec3 color;\n",[637,61104,61105],{"class":639,"line":2681},[637,61106,61107],{"class":663},"    uniform sampler2D tDiffuse;\n",[637,61109,61110],{"class":639,"line":2703},[637,61111,61112],{"class":663},"    uniform float time;\n",[637,61114,61115],{"class":639,"line":2747},[637,61116,61051],{"class":663},[637,61118,61119],{"class":639,"line":2756},[637,61120,61056],{"class":663},[637,61122,61123],{"class":639,"line":2765},[637,61124,61125],{"class":663},"    float blendOverlay(float base, float blend) {\n",[637,61127,61128],{"class":639,"line":3922},[637,61129,61130],{"class":663},"      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[637,61132,61133],{"class":639,"line":3953},[637,61134,61135],{"class":663},"    }\n",[637,61137,61138],{"class":639,"line":3974},[637,61139,61140],{"class":663},"    vec3 blendOverlay(vec3 base, vec3 blend) {\n",[637,61142,61143],{"class":639,"line":3993},[637,61144,61145],{"class":663},"      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[637,61147,61148],{"class":639,"line":4025},[637,61149,61135],{"class":663},[637,61151,61152],{"class":639,"line":4034},[637,61153,61061],{"class":663},[637,61155,61156],{"class":639,"line":4043},[637,61157,61158],{"class":663},"      float dist = length(vPos);\n",[637,61160,61161],{"class":639,"line":21441},[637,61162,61163],{"class":663},"      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[637,61165,61166],{"class":639,"line":21456},[637,61167,61168],{"class":663},"      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[637,61170,61171],{"class":639,"line":21471},[637,61172,61173],{"class":663},"      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[637,61175,61176],{"class":639,"line":21476},[637,61177,61178],{"class":663},"      vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[637,61180,61181],{"class":639,"line":21483},[637,61182,61183],{"class":663},"      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[637,61185,61186],{"class":639,"line":21488},[637,61187,61188],{"class":663},"      #include \u003Ctonemapping_fragment>\n",[637,61190,61191],{"class":639,"line":21494},[637,61192,61193],{"class":663},"      #include \u003Ccolorspace_fragment>\n",[637,61195,61196,61198,61200],{"class":639,"line":21515},[637,61197,61081],{"class":663},[637,61199,61084],{"class":642},[637,61201,2488],{"class":642},[637,61203,61204],{"class":639,"line":21521},[637,61205,1325],{"class":642},[637,61207,61208],{"class":639,"line":21528},[637,61209,742],{"emptyLinePlaceholder":594},[637,61211,61212,61214,61216,61219,61221,61223,61225],{"class":639,"line":21533},[637,61213,2415],{"class":650},[637,61215,680],{"class":642},[637,61217,61218],{"class":683}," onBeforeRender ",[637,61220,2428],{"class":642},[637,61222,2431],{"class":642},[637,61224,60889],{"class":2434},[637,61226,6535],{"class":683},[637,61228,61229,61232,61234,61236,61238,61240,61242],{"class":639,"line":21554},[637,61230,61231],{"class":2434},"onBeforeRender",[637,61233,2437],{"class":683},[637,61235,39676],{"class":642},[637,61237,39679],{"class":6838},[637,61239,39693],{"class":642},[637,61241,3677],{"class":650},[637,61243,1204],{"class":642},[637,61245,61246,61248,61251,61253,61256,61258,61260,61262,61264,61266,61268,61270],{"class":639,"line":21567},[637,61247,56947],{"class":650},[637,61249,61250],{"class":683}," uniforms",[637,61252,2431],{"class":642},[637,61254,61255],{"class":683}," reflectorRef",[637,61257,1146],{"class":642},[637,61259,3685],{"class":683},[637,61261,3688],{"class":642},[637,61263,9326],{"class":683},[637,61265,3688],{"class":642},[637,61267,5200],{"class":683},[637,61269,3688],{"class":642},[637,61271,61272],{"class":683},"uniforms\n",[637,61274,61275,61277,61279,61281,61283,61286,61288,61290,61292,61294,61296,61298,61300,61302,61304],{"class":639,"line":21593},[637,61276,21254],{"class":676},[637,61278,3074],{"class":646},[637,61280,60832],{"class":683},[637,61282,3688],{"class":642},[637,61284,61285],{"class":683},"time",[637,61287,4734],{"class":646},[637,61289,8438],{"class":642},[637,61291,61250],{"class":683},[637,61293,1146],{"class":642},[637,61295,61285],{"class":683},[637,61297,1146],{"class":642},[637,61299,3685],{"class":683},[637,61301,2431],{"class":642},[637,61303,39679],{"class":683},[637,61305,17798],{"class":642},[637,61307,61308,61310],{"class":639,"line":21598},[637,61309,2428],{"class":642},[637,61311,2448],{"class":683},[637,61313,61314,61316,61318],{"class":639,"line":21605},[637,61315,732],{"class":642},[637,61317,647],{"class":646},[637,61319,669],{"class":642},[637,61321,61322],{"class":639,"line":21614},[637,61323,742],{"emptyLinePlaceholder":594},[637,61325,61326,61328,61330],{"class":639,"line":21619},[637,61327,643],{"class":642},[637,61329,750],{"class":646},[637,61331,669],{"class":642},[637,61333,61334,61336],{"class":639,"line":21628},[637,61335,758],{"class":642},[637,61337,60634],{"class":646},[637,61339,61340,61342,61344,61346,61349],{"class":639,"line":21647},[637,61341,18525],{"class":650},[637,61343,657],{"class":642},[637,61345,660],{"class":642},[637,61347,61348],{"class":663},"reflectorRef",[637,61350,3131],{"class":642},[637,61352,61353,61356,61358,61360,61362],{"class":639,"line":21657},[637,61354,61355],{"class":650},"    :rotation",[637,61357,657],{"class":642},[637,61359,660],{"class":642},[637,61361,60646],{"class":663},[637,61363,3131],{"class":642},[637,61365,61366,61369,61371,61373,61375],{"class":639,"line":21692},[637,61367,61368],{"class":650},"    :position-y",[637,61370,657],{"class":642},[637,61372,660],{"class":642},[637,61374,60660],{"class":663},[637,61376,3131],{"class":642},[637,61378,61379,61381,61383,61385,61387],{"class":639,"line":21701},[637,61380,24183],{"class":650},[637,61382,657],{"class":642},[637,61384,660],{"class":642},[637,61386,60673],{"class":663},[637,61388,3131],{"class":642},[637,61390,61391,61394,61396,61398,61401],{"class":639,"line":21721},[637,61392,61393],{"class":650},"    :shader",[637,61395,657],{"class":642},[637,61397,660],{"class":642},[637,61399,61400],{"class":663},"customShader",[637,61402,3131],{"class":642},[637,61404,61405],{"class":639,"line":21730},[637,61406,5173],{"class":642},[637,61408,61409,61411,61413,61415,61417,61419,61421,61423],{"class":639,"line":21739},[637,61410,781],{"class":642},[637,61412,10135],{"class":646},[637,61414,1959],{"class":650},[637,61416,657],{"class":642},[637,61418,660],{"class":642},[637,61420,11961],{"class":663},[637,61422,660],{"class":642},[637,61424,787],{"class":642},[637,61426,61427,61429,61431],{"class":639,"line":21758},[637,61428,905],{"class":642},[637,61430,453],{"class":646},[637,61432,669],{"class":642},[637,61434,61435,61437,61439],{"class":639,"line":21801},[637,61436,732],{"class":642},[637,61438,750],{"class":646},[637,61440,669],{"class":642},[614,61442,61443],{},"The Reflector shader use the following configuration by default:",[614,61445,61446],{},"You can extend, modify or just play with them",[4051,61448,61450],{"id":61449},"default-shader","Default shader",[626,61452,61454],{"className":42024,"code":61453,"language":42026,"meta":576,"style":576},"const shader = {\n  name: 'ReflectorShader',\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n  uniform mat4 textureMatrix;\n  varying vec4 vUv;\n\n  #include \u003Ccommon>\n  #include \u003Clogdepthbuf_pars_vertex>\n\n  void main() {\n    vUv = textureMatrix * vec4( position, 1.0 );\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n    #include \u003Clogdepthbuf_vertex>\n\n  }`,\n  fragmentShader: /* glsl */`\n  uniform vec3 color;\n  uniform sampler2D tDiffuse;\n  varying vec4 vUv;\n\n  #include \u003Clogdepthbuf_pars_fragment>\n\n  float blendOverlay( float base, float blend ) {\n    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n  }\n\n  vec3 blendOverlay( vec3 base, vec3 blend ) {\n    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n  }\n\n  void main() {\n    #include \u003Clogdepthbuf_fragment>\n\n    vec4 base = texture2DProj( tDiffuse, vUv );\n    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n    #include \u003Ctonemapping_fragment>\n    #include \u003Ccolorspace_fragment>\n  }`\n\n}\n",[618,61455,61456,61467,61483,61491,61499,61509,61514,61522,61530,61534,61542,61550,61554,61558,61568,61573,61578,61582,61587,61592,61596,61601,61606,61611,61615,61620,61624,61633,61643,61648,61653,61657,61661,61666,61670,61675,61680,61684,61688,61693,61698,61702,61706,61710,61715,61719,61724,61729,61733,61738,61743,61749,61753],{"__ignoreMap":576},[637,61457,61458,61460,61463,61465],{"class":639,"line":577},[637,61459,2415],{"class":650},[637,61461,61462],{"class":683}," shader ",[637,61464,657],{"class":642},[637,61466,1204],{"class":642},[637,61468,61469,61472,61474,61476,61479,61481],{"class":639,"line":578},[637,61470,61471],{"class":646},"  name",[637,61473,1218],{"class":642},[637,61475,699],{"class":642},[637,61477,61478],{"class":663},"ReflectorShader",[637,61480,2440],{"class":642},[637,61482,2488],{"class":642},[637,61484,61485,61487,61489],{"class":639,"line":708},[637,61486,60954],{"class":646},[637,61488,1218],{"class":642},[637,61490,1204],{"class":642},[637,61492,61493,61495,61497],{"class":639,"line":729},[637,61494,24183],{"class":646},[637,61496,1218],{"class":642},[637,61498,1204],{"class":642},[637,61500,61501,61504,61506],{"class":639,"line":739},[637,61502,61503],{"class":646},"      value",[637,61505,1218],{"class":642},[637,61507,61508],{"class":642}," null\n",[637,61510,61511],{"class":639,"line":745},[637,61512,61513],{"class":642},"    },\n",[637,61515,61516,61518,61520],{"class":639,"line":755},[637,61517,60979],{"class":646},[637,61519,1218],{"class":642},[637,61521,1204],{"class":642},[637,61523,61524,61526,61528],{"class":639,"line":778},[637,61525,61503],{"class":646},[637,61527,1218],{"class":642},[637,61529,61508],{"class":642},[637,61531,61532],{"class":639,"line":790},[637,61533,61513],{"class":642},[637,61535,61536,61538,61540],{"class":639,"line":800},[637,61537,60996],{"class":646},[637,61539,1218],{"class":642},[637,61541,1204],{"class":642},[637,61543,61544,61546,61548],{"class":639,"line":805},[637,61545,61503],{"class":646},[637,61547,1218],{"class":642},[637,61549,61508],{"class":642},[637,61551,61552],{"class":639,"line":827},[637,61553,61135],{"class":642},[637,61555,61556],{"class":639,"line":631},[637,61557,2597],{"class":642},[637,61559,61560,61562,61564,61566],{"class":639,"line":850},[637,61561,61034],{"class":646},[637,61563,1218],{"class":642},[637,61565,61039],{"class":1209},[637,61567,22696],{"class":642},[637,61569,61570],{"class":639,"line":861},[637,61571,61572],{"class":663},"  uniform mat4 textureMatrix;\n",[637,61574,61575],{"class":639,"line":872},[637,61576,61577],{"class":663},"  varying vec4 vUv;\n",[637,61579,61580],{"class":639,"line":882},[637,61581,742],{"emptyLinePlaceholder":594},[637,61583,61584],{"class":639,"line":632},[637,61585,61586],{"class":663},"  #include \u003Ccommon>\n",[637,61588,61589],{"class":639,"line":902},[637,61590,61591],{"class":663},"  #include \u003Clogdepthbuf_pars_vertex>\n",[637,61593,61594],{"class":639,"line":912},[637,61595,742],{"emptyLinePlaceholder":594},[637,61597,61598],{"class":639,"line":2625},[637,61599,61600],{"class":663},"  void main() {\n",[637,61602,61603],{"class":639,"line":2634},[637,61604,61605],{"class":663},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[637,61607,61608],{"class":639,"line":2654},[637,61609,61610],{"class":663},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,61612,61613],{"class":639,"line":2663},[637,61614,742],{"emptyLinePlaceholder":594},[637,61616,61617],{"class":639,"line":2672},[637,61618,61619],{"class":663},"    #include \u003Clogdepthbuf_vertex>\n",[637,61621,61622],{"class":639,"line":2681},[637,61623,742],{"emptyLinePlaceholder":594},[637,61625,61626,61629,61631],{"class":639,"line":2703},[637,61627,61628],{"class":663},"  }",[637,61630,61084],{"class":642},[637,61632,2488],{"class":642},[637,61634,61635,61637,61639,61641],{"class":639,"line":2747},[637,61636,61091],{"class":646},[637,61638,1218],{"class":642},[637,61640,61039],{"class":1209},[637,61642,22696],{"class":642},[637,61644,61645],{"class":639,"line":2756},[637,61646,61647],{"class":663},"  uniform vec3 color;\n",[637,61649,61650],{"class":639,"line":2765},[637,61651,61652],{"class":663},"  uniform sampler2D tDiffuse;\n",[637,61654,61655],{"class":639,"line":3922},[637,61656,61577],{"class":663},[637,61658,61659],{"class":639,"line":3953},[637,61660,742],{"emptyLinePlaceholder":594},[637,61662,61663],{"class":639,"line":3974},[637,61664,61665],{"class":663},"  #include \u003Clogdepthbuf_pars_fragment>\n",[637,61667,61668],{"class":639,"line":3993},[637,61669,742],{"emptyLinePlaceholder":594},[637,61671,61672],{"class":639,"line":4025},[637,61673,61674],{"class":663},"  float blendOverlay( float base, float blend ) {\n",[637,61676,61677],{"class":639,"line":4034},[637,61678,61679],{"class":663},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,61681,61682],{"class":639,"line":4043},[637,61683,7857],{"class":663},[637,61685,61686],{"class":639,"line":21441},[637,61687,742],{"emptyLinePlaceholder":594},[637,61689,61690],{"class":639,"line":21456},[637,61691,61692],{"class":663},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,61694,61695],{"class":639,"line":21471},[637,61696,61697],{"class":663},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,61699,61700],{"class":639,"line":21476},[637,61701,7857],{"class":663},[637,61703,61704],{"class":639,"line":21483},[637,61705,742],{"emptyLinePlaceholder":594},[637,61707,61708],{"class":639,"line":21488},[637,61709,61600],{"class":663},[637,61711,61712],{"class":639,"line":21494},[637,61713,61714],{"class":663},"    #include \u003Clogdepthbuf_fragment>\n",[637,61716,61717],{"class":639,"line":21515},[637,61718,742],{"emptyLinePlaceholder":594},[637,61720,61721],{"class":639,"line":21521},[637,61722,61723],{"class":663},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,61725,61726],{"class":639,"line":21528},[637,61727,61728],{"class":663},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,61730,61731],{"class":639,"line":21533},[637,61732,742],{"emptyLinePlaceholder":594},[637,61734,61735],{"class":639,"line":21554},[637,61736,61737],{"class":663},"    #include \u003Ctonemapping_fragment>\n",[637,61739,61740],{"class":639,"line":21567},[637,61741,61742],{"class":663},"    #include \u003Ccolorspace_fragment>\n",[637,61744,61745,61747],{"class":639,"line":21593},[637,61746,61628],{"class":663},[637,61748,22696],{"class":642},[637,61750,61751],{"class":639,"line":21598},[637,61752,742],{"emptyLinePlaceholder":594},[637,61754,61755],{"class":639,"line":21605},[637,61756,1325],{"class":642},[1327,61758,61759],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":61761},[61762,61763,61764],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":60825,"depth":578,"text":60826,"children":61765},[61766],{"id":61449,"depth":708,"text":61450},"Create real-time reflections of your scene.",{},{"title":453,"description":61767},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",{"id":61772,"title":457,"body":61773,"description":62940,"extension":591,"links":592,"meta":62941,"navigation":594,"path":458,"seo":62942,"stem":459,"__hash__":62943},"docs/2.api/9.objects/refractor.md",{"type":501,"value":61774,"toc":62933},[61775,61780,61793,61795,62043,62045,62139,62147,62151,62159,62696,62699,62701,62930],[608,61776,61777],{},[61778,61779],"objects-refractor",{},[614,61781,2776,61782,60500,61784,61789,61790,61792],{},[618,61783,7317],{},[1140,61785,61788],{"href":61786,"rel":61787},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[1144],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[618,61791,4292],{}," so all the default props can be passed as well.",[504,61794,15],{"id":624},[626,61796,61798],{"className":628,"code":61797,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n    \u003COrbitControls />\n\n    \u003C!-- Place objects behind the refracting plane -->\n    \u003CTresMesh :position=\"[-2, 0, -2]\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshStandardMaterial color=\"hotpink\" />\n    \u003C/TresMesh>\n\n    \u003CSuspense>\n      \u003CRefractor color=\"#9ec8d4\">\n        \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n      \u003C/Refractor>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,61799,61800,61820,61839,61847,61851,61859,61871,61890,61898,61902,61907,61926,61934,61953,61961,61965,61973,61992,62011,62019,62027,62035],{"__ignoreMap":576},[637,61801,61802,61804,61806,61808,61810,61812,61814,61816,61818],{"class":639,"line":577},[637,61803,643],{"class":642},[637,61805,647],{"class":646},[637,61807,651],{"class":650},[637,61809,654],{"class":650},[637,61811,657],{"class":642},[637,61813,660],{"class":642},[637,61815,664],{"class":663},[637,61817,660],{"class":642},[637,61819,669],{"class":642},[637,61821,61822,61824,61826,61829,61831,61833,61835,61837],{"class":639,"line":578},[637,61823,677],{"class":676},[637,61825,680],{"class":642},[637,61827,61828],{"class":683}," Refractor",[637,61830,693],{"class":642},[637,61832,696],{"class":676},[637,61834,699],{"class":642},[637,61836,702],{"class":663},[637,61838,705],{"class":642},[637,61840,61841,61843,61845],{"class":639,"line":708},[637,61842,732],{"class":642},[637,61844,647],{"class":646},[637,61846,669],{"class":642},[637,61848,61849],{"class":639,"line":729},[637,61850,742],{"emptyLinePlaceholder":594},[637,61852,61853,61855,61857],{"class":639,"line":739},[637,61854,643],{"class":642},[637,61856,750],{"class":646},[637,61858,669],{"class":642},[637,61860,61861,61863,61865,61867,61869],{"class":639,"line":745},[637,61862,758],{"class":642},[637,61864,761],{"class":646},[637,61866,42610],{"class":650},[637,61868,60586],{"class":650},[637,61870,669],{"class":642},[637,61872,61873,61875,61877,61879,61881,61883,61886,61888],{"class":639,"line":755},[637,61874,781],{"class":642},[637,61876,784],{"class":646},[637,61878,1485],{"class":650},[637,61880,657],{"class":642},[637,61882,660],{"class":642},[637,61884,61885],{"class":663},"[0, 2, 8]",[637,61887,660],{"class":642},[637,61889,787],{"class":642},[637,61891,61892,61894,61896],{"class":639,"line":778},[637,61893,781],{"class":642},[637,61895,795],{"class":646},[637,61897,787],{"class":642},[637,61899,61900],{"class":639,"line":790},[637,61901,742],{"emptyLinePlaceholder":594},[637,61903,61904],{"class":639,"line":800},[637,61905,61906],{"class":1209},"    \u003C!-- Place objects behind the refracting plane -->\n",[637,61908,61909,61911,61913,61915,61917,61919,61922,61924],{"class":639,"line":805},[637,61910,781],{"class":642},[637,61912,856],{"class":646},[637,61914,1485],{"class":650},[637,61916,657],{"class":642},[637,61918,660],{"class":642},[637,61920,61921],{"class":663},"[-2, 0, -2]",[637,61923,660],{"class":642},[637,61925,669],{"class":642},[637,61927,61928,61930,61932],{"class":639,"line":827},[637,61929,853],{"class":642},[637,61931,27855],{"class":646},[637,61933,787],{"class":642},[637,61935,61936,61938,61940,61942,61944,61946,61949,61951],{"class":639,"line":631},[637,61937,853],{"class":642},[637,61939,2686],{"class":646},[637,61941,2689],{"class":650},[637,61943,657],{"class":642},[637,61945,660],{"class":642},[637,61947,61948],{"class":663},"hotpink",[637,61950,660],{"class":642},[637,61952,787],{"class":642},[637,61954,61955,61957,61959],{"class":639,"line":850},[637,61956,895],{"class":642},[637,61958,856],{"class":646},[637,61960,669],{"class":642},[637,61962,61963],{"class":639,"line":861},[637,61964,742],{"emptyLinePlaceholder":594},[637,61966,61967,61969,61971],{"class":639,"line":872},[637,61968,781],{"class":642},[637,61970,21652],{"class":646},[637,61972,669],{"class":642},[637,61974,61975,61977,61979,61981,61983,61985,61988,61990],{"class":639,"line":882},[637,61976,853],{"class":642},[637,61978,457],{"class":646},[637,61980,2689],{"class":650},[637,61982,657],{"class":642},[637,61984,660],{"class":642},[637,61986,61987],{"class":663},"#9ec8d4",[637,61989,660],{"class":642},[637,61991,669],{"class":642},[637,61993,61994,61996,61998,62000,62002,62004,62007,62009],{"class":639,"line":632},[637,61995,864],{"class":642},[637,61997,27772],{"class":646},[637,61999,1959],{"class":650},[637,62001,657],{"class":642},[637,62003,660],{"class":642},[637,62005,62006],{"class":663},"[8, 5]",[637,62008,660],{"class":642},[637,62010,787],{"class":642},[637,62012,62013,62015,62017],{"class":639,"line":902},[637,62014,885],{"class":642},[637,62016,457],{"class":646},[637,62018,669],{"class":642},[637,62020,62021,62023,62025],{"class":639,"line":912},[637,62022,895],{"class":642},[637,62024,21652],{"class":646},[637,62026,669],{"class":642},[637,62028,62029,62031,62033],{"class":639,"line":2625},[637,62030,905],{"class":642},[637,62032,761],{"class":646},[637,62034,669],{"class":642},[637,62036,62037,62039,62041],{"class":639,"line":2634},[637,62038,732],{"class":642},[637,62040,750],{"class":646},[637,62042,669],{"class":642},[504,62044,922],{"id":921},[927,62046,62047,62057],{},[930,62048,62049],{},[933,62050,62051,62053,62055],{},[936,62052,938],{"align":997},[936,62054,941],{"align":997},[936,62056,944],{},[946,62058,62059,62073,62086,62099,62112,62125],{},[933,62060,62061,62065,62068],{},[951,62062,62063],{"align":997},[1669,62064,7547],{},[951,62066,62067],{"align":997},"Color tint blended with the refracted image",[951,62069,62070],{},[618,62071,62072],{},"'#7f7f7f'",[933,62074,62075,62079,62082],{},[951,62076,62077],{"align":997},[1669,62078,46131],{},[951,62080,62081],{"align":997},"Width of the internal render target texture",[951,62083,62084],{},[618,62085,27983],{},[933,62087,62088,62092,62095],{},[951,62089,62090],{"align":997},[1669,62091,46148],{},[951,62093,62094],{"align":997},"Height of the internal render target texture",[951,62096,62097],{},[618,62098,27983],{},[933,62100,62101,62105,62108],{},[951,62102,62103],{"align":997},[1669,62104,46265],{},[951,62106,62107],{"align":997},"Clip bias for the virtual camera projection",[951,62109,62110],{},[618,62111,965],{},[933,62113,62114,62118,62121],{},[951,62115,62116],{"align":997},[1669,62117,60797],{},[951,62119,62120],{"align":997},"Number of MSAA samples for the render target",[951,62122,62123],{},[618,62124,9653],{},[933,62126,62127,62131,62134],{},[951,62128,62129],{"align":997},[1669,62130,60809],{},[951,62132,62133],{"align":997},"Custom shader object to override the built-in shader",[951,62135,62136],{},[618,62137,62138],{},"Refractor.RefractorShader",[3199,62140,62141],{},[614,62142,62143,62144,62146],{},"All the props except ",[618,62145,7547],{}," are not reactive",[504,62148,62150],{"id":62149},"custom-refraction-effect","Custom refraction effect",[614,62152,60829,62153,1672,62155,1688,62157,60837],{},[618,62154,60832],{},[618,62156,26182],{},[618,62158,26197],{},[626,62160,62162],{"className":628,"code":62161,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = refractorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRefractor\n    ref=\"refractorRef\"\n    color=\"#9ec8d4\"\n    :shader=\"customShader\"\n  >\n    \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n  \u003C/Refractor>\n\u003C/template>\n",[618,62163,62164,62184,62202,62220,62238,62242,62255,62259,62269,62277,62293,62309,62325,62341,62345,62355,62359,62363,62367,62371,62375,62379,62383,62391,62401,62405,62409,62413,62417,62421,62425,62429,62433,62437,62441,62445,62449,62453,62457,62461,62465,62469,62473,62477,62481,62489,62493,62497,62513,62529,62556,62588,62594,62602,62606,62614,62621,62634,62646,62658,62662,62680,62688],{"__ignoreMap":576},[637,62165,62166,62168,62170,62172,62174,62176,62178,62180,62182],{"class":639,"line":577},[637,62167,643],{"class":642},[637,62169,647],{"class":646},[637,62171,651],{"class":650},[637,62173,654],{"class":650},[637,62175,657],{"class":642},[637,62177,660],{"class":642},[637,62179,664],{"class":663},[637,62181,660],{"class":642},[637,62183,669],{"class":642},[637,62185,62186,62188,62190,62192,62194,62196,62198,62200],{"class":639,"line":578},[637,62187,677],{"class":676},[637,62189,680],{"class":642},[637,62191,61828],{"class":683},[637,62193,693],{"class":642},[637,62195,696],{"class":676},[637,62197,699],{"class":642},[637,62199,702],{"class":663},[637,62201,705],{"class":642},[637,62203,62204,62206,62208,62210,62212,62214,62216,62218],{"class":639,"line":708},[637,62205,677],{"class":676},[637,62207,680],{"class":642},[637,62209,60889],{"class":683},[637,62211,693],{"class":642},[637,62213,696],{"class":676},[637,62215,699],{"class":642},[637,62217,724],{"class":663},[637,62219,705],{"class":642},[637,62221,62222,62224,62226,62228,62230,62232,62234,62236],{"class":639,"line":729},[637,62223,677],{"class":676},[637,62225,680],{"class":642},[637,62227,3498],{"class":683},[637,62229,693],{"class":642},[637,62231,696],{"class":676},[637,62233,699],{"class":642},[637,62235,633],{"class":663},[637,62237,705],{"class":642},[637,62239,62240],{"class":639,"line":739},[637,62241,742],{"emptyLinePlaceholder":594},[637,62243,62244,62246,62249,62251,62253],{"class":639,"line":745},[637,62245,2415],{"class":650},[637,62247,62248],{"class":683}," refractorRef ",[637,62250,657],{"class":642},[637,62252,3498],{"class":2434},[637,62254,6535],{"class":683},[637,62256,62257],{"class":639,"line":755},[637,62258,742],{"emptyLinePlaceholder":594},[637,62260,62261,62263,62265,62267],{"class":639,"line":778},[637,62262,2415],{"class":650},[637,62264,60945],{"class":683},[637,62266,657],{"class":642},[637,62268,1204],{"class":642},[637,62270,62271,62273,62275],{"class":639,"line":790},[637,62272,60954],{"class":646},[637,62274,1218],{"class":642},[637,62276,1204],{"class":642},[637,62278,62279,62281,62283,62285,62287,62289,62291],{"class":639,"line":800},[637,62280,24183],{"class":646},[637,62282,1218],{"class":642},[637,62284,680],{"class":642},[637,62286,26755],{"class":646},[637,62288,1218],{"class":642},[637,62290,3648],{"class":642},[637,62292,7089],{"class":642},[637,62294,62295,62297,62299,62301,62303,62305,62307],{"class":639,"line":805},[637,62296,60979],{"class":646},[637,62298,1218],{"class":642},[637,62300,680],{"class":642},[637,62302,26755],{"class":646},[637,62304,1218],{"class":642},[637,62306,3648],{"class":642},[637,62308,7089],{"class":642},[637,62310,62311,62313,62315,62317,62319,62321,62323],{"class":639,"line":827},[637,62312,60996],{"class":646},[637,62314,1218],{"class":642},[637,62316,680],{"class":642},[637,62318,26755],{"class":646},[637,62320,1218],{"class":642},[637,62322,3648],{"class":642},[637,62324,7089],{"class":642},[637,62326,62327,62329,62331,62333,62335,62337,62339],{"class":639,"line":631},[637,62328,61013],{"class":646},[637,62330,1218],{"class":642},[637,62332,680],{"class":642},[637,62334,26755],{"class":646},[637,62336,1218],{"class":642},[637,62338,2506],{"class":2501},[637,62340,7089],{"class":642},[637,62342,62343],{"class":639,"line":850},[637,62344,2597],{"class":642},[637,62346,62347,62349,62351,62353],{"class":639,"line":861},[637,62348,61034],{"class":646},[637,62350,1218],{"class":642},[637,62352,61039],{"class":1209},[637,62354,22696],{"class":642},[637,62356,62357],{"class":639,"line":872},[637,62358,61046],{"class":663},[637,62360,62361],{"class":639,"line":882},[637,62362,61051],{"class":663},[637,62364,62365],{"class":639,"line":632},[637,62366,61056],{"class":663},[637,62368,62369],{"class":639,"line":902},[637,62370,61061],{"class":663},[637,62372,62373],{"class":639,"line":912},[637,62374,61066],{"class":663},[637,62376,62377],{"class":639,"line":2625},[637,62378,61071],{"class":663},[637,62380,62381],{"class":639,"line":2634},[637,62382,61076],{"class":663},[637,62384,62385,62387,62389],{"class":639,"line":2654},[637,62386,61081],{"class":663},[637,62388,61084],{"class":642},[637,62390,2488],{"class":642},[637,62392,62393,62395,62397,62399],{"class":639,"line":2663},[637,62394,61091],{"class":646},[637,62396,1218],{"class":642},[637,62398,61039],{"class":1209},[637,62400,22696],{"class":642},[637,62402,62403],{"class":639,"line":2672},[637,62404,61102],{"class":663},[637,62406,62407],{"class":639,"line":2681},[637,62408,61107],{"class":663},[637,62410,62411],{"class":639,"line":2703},[637,62412,61112],{"class":663},[637,62414,62415],{"class":639,"line":2747},[637,62416,61051],{"class":663},[637,62418,62419],{"class":639,"line":2756},[637,62420,61056],{"class":663},[637,62422,62423],{"class":639,"line":2765},[637,62424,61125],{"class":663},[637,62426,62427],{"class":639,"line":3922},[637,62428,61130],{"class":663},[637,62430,62431],{"class":639,"line":3953},[637,62432,61135],{"class":663},[637,62434,62435],{"class":639,"line":3974},[637,62436,61140],{"class":663},[637,62438,62439],{"class":639,"line":3993},[637,62440,61145],{"class":663},[637,62442,62443],{"class":639,"line":4025},[637,62444,61135],{"class":663},[637,62446,62447],{"class":639,"line":4034},[637,62448,61061],{"class":663},[637,62450,62451],{"class":639,"line":4043},[637,62452,61158],{"class":663},[637,62454,62455],{"class":639,"line":21441},[637,62456,61163],{"class":663},[637,62458,62459],{"class":639,"line":21456},[637,62460,61168],{"class":663},[637,62462,62463],{"class":639,"line":21471},[637,62464,61173],{"class":663},[637,62466,62467],{"class":639,"line":21476},[637,62468,61178],{"class":663},[637,62470,62471],{"class":639,"line":21483},[637,62472,61183],{"class":663},[637,62474,62475],{"class":639,"line":21488},[637,62476,61188],{"class":663},[637,62478,62479],{"class":639,"line":21494},[637,62480,61193],{"class":663},[637,62482,62483,62485,62487],{"class":639,"line":21515},[637,62484,61081],{"class":663},[637,62486,61084],{"class":642},[637,62488,2488],{"class":642},[637,62490,62491],{"class":639,"line":21521},[637,62492,1325],{"class":642},[637,62494,62495],{"class":639,"line":21528},[637,62496,742],{"emptyLinePlaceholder":594},[637,62498,62499,62501,62503,62505,62507,62509,62511],{"class":639,"line":21533},[637,62500,2415],{"class":650},[637,62502,680],{"class":642},[637,62504,61218],{"class":683},[637,62506,2428],{"class":642},[637,62508,2431],{"class":642},[637,62510,60889],{"class":2434},[637,62512,6535],{"class":683},[637,62514,62515,62517,62519,62521,62523,62525,62527],{"class":639,"line":21554},[637,62516,61231],{"class":2434},[637,62518,2437],{"class":683},[637,62520,39676],{"class":642},[637,62522,39679],{"class":6838},[637,62524,39693],{"class":642},[637,62526,3677],{"class":650},[637,62528,1204],{"class":642},[637,62530,62531,62533,62535,62537,62540,62542,62544,62546,62548,62550,62552,62554],{"class":639,"line":21567},[637,62532,56947],{"class":650},[637,62534,61250],{"class":683},[637,62536,2431],{"class":642},[637,62538,62539],{"class":683}," refractorRef",[637,62541,1146],{"class":642},[637,62543,3685],{"class":683},[637,62545,3688],{"class":642},[637,62547,9326],{"class":683},[637,62549,3688],{"class":642},[637,62551,5200],{"class":683},[637,62553,3688],{"class":642},[637,62555,61272],{"class":683},[637,62557,62558,62560,62562,62564,62566,62568,62570,62572,62574,62576,62578,62580,62582,62584,62586],{"class":639,"line":21593},[637,62559,21254],{"class":676},[637,62561,3074],{"class":646},[637,62563,60832],{"class":683},[637,62565,3688],{"class":642},[637,62567,61285],{"class":683},[637,62569,4734],{"class":646},[637,62571,8438],{"class":642},[637,62573,61250],{"class":683},[637,62575,1146],{"class":642},[637,62577,61285],{"class":683},[637,62579,1146],{"class":642},[637,62581,3685],{"class":683},[637,62583,2431],{"class":642},[637,62585,39679],{"class":683},[637,62587,17798],{"class":642},[637,62589,62590,62592],{"class":639,"line":21598},[637,62591,2428],{"class":642},[637,62593,2448],{"class":683},[637,62595,62596,62598,62600],{"class":639,"line":21605},[637,62597,732],{"class":642},[637,62599,647],{"class":646},[637,62601,669],{"class":642},[637,62603,62604],{"class":639,"line":21614},[637,62605,742],{"emptyLinePlaceholder":594},[637,62607,62608,62610,62612],{"class":639,"line":21619},[637,62609,643],{"class":642},[637,62611,750],{"class":646},[637,62613,669],{"class":642},[637,62615,62616,62618],{"class":639,"line":21628},[637,62617,758],{"class":642},[637,62619,62620],{"class":646},"Refractor\n",[637,62622,62623,62625,62627,62629,62632],{"class":639,"line":21647},[637,62624,18525],{"class":650},[637,62626,657],{"class":642},[637,62628,660],{"class":642},[637,62630,62631],{"class":663},"refractorRef",[637,62633,3131],{"class":642},[637,62635,62636,62638,62640,62642,62644],{"class":639,"line":21657},[637,62637,24183],{"class":650},[637,62639,657],{"class":642},[637,62641,660],{"class":642},[637,62643,61987],{"class":663},[637,62645,3131],{"class":642},[637,62647,62648,62650,62652,62654,62656],{"class":639,"line":21692},[637,62649,61393],{"class":650},[637,62651,657],{"class":642},[637,62653,660],{"class":642},[637,62655,61400],{"class":663},[637,62657,3131],{"class":642},[637,62659,62660],{"class":639,"line":21701},[637,62661,5173],{"class":642},[637,62663,62664,62666,62668,62670,62672,62674,62676,62678],{"class":639,"line":21721},[637,62665,781],{"class":642},[637,62667,27772],{"class":646},[637,62669,1959],{"class":650},[637,62671,657],{"class":642},[637,62673,660],{"class":642},[637,62675,62006],{"class":663},[637,62677,660],{"class":642},[637,62679,787],{"class":642},[637,62681,62682,62684,62686],{"class":639,"line":21730},[637,62683,905],{"class":642},[637,62685,457],{"class":646},[637,62687,669],{"class":642},[637,62689,62690,62692,62694],{"class":639,"line":21739},[637,62691,732],{"class":642},[637,62693,750],{"class":646},[637,62695,669],{"class":642},[614,62697,62698],{},"The Refractor shader uses the following configuration by default:",[4051,62700,61450],{"id":61449},[626,62702,62704],{"className":42024,"code":62703,"language":42026,"meta":576,"style":576},"const shader = {\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n\n    void main() {\n      vUv = textureMatrix * vec4( position, 1.0 );\n      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    varying vec4 vUv;\n\n    float blendOverlay( float base, float blend ) {\n      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n    }\n\n    vec3 blendOverlay( vec3 base, vec3 blend ) {\n      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n    }\n\n    void main() {\n      vec4 base = texture2DProj( tDiffuse, vUv );\n      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`\n}\n",[618,62705,62706,62716,62724,62732,62740,62744,62752,62760,62764,62772,62780,62784,62788,62798,62802,62806,62810,62814,62819,62824,62832,62842,62846,62850,62854,62858,62863,62868,62872,62876,62881,62886,62890,62894,62898,62903,62908,62912,62916,62920,62926],{"__ignoreMap":576},[637,62707,62708,62710,62712,62714],{"class":639,"line":577},[637,62709,2415],{"class":650},[637,62711,61462],{"class":683},[637,62713,657],{"class":642},[637,62715,1204],{"class":642},[637,62717,62718,62720,62722],{"class":639,"line":578},[637,62719,60954],{"class":646},[637,62721,1218],{"class":642},[637,62723,1204],{"class":642},[637,62725,62726,62728,62730],{"class":639,"line":708},[637,62727,24183],{"class":646},[637,62729,1218],{"class":642},[637,62731,1204],{"class":642},[637,62733,62734,62736,62738],{"class":639,"line":729},[637,62735,61503],{"class":646},[637,62737,1218],{"class":642},[637,62739,61508],{"class":642},[637,62741,62742],{"class":639,"line":739},[637,62743,61513],{"class":642},[637,62745,62746,62748,62750],{"class":639,"line":745},[637,62747,60979],{"class":646},[637,62749,1218],{"class":642},[637,62751,1204],{"class":642},[637,62753,62754,62756,62758],{"class":639,"line":755},[637,62755,61503],{"class":646},[637,62757,1218],{"class":642},[637,62759,61508],{"class":642},[637,62761,62762],{"class":639,"line":778},[637,62763,61513],{"class":642},[637,62765,62766,62768,62770],{"class":639,"line":790},[637,62767,60996],{"class":646},[637,62769,1218],{"class":642},[637,62771,1204],{"class":642},[637,62773,62774,62776,62778],{"class":639,"line":800},[637,62775,61503],{"class":646},[637,62777,1218],{"class":642},[637,62779,61508],{"class":642},[637,62781,62782],{"class":639,"line":805},[637,62783,61135],{"class":642},[637,62785,62786],{"class":639,"line":827},[637,62787,2597],{"class":642},[637,62789,62790,62792,62794,62796],{"class":639,"line":631},[637,62791,61034],{"class":646},[637,62793,1218],{"class":642},[637,62795,61039],{"class":1209},[637,62797,22696],{"class":642},[637,62799,62800],{"class":639,"line":850},[637,62801,61046],{"class":663},[637,62803,62804],{"class":639,"line":861},[637,62805,61051],{"class":663},[637,62807,62808],{"class":639,"line":872},[637,62809,742],{"emptyLinePlaceholder":594},[637,62811,62812],{"class":639,"line":882},[637,62813,61061],{"class":663},[637,62815,62816],{"class":639,"line":632},[637,62817,62818],{"class":663},"      vUv = textureMatrix * vec4( position, 1.0 );\n",[637,62820,62821],{"class":639,"line":902},[637,62822,62823],{"class":663},"      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,62825,62826,62828,62830],{"class":639,"line":912},[637,62827,61081],{"class":663},[637,62829,61084],{"class":642},[637,62831,2488],{"class":642},[637,62833,62834,62836,62838,62840],{"class":639,"line":2625},[637,62835,61091],{"class":646},[637,62837,1218],{"class":642},[637,62839,61039],{"class":1209},[637,62841,22696],{"class":642},[637,62843,62844],{"class":639,"line":2634},[637,62845,61102],{"class":663},[637,62847,62848],{"class":639,"line":2654},[637,62849,61107],{"class":663},[637,62851,62852],{"class":639,"line":2663},[637,62853,61051],{"class":663},[637,62855,62856],{"class":639,"line":2672},[637,62857,742],{"emptyLinePlaceholder":594},[637,62859,62860],{"class":639,"line":2681},[637,62861,62862],{"class":663},"    float blendOverlay( float base, float blend ) {\n",[637,62864,62865],{"class":639,"line":2703},[637,62866,62867],{"class":663},"      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,62869,62870],{"class":639,"line":2747},[637,62871,61135],{"class":663},[637,62873,62874],{"class":639,"line":2756},[637,62875,742],{"emptyLinePlaceholder":594},[637,62877,62878],{"class":639,"line":2765},[637,62879,62880],{"class":663},"    vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,62882,62883],{"class":639,"line":3922},[637,62884,62885],{"class":663},"      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,62887,62888],{"class":639,"line":3953},[637,62889,61135],{"class":663},[637,62891,62892],{"class":639,"line":3974},[637,62893,742],{"emptyLinePlaceholder":594},[637,62895,62896],{"class":639,"line":3993},[637,62897,61061],{"class":663},[637,62899,62900],{"class":639,"line":4025},[637,62901,62902],{"class":663},"      vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,62904,62905],{"class":639,"line":4034},[637,62906,62907],{"class":663},"      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,62909,62910],{"class":639,"line":4043},[637,62911,742],{"emptyLinePlaceholder":594},[637,62913,62914],{"class":639,"line":21441},[637,62915,61188],{"class":663},[637,62917,62918],{"class":639,"line":21456},[637,62919,61193],{"class":663},[637,62921,62922,62924],{"class":639,"line":21471},[637,62923,61081],{"class":663},[637,62925,22696],{"class":642},[637,62927,62928],{"class":639,"line":21476},[637,62929,1325],{"class":642},[1327,62931,62932],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":576,"searchDepth":577,"depth":578,"links":62934},[62935,62936,62937],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":62149,"depth":578,"text":62150,"children":62938},[62939],{"id":61449,"depth":708,"text":61450},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":457,"description":62940},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",{"id":62945,"title":461,"body":62946,"description":63483,"extension":591,"links":592,"meta":63484,"navigation":594,"path":462,"seo":63485,"stem":463,"__hash__":63486},"docs/2.api/9.objects/text-3d.md",{"type":501,"value":62947,"toc":63479},[62948,62953,62964,62966,62985,63092,63107,63200,63203,63320,63322,63476],[608,62949,62950],{},[62951,62952],"objects-text",{},[614,62954,62955,62958,62959,36656],{},[618,62956,62957],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1140,62960,62963],{"href":62961,"rel":62962},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1144],"TextGeometry",[504,62965,15],{"id":624},[614,62967,62968,62969,62971,62972,62975,62976,62979,62980],{},"To use the ",[618,62970,62957],{}," component you need to pass the ",[618,62973,62974],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[618,62977,62978],{},"typeface",".json generated fonts, you can generate yours ",[1140,62981,62984],{"href":62982,"rel":62983},"http://gero3.github.io/facetype.js/",[1144],"here",[626,62986,62988],{"className":628,"code":62987,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        text=\"TresJS\"\n        font=\"/fonts/FiraCodeRegular.json\"\n      >\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,62989,62990,62998,63006,63014,63021,63034,63048,63052,63060,63068,63076,63084],{"__ignoreMap":576},[637,62991,62992,62994,62996],{"class":639,"line":577},[637,62993,643],{"class":642},[637,62995,750],{"class":646},[637,62997,669],{"class":642},[637,62999,63000,63002,63004],{"class":639,"line":578},[637,63001,758],{"class":642},[637,63003,761],{"class":646},[637,63005,669],{"class":642},[637,63007,63008,63010,63012],{"class":639,"line":708},[637,63009,781],{"class":642},[637,63011,21652],{"class":646},[637,63013,669],{"class":642},[637,63015,63016,63018],{"class":639,"line":729},[637,63017,853],{"class":642},[637,63019,63020],{"class":646},"Text3D\n",[637,63022,63023,63026,63028,63030,63032],{"class":639,"line":739},[637,63024,63025],{"class":650},"        text",[637,63027,657],{"class":642},[637,63029,660],{"class":642},[637,63031,16927],{"class":663},[637,63033,3131],{"class":642},[637,63035,63036,63039,63041,63043,63046],{"class":639,"line":745},[637,63037,63038],{"class":650},"        font",[637,63040,657],{"class":642},[637,63042,660],{"class":642},[637,63044,63045],{"class":663},"/fonts/FiraCodeRegular.json",[637,63047,3131],{"class":642},[637,63049,63050],{"class":639,"line":755},[637,63051,53820],{"class":642},[637,63053,63054,63056,63058],{"class":639,"line":778},[637,63055,864],{"class":642},[637,63057,877],{"class":646},[637,63059,787],{"class":642},[637,63061,63062,63064,63066],{"class":639,"line":790},[637,63063,885],{"class":642},[637,63065,461],{"class":646},[637,63067,669],{"class":642},[637,63069,63070,63072,63074],{"class":639,"line":800},[637,63071,895],{"class":642},[637,63073,21652],{"class":646},[637,63075,669],{"class":642},[637,63077,63078,63080,63082],{"class":639,"line":805},[637,63079,905],{"class":642},[637,63081,761],{"class":646},[637,63083,669],{"class":642},[637,63085,63086,63088,63090],{"class":639,"line":827},[637,63087,732],{"class":642},[637,63089,750],{"class":646},[637,63091,669],{"class":642},[614,63093,63094,63095,63098,63099,63101,63102,4304,63104,63106],{},"Notice that you need to pass the ",[618,63096,63097],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[618,63100,62957],{}," component. This is because ",[618,63103,62957],{},[618,63105,4292],{}," component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:",[626,63108,63110],{"className":628,"code":63109,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D font=\"/fonts/FiraCodeRegular.json\">\n        TresJS\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,63111,63112,63120,63128,63136,63155,63160,63168,63176,63184,63192],{"__ignoreMap":576},[637,63113,63114,63116,63118],{"class":639,"line":577},[637,63115,643],{"class":642},[637,63117,750],{"class":646},[637,63119,669],{"class":642},[637,63121,63122,63124,63126],{"class":639,"line":578},[637,63123,758],{"class":642},[637,63125,761],{"class":646},[637,63127,669],{"class":642},[637,63129,63130,63132,63134],{"class":639,"line":708},[637,63131,781],{"class":642},[637,63133,21652],{"class":646},[637,63135,669],{"class":642},[637,63137,63138,63140,63142,63145,63147,63149,63151,63153],{"class":639,"line":729},[637,63139,853],{"class":642},[637,63141,461],{"class":646},[637,63143,63144],{"class":650}," font",[637,63146,657],{"class":642},[637,63148,660],{"class":642},[637,63150,63045],{"class":663},[637,63152,660],{"class":642},[637,63154,669],{"class":642},[637,63156,63157],{"class":639,"line":739},[637,63158,63159],{"class":683},"        TresJS\n",[637,63161,63162,63164,63166],{"class":639,"line":745},[637,63163,864],{"class":642},[637,63165,877],{"class":646},[637,63167,787],{"class":642},[637,63169,63170,63172,63174],{"class":639,"line":755},[637,63171,885],{"class":642},[637,63173,461],{"class":646},[637,63175,669],{"class":642},[637,63177,63178,63180,63182],{"class":639,"line":778},[637,63179,895],{"class":642},[637,63181,21652],{"class":646},[637,63183,669],{"class":642},[637,63185,63186,63188,63190],{"class":639,"line":790},[637,63187,905],{"class":642},[637,63189,761],{"class":646},[637,63191,669],{"class":642},[637,63193,63194,63196,63198],{"class":639,"line":800},[637,63195,732],{"class":642},[637,63197,750],{"class":646},[637,63199,669],{"class":642},[614,63201,63202],{},"In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update",[626,63204,63206],{"className":628,"code":63205,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003Cinput v-model=\"myReactiveText\" />\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        :text=\"myReactiveText\"\n        font=\"/fonts/FiraCodeRegular.json\"\n        center\n        need-updates\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,63207,63208,63216,63236,63244,63252,63258,63271,63283,63287,63292,63296,63304,63312],{"__ignoreMap":576},[637,63209,63210,63212,63214],{"class":639,"line":577},[637,63211,643],{"class":642},[637,63213,750],{"class":646},[637,63215,669],{"class":642},[637,63217,63218,63220,63223,63225,63227,63229,63232,63234],{"class":639,"line":578},[637,63219,758],{"class":642},[637,63221,63222],{"class":646},"input",[637,63224,3013],{"class":650},[637,63226,657],{"class":642},[637,63228,660],{"class":642},[637,63230,63231],{"class":663},"myReactiveText",[637,63233,660],{"class":642},[637,63235,787],{"class":642},[637,63237,63238,63240,63242],{"class":639,"line":708},[637,63239,758],{"class":642},[637,63241,761],{"class":646},[637,63243,669],{"class":642},[637,63245,63246,63248,63250],{"class":639,"line":729},[637,63247,781],{"class":642},[637,63249,21652],{"class":646},[637,63251,669],{"class":642},[637,63253,63254,63256],{"class":639,"line":739},[637,63255,853],{"class":642},[637,63257,63020],{"class":646},[637,63259,63260,63263,63265,63267,63269],{"class":639,"line":745},[637,63261,63262],{"class":650},"        :text",[637,63264,657],{"class":642},[637,63266,660],{"class":642},[637,63268,63231],{"class":663},[637,63270,3131],{"class":642},[637,63272,63273,63275,63277,63279,63281],{"class":639,"line":755},[637,63274,63038],{"class":650},[637,63276,657],{"class":642},[637,63278,660],{"class":642},[637,63280,63045],{"class":663},[637,63282,3131],{"class":642},[637,63284,63285],{"class":639,"line":778},[637,63286,53766],{"class":650},[637,63288,63289],{"class":639,"line":790},[637,63290,63291],{"class":650},"        need-updates\n",[637,63293,63294],{"class":639,"line":800},[637,63295,8033],{"class":642},[637,63297,63298,63300,63302],{"class":639,"line":805},[637,63299,895],{"class":642},[637,63301,21652],{"class":646},[637,63303,669],{"class":642},[637,63305,63306,63308,63310],{"class":639,"line":827},[637,63307,905],{"class":642},[637,63309,761],{"class":646},[637,63311,669],{"class":642},[637,63313,63314,63316,63318],{"class":639,"line":631},[637,63315,732],{"class":642},[637,63317,750],{"class":646},[637,63319,669],{"class":642},[504,63321,922],{"id":921},[927,63323,63324,63334],{},[930,63325,63326],{},[933,63327,63328,63330,63332],{},[936,63329,938],{"align":997},[936,63331,941],{"align":997},[936,63333,944],{},[946,63335,63336,63347,63358,63369,63380,63392,63404,63416,63429,63441,63453,63464],{},[933,63337,63338,63342,63345],{},[951,63339,63340],{"align":997},[1669,63341,62974],{},[951,63343,63344],{"align":997},"The font data or font name to use for the text.",[951,63346],{},[933,63348,63349,63353,63356],{},[951,63350,63351],{"align":997},[1669,63352,30324],{},[951,63354,63355],{"align":997},"The text to display.",[951,63357],{},[933,63359,63360,63364,63367],{},[951,63361,63362],{"align":997},[1669,63363,16731],{},[951,63365,63366],{"align":997},"The size of the text.",[951,63368,1946],{},[933,63370,63371,63375,63378],{},[951,63372,63373],{"align":997},[1669,63374,40858],{},[951,63376,63377],{"align":997},"The height of the text.",[951,63379,5729],{},[933,63381,63382,63387,63390],{},[951,63383,63384],{"align":997},[1669,63385,63386],{},"curveSegments",[951,63388,63389],{"align":997},"The number of curve segments to use when generating the text geometry.",[951,63391,12709],{},[933,63393,63394,63399,63402],{},[951,63395,63396],{"align":997},[1669,63397,63398],{},"bevelEnabled",[951,63400,63401],{"align":997},"A flag indicating whether beveling should be enabled for the text.",[951,63403,961],{},[933,63405,63406,63411,63414],{},[951,63407,63408],{"align":997},[1669,63409,63410],{},"bevelThickness",[951,63412,63413],{"align":997},"The thickness of the beveled edge on the text.",[951,63415,11643],{},[933,63417,63418,63423,63426],{},[951,63419,63420],{"align":997},[1669,63421,63422],{},"bevelSize",[951,63424,63425],{"align":997},"The size of the beveled edge on the text.",[951,63427,63428],{},"0.02",[933,63430,63431,63436,63439],{},[951,63432,63433],{"align":997},[1669,63434,63435],{},"bevelOffset",[951,63437,63438],{"align":997},"The offset of the beveled edge on the text.",[951,63440,965],{},[933,63442,63443,63448,63451],{},[951,63444,63445],{"align":997},[1669,63446,63447],{},"bevelSegments",[951,63449,63450],{"align":997},"The number of bevel segments to use when generating the text geometry.",[951,63452,9653],{},[933,63454,63455,63459,63462],{},[951,63456,63457],{"align":997},[1669,63458,29233],{},[951,63460,63461],{"align":997},"To center the text",[951,63463,971],{},[933,63465,63466,63471,63474],{},[951,63467,63468],{"align":997},[1669,63469,63470],{},"needUpdates",[951,63472,63473],{"align":997},"This props add reactivity",[951,63475,971],{},[1327,63477,63478],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":576,"searchDepth":577,"depth":578,"links":63480},[63481,63482],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render text in 3D using TextGeometry.",{},{"title":461,"description":63483},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",[63488,64033,64328,64697,65754,66387,66988],{"id":63489,"title":471,"body":63490,"description":64029,"extension":591,"links":592,"meta":64030,"navigation":594,"path":472,"seo":64031,"stem":473,"__hash__":64032},"docs/2.api/miscellaneous/bounds.md",{"type":501,"value":63491,"toc":64022},[63492,63497,63504,63522,63524,63863,63865,63992,63995,64009,64013,64019],[2295,63493,63494],{},[63495,63496],"miscellaneous-bounds",{},[614,63498,63499,63500,63503],{},"Calculates a boundary box and centers the camera accordingly. Its ",[618,63501,63502],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2005,63505,63506,63508],{},[614,63507,49854],{},[626,63509,63510],{"className":628,"code":2030,"language":633,"meta":576,"style":576},[618,63511,63512],{"__ignoreMap":576},[637,63513,63514,63516,63518,63520],{"class":639,"line":577},[637,63515,643],{"class":642},[637,63517,795],{"class":646},[637,63519,1851],{"class":650},[637,63521,787],{"class":642},[504,63523,15],{"id":624},[626,63525,63528],{"className":628,"code":63526,"highlights":63527,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Bounds, OrbitControls } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boundsRef = shallowRef()\nconst objectRef = shallowRef()\n\nfunction focusObject() {\n  boundsRef.value?.instance.lookAt(objectRef.value)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls make-default />\n    \u003CBounds ref=\"boundsRef\" clip use-mounted :offset=\"0.75\">\n      \u003CTresMesh ref=\"objectRef\" @click=\"(e) => focusObject()\">\n        \u003CTresBoxGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/Bounds>\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,745,755,790,800,805,632,2654],[618,63529,63530,63550,63568,63592,63610,63614,63628,63642,63646,63658,63687,63692,63700,63704,63712,63720,63738,63748,63785,63814,63822,63830,63838,63847,63855],{"__ignoreMap":576},[637,63531,63532,63534,63536,63538,63540,63542,63544,63546,63548],{"class":639,"line":577},[637,63533,643],{"class":642},[637,63535,647],{"class":646},[637,63537,651],{"class":650},[637,63539,654],{"class":650},[637,63541,657],{"class":642},[637,63543,660],{"class":642},[637,63545,664],{"class":663},[637,63547,660],{"class":642},[637,63549,669],{"class":642},[637,63551,63552,63554,63556,63558,63560,63562,63564,63566],{"class":639,"line":578},[637,63553,677],{"class":676},[637,63555,680],{"class":642},[637,63557,715],{"class":683},[637,63559,693],{"class":642},[637,63561,696],{"class":676},[637,63563,699],{"class":642},[637,63565,724],{"class":663},[637,63567,705],{"class":642},[637,63569,63571,63573,63575,63578,63580,63582,63584,63586,63588,63590],{"class":63570,"line":708},[639,673],[637,63572,677],{"class":676},[637,63574,680],{"class":642},[637,63576,63577],{"class":683}," Bounds",[637,63579,687],{"class":642},[637,63581,690],{"class":683},[637,63583,693],{"class":642},[637,63585,696],{"class":676},[637,63587,699],{"class":642},[637,63589,702],{"class":663},[637,63591,705],{"class":642},[637,63593,63594,63596,63598,63600,63602,63604,63606,63608],{"class":639,"line":729},[637,63595,677],{"class":676},[637,63597,680],{"class":642},[637,63599,3498],{"class":683},[637,63601,693],{"class":642},[637,63603,696],{"class":676},[637,63605,699],{"class":642},[637,63607,633],{"class":663},[637,63609,705],{"class":642},[637,63611,63612],{"class":639,"line":739},[637,63613,742],{"emptyLinePlaceholder":594},[637,63615,63617,63619,63622,63624,63626],{"class":63616,"line":745},[639,673],[637,63618,2415],{"class":650},[637,63620,63621],{"class":683}," boundsRef ",[637,63623,657],{"class":642},[637,63625,3498],{"class":2434},[637,63627,6535],{"class":683},[637,63629,63631,63633,63636,63638,63640],{"class":63630,"line":755},[639,673],[637,63632,2415],{"class":650},[637,63634,63635],{"class":683}," objectRef ",[637,63637,657],{"class":642},[637,63639,3498],{"class":2434},[637,63641,6535],{"class":683},[637,63643,63644],{"class":639,"line":778},[637,63645,742],{"emptyLinePlaceholder":594},[637,63647,63649,63651,63654,63656],{"class":63648,"line":790},[639,673],[637,63650,39670],{"class":650},[637,63652,63653],{"class":2434}," focusObject",[637,63655,3674],{"class":642},[637,63657,1204],{"class":642},[637,63659,63661,63664,63666,63668,63670,63672,63674,63676,63678,63681,63683,63685],{"class":63660,"line":800},[639,673],[637,63662,63663],{"class":683},"  boundsRef",[637,63665,1146],{"class":642},[637,63667,3685],{"class":683},[637,63669,3688],{"class":642},[637,63671,9326],{"class":683},[637,63673,1146],{"class":642},[637,63675,63502],{"class":2434},[637,63677,2437],{"class":646},[637,63679,63680],{"class":683},"objectRef",[637,63682,1146],{"class":642},[637,63684,3685],{"class":683},[637,63686,2448],{"class":646},[637,63688,63690],{"class":63689,"line":805},[639,673],[637,63691,1325],{"class":642},[637,63693,63694,63696,63698],{"class":639,"line":827},[637,63695,732],{"class":642},[637,63697,647],{"class":646},[637,63699,669],{"class":642},[637,63701,63702],{"class":639,"line":631},[637,63703,742],{"emptyLinePlaceholder":594},[637,63705,63706,63708,63710],{"class":639,"line":850},[637,63707,643],{"class":642},[637,63709,750],{"class":646},[637,63711,669],{"class":642},[637,63713,63714,63716,63718],{"class":639,"line":861},[637,63715,758],{"class":642},[637,63717,761],{"class":646},[637,63719,669],{"class":642},[637,63721,63722,63724,63726,63728,63730,63732,63734,63736],{"class":639,"line":872},[637,63723,781],{"class":642},[637,63725,784],{"class":646},[637,63727,1485],{"class":650},[637,63729,657],{"class":642},[637,63731,660],{"class":642},[637,63733,7445],{"class":663},[637,63735,660],{"class":642},[637,63737,787],{"class":642},[637,63739,63740,63742,63744,63746],{"class":639,"line":882},[637,63741,781],{"class":642},[637,63743,795],{"class":646},[637,63745,1851],{"class":650},[637,63747,787],{"class":642},[637,63749,63751,63753,63755,63757,63759,63761,63764,63766,63769,63772,63775,63777,63779,63781,63783],{"class":63750,"line":632},[639,673],[637,63752,781],{"class":642},[637,63754,471],{"class":646},[637,63756,3872],{"class":650},[637,63758,657],{"class":642},[637,63760,660],{"class":642},[637,63762,63763],{"class":663},"boundsRef",[637,63765,660],{"class":642},[637,63767,63768],{"class":650}," clip",[637,63770,63771],{"class":650}," use-mounted",[637,63773,63774],{"class":650}," :offset",[637,63776,657],{"class":642},[637,63778,660],{"class":642},[637,63780,2551],{"class":663},[637,63782,660],{"class":642},[637,63784,669],{"class":642},[637,63786,63787,63789,63791,63793,63795,63797,63799,63801,63803,63805,63807,63810,63812],{"class":639,"line":902},[637,63788,853],{"class":642},[637,63790,856],{"class":646},[637,63792,3872],{"class":650},[637,63794,657],{"class":642},[637,63796,660],{"class":642},[637,63798,63680],{"class":663},[637,63800,660],{"class":642},[637,63802,38188],{"class":650},[637,63804,657],{"class":642},[637,63806,660],{"class":642},[637,63808,63809],{"class":663},"(e) => focusObject()",[637,63811,660],{"class":642},[637,63813,669],{"class":642},[637,63815,63816,63818,63820],{"class":639,"line":912},[637,63817,864],{"class":642},[637,63819,867],{"class":646},[637,63821,787],{"class":642},[637,63823,63824,63826,63828],{"class":639,"line":2625},[637,63825,864],{"class":642},[637,63827,877],{"class":646},[637,63829,787],{"class":642},[637,63831,63832,63834,63836],{"class":639,"line":2634},[637,63833,885],{"class":642},[637,63835,856],{"class":646},[637,63837,669],{"class":642},[637,63839,63841,63843,63845],{"class":63840,"line":2654},[639,673],[637,63842,895],{"class":642},[637,63844,471],{"class":646},[637,63846,669],{"class":642},[637,63848,63849,63851,63853],{"class":639,"line":2663},[637,63850,905],{"class":642},[637,63852,761],{"class":646},[637,63854,669],{"class":642},[637,63856,63857,63859,63861],{"class":639,"line":2672},[637,63858,732],{"class":642},[637,63860,750],{"class":646},[637,63862,669],{"class":642},[504,63864,922],{"id":921},[927,63866,63867,63877],{},[930,63868,63869],{},[933,63870,63871,63873,63875],{},[936,63872,8089],{"align":997},[936,63874,941],{"align":997},[936,63876,944],{},[946,63878,63879,63896,63915,63932,63952,63973],{},[933,63880,63881,63886,63892],{},[951,63882,63883],{"align":997},[618,63884,63885],{},"duration",[951,63887,63888,63889,63891],{"align":997},"Duration of the ",[618,63890,63502],{}," animation in seconds",[951,63893,63894],{},[618,63895,13661],{},[933,63897,63898,63902,63911],{},[951,63899,63900],{"align":997},[618,63901,40422],{},[951,63903,63904,63905,18669,63907,5611,63909],{"align":997},"Additional distance from the target when using ",[618,63906,63502],{},[618,63908,7618],{},[618,63910,7622],{},[951,63912,63913],{},[618,63914,5729],{},[933,63916,63917,63922,63928],{},[951,63918,63919],{"align":997},[618,63920,63921],{},"useResize",[951,63923,63924,63925,63927],{"align":997},"Whether to re",[618,63926,63502],{}," the last target when the screen is resized",[951,63929,63930],{},[618,63931,971],{},[933,63933,63934,63939,63948],{},[951,63935,63936],{"align":997},[618,63937,63938],{},"useMounted",[951,63940,63941,63942,63944,63945,63947],{"align":997},"Whether to ",[618,63943,63502],{}," the ",[618,63946,471],{}," object when the component is mounts",[951,63949,63950],{},[618,63951,971],{},[933,63953,63954,63959,63969],{},[951,63955,63956],{"align":997},[618,63957,63958],{},"clip",[951,63960,63961,63962,3063,63964,63966,63967],{"align":997},"Whether to adjust the camera's ",[618,63963,43045],{},[618,63965,40872],{}," settings when using ",[618,63968,63502],{},[951,63970,63971],{},[618,63972,971],{},[933,63974,63975,63980,63989],{},[951,63976,63977],{"align":997},[618,63978,63979],{},"easing",[951,63981,63982,63983,63986,63987],{"align":997},"Animation's easing function. ",[618,63984,63985],{},"t"," and the returned value should be in the interval ",[618,63988,53351],{},[951,63990,63991],{},"Cubic ease out",[504,63993,63502],{"id":63994},"lookat",[614,63996,63997,3194,64000,64002,64003,1672,64005,5611,64007,1146],{},[618,63998,63999],{},"\u003CBounds />",[618,64001,63502],{}," points the camera at its first argument: an ",[618,64004,7622],{},[618,64006,7618],{},[618,64008,8140],{},[4051,64010,64012],{"id":64011},"method-signatures","Method Signatures",[626,64014,64017],{"className":64015,"code":64016,"language":30324},[30322],"/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly.\n */\nlookAt(object: Object3D): void\n\n/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.\n */\nlookAt(object: Object3D, up: VectorFlexibleParams): void\n\n/**\n * Centers the camera's viewport on a `Box3`.\n */\nlookAt(box3: Box3): void\n\n/**\n * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.\n */\nlookAt(box3: Box3, up: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`.\n */\nlookAt(target: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position`.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void\n\n/**\n * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.\n */\nlookAt(): void\n",[618,64018,64016],{"__ignoreMap":576},[1327,64020,64021],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":64023},[64024,64025,64026],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":63994,"depth":578,"text":63502,"children":64027},[64028],{"id":64011,"depth":708,"text":64012},"Calculate boundary box and center camera accordingly.",{},{"title":471,"description":64029},"hHyluEwt8akq_4Cca4tkdoVEZlteuogJu8G43SPaETs",{"id":64034,"title":475,"body":64035,"description":64324,"extension":591,"links":592,"meta":64325,"navigation":594,"path":476,"seo":64326,"stem":477,"__hash__":64327},"docs/2.api/miscellaneous/global-audio.md",{"type":501,"value":64036,"toc":64319},[64037,64045,64052,64054,64192,64198,64200,64293,64295,64317],[614,64038,2776,64039,9468,64041,64044],{},[618,64040,7317],{},[618,64042,64043],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[614,64046,30329,64047],{},[1140,64048,64051],{"href":64049,"rel":64050},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1144],"Audio",[504,64053,15],{"id":624},[626,64055,64058],{"className":628,"code":64056,"highlights":64057,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { TresCanvas } from '@tresjs/core'\nimport { GlobalAudio } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" />\n    \u003CGlobalAudio :src=\"exampleAudio\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,64059,64060,64070,64088,64108,64116,64120,64128,64136,64155,64176,64184],{"__ignoreMap":576},[637,64061,64062,64064,64066,64068],{"class":639,"line":577},[637,64063,643],{"class":642},[637,64065,647],{"class":646},[637,64067,651],{"class":650},[637,64069,669],{"class":642},[637,64071,64072,64074,64076,64078,64080,64082,64084,64086],{"class":639,"line":578},[637,64073,677],{"class":676},[637,64075,680],{"class":642},[637,64077,715],{"class":683},[637,64079,693],{"class":642},[637,64081,696],{"class":676},[637,64083,699],{"class":642},[637,64085,724],{"class":663},[637,64087,705],{"class":642},[637,64089,64091,64093,64095,64098,64100,64102,64104,64106],{"class":64090,"line":708},[639,673],[637,64092,677],{"class":676},[637,64094,680],{"class":642},[637,64096,64097],{"class":683}," GlobalAudio",[637,64099,693],{"class":642},[637,64101,696],{"class":676},[637,64103,699],{"class":642},[637,64105,702],{"class":663},[637,64107,705],{"class":642},[637,64109,64110,64112,64114],{"class":639,"line":729},[637,64111,732],{"class":642},[637,64113,647],{"class":646},[637,64115,669],{"class":642},[637,64117,64118],{"class":639,"line":739},[637,64119,742],{"emptyLinePlaceholder":594},[637,64121,64122,64124,64126],{"class":639,"line":745},[637,64123,643],{"class":642},[637,64125,750],{"class":646},[637,64127,669],{"class":642},[637,64129,64130,64132,64134],{"class":639,"line":755},[637,64131,758],{"class":642},[637,64133,761],{"class":646},[637,64135,669],{"class":642},[637,64137,64138,64140,64142,64144,64146,64148,64151,64153],{"class":639,"line":778},[637,64139,781],{"class":642},[637,64141,784],{"class":646},[637,64143,1485],{"class":650},[637,64145,657],{"class":642},[637,64147,660],{"class":642},[637,64149,64150],{"class":663},"[0, 0, 7.5]",[637,64152,660],{"class":642},[637,64154,787],{"class":642},[637,64156,64158,64160,64162,64165,64167,64169,64172,64174],{"class":64157,"line":790},[639,673],[637,64159,781],{"class":642},[637,64161,475],{"class":646},[637,64163,64164],{"class":650}," :src",[637,64166,657],{"class":642},[637,64168,660],{"class":642},[637,64170,64171],{"class":663},"exampleAudio",[637,64173,660],{"class":642},[637,64175,787],{"class":642},[637,64177,64178,64180,64182],{"class":639,"line":800},[637,64179,905],{"class":642},[637,64181,761],{"class":646},[637,64183,669],{"class":642},[637,64185,64186,64188,64190],{"class":639,"line":805},[637,64187,732],{"class":642},[637,64189,750],{"class":646},[637,64191,669],{"class":642},[614,64193,64194,64195,64197],{},"*The ",[618,64196,24550],{}," prop is required",[504,64199,922],{"id":921},[927,64201,64202,64212],{},[930,64203,64204],{},[933,64205,64206,64208,64210],{},[936,64207,938],{"align":997},[936,64209,941],{"align":997},[936,64211,944],{},[946,64213,64214,64225,64240,64252,64265,64279],{},[933,64215,64216,64220,64223],{},[951,64217,64218],{"align":997},[618,64219,24550],{},[951,64221,64222],{"align":997},"Path to your audio file",[951,64224],{},[933,64226,64227,64232,64235],{},[951,64228,64229],{"align":997},[618,64230,64231],{},"playTrigger",[951,64233,64234],{"align":997},"Id of the DOM element that triggers the play/pause state",[951,64236,64237],{},[618,64238,64239],{},"renderer.domElement",[933,64241,64242,64247,64250],{},[951,64243,64244],{"align":997},[618,64245,64246],{},"stopTrigger",[951,64248,64249],{"align":997},"Id of the DOM element that triggers the stop state",[951,64251],{},[933,64253,64254,64258,64261],{},[951,64255,64256],{"align":997},[618,64257,25923],{},[951,64259,64260],{"align":997},"If the audio must be replayed when ends",[951,64262,64263],{},[618,64264,971],{},[933,64266,64267,64272,64275],{},[951,64268,64269],{"align":997},[618,64270,64271],{},"volume",[951,64273,64274],{"align":997},"Volume of the audio",[951,64276,64277],{},[618,64278,1946],{},[933,64280,64281,64286,64289],{},[951,64282,64283],{"align":997},[618,64284,64285],{},"playbackRate",[951,64287,64288],{"align":997},"PlaybackRate of the audio",[951,64290,64291],{},[618,64292,1874],{},[504,64294,14280],{"id":14279},[927,64296,64297,64305],{},[930,64298,64299],{},[933,64300,64301,64303],{},[936,64302,5759],{"align":997},[936,64304,941],{"align":997},[946,64306,64307],{},[933,64308,64309,64314],{},[951,64310,64311],{"align":997},[618,64312,64313],{},"isPlaying",[951,64315,64316],{"align":997},"Dispatched when the Audio change its state (play, pause or stop)",[1327,64318,14377],{},{"title":576,"searchDepth":577,"depth":578,"links":64320},[64321,64322,64323],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":14279,"depth":578,"text":14280},"Add global sound to your scene.",{},{"title":475,"description":64324},"3JUUNGnzyd_UYSpUOzquhfgUDt2njg-AUZ8wXPFhXKM",{"id":64329,"title":479,"body":64330,"description":64693,"extension":591,"links":592,"meta":64694,"navigation":594,"path":480,"seo":64695,"stem":481,"__hash__":64696},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":501,"value":64331,"toc":64689},[64332,64337,64349,64351,64357,64365,64374,64379,64626,64628,64687],[608,64333,64334],{},[64335,64336],"miscellaneous-mouse-parallax",{},[614,64338,64339,64342,64343,64348],{},[618,64340,64341],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1140,64344,64347],{"href":64345,"rel":64346},"https://en.wikipedia.org/wiki/Parallax",[1144],"parallax"," effect. The camera will update automatically according to the mouse position.",[504,64350,15],{"id":624},[614,64352,64353,64354,64356],{},"You only need to import and add it to your template as ",[618,64355,64341],{},". Additionally, you can pass the following props:",[614,64358,64359,64361,64362,1146],{},[618,64360,30275],{}," is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: ",[618,64363,64364],{},":factor=[x,y]",[614,64366,64367,64370,64371,1146],{},[618,64368,64369],{},"ease"," is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: ",[618,64372,64373],{},":ease=[x,y]",[614,64375,64376,64378],{},[618,64377,16717],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[626,64380,64383],{"className":628,"code":64381,"highlights":64382,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MouseParallax, TorusKnot } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" :fov=\"75\" />\n    \u003CTorusKnot>\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/TorusKnot>\n    \u003CMouseParallax :factor=\"5\" :ease=\"[3, 0.1]\" />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,827],[618,64384,64385,64405,64431,64451,64459,64463,64471,64489,64518,64526,64544,64552,64584,64592,64610,64618],{"__ignoreMap":576},[637,64386,64387,64389,64391,64393,64395,64397,64399,64401,64403],{"class":639,"line":577},[637,64388,643],{"class":642},[637,64390,647],{"class":646},[637,64392,651],{"class":650},[637,64394,654],{"class":650},[637,64396,657],{"class":642},[637,64398,660],{"class":642},[637,64400,664],{"class":663},[637,64402,660],{"class":642},[637,64404,669],{"class":642},[637,64406,64408,64410,64412,64415,64417,64419,64421,64423,64425,64427,64429],{"class":64407,"line":578},[639,673],[637,64409,677],{"class":676},[637,64411,680],{"class":642},[637,64413,64414],{"class":683}," MouseParallax",[637,64416,687],{"class":642},[637,64418,40544],{"class":683},[637,64420,693],{"class":642},[637,64422,696],{"class":676},[637,64424,9515],{"class":642},[637,64426,702],{"class":663},[637,64428,660],{"class":642},[637,64430,9522],{"class":642},[637,64432,64433,64435,64437,64439,64441,64443,64445,64447,64449],{"class":639,"line":708},[637,64434,677],{"class":676},[637,64436,680],{"class":642},[637,64438,715],{"class":683},[637,64440,693],{"class":642},[637,64442,696],{"class":676},[637,64444,9515],{"class":642},[637,64446,724],{"class":663},[637,64448,660],{"class":642},[637,64450,9522],{"class":642},[637,64452,64453,64455,64457],{"class":639,"line":729},[637,64454,732],{"class":642},[637,64456,647],{"class":646},[637,64458,669],{"class":642},[637,64460,64461],{"class":639,"line":739},[637,64462,742],{"emptyLinePlaceholder":594},[637,64464,64465,64467,64469],{"class":639,"line":745},[637,64466,643],{"class":642},[637,64468,750],{"class":646},[637,64470,669],{"class":642},[637,64472,64473,64475,64477,64479,64481,64483,64485,64487],{"class":639,"line":755},[637,64474,758],{"class":642},[637,64476,761],{"class":646},[637,64478,764],{"class":650},[637,64480,657],{"class":642},[637,64482,660],{"class":642},[637,64484,11791],{"class":663},[637,64486,660],{"class":642},[637,64488,669],{"class":642},[637,64490,64491,64493,64495,64497,64499,64501,64503,64505,64507,64509,64511,64514,64516],{"class":639,"line":778},[637,64492,781],{"class":642},[637,64494,784],{"class":646},[637,64496,1485],{"class":650},[637,64498,657],{"class":642},[637,64500,660],{"class":642},[637,64502,64150],{"class":663},[637,64504,660],{"class":642},[637,64506,32272],{"class":650},[637,64508,657],{"class":642},[637,64510,660],{"class":642},[637,64512,64513],{"class":663},"75",[637,64515,660],{"class":642},[637,64517,787],{"class":642},[637,64519,64520,64522,64524],{"class":639,"line":790},[637,64521,781],{"class":642},[637,64523,35814],{"class":646},[637,64525,669],{"class":642},[637,64527,64528,64530,64532,64534,64536,64538,64540,64542],{"class":639,"line":800},[637,64529,853],{"class":642},[637,64531,13318],{"class":646},[637,64533,2689],{"class":650},[637,64535,657],{"class":642},[637,64537,660],{"class":642},[637,64539,13327],{"class":663},[637,64541,660],{"class":642},[637,64543,787],{"class":642},[637,64545,64546,64548,64550],{"class":639,"line":805},[637,64547,895],{"class":642},[637,64549,35814],{"class":646},[637,64551,669],{"class":642},[637,64553,64555,64557,64559,64562,64564,64566,64568,64570,64573,64575,64577,64580,64582],{"class":64554,"line":827},[639,673],[637,64556,781],{"class":642},[637,64558,479],{"class":646},[637,64560,64561],{"class":650}," :factor",[637,64563,657],{"class":642},[637,64565,660],{"class":642},[637,64567,12709],{"class":663},[637,64569,660],{"class":642},[637,64571,64572],{"class":650}," :ease",[637,64574,657],{"class":642},[637,64576,660],{"class":642},[637,64578,64579],{"class":663},"[3, 0.1]",[637,64581,660],{"class":642},[637,64583,787],{"class":642},[637,64585,64586,64588,64590],{"class":639,"line":631},[637,64587,781],{"class":642},[637,64589,9681],{"class":646},[637,64591,787],{"class":642},[637,64593,64594,64596,64598,64600,64602,64604,64606,64608],{"class":639,"line":850},[637,64595,781],{"class":642},[637,64597,9700],{"class":646},[637,64599,1485],{"class":650},[637,64601,657],{"class":642},[637,64603,660],{"class":642},[637,64605,13362],{"class":663},[637,64607,660],{"class":642},[637,64609,787],{"class":642},[637,64611,64612,64614,64616],{"class":639,"line":861},[637,64613,905],{"class":642},[637,64615,761],{"class":646},[637,64617,669],{"class":642},[637,64619,64620,64622,64624],{"class":639,"line":872},[637,64621,732],{"class":642},[637,64623,750],{"class":646},[637,64625,669],{"class":642},[504,64627,922],{"id":921},[927,64629,64630,64640],{},[930,64631,64632],{},[933,64633,64634,64636,64638],{},[936,64635,938],{"align":997},[936,64637,941],{"align":997},[936,64639,944],{},[946,64641,64642,64654,64665,64676],{},[933,64643,64644,64649,64652],{},[951,64645,64646],{"align":997},[1669,64647,64648],{},"disabled",[951,64650,64651],{"align":997},"Enable or disable the effect",[951,64653,971],{},[933,64655,64656,64660,64663],{},[951,64657,64658],{"align":997},[1669,64659,30275],{},[951,64661,64662],{"align":997},"Increase the range of the parallax",[951,64664,58075],{},[933,64666,64667,64671,64674],{},[951,64668,64669],{"align":997},[1669,64670,64369],{},[951,64672,64673],{"align":997},"Increase the camera movement speed",[951,64675,2163],{},[933,64677,64678,64682,64685],{},[951,64679,64680],{"align":997},[1669,64681,16717],{},[951,64683,64684],{"align":997},"Whether the mouse coordinates are calculated from the element or the window",[951,64686,971],{},[1327,64688,1644],{},{"title":576,"searchDepth":577,"depth":578,"links":64690},[64691,64692],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create parallax effects based on mouse movement.",{},{"title":479,"description":64693},"DlWi-PCiTKTosw5xB5jxhs3p0vmhFRnKBmSiLiGYpy8",{"id":64698,"title":483,"body":64699,"description":65750,"extension":591,"links":592,"meta":65751,"navigation":594,"path":484,"seo":65752,"stem":485,"__hash__":65753},"docs/2.api/miscellaneous/positional-audio.md",{"type":501,"value":64700,"toc":65743},[64701,64706,64719,64729,64731,64746,65012,65040,65044,65050,65052,65245,65247,65319,65549,65711,65713,65740],[608,64702,64703],{},[64704,64705],"miscellaneous-positional-audio",{},[614,64707,2776,64708,60500,64710,64714,64715,64718],{},[618,64709,7317],{},[1140,64711,483],{"href":64712,"rel":64713},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1144],".\n",[618,64716,64717],{},"\u003CPositionalAudio>"," is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.",[614,64720,64721,64723,64724,36656],{},[618,64722,64717],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1140,64725,64728],{"href":64726,"rel":64727},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1144],"PositionalAudioHelper",[504,64730,15],{"id":624},[614,64732,2776,64733,64735,64736,64738,64739,64741,64742,64745],{},[618,64734,64717],{}," component is very simple to set up and use, allowing you to bring your 3D scenes to life.  All you need to do is call the ",[618,64737,64717],{}," component and set the ",[618,64740,59496],{},". It must be wrapped around the ",[618,64743,64744],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[626,64747,64750],{"className":628,"code":64748,"highlights":64749,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Box, PositionalAudio } from '@tresjs/cientos'\nimport { onUnmounted, shallowRef } from 'vue'\n\nconst positionalAudioRef = shallowRef(null)\n\nonUnmounted(() => {\n  positionalAudioRef?.value?.dispose()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CBox :args=\"[1, 1, 1]\">\n      \u003CTresMeshNormalMaterial />\n      \u003CSuspense>\n        \u003CPositionalAudio\n          ref=\"positionalAudioRef\"\n          url=\"your-sound.mp3\"\n        />\n      \u003C/Suspense>\n    \u003C/Box>\n  \u003C/TresCanvas>\n\u003C/template>\n",[578,882,632,902],[618,64751,64752,64772,64796,64818,64822,64839,64843,64855,64870,64876,64884,64888,64896,64904,64922,64930,64938,64946,64961,64976,64980,64988,64996,65004],{"__ignoreMap":576},[637,64753,64754,64756,64758,64760,64762,64764,64766,64768,64770],{"class":639,"line":577},[637,64755,643],{"class":642},[637,64757,647],{"class":646},[637,64759,651],{"class":650},[637,64761,654],{"class":650},[637,64763,657],{"class":642},[637,64765,660],{"class":642},[637,64767,664],{"class":663},[637,64769,660],{"class":642},[637,64771,669],{"class":642},[637,64773,64775,64777,64779,64781,64783,64786,64788,64790,64792,64794],{"class":64774,"line":578},[639,673],[637,64776,677],{"class":676},[637,64778,680],{"class":642},[637,64780,1397],{"class":683},[637,64782,687],{"class":642},[637,64784,64785],{"class":683}," PositionalAudio",[637,64787,693],{"class":642},[637,64789,696],{"class":676},[637,64791,699],{"class":642},[637,64793,702],{"class":663},[637,64795,705],{"class":642},[637,64797,64798,64800,64802,64804,64806,64808,64810,64812,64814,64816],{"class":639,"line":708},[637,64799,677],{"class":676},[637,64801,680],{"class":642},[637,64803,23650],{"class":683},[637,64805,687],{"class":642},[637,64807,3498],{"class":683},[637,64809,693],{"class":642},[637,64811,696],{"class":676},[637,64813,699],{"class":642},[637,64815,633],{"class":663},[637,64817,705],{"class":642},[637,64819,64820],{"class":639,"line":729},[637,64821,742],{"emptyLinePlaceholder":594},[637,64823,64824,64826,64829,64831,64833,64835,64837],{"class":639,"line":739},[637,64825,2415],{"class":650},[637,64827,64828],{"class":683}," positionalAudioRef ",[637,64830,657],{"class":642},[637,64832,3498],{"class":2434},[637,64834,2437],{"class":683},[637,64836,3656],{"class":642},[637,64838,2448],{"class":683},[637,64840,64841],{"class":639,"line":745},[637,64842,742],{"emptyLinePlaceholder":594},[637,64844,64845,64847,64849,64851,64853],{"class":639,"line":755},[637,64846,23697],{"class":2434},[637,64848,2437],{"class":683},[637,64850,3674],{"class":642},[637,64852,3677],{"class":650},[637,64854,1204],{"class":642},[637,64856,64857,64860,64862,64864,64866,64868],{"class":639,"line":778},[637,64858,64859],{"class":683},"  positionalAudioRef",[637,64861,3688],{"class":642},[637,64863,3685],{"class":683},[637,64865,3688],{"class":642},[637,64867,22778],{"class":2434},[637,64869,6535],{"class":646},[637,64871,64872,64874],{"class":639,"line":790},[637,64873,2428],{"class":642},[637,64875,2448],{"class":683},[637,64877,64878,64880,64882],{"class":639,"line":800},[637,64879,732],{"class":642},[637,64881,647],{"class":646},[637,64883,669],{"class":642},[637,64885,64886],{"class":639,"line":805},[637,64887,742],{"emptyLinePlaceholder":594},[637,64889,64890,64892,64894],{"class":639,"line":827},[637,64891,643],{"class":642},[637,64893,750],{"class":646},[637,64895,669],{"class":642},[637,64897,64898,64900,64902],{"class":639,"line":631},[637,64899,758],{"class":642},[637,64901,761],{"class":646},[637,64903,669],{"class":642},[637,64905,64906,64908,64910,64912,64914,64916,64918,64920],{"class":639,"line":850},[637,64907,781],{"class":642},[637,64909,217],{"class":646},[637,64911,1959],{"class":650},[637,64913,657],{"class":642},[637,64915,660],{"class":642},[637,64917,1966],{"class":663},[637,64919,660],{"class":642},[637,64921,669],{"class":642},[637,64923,64924,64926,64928],{"class":639,"line":861},[637,64925,853],{"class":642},[637,64927,877],{"class":646},[637,64929,787],{"class":642},[637,64931,64932,64934,64936],{"class":639,"line":872},[637,64933,853],{"class":642},[637,64935,21652],{"class":646},[637,64937,669],{"class":642},[637,64939,64941,64943],{"class":64940,"line":882},[639,673],[637,64942,864],{"class":642},[637,64944,64945],{"class":646},"PositionalAudio\n",[637,64947,64949,64952,64954,64956,64959],{"class":64948,"line":632},[639,673],[637,64950,64951],{"class":650},"          ref",[637,64953,657],{"class":642},[637,64955,660],{"class":642},[637,64957,64958],{"class":663},"positionalAudioRef",[637,64960,3131],{"class":642},[637,64962,64964,64967,64969,64971,64974],{"class":64963,"line":902},[639,673],[637,64965,64966],{"class":650},"          url",[637,64968,657],{"class":642},[637,64970,660],{"class":642},[637,64972,64973],{"class":663},"your-sound.mp3",[637,64975,3131],{"class":642},[637,64977,64978],{"class":639,"line":912},[637,64979,53372],{"class":642},[637,64981,64982,64984,64986],{"class":639,"line":2625},[637,64983,885],{"class":642},[637,64985,21652],{"class":646},[637,64987,669],{"class":642},[637,64989,64990,64992,64994],{"class":639,"line":2634},[637,64991,895],{"class":642},[637,64993,217],{"class":646},[637,64995,669],{"class":642},[637,64997,64998,65000,65002],{"class":639,"line":2654},[637,64999,905],{"class":642},[637,65001,761],{"class":646},[637,65003,669],{"class":642},[637,65005,65006,65008,65010],{"class":639,"line":2663},[637,65007,732],{"class":642},[637,65009,750],{"class":646},[637,65011,669],{"class":642},[3199,65013,65014],{},[614,65015,65016,65017,65020,65021,65028,65029,65032,65033,3063,65036,65039],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[618,65018,65019],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1140,65022,65025],{"href":65023,"rel":65024},"https://goo.gl/7K7WLu",[1144],[618,65026,65027],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[618,65030,65031],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[618,65034,65035],{},":ready=\"true\"",[618,65037,65038],{},"autoplay=\"true\""," for a direct launch.",[504,65041,65043],{"id":65042},"how-does-it-work","How does it work?",[9460,65045],{"className":65046,"src":65048,"alt":65049},[65047],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[504,65051,922],{"id":921},[927,65053,65054,65064],{},[930,65055,65056],{},[933,65057,65058,65060,65062],{},[936,65059,938],{"align":997},[936,65061,941],{"align":997},[936,65063,944],{},[946,65065,65066,65081,65102,65122,65155,65173,65188,65205,65224],{},[933,65067,65068,65072,65079],{},[951,65069,65070],{"align":997},[1669,65071,59496],{},[951,65073,65074,58464,65076,65078],{"align":997},[618,65075,3572],{},[1669,65077,9259],{}," — The path or URL to the file.",[951,65080],{},[933,65082,65083,65088,65098],{},[951,65084,65085],{"align":997},[1669,65086,65087],{},"helper",[951,65089,65090,65092,65093,3194,65095],{"align":997},[618,65091,17564],{}," — Selects whether helper mode is enabled. ",[7555,65094],{},[1674,65096,65097],{},"(Useful for visualising the angle of sound propagation)",[951,65099,65100],{},[618,65101,971],{},[933,65103,65104,65108,65118],{},[951,65105,65106],{"align":997},[1669,65107,13521],{},[951,65109,65110,65112,65113],{"align":997},[618,65111,5352],{}," — The distance at which the volume reduction starts taking effect. ",[1674,65114,65115],{},[1669,65116,65117],{},"A non-negative number.",[951,65119,65120],{},[618,65121,1874],{},[933,65123,65124,65129,65151],{},[951,65125,65126],{"align":997},[1669,65127,65128],{},"ready",[951,65130,65131,65133,65134,65136,65137,65140,65141,65144,65145,65148,65149],{"align":997},[618,65132,17564],{}," — Tells ",[618,65135,64717],{}," that ",[618,65138,65139],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[618,65142,65143],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1140,65146,65023],{"href":65023,"rel":65147},[1144],"). ",[7555,65150],{},[951,65152,65153],{},[618,65154,971],{},[933,65156,65157,65161,65169],{},[951,65158,65159],{"align":997},[1669,65160,65143],{},[951,65162,65163,65165,65166,65168],{"align":997},[618,65164,17564],{}," — Selects whether the audio is launched automatically. Please refer to the ",[618,65167,65128],{}," prop for a better understanding of how to use autoplay.",[951,65170,65171],{},[618,65172,971],{},[933,65174,65175,65179,65184],{},[951,65176,65177],{"align":997},[1669,65178,25923],{},[951,65180,65181,65183],{"align":997},[618,65182,17564],{}," — Specifies whether the audio should loop.",[951,65185,65186],{},[618,65187,971],{},[933,65189,65190,65195,65200],{},[951,65191,65192],{"align":997},[1669,65193,65194],{},"innerAngle",[951,65196,65197,65199],{"align":997},[618,65198,5352],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[951,65201,65202],{},[618,65203,65204],{},"360",[933,65206,65207,65212,65220],{},[951,65208,65209],{"align":997},[1669,65210,65211],{},"outerAngle",[951,65213,65214,65216,65217,41238],{"align":997},[618,65215,5352],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[618,65218,65219],{},"outerGain",[951,65221,65222],{},[618,65223,965],{},[933,65225,65226,65230,65241],{},[951,65227,65228],{"align":997},[1669,65229,65219],{},[951,65231,65232,65234,65235,65237,65238,65240],{"align":997},[618,65233,5352],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[618,65236,65211],{}," prop. When the value is ",[618,65239,965],{}," no sound can be heard.",[951,65242,65243],{},[618,65244,965],{},[504,65246,58591],{"id":58590},[927,65248,65249,65257],{},[930,65250,65251],{},[933,65252,65253,65255],{},[936,65254,5759],{"align":997},[936,65256,941],{"align":997},[946,65258,65259,65271,65284,65297,65310],{},[933,65260,65261,65265],{},[951,65262,65263],{"align":997},[618,65264,9326],{},[951,65266,65267,65268,1146],{"align":997},"Instance reference — Inheritance of ",[1140,65269,483],{"href":64712,"rel":65270},[1144],[933,65272,65273,65278],{},[951,65274,65275],{"align":997},[618,65276,65277],{},"play()",[951,65279,65280,65281],{"align":997},"Play audio — ",[1674,65282,65283],{},"Cannot be fired if audio is already running.",[933,65285,65286,65291],{},[951,65287,65288],{"align":997},[618,65289,65290],{},"pause()",[951,65292,65293,65294],{"align":997},"Pause audio — ",[1674,65295,65296],{},"Cannot be fired if audio is already paused.",[933,65298,65299,65304],{},[951,65300,65301],{"align":997},[618,65302,65303],{},"stop()",[951,65305,65306,65307],{"align":997},"Stop audio — ",[1674,65308,65309],{},"Cannot be fired if audio is already stopped.",[933,65311,65312,65316],{},[951,65313,65314],{"align":997},[618,65315,24813],{},[951,65317,65318],{"align":997},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[626,65320,65324],{"className":65321,"code":65322,"language":65323,"meta":576,"style":576},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const positionalAudioRef = shallowRef(null)\n\nconsole.log(positionalAudioRef.value.instance) // instance properties\n\nconst handlerAudio = (action: string) => {\n  if (!positionalAudioRef.value) { return }\n\n  const { play, pause, stop } = positionalAudioRef.value\n\n  if (action === 'play') { play() }\n  else if (action === 'pause') { pause() }\n  else if (action === 'stop') { stop() }\n}\n","typescript",[618,65325,65326,65342,65346,65370,65374,65398,65420,65424,65454,65458,65485,65516,65545],{"__ignoreMap":576},[637,65327,65328,65330,65332,65334,65336,65338,65340],{"class":639,"line":577},[637,65329,2415],{"class":650},[637,65331,64828],{"class":683},[637,65333,657],{"class":642},[637,65335,3498],{"class":2434},[637,65337,2437],{"class":683},[637,65339,3656],{"class":642},[637,65341,2448],{"class":683},[637,65343,65344],{"class":639,"line":578},[637,65345,742],{"emptyLinePlaceholder":594},[637,65347,65348,65351,65353,65355,65358,65360,65362,65364,65367],{"class":639,"line":708},[637,65349,65350],{"class":683},"console",[637,65352,1146],{"class":642},[637,65354,6859],{"class":2434},[637,65356,65357],{"class":683},"(positionalAudioRef",[637,65359,1146],{"class":642},[637,65361,3685],{"class":683},[637,65363,1146],{"class":642},[637,65365,65366],{"class":683},"instance) ",[637,65368,65369],{"class":1209},"// instance properties\n",[637,65371,65372],{"class":639,"line":729},[637,65373,742],{"emptyLinePlaceholder":594},[637,65375,65376,65378,65381,65383,65385,65388,65390,65392,65394,65396],{"class":639,"line":739},[637,65377,2415],{"class":650},[637,65379,65380],{"class":683}," handlerAudio ",[637,65382,657],{"class":642},[637,65384,3074],{"class":642},[637,65386,65387],{"class":6838},"action",[637,65389,1218],{"class":642},[637,65391,5337],{"class":1200},[637,65393,3340],{"class":642},[637,65395,3677],{"class":650},[637,65397,1204],{"class":642},[637,65399,65400,65402,65404,65406,65408,65410,65412,65414,65416,65418],{"class":639,"line":745},[637,65401,21254],{"class":676},[637,65403,3074],{"class":646},[637,65405,52321],{"class":642},[637,65407,64958],{"class":683},[637,65409,1146],{"class":642},[637,65411,3685],{"class":683},[637,65413,4734],{"class":646},[637,65415,8438],{"class":642},[637,65417,52334],{"class":676},[637,65419,17798],{"class":642},[637,65421,65422],{"class":639,"line":755},[637,65423,742],{"emptyLinePlaceholder":594},[637,65425,65426,65428,65430,65433,65435,65438,65440,65443,65445,65447,65450,65452],{"class":639,"line":778},[637,65427,56947],{"class":650},[637,65429,680],{"class":642},[637,65431,65432],{"class":683}," play",[637,65434,687],{"class":642},[637,65436,65437],{"class":683}," pause",[637,65439,687],{"class":642},[637,65441,65442],{"class":683}," stop",[637,65444,693],{"class":642},[637,65446,2431],{"class":642},[637,65448,65449],{"class":683}," positionalAudioRef",[637,65451,1146],{"class":642},[637,65453,23873],{"class":683},[637,65455,65456],{"class":639,"line":790},[637,65457,742],{"emptyLinePlaceholder":594},[637,65459,65460,65462,65464,65466,65468,65470,65473,65475,65477,65479,65481,65483],{"class":639,"line":800},[637,65461,21254],{"class":676},[637,65463,3074],{"class":646},[637,65465,65387],{"class":683},[637,65467,21275],{"class":642},[637,65469,699],{"class":642},[637,65471,65472],{"class":663},"play",[637,65474,2440],{"class":642},[637,65476,4734],{"class":646},[637,65478,8438],{"class":642},[637,65480,65432],{"class":2434},[637,65482,6984],{"class":646},[637,65484,1325],{"class":642},[637,65486,65487,65490,65493,65495,65497,65499,65501,65504,65506,65508,65510,65512,65514],{"class":639,"line":805},[637,65488,65489],{"class":676},"  else",[637,65491,65492],{"class":676}," if",[637,65494,3074],{"class":646},[637,65496,65387],{"class":683},[637,65498,21275],{"class":642},[637,65500,699],{"class":642},[637,65502,65503],{"class":663},"pause",[637,65505,2440],{"class":642},[637,65507,4734],{"class":646},[637,65509,8438],{"class":642},[637,65511,65437],{"class":2434},[637,65513,6984],{"class":646},[637,65515,1325],{"class":642},[637,65517,65518,65520,65522,65524,65526,65528,65530,65533,65535,65537,65539,65541,65543],{"class":639,"line":827},[637,65519,65489],{"class":676},[637,65521,65492],{"class":676},[637,65523,3074],{"class":646},[637,65525,65387],{"class":683},[637,65527,21275],{"class":642},[637,65529,699],{"class":642},[637,65531,65532],{"class":663},"stop",[637,65534,2440],{"class":642},[637,65536,4734],{"class":646},[637,65538,8438],{"class":642},[637,65540,65442],{"class":2434},[637,65542,6984],{"class":646},[637,65544,1325],{"class":642},[637,65546,65547],{"class":639,"line":631},[637,65548,1325],{"class":642},[626,65550,65552],{"className":628,"code":65551,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n  \u003Cbutton @click=\"handlerAudio('play')\">play\u003C/button>\n  \u003Cbutton @click=\"handlerAudio('pause')\">pause\u003C/button>\n  \u003Cbutton @click=\"handlerAudio('stop')\">stop\u003C/button>\n\n  \u003CTresCanvas>\n    \u003CSphere>\n      \u003CSuspense>\n        \u003CPositionalAudio />\n      \u003C/Suspense>\n    \u003C/Sphere>\n  \u003C/TresCanvas>\n\u003C/template>\n",[618,65553,65554,65562,65589,65616,65643,65647,65655,65663,65671,65679,65687,65695,65703],{"__ignoreMap":576},[637,65555,65556,65558,65560],{"class":639,"line":577},[637,65557,643],{"class":642},[637,65559,750],{"class":646},[637,65561,669],{"class":642},[637,65563,65564,65566,65568,65570,65572,65574,65577,65579,65581,65583,65585,65587],{"class":639,"line":578},[637,65565,758],{"class":642},[637,65567,38185],{"class":646},[637,65569,38188],{"class":650},[637,65571,657],{"class":642},[637,65573,660],{"class":642},[637,65575,65576],{"class":663},"handlerAudio('play')",[637,65578,660],{"class":642},[637,65580,3651],{"class":642},[637,65582,65472],{"class":683},[637,65584,732],{"class":642},[637,65586,38185],{"class":646},[637,65588,669],{"class":642},[637,65590,65591,65593,65595,65597,65599,65601,65604,65606,65608,65610,65612,65614],{"class":639,"line":708},[637,65592,758],{"class":642},[637,65594,38185],{"class":646},[637,65596,38188],{"class":650},[637,65598,657],{"class":642},[637,65600,660],{"class":642},[637,65602,65603],{"class":663},"handlerAudio('pause')",[637,65605,660],{"class":642},[637,65607,3651],{"class":642},[637,65609,65503],{"class":683},[637,65611,732],{"class":642},[637,65613,38185],{"class":646},[637,65615,669],{"class":642},[637,65617,65618,65620,65622,65624,65626,65628,65631,65633,65635,65637,65639,65641],{"class":639,"line":729},[637,65619,758],{"class":642},[637,65621,38185],{"class":646},[637,65623,38188],{"class":650},[637,65625,657],{"class":642},[637,65627,660],{"class":642},[637,65629,65630],{"class":663},"handlerAudio('stop')",[637,65632,660],{"class":642},[637,65634,3651],{"class":642},[637,65636,65532],{"class":683},[637,65638,732],{"class":642},[637,65640,38185],{"class":646},[637,65642,669],{"class":642},[637,65644,65645],{"class":639,"line":739},[637,65646,742],{"emptyLinePlaceholder":594},[637,65648,65649,65651,65653],{"class":639,"line":745},[637,65650,758],{"class":642},[637,65652,761],{"class":646},[637,65654,669],{"class":642},[637,65656,65657,65659,65661],{"class":639,"line":755},[637,65658,781],{"class":642},[637,65660,285],{"class":646},[637,65662,669],{"class":642},[637,65664,65665,65667,65669],{"class":639,"line":778},[637,65666,853],{"class":642},[637,65668,21652],{"class":646},[637,65670,669],{"class":642},[637,65672,65673,65675,65677],{"class":639,"line":790},[637,65674,864],{"class":642},[637,65676,483],{"class":646},[637,65678,787],{"class":642},[637,65680,65681,65683,65685],{"class":639,"line":800},[637,65682,885],{"class":642},[637,65684,21652],{"class":646},[637,65686,669],{"class":642},[637,65688,65689,65691,65693],{"class":639,"line":805},[637,65690,895],{"class":642},[637,65692,285],{"class":646},[637,65694,669],{"class":642},[637,65696,65697,65699,65701],{"class":639,"line":827},[637,65698,905],{"class":642},[637,65700,761],{"class":646},[637,65702,669],{"class":642},[637,65704,65705,65707,65709],{"class":639,"line":631},[637,65706,732],{"class":642},[637,65708,750],{"class":646},[637,65710,669],{"class":642},[504,65712,14280],{"id":14279},[927,65714,65715,65723],{},[930,65716,65717],{},[933,65718,65719,65721],{},[936,65720,5759],{"align":997},[936,65722,941],{"align":997},[946,65724,65725],{},[933,65726,65727,65732],{},[951,65728,65729],{"align":997},[618,65730,65731],{},"is-playing",[951,65733,65734,65735,3194,65737],{"align":997},"Triggered when the audio changes its state (play, pause, or stop) ",[7555,65736],{},[618,65738,65739],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1327,65741,65742],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":65744},[65745,65746,65747,65748,65749],{"id":624,"depth":578,"text":15},{"id":65042,"depth":578,"text":65043},{"id":921,"depth":578,"text":922},{"id":58590,"depth":578,"text":58591},{"id":14279,"depth":578,"text":14280},"Spatially positioned audio in 3D space.",{},{"title":483,"description":65750},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",{"id":65755,"title":487,"body":65756,"description":66383,"extension":591,"links":592,"meta":66384,"navigation":594,"path":488,"seo":66385,"stem":489,"__hash__":66386},"docs/2.api/miscellaneous/use-animations.md",{"type":501,"value":65757,"toc":66376},[65758,65771,65773,65777,65787,66014,66018,66025,66353,66355,66373],[614,65759,65760,65762,65763,65766,65767,36656],{},[618,65761,487],{}," is a composable that returns a ",[618,65764,65765],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1140,65768,8956],{"href":65769,"rel":65770},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1144],[504,65772,15],{"id":624},[4051,65774,65776],{"id":65775},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[614,65778,65779,65780,65782,65783,65786],{},"By default, ",[618,65781,487],{}," automatically updates the animation mixer on each frame using the ",[618,65784,65785],{},"useLoop"," composable:",[626,65788,65791],{"className":1186,"code":65789,"highlights":65790,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs/cientos'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions } = useAnimations(animations, model)\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n  currentAction.value = newActions.Greeting\n  currentAction.value.play()\n})\n",[577,755],[618,65792,65793,65817,65821,65846,65850,65884,65910,65934,65938,65951,65955,65975,65994,66008],{"__ignoreMap":576},[637,65794,65796,65798,65800,65803,65805,65807,65809,65811,65813,65815],{"class":65795,"line":577},[639,673],[637,65797,677],{"class":676},[637,65799,680],{"class":642},[637,65801,65802],{"class":683}," useAnimations",[637,65804,687],{"class":642},[637,65806,4347],{"class":683},[637,65808,693],{"class":642},[637,65810,696],{"class":676},[637,65812,699],{"class":642},[637,65814,702],{"class":663},[637,65816,705],{"class":642},[637,65818,65819],{"class":639,"line":578},[637,65820,742],{"emptyLinePlaceholder":594},[637,65822,65823,65825,65827,65829,65831,65833,65835,65837,65839,65842,65844],{"class":639,"line":708},[637,65824,2415],{"class":650},[637,65826,680],{"class":642},[637,65828,59590],{"class":683},[637,65830,2428],{"class":642},[637,65832,2431],{"class":642},[637,65834,4347],{"class":2434},[637,65836,2437],{"class":683},[637,65838,2440],{"class":642},[637,65840,65841],{"class":663},"/models/ugly-naked-bunny.gltf",[637,65843,2440],{"class":642},[637,65845,2448],{"class":683},[637,65847,65848],{"class":639,"line":729},[637,65849,742],{"emptyLinePlaceholder":594},[637,65851,65852,65854,65857,65859,65861,65863,65865,65867,65869,65871,65873,65875,65878,65881],{"class":639,"line":739},[637,65853,2415],{"class":650},[637,65855,65856],{"class":683}," animations ",[637,65858,657],{"class":642},[637,65860,3489],{"class":2434},[637,65862,2437],{"class":683},[637,65864,3674],{"class":642},[637,65866,3677],{"class":650},[637,65868,2420],{"class":683},[637,65870,1146],{"class":642},[637,65872,3685],{"class":683},[637,65874,3688],{"class":642},[637,65876,65877],{"class":683},"animations ",[637,65879,65880],{"class":642},"||",[637,65882,65883],{"class":683}," [])\n",[637,65885,65886,65888,65890,65892,65894,65896,65898,65900,65902,65904,65906,65908],{"class":639,"line":745},[637,65887,2415],{"class":650},[637,65889,5009],{"class":683},[637,65891,657],{"class":642},[637,65893,3489],{"class":2434},[637,65895,2437],{"class":683},[637,65897,3674],{"class":642},[637,65899,3677],{"class":650},[637,65901,2420],{"class":683},[637,65903,3688],{"class":642},[637,65905,3685],{"class":683},[637,65907,3688],{"class":642},[637,65909,5057],{"class":683},[637,65911,65913,65915,65917,65920,65922,65924,65926,65929,65931],{"class":65912,"line":755},[639,673],[637,65914,2415],{"class":650},[637,65916,680],{"class":642},[637,65918,65919],{"class":683}," actions ",[637,65921,2428],{"class":642},[637,65923,2431],{"class":642},[637,65925,65802],{"class":2434},[637,65927,65928],{"class":683},"(animations",[637,65930,687],{"class":642},[637,65932,65933],{"class":683}," model)\n",[637,65935,65936],{"class":639,"line":778},[637,65937,742],{"emptyLinePlaceholder":594},[637,65939,65940,65942,65945,65947,65949],{"class":639,"line":790},[637,65941,2415],{"class":650},[637,65943,65944],{"class":683}," currentAction ",[637,65946,657],{"class":642},[637,65948,3872],{"class":2434},[637,65950,6535],{"class":683},[637,65952,65953],{"class":639,"line":800},[637,65954,742],{"emptyLinePlaceholder":594},[637,65956,65957,65959,65962,65964,65966,65969,65971,65973],{"class":639,"line":805},[637,65958,12189],{"class":2434},[637,65960,65961],{"class":683},"(actions",[637,65963,687],{"class":642},[637,65965,3074],{"class":642},[637,65967,65968],{"class":6838},"newActions",[637,65970,3340],{"class":642},[637,65972,3677],{"class":650},[637,65974,1204],{"class":642},[637,65976,65977,65980,65982,65984,65986,65989,65991],{"class":639,"line":827},[637,65978,65979],{"class":683},"  currentAction",[637,65981,1146],{"class":642},[637,65983,3685],{"class":683},[637,65985,2431],{"class":642},[637,65987,65988],{"class":683}," newActions",[637,65990,1146],{"class":642},[637,65992,65993],{"class":683},"Greeting\n",[637,65995,65996,65998,66000,66002,66004,66006],{"class":639,"line":631},[637,65997,65979],{"class":683},[637,65999,1146],{"class":642},[637,66001,3685],{"class":683},[637,66003,1146],{"class":642},[637,66005,65472],{"class":2434},[637,66007,6535],{"class":646},[637,66009,66010,66012],{"class":639,"line":850},[637,66011,2428],{"class":642},[637,66013,2448],{"class":683},[4051,66015,66017],{"id":66016},"manual-updates","Manual Updates",[614,66019,66020,66021,66024],{},"To gain finer control over animation mixer updates, enable ",[618,66022,66023],{},"manualUpdate: true"," and manage the update cycle manually.",[626,66026,66029],{"className":1186,"code":66027,"highlights":66028,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions, mixer } = useAnimations(animations, model, {\n  manualUpdate: true,\n})\n\n// Handle updates manually\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta }) => {\n  mixer.value.update(delta)\n})\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n  currentAction.value = newActions.Greeting\n  currentAction.value.play()\n})\n",[577,778,790,800,861],[618,66030,66031,66054,66072,66076,66100,66104,66134,66160,66191,66203,66210,66214,66219,66235,66252,66273,66279,66283,66295,66299,66317,66333,66347],{"__ignoreMap":576},[637,66032,66034,66036,66038,66040,66042,66044,66046,66048,66050,66052],{"class":66033,"line":577},[639,673],[637,66035,677],{"class":676},[637,66037,680],{"class":642},[637,66039,65802],{"class":683},[637,66041,687],{"class":642},[637,66043,4347],{"class":683},[637,66045,693],{"class":642},[637,66047,696],{"class":676},[637,66049,699],{"class":642},[637,66051,702],{"class":663},[637,66053,705],{"class":642},[637,66055,66056,66058,66060,66062,66064,66066,66068,66070],{"class":639,"line":578},[637,66057,677],{"class":676},[637,66059,680],{"class":642},[637,66061,60889],{"class":683},[637,66063,693],{"class":642},[637,66065,696],{"class":676},[637,66067,699],{"class":642},[637,66069,724],{"class":663},[637,66071,705],{"class":642},[637,66073,66074],{"class":639,"line":708},[637,66075,742],{"emptyLinePlaceholder":594},[637,66077,66078,66080,66082,66084,66086,66088,66090,66092,66094,66096,66098],{"class":639,"line":729},[637,66079,2415],{"class":650},[637,66081,680],{"class":642},[637,66083,59590],{"class":683},[637,66085,2428],{"class":642},[637,66087,2431],{"class":642},[637,66089,4347],{"class":2434},[637,66091,2437],{"class":683},[637,66093,2440],{"class":642},[637,66095,65841],{"class":663},[637,66097,2440],{"class":642},[637,66099,2448],{"class":683},[637,66101,66102],{"class":639,"line":739},[637,66103,742],{"emptyLinePlaceholder":594},[637,66105,66106,66108,66110,66112,66114,66116,66118,66120,66122,66124,66126,66128,66130,66132],{"class":639,"line":745},[637,66107,2415],{"class":650},[637,66109,65856],{"class":683},[637,66111,657],{"class":642},[637,66113,3489],{"class":2434},[637,66115,2437],{"class":683},[637,66117,3674],{"class":642},[637,66119,3677],{"class":650},[637,66121,2420],{"class":683},[637,66123,1146],{"class":642},[637,66125,3685],{"class":683},[637,66127,3688],{"class":642},[637,66129,65877],{"class":683},[637,66131,65880],{"class":642},[637,66133,65883],{"class":683},[637,66135,66136,66138,66140,66142,66144,66146,66148,66150,66152,66154,66156,66158],{"class":639,"line":755},[637,66137,2415],{"class":650},[637,66139,5009],{"class":683},[637,66141,657],{"class":642},[637,66143,3489],{"class":2434},[637,66145,2437],{"class":683},[637,66147,3674],{"class":642},[637,66149,3677],{"class":650},[637,66151,2420],{"class":683},[637,66153,3688],{"class":642},[637,66155,3685],{"class":683},[637,66157,3688],{"class":642},[637,66159,5057],{"class":683},[637,66161,66163,66165,66167,66170,66172,66175,66177,66179,66181,66183,66185,66187,66189],{"class":66162,"line":778},[639,673],[637,66164,2415],{"class":650},[637,66166,680],{"class":642},[637,66168,66169],{"class":683}," actions",[637,66171,687],{"class":642},[637,66173,66174],{"class":683}," mixer ",[637,66176,2428],{"class":642},[637,66178,2431],{"class":642},[637,66180,65802],{"class":2434},[637,66182,65928],{"class":683},[637,66184,687],{"class":642},[637,66186,5048],{"class":683},[637,66188,687],{"class":642},[637,66190,1204],{"class":642},[637,66192,66194,66197,66199,66201],{"class":66193,"line":790},[639,673],[637,66195,66196],{"class":646},"  manualUpdate",[637,66198,1218],{"class":642},[637,66200,4398],{"class":4397},[637,66202,2488],{"class":642},[637,66204,66206,66208],{"class":66205,"line":800},[639,673],[637,66207,2428],{"class":642},[637,66209,2448],{"class":683},[637,66211,66212],{"class":639,"line":805},[637,66213,742],{"emptyLinePlaceholder":594},[637,66215,66216],{"class":639,"line":827},[637,66217,66218],{"class":1209},"// Handle updates manually\n",[637,66220,66221,66223,66225,66227,66229,66231,66233],{"class":639,"line":631},[637,66222,2415],{"class":650},[637,66224,680],{"class":642},[637,66226,61218],{"class":683},[637,66228,2428],{"class":642},[637,66230,2431],{"class":642},[637,66232,60889],{"class":2434},[637,66234,6535],{"class":683},[637,66236,66237,66239,66241,66243,66246,66248,66250],{"class":639,"line":850},[637,66238,61231],{"class":2434},[637,66240,2437],{"class":683},[637,66242,39676],{"class":642},[637,66244,66245],{"class":6838}," delta",[637,66247,39693],{"class":642},[637,66249,3677],{"class":650},[637,66251,1204],{"class":642},[637,66253,66255,66258,66260,66262,66264,66266,66268,66271],{"class":66254,"line":861},[639,673],[637,66256,66257],{"class":683},"  mixer",[637,66259,1146],{"class":642},[637,66261,3685],{"class":683},[637,66263,1146],{"class":642},[637,66265,5803],{"class":2434},[637,66267,2437],{"class":646},[637,66269,66270],{"class":683},"delta",[637,66272,2448],{"class":646},[637,66274,66275,66277],{"class":639,"line":872},[637,66276,2428],{"class":642},[637,66278,2448],{"class":683},[637,66280,66281],{"class":639,"line":882},[637,66282,742],{"emptyLinePlaceholder":594},[637,66284,66285,66287,66289,66291,66293],{"class":639,"line":632},[637,66286,2415],{"class":650},[637,66288,65944],{"class":683},[637,66290,657],{"class":642},[637,66292,3872],{"class":2434},[637,66294,6535],{"class":683},[637,66296,66297],{"class":639,"line":902},[637,66298,742],{"emptyLinePlaceholder":594},[637,66300,66301,66303,66305,66307,66309,66311,66313,66315],{"class":639,"line":912},[637,66302,12189],{"class":2434},[637,66304,65961],{"class":683},[637,66306,687],{"class":642},[637,66308,3074],{"class":642},[637,66310,65968],{"class":6838},[637,66312,3340],{"class":642},[637,66314,3677],{"class":650},[637,66316,1204],{"class":642},[637,66318,66319,66321,66323,66325,66327,66329,66331],{"class":639,"line":2625},[637,66320,65979],{"class":683},[637,66322,1146],{"class":642},[637,66324,3685],{"class":683},[637,66326,2431],{"class":642},[637,66328,65988],{"class":683},[637,66330,1146],{"class":642},[637,66332,65993],{"class":683},[637,66334,66335,66337,66339,66341,66343,66345],{"class":639,"line":2634},[637,66336,65979],{"class":683},[637,66338,1146],{"class":642},[637,66340,3685],{"class":683},[637,66342,1146],{"class":642},[637,66344,65472],{"class":2434},[637,66346,6535],{"class":646},[637,66348,66349,66351],{"class":639,"line":2654},[637,66350,2428],{"class":642},[637,66352,2448],{"class":683},[504,66354,14023],{"id":17537},[2213,66356,66357],{},[2216,66358,66359,66362,66363,66365,66366,66368,66369,66372],{},[618,66360,66361],{},"manualUpdate"," (optional): Default is ",[618,66364,971],{},". If set to ",[618,66367,961],{},", disables automatic animation mixer updates. You'll need to call ",[618,66370,66371],{},"mixer.value.update(delta)"," manually.",[1327,66374,66375],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":66377},[66378,66382],{"id":624,"depth":578,"text":15,"children":66379},[66380,66381],{"id":65775,"depth":708,"text":65776},{"id":66016,"depth":708,"text":66017},{"id":17537,"depth":578,"text":14023},"Composable for managing model animations with AnimationMixer.",{},{"title":487,"description":66383},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":66388,"title":491,"body":66389,"description":66984,"extension":591,"links":592,"meta":66985,"navigation":594,"path":492,"seo":66986,"stem":493,"__hash__":66987},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":501,"value":66390,"toc":66978},[66391,66408,66410,66775,66779,66828,66830,66975],[614,66392,66393,66398,66399,66404,66405,66407],{},[1140,66394,66397],{"href":66395,"rel":66396},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1144],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1140,66400,66403],{"href":66401,"rel":66402},"https://www.khronos.org/gltf",[1144],"GLTF"," format. ",[1669,66406,16927],{}," provides a composable that simplifies this process with just a few lines of code.",[504,66409,37104],{"id":37103},[626,66411,66414],{"className":628,"code":66412,"highlights":66413,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { useGLTFExporter } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boxRef = shallowRef()\n\n// the second argument – options – is not required\nconst downloadBox = () => {\n  useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })\n}\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\" window-size >\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CTresMesh\n      ref=\"boxRef\"\n      :position-z=\"30\"\n      :scale=\"10\"\n      @click=\"downloadBox\"\n    >\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n      \u003CTresMeshStandardMaterial :color=\"0x00ff00\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight :position=\"[0, 10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[708,800],[618,66415,66416,66436,66454,66474,66492,66496,66508,66512,66517,66532,66574,66578,66586,66594,66616,66634,66640,66652,66665,66677,66691,66695,66713,66732,66740,66759,66767],{"__ignoreMap":576},[637,66417,66418,66420,66422,66424,66426,66428,66430,66432,66434],{"class":639,"line":577},[637,66419,643],{"class":642},[637,66421,647],{"class":646},[637,66423,651],{"class":650},[637,66425,654],{"class":650},[637,66427,657],{"class":642},[637,66429,660],{"class":642},[637,66431,664],{"class":663},[637,66433,660],{"class":642},[637,66435,669],{"class":642},[637,66437,66438,66440,66442,66444,66446,66448,66450,66452],{"class":639,"line":578},[637,66439,677],{"class":676},[637,66441,680],{"class":642},[637,66443,715],{"class":683},[637,66445,693],{"class":642},[637,66447,696],{"class":676},[637,66449,699],{"class":642},[637,66451,724],{"class":663},[637,66453,705],{"class":642},[637,66455,66457,66459,66461,66464,66466,66468,66470,66472],{"class":66456,"line":708},[639,673],[637,66458,677],{"class":676},[637,66460,680],{"class":642},[637,66462,66463],{"class":683}," useGLTFExporter",[637,66465,693],{"class":642},[637,66467,696],{"class":676},[637,66469,699],{"class":642},[637,66471,702],{"class":663},[637,66473,705],{"class":642},[637,66475,66476,66478,66480,66482,66484,66486,66488,66490],{"class":639,"line":729},[637,66477,677],{"class":676},[637,66479,680],{"class":642},[637,66481,3498],{"class":683},[637,66483,693],{"class":642},[637,66485,696],{"class":676},[637,66487,699],{"class":642},[637,66489,633],{"class":663},[637,66491,705],{"class":642},[637,66493,66494],{"class":639,"line":739},[637,66495,742],{"emptyLinePlaceholder":594},[637,66497,66498,66500,66502,66504,66506],{"class":639,"line":745},[637,66499,2415],{"class":650},[637,66501,16260],{"class":683},[637,66503,657],{"class":642},[637,66505,3498],{"class":2434},[637,66507,6535],{"class":683},[637,66509,66510],{"class":639,"line":755},[637,66511,742],{"emptyLinePlaceholder":594},[637,66513,66514],{"class":639,"line":778},[637,66515,66516],{"class":1209},"// the second argument – options – is not required\n",[637,66518,66519,66521,66524,66526,66528,66530],{"class":639,"line":790},[637,66520,2415],{"class":650},[637,66522,66523],{"class":683}," downloadBox ",[637,66525,657],{"class":642},[637,66527,7080],{"class":642},[637,66529,3677],{"class":650},[637,66531,1204],{"class":642},[637,66533,66535,66538,66540,66542,66544,66546,66548,66550,66553,66555,66557,66559,66561,66563,66566,66568,66570,66572],{"class":66534,"line":800},[639,673],[637,66536,66537],{"class":2434},"  useGLTFExporter",[637,66539,2437],{"class":646},[637,66541,16336],{"class":683},[637,66543,1146],{"class":642},[637,66545,3685],{"class":683},[637,66547,687],{"class":642},[637,66549,680],{"class":642},[637,66551,66552],{"class":646}," fileName",[637,66554,1218],{"class":642},[637,66556,699],{"class":642},[637,66558,3822],{"class":663},[637,66560,2440],{"class":642},[637,66562,687],{"class":642},[637,66564,66565],{"class":646}," binary",[637,66567,1218],{"class":642},[637,66569,4398],{"class":4397},[637,66571,693],{"class":642},[637,66573,2448],{"class":646},[637,66575,66576],{"class":639,"line":805},[637,66577,1325],{"class":642},[637,66579,66580,66582,66584],{"class":639,"line":827},[637,66581,732],{"class":642},[637,66583,647],{"class":646},[637,66585,669],{"class":642},[637,66587,66588,66590,66592],{"class":639,"line":631},[637,66589,643],{"class":642},[637,66591,750],{"class":646},[637,66593,669],{"class":642},[637,66595,66596,66598,66600,66602,66604,66606,66608,66610,66613],{"class":639,"line":850},[637,66597,758],{"class":642},[637,66599,761],{"class":646},[637,66601,764],{"class":650},[637,66603,657],{"class":642},[637,66605,660],{"class":642},[637,66607,11791],{"class":663},[637,66609,660],{"class":642},[637,66611,66612],{"class":650}," window-size",[637,66614,66615],{"class":642}," >\n",[637,66617,66618,66620,66622,66624,66626,66628,66630,66632],{"class":639,"line":861},[637,66619,781],{"class":642},[637,66621,784],{"class":646},[637,66623,1485],{"class":650},[637,66625,657],{"class":642},[637,66627,660],{"class":642},[637,66629,7445],{"class":663},[637,66631,660],{"class":642},[637,66633,787],{"class":642},[637,66635,66636,66638],{"class":639,"line":872},[637,66637,781],{"class":642},[637,66639,5126],{"class":646},[637,66641,66642,66644,66646,66648,66650],{"class":639,"line":882},[637,66643,12363],{"class":650},[637,66645,657],{"class":642},[637,66647,660],{"class":642},[637,66649,16336],{"class":663},[637,66651,3131],{"class":642},[637,66653,66654,66657,66659,66661,66663],{"class":639,"line":632},[637,66655,66656],{"class":650},"      :position-z",[637,66658,657],{"class":642},[637,66660,660],{"class":642},[637,66662,28432],{"class":663},[637,66664,3131],{"class":642},[637,66666,66667,66669,66671,66673,66675],{"class":639,"line":902},[637,66668,59256],{"class":650},[637,66670,657],{"class":642},[637,66672,660],{"class":642},[637,66674,37498],{"class":663},[637,66676,3131],{"class":642},[637,66678,66679,66682,66684,66686,66689],{"class":639,"line":912},[637,66680,66681],{"class":650},"      @click",[637,66683,657],{"class":642},[637,66685,660],{"class":642},[637,66687,66688],{"class":663},"downloadBox",[637,66690,3131],{"class":642},[637,66692,66693],{"class":639,"line":2625},[637,66694,12391],{"class":642},[637,66696,66697,66699,66701,66703,66705,66707,66709,66711],{"class":639,"line":2634},[637,66698,853],{"class":642},[637,66700,867],{"class":646},[637,66702,1959],{"class":650},[637,66704,657],{"class":642},[637,66706,660],{"class":642},[637,66708,1966],{"class":663},[637,66710,660],{"class":642},[637,66712,787],{"class":642},[637,66714,66715,66717,66719,66721,66723,66725,66728,66730],{"class":639,"line":2654},[637,66716,853],{"class":642},[637,66718,2686],{"class":646},[637,66720,40009],{"class":650},[637,66722,657],{"class":642},[637,66724,660],{"class":642},[637,66726,66727],{"class":663},"0x00ff00",[637,66729,660],{"class":642},[637,66731,787],{"class":642},[637,66733,66734,66736,66738],{"class":639,"line":2663},[637,66735,895],{"class":642},[637,66737,856],{"class":646},[637,66739,669],{"class":642},[637,66741,66742,66744,66746,66748,66750,66752,66755,66757],{"class":639,"line":2672},[637,66743,781],{"class":642},[637,66745,9700],{"class":646},[637,66747,1485],{"class":650},[637,66749,657],{"class":642},[637,66751,660],{"class":642},[637,66753,66754],{"class":663},"[0, 10, 10]",[637,66756,660],{"class":642},[637,66758,787],{"class":642},[637,66760,66761,66763,66765],{"class":639,"line":2681},[637,66762,905],{"class":642},[637,66764,761],{"class":646},[637,66766,669],{"class":642},[637,66768,66769,66771,66773],{"class":639,"line":2703},[637,66770,732],{"class":642},[637,66772,750],{"class":646},[637,66774,669],{"class":642},[504,66776,66778],{"id":66777},"arguments","Arguments",[927,66780,66781,66793],{},[930,66782,66783],{},[933,66784,66785,66787,66789,66791],{},[936,66786,8089],{"align":997},[936,66788,5969],{},[936,66790,944],{},[936,66792,941],{},[946,66794,66795,66811],{},[933,66796,66797,66802,66806,66808],{},[951,66798,66799],{"align":997},[1669,66800,66801],{},"Selector",[951,66803,66804],{},[618,66805,7622],{},[951,66807,18588],{},[951,66809,66810],{},"The object to download. Could be an array of objects",[933,66812,66813,66817,66821,66825],{},[951,66814,66815],{"align":997},[1669,66816,14023],{},[951,66818,66819],{},[618,66820,14023],{},[951,66822,66823],{},[618,66824,1179],{},[951,66826,66827],{},"Description below",[4051,66829,14023],{"id":17537},[927,66831,66832,66844],{},[930,66833,66834],{},[933,66835,66836,66838,66840,66842],{},[936,66837,8089],{"align":997},[936,66839,5969],{"align":997},[936,66841,944],{"align":997},[936,66843,941],{"align":997},[946,66845,66846,66865,66883,66901,66919,66938,66956],{},[933,66847,66848,66853,66858,66862],{},[951,66849,66850],{"align":997},[1669,66851,66852],{},"trs",[951,66854,66855],{"align":997},[618,66856,66857],{},"bool",[951,66859,66860],{"align":997},[618,66861,971],{},[951,66863,66864],{"align":997},"Export position, rotation and scale instead of matrix per node",[933,66866,66867,66872,66876,66880],{},[951,66868,66869],{"align":997},[1669,66870,66871],{},"onlyVisible",[951,66873,66874],{"align":997},[618,66875,66857],{},[951,66877,66878],{"align":997},[618,66879,961],{},[951,66881,66882],{"align":997},"Export only visible objects",[933,66884,66885,66890,66894,66898],{},[951,66886,66887],{"align":997},[1669,66888,66889],{},"binary",[951,66891,66892],{"align":997},[618,66893,66857],{},[951,66895,66896],{"align":997},[618,66897,971],{},[951,66899,66900],{"align":997},"Export in binary (.glb) format, returning an ArrayBuffer",[933,66902,66903,66908,66912,66916],{},[951,66904,66905],{"align":997},[1669,66906,66907],{},"maxTextureSize",[951,66909,66910],{"align":997},[618,66911,5352],{},[951,66913,66914],{"align":997},[618,66915,13514],{},[951,66917,66918],{"align":997},"Restricts the image maximum size (both width and height) to the given value",[933,66920,66921,66926,66931,66935],{},[951,66922,66923],{"align":997},[1669,66924,66925],{},"animations",[951,66927,66928],{"align":997},[618,66929,66930],{},"Array\u003CAnimationClip>",[951,66932,66933],{"align":997},[618,66934,1179],{},[951,66936,66937],{"align":997},"List of animations to be included in the export",[933,66939,66940,66945,66949,66953],{},[951,66941,66942],{"align":997},[1669,66943,66944],{},"includeCustomExtensions",[951,66946,66947],{"align":997},[618,66948,66857],{},[951,66950,66951],{"align":997},[618,66952,971],{},[951,66954,66955],{"align":997},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[933,66957,66958,66963,66967,66972],{},[951,66959,66960],{"align":997},[1669,66961,66962],{},"fileName",[951,66964,66965],{"align":997},[618,66966,3572],{},[951,66968,66969],{"align":997},[618,66970,66971],{},"Object name",[951,66973,66974],{"align":997},"Name of the generated file",[1327,66976,66977],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .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":576,"searchDepth":577,"depth":578,"links":66979},[66980,66981],{"id":37103,"depth":578,"text":37104},{"id":66777,"depth":578,"text":66778,"children":66982},[66983],{"id":17537,"depth":708,"text":14023},"Export 3D objects to GLTF format.",{},{"title":491,"description":66984},"ls7xbos-wdqomwboeVd0l1d29JncmAz9XxdqK17moKs",{"id":66989,"title":495,"body":66990,"description":67278,"extension":591,"links":592,"meta":67279,"navigation":594,"path":496,"seo":67280,"stem":497,"__hash__":67281},"docs/2.api/miscellaneous/use-intersect.md",{"type":501,"value":66991,"toc":67273},[66992,67009,67011,67027,67170,67172,67200,67204,67271],[614,66993,66994,66996,66997,56336,67000,67002,67003,67008],{},[618,66995,495],{}," is a function that returns ",[618,66998,66999],{},"intersect",[618,67001,17471],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1140,67004,67007],{"href":67005,"rel":67006},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1144],"THREE.Object3D.onBeforeRender"," so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.",[504,67010,15],{"id":624},[3199,67012,67013],{},[614,67014,67015,67017,67018,67020,67021,67023,67024,1146],{},[618,67016,495],{}," requires a ",[618,67019,761],{}," context, so it is only available in ",[618,67022,761],{}," descendant components' ",[618,67025,67026],{},"\u003Cscript setup>",[626,67028,67031],{"className":628,"code":67029,"highlights":67030,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Torus, useIntersect } from '@tresjs/cientos'\n\nconst { ref, intersect, off } = useIntersect()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTorus ref=\"ref\">\n    \u003CTresMeshNormalMaterial />\n  \u003C/Torus>\n\u003C/template>\n",[578,729],[618,67032,67033,67053,67078,67082,67108,67116,67120,67128,67146,67154,67162],{"__ignoreMap":576},[637,67034,67035,67037,67039,67041,67043,67045,67047,67049,67051],{"class":639,"line":577},[637,67036,643],{"class":642},[637,67038,647],{"class":646},[637,67040,651],{"class":650},[637,67042,654],{"class":650},[637,67044,657],{"class":642},[637,67046,660],{"class":642},[637,67048,664],{"class":663},[637,67050,660],{"class":642},[637,67052,669],{"class":642},[637,67054,67056,67058,67060,67063,67065,67068,67070,67072,67074,67076],{"class":67055,"line":578},[639,673],[637,67057,677],{"class":676},[637,67059,680],{"class":642},[637,67061,67062],{"class":683}," Torus",[637,67064,687],{"class":642},[637,67066,67067],{"class":683}," useIntersect",[637,67069,693],{"class":642},[637,67071,696],{"class":676},[637,67073,699],{"class":642},[637,67075,702],{"class":663},[637,67077,705],{"class":642},[637,67079,67080],{"class":639,"line":708},[637,67081,742],{"emptyLinePlaceholder":594},[637,67083,67085,67087,67089,67091,67093,67096,67098,67100,67102,67104,67106],{"class":67084,"line":729},[639,673],[637,67086,2415],{"class":650},[637,67088,680],{"class":642},[637,67090,3872],{"class":683},[637,67092,687],{"class":642},[637,67094,67095],{"class":683}," intersect",[637,67097,687],{"class":642},[637,67099,6821],{"class":683},[637,67101,2428],{"class":642},[637,67103,2431],{"class":642},[637,67105,67067],{"class":2434},[637,67107,6535],{"class":683},[637,67109,67110,67112,67114],{"class":639,"line":739},[637,67111,732],{"class":642},[637,67113,647],{"class":646},[637,67115,669],{"class":642},[637,67117,67118],{"class":639,"line":745},[637,67119,742],{"emptyLinePlaceholder":594},[637,67121,67122,67124,67126],{"class":639,"line":755},[637,67123,643],{"class":642},[637,67125,750],{"class":646},[637,67127,669],{"class":642},[637,67129,67130,67132,67134,67136,67138,67140,67142,67144],{"class":639,"line":778},[637,67131,758],{"class":642},[637,67133,297],{"class":646},[637,67135,3872],{"class":650},[637,67137,657],{"class":642},[637,67139,660],{"class":642},[637,67141,5894],{"class":663},[637,67143,660],{"class":642},[637,67145,669],{"class":642},[637,67147,67148,67150,67152],{"class":639,"line":790},[637,67149,781],{"class":642},[637,67151,877],{"class":646},[637,67153,787],{"class":642},[637,67155,67156,67158,67160],{"class":639,"line":800},[637,67157,905],{"class":642},[637,67159,297],{"class":646},[637,67161,669],{"class":642},[637,67163,67164,67166,67168],{"class":639,"line":805},[637,67165,732],{"class":642},[637,67167,750],{"class":646},[637,67169,669],{"class":642},[504,67171,66778],{"id":66777},[927,67173,67174,67184],{},[930,67175,67176],{},[933,67177,67178,67180,67182],{},[936,67179,8089],{"align":997},[936,67181,941],{},[936,67183,5969],{},[946,67185,67186],{},[933,67187,67188,67192,67195],{},[951,67189,67190],{"align":997},[1669,67191,14303],{},[951,67193,67194],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[951,67196,67197],{},[618,67198,67199],{},"(isIntersected: boolean) => void",[504,67201,67203],{"id":67202},"return","Return",[927,67205,67206,67216],{},[930,67207,67208],{},[933,67209,67210,67212,67214],{},[936,67211,8089],{"align":997},[936,67213,941],{},[936,67215,5969],{},[946,67217,67218,67236,67251],{},[933,67219,67220,67224,67231],{},[951,67221,67222],{"align":997},[1669,67223,5894],{},[951,67225,67226,67227,67230],{},"Vue ",[618,67228,67229],{},"ShallowRef"," to pass to the object to be observed.",[951,67232,67233],{},[618,67234,67235],{},"ShallowRef\u003CObject3D>",[933,67237,67238,67243,67246],{},[951,67239,67240],{"align":997},[1669,67241,67242],{},"intersects",[951,67244,67245],{},"Updates when the observed object's intersect status changes.",[951,67247,67248],{},[618,67249,67250],{},"ShallowRef\u003Cboolean>",[933,67252,67253,67258,67267],{},[951,67254,67255],{"align":997},[1669,67256,67257],{},"off",[951,67259,67260,67261,67263,67264,67266],{},"Calling this function stops ",[618,67262,495],{}," until ",[618,67265,5894],{}," changes.",[951,67268,67269],{},[618,67270,6021],{},[1327,67272,26370],{},{"title":576,"searchDepth":577,"depth":578,"links":67274},[67275,67276,67277],{"id":624,"depth":578,"text":15},{"id":66777,"depth":578,"text":66778},{"id":67202,"depth":578,"text":67203},"Detect when objects enter or leave the screen.",{},{"title":495,"description":67278},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1787004676114]