[{"data":1,"prerenderedAt":65376},["ShallowReactive",2],{"navigation":3,"/api":490,"/api-surround":589,"abstraction-list":594,"controls-list":11228,"loaders-list":14974,"materials-list":24045,"shapes-list":28375,"debug-list":34420,"light-list":37078,"staging-list":41573,"objects-list":48842,"misc-list":61579},[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,88,118,160,202,300,326,360,410,456],{"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],{"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},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":69,"path":70,"stem":71},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":73,"path":74,"stem":75},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":77,"path":78,"stem":79},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":81,"path":82,"stem":83},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":85,"path":86,"stem":87},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":89,"path":90,"stem":91,"children":92},"Controls","/api/controls","2.api/2.controls/index",[93,94,98,102,106,110,114],{"title":89,"path":90,"stem":91},{"title":95,"path":96,"stem":97},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":99,"path":100,"stem":101},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":103,"path":104,"stem":105},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":107,"path":108,"stem":109},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":111,"path":112,"stem":113},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":115,"path":116,"stem":117},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":119,"path":120,"stem":121,"children":122},"Loaders","/api/loaders","2.api/3.loaders/index",[123,124,128,132,136,140,144,148,152,156],{"title":119,"path":120,"stem":121},{"title":125,"path":126,"stem":127},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":129,"path":130,"stem":131},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":133,"path":134,"stem":135},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":137,"path":138,"stem":139},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":141,"path":142,"stem":143},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":145,"path":146,"stem":147},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":149,"path":150,"stem":151},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":153,"path":154,"stem":155},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":157,"path":158,"stem":159},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":161,"path":162,"stem":163,"children":164},"Materials","/api/materials","2.api/4.materials/index",[165,166,170,174,178,182,186,190,194,198],{"title":161,"path":162,"stem":163},{"title":167,"path":168,"stem":169},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":171,"path":172,"stem":173},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":175,"path":176,"stem":177},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":179,"path":180,"stem":181},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":183,"path":184,"stem":185},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":187,"path":188,"stem":189},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":191,"path":192,"stem":193},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":195,"path":196,"stem":197},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":199,"path":200,"stem":201},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":203,"path":204,"stem":205,"children":206},"Shapes","/api/shapes","2.api/5.shapes/index",[207,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296],{"title":203,"path":204,"stem":205},{"title":209,"path":210,"stem":211},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":213,"path":214,"stem":215},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":217,"path":218,"stem":219},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":221,"path":222,"stem":223},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":225,"path":226,"stem":227},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":229,"path":230,"stem":231},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":233,"path":234,"stem":235},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":237,"path":238,"stem":239},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":241,"path":242,"stem":243},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":245,"path":246,"stem":247},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":249,"path":250,"stem":251},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":253,"path":254,"stem":255},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":257,"path":258,"stem":259},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":261,"path":262,"stem":263},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":265,"path":266,"stem":267},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":269,"path":270,"stem":271},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":273,"path":274,"stem":275},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":277,"path":278,"stem":279},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":281,"path":282,"stem":283},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":285,"path":286,"stem":287},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":289,"path":290,"stem":291},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":293,"path":294,"stem":295},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":297,"path":298,"stem":299},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":301,"path":302,"stem":303,"children":304},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[305,306,310,314,318,322],{"title":301,"path":302,"stem":303},{"title":307,"path":308,"stem":309},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":311,"path":312,"stem":313},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":315,"path":316,"stem":317},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":319,"path":320,"stem":321},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":323,"path":324,"stem":325},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":327,"path":328,"stem":329,"children":330},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[331,332,336,340,344,348,352,356],{"title":327,"path":328,"stem":329},{"title":333,"path":334,"stem":335},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":337,"path":338,"stem":339},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":341,"path":342,"stem":343},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":345,"path":346,"stem":347},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":349,"path":350,"stem":351},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":353,"path":354,"stem":355},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":357,"path":358,"stem":359},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":361,"path":362,"stem":363,"children":364},"Staging","/api/staging","2.api/8.staging/index",[365,366,370,374,378,382,386,390,394,398,402,406],{"title":361,"path":362,"stem":363},{"title":367,"path":368,"stem":369},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":371,"path":372,"stem":373},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":375,"path":376,"stem":377},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":379,"path":380,"stem":381},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":383,"path":384,"stem":385},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":387,"path":388,"stem":389},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":391,"path":392,"stem":393},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":395,"path":396,"stem":397},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":399,"path":400,"stem":401},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":403,"path":404,"stem":405},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":407,"path":408,"stem":409},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":411,"path":412,"stem":413,"children":414},"Objects","/api/objects","2.api/9.objects/index",[415,416,420,424,428,432,436,440,444,448,452],{"title":411,"path":412,"stem":413},{"title":417,"path":418,"stem":419},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":421,"path":422,"stem":423},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":425,"path":426,"stem":427},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":429,"path":430,"stem":431},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":433,"path":434,"stem":435},"HTML","/api/objects/html","2.api/9.objects/html",{"title":437,"path":438,"stem":439},"Image","/api/objects/image","2.api/9.objects/image",{"title":441,"path":442,"stem":443},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":445,"path":446,"stem":447},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":449,"path":450,"stem":451},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":453,"path":454,"stem":455},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":457,"path":458,"stem":459,"children":460},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[461,462,466,470,474,478,482,486],{"title":457,"path":458,"stem":459},{"title":463,"path":464,"stem":465},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":467,"path":468,"stem":469},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":471,"path":472,"stem":473},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":475,"path":476,"stem":477},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":479,"path":480,"stem":481},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":483,"path":484,"stem":485},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":487,"path":488,"stem":489},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":491,"title":32,"body":492,"description":582,"extension":583,"links":584,"meta":585,"navigation":586,"path":28,"seo":587,"stem":33,"__hash__":588},"docs/2.api/index.md",{"type":493,"value":494,"toc":567},"minimark",[495,500,504,508,511,515,518,522,525,529,532,536,539,543,546,550,553,557,560,564],[496,497,499],"h2",{"id":498},"abstraction","📦 Abstraction",[501,502],"api-list",{"list-name":503,"path":36},"abstraction-list",[496,505,507],{"id":506},"controls","🎮 Controls",[501,509],{"list-name":510,"path":90},"controls-list",[496,512,514],{"id":513},"loaders","📂 Loaders",[501,516],{"list-name":517,"path":120},"loaders-list",[496,519,521],{"id":520},"materials","🎨 Materials",[501,523],{"list-name":524,"path":162},"materials-list",[496,526,528],{"id":527},"shapes","🔷 Shapes",[501,530],{"list-name":531,"path":204},"shapes-list",[496,533,535],{"id":534},"debug-performance","📊 Debug & Performance",[501,537],{"list-name":538,"path":302},"debug-list",[496,540,542],{"id":541},"light-shadow","💡 Light & Shadow",[501,544],{"list-name":545,"path":328},"light-list",[496,547,549],{"id":548},"staging","🎭 Staging",[501,551],{"list-name":552,"path":362},"staging-list",[496,554,556],{"id":555},"objects","🎬 Objects",[501,558],{"list-name":559,"path":412},"objects-list",[496,561,563],{"id":562},"️-miscellaneous","🛠️ Miscellaneous",[501,565],{"list-name":566,"path":458},"misc-list",{"title":568,"searchDepth":569,"depth":570,"links":571},"",1,2,[572,573,574,575,576,577,578,579,580,581],{"id":498,"depth":570,"text":499},{"id":506,"depth":570,"text":507},{"id":513,"depth":570,"text":514},{"id":520,"depth":570,"text":521},{"id":527,"depth":570,"text":528},{"id":534,"depth":570,"text":535},{"id":541,"depth":570,"text":542},{"id":548,"depth":570,"text":549},{"id":555,"depth":570,"text":556},{"id":562,"depth":570,"text":563},"Explore the complete API reference","md",null,{},true,{"title":32,"description":582},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[590,592],{"title":23,"path":24,"stem":25,"description":591,"children":-1},"Migration guide for cientos",{"title":35,"path":36,"stem":37,"description":593,"children":-1},"UI components reference",[595,1331,1645,2194,7296,7590,8215,8609,9259,9736,10539,10852],{"id":596,"title":41,"body":597,"description":1327,"extension":583,"links":584,"meta":1328,"navigation":586,"path":42,"seo":1329,"stem":43,"__hash__":1330},"docs/2.api/1.abstractions/align.md",{"type":493,"value":598,"toc":1322},[599,605,614,617,911,915,918,1172,1176,1318],[600,601,602],"scene-controls-wrapper",{},[603,604],"abstractions-align",{},[606,607,608,609,613],"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 ",[610,611,612],"code",{},"cacheKey"," is set.",[496,615,15],{"id":616},"usage",[618,619,626],"pre",{"className":620,"code":621,"highlights":622,"language":625,"meta":568,"style":568},"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",[570,623,624],13,18,"vue",[610,627,628,662,698,719,729,735,745,768,780,790,795,817,822,840,851,862,872,882,892,902],{"__ignoreMap":568},[629,630,632,636,640,644,647,650,653,657,659],"span",{"class":631,"line":569},"line",[629,633,635],{"class":634},"sMK4o","\u003C",[629,637,639],{"class":638},"swJcz","script",[629,641,643],{"class":642},"spNyl"," setup",[629,645,646],{"class":642}," lang",[629,648,649],{"class":634},"=",[629,651,652],{"class":634},"\"",[629,654,656],{"class":655},"sfazB","ts",[629,658,652],{"class":634},[629,660,661],{"class":634},">\n",[629,663,666,670,673,677,680,683,686,689,692,695],{"class":664,"line":570},[631,665],"highlight",[629,667,669],{"class":668},"s7zQu","import",[629,671,672],{"class":634}," {",[629,674,676],{"class":675},"sTEyZ"," Align",[629,678,679],{"class":634},",",[629,681,682],{"class":675}," OrbitControls",[629,684,685],{"class":634}," }",[629,687,688],{"class":668}," from",[629,690,691],{"class":634}," '",[629,693,694],{"class":655},"@tresjs/cientos",[629,696,697],{"class":634},"'\n",[629,699,701,703,705,708,710,712,714,717],{"class":631,"line":700},3,[629,702,669],{"class":668},[629,704,672],{"class":634},[629,706,707],{"class":675}," TresCanvas",[629,709,685],{"class":634},[629,711,688],{"class":668},[629,713,691],{"class":634},[629,715,716],{"class":655},"@tresjs/core",[629,718,697],{"class":634},[629,720,722,725,727],{"class":631,"line":721},4,[629,723,724],{"class":634},"\u003C/",[629,726,639],{"class":638},[629,728,661],{"class":634},[629,730,732],{"class":631,"line":731},5,[629,733,734],{"emptyLinePlaceholder":586},"\n",[629,736,738,740,743],{"class":631,"line":737},6,[629,739,635],{"class":634},[629,741,742],{"class":638},"template",[629,744,661],{"class":634},[629,746,748,751,754,757,759,761,764,766],{"class":631,"line":747},7,[629,749,750],{"class":634}," \u003C",[629,752,753],{"class":638},"TresCanvas",[629,755,756],{"class":642}," clear-color",[629,758,649],{"class":634},[629,760,652],{"class":634},[629,762,763],{"class":655},"#222",[629,765,652],{"class":634},[629,767,661],{"class":634},[629,769,771,774,777],{"class":631,"line":770},8,[629,772,773],{"class":634}," \u003C",[629,775,776],{"class":638},"TresPerspectiveCamera",[629,778,779],{"class":634}," />\n",[629,781,783,785,788],{"class":631,"line":782},9,[629,784,773],{"class":634},[629,786,787],{"class":638},"OrbitControls",[629,789,779],{"class":634},[629,791,793],{"class":631,"line":792},10,[629,794,734],{"emptyLinePlaceholder":586},[629,796,798,800,803,806,808,810,813,815],{"class":631,"line":797},11,[629,799,773],{"class":634},[629,801,802],{"class":638},"TresAxesHelper",[629,804,805],{"class":642}," :scale",[629,807,649],{"class":634},[629,809,652],{"class":634},[629,811,812],{"class":655},"2",[629,814,652],{"class":634},[629,816,779],{"class":634},[629,818,820],{"class":631,"line":819},12,[629,821,734],{"emptyLinePlaceholder":586},[629,823,825,827,829,832,835,838],{"class":824,"line":623},[631,665],[629,826,773],{"class":634},[629,828,41],{"class":638},[629,830,831],{"class":642}," top",[629,833,834],{"class":642}," right",[629,836,837],{"class":642}," back",[629,839,661],{"class":634},[629,841,843,846,849],{"class":631,"line":842},14,[629,844,845],{"class":634}," \u003C",[629,847,848],{"class":638},"TresMesh",[629,850,661],{"class":634},[629,852,854,857,860],{"class":631,"line":853},15,[629,855,856],{"class":634}," \u003C",[629,858,859],{"class":638},"TresBoxGeometry",[629,861,779],{"class":634},[629,863,865,867,870],{"class":631,"line":864},16,[629,866,856],{"class":634},[629,868,869],{"class":638},"TresMeshNormalMaterial",[629,871,779],{"class":634},[629,873,875,878,880],{"class":631,"line":874},17,[629,876,877],{"class":634}," \u003C/",[629,879,848],{"class":638},[629,881,661],{"class":634},[629,883,885,888,890],{"class":884,"line":624},[631,665],[629,886,887],{"class":634}," \u003C/",[629,889,41],{"class":638},[629,891,661],{"class":634},[629,893,895,898,900],{"class":631,"line":894},19,[629,896,897],{"class":634}," \u003C/",[629,899,753],{"class":638},[629,901,661],{"class":634},[629,903,905,907,909],{"class":631,"line":904},20,[629,906,724],{"class":634},[629,908,742],{"class":638},[629,910,661],{"class":634},[496,912,914],{"id":913},"props","Props",[606,916,917],{},"All props are optional.",[919,920,921,937],"table",{},[922,923,924],"thead",{},[925,926,927,931,934],"tr",{},[928,929,930],"th",{},"Prop",[928,932,933],{},"Description",[928,935,936],{},"Default",[938,939,940,964,983,1002,1020,1039,1057,1073,1089,1105,1121,1143,1155],"tbody",{},[925,941,942,948,959],{},[943,944,945],"td",{},[610,946,947],{},"top",[943,949,950,951,954,955,958],{},"If ",[610,952,953],{},"true",", aligns bounding box bottom to ",[610,956,957],{},"0"," on the y-axis",[943,960,961],{},[610,962,963],{},"false",[925,965,966,971,979],{},[943,967,968],{},[610,969,970],{},"bottom",[943,972,950,973,975,976,978],{},[610,974,953],{},", aligns bounding box top to ",[610,977,957],{}," on the y-axis.",[943,980,981],{},[610,982,963],{},[925,984,985,990,998],{},[943,986,987],{},[610,988,989],{},"left",[943,991,950,992,994,995,997],{},[610,993,953],{},", aligns bounding box right to ",[610,996,957],{}," on the x-axis.",[943,999,1000],{},[610,1001,963],{},[925,1003,1004,1009,1016],{},[943,1005,1006],{},[610,1007,1008],{},"right",[943,1010,950,1011,1013,1014,997],{},[610,1012,953],{},", aligns bounding box left to ",[610,1015,957],{},[943,1017,1018],{},[610,1019,963],{},[925,1021,1022,1027,1035],{},[943,1023,1024],{},[610,1025,1026],{},"front",[943,1028,950,1029,1031,1032,1034],{},[610,1030,953],{},", aligns bounding box back to ",[610,1033,957],{}," on the z-axis.",[943,1036,1037],{},[610,1038,963],{},[925,1040,1041,1046,1053],{},[943,1042,1043],{},[610,1044,1045],{},"back",[943,1047,950,1048,1050,1051,1034],{},[610,1049,953],{},", aligns bounding box front to ",[610,1052,957],{},[943,1054,1055],{},[610,1056,963],{},[925,1058,1059,1064,1069],{},[943,1060,1061],{},[610,1062,1063],{},"disable",[943,1065,950,1066,1068],{},[610,1067,953],{},", disables alignment on all axes.",[943,1070,1071],{},[610,1072,963],{},[925,1074,1075,1080,1085],{},[943,1076,1077],{},[610,1078,1079],{},"disableX",[943,1081,950,1082,1084],{},[610,1083,953],{},", disables alignment on the x-axis.",[943,1086,1087],{},[610,1088,963],{},[925,1090,1091,1096,1101],{},[943,1092,1093],{},[610,1094,1095],{},"disableY",[943,1097,950,1098,1100],{},[610,1099,953],{},", disables alignment on the y-axis.",[943,1102,1103],{},[610,1104,963],{},[925,1106,1107,1112,1117],{},[943,1108,1109],{},[610,1110,1111],{},"disableZ",[943,1113,950,1114,1116],{},[610,1115,953],{},", disables alignment on the z-axis.",[943,1118,1119],{},[610,1120,963],{},[925,1122,1123,1128,1139],{},[943,1124,1125],{},[610,1126,1127],{},"precise",[943,1129,1130,1131,1138],{},"See ",[1132,1133,1137],"a",{"href":1134,"rel":1135},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1136],"nofollow","Box3.setFromObject",".",[943,1140,1141],{},[610,1142,953],{},[925,1144,1145,1150,1153],{},[943,1146,1147],{},[610,1148,1149],{},"onAlign",[943,1151,1152],{},"Callback that fires when updating, after measurement.",[943,1154],{},[925,1156,1157,1161,1167],{},[943,1158,1159],{},[610,1160,612],{},[943,1162,1163,1164,1166],{},"If set, component will only update when ",[610,1165,612],{},"'s value changes. If unset, component will update every frame.",[943,1168,1169],{},[610,1170,1171],{},"undefined",[496,1173,1175],{"id":1174},"aligncallbackoptions","AlignCallbackOptions",[618,1177,1180],{"className":1178,"code":1179,"language":656,"meta":568,"style":568},"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",[610,1181,1182,1197,1203,1214,1219,1228,1238,1247,1256,1266,1276,1286,1295,1304,1313],{"__ignoreMap":568},[629,1183,1184,1187,1190,1194],{"class":631,"line":569},[629,1185,1186],{"class":668},"export",[629,1188,1189],{"class":642}," interface",[629,1191,1193],{"class":1192},"sBMFI"," AlignCallbackOptions",[629,1195,1196],{"class":634}," {\n",[629,1198,1199],{"class":631,"line":570},[629,1200,1202],{"class":1201},"sHwdD"," /** The next parent above \u003CAlign /> */\n",[629,1204,1205,1208,1211],{"class":631,"line":700},[629,1206,1207],{"class":638}," parent",[629,1209,1210],{"class":634},":",[629,1212,1213],{"class":1192}," Object3D\n",[629,1215,1216],{"class":631,"line":721},[629,1217,1218],{"class":1201}," /** The outmost container group of the \u003CAlign/> component */\n",[629,1220,1221,1224,1226],{"class":631,"line":731},[629,1222,1223],{"class":638}," container",[629,1225,1210],{"class":634},[629,1227,1213],{"class":1192},[629,1229,1230,1233,1235],{"class":631,"line":737},[629,1231,1232],{"class":638}," width",[629,1234,1210],{"class":634},[629,1236,1237],{"class":1192}," number\n",[629,1239,1240,1243,1245],{"class":631,"line":747},[629,1241,1242],{"class":638}," height",[629,1244,1210],{"class":634},[629,1246,1237],{"class":1192},[629,1248,1249,1252,1254],{"class":631,"line":770},[629,1250,1251],{"class":638}," depth",[629,1253,1210],{"class":634},[629,1255,1237],{"class":1192},[629,1257,1258,1261,1263],{"class":631,"line":782},[629,1259,1260],{"class":638}," boundingBox",[629,1262,1210],{"class":634},[629,1264,1265],{"class":1192}," Box3\n",[629,1267,1268,1271,1273],{"class":631,"line":792},[629,1269,1270],{"class":638}," boundingSphere",[629,1272,1210],{"class":634},[629,1274,1275],{"class":1192}," Sphere\n",[629,1277,1278,1281,1283],{"class":631,"line":797},[629,1279,1280],{"class":638}," center",[629,1282,1210],{"class":634},[629,1284,1285],{"class":1192}," Vector3\n",[629,1287,1288,1291,1293],{"class":631,"line":819},[629,1289,1290],{"class":638}," verticalAlignment",[629,1292,1210],{"class":634},[629,1294,1237],{"class":1192},[629,1296,1297,1300,1302],{"class":631,"line":623},[629,1298,1299],{"class":638}," horizontalAlignment",[629,1301,1210],{"class":634},[629,1303,1237],{"class":1192},[629,1305,1306,1309,1311],{"class":631,"line":842},[629,1307,1308],{"class":638}," depthAlignment",[629,1310,1210],{"class":634},[629,1312,1237],{"class":1192},[629,1314,1315],{"class":631,"line":853},[629,1316,1317],{"class":634},"}\n",[1319,1320,1321],"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":568,"searchDepth":569,"depth":570,"links":1323},[1324,1325,1326],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":1174,"depth":570,"text":1175},"Calculate and align children within their parent using bounding boxes.",{},{"title":41,"description":1327},"2TNilwT1BiWwam7y0leE_VBx46wcrMjjhvIXPvGWsNg",{"id":1332,"title":45,"body":1333,"description":1641,"extension":583,"links":584,"meta":1642,"navigation":586,"path":46,"seo":1643,"stem":47,"__hash__":1644},"docs/2.api/1.abstractions/billboard.md",{"type":493,"value":1334,"toc":1637},[1335,1340,1347,1349,1558,1560,1634],[600,1336,1337],{},[1338,1339],"abstractions-billboard",{},[606,1341,1342,1343,1346],{},"Adds a ",[610,1344,1345],{},"THREE.Group"," that always faces the camera.",[496,1348,15],{"id":616},[618,1350,1353],{"className":620,"code":1351,"highlights":1352,"language":625,"meta":568,"style":568},"\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",[570,792,842],[610,1354,1355,1375,1404,1422,1430,1434,1442,1461,1469,1489,1498,1517,1525,1533,1542,1550],{"__ignoreMap":568},[629,1356,1357,1359,1361,1363,1365,1367,1369,1371,1373],{"class":631,"line":569},[629,1358,635],{"class":634},[629,1360,639],{"class":638},[629,1362,643],{"class":642},[629,1364,646],{"class":642},[629,1366,649],{"class":634},[629,1368,652],{"class":634},[629,1370,656],{"class":655},[629,1372,652],{"class":634},[629,1374,661],{"class":634},[629,1376,1378,1380,1382,1385,1387,1390,1392,1394,1396,1398,1400,1402],{"class":1377,"line":570},[631,665],[629,1379,669],{"class":668},[629,1381,672],{"class":634},[629,1383,1384],{"class":675}," Billboard",[629,1386,679],{"class":634},[629,1388,1389],{"class":675}," Box",[629,1391,679],{"class":634},[629,1393,682],{"class":675},[629,1395,685],{"class":634},[629,1397,688],{"class":668},[629,1399,691],{"class":634},[629,1401,694],{"class":655},[629,1403,697],{"class":634},[629,1405,1406,1408,1410,1412,1414,1416,1418,1420],{"class":631,"line":700},[629,1407,669],{"class":668},[629,1409,672],{"class":634},[629,1411,707],{"class":675},[629,1413,685],{"class":634},[629,1415,688],{"class":668},[629,1417,691],{"class":634},[629,1419,716],{"class":655},[629,1421,697],{"class":634},[629,1423,1424,1426,1428],{"class":631,"line":721},[629,1425,724],{"class":634},[629,1427,639],{"class":638},[629,1429,661],{"class":634},[629,1431,1432],{"class":631,"line":731},[629,1433,734],{"emptyLinePlaceholder":586},[629,1435,1436,1438,1440],{"class":631,"line":737},[629,1437,635],{"class":634},[629,1439,742],{"class":638},[629,1441,661],{"class":634},[629,1443,1444,1446,1448,1450,1452,1454,1457,1459],{"class":631,"line":747},[629,1445,750],{"class":634},[629,1447,753],{"class":638},[629,1449,756],{"class":642},[629,1451,649],{"class":634},[629,1453,652],{"class":634},[629,1455,1456],{"class":655},"#333333",[629,1458,652],{"class":634},[629,1460,661],{"class":634},[629,1462,1463,1465,1467],{"class":631,"line":770},[629,1464,773],{"class":634},[629,1466,787],{"class":638},[629,1468,779],{"class":634},[629,1470,1471,1473,1475,1478,1480,1482,1485,1487],{"class":631,"line":782},[629,1472,773],{"class":634},[629,1474,776],{"class":638},[629,1476,1477],{"class":642}," :position",[629,1479,649],{"class":634},[629,1481,652],{"class":634},[629,1483,1484],{"class":655},"[0, 0, 10]",[629,1486,652],{"class":634},[629,1488,779],{"class":634},[629,1490,1492,1494,1496],{"class":1491,"line":792},[631,665],[629,1493,773],{"class":634},[629,1495,45],{"class":638},[629,1497,661],{"class":634},[629,1499,1500,1502,1504,1506,1508,1510,1513,1515],{"class":631,"line":797},[629,1501,845],{"class":634},[629,1503,209],{"class":638},[629,1505,805],{"class":642},[629,1507,649],{"class":634},[629,1509,652],{"class":634},[629,1511,1512],{"class":655},"[0.5, 0.5, 0.001]",[629,1514,652],{"class":634},[629,1516,661],{"class":634},[629,1518,1519,1521,1523],{"class":631,"line":819},[629,1520,856],{"class":634},[629,1522,869],{"class":638},[629,1524,779],{"class":634},[629,1526,1527,1529,1531],{"class":631,"line":623},[629,1528,877],{"class":634},[629,1530,209],{"class":638},[629,1532,661],{"class":634},[629,1534,1536,1538,1540],{"class":1535,"line":842},[631,665],[629,1537,887],{"class":634},[629,1539,45],{"class":638},[629,1541,661],{"class":634},[629,1543,1544,1546,1548],{"class":631,"line":853},[629,1545,897],{"class":634},[629,1547,753],{"class":638},[629,1549,661],{"class":634},[629,1551,1552,1554,1556],{"class":631,"line":864},[629,1553,724],{"class":634},[629,1555,742],{"class":638},[629,1557,661],{"class":634},[496,1559,914],{"id":913},[919,1561,1562,1572],{},[922,1563,1564],{},[925,1565,1566,1568,1570],{},[928,1567,930],{"align":989},[928,1569,933],{"align":989},[928,1571,936],{},[938,1573,1574,1592,1606,1620],{},[925,1575,1576,1581,1588],{},[943,1577,1578],{"align":989},[610,1579,1580],{},"autoUpdate",[943,1582,1583,1584,1587],{"align":989},"Whether the ",[610,1585,1586],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[943,1589,1590],{},[610,1591,953],{},[925,1593,1594,1599,1602],{},[943,1595,1596],{"align":989},[610,1597,1598],{},"lockX",[943,1600,1601],{"align":989},"Whether to lock the x-axis.",[943,1603,1604],{},[610,1605,963],{},[925,1607,1608,1613,1616],{},[943,1609,1610],{"align":989},[610,1611,1612],{},"lockY",[943,1614,1615],{"align":989},"Whether to lock the y-axis.",[943,1617,1618],{},[610,1619,963],{},[925,1621,1622,1627,1630],{},[943,1623,1624],{"align":989},[610,1625,1626],{},"lockZ",[943,1628,1629],{"align":989},"Whether to lock the z-axis.",[943,1631,1632],{},[610,1633,963],{},[1319,1635,1636],{},"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":568,"searchDepth":569,"depth":570,"links":1638},[1639,1640],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Make objects always face the camera automatically.",{},{"title":45,"description":1641},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1646,"title":49,"body":1647,"description":2190,"extension":583,"links":584,"meta":2191,"navigation":586,"path":50,"seo":2192,"stem":51,"__hash__":2193},"docs/2.api/1.abstractions/camera-shake.md",{"type":493,"value":1648,"toc":2186},[1649,1654,1708,1710,1996,2035,2037,2184],[600,1650,1651],{},[1652,1653],"abstractions-camera-shake",{},[606,1655,1656,1659,1660,1664,1665,1669,1670,1673,1674,1664,1677,1680,1681,1684,1685,1664,1688,1664,1691,1694,1695,1698,1699,1138],{},[610,1657,1658],{},"\u003CCameraShake />"," is a component that adds ",[1661,1662,1663],"strong",{},"natural",", ",[1666,1667,1668],"em",{},"noise-driven motion"," to the ",[1661,1671,1672],{},"active camera",".\nIt offers ",[1661,1675,1676],{},"per-axis control",[1661,1678,1679],{},"adjustable intensity",", and ",[1666,1682,1683],{},"optional decay"," — perfect for ",[1666,1686,1687],{},"handheld feel",[1666,1689,1690],{},"footsteps",[1666,1692,1693],{},"impacts",", or ",[1666,1696,1697],{},"engine rumble"," — and is based on the ",[1132,1700,1703,1704,1707],{"href":1701,"rel":1702},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1136],"Drei ",[610,1705,1706],{},"CameraShake"," component",[496,1709,15],{"id":616},[618,1711,1714],{"className":620,"code":1712,"highlights":1713,"language":625,"meta":568,"style":568},"\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",[570,797,864],[610,1715,1716,1736,1760,1778,1786,1790,1798,1816,1835,1846,1850,1905,1923,1943,1963,1971,1980,1988],{"__ignoreMap":568},[629,1717,1718,1720,1722,1724,1726,1728,1730,1732,1734],{"class":631,"line":569},[629,1719,635],{"class":634},[629,1721,639],{"class":638},[629,1723,643],{"class":642},[629,1725,646],{"class":642},[629,1727,649],{"class":634},[629,1729,652],{"class":634},[629,1731,656],{"class":655},[629,1733,652],{"class":634},[629,1735,661],{"class":634},[629,1737,1739,1741,1743,1746,1748,1750,1752,1754,1756,1758],{"class":1738,"line":570},[631,665],[629,1740,669],{"class":668},[629,1742,672],{"class":634},[629,1744,1745],{"class":675}," CameraShake",[629,1747,679],{"class":634},[629,1749,682],{"class":675},[629,1751,685],{"class":634},[629,1753,688],{"class":668},[629,1755,691],{"class":634},[629,1757,694],{"class":655},[629,1759,697],{"class":634},[629,1761,1762,1764,1766,1768,1770,1772,1774,1776],{"class":631,"line":700},[629,1763,669],{"class":668},[629,1765,672],{"class":634},[629,1767,707],{"class":675},[629,1769,685],{"class":634},[629,1771,688],{"class":668},[629,1773,691],{"class":634},[629,1775,716],{"class":655},[629,1777,697],{"class":634},[629,1779,1780,1782,1784],{"class":631,"line":721},[629,1781,724],{"class":634},[629,1783,639],{"class":638},[629,1785,661],{"class":634},[629,1787,1788],{"class":631,"line":731},[629,1789,734],{"emptyLinePlaceholder":586},[629,1791,1792,1794,1796],{"class":631,"line":737},[629,1793,635],{"class":634},[629,1795,742],{"class":638},[629,1797,661],{"class":634},[629,1799,1800,1802,1804,1806,1808,1810,1812,1814],{"class":631,"line":747},[629,1801,750],{"class":634},[629,1803,753],{"class":638},[629,1805,756],{"class":642},[629,1807,649],{"class":634},[629,1809,652],{"class":634},[629,1811,763],{"class":655},[629,1813,652],{"class":634},[629,1815,661],{"class":634},[629,1817,1818,1820,1822,1824,1826,1828,1831,1833],{"class":631,"line":770},[629,1819,773],{"class":634},[629,1821,776],{"class":638},[629,1823,1477],{"class":642},[629,1825,649],{"class":634},[629,1827,652],{"class":634},[629,1829,1830],{"class":655},"[0, 2, 6]",[629,1832,652],{"class":634},[629,1834,779],{"class":634},[629,1836,1837,1839,1841,1844],{"class":631,"line":782},[629,1838,773],{"class":634},[629,1840,787],{"class":638},[629,1842,1843],{"class":642}," make-default",[629,1845,779],{"class":634},[629,1847,1848],{"class":631,"line":792},[629,1849,734],{"emptyLinePlaceholder":586},[629,1851,1853,1855,1857,1860,1862,1864,1867,1869,1872,1874,1876,1879,1881,1884,1886,1888,1890,1892,1895,1897,1899,1901,1903],{"class":1852,"line":797},[631,665],[629,1854,773],{"class":634},[629,1856,1706],{"class":638},[629,1858,1859],{"class":642}," :intensity",[629,1861,649],{"class":634},[629,1863,652],{"class":634},[629,1865,1866],{"class":655},"1",[629,1868,652],{"class":634},[629,1870,1871],{"class":642}," :max-yaw",[629,1873,649],{"class":634},[629,1875,652],{"class":634},[629,1877,1878],{"class":655},"0.01",[629,1880,652],{"class":634},[629,1882,1883],{"class":642}," :max-pitch",[629,1885,649],{"class":634},[629,1887,652],{"class":634},[629,1889,1878],{"class":655},[629,1891,652],{"class":634},[629,1893,1894],{"class":642}," :max-roll",[629,1896,649],{"class":634},[629,1898,652],{"class":634},[629,1900,1878],{"class":655},[629,1902,652],{"class":634},[629,1904,779],{"class":634},[629,1906,1907,1909,1911,1913,1915,1917,1919,1921],{"class":631,"line":819},[629,1908,845],{"class":634},[629,1910,802],{"class":638},[629,1912,805],{"class":642},[629,1914,649],{"class":634},[629,1916,652],{"class":634},[629,1918,812],{"class":655},[629,1920,652],{"class":634},[629,1922,779],{"class":634},[629,1924,1925,1927,1929,1932,1934,1936,1939,1941],{"class":631,"line":623},[629,1926,845],{"class":634},[629,1928,848],{"class":638},[629,1930,1931],{"class":642}," :position-y",[629,1933,649],{"class":634},[629,1935,652],{"class":634},[629,1937,1938],{"class":655},"0.5",[629,1940,652],{"class":634},[629,1942,661],{"class":634},[629,1944,1945,1947,1949,1952,1954,1956,1959,1961],{"class":631,"line":842},[629,1946,856],{"class":634},[629,1948,859],{"class":638},[629,1950,1951],{"class":642}," :args",[629,1953,649],{"class":634},[629,1955,652],{"class":634},[629,1957,1958],{"class":655},"[1, 1, 1]",[629,1960,652],{"class":634},[629,1962,779],{"class":634},[629,1964,1965,1967,1969],{"class":631,"line":853},[629,1966,856],{"class":634},[629,1968,869],{"class":638},[629,1970,779],{"class":634},[629,1972,1974,1976,1978],{"class":1973,"line":864},[631,665],[629,1975,877],{"class":634},[629,1977,848],{"class":638},[629,1979,661],{"class":634},[629,1981,1982,1984,1986],{"class":631,"line":874},[629,1983,897],{"class":634},[629,1985,753],{"class":638},[629,1987,661],{"class":634},[629,1989,1990,1992,1994],{"class":631,"line":624},[629,1991,724],{"class":634},[629,1993,742],{"class":638},[629,1995,661],{"class":634},[1997,1998,1999,2020],"prose-note",{},[606,2000,2001,2003,2004,2009,2010,2013,2014,2019],{},[610,2002,1658],{}," is fully compatible with ",[1661,2005,2006],{},[610,2007,2008],{},"\u003COrbitControls />",".\nTo ensure it works ",[1666,2011,2012],{},"as expected",", make sure to add the ",[1661,2015,2016],{},[610,2017,2018],{},"make-default"," prop:",[618,2021,2023],{"className":620,"code":2022,"language":625,"meta":568,"style":568},"\u003COrbitControls make-default />\n",[610,2024,2025],{"__ignoreMap":568},[629,2026,2027,2029,2031,2033],{"class":631,"line":569},[629,2028,635],{"class":634},[629,2030,787],{"class":638},[629,2032,1843],{"class":642},[629,2034,779],{"class":634},[496,2036,914],{"id":913},[919,2038,2039,2049],{},[922,2040,2041],{},[925,2042,2043,2045,2047],{},[928,2044,930],{},[928,2046,933],{},[928,2048,936],{},[938,2050,2051,2065,2081,2099,2113,2127,2141,2156,2170],{},[925,2052,2053,2058,2061],{},[943,2054,2055],{},[610,2056,2057],{},"intensity",[943,2059,2060],{},"The intensity of the shake (0–1).",[943,2062,2063],{},[610,2064,1866],{},[925,2066,2067,2072,2077],{},[943,2068,2069],{},[610,2070,2071],{},"decay",[943,2073,950,2074,2076],{},[610,2075,953],{},", intensity decays over time.",[943,2078,2079],{},[610,2080,963],{},[925,2082,2083,2088,2094],{},[943,2084,2085],{},[610,2086,2087],{},"decayRate",[943,2089,2090,2091,2093],{},"How fast intensity changes when ",[610,2092,2071],{}," is enabled.",[943,2095,2096],{},[610,2097,2098],{},"0.65",[925,2100,2101,2106,2109],{},[943,2102,2103],{},[610,2104,2105],{},"maxYaw",[943,2107,2108],{},"Maximum yaw angle in radians.",[943,2110,2111],{},[610,2112,1878],{},[925,2114,2115,2120,2123],{},[943,2116,2117],{},[610,2118,2119],{},"maxPitch",[943,2121,2122],{},"Maximum pitch angle in radians.",[943,2124,2125],{},[610,2126,1878],{},[925,2128,2129,2134,2137],{},[943,2130,2131],{},[610,2132,2133],{},"maxRoll",[943,2135,2136],{},"Maximum roll angle in radians.",[943,2138,2139],{},[610,2140,1878],{},[925,2142,2143,2148,2151],{},[943,2144,2145],{},[610,2146,2147],{},"yawFrequency",[943,2149,2150],{},"Frequency of yaw oscillation.",[943,2152,2153],{},[610,2154,2155],{},"0.1",[925,2157,2158,2163,2166],{},[943,2159,2160],{},[610,2161,2162],{},"pitchFrequency",[943,2164,2165],{},"Frequency of pitch oscillation.",[943,2167,2168],{},[610,2169,2155],{},[925,2171,2172,2177,2180],{},[943,2173,2174],{},[610,2175,2176],{},"rollFrequency",[943,2178,2179],{},"Frequency of roll oscillation.",[943,2181,2182],{},[610,2183,2155],{},[1319,2185,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":2187},[2188,2189],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2190},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2195,"title":53,"body":2196,"description":7292,"extension":583,"links":584,"meta":7293,"navigation":586,"path":54,"seo":7294,"stem":55,"__hash__":7295},"docs/2.api/1.abstractions/decal.md",{"type":493,"value":2197,"toc":7257},[2198,2204,2286,2292,2294,2309,2764,2780,2784,2795,2958,2975,2978,2992,3047,3072,3076,3089,3094,3160,3167,3173,3190,3278,3283,3297,3372,4042,4047,4087,4100,4163,4166,4176,4262,4269,4289,4299,4302,4499,4511,4519,4534,4852,4856,4880,5243,5258,5278,5282,5298,5535,5541,5737,5743,5878,5887,5894,5950,6051,6056,6202,6207,6248,6252,6308,6312,6383,6387,6465,6472,6487,6528,6577,7254],[606,2199,2200,2203],{},[610,2201,2202],{},"\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.",[2205,2206,2207,2219,2232,2246,2253,2264,2276],"ul",{},[2208,2209,2210,2211,2214,2215,2218],"li",{},"🎨 Drop-in ",[1661,2212,2213],{},"editor UI"," via ",[610,2216,2217],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2208,2220,2221,2222,2214,2225,2231],{},"🛠 ",[1661,2223,2224],{},"Programmatic API",[1132,2226,2228],{"href":2227},"#programmatic-api-usedecaleditor",[610,2229,2230],{},"useDecalEditor()"," for custom panels and automation.",[2208,2233,2234,2235,2238,2239,2242,2243,1138],{},"🖼️ ",[1661,2236,2237],{},"Texture palette"," — pass an array of ",[610,2240,2241],{},"Texture"," to ",[610,2244,2245],{},":map",[2208,2247,2248,2249,2252],{},"🧩 ",[1661,2250,2251],{},"Custom material"," — override the default via the slot.",[2208,2254,2255,2256,2259,2260,2263],{},"💾 ",[1661,2257,2258],{},"Lossless JSON"," — ",[610,2261,2262],{},"v-model:data"," round-trips to plain JSON.",[2208,2265,2266,2267,2270,2271,2275],{},"⚡ ",[1661,2268,2269],{},"BVH-accelerated"," — auto-detected via ",[1132,2272,2273],{"href":324},[610,2274,323],{},"; 10–100× faster on dense meshes.",[2208,2277,2278,2279,2259,2282,2285],{},"📚 ",[1661,2280,2281],{},"Per-mesh stacking",[610,2283,2284],{},"zIndex"," with automatic polygon-offset.",[2287,2288,2289],"scene-wrapper",{},[2290,2291],"abstractions-decal",{},[496,2293,15],{"id":616},[606,2295,2296,2297,2299,2300,2303,2304,2306,2307,1138],{},"The minimal setup is a ",[610,2298,2202],{}," placed as a child of any ",[610,2301,2302],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[610,2305,2262],{}," and one or\nmore textures via ",[610,2308,2245],{},[618,2310,2312],{"className":620,"code":2311,"language":625,"meta":568,"style":568},"\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",[610,2313,2314,2334,2362,2380,2399,2403,2441,2445,2459,2464,2481,2509,2532,2558,2569,2585,2590,2595,2603,2607,2615,2624,2644,2653,2662,2671,2693,2737,2746,2755],{"__ignoreMap":568},[629,2315,2316,2318,2320,2322,2324,2326,2328,2330,2332],{"class":631,"line":569},[629,2317,635],{"class":634},[629,2319,639],{"class":638},[629,2321,643],{"class":642},[629,2323,646],{"class":642},[629,2325,649],{"class":634},[629,2327,652],{"class":634},[629,2329,656],{"class":655},[629,2331,652],{"class":634},[629,2333,661],{"class":634},[629,2335,2336,2338,2340,2343,2345,2347,2349,2352,2354,2356,2358,2360],{"class":631,"line":570},[629,2337,669],{"class":668},[629,2339,672],{"class":634},[629,2341,2342],{"class":675}," Decal",[629,2344,679],{"class":634},[629,2346,682],{"class":675},[629,2348,679],{"class":634},[629,2350,2351],{"class":675}," useTexture",[629,2353,685],{"class":634},[629,2355,688],{"class":668},[629,2357,691],{"class":634},[629,2359,694],{"class":655},[629,2361,697],{"class":634},[629,2363,2364,2366,2368,2370,2372,2374,2376,2378],{"class":631,"line":700},[629,2365,669],{"class":668},[629,2367,672],{"class":634},[629,2369,707],{"class":675},[629,2371,685],{"class":634},[629,2373,688],{"class":668},[629,2375,691],{"class":634},[629,2377,716],{"class":655},[629,2379,697],{"class":634},[629,2381,2382,2384,2386,2389,2391,2393,2395,2397],{"class":631,"line":721},[629,2383,669],{"class":668},[629,2385,672],{"class":634},[629,2387,2388],{"class":675}," reactive",[629,2390,685],{"class":634},[629,2392,688],{"class":668},[629,2394,691],{"class":634},[629,2396,625],{"class":655},[629,2398,697],{"class":634},[629,2400,2401],{"class":631,"line":731},[629,2402,734],{"emptyLinePlaceholder":586},[629,2404,2405,2408,2410,2413,2415,2418,2421,2424,2427,2430,2433,2436,2438],{"class":631,"line":737},[629,2406,2407],{"class":642},"const",[629,2409,672],{"class":634},[629,2411,2412],{"class":638}," state",[629,2414,1210],{"class":634},[629,2416,2417],{"class":675}," texture ",[629,2419,2420],{"class":634},"}",[629,2422,2423],{"class":634}," =",[629,2425,2351],{"class":2426},"s2Zo4",[629,2428,2429],{"class":675},"(",[629,2431,2432],{"class":634},"'",[629,2434,2435],{"class":655},"/textures/logo.png",[629,2437,2432],{"class":634},[629,2439,2440],{"class":675},")\n",[629,2442,2443],{"class":631,"line":747},[629,2444,734],{"emptyLinePlaceholder":586},[629,2446,2447,2449,2452,2454,2456],{"class":631,"line":770},[629,2448,2407],{"class":642},[629,2450,2451],{"class":675}," decals ",[629,2453,649],{"class":634},[629,2455,2388],{"class":2426},[629,2457,2458],{"class":675},"([\n",[629,2460,2461],{"class":631,"line":782},[629,2462,2463],{"class":634}," {\n",[629,2465,2466,2469,2471,2473,2476,2478],{"class":631,"line":792},[629,2467,2468],{"class":638}," id",[629,2470,1210],{"class":634},[629,2472,691],{"class":634},[629,2474,2475],{"class":655},"logo-1",[629,2477,2432],{"class":634},[629,2479,2480],{"class":634},",\n",[629,2482,2483,2486,2488,2491,2494,2496,2499,2501,2504,2507],{"class":631,"line":797},[629,2484,2485],{"class":638}," position",[629,2487,1210],{"class":634},[629,2489,2490],{"class":675}," [",[629,2492,957],{"class":2493},"sbssI",[629,2495,679],{"class":634},[629,2497,2498],{"class":2493}," 0",[629,2500,679],{"class":634},[629,2502,2503],{"class":2493}," 0.5",[629,2505,2506],{"class":675},"]",[629,2508,2480],{"class":634},[629,2510,2511,2514,2516,2518,2520,2522,2524,2526,2528,2530],{"class":631,"line":819},[629,2512,2513],{"class":638}," orientation",[629,2515,1210],{"class":634},[629,2517,2490],{"class":675},[629,2519,957],{"class":2493},[629,2521,679],{"class":634},[629,2523,2498],{"class":2493},[629,2525,679],{"class":634},[629,2527,2498],{"class":2493},[629,2529,2506],{"class":675},[629,2531,2480],{"class":634},[629,2533,2534,2537,2539,2541,2544,2546,2549,2551,2554,2556],{"class":631,"line":623},[629,2535,2536],{"class":638}," size",[629,2538,1210],{"class":634},[629,2540,2490],{"class":675},[629,2542,2543],{"class":2493},"0.75",[629,2545,679],{"class":634},[629,2547,2548],{"class":2493}," 0.17",[629,2550,679],{"class":634},[629,2552,2553],{"class":2493}," 1",[629,2555,2506],{"class":675},[629,2557,2480],{"class":634},[629,2559,2560,2563,2565,2567],{"class":631,"line":842},[629,2561,2562],{"class":638}," zIndex",[629,2564,1210],{"class":634},[629,2566,2498],{"class":2493},[629,2568,2480],{"class":634},[629,2570,2571,2574,2576,2578,2581,2583],{"class":631,"line":853},[629,2572,2573],{"class":638}," map",[629,2575,1210],{"class":634},[629,2577,691],{"class":634},[629,2579,2580],{"class":655},"logo.png",[629,2582,2432],{"class":634},[629,2584,2480],{"class":634},[629,2586,2587],{"class":631,"line":864},[629,2588,2589],{"class":634}," },\n",[629,2591,2592],{"class":631,"line":874},[629,2593,2594],{"class":675},"])\n",[629,2596,2597,2599,2601],{"class":631,"line":624},[629,2598,724],{"class":634},[629,2600,639],{"class":638},[629,2602,661],{"class":634},[629,2604,2605],{"class":631,"line":894},[629,2606,734],{"emptyLinePlaceholder":586},[629,2608,2609,2611,2613],{"class":631,"line":904},[629,2610,635],{"class":634},[629,2612,742],{"class":638},[629,2614,661],{"class":634},[629,2616,2618,2620,2622],{"class":631,"line":2617},21,[629,2619,750],{"class":634},[629,2621,753],{"class":638},[629,2623,661],{"class":634},[629,2625,2627,2629,2631,2633,2635,2637,2640,2642],{"class":631,"line":2626},22,[629,2628,773],{"class":634},[629,2630,776],{"class":638},[629,2632,1477],{"class":642},[629,2634,649],{"class":634},[629,2636,652],{"class":634},[629,2638,2639],{"class":655},"[2, 2, 3]",[629,2641,652],{"class":634},[629,2643,779],{"class":634},[629,2645,2647,2649,2651],{"class":631,"line":2646},23,[629,2648,773],{"class":634},[629,2650,787],{"class":638},[629,2652,779],{"class":634},[629,2654,2656,2658,2660],{"class":631,"line":2655},24,[629,2657,773],{"class":634},[629,2659,848],{"class":638},[629,2661,661],{"class":634},[629,2663,2665,2667,2669],{"class":631,"line":2664},25,[629,2666,845],{"class":634},[629,2668,859],{"class":638},[629,2670,779],{"class":634},[629,2672,2674,2676,2679,2682,2684,2686,2689,2691],{"class":631,"line":2673},26,[629,2675,845],{"class":634},[629,2677,2678],{"class":638},"TresMeshStandardMaterial",[629,2680,2681],{"class":642}," color",[629,2683,649],{"class":634},[629,2685,652],{"class":634},[629,2687,2688],{"class":655},"white",[629,2690,652],{"class":634},[629,2692,779],{"class":634},[629,2694,2696,2698,2700,2703,2705,2707,2710,2712,2715,2717,2719,2722,2724,2727,2729,2731,2733,2735],{"class":631,"line":2695},27,[629,2697,845],{"class":634},[629,2699,53],{"class":638},[629,2701,2702],{"class":642}," v-if",[629,2704,649],{"class":634},[629,2706,652],{"class":634},[629,2708,2709],{"class":655},"texture",[629,2711,652],{"class":634},[629,2713,2714],{"class":642}," v-model:data",[629,2716,649],{"class":634},[629,2718,652],{"class":634},[629,2720,2721],{"class":655},"decals",[629,2723,652],{"class":634},[629,2725,2726],{"class":642}," :map",[629,2728,649],{"class":634},[629,2730,652],{"class":634},[629,2732,2709],{"class":655},[629,2734,652],{"class":634},[629,2736,779],{"class":634},[629,2738,2740,2742,2744],{"class":631,"line":2739},28,[629,2741,887],{"class":634},[629,2743,848],{"class":638},[629,2745,661],{"class":634},[629,2747,2749,2751,2753],{"class":631,"line":2748},29,[629,2750,897],{"class":634},[629,2752,753],{"class":638},[629,2754,661],{"class":634},[629,2756,2758,2760,2762],{"class":631,"line":2757},30,[629,2759,724],{"class":634},[629,2761,742],{"class":638},[629,2763,661],{"class":634},[1997,2765,2766],{},[606,2767,2768,2769,2771,2772,2775,2776,2779],{},"The ",[610,2770,2262],{}," array is the ",[1661,2773,2774],{},"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 ",[610,2777,2778],{},".json"," file.",[496,2781,2783],{"id":2782},"multiple-textures-palette","Multiple textures (palette)",[606,2785,2786,2787,2789,2790,2794],{},"Pass an array to ",[610,2788,2245],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1132,2791,2792],{"href":146},[610,2793,145],{},"\nplugs in directly:",[618,2796,2798],{"className":620,"code":2797,"language":625,"meta":568,"style":568},"\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",[610,2799,2800,2820,2843,2847,2864,2875,2886,2897,2901,2909,2913,2921,2950],{"__ignoreMap":568},[629,2801,2802,2804,2806,2808,2810,2812,2814,2816,2818],{"class":631,"line":569},[629,2803,635],{"class":634},[629,2805,639],{"class":638},[629,2807,643],{"class":642},[629,2809,646],{"class":642},[629,2811,649],{"class":634},[629,2813,652],{"class":634},[629,2815,656],{"class":655},[629,2817,652],{"class":634},[629,2819,661],{"class":634},[629,2821,2822,2824,2826,2828,2830,2833,2835,2837,2839,2841],{"class":631,"line":570},[629,2823,669],{"class":668},[629,2825,672],{"class":634},[629,2827,2342],{"class":675},[629,2829,679],{"class":634},[629,2831,2832],{"class":675}," useTextures",[629,2834,685],{"class":634},[629,2836,688],{"class":668},[629,2838,691],{"class":634},[629,2840,694],{"class":655},[629,2842,697],{"class":634},[629,2844,2845],{"class":631,"line":700},[629,2846,734],{"emptyLinePlaceholder":586},[629,2848,2849,2851,2853,2856,2858,2860,2862],{"class":631,"line":721},[629,2850,2407],{"class":642},[629,2852,672],{"class":634},[629,2854,2855],{"class":675}," textures ",[629,2857,2420],{"class":634},[629,2859,2423],{"class":634},[629,2861,2832],{"class":2426},[629,2863,2458],{"class":675},[629,2865,2866,2869,2871,2873],{"class":631,"line":731},[629,2867,2868],{"class":634}," '",[629,2870,2435],{"class":655},[629,2872,2432],{"class":634},[629,2874,2480],{"class":634},[629,2876,2877,2879,2882,2884],{"class":631,"line":737},[629,2878,2868],{"class":634},[629,2880,2881],{"class":655},"/textures/badge.png",[629,2883,2432],{"class":634},[629,2885,2480],{"class":634},[629,2887,2888,2890,2893,2895],{"class":631,"line":747},[629,2889,2868],{"class":634},[629,2891,2892],{"class":655},"/textures/sticker.png",[629,2894,2432],{"class":634},[629,2896,2480],{"class":634},[629,2898,2899],{"class":631,"line":770},[629,2900,2594],{"class":675},[629,2902,2903,2905,2907],{"class":631,"line":782},[629,2904,724],{"class":634},[629,2906,639],{"class":638},[629,2908,661],{"class":634},[629,2910,2911],{"class":631,"line":792},[629,2912,734],{"emptyLinePlaceholder":586},[629,2914,2915,2917,2919],{"class":631,"line":797},[629,2916,635],{"class":634},[629,2918,742],{"class":638},[629,2920,661],{"class":634},[629,2922,2923,2925,2927,2929,2931,2933,2935,2937,2939,2941,2943,2946,2948],{"class":631,"line":819},[629,2924,750],{"class":634},[629,2926,53],{"class":638},[629,2928,2714],{"class":642},[629,2930,649],{"class":634},[629,2932,652],{"class":634},[629,2934,2721],{"class":655},[629,2936,652],{"class":634},[629,2938,2726],{"class":642},[629,2940,649],{"class":634},[629,2942,652],{"class":634},[629,2944,2945],{"class":655},"textures",[629,2947,652],{"class":634},[629,2949,779],{"class":634},[629,2951,2952,2954,2956],{"class":631,"line":623},[629,2953,724],{"class":634},[629,2955,742],{"class":638},[629,2957,661],{"class":634},[606,2959,2960,2961,2259,2964,2966,2967,2970,2971,2974],{},"Each entry references its texture by ",[610,2962,2963],{},"name",[610,2965,2202],{}," auto-fills\n",[610,2968,2969],{},"texture.name"," from the URL filename when missing, so JSON ",[610,2972,2973],{},"map","\nfields round-trip cleanly.",[496,2976,2251],{"id":2977},"custom-material",[606,2979,2980,2981,2984,2985,2480,2988,2991],{},"The default material is ",[610,2982,2983],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[610,2986,2987],{},"MeshStandardMaterial",[610,2989,2990],{},"MeshPhysicalMaterial",", or a custom shader.",[618,2993,2995],{"className":620,"code":2994,"language":625,"meta":568,"style":568},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[610,2996,2997,3034,3039],{"__ignoreMap":568},[629,2998,2999,3001,3003,3006,3008,3011,3013,3015,3017,3019,3022,3024,3026,3028,3030,3032],{"class":631,"line":569},[629,3000,635],{"class":634},[629,3002,53],{"class":638},[629,3004,3005],{"class":642}," v-model",[629,3007,1210],{"class":634},[629,3009,3010],{"class":642},"data",[629,3012,649],{"class":634},[629,3014,652],{"class":634},[629,3016,2721],{"class":675},[629,3018,652],{"class":634},[629,3020,3021],{"class":634}," :",[629,3023,2973],{"class":642},[629,3025,649],{"class":634},[629,3027,652],{"class":634},[629,3029,2709],{"class":675},[629,3031,652],{"class":634},[629,3033,661],{"class":634},[629,3035,3036],{"class":631,"line":570},[629,3037,3038],{"class":675}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[629,3040,3041,3043,3045],{"class":631,"line":700},[629,3042,724],{"class":634},[629,3044,53],{"class":638},[629,3046,661],{"class":634},[1997,3048,3049],{},[606,3050,3051,3052,3055,3056,3059,3060,3055,3063,3066,3067,2480,3069,3071],{},"Keep ",[610,3053,3054],{},"transparent: true"," and ",[610,3057,3058],{},"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 ",[610,3061,3062],{},".color",[610,3064,3065],{},".opacity"," (",[610,3068,2983],{},[610,3070,2987],{},", …) — bespoke shader materials are skipped\nsilently.",[496,3073,3075],{"id":3074},"stacking-decals-z-layering","Stacking decals (z-layering)",[606,3077,3078,3079,3081,3082,3085,3086,1138],{},"Each decal has a ",[610,3080,2284],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[610,3083,3084],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[610,3087,3088],{},"layerGap",[2287,3090,3091],{},[3092,3093],"abstractions-decal-stacking",{},[618,3095,3097],{"className":620,"code":3096,"language":625,"meta":568,"style":568},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n/>\n",[610,3098,3099,3106,3124,3139,3155],{"__ignoreMap":568},[629,3100,3101,3103],{"class":631,"line":569},[629,3102,635],{"class":634},[629,3104,3105],{"class":638},"Decal\n",[629,3107,3108,3111,3113,3115,3117,3119,3121],{"class":631,"line":570},[629,3109,3110],{"class":642}," v-model",[629,3112,1210],{"class":634},[629,3114,3010],{"class":642},[629,3116,649],{"class":634},[629,3118,652],{"class":634},[629,3120,2721],{"class":675},[629,3122,3123],{"class":634},"\"\n",[629,3125,3126,3129,3131,3133,3135,3137],{"class":631,"line":700},[629,3127,3128],{"class":634}," :",[629,3130,2973],{"class":642},[629,3132,649],{"class":634},[629,3134,652],{"class":634},[629,3136,2945],{"class":675},[629,3138,3123],{"class":634},[629,3140,3141,3143,3146,3148,3150,3153],{"class":631,"line":721},[629,3142,3128],{"class":634},[629,3144,3145],{"class":642},"layer-gap",[629,3147,649],{"class":634},[629,3149,652],{"class":634},[629,3151,3152],{"class":2493},"0.002",[629,3154,3123],{"class":634},[629,3156,3157],{"class":631,"line":731},[629,3158,3159],{"class":675},"/>\n",[606,3161,3162,3163,3166],{},"zIndex stacks are ",[1661,3164,3165],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[496,3168,3170,3171],{"id":3169},"editable-mode-decaldebugui","Editable mode + ",[610,3172,2217],{},[606,3174,3175,3176,3179,3180,3182,3183,3186,3187,1138],{},"Add the ",[610,3177,3178],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[610,3181,2217],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1661,3184,3185],{},"outside"," ",[610,3188,3189],{},"\u003CTresCanvas>",[3191,3192,3193,3207,3228],"prose-warning",{},[606,3194,3195,3197,3198,3201,3202,3204,3205,1138],{},[610,3196,2217],{}," needs its stylesheet — import it ",[1661,3199,3200],{},"once"," at your app\nentry. ",[610,3203,2202],{}," itself is style-less, so this is only needed when you\nmount ",[610,3206,2217],{},[618,3208,3210],{"className":1178,"code":3209,"language":656,"meta":568,"style":568},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[610,3211,3212,3217],{"__ignoreMap":568},[629,3213,3214],{"class":631,"line":569},[629,3215,3216],{"class":1201},"// Vite / Vue — in main.ts\n",[629,3218,3219,3221,3223,3226],{"class":631,"line":570},[629,3220,669],{"class":668},[629,3222,691],{"class":634},[629,3224,3225],{"class":655},"@tresjs/cientos/styles.css",[629,3227,697],{"class":634},[618,3229,3231],{"className":1178,"code":3230,"language":656,"meta":568,"style":568},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs/cientos/styles.css'],\n})\n",[610,3232,3233,3238,3253,3272],{"__ignoreMap":568},[629,3234,3235],{"class":631,"line":569},[629,3236,3237],{"class":1201},"// Nuxt — in nuxt.config.ts\n",[629,3239,3240,3242,3245,3248,3250],{"class":631,"line":570},[629,3241,1186],{"class":668},[629,3243,3244],{"class":668}," default",[629,3246,3247],{"class":2426}," defineNuxtConfig",[629,3249,2429],{"class":675},[629,3251,3252],{"class":634},"{\n",[629,3254,3255,3258,3260,3262,3264,3266,3268,3270],{"class":631,"line":700},[629,3256,3257],{"class":638}," css",[629,3259,1210],{"class":634},[629,3261,2490],{"class":675},[629,3263,2432],{"class":634},[629,3265,3225],{"class":655},[629,3267,2432],{"class":634},[629,3269,2506],{"class":675},[629,3271,2480],{"class":634},[629,3273,3274,3276],{"class":631,"line":721},[629,3275,2420],{"class":634},[629,3277,2440],{"class":675},[2287,3279,3280],{},[3281,3282],"abstractions-decal-editable",{},[606,3284,3285,3286,3289,3290,3293,3294,1138],{},"Three panels: a floating ",[1661,3287,3288],{},"handle"," anchored to the editing decal, a\nbottom ",[1661,3291,3292],{},"dock"," (texture picker + edit tools), a right-side ",[1661,3295,3296],{},"layer\npanel",[2205,3298,3299,3309,3314,3320,3333,3338,3343,3349,3355,3361,3367],{},[2208,3300,3301,3304,3305,3308],{},[1661,3302,3303],{},"Floating handle"," (rotate + scale + snap + live ",[610,3306,3307],{},"scale% · rotation° · L\u003Cn>"," badge)",[2208,3310,3311],{},[1661,3312,3313],{},"Color tint & opacity",[2208,3315,3316,3319],{},[1661,3317,3318],{},"Mirror"," (flip X / flip Y)",[2208,3321,3322,3066,3325,3328,3329,3332],{},[1661,3323,3324],{},"Layer controls",[610,3326,3327],{},"L+"," / ",[610,3330,3331],{},"L-",")",[2208,3334,3335],{},[1661,3336,3337],{},"Visibility toggle",[2208,3339,3340],{},[1661,3341,3342],{},"Per-row remove",[2208,3344,3345,3348],{},[1661,3346,3347],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2208,3350,3351,3354],{},[1661,3352,3353],{},"Texture picker"," (drag or click-to-arm)",[2208,3356,3357,3360],{},[1661,3358,3359],{},"Mode badge"," (placing / editing status)",[2208,3362,3363,3366],{},[1661,3364,3365],{},"Undo / Redo"," buttons",[2208,3368,3369,3366],{},[1661,3370,3371],{},"Import / Export",[618,3373,3375],{"className":620,"code":3374,"language":625,"meta":568,"style":568},"\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",[610,3376,3377,3397,3428,3455,3473,3501,3505,3540,3544,3579,3591,3602,3608,3612,3651,3691,3699,3703,3711,3756,3760,3768,3787,3795,3799,3830,3838,3856,3900,3908,3912,3943,3964,3983,4015,4024,4033],{"__ignoreMap":568},[629,3378,3379,3381,3383,3385,3387,3389,3391,3393,3395],{"class":631,"line":569},[629,3380,635],{"class":634},[629,3382,639],{"class":638},[629,3384,643],{"class":642},[629,3386,646],{"class":642},[629,3388,649],{"class":634},[629,3390,652],{"class":634},[629,3392,656],{"class":655},[629,3394,652],{"class":634},[629,3396,661],{"class":634},[629,3398,3399,3401,3403,3405,3407,3410,3412,3414,3416,3418,3420,3422,3424,3426],{"class":631,"line":570},[629,3400,669],{"class":668},[629,3402,672],{"class":634},[629,3404,2342],{"class":675},[629,3406,679],{"class":634},[629,3408,3409],{"class":675}," DecalDebugUI",[629,3411,679],{"class":634},[629,3413,682],{"class":675},[629,3415,679],{"class":634},[629,3417,2832],{"class":675},[629,3419,685],{"class":634},[629,3421,688],{"class":668},[629,3423,691],{"class":634},[629,3425,694],{"class":655},[629,3427,697],{"class":634},[629,3429,3430,3432,3435,3437,3440,3442,3445,3447,3449,3451,3453],{"class":631,"line":700},[629,3431,669],{"class":668},[629,3433,3434],{"class":668}," type",[629,3436,672],{"class":634},[629,3438,3439],{"class":675}," DecalEditorSession",[629,3441,679],{"class":634},[629,3443,3444],{"class":675}," DecalJsonEntry",[629,3446,685],{"class":634},[629,3448,688],{"class":668},[629,3450,691],{"class":634},[629,3452,694],{"class":655},[629,3454,697],{"class":634},[629,3456,3457,3459,3461,3463,3465,3467,3469,3471],{"class":631,"line":721},[629,3458,669],{"class":668},[629,3460,672],{"class":634},[629,3462,707],{"class":675},[629,3464,685],{"class":634},[629,3466,688],{"class":668},[629,3468,691],{"class":634},[629,3470,716],{"class":655},[629,3472,697],{"class":634},[629,3474,3475,3477,3479,3482,3484,3486,3488,3491,3493,3495,3497,3499],{"class":631,"line":731},[629,3476,669],{"class":668},[629,3478,672],{"class":634},[629,3480,3481],{"class":675}," computed",[629,3483,679],{"class":634},[629,3485,2388],{"class":675},[629,3487,679],{"class":634},[629,3489,3490],{"class":675}," shallowRef",[629,3492,685],{"class":634},[629,3494,688],{"class":668},[629,3496,691],{"class":634},[629,3498,625],{"class":655},[629,3500,697],{"class":634},[629,3502,3503],{"class":631,"line":737},[629,3504,734],{"emptyLinePlaceholder":586},[629,3506,3507,3509,3511,3513,3515,3517,3519,3522,3524,3527,3529,3531,3533,3536,3538],{"class":631,"line":747},[629,3508,2407],{"class":642},[629,3510,672],{"class":634},[629,3512,2855],{"class":675},[629,3514,2420],{"class":634},[629,3516,2423],{"class":634},[629,3518,2832],{"class":2426},[629,3520,3521],{"class":675},"([",[629,3523,2432],{"class":634},[629,3525,3526],{"class":655},"/textures/a.png",[629,3528,2432],{"class":634},[629,3530,679],{"class":634},[629,3532,691],{"class":634},[629,3534,3535],{"class":655},"/textures/b.png",[629,3537,2432],{"class":634},[629,3539,2594],{"class":675},[629,3541,3542],{"class":631,"line":770},[629,3543,734],{"emptyLinePlaceholder":586},[629,3545,3546,3548,3551,3553,3555,3557,3560,3562,3565,3567,3569,3572,3575,3577],{"class":631,"line":782},[629,3547,2407],{"class":642},[629,3549,3550],{"class":675}," layout ",[629,3552,649],{"class":634},[629,3554,2388],{"class":2426},[629,3556,635],{"class":634},[629,3558,3559],{"class":1192},"Record",[629,3561,635],{"class":634},[629,3563,3564],{"class":1192},"string",[629,3566,679],{"class":634},[629,3568,3444],{"class":1192},[629,3570,3571],{"class":675},"[]",[629,3573,3574],{"class":634},">>",[629,3576,2429],{"class":675},[629,3578,3252],{"class":634},[629,3580,3581,3584,3586,3589],{"class":631,"line":792},[629,3582,3583],{"class":638}," cube",[629,3585,1210],{"class":634},[629,3587,3588],{"class":675}," []",[629,3590,2480],{"class":634},[629,3592,3593,3596,3598,3600],{"class":631,"line":797},[629,3594,3595],{"class":638}," sphere",[629,3597,1210],{"class":634},[629,3599,3588],{"class":675},[629,3601,2480],{"class":634},[629,3603,3604,3606],{"class":631,"line":819},[629,3605,2420],{"class":634},[629,3607,2440],{"class":675},[629,3609,3610],{"class":631,"line":623},[629,3611,734],{"emptyLinePlaceholder":586},[629,3613,3614,3616,3619,3621,3623,3626,3629,3631,3633,3635,3638,3641,3644,3646,3649],{"class":631,"line":842},[629,3615,2407],{"class":642},[629,3617,3618],{"class":675}," decalRef ",[629,3620,649],{"class":634},[629,3622,3490],{"class":2426},[629,3624,3625],{"class":634},"\u003C{",[629,3627,3628],{"class":638}," editor",[629,3630,1210],{"class":634},[629,3632,3439],{"class":1192},[629,3634,685],{"class":634},[629,3636,3637],{"class":634}," |",[629,3639,3640],{"class":1192}," null",[629,3642,3643],{"class":634},">",[629,3645,2429],{"class":675},[629,3647,3648],{"class":634},"null",[629,3650,2440],{"class":675},[629,3652,3653,3655,3658,3660,3662,3664,3667,3670,3673,3675,3678,3681,3684,3687,3689],{"class":631,"line":853},[629,3654,2407],{"class":642},[629,3656,3657],{"class":675}," session ",[629,3659,649],{"class":634},[629,3661,3481],{"class":2426},[629,3663,2429],{"class":675},[629,3665,3666],{"class":634},"()",[629,3668,3669],{"class":642}," =>",[629,3671,3672],{"class":675}," decalRef",[629,3674,1138],{"class":634},[629,3676,3677],{"class":675},"value",[629,3679,3680],{"class":634},"?.",[629,3682,3683],{"class":675},"editor ",[629,3685,3686],{"class":634},"??",[629,3688,3640],{"class":634},[629,3690,2440],{"class":675},[629,3692,3693,3695,3697],{"class":631,"line":864},[629,3694,724],{"class":634},[629,3696,639],{"class":638},[629,3698,661],{"class":634},[629,3700,3701],{"class":631,"line":874},[629,3702,734],{"emptyLinePlaceholder":586},[629,3704,3705,3707,3709],{"class":631,"line":624},[629,3706,635],{"class":634},[629,3708,742],{"class":638},[629,3710,661],{"class":634},[629,3712,3713,3715,3718,3721,3723,3725,3728,3730,3733,3735,3737,3740,3742,3745,3747,3749,3752,3754],{"class":631,"line":894},[629,3714,750],{"class":634},[629,3716,3717],{"class":638},"DecalDebugUI",[629,3719,3720],{"class":642}," :session",[629,3722,649],{"class":634},[629,3724,652],{"class":634},[629,3726,3727],{"class":655},"session",[629,3729,652],{"class":634},[629,3731,3732],{"class":642}," :textures",[629,3734,649],{"class":634},[629,3736,652],{"class":634},[629,3738,3739],{"class":655},"textures ?? []",[629,3741,652],{"class":634},[629,3743,3744],{"class":642}," :data",[629,3746,649],{"class":634},[629,3748,652],{"class":634},[629,3750,3751],{"class":655},"layout",[629,3753,652],{"class":634},[629,3755,779],{"class":634},[629,3757,3758],{"class":631,"line":904},[629,3759,734],{"emptyLinePlaceholder":586},[629,3761,3762,3764,3766],{"class":631,"line":2617},[629,3763,750],{"class":634},[629,3765,753],{"class":638},[629,3767,661],{"class":634},[629,3769,3770,3772,3774,3776,3778,3780,3783,3785],{"class":631,"line":2626},[629,3771,773],{"class":634},[629,3773,776],{"class":638},[629,3775,1477],{"class":642},[629,3777,649],{"class":634},[629,3779,652],{"class":634},[629,3781,3782],{"class":655},"[2, 2, 4]",[629,3784,652],{"class":634},[629,3786,779],{"class":634},[629,3788,3789,3791,3793],{"class":631,"line":2646},[629,3790,773],{"class":634},[629,3792,787],{"class":638},[629,3794,779],{"class":634},[629,3796,3797],{"class":631,"line":2655},[629,3798,734],{"emptyLinePlaceholder":586},[629,3800,3801,3803,3805,3808,3810,3812,3815,3817,3819,3821,3823,3826,3828],{"class":631,"line":2664},[629,3802,773],{"class":634},[629,3804,848],{"class":638},[629,3806,3807],{"class":642}," name",[629,3809,649],{"class":634},[629,3811,652],{"class":634},[629,3813,3814],{"class":655},"cube",[629,3816,652],{"class":634},[629,3818,1477],{"class":642},[629,3820,649],{"class":634},[629,3822,652],{"class":634},[629,3824,3825],{"class":655},"[-1.2, 0, 0]",[629,3827,652],{"class":634},[629,3829,661],{"class":634},[629,3831,3832,3834,3836],{"class":631,"line":2673},[629,3833,845],{"class":634},[629,3835,859],{"class":638},[629,3837,779],{"class":634},[629,3839,3840,3842,3844,3846,3848,3850,3852,3854],{"class":631,"line":2695},[629,3841,845],{"class":634},[629,3843,2678],{"class":638},[629,3845,2681],{"class":642},[629,3847,649],{"class":634},[629,3849,652],{"class":634},[629,3851,2688],{"class":655},[629,3853,652],{"class":634},[629,3855,779],{"class":634},[629,3857,3858,3860,3862,3865,3867,3869,3872,3874,3876,3878,3880,3883,3885,3887,3889,3891,3893,3895,3898],{"class":631,"line":2739},[629,3859,845],{"class":634},[629,3861,53],{"class":638},[629,3863,3864],{"class":642}," ref",[629,3866,649],{"class":634},[629,3868,652],{"class":634},[629,3870,3871],{"class":655},"decalRef",[629,3873,652],{"class":634},[629,3875,2714],{"class":642},[629,3877,649],{"class":634},[629,3879,652],{"class":634},[629,3881,3882],{"class":655},"layout.cube",[629,3884,652],{"class":634},[629,3886,2726],{"class":642},[629,3888,649],{"class":634},[629,3890,652],{"class":634},[629,3892,2945],{"class":655},[629,3894,652],{"class":634},[629,3896,3897],{"class":642}," editable",[629,3899,779],{"class":634},[629,3901,3902,3904,3906],{"class":631,"line":2748},[629,3903,887],{"class":634},[629,3905,848],{"class":638},[629,3907,661],{"class":634},[629,3909,3910],{"class":631,"line":2757},[629,3911,734],{"emptyLinePlaceholder":586},[629,3913,3915,3917,3919,3921,3923,3925,3928,3930,3932,3934,3936,3939,3941],{"class":631,"line":3914},31,[629,3916,773],{"class":634},[629,3918,848],{"class":638},[629,3920,3807],{"class":642},[629,3922,649],{"class":634},[629,3924,652],{"class":634},[629,3926,3927],{"class":655},"sphere",[629,3929,652],{"class":634},[629,3931,1477],{"class":642},[629,3933,649],{"class":634},[629,3935,652],{"class":634},[629,3937,3938],{"class":655},"[1.2, 0, 0]",[629,3940,652],{"class":634},[629,3942,661],{"class":634},[629,3944,3946,3948,3951,3953,3955,3957,3960,3962],{"class":631,"line":3945},32,[629,3947,845],{"class":634},[629,3949,3950],{"class":638},"TresSphereGeometry",[629,3952,1951],{"class":642},[629,3954,649],{"class":634},[629,3956,652],{"class":634},[629,3958,3959],{"class":655},"[0.7]",[629,3961,652],{"class":634},[629,3963,779],{"class":634},[629,3965,3967,3969,3971,3973,3975,3977,3979,3981],{"class":631,"line":3966},33,[629,3968,845],{"class":634},[629,3970,2678],{"class":638},[629,3972,2681],{"class":642},[629,3974,649],{"class":634},[629,3976,652],{"class":634},[629,3978,2688],{"class":655},[629,3980,652],{"class":634},[629,3982,779],{"class":634},[629,3984,3986,3988,3990,3992,3994,3996,3999,4001,4003,4005,4007,4009,4011,4013],{"class":631,"line":3985},34,[629,3987,845],{"class":634},[629,3989,53],{"class":638},[629,3991,2714],{"class":642},[629,3993,649],{"class":634},[629,3995,652],{"class":634},[629,3997,3998],{"class":655},"layout.sphere",[629,4000,652],{"class":634},[629,4002,2726],{"class":642},[629,4004,649],{"class":634},[629,4006,652],{"class":634},[629,4008,2945],{"class":655},[629,4010,652],{"class":634},[629,4012,3897],{"class":642},[629,4014,779],{"class":634},[629,4016,4018,4020,4022],{"class":631,"line":4017},35,[629,4019,887],{"class":634},[629,4021,848],{"class":638},[629,4023,661],{"class":634},[629,4025,4027,4029,4031],{"class":631,"line":4026},36,[629,4028,897],{"class":634},[629,4030,753],{"class":638},[629,4032,661],{"class":634},[629,4034,4036,4038,4040],{"class":631,"line":4035},37,[629,4037,724],{"class":634},[629,4039,742],{"class":638},[629,4041,661],{"class":634},[4043,4044,4046],"h3",{"id":4045},"how-the-wiring-works","How the wiring works",[2205,4048,4049,4060,4069,4078],{},[2208,4050,4051,4054,4055,4057,4058,1138],{},[610,4052,4053],{},"v-model:data=\"layout.cube\""," — each ",[610,4056,2202],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[610,4059,2963],{},[2208,4061,4062,4065,4066,4068],{},[610,4063,4064],{},"ref=\"decalRef\""," — grab a reference to any ",[610,4067,2202],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2208,4070,4071,4074,4075,4077],{},[610,4072,4073],{},"session = decalRef.value?.editor"," — the editor session powers\n",[610,4076,2217],{},". Pass it through.",[2208,4079,4080,4083,4084,4086],{},[610,4081,4082],{},":data=\"layout\""," on ",[610,4085,2217],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[1997,4088,4089],{},[606,4090,4091,4092,4095,4096,4099],{},"The overlay is full-viewport (",[610,4093,4094],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[610,4097,4098],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[618,4101,4103],{"className":620,"code":4102,"language":625,"meta":568,"style":568},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... />\n \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[610,4104,4105,4145,4150,4155],{"__ignoreMap":568},[629,4106,4107,4109,4112,4115,4117,4119,4123,4125,4128,4131,4134,4136,4139,4141,4143],{"class":631,"line":569},[629,4108,635],{"class":634},[629,4110,4111],{"class":638},"div",[629,4113,4114],{"class":642}," style",[629,4116,649],{"class":634},[629,4118,652],{"class":634},[629,4120,4122],{"class":4121},"sqsOY","position",[629,4124,1210],{"class":634},[629,4126,4127],{"class":675}," relative",[629,4129,4130],{"class":634},";",[629,4132,4133],{"class":4121}," height",[629,4135,1210],{"class":634},[629,4137,4138],{"class":2493}," 500px",[629,4140,4130],{"class":634},[629,4142,652],{"class":634},[629,4144,661],{"class":634},[629,4146,4147],{"class":631,"line":570},[629,4148,4149],{"class":675}," \u003CDecalDebugUI contained ... />\n",[629,4151,4152],{"class":631,"line":700},[629,4153,4154],{"class":675}," \u003CTresCanvas>...\u003C/TresCanvas>\n",[629,4156,4157,4159,4161],{"class":631,"line":721},[629,4158,724],{"class":634},[629,4160,4111],{"class":638},[629,4162,661],{"class":634},[496,4164,3371],{"id":4165},"import-export",[606,4167,4168,4169,4172,4173,4175],{},"The Export button in the dock auto-downloads the current layout as\n",[610,4170,4171],{},"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",[610,4174,2202],{}," automatically — no extra host code needed.",[618,4177,4179],{"className":620,"code":4178,"language":625,"meta":568,"style":568},"\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",[610,4180,4181,4186,4217,4221,4226],{"__ignoreMap":568},[629,4182,4183],{"class":631,"line":569},[629,4184,4185],{"class":1201},"\u003C!-- Custom filename -->\n",[629,4187,4188,4190,4192,4194,4197,4199,4202,4205,4207,4209,4212,4215],{"class":631,"line":570},[629,4189,635],{"class":634},[629,4191,3717],{"class":638},[629,4193,3021],{"class":634},[629,4195,4196],{"class":642},"export-filename",[629,4198,649],{"class":634},[629,4200,4201],{"class":634},"\"`${",[629,4203,4204],{"class":675},"sceneName",[629,4206,2420],{"class":634},[629,4208,2778],{"class":655},[629,4210,4211],{"class":634},"`\"",[629,4213,4214],{"class":634}," ...",[629,4216,779],{"class":634},[629,4218,4219],{"class":631,"line":700},[629,4220,734],{"emptyLinePlaceholder":586},[629,4222,4223],{"class":631,"line":721},[629,4224,4225],{"class":1201},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[629,4227,4228,4230,4232,4234,4236,4238,4240,4242,4244,4247,4249,4251,4253,4256,4258,4260],{"class":631,"line":731},[629,4229,635],{"class":634},[629,4231,3717],{"class":638},[629,4233,3021],{"class":634},[629,4235,4196],{"class":642},[629,4237,649],{"class":634},[629,4239,652],{"class":634},[629,4241,3648],{"class":634},[629,4243,652],{"class":634},[629,4245,4246],{"class":634}," @",[629,4248,1186],{"class":642},[629,4250,649],{"class":634},[629,4252,652],{"class":634},[629,4254,4255],{"class":675},"postToBackend",[629,4257,652],{"class":634},[629,4259,4214],{"class":634},[629,4261,779],{"class":634},[496,4263,4265,4266,3332],{"id":4264},"targeting-a-loaded-model-glb","Targeting a loaded model (",[610,4267,4268],{},".glb",[606,4270,4271,4272,4274,4275,4281,4282,4285,4286,4288],{},"A ",[610,4273,2202],{}," can be a ",[1661,4276,4277,4278],{},"direct child of ",[610,4279,4280],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[610,4283,4284],{},"Mesh"," — so the\nbehaviour depends on what the ",[610,4287,4280],{}," wraps.",[4043,4290,4292,4293,4296,4297],{"id":4291},"when-object-is-a-mesh","When ",[610,4294,4295],{},":object"," is a ",[610,4298,4284],{},[606,4300,4301],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[618,4303,4305],{"className":620,"code":4304,"language":625,"meta":568,"style":568},"\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",[610,4306,4307,4327,4350,4354,4395,4400,4408,4412,4420,4452,4483,4491],{"__ignoreMap":568},[629,4308,4309,4311,4313,4315,4317,4319,4321,4323,4325],{"class":631,"line":569},[629,4310,635],{"class":634},[629,4312,639],{"class":638},[629,4314,643],{"class":642},[629,4316,646],{"class":642},[629,4318,649],{"class":634},[629,4320,652],{"class":634},[629,4322,656],{"class":655},[629,4324,652],{"class":634},[629,4326,661],{"class":634},[629,4328,4329,4331,4333,4335,4337,4340,4342,4344,4346,4348],{"class":631,"line":570},[629,4330,669],{"class":668},[629,4332,672],{"class":634},[629,4334,2342],{"class":675},[629,4336,679],{"class":634},[629,4338,4339],{"class":675}," useGLTF",[629,4341,685],{"class":634},[629,4343,688],{"class":668},[629,4345,691],{"class":634},[629,4347,694],{"class":655},[629,4349,697],{"class":634},[629,4351,4352],{"class":631,"line":700},[629,4353,734],{"emptyLinePlaceholder":586},[629,4355,4356,4358,4360,4363,4365,4367,4369,4371,4373,4376,4378,4380,4382,4385,4387,4391,4393],{"class":631,"line":721},[629,4357,2407],{"class":642},[629,4359,672],{"class":634},[629,4361,4362],{"class":675}," nodes ",[629,4364,2420],{"class":634},[629,4366,2423],{"class":634},[629,4368,4339],{"class":2426},[629,4370,2429],{"class":675},[629,4372,2432],{"class":634},[629,4374,4375],{"class":655},"/models/helmet.glb",[629,4377,2432],{"class":634},[629,4379,679],{"class":634},[629,4381,672],{"class":634},[629,4383,4384],{"class":638}," draco",[629,4386,1210],{"class":634},[629,4388,4390],{"class":4389},"sfNiH"," true",[629,4392,685],{"class":634},[629,4394,2440],{"class":675},[629,4396,4397],{"class":631,"line":731},[629,4398,4399],{"class":1201},"// nodes.Helmet is a Mesh in this asset.\n",[629,4401,4402,4404,4406],{"class":631,"line":737},[629,4403,724],{"class":634},[629,4405,639],{"class":638},[629,4407,661],{"class":634},[629,4409,4410],{"class":631,"line":747},[629,4411,734],{"emptyLinePlaceholder":586},[629,4413,4414,4416,4418],{"class":631,"line":770},[629,4415,635],{"class":634},[629,4417,742],{"class":638},[629,4419,661],{"class":634},[629,4421,4422,4424,4427,4429,4431,4433,4436,4438,4441,4443,4445,4448,4450],{"class":631,"line":782},[629,4423,750],{"class":634},[629,4425,4426],{"class":638},"primitive",[629,4428,2702],{"class":642},[629,4430,649],{"class":634},[629,4432,652],{"class":634},[629,4434,4435],{"class":655},"nodes?.Helmet",[629,4437,652],{"class":634},[629,4439,4440],{"class":642}," :object",[629,4442,649],{"class":634},[629,4444,652],{"class":634},[629,4446,4447],{"class":655},"nodes.Helmet",[629,4449,652],{"class":634},[629,4451,661],{"class":634},[629,4453,4454,4456,4458,4460,4462,4464,4467,4469,4471,4473,4475,4477,4479,4481],{"class":631,"line":792},[629,4455,773],{"class":634},[629,4457,53],{"class":638},[629,4459,2714],{"class":642},[629,4461,649],{"class":634},[629,4463,652],{"class":634},[629,4465,4466],{"class":655},"layout.helmet",[629,4468,652],{"class":634},[629,4470,2726],{"class":642},[629,4472,649],{"class":634},[629,4474,652],{"class":634},[629,4476,2945],{"class":655},[629,4478,652],{"class":634},[629,4480,3897],{"class":642},[629,4482,779],{"class":634},[629,4484,4485,4487,4489],{"class":631,"line":797},[629,4486,897],{"class":634},[629,4488,4426],{"class":638},[629,4490,661],{"class":634},[629,4492,4493,4495,4497],{"class":631,"line":819},[629,4494,724],{"class":634},[629,4496,742],{"class":638},[629,4498,661],{"class":634},[1997,4500,4501],{},[606,4502,4503,4504,4506,4507,4510],{},"The resolved parent is the ",[610,4505,4280],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[610,4508,4509],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4043,4512,4292,4514,4296,4516],{"id":4513},"when-object-is-a-group",[610,4515,4295],{},[610,4517,4518],{},"Group",[606,4520,4521,4522,4524,4525,4527,4528,4530,4531,1210],{},"A named node in a ",[610,4523,4268],{}," is often a ",[610,4526,4518],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[610,4529,3648],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[610,4532,4533],{},":mesh",[618,4535,4537],{"className":620,"code":4536,"language":625,"meta":568,"style":568},"\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",[610,4538,4539,4559,4581,4599,4621,4625,4662,4667,4691,4739,4743,4751,4755,4763,4793,4836,4844],{"__ignoreMap":568},[629,4540,4541,4543,4545,4547,4549,4551,4553,4555,4557],{"class":631,"line":569},[629,4542,635],{"class":634},[629,4544,639],{"class":638},[629,4546,643],{"class":642},[629,4548,646],{"class":642},[629,4550,649],{"class":634},[629,4552,652],{"class":634},[629,4554,656],{"class":655},[629,4556,652],{"class":634},[629,4558,661],{"class":634},[629,4560,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579],{"class":631,"line":570},[629,4562,669],{"class":668},[629,4564,672],{"class":634},[629,4566,2342],{"class":675},[629,4568,679],{"class":634},[629,4570,4339],{"class":675},[629,4572,685],{"class":634},[629,4574,688],{"class":668},[629,4576,691],{"class":634},[629,4578,694],{"class":655},[629,4580,697],{"class":634},[629,4582,4583,4585,4587,4589,4591,4593,4595,4597],{"class":631,"line":700},[629,4584,669],{"class":668},[629,4586,672],{"class":634},[629,4588,3481],{"class":675},[629,4590,685],{"class":634},[629,4592,688],{"class":668},[629,4594,691],{"class":634},[629,4596,625],{"class":655},[629,4598,697],{"class":634},[629,4600,4601,4603,4605,4607,4610,4612,4614,4616,4619],{"class":631,"line":721},[629,4602,669],{"class":668},[629,4604,3434],{"class":668},[629,4606,672],{"class":634},[629,4608,4609],{"class":675}," Mesh",[629,4611,685],{"class":634},[629,4613,688],{"class":668},[629,4615,691],{"class":634},[629,4617,4618],{"class":655},"three",[629,4620,697],{"class":634},[629,4622,4623],{"class":631,"line":731},[629,4624,734],{"emptyLinePlaceholder":586},[629,4626,4627,4629,4631,4633,4635,4637,4639,4641,4643,4646,4648,4650,4652,4654,4656,4658,4660],{"class":631,"line":737},[629,4628,2407],{"class":642},[629,4630,672],{"class":634},[629,4632,4362],{"class":675},[629,4634,2420],{"class":634},[629,4636,2423],{"class":634},[629,4638,4339],{"class":2426},[629,4640,2429],{"class":675},[629,4642,2432],{"class":634},[629,4644,4645],{"class":655},"/models/mug.glb",[629,4647,2432],{"class":634},[629,4649,679],{"class":634},[629,4651,672],{"class":634},[629,4653,4384],{"class":638},[629,4655,1210],{"class":634},[629,4657,4390],{"class":4389},[629,4659,685],{"class":634},[629,4661,2440],{"class":675},[629,4663,4664],{"class":631,"line":747},[629,4665,4666],{"class":1201},"// nodes.Mug is a Group — pick the child you want to decal.\n",[629,4668,4669,4671,4674,4676,4678,4680,4682,4684,4686,4688],{"class":631,"line":770},[629,4670,2407],{"class":642},[629,4672,4673],{"class":675}," body ",[629,4675,649],{"class":634},[629,4677,3481],{"class":2426},[629,4679,635],{"class":634},[629,4681,4284],{"class":1192},[629,4683,3637],{"class":634},[629,4685,3640],{"class":1192},[629,4687,3643],{"class":634},[629,4689,4690],{"class":675},"(\n",[629,4692,4693,4696,4698,4701,4703,4705,4707,4710,4712,4715,4717,4719,4722,4724,4727,4730,4732,4734,4736],{"class":631,"line":782},[629,4694,4695],{"class":634}," ()",[629,4697,3669],{"class":642},[629,4699,4700],{"class":675}," (nodes",[629,4702,1138],{"class":634},[629,4704,3677],{"class":675},[629,4706,3680],{"class":634},[629,4708,4709],{"class":675},"Mug",[629,4711,3680],{"class":634},[629,4713,4714],{"class":2426},"getObjectByName",[629,4716,2429],{"class":675},[629,4718,2432],{"class":634},[629,4720,4721],{"class":655},"Body",[629,4723,2432],{"class":634},[629,4725,4726],{"class":675},") ",[629,4728,4729],{"class":668},"as",[629,4731,4609],{"class":1192},[629,4733,4726],{"class":675},[629,4735,3686],{"class":634},[629,4737,4738],{"class":634}," null,\n",[629,4740,4741],{"class":631,"line":792},[629,4742,2440],{"class":675},[629,4744,4745,4747,4749],{"class":631,"line":797},[629,4746,724],{"class":634},[629,4748,639],{"class":638},[629,4750,661],{"class":634},[629,4752,4753],{"class":631,"line":819},[629,4754,734],{"emptyLinePlaceholder":586},[629,4756,4757,4759,4761],{"class":631,"line":623},[629,4758,635],{"class":634},[629,4760,742],{"class":638},[629,4762,661],{"class":634},[629,4764,4765,4767,4769,4771,4773,4775,4778,4780,4782,4784,4786,4789,4791],{"class":631,"line":842},[629,4766,750],{"class":634},[629,4768,4426],{"class":638},[629,4770,2702],{"class":642},[629,4772,649],{"class":634},[629,4774,652],{"class":634},[629,4776,4777],{"class":655},"nodes?.Mug",[629,4779,652],{"class":634},[629,4781,4440],{"class":642},[629,4783,649],{"class":634},[629,4785,652],{"class":634},[629,4787,4788],{"class":655},"nodes.Mug",[629,4790,652],{"class":634},[629,4792,661],{"class":634},[629,4794,4795,4797,4799,4801,4803,4805,4808,4810,4812,4814,4816,4818,4820,4823,4825,4827,4830,4832,4834],{"class":631,"line":853},[629,4796,773],{"class":634},[629,4798,53],{"class":638},[629,4800,2714],{"class":642},[629,4802,649],{"class":634},[629,4804,652],{"class":634},[629,4806,4807],{"class":655},"layout.mug",[629,4809,652],{"class":634},[629,4811,2726],{"class":642},[629,4813,649],{"class":634},[629,4815,652],{"class":634},[629,4817,2945],{"class":655},[629,4819,652],{"class":634},[629,4821,4822],{"class":642}," :mesh",[629,4824,649],{"class":634},[629,4826,652],{"class":634},[629,4828,4829],{"class":655},"body",[629,4831,652],{"class":634},[629,4833,3897],{"class":642},[629,4835,779],{"class":634},[629,4837,4838,4840,4842],{"class":631,"line":864},[629,4839,897],{"class":634},[629,4841,4426],{"class":638},[629,4843,661],{"class":634},[629,4845,4846,4848,4850],{"class":631,"line":874},[629,4847,724],{"class":634},[629,4849,742],{"class":638},[629,4851,661],{"class":634},[4043,4853,4855],{"id":4854},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[606,4857,4858,4859,4865,4866,4873,4874,4876,4877,1210],{},"Alternatively, ",[1661,4860,4861,4862,4864],{},"wrap a ",[610,4863,2302],{}," 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",[1132,4867,4870],{"href":4868,"rel":4869},"https://docs.tresjs.org/api/composables.html#usegraph",[1136],[610,4871,4872],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[610,4875,2302],{}," around its\n",[610,4878,4879],{},":geometry",[618,4881,4883],{"className":620,"code":4882,"language":625,"meta":568,"style":568},"\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",[610,4884,4885,4905,4929,4947,4967,4985,4989,5021,5050,5064,5092,5100,5104,5112,5119,5133,5147,5161,5166,5197,5227,5235],{"__ignoreMap":568},[629,4886,4887,4889,4891,4893,4895,4897,4899,4901,4903],{"class":631,"line":569},[629,4888,635],{"class":634},[629,4890,639],{"class":638},[629,4892,643],{"class":642},[629,4894,646],{"class":642},[629,4896,649],{"class":634},[629,4898,652],{"class":634},[629,4900,656],{"class":655},[629,4902,652],{"class":634},[629,4904,661],{"class":634},[629,4906,4907,4909,4911,4914,4916,4919,4921,4923,4925,4927],{"class":631,"line":570},[629,4908,669],{"class":668},[629,4910,672],{"class":634},[629,4912,4913],{"class":675}," useGraph",[629,4915,679],{"class":634},[629,4917,4918],{"class":675}," useLoader",[629,4920,685],{"class":634},[629,4922,688],{"class":668},[629,4924,691],{"class":634},[629,4926,716],{"class":655},[629,4928,697],{"class":634},[629,4930,4931,4933,4935,4937,4939,4941,4943,4945],{"class":631,"line":700},[629,4932,669],{"class":668},[629,4934,672],{"class":634},[629,4936,2342],{"class":675},[629,4938,685],{"class":634},[629,4940,688],{"class":668},[629,4942,691],{"class":634},[629,4944,694],{"class":655},[629,4946,697],{"class":634},[629,4948,4949,4951,4953,4956,4958,4960,4962,4965],{"class":631,"line":721},[629,4950,669],{"class":668},[629,4952,672],{"class":634},[629,4954,4955],{"class":675}," GLTFLoader",[629,4957,685],{"class":634},[629,4959,688],{"class":668},[629,4961,691],{"class":634},[629,4963,4964],{"class":655},"three/examples/jsm/loaders/GLTFLoader.js",[629,4966,697],{"class":634},[629,4968,4969,4971,4973,4975,4977,4979,4981,4983],{"class":631,"line":731},[629,4970,669],{"class":668},[629,4972,672],{"class":634},[629,4974,3481],{"class":675},[629,4976,685],{"class":634},[629,4978,688],{"class":668},[629,4980,691],{"class":634},[629,4982,625],{"class":655},[629,4984,697],{"class":634},[629,4986,4987],{"class":631,"line":737},[629,4988,734],{"emptyLinePlaceholder":586},[629,4990,4991,4993,4995,4997,4999,5002,5004,5006,5008,5011,5013,5015,5017,5019],{"class":631,"line":747},[629,4992,2407],{"class":642},[629,4994,672],{"class":634},[629,4996,2412],{"class":638},[629,4998,1210],{"class":634},[629,5000,5001],{"class":675}," model ",[629,5003,2420],{"class":634},[629,5005,2423],{"class":634},[629,5007,4918],{"class":2426},[629,5009,5010],{"class":675},"(GLTFLoader",[629,5012,679],{"class":634},[629,5014,691],{"class":634},[629,5016,4375],{"class":655},[629,5018,2432],{"class":634},[629,5020,2440],{"class":675},[629,5022,5023,5025,5028,5030,5032,5034,5036,5038,5041,5043,5045,5047],{"class":631,"line":770},[629,5024,2407],{"class":642},[629,5026,5027],{"class":675}," scene ",[629,5029,649],{"class":634},[629,5031,3481],{"class":2426},[629,5033,2429],{"class":675},[629,5035,3666],{"class":634},[629,5037,3669],{"class":642},[629,5039,5040],{"class":675}," model",[629,5042,1138],{"class":634},[629,5044,3677],{"class":675},[629,5046,3680],{"class":634},[629,5048,5049],{"class":675},"scene)\n",[629,5051,5052,5054,5057,5059,5061],{"class":631,"line":782},[629,5053,2407],{"class":642},[629,5055,5056],{"class":675}," graph ",[629,5058,649],{"class":634},[629,5060,4913],{"class":2426},[629,5062,5063],{"class":675},"(scene)\n",[629,5065,5066,5068,5070,5072,5074,5076,5078,5080,5083,5085,5087,5089],{"class":631,"line":792},[629,5067,2407],{"class":642},[629,5069,4362],{"class":675},[629,5071,649],{"class":634},[629,5073,3481],{"class":2426},[629,5075,2429],{"class":675},[629,5077,3666],{"class":634},[629,5079,3669],{"class":642},[629,5081,5082],{"class":675}," graph",[629,5084,1138],{"class":634},[629,5086,3677],{"class":675},[629,5088,3680],{"class":634},[629,5090,5091],{"class":675},"nodes)\n",[629,5093,5094,5096,5098],{"class":631,"line":797},[629,5095,724],{"class":634},[629,5097,639],{"class":638},[629,5099,661],{"class":634},[629,5101,5102],{"class":631,"line":819},[629,5103,734],{"emptyLinePlaceholder":586},[629,5105,5106,5108,5110],{"class":631,"line":623},[629,5107,635],{"class":634},[629,5109,742],{"class":638},[629,5111,661],{"class":634},[629,5113,5114,5116],{"class":631,"line":842},[629,5115,750],{"class":634},[629,5117,5118],{"class":638},"TresMesh\n",[629,5120,5121,5124,5126,5128,5131],{"class":631,"line":853},[629,5122,5123],{"class":642}," v-if",[629,5125,649],{"class":634},[629,5127,652],{"class":634},[629,5129,5130],{"class":655},"nodes?.Helmet.geometry",[629,5132,3123],{"class":634},[629,5134,5135,5138,5140,5142,5145],{"class":631,"line":864},[629,5136,5137],{"class":642}," name",[629,5139,649],{"class":634},[629,5141,652],{"class":634},[629,5143,5144],{"class":655},"helmet",[629,5146,3123],{"class":634},[629,5148,5149,5152,5154,5156,5159],{"class":631,"line":874},[629,5150,5151],{"class":642}," :geometry",[629,5153,649],{"class":634},[629,5155,652],{"class":634},[629,5157,5158],{"class":655},"nodes.Helmet.geometry",[629,5160,3123],{"class":634},[629,5162,5163],{"class":631,"line":624},[629,5164,5165],{"class":634}," >\n",[629,5167,5168,5170,5172,5174,5176,5178,5181,5183,5186,5188,5190,5193,5195],{"class":631,"line":894},[629,5169,773],{"class":634},[629,5171,4426],{"class":638},[629,5173,4440],{"class":642},[629,5175,649],{"class":634},[629,5177,652],{"class":634},[629,5179,5180],{"class":655},"nodes.Helmet.material",[629,5182,652],{"class":634},[629,5184,5185],{"class":642}," attach",[629,5187,649],{"class":634},[629,5189,652],{"class":634},[629,5191,5192],{"class":655},"material",[629,5194,652],{"class":634},[629,5196,779],{"class":634},[629,5198,5199,5201,5203,5205,5207,5209,5211,5213,5215,5217,5219,5221,5223,5225],{"class":631,"line":904},[629,5200,773],{"class":634},[629,5202,53],{"class":638},[629,5204,2714],{"class":642},[629,5206,649],{"class":634},[629,5208,652],{"class":634},[629,5210,4466],{"class":655},[629,5212,652],{"class":634},[629,5214,2726],{"class":642},[629,5216,649],{"class":634},[629,5218,652],{"class":634},[629,5220,2945],{"class":655},[629,5222,652],{"class":634},[629,5224,3897],{"class":642},[629,5226,779],{"class":634},[629,5228,5229,5231,5233],{"class":631,"line":2617},[629,5230,897],{"class":634},[629,5232,848],{"class":638},[629,5234,661],{"class":634},[629,5236,5237,5239,5241],{"class":631,"line":2626},[629,5238,724],{"class":634},[629,5240,742],{"class":638},[629,5242,661],{"class":634},[606,5244,5245,5246,3055,5249,5251,5252,5254,5255,5257],{},"The mesh's ",[610,5247,5248],{},"geometry",[610,5250,5192],{}," come from the loaded model; the\n",[610,5253,2202],{}," lives inside a regular ",[610,5256,2302],{}," with a clean scene-graph\nparent.",[3191,5259,5260],{},[606,5261,5262,5263,5265,5266,5269,5270,5273,5274,5277],{},"A saved decal's ",[610,5264,4122],{}," is stored in ",[1661,5267,5268],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1661,5271,5272],{},"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. ",[610,5275,5276],{},"\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.",[496,5279,5281],{"id":5280},"json-schema","JSON schema",[606,5283,5284,5285,5287,5288,5291,5292,5294,5295,1138],{},"Each entry in the ",[610,5286,3010],{}," array follows the ",[610,5289,5290],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[610,5293,2217],{}," groups these by mesh name as\n",[610,5296,5297],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5299,5300,5301,5302,5306],"details",{},"\n ",[5303,5304,5305],"summary",{},"Full schema",[618,5307,5309],{"className":1178,"code":5308,"language":656,"meta":568,"style":568},"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",[610,5310,5311,5320,5333,5360,5384,5408,5420,5436,5450,5461,5473,5485,5497,5501,5505,5530],{"__ignoreMap":568},[629,5312,5313,5316,5318],{"class":631,"line":569},[629,5314,5315],{"class":642},"interface",[629,5317,3444],{"class":1192},[629,5319,1196],{"class":634},[629,5321,5322,5325,5327,5330],{"class":631,"line":570},[629,5323,5324],{"class":638}," id",[629,5326,1210],{"class":634},[629,5328,5329],{"class":1192}," string",[629,5331,5332],{"class":1201}," // stable UUID\n",[629,5334,5335,5338,5340,5342,5345,5347,5350,5352,5354,5357],{"class":631,"line":700},[629,5336,5337],{"class":638}," position",[629,5339,1210],{"class":634},[629,5341,2490],{"class":675},[629,5343,5344],{"class":1192},"number",[629,5346,679],{"class":634},[629,5348,5349],{"class":1192}," number",[629,5351,679],{"class":634},[629,5353,5349],{"class":1192},[629,5355,5356],{"class":675},"] ",[629,5358,5359],{"class":1201},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[629,5361,5362,5365,5367,5369,5371,5373,5375,5377,5379,5381],{"class":631,"line":721},[629,5363,5364],{"class":638}," orientation",[629,5366,1210],{"class":634},[629,5368,2490],{"class":675},[629,5370,5344],{"class":1192},[629,5372,679],{"class":634},[629,5374,5349],{"class":1192},[629,5376,679],{"class":634},[629,5378,5349],{"class":1192},[629,5380,5356],{"class":675},[629,5382,5383],{"class":1201},"// Euler XYZ\n",[629,5385,5386,5389,5391,5393,5395,5397,5399,5401,5403,5405],{"class":631,"line":731},[629,5387,5388],{"class":638}," size",[629,5390,1210],{"class":634},[629,5392,2490],{"class":675},[629,5394,5344],{"class":1192},[629,5396,679],{"class":634},[629,5398,5349],{"class":1192},[629,5400,679],{"class":634},[629,5402,5349],{"class":1192},[629,5404,5356],{"class":675},[629,5406,5407],{"class":1201},"// extents along X/Y; Z = projection depth\n",[629,5409,5410,5413,5415,5417],{"class":631,"line":737},[629,5411,5412],{"class":638}," zIndex",[629,5414,1210],{"class":634},[629,5416,5349],{"class":1192},[629,5418,5419],{"class":1201}," // per-mesh layer order, ≥ 0\n",[629,5421,5422,5425,5427,5429,5431,5433],{"class":631,"line":747},[629,5423,5424],{"class":638}," map",[629,5426,1210],{"class":634},[629,5428,5329],{"class":1192},[629,5430,3637],{"class":634},[629,5432,3640],{"class":1192},[629,5434,5435],{"class":1201}," // matches a texture's .name\n",[629,5437,5438,5441,5444,5447],{"class":631,"line":770},[629,5439,5440],{"class":638}," flipX",[629,5442,5443],{"class":634},"?:",[629,5445,5446],{"class":1192}," boolean",[629,5448,5449],{"class":1201}," // omitted when false\n",[629,5451,5452,5455,5457,5459],{"class":631,"line":782},[629,5453,5454],{"class":638}," flipY",[629,5456,5443],{"class":634},[629,5458,5446],{"class":1192},[629,5460,5449],{"class":1201},[629,5462,5463,5466,5468,5470],{"class":631,"line":792},[629,5464,5465],{"class":638}," color",[629,5467,5443],{"class":634},[629,5469,5329],{"class":1192},[629,5471,5472],{"class":1201}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[629,5474,5475,5478,5480,5482],{"class":631,"line":797},[629,5476,5477],{"class":638}," opacity",[629,5479,5443],{"class":634},[629,5481,5349],{"class":1192},[629,5483,5484],{"class":1201}," // 0..1, omitted when 1\n",[629,5486,5487,5490,5492,5494],{"class":631,"line":819},[629,5488,5489],{"class":638}," visible",[629,5491,5443],{"class":634},[629,5493,5446],{"class":1192},[629,5495,5496],{"class":1201}," // omitted when true; false hides the decal\n",[629,5498,5499],{"class":631,"line":623},[629,5500,1317],{"class":634},[629,5502,5503],{"class":631,"line":842},[629,5504,734],{"emptyLinePlaceholder":586},[629,5506,5507,5510,5513,5515,5518,5520,5522,5524,5526,5528],{"class":631,"line":853},[629,5508,5509],{"class":642},"type",[629,5511,5512],{"class":1192}," DecalLayout",[629,5514,2423],{"class":634},[629,5516,5517],{"class":1192}," Record",[629,5519,635],{"class":634},[629,5521,3564],{"class":1192},[629,5523,679],{"class":634},[629,5525,3444],{"class":1192},[629,5527,3571],{"class":675},[629,5529,661],{"class":634},[629,5531,5532],{"class":631,"line":864},[629,5533,5534],{"class":1201},"// { sphere: [...], cube: [...] }\n",[496,5536,5538,5540],{"id":5537},"decal-props",[610,5539,2202],{}," props",[919,5542,5543,5553],{},[922,5544,5545],{},[925,5546,5547,5549,5551],{},[928,5548,930],{},[928,5550,933],{},[928,5552,936],{},[938,5554,5555,5571,5591,5628,5646,5660,5674,5694,5722],{},[925,5556,5557,5561,5567],{},[943,5558,5559],{},[1661,5560,3010],{},[943,5562,5563,5564,5566],{},"Two-way list of stamped decals (use with ",[610,5565,2262],{},").",[943,5568,5569],{},[610,5570,3571],{},[925,5572,5573,5577,5587],{},[943,5574,5575],{},[1661,5576,2973],{},[943,5578,5579,5580,5582,5583,5586],{},"A single ",[610,5581,2241],{}," or array of ",[610,5584,5585],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[943,5588,5589],{},[610,5590,3648],{},[925,5592,5593,5598,5624],{},[943,5594,5595],{},[1661,5596,5597],{},"mesh",[943,5599,5600,5601,5603,5604,5607,5608,5610,5611,5614,5615,3328,5617,3328,5620,5623],{},"Optional explicit target mesh (",[610,5602,4284],{}," or ",[610,5605,5606],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[610,5609,2202],{}," is auto-resolved via a hidden anchor ",[610,5612,5613],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[610,5616,4122],{},[610,5618,5619],{},"rotation",[610,5621,5622],{},"scale"," via the scene-graph hierarchy.",[943,5625,5626],{},[610,5627,3648],{},[925,5629,5630,5634,5642],{},[943,5631,5632],{},[1661,5633,3178],{},[943,5635,4292,5636,5638,5639,5641],{},[610,5637,953],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[610,5640,2217],{}," interactions to work on this Decal.",[943,5643,5644],{},[610,5645,963],{},[925,5647,5648,5653,5656],{},[943,5649,5650],{},[1661,5651,5652],{},"baseSize",[943,5654,5655],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[943,5657,5658],{},[610,5659,1866],{},[925,5661,5662,5667,5670],{},[943,5663,5664],{},[1661,5665,5666],{},"baseOffset",[943,5668,5669],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[943,5671,5672],{},[610,5673,1878],{},[925,5675,5676,5680,5689],{},[943,5677,5678],{},[1661,5679,3088],{},[943,5681,5682,5683,5685,5686,5688],{},"Extra offset added per ",[610,5684,2284],{}," step on top of ",[610,5687,5666],{},". Increase if stacked decals still flicker.",[943,5690,5691],{},[610,5692,5693],{},"0.001",[925,5695,5696,5701,5717],{},[943,5697,5698],{},[1661,5699,5700],{},"cullThreshold",[943,5702,5703,5704,5707,5708,5713,5714,5716],{},"Drops projected triangles whose face normal makes an angle steeper than ",[610,5705,5706],{},"acos(threshold)"," with the projector. Mitigates ",[1132,5709,5712],{"href":5710,"rel":5711},"https://github.com/mrdoob/three.js/issues/21187",[1136],"#21187",". Pass ",[610,5715,957],{}," to disable.",[943,5718,5719],{},[610,5720,5721],{},"0.2",[925,5723,5724,5729,5732],{},[943,5725,5726],{},[1661,5727,5728],{},"edgeColor",[943,5730,5731],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[943,5733,5734],{},[610,5735,5736],{},"#0000ff",[496,5738,5740,5742],{"id":5739},"decal-events",[610,5741,2202],{}," events",[919,5744,5745,5757],{},[922,5746,5747],{},[925,5748,5749,5752,5755],{},[928,5750,5751],{},"Event",[928,5753,5754],{},"Payload",[928,5756,933],{},[938,5758,5759,5774,5789,5803,5823,5841,5858],{},[925,5760,5761,5766,5771],{},[943,5762,5763],{},[610,5764,5765],{},"update:data",[943,5767,5768],{},[610,5769,5770],{},"DecalJsonEntry[]",[943,5772,5773],{},"v-model partner — fires whenever the JSON list changes.",[925,5775,5776,5781,5786],{},[943,5777,5778],{},[610,5779,5780],{},"add",[943,5782,5783],{},[610,5784,5785],{},"DecalEntry",[943,5787,5788],{},"A new decal has been committed (create mode → confirm).",[925,5790,5791,5796,5800],{},[943,5792,5793],{},[610,5794,5795],{},"update",[943,5797,5798],{},[610,5799,5785],{},[943,5801,5802],{},"An existing decal has been committed (update mode → confirm).",[925,5804,5805,5810,5814],{},[943,5806,5807],{},[610,5808,5809],{},"delete",[943,5811,5812],{},[610,5813,5785],{},[943,5815,5816,5817,3328,5820,5566],{},"A decal has been removed (delete button or ",[610,5818,5819],{},"Del",[610,5821,5822],{},"Backspace",[925,5824,5825,5830,5834],{},[943,5826,5827],{},[610,5828,5829],{},"select",[943,5831,5832],{},[610,5833,5785],{},[943,5835,5836,5837,5840],{},"Edition began on ",[610,5838,5839],{},"entry"," (panel click, 3D click, or programmatic).",[925,5842,5843,5848,5851],{},[943,5844,5845],{},[610,5846,5847],{},"cancel",[943,5849,5850],{},"—",[943,5852,5853,5854,5857],{},"Edition was aborted without commit (",[610,5855,5856],{},"Esc",", click-outside in create mode).",[925,5859,5860,5865,5870],{},[943,5861,5862],{},[610,5863,5864],{},"decalClick",[943,5866,5867],{},[610,5868,5869],{},"{ entry: DecalEntry, event: MouseEvent }",[943,5871,5872,5873,5875,5876,1138],{},"Fires on click of any stamped decal, even when ",[610,5874,3178],{}," is ",[610,5877,963],{},[496,5879,5881,5883,5884,3332],{"id":5880},"decal-exposed-via-ref",[610,5882,2202],{}," exposed (via ",[610,5885,5886],{},"ref",[606,5888,5889,5890,5893],{},"The template ref resolves to ",[610,5891,5892],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[618,5895,5897],{"className":1178,"code":5896,"language":656,"meta":568,"style":568},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[610,5898,5899,5920,5924],{"__ignoreMap":568},[629,5900,5901,5903,5905,5907,5910,5912,5914,5916,5918],{"class":631,"line":569},[629,5902,669],{"class":668},[629,5904,3434],{"class":668},[629,5906,672],{"class":634},[629,5908,5909],{"class":675}," DecalImperativeApi",[629,5911,685],{"class":634},[629,5913,688],{"class":668},[629,5915,691],{"class":634},[629,5917,694],{"class":655},[629,5919,697],{"class":634},[629,5921,5922],{"class":631,"line":570},[629,5923,734],{"emptyLinePlaceholder":586},[629,5925,5926,5928,5930,5932,5934,5936,5938,5940,5942,5944,5946,5948],{"class":631,"line":700},[629,5927,2407],{"class":642},[629,5929,3618],{"class":675},[629,5931,649],{"class":634},[629,5933,3864],{"class":2426},[629,5935,635],{"class":634},[629,5937,5892],{"class":1192},[629,5939,3637],{"class":634},[629,5941,3640],{"class":1192},[629,5943,3643],{"class":634},[629,5945,2429],{"class":675},[629,5947,3648],{"class":634},[629,5949,2440],{"class":675},[919,5951,5952,5964],{},[922,5953,5954],{},[925,5955,5956,5959,5962],{},[928,5957,5958],{},"Property",[928,5960,5961],{},"Type",[928,5963,933],{},[938,5965,5966,5984,6002,6020,6035],{},[925,5967,5968,5973,5978],{},[943,5969,5970],{},[610,5971,5972],{},"editor",[943,5974,5975],{},[610,5976,5977],{},"DecalEditorSession",[943,5979,5980,5981,1138],{},"The canvas-shared editor session. Pass it to ",[610,5982,5983],{},"\u003CDecalDebugUI :session>",[925,5985,5986,5991,5996],{},[943,5987,5988],{},[610,5989,5990],{},"beginEditById",[943,5992,5993],{},[610,5994,5995],{},"(id: string) => boolean",[943,5997,5998,5999,6001],{},"Programmatically start editing a specific decal. Returns ",[610,6000,963],{}," if the id is unknown.",[925,6003,6004,6009,6014],{},[943,6005,6006],{},[610,6007,6008],{},"commit",[943,6010,6011],{},[610,6012,6013],{},"() => void",[943,6015,6016,6017,5566],{},"Commit the in-flight edit (same as ",[610,6018,6019],{},"Enter",[925,6021,6022,6026,6030],{},[943,6023,6024],{},[610,6025,5847],{},[943,6027,6028],{},[610,6029,6013],{},[943,6031,6032,6033,5566],{},"Abort the in-flight edit (same as ",[610,6034,5856],{},[925,6036,6037,6042,6046],{},[943,6038,6039],{},[610,6040,6041],{},"remove",[943,6043,6044],{},[610,6045,6013],{},[943,6047,6048,6049,5566],{},"Delete the currently edited decal (same as ",[610,6050,5819],{},[496,6052,6054,5540],{"id":6053},"decaldebugui-props",[610,6055,2217],{},[919,6057,6058,6068],{},[922,6059,6060],{},[925,6061,6062,6064,6066],{},[928,6063,930],{},[928,6065,933],{},[928,6067,936],{},[938,6069,6070,6093,6118,6131,6151,6166,6189],{},[925,6071,6072,6076,6089],{},[943,6073,6074],{},[1661,6075,3727],{},[943,6077,6078,6081,6082,6084,6085,6088],{},[610,6079,6080],{},"DecalEditorSession | null"," — obtained from any ",[610,6083,2202],{}," ref via ",[610,6086,6087],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[943,6090,6091],{},[610,6092,3648],{},[925,6094,6095,6099,6113],{},[943,6096,6097],{},[1661,6098,3010],{},[943,6100,6101,6102,6105,6106,6109,6110,6112],{},"Mesh-name-keyed map of decal slices — ",[610,6103,6104],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[610,6107,6108],{},"\u003CTresMesh name=\"...\">"," whose child ",[610,6111,2202],{}," owns the slice.",[943,6114,6115],{},[610,6116,6117],{},"{}",[925,6119,6120,6124,6127],{},[943,6121,6122],{},[1661,6123,2945],{},[943,6125,6126],{},"The full texture palette shown in the dock's picker.",[943,6128,6129],{},[610,6130,3571],{},[925,6132,6133,6138,6147],{},[943,6134,6135],{},[1661,6136,6137],{},"theme",[943,6139,6140,5603,6143,6146],{},[610,6141,6142],{},"'light'",[610,6144,6145],{},"'dark'"," — overlay theme tokens.",[943,6148,6149],{},[610,6150,6142],{},[925,6152,6153,6158,6161],{},[943,6154,6155],{},[1661,6156,6157],{},"snapAngle",[943,6159,6160],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[943,6162,6163],{},[610,6164,6165],{},"15",[925,6167,6168,6173,6185],{},[943,6169,6170],{},[1661,6171,6172],{},"exportFilename",[943,6174,6175,6176,5713,6178,6180,6181,6184],{},"Filename for the built-in JSON download. When omitted, defaults to ",[610,6177,4171],{},[610,6179,3648],{}," to skip the auto-download (the ",[610,6182,6183],{},"@export"," event still fires).",[943,6186,6187],{},[610,6188,4171],{},[925,6190,6191,6195,6198],{},[943,6192,6193],{},[1661,6194,4098],{},[943,6196,6197],{},"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.",[943,6199,6200],{},[610,6201,963],{},[496,6203,6205,5742],{"id":6204},"decaldebugui-events",[610,6206,2217],{},[919,6208,6209,6219],{},[922,6210,6211],{},[925,6212,6213,6215,6217],{},[928,6214,5751],{},[928,6216,5754],{},[928,6218,933],{},[938,6220,6221,6235],{},[925,6222,6223,6227,6232],{},[943,6224,6225],{},[610,6226,1186],{},[943,6228,6229],{},[610,6230,6231],{},"DecalLayout",[943,6233,6234],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[925,6236,6237,6241,6245],{},[943,6238,6239],{},[610,6240,669],{},[943,6242,6243],{},[610,6244,6231],{},[943,6246,6247],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[496,6249,6251],{"id":6250},"caveats","Caveats",[2205,6253,6254,6269,6286,6302],{},[2208,6255,6256,6257,6260,6261,6264,6265,6268],{},"✨ The overlay sits at ",[610,6258,6259],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1661,6262,6263],{},"above"," the canvas by default\n(",[610,6266,6267],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2208,6270,6271,6272,6274,6275,6278,6279,1664,6282,6285],{},"🎨 ",[610,6273,2217],{}," ships its own theme in a global stylesheet under the\n",[610,6276,6277],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[610,6280,6281],{},"--accent",[610,6283,6284],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2208,6287,6288,6289,6292,6293,6295,6296,6298,6299,6301],{},"🔶 Decals are ",[1661,6290,6291],{},"per-canvas"," — if you have multiple ",[610,6294,3189],{}," in your\napp, each one has its own independent session. Pair each ",[610,6297,2217],{},"\nwith the right ",[610,6300,3727],{}," (from one of the Decals inside that canvas).",[2208,6303,6304,6305,1138],{},"🧩 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 ",[610,6306,6307],{},":mesh=\"meshRef\"",[496,6309,6311],{"id":6310},"limitations","Limitations",[1997,6313,6314,6328,6335,6378],{},[606,6315,6316,6317,6320,6321,3328,6323,3328,6325,6327],{},"Decal vertices are baked into the ",[1661,6318,6319],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[610,6322,4122],{},[610,6324,5619],{},[610,6326,5622],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[606,6329,6330,6331,6334],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1661,6332,6333],{},"not"," followed:",[2205,6336,6337,6350,6358,6365],{},[2208,6338,6339,6344,6345,1138],{},[1661,6340,6341],{},[610,6342,6343],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1132,6346,6349],{"href":6347,"rel":6348},"https://github.com/mrdoob/three.js/issues/7926",[1136],"three.js#7926",[2208,6351,6352,6357],{},[1661,6353,6354],{},[610,6355,6356],{},"morphAttributes"," on the parent are ignored.",[2208,6359,6360,6361,6364],{},"Direct mutations of the parent's ",[610,6362,6363],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2208,6366,6367,6368,6372,6373,6375,6376,1138],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1132,6369,6371],{"href":5710,"rel":6370},[1136],"three.js#21187",") —\nmitigated by the ",[610,6374,5700],{}," prop, default ",[610,6377,5721],{},[606,6379,6380,6382],{},[610,6381,2202],{}," warns once per parent mesh when it detects these conditions.",[496,6384,6386],{"id":6385},"keyboard-shortcuts","Keyboard shortcuts",[919,6388,6389,6399],{},[922,6390,6391],{},[925,6392,6393,6396],{},[928,6394,6395],{},"Shortcut",[928,6397,6398],{},"Action",[938,6400,6401,6410,6419,6431,6444,6457],{},[925,6402,6403,6407],{},[943,6404,6405],{},[610,6406,6019],{},[943,6408,6409],{},"Confirm the in-flight edit",[925,6411,6412,6416],{},[943,6413,6414],{},[610,6415,5856],{},[943,6417,6418],{},"Cancel (revert updates, drop pending placements)",[925,6420,6421,6428],{},[943,6422,6423,3328,6425],{},[610,6424,5819],{},[610,6426,6427],{},"⌫",[943,6429,6430],{},"Delete the edited decal (or cancel a create)",[925,6432,6433,6441],{},[943,6434,6435,3328,6438],{},[610,6436,6437],{},"⌘Z",[610,6439,6440],{},"Ctrl+Z",[943,6442,6443],{},"Undo",[925,6445,6446,6454],{},[943,6447,6448,3328,6451],{},[610,6449,6450],{},"⇧⌘Z",[610,6452,6453],{},"Ctrl+⇧Z",[943,6455,6456],{},"Redo",[925,6458,6459,6462],{},[943,6460,6461],{},"Click outside",[943,6463,6464],{},"Auto-commit an in-flight update; cancel a create",[496,6466,6468,6469,3332],{"id":6467},"programmatic-api-usedecaleditor","Programmatic API (",[610,6470,6471],{},"useDecalEditor",[606,6473,6474,6475,6477,6478,6480,6481,6483,6484,6486],{},"Skip ",[610,6476,2217],{}," entirely or augment it with custom panels —\n",[610,6479,2230],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[610,6482,3189],{}," (after at\nleast one ",[610,6485,2202],{}," has mounted).",[618,6488,6490],{"className":1178,"code":6489,"language":656,"meta":568,"style":568},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[610,6491,6492,6511,6515],{"__ignoreMap":568},[629,6493,6494,6496,6498,6501,6503,6505,6507,6509],{"class":631,"line":569},[629,6495,669],{"class":668},[629,6497,672],{"class":634},[629,6499,6500],{"class":675}," useDecalEditor",[629,6502,685],{"class":634},[629,6504,688],{"class":668},[629,6506,691],{"class":634},[629,6508,694],{"class":655},[629,6510,697],{"class":634},[629,6512,6513],{"class":631,"line":570},[629,6514,734],{"emptyLinePlaceholder":586},[629,6516,6517,6519,6521,6523,6525],{"class":631,"line":700},[629,6518,2407],{"class":642},[629,6520,3657],{"class":675},[629,6522,649],{"class":634},[629,6524,6500],{"class":2426},[629,6526,6527],{"class":675},"()\n",[606,6529,6530,6531,1664,6534,2480,6537,1664,6540,6543,6544,2480,6546,1664,6549,1664,6552,6555,6556,6559,6560,6563,6564,1664,6567,1664,6570,2480,6573,6576],{},"The session exposes reactive state (",[610,6532,6533],{},"editingEntry",[610,6535,6536],{},"editingMode",[610,6538,6539],{},"canUndo",[610,6541,6542],{},"canRedo",", …), by-id mutators (",[610,6545,5990],{},[610,6547,6548],{},"setZIndexById",[610,6550,6551],{},"setVisibilityById",[610,6553,6554],{},"removeById","), batched updates\n(",[610,6557,6558],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[610,6561,6562],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[610,6565,6566],{},"ensureTextureNames",[610,6568,6569],{},"getTextureName",[610,6571,6572],{},"getTextureAspect",[610,6574,6575],{},"invalidateDecalGeometry",") are exported alongside.",[5299,6578,5301,6579,6582,6586,6661,6665,6736,6752,6756,6792,6798,6802,6941,6945,6991,6994,6998,7012,7182,7186],{},[5303,6580,6581],{},"Full API reference",[4043,6583,6585],{"id":6584},"reactive-state","Reactive state",[618,6587,6589],{"className":1178,"code":6588,"language":656,"meta":568,"style":568},"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",[610,6590,6591,6603,6615,6627,6638,6650],{"__ignoreMap":568},[629,6592,6593,6595,6597,6600],{"class":631,"line":569},[629,6594,3727],{"class":675},[629,6596,1138],{"class":634},[629,6598,6599],{"class":675},"editingEntry ",[629,6601,6602],{"class":1201},"// ShallowRef\u003CDecalEntry | null>\n",[629,6604,6605,6607,6609,6612],{"class":631,"line":570},[629,6606,3727],{"class":675},[629,6608,1138],{"class":634},[629,6610,6611],{"class":675},"editingMode ",[629,6613,6614],{"class":1201},"// Ref\u003C'create' | 'update' | null>\n",[629,6616,6617,6619,6621,6624],{"class":631,"line":700},[629,6618,3727],{"class":675},[629,6620,1138],{"class":634},[629,6622,6623],{"class":675},"lockedMeshUuid ",[629,6625,6626],{"class":1201},"// Ref\u003Cstring | null>\n",[629,6628,6629,6631,6633,6636],{"class":631,"line":721},[629,6630,3727],{"class":675},[629,6632,1138],{"class":634},[629,6634,6635],{"class":675},"hoveredEntry ",[629,6637,6602],{"class":1201},[629,6639,6640,6642,6644,6647],{"class":631,"line":731},[629,6641,3727],{"class":675},[629,6643,1138],{"class":634},[629,6645,6646],{"class":675},"canUndo ",[629,6648,6649],{"class":1201},"// Ref\u003Cboolean>\n",[629,6651,6652,6654,6656,6659],{"class":631,"line":737},[629,6653,3727],{"class":675},[629,6655,1138],{"class":634},[629,6657,6658],{"class":675},"canRedo ",[629,6660,6649],{"class":1201},[4043,6662,6664],{"id":6663},"mutating-decals-by-id","Mutating decals by id",[618,6666,6668],{"className":1178,"code":6667,"language":656,"meta":568,"style":568},"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",[610,6669,6670,6684,6703,6723],{"__ignoreMap":568},[629,6671,6672,6674,6676,6678,6681],{"class":631,"line":569},[629,6673,3727],{"class":675},[629,6675,1138],{"class":634},[629,6677,5990],{"class":2426},[629,6679,6680],{"class":675},"(id) ",[629,6682,6683],{"class":1201},"// start editing a placed decal\n",[629,6685,6686,6688,6690,6692,6695,6697,6700],{"class":631,"line":570},[629,6687,3727],{"class":675},[629,6689,1138],{"class":634},[629,6691,6548],{"class":2426},[629,6693,6694],{"class":675},"(id",[629,6696,679],{"class":634},[629,6698,6699],{"class":675}," newZ) ",[629,6701,6702],{"class":1201},"// reorder one decal\n",[629,6704,6705,6707,6709,6711,6713,6715,6718,6720],{"class":631,"line":700},[629,6706,3727],{"class":675},[629,6708,1138],{"class":634},[629,6710,6551],{"class":2426},[629,6712,6694],{"class":675},[629,6714,679],{"class":634},[629,6716,6717],{"class":4389}," false",[629,6719,4726],{"class":675},[629,6721,6722],{"class":1201},"// hide / show\n",[629,6724,6725,6727,6729,6731,6733],{"class":631,"line":721},[629,6726,3727],{"class":675},[629,6728,1138],{"class":634},[629,6730,6554],{"class":2426},[629,6732,6680],{"class":675},[629,6734,6735],{"class":1201},"// delete\n",[606,6737,6738,6739,6742,6743,6745,6746,6748,6749,6751],{},"When the targeted id matches the ",[1661,6740,6741],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[610,6744,6019],{},", reverted on ",[610,6747,5856],{},").\nOtherwise they update ",[610,6750,3010],{}," immediately and record history.",[4043,6753,6755],{"id":6754},"batched-mesh-updates","Batched mesh updates",[618,6757,6759],{"className":1178,"code":6758,"language":656,"meta":568,"style":568},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[610,6760,6761],{"__ignoreMap":568},[629,6762,6763,6765,6767,6769,6772,6774,6777,6779,6781,6784,6786,6788,6790],{"class":631,"line":569},[629,6764,3727],{"class":675},[629,6766,1138],{"class":634},[629,6768,6558],{"class":2426},[629,6770,6771],{"class":675},"(meshName",[629,6773,679],{"class":634},[629,6775,6776],{"class":675}," nextEntries",[629,6778,679],{"class":634},[629,6780,672],{"class":634},[629,6782,6783],{"class":638}," recordHistory",[629,6785,1210],{"class":634},[629,6787,4390],{"class":4389},[629,6789,685],{"class":634},[629,6791,2440],{"class":675},[606,6793,6794,6795,6797],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[610,6796,6548],{}," calls in the same tick.",[4043,6799,6801],{"id":6800},"listening-to-commits","Listening to commits",[618,6803,6805],{"className":1178,"code":6804,"language":656,"meta":568,"style":568},"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",[610,6806,6807,6842,6867,6873,6901,6924,6928,6933],{"__ignoreMap":568},[629,6808,6809,6811,6814,6816,6819,6821,6824,6826,6828,6831,6833,6836,6838,6840],{"class":631,"line":569},[629,6810,2407],{"class":642},[629,6812,6813],{"class":675}," off ",[629,6815,649],{"class":634},[629,6817,6818],{"class":675}," session",[629,6820,1138],{"class":634},[629,6822,6823],{"class":2426},"onCommit",[629,6825,2429],{"class":675},[629,6827,2429],{"class":634},[629,6829,5839],{"class":6830},"sHdIc",[629,6832,679],{"class":634},[629,6834,6835],{"class":6830}," mode",[629,6837,3332],{"class":634},[629,6839,3669],{"class":642},[629,6841,1196],{"class":634},[629,6843,6844,6847,6849,6852,6854,6857,6859,6862,6864],{"class":631,"line":570},[629,6845,6846],{"class":675}," console",[629,6848,1138],{"class":634},[629,6850,6851],{"class":2426},"log",[629,6853,2429],{"class":638},[629,6855,6856],{"class":675},"mode",[629,6858,679],{"class":634},[629,6860,6861],{"class":675}," entry",[629,6863,4726],{"class":638},[629,6865,6866],{"class":1201},"// mode: 'create' | 'update'\n",[629,6868,6869,6871],{"class":631,"line":700},[629,6870,2420],{"class":634},[629,6872,2440],{"class":675},[629,6874,6875,6877,6879,6882,6884,6886,6888,6890,6892,6894,6897,6899],{"class":631,"line":721},[629,6876,3727],{"class":675},[629,6878,1138],{"class":634},[629,6880,6881],{"class":2426},"onDelete",[629,6883,2429],{"class":675},[629,6885,2429],{"class":634},[629,6887,5839],{"class":6830},[629,6889,3332],{"class":634},[629,6891,3669],{"class":642},[629,6893,672],{"class":634},[629,6895,6896],{"class":1201}," /* … */",[629,6898,685],{"class":634},[629,6900,2440],{"class":675},[629,6902,6903,6905,6907,6910,6912,6914,6916,6918,6920,6922],{"class":631,"line":731},[629,6904,3727],{"class":675},[629,6906,1138],{"class":634},[629,6908,6909],{"class":2426},"onCancel",[629,6911,2429],{"class":675},[629,6913,3666],{"class":634},[629,6915,3669],{"class":642},[629,6917,672],{"class":634},[629,6919,6896],{"class":1201},[629,6921,685],{"class":634},[629,6923,2440],{"class":675},[629,6925,6926],{"class":631,"line":737},[629,6927,734],{"emptyLinePlaceholder":586},[629,6929,6930],{"class":631,"line":747},[629,6931,6932],{"class":1201},"// All return an unsubscribe function:\n",[629,6934,6935,6938],{"class":631,"line":770},[629,6936,6937],{"class":2426},"onBeforeUnmount",[629,6939,6940],{"class":675},"(off)\n",[4043,6942,6944],{"id":6943},"undo-redo","Undo / redo",[618,6946,6948],{"className":1178,"code":6947,"language":656,"meta":568,"style":568},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[610,6949,6950,6965,6980],{"__ignoreMap":568},[629,6951,6952,6954,6956,6958,6960,6963],{"class":631,"line":569},[629,6953,3727],{"class":675},[629,6955,1138],{"class":634},[629,6957,6539],{"class":675},[629,6959,1138],{"class":634},[629,6961,6962],{"class":675},"value ",[629,6964,6649],{"class":1201},[629,6966,6967,6969,6971,6974,6977],{"class":631,"line":570},[629,6968,3727],{"class":675},[629,6970,1138],{"class":634},[629,6972,6973],{"class":2426},"undo",[629,6975,6976],{"class":675},"() ",[629,6978,6979],{"class":1201},"// returns true if something was undone\n",[629,6981,6982,6984,6986,6989],{"class":631,"line":700},[629,6983,3727],{"class":675},[629,6985,1138],{"class":634},[629,6987,6988],{"class":2426},"redo",[629,6990,6527],{"class":675},[606,6992,6993],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4043,6995,6997],{"id":6996},"power-user-external-entries","Power user — external entries",[606,6999,7000,7001,7003,7004,7007,7008,7011],{},"Plug a decal-like object that lives outside a ",[610,7002,2202],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[610,7005,7006],{},"DecalEntryActions"," bundle so the ",[610,7009,7010],{},"*ById"," session methods route to it:",[618,7013,7015],{"className":1178,"code":7014,"language":656,"meta":568,"style":568},"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",[610,7016,7017,7038,7042,7063,7082,7104,7126,7143,7154],{"__ignoreMap":568},[629,7018,7019,7021,7023,7025,7028,7030,7032,7034,7036],{"class":631,"line":569},[629,7020,669],{"class":668},[629,7022,3434],{"class":668},[629,7024,672],{"class":634},[629,7026,7027],{"class":675}," DecalEntryActions",[629,7029,685],{"class":634},[629,7031,688],{"class":668},[629,7033,691],{"class":634},[629,7035,694],{"class":655},[629,7037,697],{"class":634},[629,7039,7040],{"class":631,"line":570},[629,7041,734],{"emptyLinePlaceholder":586},[629,7043,7044,7046,7048,7050,7052,7054,7057,7059,7061],{"class":631,"line":700},[629,7045,3727],{"class":675},[629,7047,1138],{"class":634},[629,7049,6562],{"class":2426},[629,7051,2429],{"class":675},[629,7053,2432],{"class":634},[629,7055,7056],{"class":655},"decal-7",[629,7058,2432],{"class":634},[629,7060,679],{"class":634},[629,7062,1196],{"class":634},[629,7064,7065,7068,7070,7073,7075,7077,7079],{"class":631,"line":721},[629,7066,7067],{"class":2426}," beginEdit",[629,7069,1210],{"class":634},[629,7071,7072],{"class":634}," ()",[629,7074,3669],{"class":642},[629,7076,672],{"class":634},[629,7078,6896],{"class":1201},[629,7080,7081],{"class":634}," },\n",[629,7083,7084,7087,7089,7091,7094,7096,7098,7100,7102],{"class":631,"line":731},[629,7085,7086],{"class":2426}," setZIndex",[629,7088,1210],{"class":634},[629,7090,3066],{"class":634},[629,7092,7093],{"class":6830},"newZ",[629,7095,3332],{"class":634},[629,7097,3669],{"class":642},[629,7099,672],{"class":634},[629,7101,6896],{"class":1201},[629,7103,7081],{"class":634},[629,7105,7106,7109,7111,7113,7116,7118,7120,7122,7124],{"class":631,"line":737},[629,7107,7108],{"class":2426}," setVisibility",[629,7110,1210],{"class":634},[629,7112,3066],{"class":634},[629,7114,7115],{"class":6830},"visible",[629,7117,3332],{"class":634},[629,7119,3669],{"class":642},[629,7121,672],{"class":634},[629,7123,6896],{"class":1201},[629,7125,7081],{"class":634},[629,7127,7128,7131,7133,7135,7137,7139,7141],{"class":631,"line":747},[629,7129,7130],{"class":2426}," remove",[629,7132,1210],{"class":634},[629,7134,7072],{"class":634},[629,7136,3669],{"class":642},[629,7138,672],{"class":634},[629,7140,6896],{"class":1201},[629,7142,7081],{"class":634},[629,7144,7145,7147,7150,7152],{"class":631,"line":770},[629,7146,2420],{"class":634},[629,7148,7149],{"class":668}," satisfies",[629,7151,7027],{"class":1192},[629,7153,2440],{"class":675},[629,7155,7156,7158,7160,7162,7164,7166,7168,7171,7173,7175,7177,7179],{"class":631,"line":782},[629,7157,6937],{"class":2426},[629,7159,2429],{"class":675},[629,7161,3666],{"class":634},[629,7163,3669],{"class":642},[629,7165,6818],{"class":675},[629,7167,1138],{"class":634},[629,7169,7170],{"class":2426},"unregisterDecalEntry",[629,7172,2429],{"class":675},[629,7174,2432],{"class":634},[629,7176,7056],{"class":655},[629,7178,2432],{"class":634},[629,7180,7181],{"class":675},"))\n",[4043,7183,7185],{"id":7184},"helper-utilities","Helper utilities",[919,7187,7188,7197],{},[922,7189,7190],{},[925,7191,7192,7194],{},[928,7193,307],{},[928,7195,7196],{},"Use",[938,7198,7199,7219,7231,7244],{},[925,7200,7201,7206],{},[943,7202,7203],{},[610,7204,7205],{},"ensureTextureNames(textures)",[943,7207,7208,7209,7211,7212,7215,7216,1138],{},"Back-fills ",[610,7210,2969],{}," from ",[610,7213,7214],{},"userData.name"," or the filename in ",[610,7217,7218],{},"image.src",[925,7220,7221,7226],{},[943,7222,7223],{},[610,7224,7225],{},"getTextureName(texture)",[943,7227,7228,7229,1138],{},"Single-texture variant — returns a stable name or ",[610,7230,3648],{},[925,7232,7233,7238],{},[943,7234,7235],{},[610,7236,7237],{},"getTextureAspect(texture)",[943,7239,7240,7243],{},[610,7241,7242],{},"{ x, y }"," aspect ratio for custom-sized decals.",[925,7245,7246,7251],{},[943,7247,7248],{},[610,7249,7250],{},"invalidateDecalGeometry(mesh)",[943,7252,7253],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1319,7255,7256],{},"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":568,"searchDepth":569,"depth":570,"links":7258},[7259,7260,7261,7262,7263,7267,7268,7276,7277,7279,7281,7283,7285,7287,7288,7289,7290],{"id":616,"depth":570,"text":15},{"id":2782,"depth":570,"text":2783},{"id":2977,"depth":570,"text":2251},{"id":3074,"depth":570,"text":3075},{"id":3169,"depth":570,"text":7264,"children":7265},"Editable mode + \u003CDecalDebugUI>",[7266],{"id":4045,"depth":700,"text":4046},{"id":4165,"depth":570,"text":3371},{"id":4264,"depth":570,"text":7269,"children":7270},"Targeting a loaded model (.glb)",[7271,7273,7275],{"id":4291,"depth":700,"text":7272},"When :object is a Mesh",{"id":4513,"depth":700,"text":7274},"When :object is a Group",{"id":4854,"depth":700,"text":4855},{"id":5280,"depth":570,"text":5281},{"id":5537,"depth":570,"text":7278},"\u003CDecal> props",{"id":5739,"depth":570,"text":7280},"\u003CDecal> events",{"id":5880,"depth":570,"text":7282},"\u003CDecal> exposed (via ref)",{"id":6053,"depth":570,"text":7284},"\u003CDecalDebugUI> props",{"id":6204,"depth":570,"text":7286},"\u003CDecalDebugUI> events",{"id":6250,"depth":570,"text":6251},{"id":6310,"depth":570,"text":6311},{"id":6385,"depth":570,"text":6386},{"id":6467,"depth":570,"text":7291},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7292},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7297,"title":57,"body":7298,"description":7586,"extension":583,"links":584,"meta":7587,"navigation":586,"path":58,"seo":7588,"stem":59,"__hash__":7589},"docs/2.api/1.abstractions/edges.md",{"type":493,"value":7299,"toc":7582},[7300,7305,7321,7323,7500,7502,7519,7580],[600,7301,7302],{},[7303,7304],"abstractions-edges",{},[606,7306,2768,7307,7310,7311,7316,7317,7320],{},[610,7308,7309],{},"cientos"," package provides an abstraction of ",[1132,7312,7315],{"href":7313,"rel":7314},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1136],"EdgesGeometry"," from Three.js, ",[610,7318,7319],{},"\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.",[496,7322,15],{"id":616},[618,7324,7327],{"className":620,"code":7325,"highlights":7326,"language":625,"meta":568,"style":568},"\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",[700,819],[610,7328,7329,7349,7367,7395,7403,7407,7415,7423,7442,7450,7458,7467,7476,7484,7492],{"__ignoreMap":568},[629,7330,7331,7333,7335,7337,7339,7341,7343,7345,7347],{"class":631,"line":569},[629,7332,635],{"class":634},[629,7334,639],{"class":638},[629,7336,643],{"class":642},[629,7338,646],{"class":642},[629,7340,649],{"class":634},[629,7342,652],{"class":634},[629,7344,656],{"class":655},[629,7346,652],{"class":634},[629,7348,661],{"class":634},[629,7350,7351,7353,7355,7357,7359,7361,7363,7365],{"class":631,"line":570},[629,7352,669],{"class":668},[629,7354,672],{"class":634},[629,7356,707],{"class":675},[629,7358,685],{"class":634},[629,7360,688],{"class":668},[629,7362,691],{"class":634},[629,7364,716],{"class":655},[629,7366,697],{"class":634},[629,7368,7370,7372,7374,7376,7378,7381,7383,7385,7387,7389,7391,7393],{"class":7369,"line":700},[631,665],[629,7371,669],{"class":668},[629,7373,672],{"class":634},[629,7375,1389],{"class":675},[629,7377,679],{"class":634},[629,7379,7380],{"class":675}," Edges",[629,7382,679],{"class":634},[629,7384,682],{"class":675},[629,7386,685],{"class":634},[629,7388,688],{"class":668},[629,7390,691],{"class":634},[629,7392,694],{"class":655},[629,7394,697],{"class":634},[629,7396,7397,7399,7401],{"class":631,"line":721},[629,7398,724],{"class":634},[629,7400,639],{"class":638},[629,7402,661],{"class":634},[629,7404,7405],{"class":631,"line":731},[629,7406,734],{"emptyLinePlaceholder":586},[629,7408,7409,7411,7413],{"class":631,"line":737},[629,7410,635],{"class":634},[629,7412,742],{"class":638},[629,7414,661],{"class":634},[629,7416,7417,7419,7421],{"class":631,"line":747},[629,7418,750],{"class":634},[629,7420,753],{"class":638},[629,7422,661],{"class":634},[629,7424,7425,7427,7429,7431,7433,7435,7438,7440],{"class":631,"line":770},[629,7426,773],{"class":634},[629,7428,776],{"class":638},[629,7430,1477],{"class":642},[629,7432,649],{"class":634},[629,7434,652],{"class":634},[629,7436,7437],{"class":655},"[0, 2, 5]",[629,7439,652],{"class":634},[629,7441,779],{"class":634},[629,7443,7444,7446,7448],{"class":631,"line":782},[629,7445,773],{"class":634},[629,7447,787],{"class":638},[629,7449,779],{"class":634},[629,7451,7452,7454,7456],{"class":631,"line":792},[629,7453,773],{"class":634},[629,7455,209],{"class":638},[629,7457,661],{"class":634},[629,7459,7460,7462,7465],{"class":631,"line":797},[629,7461,845],{"class":634},[629,7463,7464],{"class":638},"TresMeshBasicMaterial",[629,7466,779],{"class":634},[629,7468,7470,7472,7474],{"class":7469,"line":819},[631,665],[629,7471,845],{"class":634},[629,7473,57],{"class":638},[629,7475,779],{"class":634},[629,7477,7478,7480,7482],{"class":631,"line":623},[629,7479,887],{"class":634},[629,7481,209],{"class":638},[629,7483,661],{"class":634},[629,7485,7486,7488,7490],{"class":631,"line":842},[629,7487,897],{"class":634},[629,7489,753],{"class":638},[629,7491,661],{"class":634},[629,7493,7494,7496,7498],{"class":631,"line":853},[629,7495,724],{"class":634},[629,7497,742],{"class":638},[629,7499,661],{"class":634},[496,7501,914],{"id":913},[606,7503,7504,7506,7507,7512,7513,7518],{},[610,7505,7319],{}," is based on ",[1132,7508,7511],{"href":7509,"rel":7510},"https://threejs.org/docs/#api/en/objects/LineSegments",[1136],"LineSegments"," & ",[1132,7514,7517],{"href":7515,"rel":7516},"https://threejs.org/docs/#api/en/objects/Line",[1136],"Line"," and supports all of its props.",[919,7520,7521,7531],{},[922,7522,7523],{},[925,7524,7525,7527,7529],{},[928,7526,930],{"align":989},[928,7528,933],{"align":989},[928,7530,936],{},[938,7532,7533,7564],{},[925,7534,7535,7540,7559],{},[943,7536,7537],{"align":989},[1661,7538,7539],{},"color",[943,7541,7542,7545,7546,7549,7550,2259,7555],{"align":989},[610,7543,7544],{},"THREE.Color"," — Color of the edges. ",[7547,7548],"br",{}," More informations : ",[1132,7551,7554],{"href":7552,"rel":7553},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1136],"TresColor",[1132,7556,7544],{"href":7557,"rel":7558},"https://threejs.org/docs/#api/en/math/Color",[1136],[943,7560,7561],{},[610,7562,7563],{},"#ff0000",[925,7565,7566,7571,7576],{},[943,7567,7568],{"align":989},[1661,7569,7570],{},"threshold",[943,7572,7573,7575],{"align":989},[610,7574,5344],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[943,7577,7578],{},[610,7579,1866],{},[1319,7581,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":7583},[7584,7585],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7586},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7591,"title":61,"body":7592,"description":8211,"extension":583,"links":584,"meta":8212,"navigation":586,"path":62,"seo":8213,"stem":63,"__hash__":8214},"docs/2.api/1.abstractions/fit.md",{"type":493,"value":7593,"toc":8207},[7594,7599,7605,7615,7621,7623,8071,8073,8204],[2287,7595,7596],{},[7597,7598],"abstractions-fit",{},[606,7600,7601,7604],{},[610,7602,7603],{},"\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.",[606,7606,7607,7608,7611,7612,1138],{},"Alternatively, the children can be fit into a ",[610,7609,7610],{},"Box3"," or an ",[610,7613,7614],{},"Object3D",[606,7616,7617,7618,7620],{},"Or the children can simply be resized. With ",[610,7619,7603],{}," the children are scaled relative to the center of their calculated bounding box.",[496,7622,15],{"id":616},[618,7624,7627],{"className":620,"code":7625,"highlights":7626,"language":625,"meta":568,"style":568},"\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",[570,904,2695],[610,7628,7629,7649,7673,7691,7715,7719,7738,7780,7818,7845,7850,7854,7870,7885,7893,7897,7905,7924,7942,7950,7959,7965,7979,7993,8007,8021,8026,8035,8055,8063],{"__ignoreMap":568},[629,7630,7631,7633,7635,7637,7639,7641,7643,7645,7647],{"class":631,"line":569},[629,7632,635],{"class":634},[629,7634,639],{"class":638},[629,7636,643],{"class":642},[629,7638,646],{"class":642},[629,7640,649],{"class":634},[629,7642,652],{"class":634},[629,7644,656],{"class":655},[629,7646,652],{"class":634},[629,7648,661],{"class":634},[629,7650,7652,7654,7656,7659,7661,7663,7665,7667,7669,7671],{"class":7651,"line":570},[631,665],[629,7653,669],{"class":668},[629,7655,672],{"class":634},[629,7657,7658],{"class":675}," Fit",[629,7660,679],{"class":634},[629,7662,682],{"class":675},[629,7664,685],{"class":634},[629,7666,688],{"class":668},[629,7668,691],{"class":634},[629,7670,694],{"class":655},[629,7672,697],{"class":634},[629,7674,7675,7677,7679,7681,7683,7685,7687,7689],{"class":631,"line":700},[629,7676,669],{"class":668},[629,7678,672],{"class":634},[629,7680,707],{"class":675},[629,7682,685],{"class":634},[629,7684,688],{"class":668},[629,7686,691],{"class":634},[629,7688,716],{"class":655},[629,7690,697],{"class":634},[629,7692,7693,7695,7697,7700,7702,7705,7707,7709,7711,7713],{"class":631,"line":721},[629,7694,669],{"class":668},[629,7696,672],{"class":634},[629,7698,7699],{"class":675}," BoxGeometry",[629,7701,679],{"class":634},[629,7703,7704],{"class":675}," MeshNormalMaterial",[629,7706,685],{"class":634},[629,7708,688],{"class":668},[629,7710,691],{"class":634},[629,7712,4618],{"class":655},[629,7714,697],{"class":634},[629,7716,7717],{"class":631,"line":731},[629,7718,734],{"emptyLinePlaceholder":586},[629,7720,7721,7723,7726,7728,7730,7733,7735],{"class":631,"line":737},[629,7722,2407],{"class":642},[629,7724,7725],{"class":675}," positions",[629,7727,1210],{"class":634},[629,7729,5349],{"class":1192},[629,7731,7732],{"class":675},"[][] ",[629,7734,649],{"class":634},[629,7736,7737],{"class":675}," []\n",[629,7739,7740,7743,7745,7748,7751,7753,7756,7758,7760,7763,7766,7768,7770,7773,7776,7778],{"class":631,"line":747},[629,7741,7742],{"class":668},"for",[629,7744,3066],{"class":675},[629,7746,7747],{"class":642},"let",[629,7749,7750],{"class":675}," y ",[629,7752,649],{"class":634},[629,7754,7755],{"class":2493}," 100",[629,7757,4130],{"class":634},[629,7759,7750],{"class":675},[629,7761,7762],{"class":634},"\u003C=",[629,7764,7765],{"class":2493}," 120",[629,7767,4130],{"class":634},[629,7769,7750],{"class":675},[629,7771,7772],{"class":634},"+=",[629,7774,7775],{"class":2493}," 10",[629,7777,4726],{"class":675},[629,7779,3252],{"class":634},[629,7781,7782,7785,7787,7789,7792,7794,7796,7798,7800,7803,7805,7807,7809,7812,7814,7816],{"class":631,"line":770},[629,7783,7784],{"class":668}," for",[629,7786,3066],{"class":638},[629,7788,7747],{"class":642},[629,7790,7791],{"class":675}," x",[629,7793,2423],{"class":634},[629,7795,7755],{"class":2493},[629,7797,4130],{"class":634},[629,7799,7791],{"class":675},[629,7801,7802],{"class":634}," \u003C=",[629,7804,7765],{"class":2493},[629,7806,4130],{"class":634},[629,7808,7791],{"class":675},[629,7810,7811],{"class":634}," +=",[629,7813,7775],{"class":2493},[629,7815,4726],{"class":638},[629,7817,3252],{"class":634},[629,7819,7820,7823,7825,7828,7830,7833,7835,7838,7840,7843],{"class":631,"line":782},[629,7821,7822],{"class":675}," positions",[629,7824,1138],{"class":634},[629,7826,7827],{"class":2426},"push",[629,7829,3521],{"class":638},[629,7831,7832],{"class":675},"x",[629,7834,679],{"class":634},[629,7836,7837],{"class":675}," y",[629,7839,679],{"class":634},[629,7841,7842],{"class":2493}," 9999",[629,7844,2594],{"class":638},[629,7846,7847],{"class":631,"line":792},[629,7848,7849],{"class":634}," }\n",[629,7851,7852],{"class":631,"line":797},[629,7853,1317],{"class":634},[629,7855,7856,7858,7861,7863,7866,7868],{"class":631,"line":819},[629,7857,2407],{"class":642},[629,7859,7860],{"class":675}," geom ",[629,7862,649],{"class":634},[629,7864,7865],{"class":634}," new",[629,7867,7699],{"class":2426},[629,7869,6527],{"class":675},[629,7871,7872,7874,7877,7879,7881,7883],{"class":631,"line":623},[629,7873,2407],{"class":642},[629,7875,7876],{"class":675}," mat ",[629,7878,649],{"class":634},[629,7880,7865],{"class":634},[629,7882,7704],{"class":2426},[629,7884,6527],{"class":675},[629,7886,7887,7889,7891],{"class":631,"line":842},[629,7888,724],{"class":634},[629,7890,639],{"class":638},[629,7892,661],{"class":634},[629,7894,7895],{"class":631,"line":853},[629,7896,734],{"emptyLinePlaceholder":586},[629,7898,7899,7901,7903],{"class":631,"line":864},[629,7900,635],{"class":634},[629,7902,742],{"class":638},[629,7904,661],{"class":634},[629,7906,7907,7909,7911,7913,7915,7917,7920,7922],{"class":631,"line":874},[629,7908,750],{"class":634},[629,7910,753],{"class":638},[629,7912,756],{"class":642},[629,7914,649],{"class":634},[629,7916,652],{"class":634},[629,7918,7919],{"class":655},"#4F4F4F",[629,7921,652],{"class":634},[629,7923,661],{"class":634},[629,7925,7926,7928,7930,7932,7934,7936,7938,7940],{"class":631,"line":624},[629,7927,773],{"class":634},[629,7929,776],{"class":638},[629,7931,1477],{"class":642},[629,7933,649],{"class":634},[629,7935,652],{"class":634},[629,7937,1958],{"class":655},[629,7939,652],{"class":634},[629,7941,779],{"class":634},[629,7943,7944,7946,7948],{"class":631,"line":894},[629,7945,773],{"class":634},[629,7947,787],{"class":638},[629,7949,779],{"class":634},[629,7951,7953,7955,7957],{"class":7952,"line":904},[631,665],[629,7954,773],{"class":634},[629,7956,61],{"class":638},[629,7958,661],{"class":634},[629,7960,7961,7963],{"class":631,"line":2617},[629,7962,845],{"class":634},[629,7964,5118],{"class":638},[629,7966,7967,7970,7972,7974,7977],{"class":631,"line":2626},[629,7968,7969],{"class":642}," v-for",[629,7971,649],{"class":634},[629,7973,652],{"class":634},[629,7975,7976],{"class":655},"(pos, index) in positions",[629,7978,3123],{"class":634},[629,7980,7981,7984,7986,7988,7991],{"class":631,"line":2646},[629,7982,7983],{"class":642}," :key",[629,7985,649],{"class":634},[629,7987,652],{"class":634},[629,7989,7990],{"class":655},"index",[629,7992,3123],{"class":634},[629,7994,7995,7998,8000,8002,8005],{"class":631,"line":2655},[629,7996,7997],{"class":642}," :position",[629,7999,649],{"class":634},[629,8001,652],{"class":634},[629,8003,8004],{"class":655},"pos",[629,8006,3123],{"class":634},[629,8008,8009,8012,8014,8016,8019],{"class":631,"line":2664},[629,8010,8011],{"class":642}," :args",[629,8013,649],{"class":634},[629,8015,652],{"class":634},[629,8017,8018],{"class":655},"[geom, mat]",[629,8020,3123],{"class":634},[629,8022,8023],{"class":631,"line":2673},[629,8024,8025],{"class":634}," />\n",[629,8027,8029,8031,8033],{"class":8028,"line":2695},[631,665],[629,8030,887],{"class":634},[629,8032,61],{"class":638},[629,8034,661],{"class":634},[629,8036,8037,8039,8042,8044,8046,8048,8051,8053],{"class":631,"line":2739},[629,8038,773],{"class":634},[629,8040,8041],{"class":638},"TresGridHelper",[629,8043,1951],{"class":642},[629,8045,649],{"class":634},[629,8047,652],{"class":634},[629,8049,8050],{"class":655},"[1, 1]",[629,8052,652],{"class":634},[629,8054,779],{"class":634},[629,8056,8057,8059,8061],{"class":631,"line":2748},[629,8058,897],{"class":634},[629,8060,753],{"class":638},[629,8062,661],{"class":634},[629,8064,8065,8067,8069],{"class":631,"line":2757},[629,8066,724],{"class":634},[629,8068,742],{"class":638},[629,8070,661],{"class":634},[496,8072,914],{"id":913},[919,8074,8075,8084],{},[922,8076,8077],{},[925,8078,8079,8082],{},[928,8080,8081],{"align":989},"Name",[928,8083,933],{"align":989},[938,8085,8086,8180],{},[925,8087,8088,8093],{},[943,8089,8090],{"align":989},[1661,8091,8092],{},"into",[943,8094,950,8095,8097,8098,8172,8174,8175,8177],{"align":989},[610,8096,8092],{}," is:",[2205,8099,8100,8109,8117,8125,8133,8144,8151],{},[2208,8101,8102,8103,8105,8106,8108],{},"omitted or explicitly ",[610,8104,1171],{},": position/scale children to fit into a 1 × 1 × 1 ",[610,8107,7610],{}," at world origin.",[2208,8110,8111,8113,8114,8116],{},[610,8112,3648],{},": turn off ",[610,8115,7603],{},"; reset scale/position of children.",[2208,8118,8119,8121,8122,1138],{},[610,8120,5344],{},": convert argument to ",[610,8123,8124],{},"Vector3(number, number, number)",[2208,8126,8127,8121,8130,1138],{},[610,8128,8129],{},"[number, number, number]",[610,8131,8132],{},"Vector3",[2208,8134,8135,8137,8138,8140,8141,8143],{},[610,8136,8132],{},": position/scale children to fit inside a ",[610,8139,7610],{}," of size ",[610,8142,8132],{}," at target objects' cumulative center.",[2208,8145,8146,8148,8149,1138],{},[610,8147,7610],{},": position/scale children to fit inside ",[610,8150,7610],{},[2208,8152,8153,8155,8156,8158,8159,8158,8166,8168,8169,8171],{},[610,8154,7614],{},": position/scale children to fit inside calculated ",[610,8157,7610],{},". ",[1132,8160,1130,8163],{"href":8161,"rel":8162},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1136],[610,8164,8165],{},"THREE.Box3.setFromObject",[610,8167,7603],{}," must not contain the ",[610,8170,7614],{}," and vice-versa.",[7547,8173],{},"default:",[7547,8176],{},[610,8178,8179],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[925,8181,8182,8186],{},[943,8183,8184],{"align":989},[1661,8185,1127],{},[943,8187,8188,8196,8198,8174,8200,8202],{"align":989},[1132,8189,1130,8191,8193,8194],{"href":1134,"rel":8190},[1136],[610,8192,1127],{}," argument in ",[610,8195,8165],{},[7547,8197],{},[7547,8199],{},[7547,8201],{},[610,8203,963],{},[1319,8205,8206],{},"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":568,"searchDepth":569,"depth":570,"links":8208},[8209,8210],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8211},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8216,"title":65,"body":8217,"description":8605,"extension":583,"links":584,"meta":8606,"navigation":586,"path":66,"seo":8607,"stem":67,"__hash__":8608},"docs/2.api/1.abstractions/levioso.md",{"type":493,"value":8218,"toc":8601},[8219,8224,8231,8240,8242,8526,8528,8599],[600,8220,8221],{},[8222,8223],"abstractions-levioso",{},[606,8225,8226],{},[8227,8228],"img",{"alt":8229,"src":8230},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[606,8232,2768,8233,8235,8236,8239],{},[610,8234,7309],{}," package provides a ",[610,8237,8238],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[496,8241,15],{"id":616},[618,8243,8246],{"className":620,"code":8244,"highlights":8245,"language":625,"meta":568,"style":568},"\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",[700,797,623],[610,8247,8248,8268,8290,8320,8324,8332,8336,8344,8364,8395,8403,8425,8433,8442,8461,8491,8510,8518],{"__ignoreMap":568},[629,8249,8250,8252,8254,8256,8258,8260,8262,8264,8266],{"class":631,"line":569},[629,8251,635],{"class":634},[629,8253,639],{"class":638},[629,8255,643],{"class":642},[629,8257,646],{"class":642},[629,8259,649],{"class":634},[629,8261,652],{"class":634},[629,8263,656],{"class":655},[629,8265,652],{"class":634},[629,8267,661],{"class":634},[629,8269,8270,8272,8274,8276,8278,8280,8283,8285,8287],{"class":631,"line":570},[629,8271,669],{"class":668},[629,8273,672],{"class":634},[629,8275,707],{"class":675},[629,8277,685],{"class":634},[629,8279,688],{"class":668},[629,8281,8282],{"class":634}," \"",[629,8284,716],{"class":655},[629,8286,652],{"class":634},[629,8288,8289],{"class":634},";\n",[629,8291,8293,8295,8297,8300,8302,8304,8306,8308,8310,8312,8314,8316,8318],{"class":8292,"line":700},[631,665],[629,8294,669],{"class":668},[629,8296,672],{"class":634},[629,8298,8299],{"class":675}," Levioso",[629,8301,679],{"class":634},[629,8303,682],{"class":675},[629,8305,679],{"class":634},[629,8307,1389],{"class":675},[629,8309,685],{"class":634},[629,8311,688],{"class":668},[629,8313,8282],{"class":634},[629,8315,694],{"class":655},[629,8317,652],{"class":634},[629,8319,8289],{"class":634},[629,8321,8322],{"class":631,"line":721},[629,8323,734],{"emptyLinePlaceholder":586},[629,8325,8326,8328,8330],{"class":631,"line":731},[629,8327,724],{"class":634},[629,8329,639],{"class":638},[629,8331,661],{"class":634},[629,8333,8334],{"class":631,"line":737},[629,8335,734],{"emptyLinePlaceholder":586},[629,8337,8338,8340,8342],{"class":631,"line":747},[629,8339,635],{"class":634},[629,8341,742],{"class":638},[629,8343,661],{"class":634},[629,8345,8346,8348,8350,8353,8355,8357,8360,8362],{"class":631,"line":770},[629,8347,750],{"class":634},[629,8349,753],{"class":638},[629,8351,8352],{"class":642}," :clear-color",[629,8354,649],{"class":634},[629,8356,652],{"class":634},[629,8358,8359],{"class":655},"0x82dbc5",[629,8361,652],{"class":634},[629,8363,661],{"class":634},[629,8365,8366,8368,8370,8372,8374,8376,8379,8381,8384,8386,8388,8391,8393],{"class":631,"line":782},[629,8367,773],{"class":634},[629,8369,776],{"class":638},[629,8371,1477],{"class":642},[629,8373,649],{"class":634},[629,8375,652],{"class":634},[629,8377,8378],{"class":655},"[0, 0, 5]",[629,8380,652],{"class":634},[629,8382,8383],{"class":642}," :look-at",[629,8385,649],{"class":634},[629,8387,652],{"class":634},[629,8389,8390],{"class":655},"[0, 0, 0]",[629,8392,652],{"class":634},[629,8394,779],{"class":634},[629,8396,8397,8399,8401],{"class":631,"line":792},[629,8398,773],{"class":634},[629,8400,787],{"class":638},[629,8402,779],{"class":634},[629,8404,8406,8408,8411,8414,8416,8418,8421,8423],{"class":8405,"line":797},[631,665],[629,8407,773],{"class":634},[629,8409,8410],{"class":638},"Levioso",[629,8412,8413],{"class":642}," :speed",[629,8415,649],{"class":634},[629,8417,652],{"class":634},[629,8419,8420],{"class":655},"4",[629,8422,652],{"class":634},[629,8424,661],{"class":634},[629,8426,8427,8429,8431],{"class":631,"line":819},[629,8428,845],{"class":634},[629,8430,209],{"class":638},[629,8432,779],{"class":634},[629,8434,8436,8438,8440],{"class":8435,"line":623},[631,665],[629,8437,887],{"class":634},[629,8439,8410],{"class":638},[629,8441,661],{"class":634},[629,8443,8444,8446,8449,8451,8453,8455,8457,8459],{"class":631,"line":842},[629,8445,773],{"class":634},[629,8447,8448],{"class":638},"TresAmbientLight",[629,8450,1859],{"class":642},[629,8452,649],{"class":634},[629,8454,652],{"class":634},[629,8456,1866],{"class":655},[629,8458,652],{"class":634},[629,8460,779],{"class":634},[629,8462,8463,8465,8468,8470,8472,8474,8476,8478,8480,8482,8484,8487,8489],{"class":631,"line":853},[629,8464,773],{"class":634},[629,8466,8467],{"class":638},"TresDirectionalLight",[629,8469,1859],{"class":642},[629,8471,649],{"class":634},[629,8473,652],{"class":634},[629,8475,1866],{"class":655},[629,8477,652],{"class":634},[629,8479,1477],{"class":642},[629,8481,649],{"class":634},[629,8483,652],{"class":634},[629,8485,8486],{"class":655},"[2, 2, 2]",[629,8488,652],{"class":634},[629,8490,779],{"class":634},[629,8492,8493,8495,8497,8499,8501,8503,8506,8508],{"class":631,"line":864},[629,8494,773],{"class":634},[629,8496,8041],{"class":638},[629,8498,1477],{"class":642},[629,8500,649],{"class":634},[629,8502,652],{"class":634},[629,8504,8505],{"class":655},"[0, -1, 0]",[629,8507,652],{"class":634},[629,8509,779],{"class":634},[629,8511,8512,8514,8516],{"class":631,"line":874},[629,8513,897],{"class":634},[629,8515,753],{"class":638},[629,8517,661],{"class":634},[629,8519,8520,8522,8524],{"class":631,"line":624},[629,8521,724],{"class":634},[629,8523,742],{"class":638},[629,8525,661],{"class":634},[496,8527,914],{"id":913},[919,8529,8530,8540],{},[922,8531,8532],{},[925,8533,8534,8536,8538],{},[928,8535,930],{"align":989},[928,8537,933],{"align":989},[928,8539,936],{},[938,8541,8542,8556,8570,8584],{},[925,8543,8544,8549,8552],{},[943,8545,8546],{"align":989},[610,8547,8548],{},"speed",[943,8550,8551],{"align":989},"Floating speed, higher it rocks more 🤘.",[943,8553,8554],{},[610,8555,1866],{},[925,8557,8558,8563,8566],{},[943,8559,8560],{"align":989},[610,8561,8562],{},"rotationFactor",[943,8564,8565],{"align":989},"Factor for Euler rotation.",[943,8567,8568],{},[610,8569,1866],{},[925,8571,8572,8577,8580],{},[943,8573,8574],{"align":989},[610,8575,8576],{},"floatFactor",[943,8578,8579],{"align":989},"Factor for Up/down movement.",[943,8581,8582],{},[610,8583,1866],{},[925,8585,8586,8591,8594],{},[943,8587,8588],{"align":989},[610,8589,8590],{},"range",[943,8592,8593],{"align":989},"Range of y-axis values the object will float within.",[943,8595,8596],{},[610,8597,8598],{},"[-0.1, 0.1]",[1319,8600,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":8602},[8603,8604],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Make content float like magic with smooth animations.",{},{"title":65,"description":8605},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":8610,"title":69,"body":8611,"description":9255,"extension":583,"links":584,"meta":9256,"navigation":586,"path":70,"seo":9257,"stem":71,"__hash__":9258},"docs/2.api/1.abstractions/mask.md",{"type":493,"value":8612,"toc":9250},[8613,8618,8624,8657,8659,9122,9124,9187,9191,9198,9203,9218,9247],[600,8614,8615],{},[8616,8617],"abstractions-mask",{},[606,8619,8620,8623],{},[610,8621,8622],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3191,8625,8626,8644],{},[606,8627,8628,8629,8632,8633,8636,8637,8640,8641,1138],{},"To use ",[610,8630,8631],{},"\u003CMask />"," you ",[1666,8634,8635],{},"must"," add ",[610,8638,8639],{},":stencil=\"true\""," to your ",[610,8642,8643],{},"\u003CTresCanvas />",[606,8645,8646,8648,8649,8656],{},[610,8647,8631],{}," relies on the ",[1132,8650,8653],{"href":8651,"rel":8652},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1136],[610,8654,8655],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[496,8658,15],{"id":616},[618,8660,8663],{"className":620,"code":8661,"highlights":8662,"language":625,"meta":568,"style":568},"\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",[570,864,874,624,894],[610,8664,8665,8685,8714,8732,8740,8744,8752,8782,8790,8798,8802,8821,8829,8849,8867,8875,8895,8905,8925,8934,8942,8946,8966,8974,8994,9002,9006,9025,9033,9051,9059,9063,9082,9090,9098,9106,9114],{"__ignoreMap":568},[629,8666,8667,8669,8671,8673,8675,8677,8679,8681,8683],{"class":631,"line":569},[629,8668,635],{"class":634},[629,8670,639],{"class":638},[629,8672,643],{"class":642},[629,8674,646],{"class":642},[629,8676,649],{"class":634},[629,8678,652],{"class":634},[629,8680,656],{"class":655},[629,8682,652],{"class":634},[629,8684,661],{"class":634},[629,8686,8688,8690,8692,8695,8697,8699,8701,8704,8706,8708,8710,8712],{"class":8687,"line":570},[631,665],[629,8689,669],{"class":668},[629,8691,672],{"class":634},[629,8693,8694],{"class":675}," Mask",[629,8696,679],{"class":634},[629,8698,682],{"class":675},[629,8700,679],{"class":634},[629,8702,8703],{"class":675}," useMask",[629,8705,685],{"class":634},[629,8707,688],{"class":668},[629,8709,691],{"class":634},[629,8711,694],{"class":655},[629,8713,697],{"class":634},[629,8715,8716,8718,8720,8722,8724,8726,8728,8730],{"class":631,"line":700},[629,8717,669],{"class":668},[629,8719,672],{"class":634},[629,8721,707],{"class":675},[629,8723,685],{"class":634},[629,8725,688],{"class":668},[629,8727,691],{"class":634},[629,8729,716],{"class":655},[629,8731,697],{"class":634},[629,8733,8734,8736,8738],{"class":631,"line":721},[629,8735,724],{"class":634},[629,8737,639],{"class":638},[629,8739,661],{"class":634},[629,8741,8742],{"class":631,"line":731},[629,8743,734],{"emptyLinePlaceholder":586},[629,8745,8746,8748,8750],{"class":631,"line":737},[629,8747,635],{"class":634},[629,8749,742],{"class":638},[629,8751,661],{"class":634},[629,8753,8754,8756,8758,8761,8763,8765,8767,8769,8771,8773,8775,8778,8780],{"class":631,"line":747},[629,8755,750],{"class":634},[629,8757,753],{"class":638},[629,8759,8760],{"class":642}," :stencil",[629,8762,649],{"class":634},[629,8764,652],{"class":634},[629,8766,953],{"class":655},[629,8768,652],{"class":634},[629,8770,756],{"class":642},[629,8772,649],{"class":634},[629,8774,652],{"class":634},[629,8776,8777],{"class":655},"#4f4f4f",[629,8779,652],{"class":634},[629,8781,661],{"class":634},[629,8783,8784,8786,8788],{"class":631,"line":770},[629,8785,773],{"class":634},[629,8787,776],{"class":638},[629,8789,779],{"class":634},[629,8791,8792,8794,8796],{"class":631,"line":782},[629,8793,773],{"class":634},[629,8795,787],{"class":638},[629,8797,779],{"class":634},[629,8799,8800],{"class":631,"line":792},[629,8801,734],{"emptyLinePlaceholder":586},[629,8803,8804,8806,8809,8811,8813,8815,8817,8819],{"class":631,"line":797},[629,8805,773],{"class":634},[629,8807,8808],{"class":638},"TresGroup",[629,8810,805],{"class":642},[629,8812,649],{"class":634},[629,8814,652],{"class":634},[629,8816,812],{"class":655},[629,8818,652],{"class":634},[629,8820,661],{"class":634},[629,8822,8823,8825,8827],{"class":631,"line":819},[629,8824,845],{"class":634},[629,8826,848],{"class":638},[629,8828,661],{"class":634},[629,8830,8831,8833,8836,8838,8840,8842,8845,8847],{"class":631,"line":623},[629,8832,856],{"class":634},[629,8834,8835],{"class":638},"TresRingGeometry",[629,8837,1951],{"class":642},[629,8839,649],{"class":634},[629,8841,652],{"class":634},[629,8843,8844],{"class":655},"[0.95, 1, 64]",[629,8846,652],{"class":634},[629,8848,779],{"class":634},[629,8850,8851,8853,8855,8857,8859,8861,8863,8865],{"class":631,"line":842},[629,8852,856],{"class":634},[629,8854,7464],{"class":638},[629,8856,2681],{"class":642},[629,8858,649],{"class":634},[629,8860,652],{"class":634},[629,8862,2688],{"class":655},[629,8864,652],{"class":634},[629,8866,779],{"class":634},[629,8868,8869,8871,8873],{"class":631,"line":853},[629,8870,877],{"class":634},[629,8872,848],{"class":638},[629,8874,661],{"class":634},[629,8876,8878,8880,8882,8885,8887,8889,8891,8893],{"class":8877,"line":864},[631,665],[629,8879,845],{"class":634},[629,8881,69],{"class":638},[629,8883,8884],{"class":642}," :id",[629,8886,649],{"class":634},[629,8888,652],{"class":634},[629,8890,1866],{"class":655},[629,8892,652],{"class":634},[629,8894,661],{"class":634},[629,8896,8898,8900,8903],{"class":8897,"line":874},[631,665],[629,8899,856],{"class":634},[629,8901,8902],{"class":638},"TresCircleGeometry",[629,8904,779],{"class":634},[629,8906,8908,8910,8912,8914,8916,8918,8921,8923],{"class":8907,"line":624},[631,665],[629,8909,856],{"class":634},[629,8911,7464],{"class":638},[629,8913,2681],{"class":642},[629,8915,649],{"class":634},[629,8917,652],{"class":634},[629,8919,8920],{"class":655},"#fbb03b",[629,8922,652],{"class":634},[629,8924,779],{"class":634},[629,8926,8928,8930,8932],{"class":8927,"line":894},[631,665],[629,8929,877],{"class":634},[629,8931,69],{"class":638},[629,8933,661],{"class":634},[629,8935,8936,8938,8940],{"class":631,"line":904},[629,8937,887],{"class":634},[629,8939,8808],{"class":638},[629,8941,661],{"class":634},[629,8943,8944],{"class":631,"line":2617},[629,8945,734],{"emptyLinePlaceholder":586},[629,8947,8948,8950,8952,8955,8957,8959,8962,8964],{"class":631,"line":2626},[629,8949,773],{"class":634},[629,8951,848],{"class":638},[629,8953,8954],{"class":642}," :position-z",[629,8956,649],{"class":634},[629,8958,652],{"class":634},[629,8960,8961],{"class":655},"-1",[629,8963,652],{"class":634},[629,8965,661],{"class":634},[629,8967,8968,8970,8972],{"class":631,"line":2646},[629,8969,845],{"class":634},[629,8971,859],{"class":638},[629,8973,779],{"class":634},[629,8975,8976,8978,8980,8983,8985,8987,8990,8992],{"class":631,"line":2655},[629,8977,845],{"class":634},[629,8979,869],{"class":638},[629,8981,8982],{"class":642}," v-bind",[629,8984,649],{"class":634},[629,8986,652],{"class":634},[629,8988,8989],{"class":655},"useMask(1)",[629,8991,652],{"class":634},[629,8993,779],{"class":634},[629,8995,8996,8998,9000],{"class":631,"line":2664},[629,8997,887],{"class":634},[629,8999,848],{"class":638},[629,9001,661],{"class":634},[629,9003,9004],{"class":631,"line":2673},[629,9005,734],{"emptyLinePlaceholder":586},[629,9007,9008,9010,9012,9014,9016,9018,9021,9023],{"class":631,"line":2695},[629,9009,773],{"class":634},[629,9011,848],{"class":638},[629,9013,8954],{"class":642},[629,9015,649],{"class":634},[629,9017,652],{"class":634},[629,9019,9020],{"class":655},"-3",[629,9022,652],{"class":634},[629,9024,661],{"class":634},[629,9026,9027,9029,9031],{"class":631,"line":2739},[629,9028,845],{"class":634},[629,9030,859],{"class":638},[629,9032,779],{"class":634},[629,9034,9035,9037,9039,9041,9043,9045,9047,9049],{"class":631,"line":2748},[629,9036,845],{"class":634},[629,9038,869],{"class":638},[629,9040,8982],{"class":642},[629,9042,649],{"class":634},[629,9044,652],{"class":634},[629,9046,8989],{"class":655},[629,9048,652],{"class":634},[629,9050,779],{"class":634},[629,9052,9053,9055,9057],{"class":631,"line":2757},[629,9054,887],{"class":634},[629,9056,848],{"class":638},[629,9058,661],{"class":634},[629,9060,9061],{"class":631,"line":3914},[629,9062,734],{"emptyLinePlaceholder":586},[629,9064,9065,9067,9069,9071,9073,9075,9078,9080],{"class":631,"line":3945},[629,9066,773],{"class":634},[629,9068,848],{"class":638},[629,9070,8954],{"class":642},[629,9072,649],{"class":634},[629,9074,652],{"class":634},[629,9076,9077],{"class":655},"-5",[629,9079,652],{"class":634},[629,9081,661],{"class":634},[629,9083,9084,9086,9088],{"class":631,"line":3966},[629,9085,845],{"class":634},[629,9087,859],{"class":638},[629,9089,779],{"class":634},[629,9091,9092,9094,9096],{"class":631,"line":3985},[629,9093,845],{"class":634},[629,9095,869],{"class":638},[629,9097,779],{"class":634},[629,9099,9100,9102,9104],{"class":631,"line":4017},[629,9101,887],{"class":634},[629,9103,848],{"class":638},[629,9105,661],{"class":634},[629,9107,9108,9110,9112],{"class":631,"line":4026},[629,9109,897],{"class":634},[629,9111,753],{"class":638},[629,9113,661],{"class":634},[629,9115,9116,9118,9120],{"class":631,"line":4035},[629,9117,724],{"class":634},[629,9119,742],{"class":638},[629,9121,661],{"class":634},[496,9123,914],{"id":913},[919,9125,9126,9136],{},[922,9127,9128],{},[925,9129,9130,9132,9134],{},[928,9131,930],{"align":989},[928,9133,933],{"align":989},[928,9135,936],{},[938,9137,9138,9155,9171],{},[925,9139,9140,9147,9153],{},[943,9141,9142],{"align":989},[1661,9143,9144],{},[610,9145,9146],{},"id",[943,9148,9149,9150,9152],{"align":989},"Id of the stencil buffer to use. Each mask must have a ",[610,9151,5344],{}," id. Multiple masks can refer to the same id.",[943,9154],{},[925,9156,9157,9164,9167],{},[943,9158,9159],{"align":989},[1661,9160,9161],{},[610,9162,9163],{},"colorWrite",[943,9165,9166],{"align":989},"Whether the colors of the mask's own material will leak through.",[943,9168,9169],{},[610,9170,963],{},[925,9172,9173,9180,9183],{},[943,9174,9175],{"align":989},[1661,9176,9177],{},[610,9178,9179],{},"depthWrite",[943,9181,9182],{"align":989},"Whether the depth of the mask's own material will leak through.",[943,9184,9185],{},[610,9186,963],{},[496,9188,9190],{"id":9189},"usemask","useMask",[606,9192,9193,9194,9197],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[610,9195,9196],{},"v-bind"," on materials that should be affected by the mask.",[606,9199,9200],{},[1661,9201,9202],{},"Parameters:",[2205,9204,9205,9210],{},[2208,9206,9207,9209],{},[610,9208,9146],{}," - The mask id to use (number or Ref)",[2208,9211,9212,9215,9216],{},[610,9213,9214],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[610,9217,963],{},[618,9219,9221],{"className":620,"code":9220,"language":625,"meta":568,"style":568},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[610,9222,9223],{"__ignoreMap":568},[629,9224,9225,9227,9229,9231,9233,9235,9237,9239,9241,9243,9245],{"class":631,"line":569},[629,9226,635],{"class":634},[629,9228,869],{"class":638},[629,9230,8982],{"class":642},[629,9232,649],{"class":634},[629,9234,652],{"class":634},[629,9236,9190],{"class":2426},[629,9238,2429],{"class":675},[629,9240,1866],{"class":2493},[629,9242,3332],{"class":675},[629,9244,652],{"class":634},[629,9246,779],{"class":634},[1319,9248,9249],{},"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":568,"searchDepth":569,"depth":570,"links":9251},[9252,9253,9254],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":9189,"depth":570,"text":9190},"Cut out areas of the screen using the stencil buffer.",{},{"title":69,"description":9255},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":9260,"title":73,"body":9261,"description":9732,"extension":583,"links":584,"meta":9733,"navigation":586,"path":74,"seo":9734,"stem":75,"__hash__":9735},"docs/2.api/1.abstractions/outline.md",{"type":493,"value":9262,"toc":9728},[9263,9268,9279,9281,9628,9630,9726],[600,9264,9265],{},[9266,9267],"abstractions-outline",{},[606,9269,9270,9273,9274,3055,9276,1138],{},[610,9271,9272],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[610,9275,2302],{},[610,9277,9278],{},"\u003CTresSkinnedMesh>",[496,9280,15],{"id":616},[618,9282,9285],{"className":620,"code":9283,"highlights":9284,"language":625,"meta":568,"style":568},"\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",[700,853,904],[610,9286,9287,9307,9325,9349,9357,9361,9369,9387,9395,9403,9422,9453,9473,9481,9490,9522,9530,9548,9567,9575,9604,9612,9620],{"__ignoreMap":568},[629,9288,9289,9291,9293,9295,9297,9299,9301,9303,9305],{"class":631,"line":569},[629,9290,635],{"class":634},[629,9292,639],{"class":638},[629,9294,643],{"class":642},[629,9296,646],{"class":642},[629,9298,649],{"class":634},[629,9300,652],{"class":634},[629,9302,656],{"class":655},[629,9304,652],{"class":634},[629,9306,661],{"class":634},[629,9308,9309,9311,9313,9315,9317,9319,9321,9323],{"class":631,"line":570},[629,9310,669],{"class":668},[629,9312,672],{"class":634},[629,9314,707],{"class":675},[629,9316,685],{"class":634},[629,9318,688],{"class":668},[629,9320,691],{"class":634},[629,9322,716],{"class":655},[629,9324,697],{"class":634},[629,9326,9328,9330,9332,9334,9336,9339,9341,9343,9345,9347],{"class":9327,"line":700},[631,665],[629,9329,669],{"class":668},[629,9331,672],{"class":634},[629,9333,682],{"class":675},[629,9335,679],{"class":634},[629,9337,9338],{"class":675}," Outline",[629,9340,685],{"class":634},[629,9342,688],{"class":668},[629,9344,691],{"class":634},[629,9346,694],{"class":655},[629,9348,697],{"class":634},[629,9350,9351,9353,9355],{"class":631,"line":721},[629,9352,724],{"class":634},[629,9354,639],{"class":638},[629,9356,661],{"class":634},[629,9358,9359],{"class":631,"line":731},[629,9360,734],{"emptyLinePlaceholder":586},[629,9362,9363,9365,9367],{"class":631,"line":737},[629,9364,635],{"class":634},[629,9366,742],{"class":638},[629,9368,661],{"class":634},[629,9370,9371,9373,9375,9377,9379,9381,9383,9385],{"class":631,"line":747},[629,9372,750],{"class":634},[629,9374,753],{"class":638},[629,9376,756],{"class":642},[629,9378,649],{"class":634},[629,9380,652],{"class":634},[629,9382,8777],{"class":655},[629,9384,652],{"class":634},[629,9386,661],{"class":634},[629,9388,9389,9391,9393],{"class":631,"line":770},[629,9390,773],{"class":634},[629,9392,776],{"class":638},[629,9394,779],{"class":634},[629,9396,9397,9399,9401],{"class":631,"line":782},[629,9398,773],{"class":634},[629,9400,787],{"class":638},[629,9402,779],{"class":634},[629,9404,9405,9407,9409,9411,9413,9415,9418,9420],{"class":631,"line":792},[629,9406,773],{"class":634},[629,9408,8448],{"class":638},[629,9410,1859],{"class":642},[629,9412,649],{"class":634},[629,9414,652],{"class":634},[629,9416,9417],{"class":655},"3.14",[629,9419,652],{"class":634},[629,9421,779],{"class":634},[629,9423,9424,9426,9429,9431,9433,9435,9438,9440,9442,9444,9446,9449,9451],{"class":631,"line":797},[629,9425,773],{"class":634},[629,9427,9428],{"class":638},"TresPointLight",[629,9430,1859],{"class":642},[629,9432,649],{"class":634},[629,9434,652],{"class":634},[629,9436,9437],{"class":655},"50",[629,9439,652],{"class":634},[629,9441,1477],{"class":642},[629,9443,649],{"class":634},[629,9445,652],{"class":634},[629,9447,9448],{"class":655},"[2, 2, 0]",[629,9450,652],{"class":634},[629,9452,779],{"class":634},[629,9454,9455,9457,9459,9462,9464,9466,9469,9471],{"class":631,"line":819},[629,9456,773],{"class":634},[629,9458,848],{"class":638},[629,9460,9461],{"class":642}," :position-x",[629,9463,649],{"class":634},[629,9465,652],{"class":634},[629,9467,9468],{"class":655},"-0.75",[629,9470,652],{"class":634},[629,9472,661],{"class":634},[629,9474,9475,9477,9479],{"class":631,"line":623},[629,9476,845],{"class":634},[629,9478,859],{"class":638},[629,9480,779],{"class":634},[629,9482,9483,9485,9488],{"class":631,"line":842},[629,9484,845],{"class":634},[629,9486,9487],{"class":638},"TresMeshPhongMaterial",[629,9489,779],{"class":634},[629,9491,9493,9495,9497,9500,9502,9504,9507,9509,9511,9513,9515,9518,9520],{"class":9492,"line":853},[631,665],[629,9494,845],{"class":634},[629,9496,73],{"class":638},[629,9498,9499],{"class":642}," :thickness",[629,9501,649],{"class":634},[629,9503,652],{"class":634},[629,9505,9506],{"class":655},"7.5",[629,9508,652],{"class":634},[629,9510,2681],{"class":642},[629,9512,649],{"class":634},[629,9514,652],{"class":634},[629,9516,9517],{"class":655},"#82dbc5",[629,9519,652],{"class":634},[629,9521,779],{"class":634},[629,9523,9524,9526,9528],{"class":631,"line":864},[629,9525,887],{"class":634},[629,9527,848],{"class":638},[629,9529,661],{"class":634},[629,9531,9532,9534,9536,9538,9540,9542,9544,9546],{"class":631,"line":874},[629,9533,773],{"class":634},[629,9535,848],{"class":638},[629,9537,9461],{"class":642},[629,9539,649],{"class":634},[629,9541,652],{"class":634},[629,9543,2543],{"class":655},[629,9545,652],{"class":634},[629,9547,661],{"class":634},[629,9549,9550,9552,9554,9556,9558,9560,9563,9565],{"class":631,"line":624},[629,9551,845],{"class":634},[629,9553,3950],{"class":638},[629,9555,1951],{"class":642},[629,9557,649],{"class":634},[629,9559,652],{"class":634},[629,9561,9562],{"class":655},"[0.5]",[629,9564,652],{"class":634},[629,9566,779],{"class":634},[629,9568,9569,9571,9573],{"class":631,"line":894},[629,9570,845],{"class":634},[629,9572,9487],{"class":638},[629,9574,779],{"class":634},[629,9576,9578,9580,9582,9584,9586,9588,9590,9592,9594,9596,9598,9600,9602],{"class":9577,"line":904},[631,665],[629,9579,845],{"class":634},[629,9581,73],{"class":638},[629,9583,9499],{"class":642},[629,9585,649],{"class":634},[629,9587,652],{"class":634},[629,9589,9506],{"class":655},[629,9591,652],{"class":634},[629,9593,2681],{"class":642},[629,9595,649],{"class":634},[629,9597,652],{"class":634},[629,9599,8920],{"class":655},[629,9601,652],{"class":634},[629,9603,779],{"class":634},[629,9605,9606,9608,9610],{"class":631,"line":2617},[629,9607,887],{"class":634},[629,9609,848],{"class":638},[629,9611,661],{"class":634},[629,9613,9614,9616,9618],{"class":631,"line":2626},[629,9615,897],{"class":634},[629,9617,753],{"class":638},[629,9619,661],{"class":634},[629,9621,9622,9624,9626],{"class":631,"line":2646},[629,9623,724],{"class":634},[629,9625,742],{"class":638},[629,9627,661],{"class":634},[496,9629,914],{"id":913},[919,9631,9632,9642],{},[922,9633,9634],{},[925,9635,9636,9638,9640],{},[928,9637,914],{},[928,9639,933],{},[928,9641,936],{},[938,9643,9644,9656,9668,9680,9692,9705],{},[925,9645,9646,9648,9651],{},[943,9647,7539],{},[943,9649,9650],{},"Outline color",[943,9652,9653],{},[610,9654,9655],{},"'black'",[925,9657,9658,9661,9664],{},[943,9659,9660],{},"screenspace",[943,9662,9663],{},"Whether line thickness is independent of zoom",[943,9665,9666],{},[610,9667,963],{},[925,9669,9670,9673,9676],{},[943,9671,9672],{},"opacity",[943,9674,9675],{},"Outline opacity",[943,9677,9678],{},[610,9679,1866],{},[925,9681,9682,9685,9688],{},[943,9683,9684],{},"transparent",[943,9686,9687],{},"Outline transparency",[943,9689,9690],{},[610,9691,963],{},[925,9693,9694,9697,9700],{},[943,9695,9696],{},"thickness",[943,9698,9699],{},"Outline thickness",[943,9701,9702],{},[610,9703,9704],{},"0.05",[925,9706,9707,9710,9721],{},[943,9708,9709],{},"angle",[943,9711,9712,9713,9715,9716],{},"Geometry crease angle (",[610,9714,957],{}," is no crease). See ",[1132,9717,9720],{"href":9718,"rel":9719},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1136],"BufferGeometryUtils.toCreasedNormals",[943,9722,9723],{},[610,9724,9725],{},"Math.PI",[1319,9727,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":9729},[9730,9731],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Create inverted-hull outlines using parent geometry.",{},{"title":73,"description":9732},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":9737,"title":77,"body":9738,"description":10535,"extension":583,"links":584,"meta":10536,"navigation":586,"path":78,"seo":10537,"stem":79,"__hash__":10538},"docs/2.api/1.abstractions/sampler.md",{"type":493,"value":9739,"toc":10530},[9740,9745,9748,9750,10044,10046,10111,10115,10122,10527],[600,9741,9742],{},[9743,9744],"abstractions-sampler",{},[606,9746,9747],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[496,9749,15],{"id":616},[618,9751,9754],{"className":620,"code":9752,"highlights":9753,"language":625,"meta":568,"style":568},"\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",[570,797,819,623,842,853,864,874,624,894,904],[610,9755,9756,9776,9800,9818,9826,9830,9838,9857,9876,9884,9888,9908,9917,9927,9936,9941,9962,9982,9991,10000,10009,10028,10036],{"__ignoreMap":568},[629,9757,9758,9760,9762,9764,9766,9768,9770,9772,9774],{"class":631,"line":569},[629,9759,635],{"class":634},[629,9761,639],{"class":638},[629,9763,643],{"class":642},[629,9765,646],{"class":642},[629,9767,649],{"class":634},[629,9769,652],{"class":634},[629,9771,656],{"class":655},[629,9773,652],{"class":634},[629,9775,661],{"class":634},[629,9777,9779,9781,9783,9785,9787,9790,9792,9794,9796,9798],{"class":9778,"line":570},[631,665],[629,9780,669],{"class":668},[629,9782,672],{"class":634},[629,9784,682],{"class":675},[629,9786,679],{"class":634},[629,9788,9789],{"class":675}," Sampler",[629,9791,685],{"class":634},[629,9793,688],{"class":668},[629,9795,691],{"class":634},[629,9797,694],{"class":655},[629,9799,697],{"class":634},[629,9801,9802,9804,9806,9808,9810,9812,9814,9816],{"class":631,"line":700},[629,9803,669],{"class":668},[629,9805,672],{"class":634},[629,9807,707],{"class":675},[629,9809,685],{"class":634},[629,9811,688],{"class":668},[629,9813,691],{"class":634},[629,9815,716],{"class":655},[629,9817,697],{"class":634},[629,9819,9820,9822,9824],{"class":631,"line":721},[629,9821,724],{"class":634},[629,9823,639],{"class":638},[629,9825,661],{"class":634},[629,9827,9828],{"class":631,"line":731},[629,9829,734],{"emptyLinePlaceholder":586},[629,9831,9832,9834,9836],{"class":631,"line":737},[629,9833,635],{"class":634},[629,9835,742],{"class":638},[629,9837,661],{"class":634},[629,9839,9840,9842,9844,9846,9848,9850,9853,9855],{"class":631,"line":747},[629,9841,750],{"class":634},[629,9843,753],{"class":638},[629,9845,756],{"class":642},[629,9847,649],{"class":634},[629,9849,652],{"class":634},[629,9851,9852],{"class":655},"#82DBC5",[629,9854,652],{"class":634},[629,9856,661],{"class":634},[629,9858,9859,9861,9863,9865,9867,9869,9872,9874],{"class":631,"line":770},[629,9860,773],{"class":634},[629,9862,776],{"class":638},[629,9864,1477],{"class":642},[629,9866,649],{"class":634},[629,9868,652],{"class":634},[629,9870,9871],{"class":655},"[0, 0.5, 5]",[629,9873,652],{"class":634},[629,9875,779],{"class":634},[629,9877,9878,9880,9882],{"class":631,"line":782},[629,9879,773],{"class":634},[629,9881,787],{"class":638},[629,9883,779],{"class":634},[629,9885,9886],{"class":631,"line":792},[629,9887,734],{"emptyLinePlaceholder":586},[629,9889,9891,9893,9895,9898,9900,9902,9904,9906],{"class":9890,"line":797},[631,665],[629,9892,773],{"class":634},[629,9894,77],{"class":638},[629,9896,9897],{"class":642}," :count",[629,9899,649],{"class":634},[629,9901,652],{"class":634},[629,9903,9437],{"class":655},[629,9905,652],{"class":634},[629,9907,661],{"class":634},[629,9909,9911,9913,9915],{"class":9910,"line":819},[631,665],[629,9912,845],{"class":634},[629,9914,848],{"class":638},[629,9916,661],{"class":634},[629,9918,9920,9922,9925],{"class":9919,"line":623},[631,665],[629,9921,856],{"class":634},[629,9923,9924],{"class":638},"TresTorusGeometry",[629,9926,779],{"class":634},[629,9928,9930,9932,9934],{"class":9929,"line":842},[631,665],[629,9931,877],{"class":634},[629,9933,848],{"class":638},[629,9935,661],{"class":634},[629,9937,9939],{"class":9938,"line":853},[631,665],[629,9940,734],{"emptyLinePlaceholder":586},[629,9942,9944,9946,9949,9951,9953,9955,9958,9960],{"class":9943,"line":864},[631,665],[629,9945,845],{"class":634},[629,9947,9948],{"class":638},"TresInstancedMesh",[629,9950,1951],{"class":642},[629,9952,649],{"class":634},[629,9954,652],{"class":634},[629,9956,9957],{"class":655},"[null!, null!, 1000]",[629,9959,652],{"class":634},[629,9961,661],{"class":634},[629,9963,9965,9967,9969,9971,9973,9975,9978,9980],{"class":9964,"line":874},[631,665],[629,9966,856],{"class":634},[629,9968,859],{"class":638},[629,9970,1951],{"class":642},[629,9972,649],{"class":634},[629,9974,652],{"class":634},[629,9976,9977],{"class":655},"[0.1, 0.1, 0.1]",[629,9979,652],{"class":634},[629,9981,779],{"class":634},[629,9983,9985,9987,9989],{"class":9984,"line":624},[631,665],[629,9986,856],{"class":634},[629,9988,869],{"class":638},[629,9990,779],{"class":634},[629,9992,9994,9996,9998],{"class":9993,"line":894},[631,665],[629,9995,877],{"class":634},[629,9997,9948],{"class":638},[629,9999,661],{"class":634},[629,10001,10003,10005,10007],{"class":10002,"line":904},[631,665],[629,10004,887],{"class":634},[629,10006,77],{"class":638},[629,10008,661],{"class":634},[629,10010,10011,10013,10015,10017,10019,10021,10024,10026],{"class":631,"line":2617},[629,10012,773],{"class":634},[629,10014,8041],{"class":638},[629,10016,1951],{"class":642},[629,10018,649],{"class":634},[629,10020,652],{"class":634},[629,10022,10023],{"class":655},"[10, 10]",[629,10025,652],{"class":634},[629,10027,779],{"class":634},[629,10029,10030,10032,10034],{"class":631,"line":2626},[629,10031,897],{"class":634},[629,10033,753],{"class":638},[629,10035,661],{"class":634},[629,10037,10038,10040,10042],{"class":631,"line":2646},[629,10039,724],{"class":634},[629,10041,742],{"class":638},[629,10043,661],{"class":634},[496,10045,914],{"id":913},[919,10047,10048,10056],{},[922,10049,10050],{},[925,10051,10052,10054],{},[928,10053,914],{},[928,10055,933],{},[938,10057,10058,10067,10078,10089,10100],{},[925,10059,10060,10062],{},[943,10061,5597],{},[943,10063,10064,10066],{},[1661,10065,4284],{}," Surface mesh from which to sample",[925,10068,10069,10072],{},[943,10070,10071],{},"count",[943,10073,10074,10077],{},[1661,10075,10076],{},"Number"," Number of samples",[925,10079,10080,10083],{},[943,10081,10082],{},"instanceMesh",[943,10084,10085,10088],{},[1661,10086,10087],{},"InstanceMesh"," InstanceMesh to scatter",[925,10090,10091,10094],{},[943,10092,10093],{},"weight",[943,10095,10096,10099],{},[1661,10097,10098],{},"String"," A vertex attribute to be used as a weight when sampling",[925,10101,10102,10105],{},[943,10103,10104],{},"transform",[943,10106,10107,10110],{},[1661,10108,10109],{},"Function"," A function that can be used as a custom sampling",[496,10112,10114],{"id":10113},"usesurfacesampler","useSurfaceSampler",[606,10116,10117,10118],{},"A hook to obtain the result of the ",[10119,10120,10121],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[618,10123,10126],{"className":620,"code":10124,"highlights":10125,"language":625,"meta":568,"style":568},"\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",[570,792],[610,10127,10128,10148,10172,10190,10213,10217,10230,10243,10247,10267,10301,10307,10315,10319,10327,10345,10363,10371,10375,10394,10402,10410,10414,10421,10435,10449,10454,10473,10481,10489,10493,10511,10519],{"__ignoreMap":568},[629,10129,10130,10132,10134,10136,10138,10140,10142,10144,10146],{"class":631,"line":569},[629,10131,635],{"class":634},[629,10133,639],{"class":638},[629,10135,643],{"class":642},[629,10137,646],{"class":642},[629,10139,649],{"class":634},[629,10141,652],{"class":634},[629,10143,656],{"class":655},[629,10145,652],{"class":634},[629,10147,661],{"class":634},[629,10149,10151,10153,10155,10157,10159,10162,10164,10166,10168,10170],{"class":10150,"line":570},[631,665],[629,10152,669],{"class":668},[629,10154,672],{"class":634},[629,10156,682],{"class":675},[629,10158,679],{"class":634},[629,10160,10161],{"class":675}," useSurfaceSampler",[629,10163,685],{"class":634},[629,10165,688],{"class":668},[629,10167,691],{"class":634},[629,10169,694],{"class":655},[629,10171,697],{"class":634},[629,10173,10174,10176,10178,10180,10182,10184,10186,10188],{"class":631,"line":700},[629,10175,669],{"class":668},[629,10177,672],{"class":634},[629,10179,707],{"class":675},[629,10181,685],{"class":634},[629,10183,688],{"class":668},[629,10185,691],{"class":634},[629,10187,716],{"class":655},[629,10189,697],{"class":634},[629,10191,10192,10194,10196,10198,10200,10203,10205,10207,10209,10211],{"class":631,"line":721},[629,10193,669],{"class":668},[629,10195,672],{"class":634},[629,10197,3864],{"class":675},[629,10199,679],{"class":634},[629,10201,10202],{"class":675}," watch",[629,10204,685],{"class":634},[629,10206,688],{"class":668},[629,10208,691],{"class":634},[629,10210,625],{"class":655},[629,10212,697],{"class":634},[629,10214,10215],{"class":631,"line":731},[629,10216,734],{"emptyLinePlaceholder":586},[629,10218,10219,10221,10224,10226,10228],{"class":631,"line":737},[629,10220,2407],{"class":642},[629,10222,10223],{"class":675}," torusRef ",[629,10225,649],{"class":634},[629,10227,3864],{"class":2426},[629,10229,6527],{"class":675},[629,10231,10232,10234,10237,10239,10241],{"class":631,"line":747},[629,10233,2407],{"class":642},[629,10235,10236],{"class":675}," instancesRef ",[629,10238,649],{"class":634},[629,10240,3864],{"class":2426},[629,10242,6527],{"class":675},[629,10244,10245],{"class":631,"line":770},[629,10246,734],{"emptyLinePlaceholder":586},[629,10248,10249,10252,10255,10257,10259,10261,10263,10265],{"class":631,"line":782},[629,10250,10251],{"class":2426},"watch",[629,10253,10254],{"class":675},"(torusRef",[629,10256,679],{"class":634},[629,10258,3066],{"class":634},[629,10260,3677],{"class":6830},[629,10262,3332],{"class":634},[629,10264,3669],{"class":642},[629,10266,1196],{"class":634},[629,10268,10270,10273,10275,10277,10279,10282,10284,10287,10289,10291,10293,10295,10297,10299],{"class":10269,"line":792},[631,665],[629,10271,10272],{"class":2426}," useSurfaceSampler",[629,10274,2429],{"class":638},[629,10276,3677],{"class":675},[629,10278,679],{"class":634},[629,10280,10281],{"class":2493}," 50",[629,10283,679],{"class":634},[629,10285,10286],{"class":675}," instancesRef",[629,10288,1138],{"class":634},[629,10290,3677],{"class":675},[629,10292,679],{"class":634},[629,10294,691],{"class":634},[629,10296,7539],{"class":655},[629,10298,2432],{"class":634},[629,10300,2440],{"class":638},[629,10302,10303,10305],{"class":631,"line":797},[629,10304,2420],{"class":634},[629,10306,2440],{"class":675},[629,10308,10309,10311,10313],{"class":631,"line":819},[629,10310,724],{"class":634},[629,10312,639],{"class":638},[629,10314,661],{"class":634},[629,10316,10317],{"class":631,"line":623},[629,10318,734],{"emptyLinePlaceholder":586},[629,10320,10321,10323,10325],{"class":631,"line":842},[629,10322,635],{"class":634},[629,10324,742],{"class":638},[629,10326,661],{"class":634},[629,10328,10329,10331,10333,10335,10337,10339,10341,10343],{"class":631,"line":853},[629,10330,750],{"class":634},[629,10332,753],{"class":638},[629,10334,756],{"class":642},[629,10336,649],{"class":634},[629,10338,652],{"class":634},[629,10340,9852],{"class":655},[629,10342,652],{"class":634},[629,10344,661],{"class":634},[629,10346,10347,10349,10351,10353,10355,10357,10359,10361],{"class":631,"line":864},[629,10348,773],{"class":634},[629,10350,776],{"class":638},[629,10352,1477],{"class":642},[629,10354,649],{"class":634},[629,10356,652],{"class":634},[629,10358,9871],{"class":655},[629,10360,652],{"class":634},[629,10362,779],{"class":634},[629,10364,10365,10367,10369],{"class":631,"line":874},[629,10366,773],{"class":634},[629,10368,787],{"class":638},[629,10370,779],{"class":634},[629,10372,10373],{"class":631,"line":624},[629,10374,734],{"emptyLinePlaceholder":586},[629,10376,10377,10379,10381,10383,10385,10387,10390,10392],{"class":631,"line":894},[629,10378,773],{"class":634},[629,10380,848],{"class":638},[629,10382,3864],{"class":642},[629,10384,649],{"class":634},[629,10386,652],{"class":634},[629,10388,10389],{"class":655},"torusRef",[629,10391,652],{"class":634},[629,10393,661],{"class":634},[629,10395,10396,10398,10400],{"class":631,"line":904},[629,10397,845],{"class":634},[629,10399,9924],{"class":638},[629,10401,779],{"class":634},[629,10403,10404,10406,10408],{"class":631,"line":2617},[629,10405,887],{"class":634},[629,10407,848],{"class":638},[629,10409,661],{"class":634},[629,10411,10412],{"class":631,"line":2626},[629,10413,734],{"emptyLinePlaceholder":586},[629,10415,10416,10418],{"class":631,"line":2646},[629,10417,773],{"class":634},[629,10419,10420],{"class":638},"TresInstancedMesh\n",[629,10422,10423,10426,10428,10430,10433],{"class":631,"line":2655},[629,10424,10425],{"class":642}," ref",[629,10427,649],{"class":634},[629,10429,652],{"class":634},[629,10431,10432],{"class":655},"instancesRef",[629,10434,3123],{"class":634},[629,10436,10437,10440,10442,10444,10447],{"class":631,"line":2664},[629,10438,10439],{"class":642}," :args",[629,10441,649],{"class":634},[629,10443,652],{"class":634},[629,10445,10446],{"class":655},"[null!, null!, 1_000]",[629,10448,3123],{"class":634},[629,10450,10451],{"class":631,"line":2673},[629,10452,10453],{"class":634}," >\n",[629,10455,10456,10458,10460,10462,10464,10466,10469,10471],{"class":631,"line":2695},[629,10457,845],{"class":634},[629,10459,3950],{"class":638},[629,10461,1951],{"class":642},[629,10463,649],{"class":634},[629,10465,652],{"class":634},[629,10467,10468],{"class":655},"[0.1, 32, 32]",[629,10470,652],{"class":634},[629,10472,779],{"class":634},[629,10474,10475,10477,10479],{"class":631,"line":2739},[629,10476,845],{"class":634},[629,10478,869],{"class":638},[629,10480,779],{"class":634},[629,10482,10483,10485,10487],{"class":631,"line":2748},[629,10484,887],{"class":634},[629,10486,9948],{"class":638},[629,10488,661],{"class":634},[629,10490,10491],{"class":631,"line":2757},[629,10492,734],{"emptyLinePlaceholder":586},[629,10494,10495,10497,10499,10501,10503,10505,10507,10509],{"class":631,"line":3914},[629,10496,773],{"class":634},[629,10498,8041],{"class":638},[629,10500,1951],{"class":642},[629,10502,649],{"class":634},[629,10504,652],{"class":634},[629,10506,10023],{"class":655},[629,10508,652],{"class":634},[629,10510,779],{"class":634},[629,10512,10513,10515,10517],{"class":631,"line":3945},[629,10514,897],{"class":634},[629,10516,753],{"class":638},[629,10518,661],{"class":634},[629,10520,10521,10523,10525],{"class":631,"line":3966},[629,10522,724],{"class":634},[629,10524,742],{"class":638},[629,10526,661],{"class":634},[1319,10528,10529],{},"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":568,"searchDepth":569,"depth":570,"links":10531},[10532,10533,10534],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":10113,"depth":570,"text":10114},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":77,"description":10535},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":10540,"title":81,"body":10541,"description":10848,"extension":583,"links":584,"meta":10849,"navigation":586,"path":82,"seo":10850,"stem":83,"__hash__":10851},"docs/2.api/1.abstractions/screen-sizer.md",{"type":493,"value":10542,"toc":10844},[10543,10548,10557,10560,10562,10834,10836,10842],[2287,10544,10545],{},[10546,10547],"abstractions-screen-sizer",{},[606,10549,1342,10550,10553,10554,10556],{},[610,10551,10552],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[610,10555,1866],{}," THREE world unit will be translated to 1 screen pixel.",[606,10558,10559],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[496,10561,15],{"id":616},[618,10563,10566],{"className":620,"code":10564,"highlights":10565,"language":625,"meta":568,"style":568},"\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",[700,792,853],[610,10567,10568,10588,10606,10630,10638,10642,10650,10669,10688,10696,10705,10713,10732,10740,10748,10757,10776,10784,10792,10800,10818,10826],{"__ignoreMap":568},[629,10569,10570,10572,10574,10576,10578,10580,10582,10584,10586],{"class":631,"line":569},[629,10571,635],{"class":634},[629,10573,639],{"class":638},[629,10575,643],{"class":642},[629,10577,646],{"class":642},[629,10579,649],{"class":634},[629,10581,652],{"class":634},[629,10583,656],{"class":655},[629,10585,652],{"class":634},[629,10587,661],{"class":634},[629,10589,10590,10592,10594,10596,10598,10600,10602,10604],{"class":631,"line":570},[629,10591,669],{"class":668},[629,10593,672],{"class":634},[629,10595,707],{"class":675},[629,10597,685],{"class":634},[629,10599,688],{"class":668},[629,10601,691],{"class":634},[629,10603,716],{"class":655},[629,10605,697],{"class":634},[629,10607,10609,10611,10613,10615,10617,10620,10622,10624,10626,10628],{"class":10608,"line":700},[631,665],[629,10610,669],{"class":668},[629,10612,672],{"class":634},[629,10614,682],{"class":675},[629,10616,679],{"class":634},[629,10618,10619],{"class":675}," ScreenSizer",[629,10621,685],{"class":634},[629,10623,688],{"class":668},[629,10625,691],{"class":634},[629,10627,694],{"class":655},[629,10629,697],{"class":634},[629,10631,10632,10634,10636],{"class":631,"line":721},[629,10633,724],{"class":634},[629,10635,639],{"class":638},[629,10637,661],{"class":634},[629,10639,10640],{"class":631,"line":731},[629,10641,734],{"emptyLinePlaceholder":586},[629,10643,10644,10646,10648],{"class":631,"line":737},[629,10645,635],{"class":634},[629,10647,742],{"class":638},[629,10649,661],{"class":634},[629,10651,10652,10654,10656,10658,10660,10662,10665,10667],{"class":631,"line":747},[629,10653,750],{"class":634},[629,10655,753],{"class":638},[629,10657,756],{"class":642},[629,10659,649],{"class":634},[629,10661,652],{"class":634},[629,10663,10664],{"class":655},"#3f3f3f",[629,10666,652],{"class":634},[629,10668,661],{"class":634},[629,10670,10671,10673,10675,10677,10679,10681,10684,10686],{"class":631,"line":770},[629,10672,773],{"class":634},[629,10674,776],{"class":638},[629,10676,1477],{"class":642},[629,10678,649],{"class":634},[629,10680,652],{"class":634},[629,10682,10683],{"class":655},"[10, 10, 10]",[629,10685,652],{"class":634},[629,10687,779],{"class":634},[629,10689,10690,10692,10694],{"class":631,"line":782},[629,10691,773],{"class":634},[629,10693,787],{"class":638},[629,10695,779],{"class":634},[629,10697,10699,10701,10703],{"class":10698,"line":792},[631,665],[629,10700,773],{"class":634},[629,10702,81],{"class":638},[629,10704,661],{"class":634},[629,10706,10707,10709,10711],{"class":631,"line":797},[629,10708,845],{"class":634},[629,10710,848],{"class":638},[629,10712,661],{"class":634},[629,10714,10715,10717,10719,10721,10723,10725,10728,10730],{"class":631,"line":819},[629,10716,856],{"class":634},[629,10718,859],{"class":638},[629,10720,1951],{"class":642},[629,10722,649],{"class":634},[629,10724,652],{"class":634},[629,10726,10727],{"class":655},"[100, 100, 100]",[629,10729,652],{"class":634},[629,10731,779],{"class":634},[629,10733,10734,10736,10738],{"class":631,"line":623},[629,10735,856],{"class":634},[629,10737,869],{"class":638},[629,10739,779],{"class":634},[629,10741,10742,10744,10746],{"class":631,"line":842},[629,10743,877],{"class":634},[629,10745,848],{"class":638},[629,10747,661],{"class":634},[629,10749,10751,10753,10755],{"class":10750,"line":853},[631,665],[629,10752,887],{"class":634},[629,10754,81],{"class":638},[629,10756,661],{"class":634},[629,10758,10759,10761,10763,10765,10767,10769,10772,10774],{"class":631,"line":864},[629,10760,773],{"class":634},[629,10762,848],{"class":638},[629,10764,9461],{"class":642},[629,10766,649],{"class":634},[629,10768,652],{"class":634},[629,10770,10771],{"class":655},"5",[629,10773,652],{"class":634},[629,10775,661],{"class":634},[629,10777,10778,10780,10782],{"class":631,"line":874},[629,10779,845],{"class":634},[629,10781,859],{"class":638},[629,10783,779],{"class":634},[629,10785,10786,10788,10790],{"class":631,"line":624},[629,10787,845],{"class":634},[629,10789,869],{"class":638},[629,10791,779],{"class":634},[629,10793,10794,10796,10798],{"class":631,"line":894},[629,10795,887],{"class":634},[629,10797,848],{"class":638},[629,10799,661],{"class":634},[629,10801,10802,10804,10806,10808,10810,10812,10814,10816],{"class":631,"line":904},[629,10803,773],{"class":634},[629,10805,8041],{"class":638},[629,10807,1951],{"class":642},[629,10809,649],{"class":634},[629,10811,652],{"class":634},[629,10813,10023],{"class":655},[629,10815,652],{"class":634},[629,10817,779],{"class":634},[629,10819,10820,10822,10824],{"class":631,"line":2617},[629,10821,897],{"class":634},[629,10823,753],{"class":638},[629,10825,661],{"class":634},[629,10827,10828,10830,10832],{"class":631,"line":2626},[629,10829,724],{"class":634},[629,10831,742],{"class":638},[629,10833,661],{"class":634},[496,10835,914],{"id":913},[606,10837,10838,10839,1138],{},"Inherits all props from ",[610,10840,10841],{},"THREE.Object3D",[1319,10843,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":10845},[10846,10847],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":81,"description":10848},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":10853,"title":85,"body":10854,"description":11224,"extension":583,"links":584,"meta":11225,"navigation":586,"path":86,"seo":11226,"stem":87,"__hash__":11227},"docs/2.api/1.abstractions/screen-space.md",{"type":493,"value":10855,"toc":11220},[10856,10861,10874,10896,10898,11124,11126,11218],[600,10857,10858],{},[10859,10860],"abstractions-screen-space",{},[606,10862,10863,10866,10867,10870,10871,1138],{},[610,10864,10865],{},"\u003CScreenSpace />"," wraps its children in a ",[610,10868,10869],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[610,10872,10873],{},":depth",[606,10875,10876,10877,1664,10879,1664,10881,1664,10883,10885,10886,10889,10890,7611,10893,1138],{},"Additionally, the ",[610,10878,947],{},[610,10880,970],{},[610,10882,989],{},[610,10884,1008],{}," props can be used to position them similarly to CSS ",[610,10887,10888],{},"position: absolute"," property when using a ",[610,10891,10892],{},"PerspectiveCamera",[610,10894,10895],{},"OrtographicCamera",[496,10897,15],{"id":616},[618,10899,10902],{"className":620,"code":10900,"highlights":10901,"language":625,"meta":568,"style":568},"\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",[570,797,864],[610,10903,10904,10924,10948,10966,10974,10978,10986,11005,11013,11021,11025,11045,11053,11061,11069,11077,11086,11090,11108,11116],{"__ignoreMap":568},[629,10905,10906,10908,10910,10912,10914,10916,10918,10920,10922],{"class":631,"line":569},[629,10907,635],{"class":634},[629,10909,639],{"class":638},[629,10911,643],{"class":642},[629,10913,646],{"class":642},[629,10915,649],{"class":634},[629,10917,652],{"class":634},[629,10919,656],{"class":655},[629,10921,652],{"class":634},[629,10923,661],{"class":634},[629,10925,10927,10929,10931,10933,10935,10938,10940,10942,10944,10946],{"class":10926,"line":570},[631,665],[629,10928,669],{"class":668},[629,10930,672],{"class":634},[629,10932,682],{"class":675},[629,10934,679],{"class":634},[629,10936,10937],{"class":675}," ScreenSpace",[629,10939,685],{"class":634},[629,10941,688],{"class":668},[629,10943,691],{"class":634},[629,10945,694],{"class":655},[629,10947,697],{"class":634},[629,10949,10950,10952,10954,10956,10958,10960,10962,10964],{"class":631,"line":700},[629,10951,669],{"class":668},[629,10953,672],{"class":634},[629,10955,707],{"class":675},[629,10957,685],{"class":634},[629,10959,688],{"class":668},[629,10961,691],{"class":634},[629,10963,716],{"class":655},[629,10965,697],{"class":634},[629,10967,10968,10970,10972],{"class":631,"line":721},[629,10969,724],{"class":634},[629,10971,639],{"class":638},[629,10973,661],{"class":634},[629,10975,10976],{"class":631,"line":731},[629,10977,734],{"emptyLinePlaceholder":586},[629,10979,10980,10982,10984],{"class":631,"line":737},[629,10981,635],{"class":634},[629,10983,742],{"class":638},[629,10985,661],{"class":634},[629,10987,10988,10990,10992,10994,10996,10998,11001,11003],{"class":631,"line":747},[629,10989,750],{"class":634},[629,10991,753],{"class":638},[629,10993,756],{"class":642},[629,10995,649],{"class":634},[629,10997,652],{"class":634},[629,10999,11000],{"class":655},"#333",[629,11002,652],{"class":634},[629,11004,661],{"class":634},[629,11006,11007,11009,11011],{"class":631,"line":770},[629,11008,773],{"class":634},[629,11010,776],{"class":638},[629,11012,779],{"class":634},[629,11014,11015,11017,11019],{"class":631,"line":782},[629,11016,773],{"class":634},[629,11018,787],{"class":638},[629,11020,779],{"class":634},[629,11022,11023],{"class":631,"line":792},[629,11024,734],{"emptyLinePlaceholder":586},[629,11026,11028,11030,11032,11035,11037,11039,11041,11043],{"class":11027,"line":797},[631,665],[629,11029,773],{"class":634},[629,11031,85],{"class":638},[629,11033,11034],{"class":642}," :depth",[629,11036,649],{"class":634},[629,11038,652],{"class":634},[629,11040,10771],{"class":655},[629,11042,652],{"class":634},[629,11044,661],{"class":634},[629,11046,11047,11049,11051],{"class":631,"line":819},[629,11048,845],{"class":634},[629,11050,848],{"class":638},[629,11052,661],{"class":634},[629,11054,11055,11057,11059],{"class":631,"line":623},[629,11056,856],{"class":634},[629,11058,9924],{"class":638},[629,11060,779],{"class":634},[629,11062,11063,11065,11067],{"class":631,"line":842},[629,11064,856],{"class":634},[629,11066,869],{"class":638},[629,11068,779],{"class":634},[629,11070,11071,11073,11075],{"class":631,"line":853},[629,11072,877],{"class":634},[629,11074,848],{"class":638},[629,11076,661],{"class":634},[629,11078,11080,11082,11084],{"class":11079,"line":864},[631,665],[629,11081,887],{"class":634},[629,11083,85],{"class":638},[629,11085,661],{"class":634},[629,11087,11088],{"class":631,"line":874},[629,11089,734],{"emptyLinePlaceholder":586},[629,11091,11092,11094,11096,11098,11100,11102,11104,11106],{"class":631,"line":624},[629,11093,773],{"class":634},[629,11095,8041],{"class":638},[629,11097,1951],{"class":642},[629,11099,649],{"class":634},[629,11101,652],{"class":634},[629,11103,10023],{"class":655},[629,11105,652],{"class":634},[629,11107,779],{"class":634},[629,11109,11110,11112,11114],{"class":631,"line":894},[629,11111,897],{"class":634},[629,11113,753],{"class":638},[629,11115,661],{"class":634},[629,11117,11118,11120,11122],{"class":631,"line":904},[629,11119,724],{"class":634},[629,11121,742],{"class":638},[629,11123,661],{"class":634},[496,11125,914],{"id":913},[919,11127,11128,11138],{},[922,11129,11130],{},[925,11131,11132,11134,11136],{},[928,11133,930],{"align":989},[928,11135,933],{"align":989},[928,11137,936],{},[938,11139,11140,11154,11173,11187,11204],{},[925,11141,11142,11147,11150],{},[943,11143,11144],{"align":989},[610,11145,11146],{},"depth",[943,11148,11149],{"align":989},"Distance from the camera",[943,11151,11152],{},[610,11153,8961],{},[925,11155,11156,11160,11168],{},[943,11157,11158],{"align":989},[610,11159,947],{},[943,11161,11162,11163,11165,11166],{"align":989},"Similar to CSS ",[610,11164,947],{}," property. Cannot be used with ",[610,11167,970],{},[943,11169,11170,11172],{},[610,11171,1938],{}," (vertical center of the screen)",[925,11174,11175,11179,11185],{},[943,11176,11177],{"align":989},[610,11178,970],{},[943,11180,11162,11181,11165,11183],{"align":989},[610,11182,970],{},[610,11184,947],{},[943,11186],{},[925,11188,11189,11193,11199],{},[943,11190,11191],{"align":989},[610,11192,989],{},[943,11194,11162,11195,11165,11197],{"align":989},[610,11196,989],{},[610,11198,1008],{},[943,11200,11201,11203],{},[610,11202,1938],{}," (horizontal center of the screen)",[925,11205,11206,11210,11216],{},[943,11207,11208],{"align":989},[610,11209,1008],{},[943,11211,11162,11212,11165,11214],{"align":989},[610,11213,1008],{},[610,11215,989],{},[943,11217],{},[1319,11219,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":11221},[11222,11223],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Position objects in front of the camera with CSS-like positioning.",{},{"title":85,"description":11224},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",[11229,12453,12912,13213,13915,14271],{"id":11230,"title":95,"body":11231,"description":12449,"extension":583,"links":584,"meta":12450,"navigation":586,"path":96,"seo":12451,"stem":97,"__hash__":12452},"docs/2.api/2.controls/camera-controls.md",{"type":493,"value":11232,"toc":12440},[11233,11238,11249,11257,11259,11453,11458,11460,11463,11913,11916,11945,12070,12074,12203,12212,12215,12339,12343,12398,12437],[600,11234,11235],{},[11236,11237],"controls-camera-controls",{},[606,11239,11240,11245,11246,11248],{},[1132,11241,11244],{"href":11242,"rel":11243},"https://github.com/yomotsu/camera-controls",[1136],"CameraControls"," is a camera controller similar to ",[1132,11247,787],{"href":108}," yet supports smooth transitions and more features.",[606,11250,11251,11252,1138],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1132,11253,11256],{"href":11254,"rel":11255},"https://www.npmjs.com/package/camera-controls",[1136],"npm",[496,11258,15],{"id":616},[618,11260,11263],{"className":620,"code":11261,"highlights":11262,"language":625,"meta":568,"style":568},"\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",[747],[610,11264,11265,11275,11294,11302,11310,11328,11347,11356,11374,11394,11402,11410,11429,11437,11445],{"__ignoreMap":568},[629,11266,11267,11269,11271,11273],{"class":631,"line":569},[629,11268,635],{"class":634},[629,11270,639],{"class":638},[629,11272,643],{"class":642},[629,11274,661],{"class":634},[629,11276,11277,11279,11281,11284,11286,11288,11290,11292],{"class":631,"line":570},[629,11278,669],{"class":668},[629,11280,672],{"class":634},[629,11282,11283],{"class":675}," CameraControls",[629,11285,685],{"class":634},[629,11287,688],{"class":668},[629,11289,8282],{"class":634},[629,11291,694],{"class":655},[629,11293,3123],{"class":634},[629,11295,11296,11298,11300],{"class":631,"line":700},[629,11297,724],{"class":634},[629,11299,639],{"class":638},[629,11301,661],{"class":634},[629,11303,11304,11306,11308],{"class":631,"line":721},[629,11305,635],{"class":634},[629,11307,742],{"class":638},[629,11309,661],{"class":634},[629,11311,11312,11314,11316,11318,11320,11322,11324,11326],{"class":631,"line":731},[629,11313,750],{"class":634},[629,11315,753],{"class":638},[629,11317,756],{"class":642},[629,11319,649],{"class":634},[629,11321,652],{"class":634},[629,11323,9852],{"class":655},[629,11325,652],{"class":634},[629,11327,661],{"class":634},[629,11329,11330,11332,11334,11336,11338,11340,11343,11345],{"class":631,"line":737},[629,11331,773],{"class":634},[629,11333,776],{"class":638},[629,11335,1477],{"class":642},[629,11337,649],{"class":634},[629,11339,652],{"class":634},[629,11341,11342],{"class":655},"[3, 3, 3]",[629,11344,652],{"class":634},[629,11346,779],{"class":634},[629,11348,11350,11352,11354],{"class":11349,"line":747},[631,665],[629,11351,773],{"class":634},[629,11353,11244],{"class":638},[629,11355,779],{"class":634},[629,11357,11358,11360,11362,11364,11366,11368,11370,11372],{"class":631,"line":770},[629,11359,773],{"class":634},[629,11361,209],{"class":638},[629,11363,805],{"class":642},[629,11365,649],{"class":634},[629,11367,652],{"class":634},[629,11369,812],{"class":655},[629,11371,652],{"class":634},[629,11373,661],{"class":634},[629,11375,11376,11378,11381,11383,11385,11387,11390,11392],{"class":631,"line":782},[629,11377,845],{"class":634},[629,11379,11380],{"class":638},"TresMeshToonMaterial",[629,11382,2681],{"class":642},[629,11384,649],{"class":634},[629,11386,652],{"class":634},[629,11388,11389],{"class":655},"orange",[629,11391,652],{"class":634},[629,11393,779],{"class":634},[629,11395,11396,11398,11400],{"class":631,"line":792},[629,11397,887],{"class":634},[629,11399,209],{"class":638},[629,11401,661],{"class":634},[629,11403,11404,11406,11408],{"class":631,"line":797},[629,11405,773],{"class":634},[629,11407,8448],{"class":638},[629,11409,779],{"class":634},[629,11411,11412,11414,11416,11418,11420,11422,11425,11427],{"class":631,"line":819},[629,11413,773],{"class":634},[629,11415,8467],{"class":638},[629,11417,1477],{"class":642},[629,11419,649],{"class":634},[629,11421,652],{"class":634},[629,11423,11424],{"class":655},"[0, 2, 4]",[629,11426,652],{"class":634},[629,11428,779],{"class":634},[629,11430,11431,11433,11435],{"class":631,"line":623},[629,11432,773],{"class":634},[629,11434,8041],{"class":638},[629,11436,779],{"class":634},[629,11438,11439,11441,11443],{"class":631,"line":842},[629,11440,897],{"class":634},[629,11442,753],{"class":638},[629,11444,661],{"class":634},[629,11446,11447,11449,11451],{"class":631,"line":853},[629,11448,724],{"class":634},[629,11450,742],{"class":638},[629,11452,661],{"class":634},[3191,11454,11455],{},[606,11456,11457],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[496,11459,914],{"id":913},[606,11461,11462],{},"Certainly! Here's the properties of the object in raw markdown table format:",[919,11464,11465,11475],{},[922,11466,11467],{},[925,11468,11469,11471,11473],{},[928,11470,930],{"align":989},[928,11472,933],{"align":989},[928,11474,936],{},[938,11476,11477,11491,11505,11519,11533,11547,11562,11577,11592,11607,11621,11637,11651,11665,11680,11695,11709,11724,11738,11752,11768,11783,11799,11813,11831,11846,11864,11878,11897],{},[925,11478,11479,11484,11487],{},[943,11480,11481],{"align":989},[1661,11482,11483],{},"makeDefault",[943,11485,11486],{"align":989},"Whether to make this the default controls.",[943,11488,11489],{},[610,11490,963],{},[925,11492,11493,11498,11501],{},[943,11494,11495],{"align":989},[1661,11496,11497],{},"camera",[943,11499,11500],{"align":989},"The camera to control.",[943,11502,11503],{},[610,11504,1171],{},[925,11506,11507,11512,11515],{},[943,11508,11509],{"align":989},[1661,11510,11511],{},"domElement",[943,11513,11514],{"align":989},"The DOM element to listen to.",[943,11516,11517],{},[610,11518,1171],{},[925,11520,11521,11526,11529],{},[943,11522,11523],{"align":989},[1661,11524,11525],{},"minPolarAngle",[943,11527,11528],{"align":989},"Minimum vertical angle in radians.",[943,11530,11531],{},[610,11532,957],{},[925,11534,11535,11540,11543],{},[943,11536,11537],{"align":989},[1661,11538,11539],{},"maxPolarAngle",[943,11541,11542],{"align":989},"Maximum vertical angle in radians.",[943,11544,11545],{},[610,11546,9725],{},[925,11548,11549,11554,11557],{},[943,11550,11551],{"align":989},[1661,11552,11553],{},"minAzimuthAngle",[943,11555,11556],{"align":989},"Minimum horizontal angle in radians.",[943,11558,11559],{},[610,11560,11561],{},"-Infinity",[925,11563,11564,11569,11572],{},[943,11565,11566],{"align":989},[1661,11567,11568],{},"maxAzimuthAngle",[943,11570,11571],{"align":989},"Maximum horizontal angle in radians.",[943,11573,11574],{},[610,11575,11576],{},"Infinity",[925,11578,11579,11584,11587],{},[943,11580,11581],{"align":989},[1661,11582,11583],{},"distance",[943,11585,11586],{"align":989},"Current distance.",[943,11588,11589],{},[610,11590,11591],{},"camera.position.z",[925,11593,11594,11599,11602],{},[943,11595,11596],{"align":989},[1661,11597,11598],{},"minDistance",[943,11600,11601],{"align":989},"Minimum distance for dolly. PerspectiveCamera only.",[943,11603,11604],{},[610,11605,11606],{},"Number.EPSILON",[925,11608,11609,11614,11617],{},[943,11610,11611],{"align":989},[1661,11612,11613],{},"maxDistance",[943,11615,11616],{"align":989},"Maximum distance for dolly. PerspectiveCamera only.",[943,11618,11619],{},[610,11620,11576],{},[925,11622,11623,11628,11633],{},[943,11624,11625],{"align":989},[1661,11626,11627],{},"infinityDolly",[943,11629,11630,11632],{"align":989},[610,11631,953],{}," to enable Infinity Dolly for wheel and pinch.",[943,11634,11635],{},[610,11636,963],{},[925,11638,11639,11644,11647],{},[943,11640,11641],{"align":989},[1661,11642,11643],{},"minZoom",[943,11645,11646],{"align":989},"Minimum camera zoom.",[943,11648,11649],{},[610,11650,1878],{},[925,11652,11653,11658,11661],{},[943,11654,11655],{"align":989},[1661,11656,11657],{},"maxZoom",[943,11659,11660],{"align":989},"Maximum camera zoom.",[943,11662,11663],{},[610,11664,11576],{},[925,11666,11667,11672,11675],{},[943,11668,11669],{"align":989},[1661,11670,11671],{},"smoothTime",[943,11673,11674],{"align":989},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[943,11676,11677],{},[610,11678,11679],{},"0.25",[925,11681,11682,11687,11690],{},[943,11683,11684],{"align":989},[1661,11685,11686],{},"draggingSmoothTime",[943,11688,11689],{"align":989},"The smoothTime while dragging.",[943,11691,11692],{},[610,11693,11694],{},"0.125",[925,11696,11697,11702,11705],{},[943,11698,11699],{"align":989},[1661,11700,11701],{},"maxSpeed",[943,11703,11704],{"align":989},"Max transition speed in units per second.",[943,11706,11707],{},[610,11708,11576],{},[925,11710,11711,11716,11719],{},[943,11712,11713],{"align":989},[1661,11714,11715],{},"azimuthRotateSpeed",[943,11717,11718],{"align":989},"Speed of azimuth (horizontal) rotation.",[943,11720,11721],{},[610,11722,11723],{},"1.0",[925,11725,11726,11731,11734],{},[943,11727,11728],{"align":989},[1661,11729,11730],{},"polarRotateSpeed",[943,11732,11733],{"align":989},"Speed of polar (vertical) rotation.",[943,11735,11736],{},[610,11737,11723],{},[925,11739,11740,11745,11748],{},[943,11741,11742],{"align":989},[1661,11743,11744],{},"dollySpeed",[943,11746,11747],{"align":989},"Speed of mouse-wheel dollying.",[943,11749,11750],{},[610,11751,11723],{},[925,11753,11754,11759,11764],{},[943,11755,11756],{"align":989},[1661,11757,11758],{},"dollyDragInverted",[943,11760,11761,11763],{"align":989},[610,11762,953],{}," to invert direction when dollying or zooming via drag.",[943,11765,11766],{},[610,11767,963],{},[925,11769,11770,11775,11778],{},[943,11771,11772],{"align":989},[1661,11773,11774],{},"truckSpeed",[943,11776,11777],{"align":989},"Speed of drag for truck and pedestal.",[943,11779,11780],{},[610,11781,11782],{},"2.0",[925,11784,11785,11790,11795],{},[943,11786,11787],{"align":989},[1661,11788,11789],{},"dollyToCursor",[943,11791,11792,11794],{"align":989},[610,11793,953],{}," to enable Dolly-in to the mouse cursor coords.",[943,11796,11797],{},[610,11798,963],{},[925,11800,11801,11806,11809],{},[943,11802,11803],{"align":989},[1661,11804,11805],{},"dragToOffset",[943,11807,11808],{"align":989},"Whether to drag to offset.",[943,11810,11811],{},[610,11812,963],{},[925,11814,11815,11820,11827],{},[943,11816,11817],{"align":989},[1661,11818,11819],{},"verticalDragToForward",[943,11821,11822,11823,11826],{"align":989},"The same as ",[610,11824,11825],{},".screenSpacePanning"," in Three.js's OrbitControls.",[943,11828,11829],{},[610,11830,963],{},[925,11832,11833,11838,11841],{},[943,11834,11835],{"align":989},[1661,11836,11837],{},"boundaryFriction",[943,11839,11840],{"align":989},"Friction ratio of the boundary.",[943,11842,11843],{},[610,11844,11845],{},"0.0",[925,11847,11848,11853,11860],{},[943,11849,11850],{"align":989},[1661,11851,11852],{},"restThreshold",[943,11854,11855,11856,11859],{"align":989},"Controls how soon the ",[610,11857,11858],{},"rest"," event fires as the camera slows.",[943,11861,11862],{},[610,11863,1878],{},[925,11865,11866,11871,11874],{},[943,11867,11868],{"align":989},[1661,11869,11870],{},"colliderMeshes",[943,11872,11873],{"align":989},"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.",[943,11875,11876],{},[610,11877,3571],{},[925,11879,11880,11885,11888],{},[943,11881,11882],{"align":989},[1661,11883,11884],{},"mouseButtons",[943,11886,11887],{"align":989},"Configuration of actions on mouse input.",[943,11889,1130,11890,11896],{},[1132,11891,11893],{"href":11892},"#user-input-config",[610,11894,11895],{},"User input config"," for details",[925,11898,11899,11904,11907],{},[943,11900,11901],{"align":989},[1661,11902,11903],{},"touches",[943,11905,11906],{"align":989},"Configuration of actions on touch.",[943,11908,1130,11909,11896],{},[1132,11910,11911],{"href":11892},[610,11912,11895],{},[496,11914,11895],{"id":11915},"user-input-config",[606,11917,11918,11919,11921,11922,11924,11925,11933,11934,11936,11937,11940,11941,11944],{},"You can easily override the default user input config by defining ",[610,11920,11884],{}," and/or ",[610,11923,11903],{}," props that correspond to ",[1132,11926,11929,11932],{"href":11927,"rel":11928},"https://github.com/yomotsu/camera-controls?#user-input-config",[1136],[610,11930,11931],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[610,11935,11244],{}," class as ",[610,11938,11939],{},"BaseCameraControls"," which gives you access to the ",[610,11942,11943],{},"ACTION"," enum.",[618,11946,11948],{"className":620,"code":11947,"language":625,"meta":568,"style":568},"\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",[610,11949,11950,11970,11993,12001,12005,12013,12018,12025,12039,12053,12058,12062],{"__ignoreMap":568},[629,11951,11952,11954,11956,11958,11960,11962,11964,11966,11968],{"class":631,"line":569},[629,11953,635],{"class":634},[629,11955,639],{"class":638},[629,11957,646],{"class":642},[629,11959,649],{"class":634},[629,11961,652],{"class":634},[629,11963,656],{"class":655},[629,11965,652],{"class":634},[629,11967,643],{"class":642},[629,11969,661],{"class":634},[629,11971,11972,11974,11976,11979,11981,11983,11985,11987,11989,11991],{"class":631,"line":570},[629,11973,669],{"class":668},[629,11975,672],{"class":634},[629,11977,11978],{"class":675}," BaseCameraControls",[629,11980,679],{"class":634},[629,11982,11283],{"class":675},[629,11984,685],{"class":634},[629,11986,688],{"class":668},[629,11988,691],{"class":634},[629,11990,694],{"class":655},[629,11992,697],{"class":634},[629,11994,11995,11997,11999],{"class":631,"line":700},[629,11996,724],{"class":634},[629,11998,639],{"class":638},[629,12000,661],{"class":634},[629,12002,12003],{"class":631,"line":721},[629,12004,734],{"emptyLinePlaceholder":586},[629,12006,12007,12009,12011],{"class":631,"line":731},[629,12008,635],{"class":634},[629,12010,742],{"class":638},[629,12012,661],{"class":634},[629,12014,12015],{"class":631,"line":737},[629,12016,12017],{"class":675}," ...\n",[629,12019,12020,12022],{"class":631,"line":747},[629,12021,750],{"class":634},[629,12023,12024],{"class":638},"CameraControls\n",[629,12026,12027,12030,12032,12034,12037],{"class":631,"line":770},[629,12028,12029],{"class":642}," :mouse-buttons",[629,12031,649],{"class":634},[629,12033,652],{"class":634},[629,12035,12036],{"class":655},"{ left: BaseCameraControls.ACTION.DOLLY }",[629,12038,3123],{"class":634},[629,12040,12041,12044,12046,12048,12051],{"class":631,"line":782},[629,12042,12043],{"class":642}," :touches",[629,12045,649],{"class":634},[629,12047,652],{"class":634},[629,12049,12050],{"class":655},"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }",[629,12052,3123],{"class":634},[629,12054,12055],{"class":631,"line":792},[629,12056,12057],{"class":634}," />\n",[629,12059,12060],{"class":631,"line":797},[629,12061,12017],{"class":675},[629,12063,12064,12066,12068],{"class":631,"line":819},[629,12065,724],{"class":634},[629,12067,742],{"class":638},[629,12069,661],{"class":634},[4043,12071,12073],{"id":12072},"mouse-buttons","Mouse buttons",[919,12075,12076,12088],{},[922,12077,12078],{},[925,12079,12080,12083,12086],{},[928,12081,12082],{},"Button to assign",[928,12084,12085],{},"Options",[928,12087,936],{},[938,12089,12090,12122,12147,12177],{},[925,12091,12092,12097,12118],{},[943,12093,12094],{},[610,12095,12096],{},"mouseButtons.left",[943,12098,12099,12102,12103,12102,12106,12102,12109,12102,12112,12102,12115],{},[610,12100,12101],{},"ROTATE"," | ",[610,12104,12105],{},"TRUCK",[610,12107,12108],{},"OFFSET",[610,12110,12111],{},"DOLLY",[610,12113,12114],{},"ZOOM",[610,12116,12117],{},"NONE",[943,12119,12120],{},[610,12121,12101],{},[925,12123,12124,12129,12143],{},[943,12125,12126],{},[610,12127,12128],{},"mouseButtons.right",[943,12130,12131,12102,12133,12102,12135,12102,12137,12102,12139,12102,12141],{},[610,12132,12101],{},[610,12134,12105],{},[610,12136,12108],{},[610,12138,12111],{},[610,12140,12114],{},[610,12142,12117],{},[943,12144,12145],{},[610,12146,12105],{},[925,12148,12149,12155,12169],{},[943,12150,12151,12154],{},[610,12152,12153],{},"mouseButtons.wheel"," ¹",[943,12156,12157,12102,12159,12102,12161,12102,12163,12102,12165,12102,12167],{},[610,12158,12101],{},[610,12160,12105],{},[610,12162,12108],{},[610,12164,12111],{},[610,12166,12114],{},[610,12168,12117],{},[943,12170,12171,12173,12174,12176],{},[610,12172,12111],{}," for Perspective camera, ",[610,12175,12114],{}," for Orthographic camera.",[925,12178,12179,12185,12199],{},[943,12180,12181,12184],{},[610,12182,12183],{},"mouseButtons.middle"," ²",[943,12186,12187,12102,12189,12102,12191,12102,12193,12102,12195,12102,12197],{},[610,12188,12101],{},[610,12190,12105],{},[610,12192,12108],{},[610,12194,12111],{},[610,12196,12114],{},[610,12198,12117],{},[943,12200,12201],{},[610,12202,12111],{},[12204,12205,12206,12209],"ol",{},[2208,12207,12208],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[2208,12210,12211],{},"Mouse wheel \"button\" click event.",[4043,12213,12214],{"id":11903},"Touches",[919,12216,12217,12228],{},[922,12218,12219],{},[925,12220,12221,12224,12226],{},[928,12222,12223],{},"Fingers to assign",[928,12225,12085],{},[928,12227,936],{},[938,12229,12230,12258,12306],{},[925,12231,12232,12237,12254],{},[943,12233,12234],{},[610,12235,12236],{},"touches.one",[943,12238,12239,12102,12242,12102,12245,12102,12248,12102,12250,12102,12252],{},[610,12240,12241],{},"TOUCH_ROTATE",[610,12243,12244],{},"TOUCH_TRUCK",[610,12246,12247],{},"TOUCH_OFFSET",[610,12249,12111],{},[610,12251,12114],{},[610,12253,12117],{},[943,12255,12256],{},[610,12257,12241],{},[925,12259,12260,12265,12299],{},[943,12261,12262],{},[610,12263,12264],{},"touches.two",[943,12266,12267,12102,12270,12102,12273,12102,12276,12102,12279,12102,12282,12102,12285,12102,12288,12102,12291,12102,12293,12102,12295,12102,12297],{},[610,12268,12269],{},"TOUCH_DOLLY_TRUCK",[610,12271,12272],{},"TOUCH_DOLLY_OFFSET",[610,12274,12275],{},"TOUCH_DOLLY_ROTATE",[610,12277,12278],{},"TOUCH_ZOOM_TRUCK",[610,12280,12281],{},"TOUCH_ZOOM_OFFSET",[610,12283,12284],{},"TOUCH_ZOOM_ROTATE",[610,12286,12287],{},"TOUCH_DOLLY",[610,12289,12290],{},"TOUCH_ZOOM",[610,12292,12241],{},[610,12294,12244],{},[610,12296,12247],{},[610,12298,12117],{},[943,12300,12301,12173,12303,12305],{},[610,12302,12269],{},[610,12304,12278],{}," for Othographic camera.",[925,12307,12308,12313,12335],{},[943,12309,12310],{},[610,12311,12312],{},"touches.three",[943,12314,12315,12102,12317,12102,12319,12102,12321,12102,12323,12102,12325,12102,12327,12102,12329,12102,12331,12102,12333],{},[610,12316,12269],{},[610,12318,12272],{},[610,12320,12275],{},[610,12322,12278],{},[610,12324,12281],{},[610,12326,12284],{},[610,12328,12241],{},[610,12330,12244],{},[610,12332,12247],{},[610,12334,12117],{},[943,12336,12337],{},[610,12338,12244],{},[496,12340,12342],{"id":12341},"events","Events",[618,12344,12346],{"className":620,"code":12345,"language":625,"meta":568,"style":568},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[610,12347,12348],{"__ignoreMap":568},[629,12349,12350,12352,12354,12356,12359,12361,12363,12366,12368,12370,12373,12375,12377,12380,12382,12384,12387,12389,12391,12394,12396],{"class":631,"line":569},[629,12351,635],{"class":634},[629,12353,11244],{"class":638},[629,12355,4246],{"class":634},[629,12357,12358],{"class":642},"change",[629,12360,649],{"class":634},[629,12362,652],{"class":634},[629,12364,12365],{"class":675},"onChange",[629,12367,652],{"class":634},[629,12369,4246],{"class":634},[629,12371,12372],{"class":642},"start",[629,12374,649],{"class":634},[629,12376,652],{"class":634},[629,12378,12379],{"class":675},"onStart",[629,12381,652],{"class":634},[629,12383,4246],{"class":634},[629,12385,12386],{"class":642},"end",[629,12388,649],{"class":634},[629,12390,652],{"class":634},[629,12392,12393],{"class":675},"onEnd",[629,12395,652],{"class":634},[629,12397,779],{"class":634},[919,12399,12400,12408],{},[922,12401,12402],{},[925,12403,12404,12406],{},[928,12405,5751],{"align":989},[928,12407,933],{"align":989},[938,12409,12410,12419,12428],{},[925,12411,12412,12416],{},[943,12413,12414],{"align":989},[1661,12415,12372],{},[943,12417,12418],{"align":989},"Dispatched when the control starts to change.",[925,12420,12421,12425],{},[943,12422,12423],{"align":989},[1661,12424,12358],{},[943,12426,12427],{"align":989},"Dispatched when the control changes.",[925,12429,12430,12434],{},[943,12431,12432],{"align":989},[1661,12433,12386],{},[943,12435,12436],{"align":989},"Dispatched when the control ends to change.",[1319,12438,12439],{},"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":568,"searchDepth":569,"depth":570,"links":12441},[12442,12443,12444,12448],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":11915,"depth":570,"text":11895,"children":12445},[12446,12447],{"id":12072,"depth":700,"text":12073},{"id":11903,"depth":700,"text":12214},{"id":12341,"depth":570,"text":12342},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":95,"description":12449},"2hfwAcOw9kCB60pKAgItRmaKk8A71rNBCTtreEGn7EI",{"id":12454,"title":99,"body":12455,"description":12908,"extension":583,"links":584,"meta":12909,"navigation":586,"path":100,"seo":12910,"stem":101,"__hash__":12911},"docs/2.api/2.controls/keyboard-controls.md",{"type":493,"value":12456,"toc":12903},[12457,12462,12468,12553,12569,12571,12726,12730,12732,12811,12813,12864,12900],[600,12458,12459],{},[12460,12461],"controls-keyboard-controls",{},[606,12463,12464,12467],{},[610,12465,12466],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[919,12469,12470,12479],{},[922,12471,12472],{},[925,12473,12474,12477],{},[928,12475,12476],{"align":989},"Keyboard",[928,12478,6398],{"align":989},[938,12480,12481,12494,12507,12520,12533,12543],{},[925,12482,12483,12491],{},[943,12484,12485,3328,12488],{"align":989},[610,12486,12487],{},"W",[610,12489,12490],{},"↑",[943,12492,12493],{"align":989},"Move forward",[925,12495,12496,12504],{},[943,12497,12498,3328,12501],{"align":989},[610,12499,12500],{},"S",[610,12502,12503],{},"↓",[943,12505,12506],{"align":989},"Move backward",[925,12508,12509,12517],{},[943,12510,12511,3328,12514],{"align":989},[610,12512,12513],{},"A",[610,12515,12516],{},"←",[943,12518,12519],{"align":989},"Move left",[925,12521,12522,12530],{},[943,12523,12524,3328,12527],{"align":989},[610,12525,12526],{},"D",[610,12528,12529],{},"→",[943,12531,12532],{"align":989},"Move right",[925,12534,12535,12540],{},[943,12536,12537],{"align":989},[610,12538,12539],{},"E",[943,12541,12542],{"align":989},"Move up",[925,12544,12545,12550],{},[943,12546,12547],{"align":989},[610,12548,12549],{},"Q",[943,12551,12552],{"align":989},"Move down",[1997,12554,12555],{},[606,12556,12557,12560,12561,12564,12565,1138],{},[610,12558,12559],{},"KeyboardControls"," uses ",[610,12562,12563],{},"PointerLockControls"," under the hood. You can use ",[1132,12566,12568],{"href":12567},"pointer-lock-controls#props","PointerLockControls props and events",[496,12570,15],{"id":616},[618,12572,12575],{"className":620,"code":12573,"highlights":12574,"language":625,"meta":568,"style":568},"\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",[700,792],[610,12576,12577,12597,12615,12639,12647,12651,12659,12667,12675,12693,12702,12710,12718],{"__ignoreMap":568},[629,12578,12579,12581,12583,12585,12587,12589,12591,12593,12595],{"class":631,"line":569},[629,12580,635],{"class":634},[629,12582,639],{"class":638},[629,12584,643],{"class":642},[629,12586,646],{"class":642},[629,12588,649],{"class":634},[629,12590,652],{"class":634},[629,12592,656],{"class":655},[629,12594,652],{"class":634},[629,12596,661],{"class":634},[629,12598,12599,12601,12603,12605,12607,12609,12611,12613],{"class":631,"line":570},[629,12600,669],{"class":668},[629,12602,672],{"class":634},[629,12604,707],{"class":675},[629,12606,685],{"class":634},[629,12608,688],{"class":668},[629,12610,691],{"class":634},[629,12612,716],{"class":655},[629,12614,697],{"class":634},[629,12616,12618,12620,12622,12625,12627,12629,12631,12633,12635,12637],{"class":12617,"line":700},[631,665],[629,12619,669],{"class":668},[629,12621,672],{"class":634},[629,12623,12624],{"class":675}," KeyboardControls",[629,12626,679],{"class":634},[629,12628,1389],{"class":675},[629,12630,685],{"class":634},[629,12632,688],{"class":668},[629,12634,691],{"class":634},[629,12636,694],{"class":655},[629,12638,697],{"class":634},[629,12640,12641,12643,12645],{"class":631,"line":721},[629,12642,724],{"class":634},[629,12644,639],{"class":638},[629,12646,661],{"class":634},[629,12648,12649],{"class":631,"line":731},[629,12650,734],{"emptyLinePlaceholder":586},[629,12652,12653,12655,12657],{"class":631,"line":737},[629,12654,635],{"class":634},[629,12656,742],{"class":638},[629,12658,661],{"class":634},[629,12660,12661,12663,12665],{"class":631,"line":747},[629,12662,750],{"class":634},[629,12664,753],{"class":638},[629,12666,661],{"class":634},[629,12668,12669,12671,12673],{"class":631,"line":770},[629,12670,773],{"class":634},[629,12672,776],{"class":638},[629,12674,779],{"class":634},[629,12676,12677,12679,12681,12683,12685,12687,12689,12691],{"class":631,"line":782},[629,12678,773],{"class":634},[629,12680,209],{"class":638},[629,12682,1931],{"class":642},[629,12684,649],{"class":634},[629,12686,652],{"class":634},[629,12688,1938],{"class":655},[629,12690,652],{"class":634},[629,12692,779],{"class":634},[629,12694,12696,12698,12700],{"class":12695,"line":792},[631,665],[629,12697,773],{"class":634},[629,12699,12559],{"class":638},[629,12701,779],{"class":634},[629,12703,12704,12706,12708],{"class":631,"line":797},[629,12705,773],{"class":634},[629,12707,8041],{"class":638},[629,12709,779],{"class":634},[629,12711,12712,12714,12716],{"class":631,"line":819},[629,12713,897],{"class":634},[629,12715,753],{"class":638},[629,12717,661],{"class":634},[629,12719,12720,12722,12724],{"class":631,"line":623},[629,12721,724],{"class":634},[629,12723,742],{"class":638},[629,12725,661],{"class":634},[3191,12727,12728],{},[606,12729,11457],{},[496,12731,914],{"id":913},[919,12733,12734,12744],{},[922,12735,12736],{},[925,12737,12738,12740,12742],{},[928,12739,930],{"align":989},[928,12741,933],{"align":989},[928,12743,936],{},[938,12745,12746,12758,12773,12785,12797],{},[925,12747,12748,12753,12756],{},[943,12749,12750],{"align":989},[1661,12751,12752],{},"moveSpeed",[943,12754,12755],{"align":989},"Speed movement.",[943,12757,5721],{},[925,12759,12760,12764,12769],{},[943,12761,12762],{"align":989},[1661,12763,11483],{},[943,12765,950,12766,12768],{"align":989},[610,12767,953],{},", the controls will be set as the default controls for the scene.",[943,12770,12771],{},[610,12772,953],{},[925,12774,12775,12779,12781],{},[943,12776,12777],{"align":989},[1661,12778,11497],{},[943,12780,11500],{"align":989},[943,12782,12783],{},[610,12784,1171],{},[925,12786,12787,12791,12793],{},[943,12788,12789],{"align":989},[1661,12790,11511],{},[943,12792,11514],{"align":989},[943,12794,12795],{},[610,12796,1171],{},[925,12798,12799,12804,12807],{},[943,12800,12801],{"align":989},[1661,12802,12803],{},"selector",[943,12805,12806],{"align":989},"Accept an id element as string. If set, the new element will be used as the trigger",[943,12808,12809],{},[610,12810,1171],{},[496,12812,12342],{"id":12341},[618,12814,12816],{"className":620,"code":12815,"language":625,"meta":568,"style":568},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[610,12817,12818],{"__ignoreMap":568},[629,12819,12820,12822,12824,12826,12828,12830,12832,12834,12836,12838,12841,12843,12845,12847,12850,12852,12854,12857,12860,12862],{"class":631,"line":569},[629,12821,635],{"class":634},[629,12823,12559],{"class":638},[629,12825,4246],{"class":634},[629,12827,12358],{"class":642},[629,12829,649],{"class":634},[629,12831,652],{"class":634},[629,12833,12365],{"class":675},[629,12835,652],{"class":634},[629,12837,4246],{"class":634},[629,12839,12840],{"class":642},"is-lock",[629,12842,649],{"class":634},[629,12844,652],{"class":634},[629,12846,2429],{"class":634},[629,12848,12849],{"class":6830},"state",[629,12851,3332],{"class":634},[629,12853,3669],{"class":642},[629,12855,12856],{"class":2426}," isActive",[629,12858,12859],{"class":675},"(state)",[629,12861,652],{"class":634},[629,12863,779],{"class":675},[919,12865,12866,12874],{},[922,12867,12868],{},[925,12869,12870,12872],{},[928,12871,5751],{"align":989},[928,12873,933],{"align":989},[938,12875,12876,12892],{},[925,12877,12878,12883],{},[943,12879,12880],{"align":989},[1661,12881,12882],{},"isLock",[943,12884,12885,12886,12888,12889,12891],{"align":989},"Return ",[610,12887,953],{}," if \"lock\", ",[610,12890,963],{}," if \"unlock\" events are triggered.",[925,12893,12894,12898],{},[943,12895,12896],{"align":989},[1661,12897,12358],{},[943,12899,12427],{"align":989},[1319,12901,12902],{},"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":568,"searchDepth":569,"depth":570,"links":12904},[12905,12906,12907],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",{},{"title":99,"description":12908},"AiV8qE1JDgLILe5KGuJAaEvSAzQi0kQx9m-mrBt-6b0",{"id":12913,"title":103,"body":12914,"description":13209,"extension":583,"links":584,"meta":13210,"navigation":586,"path":104,"seo":13211,"stem":105,"__hash__":13212},"docs/2.api/2.controls/map-controls.md",{"type":493,"value":12915,"toc":13205},[12916,12921,12929,12931,13121,13126,13128,13198,13203],[600,12917,12918],{},[12919,12920],"controls-map-controls",{},[606,12922,12923,12928],{},[1132,12924,12927],{"href":12925,"rel":12926},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1136],"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.",[496,12930,15],{"id":616},[618,12932,12935],{"className":620,"code":12933,"highlights":12934,"language":625,"meta":568,"style":568},"\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",[747],[610,12936,12937,12947,12966,12974,12982,13000,13018,13027,13045,13063,13071,13079,13097,13105,13113],{"__ignoreMap":568},[629,12938,12939,12941,12943,12945],{"class":631,"line":569},[629,12940,635],{"class":634},[629,12942,639],{"class":638},[629,12944,643],{"class":642},[629,12946,661],{"class":634},[629,12948,12949,12951,12953,12956,12958,12960,12962,12964],{"class":631,"line":570},[629,12950,669],{"class":668},[629,12952,672],{"class":634},[629,12954,12955],{"class":675}," MapControls",[629,12957,685],{"class":634},[629,12959,688],{"class":668},[629,12961,8282],{"class":634},[629,12963,694],{"class":655},[629,12965,3123],{"class":634},[629,12967,12968,12970,12972],{"class":631,"line":700},[629,12969,724],{"class":634},[629,12971,639],{"class":638},[629,12973,661],{"class":634},[629,12975,12976,12978,12980],{"class":631,"line":721},[629,12977,635],{"class":634},[629,12979,742],{"class":638},[629,12981,661],{"class":634},[629,12983,12984,12986,12988,12990,12992,12994,12996,12998],{"class":631,"line":731},[629,12985,750],{"class":634},[629,12987,753],{"class":638},[629,12989,756],{"class":642},[629,12991,649],{"class":634},[629,12993,652],{"class":634},[629,12995,9852],{"class":655},[629,12997,652],{"class":634},[629,12999,661],{"class":634},[629,13001,13002,13004,13006,13008,13010,13012,13014,13016],{"class":631,"line":737},[629,13003,773],{"class":634},[629,13005,776],{"class":638},[629,13007,1477],{"class":642},[629,13009,649],{"class":634},[629,13011,652],{"class":634},[629,13013,11342],{"class":655},[629,13015,652],{"class":634},[629,13017,779],{"class":634},[629,13019,13021,13023,13025],{"class":13020,"line":747},[631,665],[629,13022,773],{"class":634},[629,13024,12927],{"class":638},[629,13026,779],{"class":634},[629,13028,13029,13031,13033,13035,13037,13039,13041,13043],{"class":631,"line":770},[629,13030,773],{"class":634},[629,13032,209],{"class":638},[629,13034,805],{"class":642},[629,13036,649],{"class":634},[629,13038,652],{"class":634},[629,13040,812],{"class":655},[629,13042,652],{"class":634},[629,13044,661],{"class":634},[629,13046,13047,13049,13051,13053,13055,13057,13059,13061],{"class":631,"line":782},[629,13048,845],{"class":634},[629,13050,11380],{"class":638},[629,13052,2681],{"class":642},[629,13054,649],{"class":634},[629,13056,652],{"class":634},[629,13058,11389],{"class":655},[629,13060,652],{"class":634},[629,13062,779],{"class":634},[629,13064,13065,13067,13069],{"class":631,"line":792},[629,13066,887],{"class":634},[629,13068,209],{"class":638},[629,13070,661],{"class":634},[629,13072,13073,13075,13077],{"class":631,"line":797},[629,13074,773],{"class":634},[629,13076,8448],{"class":638},[629,13078,779],{"class":634},[629,13080,13081,13083,13085,13087,13089,13091,13093,13095],{"class":631,"line":819},[629,13082,773],{"class":634},[629,13084,8467],{"class":638},[629,13086,1477],{"class":642},[629,13088,649],{"class":634},[629,13090,652],{"class":634},[629,13092,11424],{"class":655},[629,13094,652],{"class":634},[629,13096,779],{"class":634},[629,13098,13099,13101,13103],{"class":631,"line":623},[629,13100,773],{"class":634},[629,13102,8041],{"class":638},[629,13104,779],{"class":634},[629,13106,13107,13109,13111],{"class":631,"line":842},[629,13108,897],{"class":634},[629,13110,753],{"class":638},[629,13112,661],{"class":634},[629,13114,13115,13117,13119],{"class":631,"line":853},[629,13116,724],{"class":634},[629,13118,742],{"class":638},[629,13120,661],{"class":634},[3191,13122,13123],{},[606,13124,13125],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[496,13127,914],{"id":913},[919,13129,13130,13140],{},[922,13131,13132],{},[925,13133,13134,13136,13138],{},[928,13135,930],{"align":989},[928,13137,933],{"align":989},[928,13139,936],{},[938,13141,13142,13156,13168,13181],{},[925,13143,13144,13148,13152],{},[943,13145,13146],{"align":989},[1661,13147,11483],{},[943,13149,950,13150,12768],{"align":989},[610,13151,953],{},[943,13153,13154],{},[610,13155,963],{},[925,13157,13158,13162,13164],{},[943,13159,13160],{"align":989},[1661,13161,11497],{},[943,13163,11500],{"align":989},[943,13165,13166],{},[610,13167,1171],{},[925,13169,13170,13174,13177],{},[943,13171,13172],{"align":989},[1661,13173,11511],{},[943,13175,13176],{"align":989},"The dom element to listen to.",[943,13178,13179],{},[610,13180,1171],{},[925,13182,13183,13188,13194],{},[943,13184,13185],{"align":989},[1661,13186,13187],{},"screenSpacePanning",[943,13189,13190,13191,13193],{"align":989},"Defines how the camera's position is translated when panning. If ",[610,13192,953],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[943,13195,13196],{},[610,13197,963],{},[1997,13199,13200],{},[606,13201,13202],{},"All the props of the orbit controls component apply here too.",[1319,13204,12439],{},{"title":568,"searchDepth":569,"depth":570,"links":13206},[13207,13208],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"similar to OrbitControls but for map views",{},{"title":103,"description":13209},"kfzpqZnb7itAV_eVKFqO6wVSm6EFixFWw9fpJO8O0ac",{"id":13214,"title":107,"body":13215,"description":13911,"extension":583,"links":584,"meta":13912,"navigation":586,"path":108,"seo":13913,"stem":109,"__hash__":13914},"docs/2.api/2.controls/orbit-controls.md",{"type":493,"value":13216,"toc":13906},[13217,13222,13229,13231,13420,13424,13426,13817,13819,13868,13904],[600,13218,13219],{},[13220,13221],"controls-orbit-controls",{},[606,13223,13224,13228],{},[1132,13225,787],{"href":13226,"rel":13227},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1136]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[496,13230,15],{"id":616},[618,13232,13235],{"className":620,"code":13233,"highlights":13234,"language":625,"meta":568,"style":568},"\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",[747],[610,13236,13237,13247,13265,13273,13281,13299,13317,13326,13344,13362,13370,13378,13396,13404,13412],{"__ignoreMap":568},[629,13238,13239,13241,13243,13245],{"class":631,"line":569},[629,13240,635],{"class":634},[629,13242,639],{"class":638},[629,13244,643],{"class":642},[629,13246,661],{"class":634},[629,13248,13249,13251,13253,13255,13257,13259,13261,13263],{"class":631,"line":570},[629,13250,669],{"class":668},[629,13252,672],{"class":634},[629,13254,682],{"class":675},[629,13256,685],{"class":634},[629,13258,688],{"class":668},[629,13260,8282],{"class":634},[629,13262,694],{"class":655},[629,13264,3123],{"class":634},[629,13266,13267,13269,13271],{"class":631,"line":700},[629,13268,724],{"class":634},[629,13270,639],{"class":638},[629,13272,661],{"class":634},[629,13274,13275,13277,13279],{"class":631,"line":721},[629,13276,635],{"class":634},[629,13278,742],{"class":638},[629,13280,661],{"class":634},[629,13282,13283,13285,13287,13289,13291,13293,13295,13297],{"class":631,"line":731},[629,13284,750],{"class":634},[629,13286,753],{"class":638},[629,13288,756],{"class":642},[629,13290,649],{"class":634},[629,13292,652],{"class":634},[629,13294,9852],{"class":655},[629,13296,652],{"class":634},[629,13298,661],{"class":634},[629,13300,13301,13303,13305,13307,13309,13311,13313,13315],{"class":631,"line":737},[629,13302,773],{"class":634},[629,13304,776],{"class":638},[629,13306,1477],{"class":642},[629,13308,649],{"class":634},[629,13310,652],{"class":634},[629,13312,11342],{"class":655},[629,13314,652],{"class":634},[629,13316,779],{"class":634},[629,13318,13320,13322,13324],{"class":13319,"line":747},[631,665],[629,13321,773],{"class":634},[629,13323,787],{"class":638},[629,13325,779],{"class":634},[629,13327,13328,13330,13332,13334,13336,13338,13340,13342],{"class":631,"line":770},[629,13329,773],{"class":634},[629,13331,209],{"class":638},[629,13333,805],{"class":642},[629,13335,649],{"class":634},[629,13337,652],{"class":634},[629,13339,812],{"class":655},[629,13341,652],{"class":634},[629,13343,661],{"class":634},[629,13345,13346,13348,13350,13352,13354,13356,13358,13360],{"class":631,"line":782},[629,13347,845],{"class":634},[629,13349,11380],{"class":638},[629,13351,2681],{"class":642},[629,13353,649],{"class":634},[629,13355,652],{"class":634},[629,13357,11389],{"class":655},[629,13359,652],{"class":634},[629,13361,779],{"class":634},[629,13363,13364,13366,13368],{"class":631,"line":792},[629,13365,887],{"class":634},[629,13367,209],{"class":638},[629,13369,661],{"class":634},[629,13371,13372,13374,13376],{"class":631,"line":797},[629,13373,773],{"class":634},[629,13375,8448],{"class":638},[629,13377,779],{"class":634},[629,13379,13380,13382,13384,13386,13388,13390,13392,13394],{"class":631,"line":819},[629,13381,773],{"class":634},[629,13383,8467],{"class":638},[629,13385,1477],{"class":642},[629,13387,649],{"class":634},[629,13389,652],{"class":634},[629,13391,11424],{"class":655},[629,13393,652],{"class":634},[629,13395,779],{"class":634},[629,13397,13398,13400,13402],{"class":631,"line":623},[629,13399,773],{"class":634},[629,13401,8041],{"class":638},[629,13403,779],{"class":634},[629,13405,13406,13408,13410],{"class":631,"line":842},[629,13407,897],{"class":634},[629,13409,753],{"class":638},[629,13411,661],{"class":634},[629,13413,13414,13416,13418],{"class":631,"line":853},[629,13415,724],{"class":634},[629,13417,742],{"class":638},[629,13419,661],{"class":634},[3191,13421,13422],{},[606,13423,11457],{},[496,13425,914],{"id":913},[919,13427,13428,13438],{},[922,13429,13430],{},[925,13431,13432,13434,13436],{},[928,13433,930],{"align":989},[928,13435,933],{"align":989},[928,13437,936],{},[938,13439,13440,13454,13466,13478,13492,13508,13526,13540,13558,13572,13587,13602,13623,13641,13654,13667,13680,13693,13706,13719,13733,13747,13761,13775,13789,13803],{},[925,13441,13442,13446,13450],{},[943,13443,13444],{"align":989},[1661,13445,11483],{},[943,13447,950,13448,12768],{"align":989},[610,13449,953],{},[943,13451,13452],{},[610,13453,963],{},[925,13455,13456,13460,13462],{},[943,13457,13458],{"align":989},[1661,13459,11497],{},[943,13461,11500],{"align":989},[943,13463,13464],{},[610,13465,1171],{},[925,13467,13468,13472,13474],{},[943,13469,13470],{"align":989},[1661,13471,11511],{},[943,13473,13176],{"align":989},[943,13475,13476],{},[610,13477,1171],{},[925,13479,13480,13485,13488],{},[943,13481,13482],{"align":989},[1661,13483,13484],{},"target",[943,13486,13487],{"align":989},"The target to orbit around.",[943,13489,13490],{},[610,13491,1171],{},[925,13493,13494,13499,13504],{},[943,13495,13496],{"align":989},[1661,13497,13498],{},"enableDamping",[943,13500,950,13501,13503],{"align":989},[610,13502,953],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[943,13505,13506],{},[610,13507,953],{},[925,13509,13510,13515,13522],{},[943,13511,13512],{"align":989},[1661,13513,13514],{},"dampingFactor",[943,13516,13517,13518,13521],{"align":989},"The damping inertia used if ",[610,13519,13520],{},".enableDamping"," is set to true.",[943,13523,13524],{},[610,13525,9704],{},[925,13527,13528,13533,13536],{},[943,13529,13530],{"align":989},[1661,13531,13532],{},"autoRotate",[943,13534,13535],{"align":989},"Set to true to automatically rotate around the target.",[943,13537,13538],{},[610,13539,963],{},[925,13541,13542,13547,13554],{},[943,13543,13544],{"align":989},[1661,13545,13546],{},"autoRotateSpeed",[943,13548,13549,13550,13553],{"align":989},"How fast to rotate around the target if ",[610,13551,13552],{},".autoRotate"," is true.",[943,13555,13556],{},[610,13557,812],{},[925,13559,13560,13565,13568],{},[943,13561,13562],{"align":989},[1661,13563,13564],{},"enablePan",[943,13566,13567],{"align":989},"Whether to enable panning.",[943,13569,13570],{},[610,13571,953],{},[925,13573,13574,13579,13582],{},[943,13575,13576],{"align":989},[1661,13577,13578],{},"keyPanSpeed",[943,13580,13581],{"align":989},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[943,13583,13584],{},[610,13585,13586],{},"7.0",[925,13588,13589,13594,13597],{},[943,13590,13591],{"align":989},[1661,13592,13593],{},"keys",[943,13595,13596],{"align":989},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[943,13598,13599],{},[610,13600,13601],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[925,13603,13604,13608,13619],{},[943,13605,13606],{"align":989},[1661,13607,11568],{},[943,13609,13610,13611,13614,13615,13618],{"align":989},"How far you can orbit horizontally, upper limit. If set, the interval ",[629,13612,13613],{}," min, max"," must be a sub-interval of ",[629,13616,13617],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[943,13620,13621],{},[610,13622,11576],{},[925,13624,13625,13629,13637],{},[943,13626,13627],{"align":989},[1661,13628,11553],{},[943,13630,13631,13632,13614,13634,13636],{"align":989},"How far you can orbit horizontally, lower limit. If set, the interval ",[629,13633,13613],{},[629,13635,13617],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[943,13638,13639],{},[610,13640,11561],{},[925,13642,13643,13647,13650],{},[943,13644,13645],{"align":989},[1661,13646,11539],{},[943,13648,13649],{"align":989},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[943,13651,13652],{},[610,13653,9725],{},[925,13655,13656,13660,13663],{},[943,13657,13658],{"align":989},[1661,13659,11525],{},[943,13661,13662],{"align":989},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[943,13664,13665],{},[610,13666,957],{},[925,13668,13669,13673,13676],{},[943,13670,13671],{"align":989},[1661,13672,11598],{},[943,13674,13675],{"align":989},"The minimum distance of the camera to the target. Default is 0.",[943,13677,13678],{},[610,13679,957],{},[925,13681,13682,13686,13689],{},[943,13683,13684],{"align":989},[1661,13685,11613],{},[943,13687,13688],{"align":989},"The maximum distance of the camera to the target. Default is Infinity.",[943,13690,13691],{},[610,13692,11576],{},[925,13694,13695,13699,13702],{},[943,13696,13697],{"align":989},[1661,13698,11643],{},[943,13700,13701],{"align":989},"The minimum field of view angle, in radians. Default is 0.",[943,13703,13704],{},[610,13705,957],{},[925,13707,13708,13712,13715],{},[943,13709,13710],{"align":989},[1661,13711,11657],{},[943,13713,13714],{"align":989},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[943,13716,13717],{},[610,13718,11576],{},[925,13720,13721,13725,13728],{},[943,13722,13723],{"align":989},[1661,13724,11903],{},[943,13726,13727],{"align":989},"This object contains references to the touch actions used by the controls.",[943,13729,13730],{},[610,13731,13732],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[925,13734,13735,13739,13742],{},[943,13736,13737],{"align":989},[1661,13738,11884],{},[943,13740,13741],{"align":989},"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.",[943,13743,13744],{},[610,13745,13746],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[925,13748,13749,13754,13757],{},[943,13750,13751],{"align":989},[1661,13752,13753],{},"enableZoom",[943,13755,13756],{"align":989},"Whether to enable zooming.",[943,13758,13759],{},[610,13760,953],{},[925,13762,13763,13768,13771],{},[943,13764,13765],{"align":989},[1661,13766,13767],{},"zoomSpeed",[943,13769,13770],{"align":989},"How fast to zoom in and out. Default is 1.",[943,13772,13773],{},[610,13774,1866],{},[925,13776,13777,13782,13785],{},[943,13778,13779],{"align":989},[1661,13780,13781],{},"enableRotate",[943,13783,13784],{"align":989},"Whether to enable rotating.",[943,13786,13787],{},[610,13788,953],{},[925,13790,13791,13796,13799],{},[943,13792,13793],{"align":989},[1661,13794,13795],{},"rotateSpeed",[943,13797,13798],{"align":989},"How fast to rotate around the target. Default is 1.",[943,13800,13801],{},[610,13802,1866],{},[925,13804,13805,13809,13813],{},[943,13806,13807],{"align":989},[1661,13808,13187],{},[943,13810,13190,13811,13193],{"align":989},[610,13812,953],{},[943,13814,13815],{},[610,13816,953],{},[496,13818,12342],{"id":12341},[618,13820,13822],{"className":620,"code":13821,"language":625,"meta":568,"style":568},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[610,13823,13824],{"__ignoreMap":568},[629,13825,13826,13828,13830,13832,13834,13836,13838,13840,13842,13844,13846,13848,13850,13852,13854,13856,13858,13860,13862,13864,13866],{"class":631,"line":569},[629,13827,635],{"class":634},[629,13829,787],{"class":638},[629,13831,4246],{"class":634},[629,13833,12358],{"class":642},[629,13835,649],{"class":634},[629,13837,652],{"class":634},[629,13839,12365],{"class":675},[629,13841,652],{"class":634},[629,13843,4246],{"class":634},[629,13845,12372],{"class":642},[629,13847,649],{"class":634},[629,13849,652],{"class":634},[629,13851,12379],{"class":675},[629,13853,652],{"class":634},[629,13855,4246],{"class":634},[629,13857,12386],{"class":642},[629,13859,649],{"class":634},[629,13861,652],{"class":634},[629,13863,12393],{"class":675},[629,13865,652],{"class":634},[629,13867,779],{"class":634},[919,13869,13870,13878],{},[922,13871,13872],{},[925,13873,13874,13876],{},[928,13875,5751],{"align":989},[928,13877,933],{"align":989},[938,13879,13880,13888,13896],{},[925,13881,13882,13886],{},[943,13883,13884],{"align":989},[1661,13885,12372],{},[943,13887,12418],{"align":989},[925,13889,13890,13894],{},[943,13891,13892],{"align":989},[1661,13893,12358],{},[943,13895,12427],{"align":989},[925,13897,13898,13902],{},[943,13899,13900],{"align":989},[1661,13901,12386],{},[943,13903,12436],{"align":989},[1319,13905,12439],{},{"title":568,"searchDepth":569,"depth":570,"links":13907},[13908,13909,13910],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},"Allows you to orbit around the scene",{},{"title":107,"description":13911},"XWrClwQmT_iqfXhEFazDO2swYkiJCagLQjTOAb5xuyM",{"id":13916,"title":111,"body":13917,"description":14267,"extension":583,"links":584,"meta":14268,"navigation":586,"path":112,"seo":14269,"stem":113,"__hash__":14270},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":493,"value":13918,"toc":14262},[13919,13924,13931,13950,13952,14107,14111,14113,14178,14180,14227,14260],[600,13920,13921],{},[13922,13923],"controls-pointer-lock-controls",{},[606,13925,13926,13930],{},[1132,13927,12563],{"href":13928,"rel":13929},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1136]," 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.",[3191,13932,13933],{},[606,13934,13935,13936,13949],{},"This control uses the ",[629,13937,13939,13942],{"style":13938},"background-color:#222;padding:0.25rem;border-radius:4px;",[1132,13940],{"href":108,"style":13941},"color:#f7f7f7;text-decoration:none",[1132,13943,13946],{"href":13944,"rel":13945},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1136],[610,13947,13948],{},"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",[496,13951,15],{"id":616},[618,13953,13956],{"className":620,"code":13954,"highlights":13955,"language":625,"meta":568,"style":568},"\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",[700,792],[610,13957,13958,13978,13996,14020,14028,14032,14040,14048,14056,14074,14083,14091,14099],{"__ignoreMap":568},[629,13959,13960,13962,13964,13966,13968,13970,13972,13974,13976],{"class":631,"line":569},[629,13961,635],{"class":634},[629,13963,639],{"class":638},[629,13965,643],{"class":642},[629,13967,646],{"class":642},[629,13969,649],{"class":634},[629,13971,652],{"class":634},[629,13973,656],{"class":655},[629,13975,652],{"class":634},[629,13977,661],{"class":634},[629,13979,13980,13982,13984,13986,13988,13990,13992,13994],{"class":631,"line":570},[629,13981,669],{"class":668},[629,13983,672],{"class":634},[629,13985,707],{"class":675},[629,13987,685],{"class":634},[629,13989,688],{"class":668},[629,13991,691],{"class":634},[629,13993,716],{"class":655},[629,13995,697],{"class":634},[629,13997,13999,14001,14003,14006,14008,14010,14012,14014,14016,14018],{"class":13998,"line":700},[631,665],[629,14000,669],{"class":668},[629,14002,672],{"class":634},[629,14004,14005],{"class":675}," PointerLockControls",[629,14007,679],{"class":634},[629,14009,1389],{"class":675},[629,14011,685],{"class":634},[629,14013,688],{"class":668},[629,14015,691],{"class":634},[629,14017,694],{"class":655},[629,14019,697],{"class":634},[629,14021,14022,14024,14026],{"class":631,"line":721},[629,14023,724],{"class":634},[629,14025,639],{"class":638},[629,14027,661],{"class":634},[629,14029,14030],{"class":631,"line":731},[629,14031,734],{"emptyLinePlaceholder":586},[629,14033,14034,14036,14038],{"class":631,"line":737},[629,14035,635],{"class":634},[629,14037,742],{"class":638},[629,14039,661],{"class":634},[629,14041,14042,14044,14046],{"class":631,"line":747},[629,14043,750],{"class":634},[629,14045,753],{"class":638},[629,14047,661],{"class":634},[629,14049,14050,14052,14054],{"class":631,"line":770},[629,14051,773],{"class":634},[629,14053,776],{"class":638},[629,14055,779],{"class":634},[629,14057,14058,14060,14062,14064,14066,14068,14070,14072],{"class":631,"line":782},[629,14059,773],{"class":634},[629,14061,209],{"class":638},[629,14063,1931],{"class":642},[629,14065,649],{"class":634},[629,14067,652],{"class":634},[629,14069,1938],{"class":655},[629,14071,652],{"class":634},[629,14073,779],{"class":634},[629,14075,14077,14079,14081],{"class":14076,"line":792},[631,665],[629,14078,773],{"class":634},[629,14080,12563],{"class":638},[629,14082,779],{"class":634},[629,14084,14085,14087,14089],{"class":631,"line":797},[629,14086,773],{"class":634},[629,14088,8041],{"class":638},[629,14090,779],{"class":634},[629,14092,14093,14095,14097],{"class":631,"line":819},[629,14094,897],{"class":634},[629,14096,753],{"class":638},[629,14098,661],{"class":634},[629,14100,14101,14103,14105],{"class":631,"line":623},[629,14102,724],{"class":634},[629,14104,742],{"class":638},[629,14106,661],{"class":634},[3191,14108,14109],{},[606,14110,11457],{},[496,14112,914],{"id":913},[919,14114,14115,14125],{},[922,14116,14117],{},[925,14118,14119,14121,14123],{},[928,14120,930],{"align":989},[928,14122,933],{"align":989},[928,14124,936],{},[938,14126,14127,14141,14153,14165],{},[925,14128,14129,14133,14137],{},[943,14130,14131],{"align":989},[1661,14132,11483],{},[943,14134,950,14135,12768],{"align":989},[610,14136,953],{},[943,14138,14139],{},[610,14140,963],{},[925,14142,14143,14147,14149],{},[943,14144,14145],{"align":989},[1661,14146,11497],{},[943,14148,11500],{"align":989},[943,14150,14151],{},[610,14152,1171],{},[925,14154,14155,14159,14161],{},[943,14156,14157],{"align":989},[1661,14158,11511],{},[943,14160,13176],{"align":989},[943,14162,14163],{},[610,14164,1171],{},[925,14166,14167,14171,14174],{},[943,14168,14169],{"align":989},[1661,14170,12803],{},[943,14172,14173],{"align":989},"Accept an id element as string, if it is set, the new element will be used as the trigger",[943,14175,14176],{},[610,14177,1171],{},[496,14179,12342],{"id":12341},[618,14181,14183],{"className":620,"code":14182,"language":625,"meta":568,"style":568},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[610,14184,14185],{"__ignoreMap":568},[629,14186,14187,14189,14191,14193,14195,14197,14199,14201,14203,14205,14207,14209,14211,14213,14215,14217,14219,14221,14223,14225],{"class":631,"line":569},[629,14188,635],{"class":634},[629,14190,12563],{"class":638},[629,14192,4246],{"class":634},[629,14194,12358],{"class":642},[629,14196,649],{"class":634},[629,14198,652],{"class":634},[629,14200,12365],{"class":675},[629,14202,652],{"class":634},[629,14204,4246],{"class":634},[629,14206,12840],{"class":642},[629,14208,649],{"class":634},[629,14210,652],{"class":634},[629,14212,2429],{"class":634},[629,14214,12849],{"class":6830},[629,14216,3332],{"class":634},[629,14218,3669],{"class":642},[629,14220,12856],{"class":2426},[629,14222,12859],{"class":675},[629,14224,652],{"class":634},[629,14226,779],{"class":675},[919,14228,14229,14237],{},[922,14230,14231],{},[925,14232,14233,14235],{},[928,14234,5751],{"align":989},[928,14236,933],{"align":989},[938,14238,14239,14252],{},[925,14240,14241,14245],{},[943,14242,14243],{"align":989},[1661,14244,12882],{},[943,14246,12885,14247,12888,14249,14251],{"align":989},[610,14248,953],{},[610,14250,963],{}," if \"unlock\" events are trigger.",[925,14253,14254,14258],{},[943,14255,14256],{"align":989},[1661,14257,12358],{},[943,14259,12427],{"align":989},[1319,14261,12902],{},{"title":568,"searchDepth":569,"depth":570,"links":14263},[14264,14265,14266],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":111,"description":14267},"vV10imj42ZYLgsDF4-C_pkzy24eb_ucQLr8NOacrAsg",{"id":14272,"title":115,"body":14273,"description":14970,"extension":583,"links":584,"meta":14971,"navigation":586,"path":116,"seo":14972,"stem":117,"__hash__":14973},"docs/2.api/2.controls/transform-controls.md",{"type":493,"value":14274,"toc":14960},[14275,14282,14287,14289,14300,14496,14514,14518,14521,14525,14530,14533,14570,14574,14579,14582,14617,14620,14625,14628,14663,14665,14891,14893,14954,14957],[606,14276,2768,14277,14281],{},[1132,14278,115],{"href":14279,"rel":14280},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1136]," 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",[600,14283,14284],{},[14285,14286],"controls-transform-controls",{},[496,14288,15],{"id":616},[606,14290,14291,14292,14295,14296,14299],{},"To use the Transform Controls, simply add the ",[610,14293,14294],{},"TransformControls"," component to your scene. You can pass the ",[610,14297,14298],{},"templateRef","of the instance you want to control as a prop.",[618,14301,14304],{"className":620,"code":14302,"highlights":14303,"language":625,"meta":568,"style":568},"\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",[747,770],[610,14305,14306,14316,14329,14337,14345,14353,14372,14383,14403,14435,14454,14472,14480,14488],{"__ignoreMap":568},[629,14307,14308,14310,14312,14314],{"class":631,"line":569},[629,14309,635],{"class":634},[629,14311,639],{"class":638},[629,14313,643],{"class":642},[629,14315,661],{"class":634},[629,14317,14318,14320,14323,14325,14327],{"class":631,"line":570},[629,14319,2407],{"class":642},[629,14321,14322],{"class":675}," boxRef ",[629,14324,649],{"class":634},[629,14326,3490],{"class":2426},[629,14328,6527],{"class":675},[629,14330,14331,14333,14335],{"class":631,"line":700},[629,14332,724],{"class":634},[629,14334,639],{"class":638},[629,14336,661],{"class":634},[629,14338,14339,14341,14343],{"class":631,"line":721},[629,14340,635],{"class":634},[629,14342,742],{"class":638},[629,14344,661],{"class":634},[629,14346,14347,14349,14351],{"class":631,"line":731},[629,14348,750],{"class":634},[629,14350,753],{"class":638},[629,14352,661],{"class":634},[629,14354,14355,14357,14359,14361,14363,14365,14368,14370],{"class":631,"line":737},[629,14356,773],{"class":634},[629,14358,776],{"class":638},[629,14360,1951],{"class":642},[629,14362,649],{"class":634},[629,14364,652],{"class":634},[629,14366,14367],{"class":655},"[45, 1, 0.1, 1000]",[629,14369,652],{"class":634},[629,14371,779],{"class":634},[629,14373,14375,14377,14379,14381],{"class":14374,"line":747},[631,665],[629,14376,773],{"class":634},[629,14378,787],{"class":638},[629,14380,1843],{"class":642},[629,14382,779],{"class":634},[629,14384,14386,14388,14390,14392,14394,14396,14399,14401],{"class":14385,"line":770},[631,665],[629,14387,773],{"class":634},[629,14389,14294],{"class":638},[629,14391,4440],{"class":642},[629,14393,649],{"class":634},[629,14395,652],{"class":634},[629,14397,14398],{"class":655},"boxRef",[629,14400,652],{"class":634},[629,14402,779],{"class":634},[629,14404,14405,14407,14409,14411,14413,14415,14417,14419,14421,14423,14425,14428,14430,14433],{"class":631,"line":782},[629,14406,773],{"class":634},[629,14408,848],{"class":638},[629,14410,3864],{"class":642},[629,14412,649],{"class":634},[629,14414,652],{"class":634},[629,14416,14398],{"class":655},[629,14418,652],{"class":634},[629,14420,1477],{"class":642},[629,14422,649],{"class":634},[629,14424,652],{"class":634},[629,14426,14427],{"class":655},"[0, 4, 0]",[629,14429,652],{"class":634},[629,14431,14432],{"class":642}," cast-shadow",[629,14434,661],{"class":634},[629,14436,14437,14439,14441,14443,14445,14447,14450,14452],{"class":631,"line":792},[629,14438,845],{"class":634},[629,14440,859],{"class":638},[629,14442,1951],{"class":642},[629,14444,649],{"class":634},[629,14446,652],{"class":634},[629,14448,14449],{"class":655},"[1.5, 1.5, 1.5]",[629,14451,652],{"class":634},[629,14453,779],{"class":634},[629,14455,14456,14458,14460,14462,14464,14466,14468,14470],{"class":631,"line":797},[629,14457,845],{"class":634},[629,14459,11380],{"class":638},[629,14461,2681],{"class":642},[629,14463,649],{"class":634},[629,14465,652],{"class":634},[629,14467,7919],{"class":655},[629,14469,652],{"class":634},[629,14471,779],{"class":634},[629,14473,14474,14476,14478],{"class":631,"line":819},[629,14475,887],{"class":634},[629,14477,848],{"class":638},[629,14479,661],{"class":634},[629,14481,14482,14484,14486],{"class":631,"line":623},[629,14483,897],{"class":634},[629,14485,753],{"class":638},[629,14487,661],{"class":634},[629,14489,14490,14492,14494],{"class":631,"line":842},[629,14491,724],{"class":634},[629,14493,742],{"class":638},[629,14495,661],{"class":634},[3191,14497,14498],{},[606,14499,14500,14501,14505,14506,14508,14509,14511,14512,1138],{},"If you are using other controls ",[629,14502,14503],{"style":13938},[1132,14504,787],{"href":108,"style":13941}," they will interfere with each other when dragging. To avoid this, you can set the ",[610,14507,11483],{}," prop to ",[610,14510,953],{}," on the ",[1661,14513,787],{},[496,14515,14517],{"id":14516},"modes","Modes",[606,14519,14520],{},"The Transform Controls can be used in three different modes:",[4043,14522,14524],{"id":14523},"translate","Translate",[606,14526,14527],{},[8227,14528],{"alt":14524,"src":14529},"/cientos/transform-controls-translate.png",[606,14531,14532],{},"The default mode allows you to move the object around the scene.",[618,14534,14536],{"className":620,"code":14535,"language":625,"meta":568,"style":568},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[610,14537,14538],{"__ignoreMap":568},[629,14539,14540,14542,14544,14546,14548,14550,14552,14554,14556,14559,14561,14563,14566,14568],{"class":631,"line":569},[629,14541,635],{"class":634},[629,14543,14294],{"class":638},[629,14545,6835],{"class":642},[629,14547,649],{"class":634},[629,14549,652],{"class":634},[629,14551,14523],{"class":655},[629,14553,652],{"class":634},[629,14555,3021],{"class":634},[629,14557,14558],{"class":642},"object",[629,14560,649],{"class":634},[629,14562,652],{"class":634},[629,14564,14565],{"class":675},"sphereRef",[629,14567,652],{"class":634},[629,14569,779],{"class":634},[4043,14571,14573],{"id":14572},"rotate","Rotate",[606,14575,14576],{},[8227,14577],{"alt":14573,"src":14578},"/cientos/transform-controls-rotate.png",[606,14580,14581],{},"The rotate mode allows you to rotate the object around the scene.",[618,14583,14585],{"className":620,"code":14584,"language":625,"meta":568,"style":568},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[610,14586,14587],{"__ignoreMap":568},[629,14588,14589,14591,14593,14595,14597,14599,14601,14603,14605,14607,14609,14611,14613,14615],{"class":631,"line":569},[629,14590,635],{"class":634},[629,14592,14294],{"class":638},[629,14594,6835],{"class":642},[629,14596,649],{"class":634},[629,14598,652],{"class":634},[629,14600,14572],{"class":655},[629,14602,652],{"class":634},[629,14604,3021],{"class":634},[629,14606,14558],{"class":642},[629,14608,649],{"class":634},[629,14610,652],{"class":634},[629,14612,14398],{"class":675},[629,14614,652],{"class":634},[629,14616,779],{"class":634},[4043,14618,14619],{"id":5622},"Scale",[606,14621,14622],{},[8227,14623],{"alt":14619,"src":14624},"/cientos/transform-controls-scale.png",[606,14626,14627],{},"The scale mode allows you to scale the object around the scene.",[618,14629,14631],{"className":620,"code":14630,"language":625,"meta":568,"style":568},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[610,14632,14633],{"__ignoreMap":568},[629,14634,14635,14637,14639,14641,14643,14645,14647,14649,14651,14653,14655,14657,14659,14661],{"class":631,"line":569},[629,14636,635],{"class":634},[629,14638,14294],{"class":638},[629,14640,6835],{"class":642},[629,14642,649],{"class":634},[629,14644,652],{"class":634},[629,14646,5622],{"class":655},[629,14648,652],{"class":634},[629,14650,3021],{"class":634},[629,14652,14558],{"class":642},[629,14654,649],{"class":634},[629,14656,652],{"class":634},[629,14658,14565],{"class":675},[629,14660,652],{"class":634},[629,14662,779],{"class":634},[496,14664,914],{"id":913},[919,14666,14667,14677],{},[922,14668,14669],{},[925,14670,14671,14673,14675],{},[928,14672,930],{"align":989},[928,14674,933],{"align":989},[928,14676,936],{},[938,14678,14679,14697,14716,14732,14767,14787,14801,14815,14829,14843,14859,14875],{},[925,14680,14681,14685,14693],{},[943,14682,14683],{"align":989},[1661,14684,14558],{},[943,14686,14687,14688,14692],{"align":989},"The instance ",[1132,14689,7614],{"href":14690,"rel":14691},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1136]," to control.",[943,14694,14695],{},[610,14696,3648],{},[925,14698,14699,14703,14712],{},[943,14700,14701],{"align":989},[1661,14702,6856],{},[943,14704,14705,14706,1664,14708,5603,14710,1138],{"align":989},"The mode of the controls. Can be ",[610,14707,14523],{},[610,14709,14572],{},[610,14711,5622],{},[943,14713,14714],{},[610,14715,14523],{},[925,14717,14718,14723,14728],{},[943,14719,14720],{"align":989},[1661,14721,14722],{},"enabled",[943,14724,950,14725,14727],{"align":989},[610,14726,953],{},", the controls will be enabled.",[943,14729,14730],{},[610,14731,953],{},[925,14733,14734,14739,14763],{},[943,14735,14736],{"align":989},[1661,14737,14738],{},"axis",[943,14740,14741,14742,1664,14745,1664,14748,1664,14751,1664,14754,1664,14757,1664,14760,1138],{"align":989},"The axis to use for the controls. Can be ",[610,14743,14744],{},"X",[610,14746,14747],{},"Y",[610,14749,14750],{},"Z",[610,14752,14753],{},"XY",[610,14755,14756],{},"YZ",[610,14758,14759],{},"XZ",[610,14761,14762],{},"XYZ",[943,14764,14765],{},[610,14766,14762],{},[925,14768,14769,14774,14783],{},[943,14770,14771],{"align":989},[1661,14772,14773],{},"space",[943,14775,14776,14777,5603,14780,1138],{"align":989},"The space to use for the controls. Can be ",[610,14778,14779],{},"local",[610,14781,14782],{},"world",[943,14784,14785],{},[610,14786,14779],{},[925,14788,14789,14794,14797],{},[943,14790,14791],{"align":989},[1661,14792,14793],{},"size",[943,14795,14796],{"align":989},"The size of the controls.",[943,14798,14799],{},[610,14800,1866],{},[925,14802,14803,14808,14811],{},[943,14804,14805],{"align":989},[1661,14806,14807],{},"translationSnap",[943,14809,14810],{"align":989},"The distance to snap to when translating. (World units)",[943,14812,14813],{},[610,14814,3648],{},[925,14816,14817,14822,14825],{},[943,14818,14819],{"align":989},[1661,14820,14821],{},"rotationSnap",[943,14823,14824],{"align":989},"The angle to snap to when rotating. (Radians)",[943,14826,14827],{},[610,14828,3648],{},[925,14830,14831,14836,14839],{},[943,14832,14833],{"align":989},[1661,14834,14835],{},"scaleSnap",[943,14837,14838],{"align":989},"The scale to snap to when scaling.",[943,14840,14841],{},[610,14842,3648],{},[925,14844,14845,14850,14855],{},[943,14846,14847],{"align":989},[1661,14848,14849],{},"showX",[943,14851,950,14852,14854],{"align":989},[610,14853,953],{},", the X-axis helper will be shown.",[943,14856,14857],{},[610,14858,953],{},[925,14860,14861,14866,14871],{},[943,14862,14863],{"align":989},[1661,14864,14865],{},"showY",[943,14867,950,14868,14870],{"align":989},[610,14869,953],{},", the Y-axis helper will be shown.",[943,14872,14873],{},[610,14874,953],{},[925,14876,14877,14882,14887],{},[943,14878,14879],{"align":989},[1661,14880,14881],{},"showZ",[943,14883,950,14884,14886],{"align":989},[610,14885,953],{},", the Z-axis helper will be shown.",[943,14888,14889],{},[610,14890,953],{},[496,14892,12342],{"id":12341},[919,14894,14895,14903],{},[922,14896,14897],{},[925,14898,14899,14901],{},[928,14900,5751],{"align":989},[928,14902,933],{"align":989},[938,14904,14905,14915,14924,14934,14944],{},[925,14906,14907,14912],{},[943,14908,14909],{"align":989},[1661,14910,14911],{},"dragging",[943,14913,14914],{"align":989},"Fired when the user starts or stops dragging the controls.",[925,14916,14917,14921],{},[943,14918,14919],{"align":989},[1661,14920,12358],{},[943,14922,14923],{"align":989},"Fired when the user changes the controls.",[925,14925,14926,14931],{},[943,14927,14928],{"align":989},[1661,14929,14930],{},"mouseDown",[943,14932,14933],{"align":989},"Fired when the user clicks on the controls.",[925,14935,14936,14941],{},[943,14937,14938],{"align":989},[1661,14939,14940],{},"mouseUp",[943,14942,14943],{"align":989},"Fired when the user releases the mouse button on the controls.",[925,14945,14946,14951],{},[943,14947,14948],{"align":989},[1661,14949,14950],{},"objectChange",[943,14952,14953],{"align":989},"Fired when the user changes the object.",[1319,14955,14956],{"scoped":586},"\nimg {\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: top;\n border-radius: 8px;\n}\n",[1319,14958,14959],{},"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":568,"searchDepth":569,"depth":570,"links":14961},[14962,14963,14968,14969],{"id":616,"depth":570,"text":15},{"id":14516,"depth":570,"text":14517,"children":14964},[14965,14966,14967],{"id":14523,"depth":700,"text":14524},{"id":14572,"depth":700,"text":14573},{"id":5622,"depth":700,"text":14619},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":115,"description":14970},"rtA5mRjWCioaInPfcKtnEcdh3kG88FfwUz7CBNeBOWs",[14975,16026,16796,17414,18053,18688,20135,22986,23462],{"id":14976,"title":125,"body":14977,"description":16022,"extension":583,"links":584,"meta":16023,"navigation":586,"path":126,"seo":16024,"stem":127,"__hash__":16025},"docs/2.api/3.loaders/1.use-gltf.md",{"type":493,"value":14978,"toc":16014},[14979,14984,14991,14993,15373,15389,15461,15465,15600,15603,15672,15676,15679,15772,15775,15779,15795,15952,15961,15965,15974,16005,16011],[2287,14980,14981],{},[14982,14983],"loaders-gltf",{},[606,14985,14986,14987,14990],{},"A composable that allows you to easily load glb/glTF models into your ",[1661,14988,14989],{},"TresJS"," scene.",[496,14992,15],{"id":616},[14994,14995,14996,15147],"code-group",{},[618,14997,15001],{"className":620,"code":14998,"filename":14999,"highlights":15000,"language":625,"meta":568,"style":568},"\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",[570,731],[610,15002,15003,15023,15042,15046,15062,15090,15098,15102,15110,15139],{"__ignoreMap":568},[629,15004,15005,15007,15009,15011,15013,15015,15017,15019,15021],{"class":631,"line":569},[629,15006,635],{"class":634},[629,15008,639],{"class":638},[629,15010,643],{"class":642},[629,15012,646],{"class":642},[629,15014,649],{"class":634},[629,15016,652],{"class":634},[629,15018,656],{"class":655},[629,15020,652],{"class":634},[629,15022,661],{"class":634},[629,15024,15026,15028,15030,15032,15034,15036,15038,15040],{"class":15025,"line":570},[631,665],[629,15027,669],{"class":668},[629,15029,672],{"class":634},[629,15031,4339],{"class":675},[629,15033,685],{"class":634},[629,15035,688],{"class":668},[629,15037,691],{"class":634},[629,15039,694],{"class":655},[629,15041,697],{"class":634},[629,15043,15044],{"class":631,"line":700},[629,15045,734],{"emptyLinePlaceholder":586},[629,15047,15048,15050,15053,15055,15057,15060],{"class":631,"line":721},[629,15049,2407],{"class":642},[629,15051,15052],{"class":675}," path ",[629,15054,649],{"class":634},[629,15056,691],{"class":634},[629,15058,15059],{"class":655},"./blender-cube.glb",[629,15061,697],{"class":634},[629,15063,15065,15067,15069,15071,15073,15076,15078,15081,15083,15085,15087],{"class":15064,"line":731},[631,665],[629,15066,2407],{"class":642},[629,15068,672],{"class":634},[629,15070,2412],{"class":675},[629,15072,679],{"class":634},[629,15074,15075],{"class":675}," nodes",[629,15077,679],{"class":634},[629,15079,15080],{"class":675}," materials ",[629,15082,2420],{"class":634},[629,15084,2423],{"class":634},[629,15086,4339],{"class":2426},[629,15088,15089],{"class":675},"(path)\n",[629,15091,15092,15094,15096],{"class":631,"line":737},[629,15093,724],{"class":634},[629,15095,639],{"class":638},[629,15097,661],{"class":634},[629,15099,15100],{"class":631,"line":747},[629,15101,734],{"emptyLinePlaceholder":586},[629,15103,15104,15106,15108],{"class":631,"line":770},[629,15105,635],{"class":634},[629,15107,742],{"class":638},[629,15109,661],{"class":634},[629,15111,15112,15114,15116,15118,15120,15122,15124,15126,15128,15130,15132,15135,15137],{"class":631,"line":782},[629,15113,750],{"class":634},[629,15115,4426],{"class":638},[629,15117,2702],{"class":642},[629,15119,649],{"class":634},[629,15121,652],{"class":634},[629,15123,12849],{"class":655},[629,15125,652],{"class":634},[629,15127,4440],{"class":642},[629,15129,649],{"class":634},[629,15131,652],{"class":634},[629,15133,15134],{"class":655},"state?.scene",[629,15136,652],{"class":634},[629,15138,779],{"class":634},[629,15140,15141,15143,15145],{"class":631,"line":792},[629,15142,724],{"class":634},[629,15144,742],{"class":638},[629,15146,661],{"class":634},[618,15148,15151],{"className":620,"code":15149,"filename":15150,"language":625,"meta":568,"style":568},"\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",[610,15152,15153,15173,15191,15209,15226,15234,15238,15246,15265,15284,15292,15301,15308,15321,15334,15339,15357,15365],{"__ignoreMap":568},[629,15154,15155,15157,15159,15161,15163,15165,15167,15169,15171],{"class":631,"line":569},[629,15156,635],{"class":634},[629,15158,639],{"class":638},[629,15160,643],{"class":642},[629,15162,646],{"class":642},[629,15164,649],{"class":634},[629,15166,652],{"class":634},[629,15168,656],{"class":655},[629,15170,652],{"class":634},[629,15172,661],{"class":634},[629,15174,15175,15177,15179,15181,15183,15185,15187,15189],{"class":631,"line":570},[629,15176,669],{"class":668},[629,15178,672],{"class":634},[629,15180,682],{"class":675},[629,15182,685],{"class":634},[629,15184,688],{"class":668},[629,15186,691],{"class":634},[629,15188,694],{"class":655},[629,15190,697],{"class":634},[629,15192,15193,15195,15197,15199,15201,15203,15205,15207],{"class":631,"line":700},[629,15194,669],{"class":668},[629,15196,672],{"class":634},[629,15198,707],{"class":675},[629,15200,685],{"class":634},[629,15202,688],{"class":668},[629,15204,691],{"class":634},[629,15206,716],{"class":655},[629,15208,697],{"class":634},[629,15210,15211,15213,15216,15219,15221,15224],{"class":631,"line":721},[629,15212,669],{"class":668},[629,15214,15215],{"class":675}," TheModel ",[629,15217,15218],{"class":668},"from",[629,15220,691],{"class":634},[629,15222,15223],{"class":655},"./TheModel.vue",[629,15225,697],{"class":634},[629,15227,15228,15230,15232],{"class":631,"line":731},[629,15229,724],{"class":634},[629,15231,639],{"class":638},[629,15233,661],{"class":634},[629,15235,15236],{"class":631,"line":737},[629,15237,734],{"emptyLinePlaceholder":586},[629,15239,15240,15242,15244],{"class":631,"line":747},[629,15241,635],{"class":634},[629,15243,742],{"class":638},[629,15245,661],{"class":634},[629,15247,15248,15250,15252,15254,15256,15258,15261,15263],{"class":631,"line":770},[629,15249,750],{"class":634},[629,15251,753],{"class":638},[629,15253,756],{"class":642},[629,15255,649],{"class":634},[629,15257,652],{"class":634},[629,15259,15260],{"class":655},"#F78B3D",[629,15262,652],{"class":634},[629,15264,661],{"class":634},[629,15266,15267,15269,15271,15273,15275,15277,15280,15282],{"class":631,"line":782},[629,15268,773],{"class":634},[629,15270,776],{"class":638},[629,15272,1477],{"class":642},[629,15274,649],{"class":634},[629,15276,652],{"class":634},[629,15278,15279],{"class":655},"[3, 2, 5]",[629,15281,652],{"class":634},[629,15283,779],{"class":634},[629,15285,15286,15288,15290],{"class":631,"line":792},[629,15287,773],{"class":634},[629,15289,787],{"class":638},[629,15291,779],{"class":634},[629,15293,15294,15296,15299],{"class":631,"line":797},[629,15295,773],{"class":634},[629,15297,15298],{"class":638},"TheModel",[629,15300,779],{"class":634},[629,15302,15303,15305],{"class":631,"line":819},[629,15304,773],{"class":634},[629,15306,15307],{"class":638},"TresDirectionalLight\n",[629,15309,15310,15313,15315,15317,15319],{"class":631,"line":623},[629,15311,15312],{"class":642}," :intensity",[629,15314,649],{"class":634},[629,15316,652],{"class":634},[629,15318,812],{"class":655},[629,15320,3123],{"class":634},[629,15322,15323,15326,15328,15330,15332],{"class":631,"line":842},[629,15324,15325],{"class":642}," :position",[629,15327,649],{"class":634},[629,15329,652],{"class":634},[629,15331,11342],{"class":655},[629,15333,3123],{"class":634},[629,15335,15336],{"class":631,"line":853},[629,15337,15338],{"class":634}," />\n",[629,15340,15341,15343,15345,15347,15349,15351,15353,15355],{"class":631,"line":864},[629,15342,773],{"class":634},[629,15344,8448],{"class":638},[629,15346,1859],{"class":642},[629,15348,649],{"class":634},[629,15350,652],{"class":634},[629,15352,1866],{"class":655},[629,15354,652],{"class":634},[629,15356,779],{"class":634},[629,15358,15359,15361,15363],{"class":631,"line":874},[629,15360,897],{"class":634},[629,15362,753],{"class":638},[629,15364,661],{"class":634},[629,15366,15367,15369,15371],{"class":631,"line":624},[629,15368,724],{"class":634},[629,15370,742],{"class":638},[629,15372,661],{"class":634},[606,15374,15375,15376,15378,15379,15382,15383,15388],{},"An advantage of using ",[610,15377,125],{}," is that you can pass a ",[610,15380,15381],{},"draco"," prop to enable ",[1132,15384,15387],{"href":15385,"rel":15386},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1136],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[618,15390,15392],{"className":1178,"code":15391,"language":656,"meta":568,"style":568},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[610,15393,15394,15412,15416],{"__ignoreMap":568},[629,15395,15396,15398,15400,15402,15404,15406,15408,15410],{"class":631,"line":569},[629,15397,669],{"class":668},[629,15399,672],{"class":634},[629,15401,4339],{"class":675},[629,15403,685],{"class":634},[629,15405,688],{"class":668},[629,15407,691],{"class":634},[629,15409,694],{"class":655},[629,15411,697],{"class":634},[629,15413,15414],{"class":631,"line":570},[629,15415,734],{"emptyLinePlaceholder":586},[629,15417,15418,15420,15422,15424,15426,15428,15430,15432,15434,15436,15438,15440,15442,15445,15447,15449,15451,15453,15455,15457,15459],{"class":631,"line":700},[629,15419,2407],{"class":642},[629,15421,672],{"class":634},[629,15423,2412],{"class":675},[629,15425,679],{"class":634},[629,15427,15075],{"class":675},[629,15429,679],{"class":634},[629,15431,15080],{"class":675},[629,15433,2420],{"class":634},[629,15435,2423],{"class":634},[629,15437,4339],{"class":2426},[629,15439,2429],{"class":675},[629,15441,2432],{"class":634},[629,15443,15444],{"class":655},"/models/AkuAku.gltf",[629,15446,2432],{"class":634},[629,15448,679],{"class":634},[629,15450,672],{"class":634},[629,15452,4384],{"class":638},[629,15454,1210],{"class":634},[629,15456,4390],{"class":4389},[629,15458,685],{"class":634},[629,15460,2440],{"class":675},[496,15462,15464],{"id":15463},"return-values","Return Values",[919,15466,15467,15477],{},[922,15468,15469],{},[925,15470,15471,15473,15475],{},[928,15472,8081],{"align":989},[928,15474,5961],{},[928,15476,933],{},[938,15478,15479,15496,15511,15525,15540,15555,15570,15585],{},[925,15480,15481,15485,15490],{},[943,15482,15483],{"align":989},[1661,15484,12849],{},[943,15486,15487],{},[610,15488,15489],{},"Ref\u003CGLTF | null>",[943,15491,15492,15493,15495],{},"The loaded GLTF, or ",[610,15494,3648],{}," until it arrives",[925,15497,15498,15503,15508],{},[943,15499,15500],{"align":989},[1661,15501,15502],{},"nodes",[943,15504,15505],{},[610,15506,15507],{},"ComputedRef\u003CTNodes>",[943,15509,15510],{},"All nodes in the scene, keyed by name",[925,15512,15513,15517,15522],{},[943,15514,15515],{"align":989},[1661,15516,520],{},[943,15518,15519],{},[610,15520,15521],{},"ComputedRef\u003CTMaterials>",[943,15523,15524],{},"All materials in the scene, keyed by name",[925,15526,15527,15532,15537],{},[943,15528,15529],{"align":989},[1661,15530,15531],{},"isLoading",[943,15533,15534],{},[610,15535,15536],{},"Ref\u003Cboolean>",[943,15538,15539],{},"Whether the model is currently loading",[925,15541,15542,15547,15552],{},[943,15543,15544],{"align":989},[1661,15545,15546],{},"error",[943,15548,15549],{},[610,15550,15551],{},"Ref\u003Cunknown>",[943,15553,15554],{},"Whatever the loader threw, if anything",[925,15556,15557,15562,15567],{},[943,15558,15559],{"align":989},[1661,15560,15561],{},"progress",[943,15563,15564],{},[610,15565,15566],{},"{ loaded: number, total: number, percentage: number }",[943,15568,15569],{},"Progress of the current load",[925,15571,15572,15577,15582],{},[943,15573,15574],{"align":989},[1661,15575,15576],{},"load",[943,15578,15579],{},[610,15580,15581],{},"(path: string) => void",[943,15583,15584],{},"Load a different model into the same state",[925,15586,15587,15592,15597],{},[943,15588,15589],{"align":989},[1661,15590,15591],{},"execute",[943,15593,15594],{},[610,15595,15596],{},"(delay?: number) => Promise\u003CGLTF>",[943,15598,15599],{},"Re-run the load",[496,15601,12085],{"id":15602},"options",[919,15604,15605,15617],{},[922,15606,15607],{},[925,15608,15609,15611,15613,15615],{},[928,15610,8081],{"align":989},[928,15612,5961],{},[928,15614,936],{},[928,15616,933],{},[938,15618,15619,15637,15656],{},[925,15620,15621,15625,15630,15634],{},[943,15622,15623],{"align":989},[1661,15624,15381],{},[943,15626,15627],{},[610,15628,15629],{},"boolean",[943,15631,15632],{},[610,15633,963],{},[943,15635,15636],{},"Whether to enable Draco compression.",[925,15638,15639,15644,15648,15653],{},[943,15640,15641],{"align":989},[1661,15642,15643],{},"decoderPath",[943,15645,15646],{},[610,15647,3564],{},[943,15649,15650],{},[610,15651,15652],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[943,15654,15655],{},"Path to the Draco decoder.",[925,15657,15658,15663,15667,15669],{},[943,15659,15660],{"align":989},[1661,15661,15662],{},"traverse",[943,15664,15665],{},[610,15666,10109],{},[943,15668],{},[943,15670,15671],{},"A traverse function applied to the scene upon loading the model.",[496,15673,15675],{"id":15674},"accessing-nodes-and-materials","Accessing Nodes and Materials",[606,15677,15678],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[618,15680,15682],{"className":1178,"code":15681,"language":656,"meta":568,"style":568},"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",[610,15683,15684,15713,15717,15722,15742,15746,15751],{"__ignoreMap":568},[629,15685,15686,15688,15690,15692,15694,15696,15698,15700,15702,15704,15706,15709,15711],{"class":631,"line":569},[629,15687,2407],{"class":642},[629,15689,672],{"class":634},[629,15691,15075],{"class":675},[629,15693,679],{"class":634},[629,15695,15080],{"class":675},[629,15697,2420],{"class":634},[629,15699,2423],{"class":634},[629,15701,4339],{"class":2426},[629,15703,2429],{"class":675},[629,15705,2432],{"class":634},[629,15707,15708],{"class":655},"/model.glb",[629,15710,2432],{"class":634},[629,15712,2440],{"class":675},[629,15714,15715],{"class":631,"line":570},[629,15716,734],{"emptyLinePlaceholder":586},[629,15718,15719],{"class":631,"line":700},[629,15720,15721],{"class":1201},"// Access a specific node\n",[629,15723,15724,15726,15729,15731,15733,15735,15737,15739],{"class":631,"line":721},[629,15725,2407],{"class":642},[629,15727,15728],{"class":675}," mesh ",[629,15730,649],{"class":634},[629,15732,15075],{"class":675},[629,15734,1138],{"class":634},[629,15736,3677],{"class":675},[629,15738,1138],{"class":634},[629,15740,15741],{"class":675},"MeshName\n",[629,15743,15744],{"class":631,"line":731},[629,15745,734],{"emptyLinePlaceholder":586},[629,15747,15748],{"class":631,"line":737},[629,15749,15750],{"class":1201},"// Access a specific material\n",[629,15752,15753,15755,15758,15760,15763,15765,15767,15769],{"class":631,"line":747},[629,15754,2407],{"class":642},[629,15756,15757],{"class":675}," material ",[629,15759,649],{"class":634},[629,15761,15762],{"class":675}," materials",[629,15764,1138],{"class":634},[629,15766,3677],{"class":675},[629,15768,1138],{"class":634},[629,15770,15771],{"class":675},"MaterialName\n",[606,15773,15774],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[496,15776,15778],{"id":15777},"typing-nodes-and-materials","Typing Nodes and Materials",[606,15780,15781,15782,3055,15784,15786,15787,15790,15791,15794],{},"The keys of ",[610,15783,15502],{},[610,15785,520],{}," come from the file, so by default both are a loose record and\n",[610,15788,15789],{},"nodes.value.Body"," is an ",[610,15792,15793],{},"any",". Pass the shape of your model as generics to get them typed:",[618,15796,15798],{"className":1178,"code":15797,"language":656,"meta":568,"style":568},"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",[610,15799,15800,15825,15843,15847,15866,15884,15888,15928,15932],{"__ignoreMap":568},[629,15801,15802,15804,15806,15808,15810,15812,15815,15817,15819,15821,15823],{"class":631,"line":569},[629,15803,669],{"class":668},[629,15805,3434],{"class":668},[629,15807,672],{"class":634},[629,15809,4609],{"class":675},[629,15811,679],{"class":634},[629,15813,15814],{"class":675}," MeshStandardMaterial",[629,15816,685],{"class":634},[629,15818,688],{"class":668},[629,15820,691],{"class":634},[629,15822,4618],{"class":655},[629,15824,697],{"class":634},[629,15826,15827,15829,15831,15833,15835,15837,15839,15841],{"class":631,"line":570},[629,15828,669],{"class":668},[629,15830,672],{"class":634},[629,15832,4339],{"class":675},[629,15834,685],{"class":634},[629,15836,688],{"class":668},[629,15838,691],{"class":634},[629,15840,694],{"class":655},[629,15842,697],{"class":634},[629,15844,15845],{"class":631,"line":700},[629,15846,734],{"emptyLinePlaceholder":586},[629,15848,15849,15851,15854,15856,15859,15861,15863],{"class":631,"line":721},[629,15850,5315],{"class":642},[629,15852,15853],{"class":1192}," ModelNodes",[629,15855,672],{"class":634},[629,15857,15858],{"class":638}," Body",[629,15860,1210],{"class":634},[629,15862,4609],{"class":1192},[629,15864,15865],{"class":634}," }\n",[629,15867,15868,15870,15873,15875,15878,15880,15882],{"class":631,"line":731},[629,15869,5315],{"class":642},[629,15871,15872],{"class":1192}," ModelMaterials",[629,15874,672],{"class":634},[629,15876,15877],{"class":638}," Skin",[629,15879,1210],{"class":634},[629,15881,15814],{"class":1192},[629,15883,15865],{"class":634},[629,15885,15886],{"class":631,"line":737},[629,15887,734],{"emptyLinePlaceholder":586},[629,15889,15890,15892,15894,15896,15898,15900,15902,15904,15906,15908,15911,15913,15915,15917,15919,15921,15924,15926],{"class":631,"line":747},[629,15891,2407],{"class":642},[629,15893,672],{"class":634},[629,15895,15075],{"class":675},[629,15897,679],{"class":634},[629,15899,15080],{"class":675},[629,15901,2420],{"class":634},[629,15903,2423],{"class":634},[629,15905,4339],{"class":2426},[629,15907,635],{"class":634},[629,15909,15910],{"class":1192},"ModelNodes",[629,15912,679],{"class":634},[629,15914,15872],{"class":1192},[629,15916,3643],{"class":634},[629,15918,2429],{"class":675},[629,15920,2432],{"class":634},[629,15922,15923],{"class":655},"/models/robot.glb",[629,15925,2432],{"class":634},[629,15927,2440],{"class":675},[629,15929,15930],{"class":631,"line":770},[629,15931,734],{"emptyLinePlaceholder":586},[629,15933,15934,15936,15938,15940,15942,15944,15946,15949],{"class":631,"line":782},[629,15935,15502],{"class":675},[629,15937,1138],{"class":634},[629,15939,3677],{"class":675},[629,15941,1138],{"class":634},[629,15943,4721],{"class":675},[629,15945,1138],{"class":634},[629,15947,15948],{"class":675},"geometry ",[629,15950,15951],{"class":1201},"// Mesh, not any\n",[1997,15953,15954],{},[606,15955,15956,15957,15960],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[610,15958,15959],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[496,15962,15964],{"id":15963},"generating-a-component-instead","Generating a Component Instead",[606,15966,15967,15968,15973],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1132,15969,15972],{"href":15970,"rel":15971},"https://docs.tresjs.org/cli/gltf",[1136],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[618,15975,15979],{"className":15976,"code":15977,"language":15978,"meta":568,"style":568},"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",[610,15980,15981,15995,16000],{"__ignoreMap":568},[629,15982,15983,15986,15989,15992],{"class":631,"line":569},[629,15984,15985],{"class":1192},"npx",[629,15987,15988],{"class":655}," @tresjs/cli",[629,15990,15991],{"class":655}," gltf",[629,15993,15994],{"class":655}," public/models/robot.glb\n",[629,15996,15997],{"class":631,"line":570},[629,15998,15999],{"class":1201},"# ✔ src/models/Robot.gen.vue\n",[629,16001,16002],{"class":631,"line":700},[629,16003,16004],{"class":1201},"# 3 slots: Head, Body, Base\n",[16006,16007,16008],"read-more",{"to":20},[606,16009,16010],{},"The three ways to load a model, and when to reach for each one.",[1319,16012,16013],{},"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":568,"searchDepth":569,"depth":570,"links":16015},[16016,16017,16018,16019,16020,16021],{"id":616,"depth":570,"text":15},{"id":15463,"depth":570,"text":15464},{"id":15602,"depth":570,"text":12085},{"id":15674,"depth":570,"text":15675},{"id":15777,"depth":570,"text":15778},{"id":15963,"depth":570,"text":15964},"A composable to load GLTF models in TresJS scenes.",{},{"title":125,"description":16022},"mVv2TZo5-pqLqIwJ-gYXHQx7OoCZ9HEO3CnPATpAwMA",{"id":16027,"title":129,"body":16028,"description":16792,"extension":583,"links":584,"meta":16793,"navigation":586,"path":130,"seo":16794,"stem":131,"__hash__":16795},"docs/2.api/3.loaders/2.gltf-model.md",{"type":493,"value":16029,"toc":16786},[16030,16034,16045,16047,16376,16380,16387,16630,16632,16727,16742,16746,16764,16779,16783],[2287,16031,16032],{},[14982,16033],{},[606,16035,2768,16036,16038,16039,16044],{},[610,16037,129],{}," component is a wrapper around ",[1132,16040,16042],{"href":16041},"./use-gltf",[610,16043,125],{}," composable and accepts the same options as props.",[496,16046,15],{"id":616},[14994,16048,16049,16162],{},[618,16050,16053],{"className":620,"code":16051,"filename":14999,"highlights":16052,"language":625,"meta":568,"style":568},"\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",[570,770],[610,16054,16055,16075,16095,16099,16113,16121,16125,16133,16154],{"__ignoreMap":568},[629,16056,16057,16059,16061,16063,16065,16067,16069,16071,16073],{"class":631,"line":569},[629,16058,635],{"class":634},[629,16060,639],{"class":638},[629,16062,643],{"class":642},[629,16064,646],{"class":642},[629,16066,649],{"class":634},[629,16068,652],{"class":634},[629,16070,656],{"class":655},[629,16072,652],{"class":634},[629,16074,661],{"class":634},[629,16076,16078,16080,16082,16085,16087,16089,16091,16093],{"class":16077,"line":570},[631,665],[629,16079,669],{"class":668},[629,16081,672],{"class":634},[629,16083,16084],{"class":675}," GLTFModel",[629,16086,685],{"class":634},[629,16088,688],{"class":668},[629,16090,691],{"class":634},[629,16092,694],{"class":655},[629,16094,697],{"class":634},[629,16096,16097],{"class":631,"line":700},[629,16098,734],{"emptyLinePlaceholder":586},[629,16100,16101,16103,16105,16107,16109,16111],{"class":631,"line":721},[629,16102,2407],{"class":642},[629,16104,15052],{"class":675},[629,16106,649],{"class":634},[629,16108,691],{"class":634},[629,16110,15059],{"class":655},[629,16112,697],{"class":634},[629,16114,16115,16117,16119],{"class":631,"line":731},[629,16116,724],{"class":634},[629,16118,639],{"class":638},[629,16120,661],{"class":634},[629,16122,16123],{"class":631,"line":737},[629,16124,734],{"emptyLinePlaceholder":586},[629,16126,16127,16129,16131],{"class":631,"line":747},[629,16128,635],{"class":634},[629,16130,742],{"class":638},[629,16132,661],{"class":634},[629,16134,16136,16138,16140,16143,16145,16147,16150,16152],{"class":16135,"line":770},[631,665],[629,16137,750],{"class":634},[629,16139,129],{"class":638},[629,16141,16142],{"class":642}," :path",[629,16144,649],{"class":634},[629,16146,652],{"class":634},[629,16148,16149],{"class":655},"path",[629,16151,652],{"class":634},[629,16153,779],{"class":634},[629,16155,16156,16158,16160],{"class":631,"line":782},[629,16157,724],{"class":634},[629,16159,742],{"class":638},[629,16161,661],{"class":634},[618,16163,16164],{"className":620,"code":15149,"filename":15150,"language":625,"meta":568,"style":568},[610,16165,16166,16186,16204,16222,16236,16244,16248,16256,16274,16292,16300,16308,16314,16326,16338,16342,16360,16368],{"__ignoreMap":568},[629,16167,16168,16170,16172,16174,16176,16178,16180,16182,16184],{"class":631,"line":569},[629,16169,635],{"class":634},[629,16171,639],{"class":638},[629,16173,643],{"class":642},[629,16175,646],{"class":642},[629,16177,649],{"class":634},[629,16179,652],{"class":634},[629,16181,656],{"class":655},[629,16183,652],{"class":634},[629,16185,661],{"class":634},[629,16187,16188,16190,16192,16194,16196,16198,16200,16202],{"class":631,"line":570},[629,16189,669],{"class":668},[629,16191,672],{"class":634},[629,16193,682],{"class":675},[629,16195,685],{"class":634},[629,16197,688],{"class":668},[629,16199,691],{"class":634},[629,16201,694],{"class":655},[629,16203,697],{"class":634},[629,16205,16206,16208,16210,16212,16214,16216,16218,16220],{"class":631,"line":700},[629,16207,669],{"class":668},[629,16209,672],{"class":634},[629,16211,707],{"class":675},[629,16213,685],{"class":634},[629,16215,688],{"class":668},[629,16217,691],{"class":634},[629,16219,716],{"class":655},[629,16221,697],{"class":634},[629,16223,16224,16226,16228,16230,16232,16234],{"class":631,"line":721},[629,16225,669],{"class":668},[629,16227,15215],{"class":675},[629,16229,15218],{"class":668},[629,16231,691],{"class":634},[629,16233,15223],{"class":655},[629,16235,697],{"class":634},[629,16237,16238,16240,16242],{"class":631,"line":731},[629,16239,724],{"class":634},[629,16241,639],{"class":638},[629,16243,661],{"class":634},[629,16245,16246],{"class":631,"line":737},[629,16247,734],{"emptyLinePlaceholder":586},[629,16249,16250,16252,16254],{"class":631,"line":747},[629,16251,635],{"class":634},[629,16253,742],{"class":638},[629,16255,661],{"class":634},[629,16257,16258,16260,16262,16264,16266,16268,16270,16272],{"class":631,"line":770},[629,16259,750],{"class":634},[629,16261,753],{"class":638},[629,16263,756],{"class":642},[629,16265,649],{"class":634},[629,16267,652],{"class":634},[629,16269,15260],{"class":655},[629,16271,652],{"class":634},[629,16273,661],{"class":634},[629,16275,16276,16278,16280,16282,16284,16286,16288,16290],{"class":631,"line":782},[629,16277,773],{"class":634},[629,16279,776],{"class":638},[629,16281,1477],{"class":642},[629,16283,649],{"class":634},[629,16285,652],{"class":634},[629,16287,15279],{"class":655},[629,16289,652],{"class":634},[629,16291,779],{"class":634},[629,16293,16294,16296,16298],{"class":631,"line":792},[629,16295,773],{"class":634},[629,16297,787],{"class":638},[629,16299,779],{"class":634},[629,16301,16302,16304,16306],{"class":631,"line":797},[629,16303,773],{"class":634},[629,16305,15298],{"class":638},[629,16307,779],{"class":634},[629,16309,16310,16312],{"class":631,"line":819},[629,16311,773],{"class":634},[629,16313,15307],{"class":638},[629,16315,16316,16318,16320,16322,16324],{"class":631,"line":623},[629,16317,15312],{"class":642},[629,16319,649],{"class":634},[629,16321,652],{"class":634},[629,16323,812],{"class":655},[629,16325,3123],{"class":634},[629,16327,16328,16330,16332,16334,16336],{"class":631,"line":842},[629,16329,15325],{"class":642},[629,16331,649],{"class":634},[629,16333,652],{"class":634},[629,16335,11342],{"class":655},[629,16337,3123],{"class":634},[629,16339,16340],{"class":631,"line":853},[629,16341,15338],{"class":634},[629,16343,16344,16346,16348,16350,16352,16354,16356,16358],{"class":631,"line":864},[629,16345,773],{"class":634},[629,16347,8448],{"class":638},[629,16349,1859],{"class":642},[629,16351,649],{"class":634},[629,16353,652],{"class":634},[629,16355,1866],{"class":655},[629,16357,652],{"class":634},[629,16359,779],{"class":634},[629,16361,16362,16364,16366],{"class":631,"line":874},[629,16363,897],{"class":634},[629,16365,753],{"class":638},[629,16367,661],{"class":634},[629,16369,16370,16372,16374],{"class":631,"line":624},[629,16371,724],{"class":634},[629,16373,742],{"class":638},[629,16375,661],{"class":634},[496,16377,16379],{"id":16378},"model-reference","Model reference",[606,16381,16382,16383,16386],{},"The component exposes the loaded GLTF as ",[610,16384,16385],{},"instance",", so a template ref gets you the parsed model:",[618,16388,16390],{"className":620,"code":16389,"language":625,"meta":568,"style":568},"\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",[610,16391,16392,16412,16430,16452,16456,16481,16485,16490,16524,16557,16563,16571,16575,16583,16590,16604,16618,16622],{"__ignoreMap":568},[629,16393,16394,16396,16398,16400,16402,16404,16406,16408,16410],{"class":631,"line":569},[629,16395,635],{"class":634},[629,16397,639],{"class":638},[629,16399,643],{"class":642},[629,16401,646],{"class":642},[629,16403,649],{"class":634},[629,16405,652],{"class":634},[629,16407,656],{"class":655},[629,16409,652],{"class":634},[629,16411,661],{"class":634},[629,16413,16414,16416,16418,16420,16422,16424,16426,16428],{"class":631,"line":570},[629,16415,669],{"class":668},[629,16417,672],{"class":634},[629,16419,16084],{"class":675},[629,16421,685],{"class":634},[629,16423,688],{"class":668},[629,16425,691],{"class":634},[629,16427,694],{"class":655},[629,16429,697],{"class":634},[629,16431,16432,16434,16436,16438,16440,16442,16444,16446,16448,16450],{"class":631,"line":700},[629,16433,669],{"class":668},[629,16435,672],{"class":634},[629,16437,3864],{"class":675},[629,16439,679],{"class":634},[629,16441,10202],{"class":675},[629,16443,685],{"class":634},[629,16445,688],{"class":668},[629,16447,691],{"class":634},[629,16449,625],{"class":655},[629,16451,697],{"class":634},[629,16453,16454],{"class":631,"line":721},[629,16455,734],{"emptyLinePlaceholder":586},[629,16457,16458,16460,16463,16465,16467,16469,16472,16475,16477,16479],{"class":631,"line":731},[629,16459,2407],{"class":642},[629,16461,16462],{"class":675}," modelRef ",[629,16464,649],{"class":634},[629,16466,3864],{"class":2426},[629,16468,635],{"class":634},[629,16470,16471],{"class":1192},"InstanceType",[629,16473,16474],{"class":634},"\u003Ctypeof",[629,16476,16084],{"class":675},[629,16478,3574],{"class":634},[629,16480,6527],{"class":675},[629,16482,16483],{"class":631,"line":737},[629,16484,734],{"emptyLinePlaceholder":586},[629,16486,16487],{"class":631,"line":747},[629,16488,16489],{"class":1201},"// `instance` is null until the file lands, so watch it rather than the ref\n",[629,16491,16492,16494,16496,16498,16500,16503,16505,16507,16509,16511,16513,16515,16518,16520,16522],{"class":631,"line":770},[629,16493,10251],{"class":2426},[629,16495,2429],{"class":675},[629,16497,3666],{"class":634},[629,16499,3669],{"class":642},[629,16501,16502],{"class":675}," modelRef",[629,16504,1138],{"class":634},[629,16506,3677],{"class":675},[629,16508,3680],{"class":634},[629,16510,16385],{"class":675},[629,16512,679],{"class":634},[629,16514,3066],{"class":634},[629,16516,16517],{"class":6830},"gltf",[629,16519,3332],{"class":634},[629,16521,3669],{"class":642},[629,16523,1196],{"class":634},[629,16525,16526,16529,16531,16534,16536,16538,16540,16543,16545,16547,16549,16551,16553,16555],{"class":631,"line":782},[629,16527,16528],{"class":675}," gltf",[629,16530,3680],{"class":634},[629,16532,16533],{"class":675},"scene",[629,16535,1138],{"class":634},[629,16537,4122],{"class":675},[629,16539,1138],{"class":634},[629,16541,16542],{"class":2426},"set",[629,16544,2429],{"class":638},[629,16546,957],{"class":2493},[629,16548,679],{"class":634},[629,16550,2498],{"class":2493},[629,16552,679],{"class":634},[629,16554,2498],{"class":2493},[629,16556,2440],{"class":638},[629,16558,16559,16561],{"class":631,"line":792},[629,16560,2420],{"class":634},[629,16562,2440],{"class":675},[629,16564,16565,16567,16569],{"class":631,"line":797},[629,16566,724],{"class":634},[629,16568,639],{"class":638},[629,16570,661],{"class":634},[629,16572,16573],{"class":631,"line":819},[629,16574,734],{"emptyLinePlaceholder":586},[629,16576,16577,16579,16581],{"class":631,"line":623},[629,16578,635],{"class":634},[629,16580,742],{"class":638},[629,16582,661],{"class":634},[629,16584,16585,16587],{"class":631,"line":842},[629,16586,750],{"class":634},[629,16588,16589],{"class":638},"GLTFModel\n",[629,16591,16592,16595,16597,16599,16602],{"class":631,"line":853},[629,16593,16594],{"class":642}," ref",[629,16596,649],{"class":634},[629,16598,652],{"class":634},[629,16600,16601],{"class":655},"modelRef",[629,16603,3123],{"class":634},[629,16605,16606,16609,16611,16613,16616],{"class":631,"line":864},[629,16607,16608],{"class":642}," path",[629,16610,649],{"class":634},[629,16612,652],{"class":634},[629,16614,16615],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[629,16617,3123],{"class":634},[629,16619,16620],{"class":631,"line":874},[629,16621,12057],{"class":634},[629,16623,16624,16626,16628],{"class":631,"line":624},[629,16625,724],{"class":634},[629,16627,742],{"class":638},[629,16629,661],{"class":634},[496,16631,914],{"id":913},[919,16633,16634,16644],{},[922,16635,16636],{},[925,16637,16638,16640,16642],{},[928,16639,930],{"align":989},[928,16641,933],{"align":989},[928,16643,936],{},[938,16645,16646,16662,16679,16693,16711],{},[925,16647,16648,16652,16658],{},[943,16649,16650],{"align":989},[610,16651,16149],{},[943,16653,16654,16655,1138],{"align":989},"Path to the model file. ",[1661,16656,16657],{},"Required",[943,16659,16660],{},[610,16661,1171],{},[925,16663,16664,16668,16675],{},[943,16665,16666],{"align":989},[610,16667,15381],{},[943,16669,16670,16671,16674],{"align":989},"Enable ",[1132,16672,15387],{"href":15385,"rel":16673},[1136]," for the model.",[943,16676,16677],{},[610,16678,963],{},[925,16680,16681,16685,16688],{},[943,16682,16683],{"align":989},[610,16684,15643],{},[943,16686,16687],{"align":989},"Path to a Draco decoder.",[943,16689,16690],{},[610,16691,16692],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[925,16694,16695,16700,16707],{},[943,16696,16697],{"align":989},[610,16698,16699],{},"castShadow",[943,16701,16702,16703,16706],{"align":989},"Apply ",[610,16704,16705],{},"cast-shadow"," to all meshes inside your model.",[943,16708,16709],{},[610,16710,963],{},[925,16712,16713,16718,16723],{},[943,16714,16715],{"align":989},[610,16716,16717],{},"receiveShadow",[943,16719,16702,16720,16706],{"align":989},[610,16721,16722],{},"receive-shadow",[943,16724,16725],{},[610,16726,963],{},[1997,16728,16729],{},[606,16730,16731,16733,16734,16738,16739,16741],{},[610,16732,16149],{}," is not reactive: the component reads it once on setup. Use\n",[1132,16735,16736],{"href":16041},[610,16737,125],{}," with a ",[610,16740,5886],{}," path if you need to swap models at runtime.",[496,16743,16745],{"id":16744},"when-to-reach-for-something-else","When to reach for something else",[606,16747,16748,16750,16751,16754,16755,16759,16760,16763],{},[610,16749,129],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[610,16752,16753],{},"v-if"," on. When you need that, use\n",[1132,16756,16757],{"href":16041},[610,16758,125],{}," to compose the parts yourself, or let the\n",[1132,16761,15972],{"href":15970,"rel":16762},[1136]," generate a typed component with a slot per node:",[618,16765,16767],{"className":15976,"code":16766,"language":15978,"meta":568,"style":568},"npx @tresjs/cli gltf public/models/robot.glb\n",[610,16768,16769],{"__ignoreMap":568},[629,16770,16771,16773,16775,16777],{"class":631,"line":569},[629,16772,15985],{"class":1192},[629,16774,15988],{"class":655},[629,16776,15991],{"class":655},[629,16778,15994],{"class":655},[16006,16780,16781],{"to":20},[606,16782,16010],{},[1319,16784,16785],{},"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":568,"searchDepth":569,"depth":570,"links":16787},[16788,16789,16790,16791],{"id":616,"depth":570,"text":15},{"id":16378,"depth":570,"text":16379},{"id":913,"depth":570,"text":914},{"id":16744,"depth":570,"text":16745},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":129,"description":16792},"VQ_YsNV94FVy6HCRAYN67RLxTmb-4Gfn8UDFrpHDFcQ",{"id":16797,"title":133,"body":16798,"description":17410,"extension":583,"links":584,"meta":17411,"navigation":586,"path":134,"seo":17412,"stem":135,"__hash__":17413},"docs/2.api/3.loaders/3.use-fbx.md",{"type":493,"value":16799,"toc":17404},[16800,16805,16810,16812,17200,17202,17281,17283,17309,17311,17313,17399,17401],[2287,16801,16802],{},[16803,16804],"loaders-fbx",{},[606,16806,16807,16808,14990],{},"A composable that allows you to easily load FBX models into your ",[1661,16809,14989],{},[496,16811,15],{"id":616},[14994,16813,16814,16983],{},[618,16815,16818],{"className":620,"code":16816,"filename":14999,"highlights":16817,"language":625,"meta":568,"style":568},"\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",[570,737],[610,16819,16820,16840,16860,16864,16879,16891,16916,16924,16928,16936,16975],{"__ignoreMap":568},[629,16821,16822,16824,16826,16828,16830,16832,16834,16836,16838],{"class":631,"line":569},[629,16823,635],{"class":634},[629,16825,639],{"class":638},[629,16827,643],{"class":642},[629,16829,646],{"class":642},[629,16831,649],{"class":634},[629,16833,652],{"class":634},[629,16835,656],{"class":655},[629,16837,652],{"class":634},[629,16839,661],{"class":634},[629,16841,16843,16845,16847,16850,16852,16854,16856,16858],{"class":16842,"line":570},[631,665],[629,16844,669],{"class":668},[629,16846,672],{"class":634},[629,16848,16849],{"class":675}," useFBX",[629,16851,685],{"class":634},[629,16853,688],{"class":668},[629,16855,691],{"class":634},[629,16857,694],{"class":655},[629,16859,697],{"class":634},[629,16861,16862],{"class":631,"line":700},[629,16863,734],{"emptyLinePlaceholder":586},[629,16865,16866,16868,16870,16872,16874,16877],{"class":631,"line":721},[629,16867,2407],{"class":642},[629,16869,15052],{"class":675},[629,16871,649],{"class":634},[629,16873,691],{"class":634},[629,16875,16876],{"class":655},"https://raw.githubusercontent.com/",[629,16878,697],{"class":634},[629,16880,16881,16884,16886,16889],{"class":631,"line":731},[629,16882,16883],{"class":634}," +",[629,16885,691],{"class":634},[629,16887,16888],{"class":655},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[629,16890,697],{"class":634},[629,16892,16894,16896,16898,16900,16902,16904,16906,16908,16910,16912,16914],{"class":16893,"line":737},[631,665],[629,16895,2407],{"class":642},[629,16897,672],{"class":634},[629,16899,2412],{"class":675},[629,16901,679],{"class":634},[629,16903,15075],{"class":675},[629,16905,679],{"class":634},[629,16907,15080],{"class":675},[629,16909,2420],{"class":634},[629,16911,2423],{"class":634},[629,16913,16849],{"class":2426},[629,16915,15089],{"class":675},[629,16917,16918,16920,16922],{"class":631,"line":747},[629,16919,724],{"class":634},[629,16921,639],{"class":638},[629,16923,661],{"class":634},[629,16925,16926],{"class":631,"line":770},[629,16927,734],{"emptyLinePlaceholder":586},[629,16929,16930,16932,16934],{"class":631,"line":782},[629,16931,635],{"class":634},[629,16933,742],{"class":638},[629,16935,661],{"class":634},[629,16937,16938,16940,16942,16944,16946,16948,16950,16952,16954,16956,16958,16960,16962,16964,16966,16968,16971,16973],{"class":631,"line":792},[629,16939,750],{"class":634},[629,16941,4426],{"class":638},[629,16943,2702],{"class":642},[629,16945,649],{"class":634},[629,16947,652],{"class":634},[629,16949,12849],{"class":655},[629,16951,652],{"class":634},[629,16953,4440],{"class":642},[629,16955,649],{"class":634},[629,16957,652],{"class":634},[629,16959,12849],{"class":655},[629,16961,652],{"class":634},[629,16963,805],{"class":642},[629,16965,649],{"class":634},[629,16967,652],{"class":634},[629,16969,16970],{"class":655},"0.025",[629,16972,652],{"class":634},[629,16974,779],{"class":634},[629,16976,16977,16979,16981],{"class":631,"line":797},[629,16978,724],{"class":634},[629,16980,742],{"class":638},[629,16982,661],{"class":634},[618,16984,16986],{"className":620,"code":16985,"filename":15150,"language":625,"meta":568,"style":568},"\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",[610,16987,16988,17008,17026,17044,17058,17066,17070,17078,17097,17116,17124,17132,17138,17150,17162,17166,17184,17192],{"__ignoreMap":568},[629,16989,16990,16992,16994,16996,16998,17000,17002,17004,17006],{"class":631,"line":569},[629,16991,635],{"class":634},[629,16993,639],{"class":638},[629,16995,643],{"class":642},[629,16997,646],{"class":642},[629,16999,649],{"class":634},[629,17001,652],{"class":634},[629,17003,656],{"class":655},[629,17005,652],{"class":634},[629,17007,661],{"class":634},[629,17009,17010,17012,17014,17016,17018,17020,17022,17024],{"class":631,"line":570},[629,17011,669],{"class":668},[629,17013,672],{"class":634},[629,17015,682],{"class":675},[629,17017,685],{"class":634},[629,17019,688],{"class":668},[629,17021,691],{"class":634},[629,17023,694],{"class":655},[629,17025,697],{"class":634},[629,17027,17028,17030,17032,17034,17036,17038,17040,17042],{"class":631,"line":700},[629,17029,669],{"class":668},[629,17031,672],{"class":634},[629,17033,707],{"class":675},[629,17035,685],{"class":634},[629,17037,688],{"class":668},[629,17039,691],{"class":634},[629,17041,716],{"class":655},[629,17043,697],{"class":634},[629,17045,17046,17048,17050,17052,17054,17056],{"class":631,"line":721},[629,17047,669],{"class":668},[629,17049,15215],{"class":675},[629,17051,15218],{"class":668},[629,17053,691],{"class":634},[629,17055,15223],{"class":655},[629,17057,697],{"class":634},[629,17059,17060,17062,17064],{"class":631,"line":731},[629,17061,724],{"class":634},[629,17063,639],{"class":638},[629,17065,661],{"class":634},[629,17067,17068],{"class":631,"line":737},[629,17069,734],{"emptyLinePlaceholder":586},[629,17071,17072,17074,17076],{"class":631,"line":747},[629,17073,635],{"class":634},[629,17075,742],{"class":638},[629,17077,661],{"class":634},[629,17079,17080,17082,17084,17086,17088,17090,17093,17095],{"class":631,"line":770},[629,17081,750],{"class":634},[629,17083,753],{"class":638},[629,17085,756],{"class":642},[629,17087,649],{"class":634},[629,17089,652],{"class":634},[629,17091,17092],{"class":655},"#1F90FF",[629,17094,652],{"class":634},[629,17096,661],{"class":634},[629,17098,17099,17101,17103,17105,17107,17109,17112,17114],{"class":631,"line":782},[629,17100,773],{"class":634},[629,17102,776],{"class":638},[629,17104,1477],{"class":642},[629,17106,649],{"class":634},[629,17108,652],{"class":634},[629,17110,17111],{"class":655},"[11, 11, 11]",[629,17113,652],{"class":634},[629,17115,779],{"class":634},[629,17117,17118,17120,17122],{"class":631,"line":792},[629,17119,773],{"class":634},[629,17121,787],{"class":638},[629,17123,779],{"class":634},[629,17125,17126,17128,17130],{"class":631,"line":797},[629,17127,773],{"class":634},[629,17129,15298],{"class":638},[629,17131,779],{"class":634},[629,17133,17134,17136],{"class":631,"line":819},[629,17135,773],{"class":634},[629,17137,15307],{"class":638},[629,17139,17140,17142,17144,17146,17148],{"class":631,"line":623},[629,17141,15312],{"class":642},[629,17143,649],{"class":634},[629,17145,652],{"class":634},[629,17147,812],{"class":655},[629,17149,3123],{"class":634},[629,17151,17152,17154,17156,17158,17160],{"class":631,"line":842},[629,17153,15325],{"class":642},[629,17155,649],{"class":634},[629,17157,652],{"class":634},[629,17159,11342],{"class":655},[629,17161,3123],{"class":634},[629,17163,17164],{"class":631,"line":853},[629,17165,15338],{"class":634},[629,17167,17168,17170,17172,17174,17176,17178,17180,17182],{"class":631,"line":864},[629,17169,773],{"class":634},[629,17171,8448],{"class":638},[629,17173,1859],{"class":642},[629,17175,649],{"class":634},[629,17177,652],{"class":634},[629,17179,1866],{"class":655},[629,17181,652],{"class":634},[629,17183,779],{"class":634},[629,17185,17186,17188,17190],{"class":631,"line":874},[629,17187,897],{"class":634},[629,17189,753],{"class":638},[629,17191,661],{"class":634},[629,17193,17194,17196,17198],{"class":631,"line":624},[629,17195,724],{"class":634},[629,17197,742],{"class":638},[629,17199,661],{"class":634},[496,17201,15464],{"id":15463},[919,17203,17204,17214],{},[922,17205,17206],{},[925,17207,17208,17210,17212],{},[928,17209,8081],{"align":989},[928,17211,5961],{},[928,17213,933],{},[938,17215,17216,17229,17242,17255,17267],{},[925,17217,17218,17222,17226],{},[943,17219,17220],{"align":989},[1661,17221,12849],{},[943,17223,17224],{},[610,17225,4518],{},[943,17227,17228],{},"The loaded FBX model state",[925,17230,17231,17235,17239],{},[943,17232,17233],{"align":989},[1661,17234,15502],{},[943,17236,17237],{},[610,17238,14558],{},[943,17240,17241],{},"Computed object containing all nodes in the scene",[925,17243,17244,17248,17252],{},[943,17245,17246],{"align":989},[1661,17247,520],{},[943,17249,17250],{},[610,17251,14558],{},[943,17253,17254],{},"Computed object containing all materials in the scene",[925,17256,17257,17261,17265],{},[943,17258,17259],{"align":989},[1661,17260,15531],{},[943,17262,17263],{},[610,17264,15629],{},[943,17266,15539],{},[925,17268,17269,17273,17278],{},[943,17270,17271],{"align":989},[1661,17272,15591],{},[943,17274,17275],{},[610,17276,17277],{},"() => Promise\u003Cvoid>",[943,17279,17280],{},"Function to reload the model",[496,17282,12085],{"id":15602},[919,17284,17285,17295],{},[922,17286,17287],{},[925,17288,17289,17291,17293],{},[928,17290,8081],{"align":989},[928,17292,5961],{},[928,17294,933],{},[938,17296,17297],{},[925,17298,17299,17303,17307],{},[943,17300,17301],{"align":989},[1661,17302,15662],{},[943,17304,17305],{},[610,17306,10109],{},[943,17308,15671],{},[496,17310,15675],{"id":15674},[606,17312,15678],{},[618,17314,17316],{"className":1178,"code":17315,"language":656,"meta":568,"style":568},"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",[610,17317,17318,17347,17351,17355,17373,17377,17381],{"__ignoreMap":568},[629,17319,17320,17322,17324,17326,17328,17330,17332,17334,17336,17338,17340,17343,17345],{"class":631,"line":569},[629,17321,2407],{"class":642},[629,17323,672],{"class":634},[629,17325,15075],{"class":675},[629,17327,679],{"class":634},[629,17329,15080],{"class":675},[629,17331,2420],{"class":634},[629,17333,2423],{"class":634},[629,17335,16849],{"class":2426},[629,17337,2429],{"class":675},[629,17339,2432],{"class":634},[629,17341,17342],{"class":655},"/model.fbx",[629,17344,2432],{"class":634},[629,17346,2440],{"class":675},[629,17348,17349],{"class":631,"line":570},[629,17350,734],{"emptyLinePlaceholder":586},[629,17352,17353],{"class":631,"line":700},[629,17354,15721],{"class":1201},[629,17356,17357,17359,17361,17363,17365,17367,17369,17371],{"class":631,"line":721},[629,17358,2407],{"class":642},[629,17360,15728],{"class":675},[629,17362,649],{"class":634},[629,17364,15075],{"class":675},[629,17366,1138],{"class":634},[629,17368,3677],{"class":675},[629,17370,1138],{"class":634},[629,17372,15741],{"class":675},[629,17374,17375],{"class":631,"line":731},[629,17376,734],{"emptyLinePlaceholder":586},[629,17378,17379],{"class":631,"line":737},[629,17380,15750],{"class":1201},[629,17382,17383,17385,17387,17389,17391,17393,17395,17397],{"class":631,"line":747},[629,17384,2407],{"class":642},[629,17386,15757],{"class":675},[629,17388,649],{"class":634},[629,17390,15762],{"class":675},[629,17392,1138],{"class":634},[629,17394,3677],{"class":675},[629,17396,1138],{"class":634},[629,17398,15771],{"class":675},[606,17400,15774],{},[1319,17402,17403],{},"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":568,"searchDepth":569,"depth":570,"links":17405},[17406,17407,17408,17409],{"id":616,"depth":570,"text":15},{"id":15463,"depth":570,"text":15464},{"id":15602,"depth":570,"text":12085},{"id":15674,"depth":570,"text":15675},"A composable to load FBX models in TresJS scenes.",{},{"title":133,"description":17410},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":17415,"title":137,"body":17416,"description":18049,"extension":583,"links":584,"meta":18050,"navigation":586,"path":138,"seo":18051,"stem":139,"__hash__":18052},"docs/2.api/3.loaders/4.fbx-model.md",{"type":493,"value":17417,"toc":18044},[17418,17422,17431,17433,17761,17763,17771,17984,17986,18041],[2287,17419,17420],{},[16803,17421],{},[606,17423,2768,17424,16038,17426,16044],{},[610,17425,137],{},[1132,17427,17429],{"href":17428},"./use-fbx",[610,17430,133],{},[496,17432,15],{"id":616},[14994,17434,17435,17547],{},[618,17436,17439],{"className":620,"code":17437,"filename":14999,"highlights":17438,"language":625,"meta":568,"style":568},"\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",[570,770],[610,17440,17441,17461,17481,17485,17500,17508,17512,17520,17539],{"__ignoreMap":568},[629,17442,17443,17445,17447,17449,17451,17453,17455,17457,17459],{"class":631,"line":569},[629,17444,635],{"class":634},[629,17446,639],{"class":638},[629,17448,643],{"class":642},[629,17450,646],{"class":642},[629,17452,649],{"class":634},[629,17454,652],{"class":634},[629,17456,656],{"class":655},[629,17458,652],{"class":634},[629,17460,661],{"class":634},[629,17462,17464,17466,17468,17471,17473,17475,17477,17479],{"class":17463,"line":570},[631,665],[629,17465,669],{"class":668},[629,17467,672],{"class":634},[629,17469,17470],{"class":675}," FBXModel",[629,17472,685],{"class":634},[629,17474,688],{"class":668},[629,17476,691],{"class":634},[629,17478,694],{"class":655},[629,17480,697],{"class":634},[629,17482,17483],{"class":631,"line":700},[629,17484,734],{"emptyLinePlaceholder":586},[629,17486,17487,17489,17491,17493,17495,17498],{"class":631,"line":721},[629,17488,2407],{"class":642},[629,17490,15052],{"class":675},[629,17492,649],{"class":634},[629,17494,691],{"class":634},[629,17496,17497],{"class":655},"./Jeep_done.fbx",[629,17499,697],{"class":634},[629,17501,17502,17504,17506],{"class":631,"line":731},[629,17503,724],{"class":634},[629,17505,639],{"class":638},[629,17507,661],{"class":634},[629,17509,17510],{"class":631,"line":737},[629,17511,734],{"emptyLinePlaceholder":586},[629,17513,17514,17516,17518],{"class":631,"line":747},[629,17515,635],{"class":634},[629,17517,742],{"class":638},[629,17519,661],{"class":634},[629,17521,17523,17525,17527,17529,17531,17533,17535,17537],{"class":17522,"line":770},[631,665],[629,17524,750],{"class":634},[629,17526,137],{"class":638},[629,17528,16142],{"class":642},[629,17530,649],{"class":634},[629,17532,652],{"class":634},[629,17534,16149],{"class":655},[629,17536,652],{"class":634},[629,17538,779],{"class":634},[629,17540,17541,17543,17545],{"class":631,"line":782},[629,17542,724],{"class":634},[629,17544,742],{"class":638},[629,17546,661],{"class":634},[618,17548,17549],{"className":620,"code":15149,"filename":15150,"language":625,"meta":568,"style":568},[610,17550,17551,17571,17589,17607,17621,17629,17633,17641,17659,17677,17685,17693,17699,17711,17723,17727,17745,17753],{"__ignoreMap":568},[629,17552,17553,17555,17557,17559,17561,17563,17565,17567,17569],{"class":631,"line":569},[629,17554,635],{"class":634},[629,17556,639],{"class":638},[629,17558,643],{"class":642},[629,17560,646],{"class":642},[629,17562,649],{"class":634},[629,17564,652],{"class":634},[629,17566,656],{"class":655},[629,17568,652],{"class":634},[629,17570,661],{"class":634},[629,17572,17573,17575,17577,17579,17581,17583,17585,17587],{"class":631,"line":570},[629,17574,669],{"class":668},[629,17576,672],{"class":634},[629,17578,682],{"class":675},[629,17580,685],{"class":634},[629,17582,688],{"class":668},[629,17584,691],{"class":634},[629,17586,694],{"class":655},[629,17588,697],{"class":634},[629,17590,17591,17593,17595,17597,17599,17601,17603,17605],{"class":631,"line":700},[629,17592,669],{"class":668},[629,17594,672],{"class":634},[629,17596,707],{"class":675},[629,17598,685],{"class":634},[629,17600,688],{"class":668},[629,17602,691],{"class":634},[629,17604,716],{"class":655},[629,17606,697],{"class":634},[629,17608,17609,17611,17613,17615,17617,17619],{"class":631,"line":721},[629,17610,669],{"class":668},[629,17612,15215],{"class":675},[629,17614,15218],{"class":668},[629,17616,691],{"class":634},[629,17618,15223],{"class":655},[629,17620,697],{"class":634},[629,17622,17623,17625,17627],{"class":631,"line":731},[629,17624,724],{"class":634},[629,17626,639],{"class":638},[629,17628,661],{"class":634},[629,17630,17631],{"class":631,"line":737},[629,17632,734],{"emptyLinePlaceholder":586},[629,17634,17635,17637,17639],{"class":631,"line":747},[629,17636,635],{"class":634},[629,17638,742],{"class":638},[629,17640,661],{"class":634},[629,17642,17643,17645,17647,17649,17651,17653,17655,17657],{"class":631,"line":770},[629,17644,750],{"class":634},[629,17646,753],{"class":638},[629,17648,756],{"class":642},[629,17650,649],{"class":634},[629,17652,652],{"class":634},[629,17654,15260],{"class":655},[629,17656,652],{"class":634},[629,17658,661],{"class":634},[629,17660,17661,17663,17665,17667,17669,17671,17673,17675],{"class":631,"line":782},[629,17662,773],{"class":634},[629,17664,776],{"class":638},[629,17666,1477],{"class":642},[629,17668,649],{"class":634},[629,17670,652],{"class":634},[629,17672,15279],{"class":655},[629,17674,652],{"class":634},[629,17676,779],{"class":634},[629,17678,17679,17681,17683],{"class":631,"line":792},[629,17680,773],{"class":634},[629,17682,787],{"class":638},[629,17684,779],{"class":634},[629,17686,17687,17689,17691],{"class":631,"line":797},[629,17688,773],{"class":634},[629,17690,15298],{"class":638},[629,17692,779],{"class":634},[629,17694,17695,17697],{"class":631,"line":819},[629,17696,773],{"class":634},[629,17698,15307],{"class":638},[629,17700,17701,17703,17705,17707,17709],{"class":631,"line":623},[629,17702,15312],{"class":642},[629,17704,649],{"class":634},[629,17706,652],{"class":634},[629,17708,812],{"class":655},[629,17710,3123],{"class":634},[629,17712,17713,17715,17717,17719,17721],{"class":631,"line":842},[629,17714,15325],{"class":642},[629,17716,649],{"class":634},[629,17718,652],{"class":634},[629,17720,11342],{"class":655},[629,17722,3123],{"class":634},[629,17724,17725],{"class":631,"line":853},[629,17726,15338],{"class":634},[629,17728,17729,17731,17733,17735,17737,17739,17741,17743],{"class":631,"line":864},[629,17730,773],{"class":634},[629,17732,8448],{"class":638},[629,17734,1859],{"class":642},[629,17736,649],{"class":634},[629,17738,652],{"class":634},[629,17740,1866],{"class":655},[629,17742,652],{"class":634},[629,17744,779],{"class":634},[629,17746,17747,17749,17751],{"class":631,"line":874},[629,17748,897],{"class":634},[629,17750,753],{"class":638},[629,17752,661],{"class":634},[629,17754,17755,17757,17759],{"class":631,"line":624},[629,17756,724],{"class":634},[629,17758,742],{"class":638},[629,17760,661],{"class":634},[496,17762,16379],{"id":16378},[606,17764,17765,17766,1669,17768,17770],{},"You can access the model reference by passing a ",[610,17767,5886],{},[610,17769,137],{}," component and then using it to get the object.",[618,17772,17774],{"className":620,"code":17773,"language":625,"meta":568,"style":568},"\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",[610,17775,17776,17796,17817,17835,17839,17858,17862,17882,17887,17914,17920,17928,17932,17940,17947,17959,17972,17976],{"__ignoreMap":568},[629,17777,17778,17780,17782,17784,17786,17788,17790,17792,17794],{"class":631,"line":569},[629,17779,635],{"class":634},[629,17781,639],{"class":638},[629,17783,643],{"class":642},[629,17785,646],{"class":642},[629,17787,649],{"class":634},[629,17789,652],{"class":634},[629,17791,656],{"class":655},[629,17793,652],{"class":634},[629,17795,661],{"class":634},[629,17797,17798,17800,17802,17804,17807,17809,17811,17813,17815],{"class":631,"line":570},[629,17799,669],{"class":668},[629,17801,3434],{"class":668},[629,17803,672],{"class":634},[629,17805,17806],{"class":675}," TresObject",[629,17808,685],{"class":634},[629,17810,688],{"class":668},[629,17812,691],{"class":634},[629,17814,716],{"class":655},[629,17816,697],{"class":634},[629,17818,17819,17821,17823,17825,17827,17829,17831,17833],{"class":631,"line":700},[629,17820,669],{"class":668},[629,17822,672],{"class":634},[629,17824,17470],{"class":675},[629,17826,685],{"class":634},[629,17828,688],{"class":668},[629,17830,691],{"class":634},[629,17832,694],{"class":655},[629,17834,697],{"class":634},[629,17836,17837],{"class":631,"line":721},[629,17838,734],{"emptyLinePlaceholder":586},[629,17840,17841,17843,17845,17847,17849,17851,17854,17856],{"class":631,"line":731},[629,17842,2407],{"class":642},[629,17844,16462],{"class":675},[629,17846,649],{"class":634},[629,17848,3490],{"class":2426},[629,17850,635],{"class":634},[629,17852,17853],{"class":1192},"TresObject",[629,17855,3643],{"class":634},[629,17857,6527],{"class":675},[629,17859,17860],{"class":631,"line":737},[629,17861,734],{"emptyLinePlaceholder":586},[629,17863,17864,17866,17869,17871,17873,17876,17878,17880],{"class":631,"line":747},[629,17865,10251],{"class":2426},[629,17867,17868],{"class":675},"(modelRef",[629,17870,679],{"class":634},[629,17872,3066],{"class":634},[629,17874,17875],{"class":6830},"model",[629,17877,3332],{"class":634},[629,17879,3669],{"class":642},[629,17881,1196],{"class":634},[629,17883,17884],{"class":631,"line":770},[629,17885,17886],{"class":1201}," // Do something with the model\n",[629,17888,17889,17892,17894,17896,17898,17900,17902,17904,17906,17908,17910,17912],{"class":631,"line":782},[629,17890,17891],{"class":675}," model",[629,17893,1138],{"class":634},[629,17895,4122],{"class":675},[629,17897,1138],{"class":634},[629,17899,16542],{"class":2426},[629,17901,2429],{"class":638},[629,17903,957],{"class":2493},[629,17905,679],{"class":634},[629,17907,2498],{"class":2493},[629,17909,679],{"class":634},[629,17911,2498],{"class":2493},[629,17913,2440],{"class":638},[629,17915,17916,17918],{"class":631,"line":792},[629,17917,2420],{"class":634},[629,17919,2440],{"class":675},[629,17921,17922,17924,17926],{"class":631,"line":797},[629,17923,724],{"class":634},[629,17925,639],{"class":638},[629,17927,661],{"class":634},[629,17929,17930],{"class":631,"line":819},[629,17931,734],{"emptyLinePlaceholder":586},[629,17933,17934,17936,17938],{"class":631,"line":623},[629,17935,635],{"class":634},[629,17937,742],{"class":638},[629,17939,661],{"class":634},[629,17941,17942,17944],{"class":631,"line":842},[629,17943,750],{"class":634},[629,17945,17946],{"class":638},"FBXModel\n",[629,17948,17949,17951,17953,17955,17957],{"class":631,"line":853},[629,17950,16594],{"class":642},[629,17952,649],{"class":634},[629,17954,652],{"class":634},[629,17956,16601],{"class":655},[629,17958,3123],{"class":634},[629,17960,17961,17963,17965,17967,17970],{"class":631,"line":864},[629,17962,16608],{"class":642},[629,17964,649],{"class":634},[629,17966,652],{"class":634},[629,17968,17969],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[629,17971,3123],{"class":634},[629,17973,17974],{"class":631,"line":874},[629,17975,12057],{"class":634},[629,17977,17978,17980,17982],{"class":631,"line":624},[629,17979,724],{"class":634},[629,17981,742],{"class":638},[629,17983,661],{"class":634},[496,17985,914],{"id":913},[919,17987,17988,17998],{},[922,17989,17990],{},[925,17991,17992,17994,17996],{},[928,17993,930],{"align":989},[928,17995,933],{"align":989},[928,17997,936],{},[938,17999,18000,18013,18027],{},[925,18001,18002,18006,18009],{},[943,18003,18004],{"align":989},[610,18005,16149],{},[943,18007,18008],{"align":989},"Path to the model file.",[943,18010,18011],{},[610,18012,1171],{},[925,18014,18015,18019,18023],{},[943,18016,18017],{"align":989},[610,18018,16699],{},[943,18020,16702,18021,16706],{"align":989},[610,18022,16705],{},[943,18024,18025],{},[610,18026,963],{},[925,18028,18029,18033,18037],{},[943,18030,18031],{"align":989},[610,18032,16717],{},[943,18034,16702,18035,16706],{"align":989},[610,18036,16722],{},[943,18038,18039],{},[610,18040,963],{},[1319,18042,18043],{},"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":568,"searchDepth":569,"depth":570,"links":18045},[18046,18047,18048],{"id":616,"depth":570,"text":15},{"id":16378,"depth":570,"text":16379},{"id":913,"depth":570,"text":914},"A component based on useFBX to load models in TresJS scenes.",{},{"title":137,"description":18049},"TBLk7umsoiJ37LzeU-f61yMZeJFhhM1KU9F-kfrD_I8",{"id":18054,"title":141,"body":18055,"description":18684,"extension":583,"links":584,"meta":18685,"navigation":586,"path":142,"seo":18686,"stem":143,"__hash__":18687},"docs/2.api/3.loaders/5.use-texture.md",{"type":493,"value":18056,"toc":18678},[18057,18062,18073,18075,18227,18229,18281,18283,18338,18342,18349,18675],[2287,18058,18059],{},[18060,18061],"loaders-use-texture",{},[606,18063,18064,18065,18070,18071,14990],{},"A composable that allows you to load textures using the ",[1132,18066,18069],{"href":18067,"rel":18068},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1136],"Three.js texture loader"," into your ",[1661,18072,14989],{},[496,18074,15],{"id":616},[618,18076,18079],{"className":620,"code":18077,"highlights":18078,"language":625,"meta":568,"style":568},"\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",[570,721,792],[610,18080,18081,18101,18120,18124,18156,18164,18168,18176,18184,18192,18211,18219],{"__ignoreMap":568},[629,18082,18083,18085,18087,18089,18091,18093,18095,18097,18099],{"class":631,"line":569},[629,18084,635],{"class":634},[629,18086,639],{"class":638},[629,18088,643],{"class":642},[629,18090,646],{"class":642},[629,18092,649],{"class":634},[629,18094,652],{"class":634},[629,18096,656],{"class":655},[629,18098,652],{"class":634},[629,18100,661],{"class":634},[629,18102,18104,18106,18108,18110,18112,18114,18116,18118],{"class":18103,"line":570},[631,665],[629,18105,669],{"class":668},[629,18107,672],{"class":634},[629,18109,2351],{"class":675},[629,18111,685],{"class":634},[629,18113,688],{"class":668},[629,18115,691],{"class":634},[629,18117,694],{"class":655},[629,18119,697],{"class":634},[629,18121,18122],{"class":631,"line":700},[629,18123,734],{"emptyLinePlaceholder":586},[629,18125,18127,18129,18131,18133,18135,18138,18140,18143,18145,18148,18150,18152,18154],{"class":18126,"line":721},[631,665],[629,18128,2407],{"class":642},[629,18130,672],{"class":634},[629,18132,2412],{"class":638},[629,18134,1210],{"class":634},[629,18136,18137],{"class":675}," texture",[629,18139,679],{"class":634},[629,18141,18142],{"class":675}," isLoading",[629,18144,679],{"class":634},[629,18146,18147],{"class":675}," error ",[629,18149,2420],{"class":634},[629,18151,2423],{"class":634},[629,18153,2351],{"class":2426},[629,18155,15089],{"class":675},[629,18157,18158,18160,18162],{"class":631,"line":731},[629,18159,724],{"class":634},[629,18161,639],{"class":638},[629,18163,661],{"class":634},[629,18165,18166],{"class":631,"line":737},[629,18167,734],{"emptyLinePlaceholder":586},[629,18169,18170,18172,18174],{"class":631,"line":747},[629,18171,635],{"class":634},[629,18173,742],{"class":638},[629,18175,661],{"class":634},[629,18177,18178,18180,18182],{"class":631,"line":770},[629,18179,750],{"class":634},[629,18181,848],{"class":638},[629,18183,661],{"class":634},[629,18185,18186,18188,18190],{"class":631,"line":782},[629,18187,773],{"class":634},[629,18189,3950],{"class":638},[629,18191,779],{"class":634},[629,18193,18195,18197,18199,18201,18203,18205,18207,18209],{"class":18194,"line":792},[631,665],[629,18196,773],{"class":634},[629,18198,2678],{"class":638},[629,18200,2726],{"class":642},[629,18202,649],{"class":634},[629,18204,652],{"class":634},[629,18206,2709],{"class":655},[629,18208,652],{"class":634},[629,18210,779],{"class":634},[629,18212,18213,18215,18217],{"class":631,"line":797},[629,18214,897],{"class":634},[629,18216,848],{"class":638},[629,18218,661],{"class":634},[629,18220,18221,18223,18225],{"class":631,"line":819},[629,18222,724],{"class":634},[629,18224,742],{"class":638},[629,18226,661],{"class":634},[496,18228,12085],{"id":15602},[919,18230,18231,18243],{},[922,18232,18233],{},[925,18234,18235,18237,18239,18241],{},[928,18236,8081],{"align":989},[928,18238,5961],{},[928,18240,936],{},[928,18242,933],{},[938,18244,18245,18262],{},[925,18246,18247,18251,18255,18259],{},[943,18248,18249],{"align":989},[1661,18250,16149],{},[943,18252,18253],{},[610,18254,3564],{},[943,18256,18257],{},[610,18258,1171],{},[943,18260,18261],{},"The path to the texture.",[925,18263,18264,18269,18274,18278],{},[943,18265,18266],{"align":989},[1661,18267,18268],{},"manager",[943,18270,18271],{},[610,18272,18273],{},"THREE.LoadingManager",[943,18275,18276],{},[610,18277,1171],{},[943,18279,18280],{},"The loading manager to use for the texture.",[496,18282,15464],{"id":15463},[919,18284,18285,18295],{},[922,18286,18287],{},[925,18288,18289,18291,18293],{},[928,18290,8081],{"align":989},[928,18292,5961],{"align":989},[928,18294,933],{"align":989},[938,18296,18297,18311,18324],{},[925,18298,18299,18303,18308],{},[943,18300,18301],{"align":989},[610,18302,12849],{},[943,18304,18305],{"align":989},[610,18306,18307],{},"Texture | null",[943,18309,18310],{"align":989},"The loaded texture",[925,18312,18313,18317,18321],{},[943,18314,18315],{"align":989},[610,18316,15531],{},[943,18318,18319],{"align":989},[610,18320,15629],{},[943,18322,18323],{"align":989},"Whether the texture is loading",[925,18325,18326,18330,18335],{},[943,18327,18328],{"align":989},[610,18329,15546],{},[943,18331,18332],{"align":989},[610,18333,18334],{},"string | null",[943,18336,18337],{"align":989},"Error message if loading failed",[496,18339,18341],{"id":18340},"component-usage","Component Usage",[606,18343,18344,18345,18348],{},"You can also use the ",[610,18346,18347],{},"UseTexture"," component directly in your template:",[618,18350,18353],{"className":620,"code":18351,"highlights":18352,"language":625,"meta":568,"style":568},"\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",[570,864,874,624,894,904,2617,2673],[610,18354,18355,18375,18395,18399,18414,18418,18442,18465,18469,18473,18497,18520,18524,18532,18536,18544,18552,18567,18581,18596,18611,18616,18624,18632,18650,18658,18667],{"__ignoreMap":568},[629,18356,18357,18359,18361,18363,18365,18367,18369,18371,18373],{"class":631,"line":569},[629,18358,635],{"class":634},[629,18360,639],{"class":638},[629,18362,643],{"class":642},[629,18364,646],{"class":642},[629,18366,649],{"class":634},[629,18368,652],{"class":634},[629,18370,656],{"class":655},[629,18372,652],{"class":634},[629,18374,661],{"class":634},[629,18376,18378,18380,18382,18385,18387,18389,18391,18393],{"class":18377,"line":570},[631,665],[629,18379,669],{"class":668},[629,18381,672],{"class":634},[629,18383,18384],{"class":675}," UseTexture",[629,18386,685],{"class":634},[629,18388,688],{"class":668},[629,18390,691],{"class":634},[629,18392,694],{"class":655},[629,18394,697],{"class":634},[629,18396,18397],{"class":631,"line":700},[629,18398,734],{"emptyLinePlaceholder":586},[629,18400,18401,18403,18405,18407,18409,18412],{"class":631,"line":721},[629,18402,2407],{"class":642},[629,18404,15052],{"class":675},[629,18406,649],{"class":634},[629,18408,691],{"class":634},[629,18410,18411],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[629,18413,697],{"class":634},[629,18415,18416],{"class":631,"line":731},[629,18417,734],{"emptyLinePlaceholder":586},[629,18419,18420,18422,18425,18427,18429,18431,18433,18436,18438,18440],{"class":631,"line":737},[629,18421,2407],{"class":642},[629,18423,18424],{"class":675}," handleLoaded ",[629,18426,649],{"class":634},[629,18428,3066],{"class":634},[629,18430,2709],{"class":6830},[629,18432,1210],{"class":634},[629,18434,18435],{"class":1192}," Texture",[629,18437,3332],{"class":634},[629,18439,3669],{"class":642},[629,18441,1196],{"class":634},[629,18443,18444,18446,18448,18450,18452,18454,18457,18459,18461,18463],{"class":631,"line":747},[629,18445,6846],{"class":675},[629,18447,1138],{"class":634},[629,18449,6851],{"class":2426},[629,18451,2429],{"class":638},[629,18453,2432],{"class":634},[629,18455,18456],{"class":655},"Loaded texture",[629,18458,2432],{"class":634},[629,18460,679],{"class":634},[629,18462,18137],{"class":675},[629,18464,2440],{"class":638},[629,18466,18467],{"class":631,"line":770},[629,18468,1317],{"class":634},[629,18470,18471],{"class":631,"line":782},[629,18472,734],{"emptyLinePlaceholder":586},[629,18474,18475,18477,18480,18482,18484,18486,18488,18491,18493,18495],{"class":631,"line":792},[629,18476,2407],{"class":642},[629,18478,18479],{"class":675}," handleError ",[629,18481,649],{"class":634},[629,18483,3066],{"class":634},[629,18485,15546],{"class":6830},[629,18487,1210],{"class":634},[629,18489,18490],{"class":1192}," unknown",[629,18492,3332],{"class":634},[629,18494,3669],{"class":642},[629,18496,1196],{"class":634},[629,18498,18499,18501,18503,18505,18507,18509,18511,18513,18515,18518],{"class":631,"line":797},[629,18500,6846],{"class":675},[629,18502,1138],{"class":634},[629,18504,15546],{"class":2426},[629,18506,2429],{"class":638},[629,18508,2432],{"class":634},[629,18510,15546],{"class":655},[629,18512,2432],{"class":634},[629,18514,679],{"class":634},[629,18516,18517],{"class":675}," error",[629,18519,2440],{"class":638},[629,18521,18522],{"class":631,"line":819},[629,18523,1317],{"class":634},[629,18525,18526,18528,18530],{"class":631,"line":623},[629,18527,724],{"class":634},[629,18529,639],{"class":638},[629,18531,661],{"class":634},[629,18533,18534],{"class":631,"line":842},[629,18535,734],{"emptyLinePlaceholder":586},[629,18537,18538,18540,18542],{"class":631,"line":853},[629,18539,635],{"class":634},[629,18541,742],{"class":638},[629,18543,661],{"class":634},[629,18545,18547,18549],{"class":18546,"line":864},[631,665],[629,18548,750],{"class":634},[629,18550,18551],{"class":638},"UseTexture\n",[629,18553,18555,18558,18560,18562,18565],{"class":18554,"line":874},[631,665],[629,18556,18557],{"class":642}," v-slot",[629,18559,649],{"class":634},[629,18561,652],{"class":634},[629,18563,18564],{"class":655},"{ state: texture }",[629,18566,3123],{"class":634},[629,18568,18570,18573,18575,18577,18579],{"class":18569,"line":624},[631,665],[629,18571,18572],{"class":642}," :path",[629,18574,649],{"class":634},[629,18576,652],{"class":634},[629,18578,16149],{"class":655},[629,18580,3123],{"class":634},[629,18582,18584,18587,18589,18591,18594],{"class":18583,"line":894},[631,665],[629,18585,18586],{"class":642}," @loaded",[629,18588,649],{"class":634},[629,18590,652],{"class":634},[629,18592,18593],{"class":655},"handleLoaded",[629,18595,3123],{"class":634},[629,18597,18599,18602,18604,18606,18609],{"class":18598,"line":904},[631,665],[629,18600,18601],{"class":642}," @error",[629,18603,649],{"class":634},[629,18605,652],{"class":634},[629,18607,18608],{"class":655},"handleError",[629,18610,3123],{"class":634},[629,18612,18614],{"class":18613,"line":2617},[631,665],[629,18615,5165],{"class":634},[629,18617,18618,18620,18622],{"class":631,"line":2626},[629,18619,773],{"class":634},[629,18621,848],{"class":638},[629,18623,661],{"class":634},[629,18625,18626,18628,18630],{"class":631,"line":2646},[629,18627,845],{"class":634},[629,18629,3950],{"class":638},[629,18631,779],{"class":634},[629,18633,18634,18636,18638,18640,18642,18644,18646,18648],{"class":631,"line":2655},[629,18635,845],{"class":634},[629,18637,2678],{"class":638},[629,18639,2726],{"class":642},[629,18641,649],{"class":634},[629,18643,652],{"class":634},[629,18645,2709],{"class":655},[629,18647,652],{"class":634},[629,18649,779],{"class":634},[629,18651,18652,18654,18656],{"class":631,"line":2664},[629,18653,887],{"class":634},[629,18655,848],{"class":638},[629,18657,661],{"class":634},[629,18659,18661,18663,18665],{"class":18660,"line":2673},[631,665],[629,18662,897],{"class":634},[629,18664,18347],{"class":638},[629,18666,661],{"class":634},[629,18668,18669,18671,18673],{"class":631,"line":2695},[629,18670,724],{"class":634},[629,18672,742],{"class":638},[629,18674,661],{"class":634},[1319,18676,18677],{},"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":568,"searchDepth":569,"depth":570,"links":18679},[18680,18681,18682,18683],{"id":616,"depth":570,"text":15},{"id":15602,"depth":570,"text":12085},{"id":15463,"depth":570,"text":15464},{"id":18340,"depth":570,"text":18341},"A composable to load textures in TresJS scenes.",{},{"title":141,"description":18684},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":18689,"title":145,"body":18690,"description":20131,"extension":583,"links":584,"meta":20132,"navigation":586,"path":146,"seo":20133,"stem":147,"__hash__":20134},"docs/2.api/3.loaders/6.use-textures.md",{"type":493,"value":18691,"toc":20122},[18692,18697,18705,18707,18953,18957,18960,19988,19992,19996,20031,20035,20089,20093,20119],[2287,18693,18694],{},[18695,18696],"loaders-use-textures",{},[606,18698,18699,18700,18070,18703,14990],{},"A composable that allows you to load multiple textures at once using the ",[1132,18701,18069],{"href":18067,"rel":18702},[1136],[1661,18704,14989],{},[496,18706,15],{"id":616},[618,18708,18711],{"className":620,"code":18709,"highlights":18710,"language":625,"meta":568,"style":568},"\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",[570,819,894,904,2617],[610,18712,18713,18733,18752,18756,18761,18773,18784,18795,18804,18809,18813,18818,18845,18853,18857,18865,18873,18881,18888,18903,18918,18933,18937,18945],{"__ignoreMap":568},[629,18714,18715,18717,18719,18721,18723,18725,18727,18729,18731],{"class":631,"line":569},[629,18716,635],{"class":634},[629,18718,639],{"class":638},[629,18720,643],{"class":642},[629,18722,646],{"class":642},[629,18724,649],{"class":634},[629,18726,652],{"class":634},[629,18728,656],{"class":655},[629,18730,652],{"class":634},[629,18732,661],{"class":634},[629,18734,18736,18738,18740,18742,18744,18746,18748,18750],{"class":18735,"line":570},[631,665],[629,18737,669],{"class":668},[629,18739,672],{"class":634},[629,18741,2832],{"class":675},[629,18743,685],{"class":634},[629,18745,688],{"class":668},[629,18747,691],{"class":634},[629,18749,694],{"class":655},[629,18751,697],{"class":634},[629,18753,18754],{"class":631,"line":700},[629,18755,734],{"emptyLinePlaceholder":586},[629,18757,18758],{"class":631,"line":721},[629,18759,18760],{"class":1201},"// Define an array of texture paths\n",[629,18762,18763,18765,18768,18770],{"class":631,"line":731},[629,18764,2407],{"class":642},[629,18766,18767],{"class":675}," texturePaths ",[629,18769,649],{"class":634},[629,18771,18772],{"class":675}," [\n",[629,18774,18775,18777,18780,18782],{"class":631,"line":737},[629,18776,2868],{"class":634},[629,18778,18779],{"class":655},"/textures/color.jpg",[629,18781,2432],{"class":634},[629,18783,2480],{"class":634},[629,18785,18786,18788,18791,18793],{"class":631,"line":747},[629,18787,2868],{"class":634},[629,18789,18790],{"class":655},"/textures/normal.jpg",[629,18792,2432],{"class":634},[629,18794,2480],{"class":634},[629,18796,18797,18799,18802],{"class":631,"line":770},[629,18798,2868],{"class":634},[629,18800,18801],{"class":655},"/textures/roughness.jpg",[629,18803,697],{"class":634},[629,18805,18806],{"class":631,"line":782},[629,18807,18808],{"class":675},"]\n",[629,18810,18811],{"class":631,"line":792},[629,18812,734],{"emptyLinePlaceholder":586},[629,18814,18815],{"class":631,"line":797},[629,18816,18817],{"class":1201},"// Load all textures at once\n",[629,18819,18821,18823,18825,18828,18830,18832,18834,18836,18838,18840,18842],{"class":18820,"line":819},[631,665],[629,18822,2407],{"class":642},[629,18824,672],{"class":634},[629,18826,18827],{"class":675}," textures",[629,18829,679],{"class":634},[629,18831,18142],{"class":675},[629,18833,679],{"class":634},[629,18835,18147],{"class":675},[629,18837,2420],{"class":634},[629,18839,2423],{"class":634},[629,18841,2832],{"class":2426},[629,18843,18844],{"class":675},"(texturePaths)\n",[629,18846,18847,18849,18851],{"class":631,"line":623},[629,18848,724],{"class":634},[629,18850,639],{"class":638},[629,18852,661],{"class":634},[629,18854,18855],{"class":631,"line":842},[629,18856,734],{"emptyLinePlaceholder":586},[629,18858,18859,18861,18863],{"class":631,"line":853},[629,18860,635],{"class":634},[629,18862,742],{"class":638},[629,18864,661],{"class":634},[629,18866,18867,18869,18871],{"class":631,"line":864},[629,18868,750],{"class":634},[629,18870,848],{"class":638},[629,18872,661],{"class":634},[629,18874,18875,18877,18879],{"class":631,"line":874},[629,18876,773],{"class":634},[629,18878,3950],{"class":638},[629,18880,779],{"class":634},[629,18882,18883,18885],{"class":631,"line":624},[629,18884,773],{"class":634},[629,18886,18887],{"class":638},"TresMeshStandardMaterial\n",[629,18889,18891,18894,18896,18898,18901],{"class":18890,"line":894},[631,665],[629,18892,18893],{"class":642}," :map",[629,18895,649],{"class":634},[629,18897,652],{"class":634},[629,18899,18900],{"class":655},"textures[0]",[629,18902,3123],{"class":634},[629,18904,18906,18909,18911,18913,18916],{"class":18905,"line":904},[631,665],[629,18907,18908],{"class":642}," :normal-map",[629,18910,649],{"class":634},[629,18912,652],{"class":634},[629,18914,18915],{"class":655},"textures[1]",[629,18917,3123],{"class":634},[629,18919,18921,18924,18926,18928,18931],{"class":18920,"line":2617},[631,665],[629,18922,18923],{"class":642}," :roughness-map",[629,18925,649],{"class":634},[629,18927,652],{"class":634},[629,18929,18930],{"class":655},"textures[2]",[629,18932,3123],{"class":634},[629,18934,18935],{"class":631,"line":2626},[629,18936,15338],{"class":634},[629,18938,18939,18941,18943],{"class":631,"line":2646},[629,18940,897],{"class":634},[629,18942,848],{"class":638},[629,18944,661],{"class":634},[629,18946,18947,18949,18951],{"class":631,"line":2655},[629,18948,724],{"class":634},[629,18950,742],{"class":638},[629,18952,661],{"class":634},[496,18954,18956],{"id":18955},"pbr-textures-example","PBR Textures Example",[606,18958,18959],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[618,18961,18964],{"className":620,"code":18962,"filename":18963,"language":625,"meta":568,"style":568},"\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",[610,18965,18966,18986,19009,19040,19058,19062,19067,19108,19140,19171,19175,19180,19190,19201,19212,19223,19234,19243,19247,19251,19256,19280,19284,19289,19320,19357,19362,19381,19385,19390,19410,19429,19448,19468,19487,19491,19496,19510,19525,19540,19545,19552,19557,19563,19584,19590,19597,19602,19623,19636,19662,19667,19674,19683,19688,19697,19716,19726,19761,19770,19790,19799,19808,19827,19870,19912,19932,19961,19970,19979],{"__ignoreMap":568},[629,18967,18968,18970,18972,18974,18976,18978,18980,18982,18984],{"class":631,"line":569},[629,18969,635],{"class":634},[629,18971,639],{"class":638},[629,18973,643],{"class":642},[629,18975,646],{"class":642},[629,18977,649],{"class":634},[629,18979,652],{"class":634},[629,18981,656],{"class":655},[629,18983,652],{"class":634},[629,18985,661],{"class":634},[629,18987,18988,18990,18992,18994,18996,18999,19001,19003,19005,19007],{"class":631,"line":570},[629,18989,669],{"class":668},[629,18991,672],{"class":634},[629,18993,707],{"class":675},[629,18995,679],{"class":634},[629,18997,18998],{"class":675}," vLightHelper",[629,19000,685],{"class":634},[629,19002,688],{"class":668},[629,19004,691],{"class":634},[629,19006,716],{"class":655},[629,19008,697],{"class":634},[629,19010,19011,19013,19015,19018,19020,19022,19024,19026,19028,19030,19032,19034,19036,19038],{"class":631,"line":700},[629,19012,669],{"class":668},[629,19014,672],{"class":634},[629,19016,19017],{"class":675}," Environment",[629,19019,679],{"class":634},[629,19021,682],{"class":675},[629,19023,679],{"class":634},[629,19025,4339],{"class":675},[629,19027,679],{"class":634},[629,19029,2832],{"class":675},[629,19031,685],{"class":634},[629,19033,688],{"class":668},[629,19035,691],{"class":634},[629,19037,694],{"class":655},[629,19039,697],{"class":634},[629,19041,19042,19044,19046,19048,19050,19052,19054,19056],{"class":631,"line":721},[629,19043,669],{"class":668},[629,19045,672],{"class":634},[629,19047,15814],{"class":675},[629,19049,685],{"class":634},[629,19051,688],{"class":668},[629,19053,691],{"class":634},[629,19055,4618],{"class":655},[629,19057,697],{"class":634},[629,19059,19060],{"class":631,"line":731},[629,19061,734],{"emptyLinePlaceholder":586},[629,19063,19064],{"class":631,"line":737},[629,19065,19066],{"class":1201},"// Load the 3D model\n",[629,19068,19069,19071,19073,19075,19077,19079,19081,19083,19085,19087,19089,19092,19094,19096,19098,19100,19102,19104,19106],{"class":631,"line":747},[629,19070,2407],{"class":642},[629,19072,672],{"class":634},[629,19074,2412],{"class":638},[629,19076,1210],{"class":634},[629,19078,5001],{"class":675},[629,19080,2420],{"class":634},[629,19082,2423],{"class":634},[629,19084,4339],{"class":2426},[629,19086,2429],{"class":675},[629,19088,2432],{"class":634},[629,19090,19091],{"class":655},"/blender-cube-draco.glb",[629,19093,2432],{"class":634},[629,19095,679],{"class":634},[629,19097,672],{"class":634},[629,19099,4384],{"class":638},[629,19101,1210],{"class":634},[629,19103,4390],{"class":4389},[629,19105,685],{"class":634},[629,19107,2440],{"class":675},[629,19109,19110,19112,19115,19117,19119,19121,19123,19125,19127,19129,19131,19133,19135,19137],{"class":631,"line":770},[629,19111,2407],{"class":642},[629,19113,19114],{"class":675}," cube ",[629,19116,649],{"class":634},[629,19118,3481],{"class":2426},[629,19120,2429],{"class":675},[629,19122,3666],{"class":634},[629,19124,3669],{"class":642},[629,19126,5040],{"class":675},[629,19128,1138],{"class":634},[629,19130,3677],{"class":675},[629,19132,3680],{"class":634},[629,19134,15502],{"class":675},[629,19136,3680],{"class":634},[629,19138,19139],{"class":675},"BlenderCube)\n",[629,19141,19142,19144,19146,19148,19150,19152,19154,19156,19158,19160,19162,19164,19166,19168],{"class":631,"line":782},[629,19143,2407],{"class":642},[629,19145,15757],{"class":675},[629,19147,649],{"class":634},[629,19149,3481],{"class":2426},[629,19151,2429],{"class":675},[629,19153,3666],{"class":634},[629,19155,3669],{"class":642},[629,19157,5040],{"class":675},[629,19159,1138],{"class":634},[629,19161,3677],{"class":675},[629,19163,3680],{"class":634},[629,19165,520],{"class":675},[629,19167,3680],{"class":634},[629,19169,19170],{"class":675},"Material)\n",[629,19172,19173],{"class":631,"line":792},[629,19174,734],{"emptyLinePlaceholder":586},[629,19176,19177],{"class":631,"line":797},[629,19178,19179],{"class":1201},"// Define texture paths\n",[629,19181,19182,19184,19186,19188],{"class":631,"line":819},[629,19183,2407],{"class":642},[629,19185,18767],{"class":675},[629,19187,649],{"class":634},[629,19189,18772],{"class":675},[629,19191,19192,19194,19197,19199],{"class":631,"line":623},[629,19193,2868],{"class":634},[629,19195,19196],{"class":655},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[629,19198,2432],{"class":634},[629,19200,2480],{"class":634},[629,19202,19203,19205,19208,19210],{"class":631,"line":842},[629,19204,2868],{"class":634},[629,19206,19207],{"class":655},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[629,19209,2432],{"class":634},[629,19211,2480],{"class":634},[629,19213,19214,19216,19219,19221],{"class":631,"line":853},[629,19215,2868],{"class":634},[629,19217,19218],{"class":655},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[629,19220,2432],{"class":634},[629,19222,2480],{"class":634},[629,19224,19225,19227,19230,19232],{"class":631,"line":864},[629,19226,2868],{"class":634},[629,19228,19229],{"class":655},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[629,19231,2432],{"class":634},[629,19233,2480],{"class":634},[629,19235,19236,19238,19241],{"class":631,"line":874},[629,19237,2868],{"class":634},[629,19239,19240],{"class":655},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[629,19242,697],{"class":634},[629,19244,19245],{"class":631,"line":624},[629,19246,18808],{"class":675},[629,19248,19249],{"class":631,"line":894},[629,19250,734],{"emptyLinePlaceholder":586},[629,19252,19253],{"class":631,"line":904},[629,19254,19255],{"class":1201},"// Load all PBR textures at once\n",[629,19257,19258,19260,19262,19264,19266,19268,19270,19272,19274,19276,19278],{"class":631,"line":2617},[629,19259,2407],{"class":642},[629,19261,672],{"class":634},[629,19263,18827],{"class":675},[629,19265,679],{"class":634},[629,19267,18142],{"class":675},[629,19269,679],{"class":634},[629,19271,18147],{"class":675},[629,19273,2420],{"class":634},[629,19275,2423],{"class":634},[629,19277,2832],{"class":2426},[629,19279,18844],{"class":675},[629,19281,19282],{"class":631,"line":2626},[629,19283,734],{"emptyLinePlaceholder":586},[629,19285,19286],{"class":631,"line":2646},[629,19287,19288],{"class":1201},"// Apply textures to material when loaded\n",[629,19290,19291,19293,19296,19298,19301,19303,19306,19309,19311,19313,19316,19318],{"class":631,"line":2655},[629,19292,10251],{"class":2426},[629,19294,19295],{"class":675},"([material",[629,19297,679],{"class":634},[629,19299,19300],{"class":675}," textures]",[629,19302,679],{"class":634},[629,19304,19305],{"class":634}," ([",[629,19307,19308],{"class":6830},"modelMaterial",[629,19310,679],{"class":634},[629,19312,18827],{"class":6830},[629,19314,19315],{"class":634},"])",[629,19317,3669],{"class":642},[629,19319,1196],{"class":634},[629,19321,19322,19325,19327,19329,19332,19334,19336,19338,19340,19343,19346,19349,19351,19353,19355],{"class":631,"line":2664},[629,19323,19324],{"class":668}," if",[629,19326,3066],{"class":638},[629,19328,19308],{"class":675},[629,19330,19331],{"class":634}," &&",[629,19333,18827],{"class":675},[629,19335,19331],{"class":634},[629,19337,18827],{"class":675},[629,19339,1138],{"class":634},[629,19341,19342],{"class":675},"length",[629,19344,19345],{"class":634}," ===",[629,19347,19348],{"class":675}," texturePaths",[629,19350,1138],{"class":634},[629,19352,19342],{"class":675},[629,19354,4726],{"class":638},[629,19356,3252],{"class":634},[629,19358,19359],{"class":631,"line":2673},[629,19360,19361],{"class":1201}," // Cast to MeshStandardMaterial to access PBR properties\n",[629,19363,19364,19367,19370,19372,19375,19378],{"class":631,"line":2695},[629,19365,19366],{"class":642}," const",[629,19368,19369],{"class":675}," pbrMaterial",[629,19371,2423],{"class":634},[629,19373,19374],{"class":675}," modelMaterial",[629,19376,19377],{"class":668}," as",[629,19379,19380],{"class":1192}," MeshStandardMaterial\n",[629,19382,19383],{"class":631,"line":2739},[629,19384,734],{"emptyLinePlaceholder":586},[629,19386,19387],{"class":631,"line":2748},[629,19388,19389],{"class":1201}," // Apply textures\n",[629,19391,19392,19395,19397,19399,19401,19403,19406,19408],{"class":631,"line":2757},[629,19393,19394],{"class":675}," pbrMaterial",[629,19396,1138],{"class":634},[629,19398,2973],{"class":675},[629,19400,2423],{"class":634},[629,19402,18827],{"class":675},[629,19404,19405],{"class":638},"[",[629,19407,957],{"class":2493},[629,19409,18808],{"class":638},[629,19411,19412,19414,19416,19419,19421,19423,19425,19427],{"class":631,"line":3914},[629,19413,19394],{"class":675},[629,19415,1138],{"class":634},[629,19417,19418],{"class":675},"normalMap",[629,19420,2423],{"class":634},[629,19422,18827],{"class":675},[629,19424,19405],{"class":638},[629,19426,1866],{"class":2493},[629,19428,18808],{"class":638},[629,19430,19431,19433,19435,19438,19440,19442,19444,19446],{"class":631,"line":3945},[629,19432,19394],{"class":675},[629,19434,1138],{"class":634},[629,19436,19437],{"class":675},"roughnessMap",[629,19439,2423],{"class":634},[629,19441,18827],{"class":675},[629,19443,19405],{"class":638},[629,19445,812],{"class":2493},[629,19447,18808],{"class":638},[629,19449,19450,19452,19454,19457,19459,19461,19463,19466],{"class":631,"line":3966},[629,19451,19394],{"class":675},[629,19453,1138],{"class":634},[629,19455,19456],{"class":675},"metalnessMap",[629,19458,2423],{"class":634},[629,19460,18827],{"class":675},[629,19462,19405],{"class":638},[629,19464,19465],{"class":2493},"3",[629,19467,18808],{"class":638},[629,19469,19470,19472,19474,19477,19479,19481,19483,19485],{"class":631,"line":3985},[629,19471,19394],{"class":675},[629,19473,1138],{"class":634},[629,19475,19476],{"class":675},"displacementMap",[629,19478,2423],{"class":634},[629,19480,18827],{"class":675},[629,19482,19405],{"class":638},[629,19484,8420],{"class":2493},[629,19486,18808],{"class":638},[629,19488,19489],{"class":631,"line":4017},[629,19490,734],{"emptyLinePlaceholder":586},[629,19492,19493],{"class":631,"line":4026},[629,19494,19495],{"class":1201}," // Set material properties\n",[629,19497,19498,19500,19502,19505,19507],{"class":631,"line":4035},[629,19499,19394],{"class":675},[629,19501,1138],{"class":634},[629,19503,19504],{"class":675},"displacementScale",[629,19506,2423],{"class":634},[629,19508,19509],{"class":2493}," 0\n",[629,19511,19513,19515,19517,19520,19522],{"class":631,"line":19512},38,[629,19514,19394],{"class":675},[629,19516,1138],{"class":634},[629,19518,19519],{"class":675},"metalness",[629,19521,2423],{"class":634},[629,19523,19524],{"class":2493}," 0.8\n",[629,19526,19528,19530,19532,19535,19537],{"class":631,"line":19527},39,[629,19529,19394],{"class":675},[629,19531,1138],{"class":634},[629,19533,19534],{"class":675},"roughness",[629,19536,2423],{"class":634},[629,19538,19539],{"class":2493}," 0.2\n",[629,19541,19543],{"class":631,"line":19542},40,[629,19544,7849],{"class":634},[629,19546,19548,19550],{"class":631,"line":19547},41,[629,19549,2420],{"class":634},[629,19551,2440],{"class":675},[629,19553,19555],{"class":631,"line":19554},42,[629,19556,734],{"emptyLinePlaceholder":586},[629,19558,19560],{"class":631,"line":19559},43,[629,19561,19562],{"class":1201},"// Handle loading state and errors\n",[629,19564,19566,19568,19571,19573,19575,19578,19580,19582],{"class":631,"line":19565},44,[629,19567,10251],{"class":2426},[629,19569,19570],{"class":675},"(isLoading",[629,19572,679],{"class":634},[629,19574,3066],{"class":634},[629,19576,19577],{"class":6830},"_loading",[629,19579,3332],{"class":634},[629,19581,3669],{"class":642},[629,19583,1196],{"class":634},[629,19585,19587],{"class":631,"line":19586},45,[629,19588,19589],{"class":1201}," // Handle loading state\n",[629,19591,19593,19595],{"class":631,"line":19592},46,[629,19594,2420],{"class":634},[629,19596,2440],{"class":675},[629,19598,19600],{"class":631,"line":19599},47,[629,19601,734],{"emptyLinePlaceholder":586},[629,19603,19605,19607,19610,19612,19614,19617,19619,19621],{"class":631,"line":19604},48,[629,19606,10251],{"class":2426},[629,19608,19609],{"class":675},"(error",[629,19611,679],{"class":634},[629,19613,3066],{"class":634},[629,19615,19616],{"class":6830},"errs",[629,19618,3332],{"class":634},[629,19620,3669],{"class":642},[629,19622,1196],{"class":634},[629,19624,19626,19628,19630,19632,19634],{"class":631,"line":19625},49,[629,19627,19324],{"class":668},[629,19629,3066],{"class":638},[629,19631,19616],{"class":675},[629,19633,4726],{"class":638},[629,19635,3252],{"class":634},[629,19637,19639,19642,19644,19646,19648,19650,19653,19655,19657,19660],{"class":631,"line":19638},50,[629,19640,19641],{"class":675}," console",[629,19643,1138],{"class":634},[629,19645,15546],{"class":2426},[629,19647,2429],{"class":638},[629,19649,2432],{"class":634},[629,19651,19652],{"class":655},"Error loading textures:",[629,19654,2432],{"class":634},[629,19656,679],{"class":634},[629,19658,19659],{"class":675}," errs",[629,19661,2440],{"class":638},[629,19663,19665],{"class":631,"line":19664},51,[629,19666,7849],{"class":634},[629,19668,19670,19672],{"class":631,"line":19669},52,[629,19671,2420],{"class":634},[629,19673,2440],{"class":675},[629,19675,19677,19679,19681],{"class":631,"line":19676},53,[629,19678,724],{"class":634},[629,19680,639],{"class":638},[629,19682,661],{"class":634},[629,19684,19686],{"class":631,"line":19685},54,[629,19687,734],{"emptyLinePlaceholder":586},[629,19689,19691,19693,19695],{"class":631,"line":19690},55,[629,19692,635],{"class":634},[629,19694,742],{"class":638},[629,19696,661],{"class":634},[629,19698,19700,19702,19704,19706,19708,19710,19712,19714],{"class":631,"line":19699},56,[629,19701,750],{"class":634},[629,19703,753],{"class":638},[629,19705,756],{"class":642},[629,19707,649],{"class":634},[629,19709,652],{"class":634},[629,19711,8777],{"class":655},[629,19713,652],{"class":634},[629,19715,661],{"class":634},[629,19717,19719,19721,19724],{"class":631,"line":19718},57,[629,19720,773],{"class":634},[629,19722,19723],{"class":638},"Suspense",[629,19725,661],{"class":634},[629,19727,19729,19731,19733,19736,19738,19740,19743,19745,19748,19751,19753,19755,19757,19759],{"class":631,"line":19728},58,[629,19730,845],{"class":634},[629,19732,367],{"class":638},[629,19734,19735],{"class":642}," preset",[629,19737,649],{"class":634},[629,19739,652],{"class":634},[629,19741,19742],{"class":655},"studio",[629,19744,652],{"class":634},[629,19746,19747],{"class":642}," background",[629,19749,19750],{"class":642}," :blur",[629,19752,649],{"class":634},[629,19754,652],{"class":634},[629,19756,1866],{"class":655},[629,19758,652],{"class":634},[629,19760,779],{"class":634},[629,19762,19764,19766,19768],{"class":631,"line":19763},59,[629,19765,887],{"class":634},[629,19767,19723],{"class":638},[629,19769,661],{"class":634},[629,19771,19773,19775,19777,19779,19781,19783,19786,19788],{"class":631,"line":19772},60,[629,19774,773],{"class":634},[629,19776,776],{"class":638},[629,19778,1477],{"class":642},[629,19780,649],{"class":634},[629,19782,652],{"class":634},[629,19784,19785],{"class":655},"[8, 8, 8]",[629,19787,652],{"class":634},[629,19789,779],{"class":634},[629,19791,19793,19795,19797],{"class":631,"line":19792},61,[629,19794,773],{"class":634},[629,19796,787],{"class":638},[629,19798,779],{"class":634},[629,19800,19802,19804,19806],{"class":631,"line":19801},62,[629,19803,773],{"class":634},[629,19805,8041],{"class":638},[629,19807,779],{"class":634},[629,19809,19811,19813,19815,19817,19819,19821,19823,19825],{"class":631,"line":19810},63,[629,19812,773],{"class":634},[629,19814,8448],{"class":638},[629,19816,1859],{"class":642},[629,19818,649],{"class":634},[629,19820,652],{"class":634},[629,19822,812],{"class":655},[629,19824,652],{"class":634},[629,19826,779],{"class":634},[629,19828,19830,19832,19834,19837,19839,19841,19843,19846,19848,19850,19852,19854,19856,19858,19860,19862,19864,19866,19868],{"class":631,"line":19829},64,[629,19831,773],{"class":634},[629,19833,8467],{"class":638},[629,19835,19836],{"class":642}," v-light-helper",[629,19838,1477],{"class":642},[629,19840,649],{"class":634},[629,19842,652],{"class":634},[629,19844,19845],{"class":655},"[5, 5, 5]",[629,19847,652],{"class":634},[629,19849,1859],{"class":642},[629,19851,649],{"class":634},[629,19853,652],{"class":634},[629,19855,1938],{"class":655},[629,19857,652],{"class":634},[629,19859,2681],{"class":642},[629,19861,649],{"class":634},[629,19863,652],{"class":634},[629,19865,7563],{"class":655},[629,19867,652],{"class":634},[629,19869,779],{"class":634},[629,19871,19873,19875,19877,19879,19881,19883,19885,19888,19890,19892,19894,19896,19898,19900,19902,19904,19906,19908,19910],{"class":631,"line":19872},65,[629,19874,773],{"class":634},[629,19876,8467],{"class":638},[629,19878,19836],{"class":642},[629,19880,1477],{"class":642},[629,19882,649],{"class":634},[629,19884,652],{"class":634},[629,19886,19887],{"class":655},"[-5, 2, 2]",[629,19889,652],{"class":634},[629,19891,1859],{"class":642},[629,19893,649],{"class":634},[629,19895,652],{"class":634},[629,19897,1938],{"class":655},[629,19899,652],{"class":634},[629,19901,2681],{"class":642},[629,19903,649],{"class":634},[629,19905,652],{"class":634},[629,19907,5736],{"class":655},[629,19909,652],{"class":634},[629,19911,779],{"class":634},[629,19913,19915,19917,19919,19922,19924,19926,19928,19930],{"class":631,"line":19914},66,[629,19916,773],{"class":634},[629,19918,8808],{"class":638},[629,19920,19921],{"class":642}," position-y",[629,19923,649],{"class":634},[629,19925,652],{"class":634},[629,19927,812],{"class":655},[629,19929,652],{"class":634},[629,19931,661],{"class":634},[629,19933,19935,19937,19939,19941,19943,19945,19947,19949,19951,19953,19955,19957,19959],{"class":631,"line":19934},67,[629,19936,845],{"class":634},[629,19938,4426],{"class":638},[629,19940,2702],{"class":642},[629,19942,649],{"class":634},[629,19944,652],{"class":634},[629,19946,3814],{"class":655},[629,19948,652],{"class":634},[629,19950,4440],{"class":642},[629,19952,649],{"class":634},[629,19954,652],{"class":634},[629,19956,3814],{"class":655},[629,19958,652],{"class":634},[629,19960,779],{"class":634},[629,19962,19964,19966,19968],{"class":631,"line":19963},68,[629,19965,887],{"class":634},[629,19967,8808],{"class":638},[629,19969,661],{"class":634},[629,19971,19973,19975,19977],{"class":631,"line":19972},69,[629,19974,897],{"class":634},[629,19976,753],{"class":638},[629,19978,661],{"class":634},[629,19980,19982,19984,19986],{"class":631,"line":19981},70,[629,19983,724],{"class":634},[629,19985,742],{"class":638},[629,19987,661],{"class":634},[496,19989,19991],{"id":19990},"api","API",[4043,19993,19995],{"id":19994},"parameters","Parameters",[919,19997,19998,20010],{},[922,19999,20000],{},[925,20001,20002,20004,20006,20008],{},[928,20003,8081],{"align":989},[928,20005,5961],{},[928,20007,936],{},[928,20009,933],{},[938,20011,20012],{},[925,20013,20014,20019,20024,20028],{},[943,20015,20016],{"align":989},[1661,20017,20018],{},"paths",[943,20020,20021],{},[610,20022,20023],{},"string[]",[943,20025,20026],{},[610,20027,1171],{},[943,20029,20030],{},"Array of paths to the textures.",[4043,20032,20034],{"id":20033},"returns","Returns",[919,20036,20037,20047],{},[922,20038,20039],{},[925,20040,20041,20043,20045],{},[928,20042,8081],{"align":989},[928,20044,5961],{},[928,20046,933],{},[938,20048,20049,20062,20075],{},[925,20050,20051,20055,20059],{},[943,20052,20053],{"align":989},[1661,20054,2945],{},[943,20056,20057],{},[610,20058,5585],{},[943,20060,20061],{},"Array of loaded textures.",[925,20063,20064,20068,20072],{},[943,20065,20066],{"align":989},[1661,20067,15531],{},[943,20069,20070],{},[610,20071,15629],{},[943,20073,20074],{},"Whether any textures are still loading.",[925,20076,20077,20081,20086],{},[943,20078,20079],{"align":989},[1661,20080,15546],{},[943,20082,20083],{},[610,20084,20085],{},"Error[] | null",[943,20087,20088],{},"Array of errors if any occurred during loading.",[496,20090,20092],{"id":20091},"benefits","Benefits",[2205,20094,20095,20101,20107,20113],{},[2208,20096,20097,20100],{},[1661,20098,20099],{},"Simplified API",": Load multiple textures with a single function call",[2208,20102,20103,20106],{},[1661,20104,20105],{},"Consolidated loading state",": Track loading state for all textures at once",[2208,20108,20109,20112],{},[1661,20110,20111],{},"Unified error handling",": Collect and report errors from all texture loads",[2208,20114,20115,20118],{},[1661,20116,20117],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1319,20120,20121],{},"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":568,"searchDepth":569,"depth":570,"links":20123},[20124,20125,20126,20130],{"id":616,"depth":570,"text":15},{"id":18955,"depth":570,"text":18956},{"id":19990,"depth":570,"text":19991,"children":20127},[20128,20129],{"id":19994,"depth":700,"text":19995},{"id":20033,"depth":700,"text":20034},{"id":20091,"depth":570,"text":20092},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":145,"description":20131},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":20136,"title":149,"body":20137,"description":22982,"extension":583,"links":584,"meta":22983,"navigation":586,"path":150,"seo":22984,"stem":151,"__hash__":22985},"docs/2.api/3.loaders/7.use-svg.md",{"type":493,"value":20138,"toc":22957},[20139,20144,20157,20161,20166,20168,20647,20652,20666,20670,20673,20785,20787,20857,20859,20967,20971,20976,21032,21037,21343,21347,21352,21358,21363,21369,21385,21391,21406,21453,21456,21461,21472,21477,21480,21525,21529,21534,21537,21542,21551,21596,21600,21605,21617,21622,21664,21668,21671,21799,21803,21807,22110,22114,22408,22412,22419,22598,22600,22766,22770,22777,22780,22784,22794,22798,22822,22830,22843,22847,22874,22878,22898,22908,22916,22933,22940,22954],[2287,20140,20141],{},[20142,20143],"loaders-use-svg",{},[606,20145,20146,20147,20149,20150,20152,20153,20156],{},"Load and display SVG elements in your ",[1661,20148,14989],{}," scene. This guide covers both the ",[610,20151,149],{}," composable for advanced use cases and the ",[610,20154,20155],{},"SVG"," component for simple declarative rendering.",[496,20158,20160],{"id":20159},"usesvg-composable","useSVG Composable",[606,20162,2768,20163,20165],{},[610,20164,149],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4043,20167,15],{"id":616},[14994,20169,20170,20467],{},[618,20171,20174],{"className":620,"code":20172,"filename":14999,"highlights":20173,"language":625,"meta":568,"style":568},"\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",[570,731,737,747,770],[610,20175,20176,20196,20216,20220,20236,20272,20284,20313,20320,20328,20332,20340,20359,20365,20379,20393,20407,20420,20424,20443,20451,20459],{"__ignoreMap":568},[629,20177,20178,20180,20182,20184,20186,20188,20190,20192,20194],{"class":631,"line":569},[629,20179,635],{"class":634},[629,20181,639],{"class":638},[629,20183,643],{"class":642},[629,20185,646],{"class":642},[629,20187,649],{"class":634},[629,20189,652],{"class":634},[629,20191,656],{"class":655},[629,20193,652],{"class":634},[629,20195,661],{"class":634},[629,20197,20199,20201,20203,20206,20208,20210,20212,20214],{"class":20198,"line":570},[631,665],[629,20200,669],{"class":668},[629,20202,672],{"class":634},[629,20204,20205],{"class":675}," useSVG",[629,20207,685],{"class":634},[629,20209,688],{"class":668},[629,20211,691],{"class":634},[629,20213,694],{"class":655},[629,20215,697],{"class":634},[629,20217,20218],{"class":631,"line":700},[629,20219,734],{"emptyLinePlaceholder":586},[629,20221,20222,20224,20227,20229,20231,20234],{"class":631,"line":721},[629,20223,2407],{"class":642},[629,20225,20226],{"class":675}," svgPath ",[629,20228,649],{"class":634},[629,20230,691],{"class":634},[629,20232,20233],{"class":655},"./logo.svg",[629,20235,697],{"class":634},[629,20237,20239,20241,20243,20245,20247,20250,20252,20254,20256,20259,20261,20263,20265,20268,20270],{"class":20238,"line":731},[631,665],[629,20240,2407],{"class":642},[629,20242,672],{"class":634},[629,20244,2412],{"class":675},[629,20246,679],{"class":634},[629,20248,20249],{"class":675}," layers",[629,20251,679],{"class":634},[629,20253,18142],{"class":675},[629,20255,679],{"class":634},[629,20257,20258],{"class":675}," dispose ",[629,20260,2420],{"class":634},[629,20262,2423],{"class":634},[629,20264,20205],{"class":2426},[629,20266,20267],{"class":675},"(svgPath",[629,20269,679],{"class":634},[629,20271,1196],{"class":634},[629,20273,20275,20278,20280,20282],{"class":20274,"line":737},[631,665],[629,20276,20277],{"class":638}," skipFills",[629,20279,1210],{"class":634},[629,20281,6717],{"class":4389},[629,20283,2480],{"class":634},[629,20285,20287,20290,20292,20294,20297,20299,20301,20303,20306,20308,20311],{"class":20286,"line":747},[631,665],[629,20288,20289],{"class":638}," fillMaterial",[629,20291,1210],{"class":634},[629,20293,672],{"class":634},[629,20295,20296],{"class":638}," transparent",[629,20298,1210],{"class":634},[629,20300,4390],{"class":4389},[629,20302,679],{"class":634},[629,20304,20305],{"class":638}," opacity",[629,20307,1210],{"class":634},[629,20309,20310],{"class":2493}," 0.8",[629,20312,15865],{"class":634},[629,20314,20316,20318],{"class":20315,"line":770},[631,665],[629,20317,2420],{"class":634},[629,20319,2440],{"class":675},[629,20321,20322,20324,20326],{"class":631,"line":782},[629,20323,724],{"class":634},[629,20325,639],{"class":638},[629,20327,661],{"class":634},[629,20329,20330],{"class":631,"line":792},[629,20331,734],{"emptyLinePlaceholder":586},[629,20333,20334,20336,20338],{"class":631,"line":797},[629,20335,635],{"class":634},[629,20337,742],{"class":638},[629,20339,661],{"class":634},[629,20341,20342,20344,20346,20348,20350,20352,20355,20357],{"class":631,"line":819},[629,20343,750],{"class":634},[629,20345,8808],{"class":638},[629,20347,2702],{"class":642},[629,20349,649],{"class":634},[629,20351,652],{"class":634},[629,20353,20354],{"class":655},"!isLoading",[629,20356,652],{"class":634},[629,20358,661],{"class":634},[629,20360,20361,20363],{"class":631,"line":623},[629,20362,773],{"class":634},[629,20364,5118],{"class":638},[629,20366,20367,20370,20372,20374,20377],{"class":631,"line":842},[629,20368,20369],{"class":642}," v-for",[629,20371,649],{"class":634},[629,20373,652],{"class":634},[629,20375,20376],{"class":655},"(layer, index) in layers",[629,20378,3123],{"class":634},[629,20380,20381,20384,20386,20388,20391],{"class":631,"line":853},[629,20382,20383],{"class":642}," :key",[629,20385,649],{"class":634},[629,20387,652],{"class":634},[629,20389,20390],{"class":655},"`layer-${index}`",[629,20392,3123],{"class":634},[629,20394,20395,20398,20400,20402,20405],{"class":631,"line":864},[629,20396,20397],{"class":642}," :geometry",[629,20399,649],{"class":634},[629,20401,652],{"class":634},[629,20403,20404],{"class":655},"layer.geometry",[629,20406,3123],{"class":634},[629,20408,20409,20412,20414,20416,20418],{"class":631,"line":874},[629,20410,20411],{"class":642}," :render-order",[629,20413,649],{"class":634},[629,20415,652],{"class":634},[629,20417,7990],{"class":655},[629,20419,3123],{"class":634},[629,20421,20422],{"class":631,"line":624},[629,20423,10453],{"class":634},[629,20425,20426,20428,20430,20432,20434,20436,20439,20441],{"class":631,"line":894},[629,20427,845],{"class":634},[629,20429,7464],{"class":638},[629,20431,8982],{"class":642},[629,20433,649],{"class":634},[629,20435,652],{"class":634},[629,20437,20438],{"class":655},"layer.material",[629,20440,652],{"class":634},[629,20442,779],{"class":634},[629,20444,20445,20447,20449],{"class":631,"line":904},[629,20446,887],{"class":634},[629,20448,848],{"class":638},[629,20450,661],{"class":634},[629,20452,20453,20455,20457],{"class":631,"line":2617},[629,20454,897],{"class":634},[629,20456,8808],{"class":638},[629,20458,661],{"class":634},[629,20460,20461,20463,20465],{"class":631,"line":2626},[629,20462,724],{"class":634},[629,20464,742],{"class":638},[629,20466,661],{"class":634},[618,20468,20470],{"className":620,"code":20469,"filename":15150,"language":625,"meta":568,"style":568},"\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",[610,20471,20472,20492,20510,20528,20542,20550,20554,20562,20580,20599,20607,20615,20623,20631,20639],{"__ignoreMap":568},[629,20473,20474,20476,20478,20480,20482,20484,20486,20488,20490],{"class":631,"line":569},[629,20475,635],{"class":634},[629,20477,639],{"class":638},[629,20479,643],{"class":642},[629,20481,646],{"class":642},[629,20483,649],{"class":634},[629,20485,652],{"class":634},[629,20487,656],{"class":655},[629,20489,652],{"class":634},[629,20491,661],{"class":634},[629,20493,20494,20496,20498,20500,20502,20504,20506,20508],{"class":631,"line":570},[629,20495,669],{"class":668},[629,20497,672],{"class":634},[629,20499,682],{"class":675},[629,20501,685],{"class":634},[629,20503,688],{"class":668},[629,20505,691],{"class":634},[629,20507,694],{"class":655},[629,20509,697],{"class":634},[629,20511,20512,20514,20516,20518,20520,20522,20524,20526],{"class":631,"line":700},[629,20513,669],{"class":668},[629,20515,672],{"class":634},[629,20517,707],{"class":675},[629,20519,685],{"class":634},[629,20521,688],{"class":668},[629,20523,691],{"class":634},[629,20525,716],{"class":655},[629,20527,697],{"class":634},[629,20529,20530,20532,20534,20536,20538,20540],{"class":631,"line":721},[629,20531,669],{"class":668},[629,20533,15215],{"class":675},[629,20535,15218],{"class":668},[629,20537,691],{"class":634},[629,20539,15223],{"class":655},[629,20541,697],{"class":634},[629,20543,20544,20546,20548],{"class":631,"line":731},[629,20545,724],{"class":634},[629,20547,639],{"class":638},[629,20549,661],{"class":634},[629,20551,20552],{"class":631,"line":737},[629,20553,734],{"emptyLinePlaceholder":586},[629,20555,20556,20558,20560],{"class":631,"line":747},[629,20557,635],{"class":634},[629,20559,742],{"class":638},[629,20561,661],{"class":634},[629,20563,20564,20566,20568,20570,20572,20574,20576,20578],{"class":631,"line":770},[629,20565,750],{"class":634},[629,20567,753],{"class":638},[629,20569,756],{"class":642},[629,20571,649],{"class":634},[629,20573,652],{"class":634},[629,20575,11000],{"class":655},[629,20577,652],{"class":634},[629,20579,661],{"class":634},[629,20581,20582,20584,20586,20588,20590,20592,20595,20597],{"class":631,"line":782},[629,20583,773],{"class":634},[629,20585,776],{"class":638},[629,20587,1477],{"class":642},[629,20589,649],{"class":634},[629,20591,652],{"class":634},[629,20593,20594],{"class":655},"[0, 2, 10]",[629,20596,652],{"class":634},[629,20598,779],{"class":634},[629,20600,20601,20603,20605],{"class":631,"line":792},[629,20602,773],{"class":634},[629,20604,787],{"class":638},[629,20606,779],{"class":634},[629,20608,20609,20611,20613],{"class":631,"line":797},[629,20610,773],{"class":634},[629,20612,15298],{"class":638},[629,20614,779],{"class":634},[629,20616,20617,20619,20621],{"class":631,"line":819},[629,20618,773],{"class":634},[629,20620,8448],{"class":638},[629,20622,779],{"class":634},[629,20624,20625,20627,20629],{"class":631,"line":623},[629,20626,773],{"class":634},[629,20628,8467],{"class":638},[629,20630,779],{"class":634},[629,20632,20633,20635,20637],{"class":631,"line":842},[629,20634,897],{"class":634},[629,20636,753],{"class":638},[629,20638,661],{"class":634},[629,20640,20641,20643,20645],{"class":631,"line":853},[629,20642,724],{"class":634},[629,20644,742],{"class":638},[629,20646,661],{"class":634},[606,20648,2768,20649,20651],{},[610,20650,149],{}," 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:",[2205,20653,20654,20657,20660,20663],{},[2208,20655,20656],{},"Manually control layer rendering",[2208,20658,20659],{},"Apply custom animations to individual layers",[2208,20661,20662],{},"Access geometry data programmatically",[2208,20664,20665],{},"Implement complex material logic",[4043,20667,20669],{"id":20668},"svg-data-sources","SVG Data Sources",[606,20671,20672],{},"The composable accepts both file paths and inline SVG strings:",[618,20674,20676],{"className":1178,"code":20675,"language":656,"meta":568,"style":568},"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",[610,20677,20678,20696,20700,20705,20731,20735,20740,20755,20760,20768],{"__ignoreMap":568},[629,20679,20680,20682,20684,20686,20688,20690,20692,20694],{"class":631,"line":569},[629,20681,669],{"class":668},[629,20683,672],{"class":634},[629,20685,20205],{"class":675},[629,20687,685],{"class":634},[629,20689,688],{"class":668},[629,20691,691],{"class":634},[629,20693,694],{"class":655},[629,20695,697],{"class":634},[629,20697,20698],{"class":631,"line":570},[629,20699,734],{"emptyLinePlaceholder":586},[629,20701,20702],{"class":631,"line":700},[629,20703,20704],{"class":1201},"// From file\n",[629,20706,20707,20709,20711,20714,20716,20718,20720,20722,20724,20727,20729],{"class":631,"line":721},[629,20708,2407],{"class":642},[629,20710,672],{"class":634},[629,20712,20713],{"class":675}," layers ",[629,20715,2420],{"class":634},[629,20717,2423],{"class":634},[629,20719,20205],{"class":2426},[629,20721,2429],{"class":675},[629,20723,2432],{"class":634},[629,20725,20726],{"class":655},"/path/to/file.svg",[629,20728,2432],{"class":634},[629,20730,2440],{"class":675},[629,20732,20733],{"class":631,"line":731},[629,20734,734],{"emptyLinePlaceholder":586},[629,20736,20737],{"class":631,"line":737},[629,20738,20739],{"class":1201},"// Inline SVG string\n",[629,20741,20742,20744,20747,20749,20752],{"class":631,"line":747},[629,20743,2407],{"class":642},[629,20745,20746],{"class":675}," svgString ",[629,20748,649],{"class":634},[629,20750,20751],{"class":634}," `",[629,20753,20754],{"class":655},"\u003Csvg viewBox=\"0 0 100 100\">\n",[629,20756,20757],{"class":631,"line":770},[629,20758,20759],{"class":655}," \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[629,20761,20762,20765],{"class":631,"line":782},[629,20763,20764],{"class":655},"\u003C/svg>",[629,20766,20767],{"class":634},"`\n",[629,20769,20770,20772,20774,20776,20778,20780,20782],{"class":631,"line":792},[629,20771,2407],{"class":642},[629,20773,672],{"class":634},[629,20775,20713],{"class":675},[629,20777,2420],{"class":634},[629,20779,2423],{"class":634},[629,20781,20205],{"class":2426},[629,20783,20784],{"class":675},"(svgString)\n",[4043,20786,15464],{"id":15463},[919,20788,20789,20799],{},[922,20790,20791],{},[925,20792,20793,20795,20797],{},[928,20794,8081],{"align":989},[928,20796,5961],{},[928,20798,933],{},[938,20800,20801,20815,20830,20843],{},[925,20802,20803,20807,20812],{},[943,20804,20805],{"align":989},[1661,20806,12849],{},[943,20808,20809],{},[610,20810,20811],{},"SVGResult",[943,20813,20814],{},"The loaded SVG state from SVGLoader",[925,20816,20817,20822,20827],{},[943,20818,20819],{"align":989},[1661,20820,20821],{},"layers",[943,20823,20824],{},[610,20825,20826],{},"SVGLayer[]",[943,20828,20829],{},"Computed array of processed geometries and materials",[925,20831,20832,20836,20840],{},[943,20833,20834],{"align":989},[1661,20835,15531],{},[943,20837,20838],{},[610,20839,15629],{},[943,20841,20842],{},"Whether the SVG is currently loading",[925,20844,20845,20850,20854],{},[943,20846,20847],{"align":989},[1661,20848,20849],{},"dispose",[943,20851,20852],{},[610,20853,6013],{},[943,20855,20856],{},"Function to dispose of all geometries",[4043,20858,12085],{"id":15602},[919,20860,20861,20873],{},[922,20862,20863],{},[925,20864,20865,20867,20869,20871],{},[928,20866,8081],{"align":989},[928,20868,5961],{},[928,20870,936],{},[928,20872,933],{},[938,20874,20875,20893,20911,20930,20948],{},[925,20876,20877,20882,20886,20890],{},[943,20878,20879],{"align":989},[1661,20880,20881],{},"skipStrokes",[943,20883,20884],{},[610,20885,15629],{},[943,20887,20888],{},[610,20889,963],{},[943,20891,20892],{},"Whether to skip rendering strokes",[925,20894,20895,20900,20904,20908],{},[943,20896,20897],{"align":989},[1661,20898,20899],{},"skipFills",[943,20901,20902],{},[610,20903,15629],{},[943,20905,20906],{},[610,20907,963],{},[943,20909,20910],{},"Whether to skip rendering fills",[925,20912,20913,20918,20923,20927],{},[943,20914,20915],{"align":989},[1661,20916,20917],{},"fillMaterial",[943,20919,20920],{},[610,20921,20922],{},"MeshBasicMaterialParameters",[943,20924,20925],{},[610,20926,6117],{},[943,20928,20929],{},"Material properties for fill layers",[925,20931,20932,20937,20941,20945],{},[943,20933,20934],{"align":989},[1661,20935,20936],{},"strokeMaterial",[943,20938,20939],{},[610,20940,20922],{},[943,20942,20943],{},[610,20944,6117],{},[943,20946,20947],{},"Material properties for stroke layers",[925,20949,20950,20954,20959,20964],{},[943,20951,20952],{"align":989},[1661,20953,11146],{},[943,20955,20956],{},[610,20957,20958],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[943,20960,20961],{},[610,20962,20963],{},"'renderOrder'",[943,20965,20966],{},"How layers should be rendered in 3D space",[4043,20968,20970],{"id":20969},"working-with-layers","Working with Layers",[606,20972,2768,20973,20975],{},[610,20974,20821],{}," computed property returns an array of processed SVG elements, each containing:",[618,20977,20979],{"className":1178,"code":20978,"language":656,"meta":568,"style":568},"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",[610,20980,20981,20990,21003,21016,21028],{"__ignoreMap":568},[629,20982,20983,20985,20988],{"class":631,"line":569},[629,20984,5315],{"class":642},[629,20986,20987],{"class":1192}," SVGLayer",[629,20989,1196],{"class":634},[629,20991,20992,20995,20997,21000],{"class":631,"line":570},[629,20993,20994],{"class":638}," geometry",[629,20996,1210],{"class":634},[629,20998,20999],{"class":1192}," BufferGeometry",[629,21001,21002],{"class":1201}," // Three.js geometry for the layer\n",[629,21004,21005,21008,21010,21013],{"class":631,"line":700},[629,21006,21007],{"class":638}," material",[629,21009,1210],{"class":634},[629,21011,21012],{"class":1192}," MeshBasicMaterialParameters",[629,21014,21015],{"class":1201}," // Material properties\n",[629,21017,21018,21021,21023,21025],{"class":631,"line":721},[629,21019,21020],{"class":638}," isStroke",[629,21022,1210],{"class":634},[629,21024,5446],{"class":1192},[629,21026,21027],{"class":1201}," // Whether this layer is a stroke or fill\n",[629,21029,21030],{"class":631,"line":731},[629,21031,1317],{"class":634},[21033,21034,21036],"h4",{"id":21035},"accessing-individual-layers","Accessing Individual Layers",[618,21038,21041],{"className":620,"code":21039,"highlights":21040,"language":625,"meta":568,"style":568},"\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",[570,721],[610,21042,21043,21063,21082,21086,21112,21116,21121,21154,21203,21207,21215,21219,21227,21235,21241,21253,21265,21277,21281,21288,21301,21315,21319,21327,21335],{"__ignoreMap":568},[629,21044,21045,21047,21049,21051,21053,21055,21057,21059,21061],{"class":631,"line":569},[629,21046,635],{"class":634},[629,21048,639],{"class":638},[629,21050,643],{"class":642},[629,21052,646],{"class":642},[629,21054,649],{"class":634},[629,21056,652],{"class":634},[629,21058,656],{"class":655},[629,21060,652],{"class":634},[629,21062,661],{"class":634},[629,21064,21066,21068,21070,21072,21074,21076,21078,21080],{"class":21065,"line":570},[631,665],[629,21067,669],{"class":668},[629,21069,672],{"class":634},[629,21071,20205],{"class":675},[629,21073,685],{"class":634},[629,21075,688],{"class":668},[629,21077,691],{"class":634},[629,21079,694],{"class":655},[629,21081,697],{"class":634},[629,21083,21084],{"class":631,"line":700},[629,21085,734],{"emptyLinePlaceholder":586},[629,21087,21089,21091,21093,21095,21097,21099,21101,21103,21105,21108,21110],{"class":21088,"line":721},[631,665],[629,21090,2407],{"class":642},[629,21092,672],{"class":634},[629,21094,20713],{"class":675},[629,21096,2420],{"class":634},[629,21098,2423],{"class":634},[629,21100,20205],{"class":2426},[629,21102,2429],{"class":675},[629,21104,2432],{"class":634},[629,21106,21107],{"class":655},"/complex-icon.svg",[629,21109,2432],{"class":634},[629,21111,2440],{"class":675},[629,21113,21114],{"class":631,"line":731},[629,21115,734],{"emptyLinePlaceholder":586},[629,21117,21118],{"class":631,"line":737},[629,21119,21120],{"class":1201},"// Apply different materials based on layer type\n",[629,21122,21123,21125,21128,21130,21132,21135,21137,21139,21141,21144,21146,21148,21150,21152],{"class":631,"line":747},[629,21124,2407],{"class":642},[629,21126,21127],{"class":675}," getFillColor ",[629,21129,649],{"class":634},[629,21131,3066],{"class":634},[629,21133,21134],{"class":6830},"layer",[629,21136,1210],{"class":634},[629,21138,20987],{"class":1192},[629,21140,679],{"class":634},[629,21142,21143],{"class":6830}," index",[629,21145,1210],{"class":634},[629,21147,5349],{"class":1192},[629,21149,3332],{"class":634},[629,21151,3669],{"class":642},[629,21153,1196],{"class":634},[629,21155,21156,21159,21162,21164,21167,21170,21172,21175,21177,21179,21181,21184,21187,21190,21193,21196,21198,21201],{"class":631,"line":770},[629,21157,21158],{"class":668}," return",[629,21160,21161],{"class":675}," layer",[629,21163,1138],{"class":634},[629,21165,21166],{"class":675},"isStroke",[629,21168,21169],{"class":634}," ?",[629,21171,691],{"class":634},[629,21173,21174],{"class":655},"#000000",[629,21176,2432],{"class":634},[629,21178,3021],{"class":634},[629,21180,20751],{"class":634},[629,21182,21183],{"class":655},"hsl(",[629,21185,21186],{"class":634},"${",[629,21188,21189],{"class":675},"index ",[629,21191,21192],{"class":634},"*",[629,21194,21195],{"class":2493}," 30",[629,21197,2420],{"class":634},[629,21199,21200],{"class":655},", 70%, 50%)",[629,21202,20767],{"class":634},[629,21204,21205],{"class":631,"line":782},[629,21206,1317],{"class":634},[629,21208,21209,21211,21213],{"class":631,"line":792},[629,21210,724],{"class":634},[629,21212,639],{"class":638},[629,21214,661],{"class":634},[629,21216,21217],{"class":631,"line":797},[629,21218,734],{"emptyLinePlaceholder":586},[629,21220,21221,21223,21225],{"class":631,"line":819},[629,21222,635],{"class":634},[629,21224,742],{"class":638},[629,21226,661],{"class":634},[629,21228,21229,21231,21233],{"class":631,"line":623},[629,21230,750],{"class":634},[629,21232,8808],{"class":638},[629,21234,661],{"class":634},[629,21236,21237,21239],{"class":631,"line":842},[629,21238,773],{"class":634},[629,21240,5118],{"class":638},[629,21242,21243,21245,21247,21249,21251],{"class":631,"line":853},[629,21244,20369],{"class":642},[629,21246,649],{"class":634},[629,21248,652],{"class":634},[629,21250,20376],{"class":655},[629,21252,3123],{"class":634},[629,21254,21255,21257,21259,21261,21263],{"class":631,"line":864},[629,21256,20383],{"class":642},[629,21258,649],{"class":634},[629,21260,652],{"class":634},[629,21262,7990],{"class":655},[629,21264,3123],{"class":634},[629,21266,21267,21269,21271,21273,21275],{"class":631,"line":874},[629,21268,20397],{"class":642},[629,21270,649],{"class":634},[629,21272,652],{"class":634},[629,21274,20404],{"class":655},[629,21276,3123],{"class":634},[629,21278,21279],{"class":631,"line":624},[629,21280,10453],{"class":634},[629,21282,21283,21285],{"class":631,"line":894},[629,21284,845],{"class":634},[629,21286,21287],{"class":638},"TresMeshBasicMaterial\n",[629,21289,21290,21293,21295,21297,21299],{"class":631,"line":904},[629,21291,21292],{"class":642}," v-bind",[629,21294,649],{"class":634},[629,21296,652],{"class":634},[629,21298,20438],{"class":655},[629,21300,3123],{"class":634},[629,21302,21303,21306,21308,21310,21313],{"class":631,"line":2617},[629,21304,21305],{"class":642}," :color",[629,21307,649],{"class":634},[629,21309,652],{"class":634},[629,21311,21312],{"class":655},"getFillColor(layer, index)",[629,21314,3123],{"class":634},[629,21316,21317],{"class":631,"line":2626},[629,21318,8025],{"class":634},[629,21320,21321,21323,21325],{"class":631,"line":2646},[629,21322,887],{"class":634},[629,21324,848],{"class":638},[629,21326,661],{"class":634},[629,21328,21329,21331,21333],{"class":631,"line":2655},[629,21330,897],{"class":634},[629,21332,8808],{"class":638},[629,21334,661],{"class":634},[629,21336,21337,21339,21341],{"class":631,"line":2664},[629,21338,724],{"class":634},[629,21340,742],{"class":638},[629,21342,661],{"class":634},[4043,21344,21346],{"id":21345},"depth-handling","Depth Handling",[606,21348,2768,21349,21351],{},[610,21350,11146],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[21033,21353,21355,21357],{"id":21354},"renderorder-default",[610,21356,20963],{}," (Default)",[606,21359,21360],{},[1661,21361,21362],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[606,21364,21365,21366,21368],{},"This is the default ",[610,21367,11146],{}," option.",[606,21370,21371,21372,2242,21374,21376,21377,21384],{},"This value sets the materials' ",[610,21373,9179],{},[610,21375,963],{}," and increments the mesh layers ",[1132,21378,21381],{"href":21379,"rel":21380},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1136],[610,21382,21383],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[606,21386,21387,21390],{},[1661,21388,21389],{},"Disadvantage",": Scene objects may render out of order.",[606,21392,21393,21394,21399,21400,21405],{},"SVG layers with higher ",[1132,21395,21397],{"href":21379,"rel":21396},[1136],[610,21398,21383],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1132,21401,21403],{"href":21379,"rel":21402},[1136],[610,21404,21383],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[618,21407,21409],{"className":1178,"code":21408,"language":656,"meta":568,"style":568},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[610,21410,21411],{"__ignoreMap":568},[629,21412,21413,21415,21417,21419,21421,21423,21425,21427,21429,21432,21434,21436,21438,21441,21443,21445,21447,21449,21451],{"class":631,"line":569},[629,21414,2407],{"class":642},[629,21416,672],{"class":634},[629,21418,20713],{"class":675},[629,21420,2420],{"class":634},[629,21422,2423],{"class":634},[629,21424,20205],{"class":2426},[629,21426,2429],{"class":675},[629,21428,2432],{"class":634},[629,21430,21431],{"class":655},"/icon.svg",[629,21433,2432],{"class":634},[629,21435,679],{"class":634},[629,21437,672],{"class":634},[629,21439,21440],{"class":638}," depth",[629,21442,1210],{"class":634},[629,21444,691],{"class":634},[629,21446,21383],{"class":655},[629,21448,2432],{"class":634},[629,21450,685],{"class":634},[629,21452,2440],{"class":675},[21033,21454,21455],{"id":21455},"flat",[606,21457,21458],{},[1661,21459,21460],{},"Use case: simple SVGs",[606,21462,21463,21464,2242,21470,1138],{},"This option sets the materials ",[1132,21465,21468],{"href":21466,"rel":21467},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1136],[610,21469,9179],{},[610,21471,963],{},[606,21473,21474,21476],{},[1661,21475,21389],{},": SVG layers may render out of order.",[606,21478,21479],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[618,21481,21483],{"className":1178,"code":21482,"language":656,"meta":568,"style":568},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[610,21484,21485],{"__ignoreMap":568},[629,21486,21487,21489,21491,21493,21495,21497,21499,21501,21503,21505,21507,21509,21511,21513,21515,21517,21519,21521,21523],{"class":631,"line":569},[629,21488,2407],{"class":642},[629,21490,672],{"class":634},[629,21492,20713],{"class":675},[629,21494,2420],{"class":634},[629,21496,2423],{"class":634},[629,21498,20205],{"class":2426},[629,21500,2429],{"class":675},[629,21502,2432],{"class":634},[629,21504,21431],{"class":655},[629,21506,2432],{"class":634},[629,21508,679],{"class":634},[629,21510,672],{"class":634},[629,21512,21440],{"class":638},[629,21514,1210],{"class":634},[629,21516,691],{"class":634},[629,21518,21455],{"class":655},[629,21520,2432],{"class":634},[629,21522,685],{"class":634},[629,21524,2440],{"class":675},[21033,21526,21528],{"id":21527},"offsetz","offsetZ",[606,21530,21531],{},[1661,21532,21533],{},"Use case: unscaled SVGs seen from the front",[606,21535,21536],{},"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\".",[606,21538,21539,21541],{},[1661,21540,21389],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[606,21543,21544,21545,21550],{},"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 ",[1132,21546,21549],{"href":21547,"rel":21548},"https://en.wikipedia.org/wiki/Z-fighting",[1136],"z-fight",", particularly if the SVG is scaled down.",[618,21552,21554],{"className":1178,"code":21553,"language":656,"meta":568,"style":568},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[610,21555,21556],{"__ignoreMap":568},[629,21557,21558,21560,21562,21564,21566,21568,21570,21572,21574,21576,21578,21580,21582,21584,21586,21588,21590,21592,21594],{"class":631,"line":569},[629,21559,2407],{"class":642},[629,21561,672],{"class":634},[629,21563,20713],{"class":675},[629,21565,2420],{"class":634},[629,21567,2423],{"class":634},[629,21569,20205],{"class":2426},[629,21571,2429],{"class":675},[629,21573,2432],{"class":634},[629,21575,21431],{"class":655},[629,21577,2432],{"class":634},[629,21579,679],{"class":634},[629,21581,672],{"class":634},[629,21583,21440],{"class":638},[629,21585,1210],{"class":634},[629,21587,691],{"class":634},[629,21589,21528],{"class":655},[629,21591,2432],{"class":634},[629,21593,685],{"class":634},[629,21595,2440],{"class":675},[21033,21597,21598],{"id":5344},[610,21599,5344],{},[606,21601,21602],{},[1661,21603,21604],{},"Use case: SVGs seen from the front",[606,21606,21607,21608,21611,21612,21616],{},"This is the same as ",[610,21609,21610],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1132,21613,21615],{"href":21547,"rel":21614},[1136],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[606,21618,21619,21621],{},[1661,21620,21389],{},": \"Bottom\" of the \"stack\" is visible.",[618,21623,21625],{"className":1178,"code":21624,"language":656,"meta":568,"style":568},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[610,21626,21627],{"__ignoreMap":568},[629,21628,21629,21631,21633,21635,21637,21639,21641,21643,21645,21647,21649,21651,21653,21655,21657,21660,21662],{"class":631,"line":569},[629,21630,2407],{"class":642},[629,21632,672],{"class":634},[629,21634,20713],{"class":675},[629,21636,2420],{"class":634},[629,21638,2423],{"class":634},[629,21640,20205],{"class":2426},[629,21642,2429],{"class":675},[629,21644,2432],{"class":634},[629,21646,21431],{"class":655},[629,21648,2432],{"class":634},[629,21650,679],{"class":634},[629,21652,672],{"class":634},[629,21654,21440],{"class":638},[629,21656,1210],{"class":634},[629,21658,21659],{"class":2493}," 0.1",[629,21661,685],{"class":634},[629,21663,2440],{"class":675},[4043,21665,21667],{"id":21666},"memory-management","Memory Management",[606,21669,21670],{},"Always dispose of geometries when the component unmounts:",[618,21672,21674],{"className":620,"code":21673,"language":625,"meta":568,"style":568},"\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",[610,21675,21676,21696,21714,21733,21737,21761,21765,21778,21785,21791],{"__ignoreMap":568},[629,21677,21678,21680,21682,21684,21686,21688,21690,21692,21694],{"class":631,"line":569},[629,21679,635],{"class":634},[629,21681,639],{"class":638},[629,21683,643],{"class":642},[629,21685,646],{"class":642},[629,21687,649],{"class":634},[629,21689,652],{"class":634},[629,21691,656],{"class":655},[629,21693,652],{"class":634},[629,21695,661],{"class":634},[629,21697,21698,21700,21702,21704,21706,21708,21710,21712],{"class":631,"line":570},[629,21699,669],{"class":668},[629,21701,672],{"class":634},[629,21703,20205],{"class":675},[629,21705,685],{"class":634},[629,21707,688],{"class":668},[629,21709,691],{"class":634},[629,21711,694],{"class":655},[629,21713,697],{"class":634},[629,21715,21716,21718,21720,21723,21725,21727,21729,21731],{"class":631,"line":700},[629,21717,669],{"class":668},[629,21719,672],{"class":634},[629,21721,21722],{"class":675}," onUnmounted",[629,21724,685],{"class":634},[629,21726,688],{"class":668},[629,21728,691],{"class":634},[629,21730,625],{"class":655},[629,21732,697],{"class":634},[629,21734,21735],{"class":631,"line":721},[629,21736,734],{"emptyLinePlaceholder":586},[629,21738,21739,21741,21743,21745,21747,21749,21751,21753,21755,21757,21759],{"class":631,"line":731},[629,21740,2407],{"class":642},[629,21742,672],{"class":634},[629,21744,20258],{"class":675},[629,21746,2420],{"class":634},[629,21748,2423],{"class":634},[629,21750,20205],{"class":2426},[629,21752,2429],{"class":675},[629,21754,2432],{"class":634},[629,21756,21431],{"class":655},[629,21758,2432],{"class":634},[629,21760,2440],{"class":675},[629,21762,21763],{"class":631,"line":737},[629,21764,734],{"emptyLinePlaceholder":586},[629,21766,21767,21770,21772,21774,21776],{"class":631,"line":747},[629,21768,21769],{"class":2426},"onUnmounted",[629,21771,2429],{"class":675},[629,21773,3666],{"class":634},[629,21775,3669],{"class":642},[629,21777,1196],{"class":634},[629,21779,21780,21783],{"class":631,"line":770},[629,21781,21782],{"class":2426}," dispose",[629,21784,6527],{"class":638},[629,21786,21787,21789],{"class":631,"line":782},[629,21788,2420],{"class":634},[629,21790,2440],{"class":675},[629,21792,21793,21795,21797],{"class":631,"line":792},[629,21794,724],{"class":634},[629,21796,639],{"class":638},[629,21798,661],{"class":634},[4043,21800,21802],{"id":21801},"advanced-usage","Advanced Usage",[21033,21804,21806],{"id":21805},"conditional-layer-rendering","Conditional Layer Rendering",[618,21808,21810],{"className":620,"code":21809,"language":625,"meta":568,"style":568},"\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",[610,21811,21812,21832,21850,21868,21872,21889,21914,21918,21936,21946,21957,21989,21993,22001,22005,22013,22021,22027,22040,22052,22064,22068,22086,22094,22102],{"__ignoreMap":568},[629,21813,21814,21816,21818,21820,21822,21824,21826,21828,21830],{"class":631,"line":569},[629,21815,635],{"class":634},[629,21817,639],{"class":638},[629,21819,643],{"class":642},[629,21821,646],{"class":642},[629,21823,649],{"class":634},[629,21825,652],{"class":634},[629,21827,656],{"class":655},[629,21829,652],{"class":634},[629,21831,661],{"class":634},[629,21833,21834,21836,21838,21840,21842,21844,21846,21848],{"class":631,"line":570},[629,21835,669],{"class":668},[629,21837,672],{"class":634},[629,21839,20205],{"class":675},[629,21841,685],{"class":634},[629,21843,688],{"class":668},[629,21845,691],{"class":634},[629,21847,694],{"class":655},[629,21849,697],{"class":634},[629,21851,21852,21854,21856,21858,21860,21862,21864,21866],{"class":631,"line":700},[629,21853,669],{"class":668},[629,21855,672],{"class":634},[629,21857,3481],{"class":675},[629,21859,685],{"class":634},[629,21861,688],{"class":668},[629,21863,691],{"class":634},[629,21865,625],{"class":655},[629,21867,697],{"class":634},[629,21869,21870],{"class":631,"line":721},[629,21871,734],{"emptyLinePlaceholder":586},[629,21873,21874,21876,21879,21881,21883,21885,21887],{"class":631,"line":731},[629,21875,2407],{"class":642},[629,21877,21878],{"class":675}," showDetails ",[629,21880,649],{"class":634},[629,21882,3864],{"class":2426},[629,21884,2429],{"class":675},[629,21886,953],{"class":4389},[629,21888,2440],{"class":675},[629,21890,21891,21893,21895,21897,21899,21901,21903,21905,21907,21910,21912],{"class":631,"line":737},[629,21892,2407],{"class":642},[629,21894,672],{"class":634},[629,21896,20713],{"class":675},[629,21898,2420],{"class":634},[629,21900,2423],{"class":634},[629,21902,20205],{"class":2426},[629,21904,2429],{"class":675},[629,21906,2432],{"class":634},[629,21908,21909],{"class":655},"/detailed-icon.svg",[629,21911,2432],{"class":634},[629,21913,2440],{"class":675},[629,21915,21916],{"class":631,"line":747},[629,21917,734],{"emptyLinePlaceholder":586},[629,21919,21920,21922,21925,21927,21929,21931,21933],{"class":631,"line":770},[629,21921,2407],{"class":642},[629,21923,21924],{"class":675}," visibleLayers ",[629,21926,649],{"class":634},[629,21928,3481],{"class":2426},[629,21930,2429],{"class":675},[629,21932,3666],{"class":634},[629,21934,21935],{"class":642}," =>\n",[629,21937,21938,21941,21943],{"class":631,"line":782},[629,21939,21940],{"class":675}," showDetails",[629,21942,1138],{"class":634},[629,21944,21945],{"class":675},"value\n",[629,21947,21948,21951,21953,21955],{"class":631,"line":792},[629,21949,21950],{"class":634}," ?",[629,21952,20249],{"class":675},[629,21954,1138],{"class":634},[629,21956,21945],{"class":675},[629,21958,21959,21962,21964,21966,21968,21970,21973,21975,21977,21979,21982,21984,21986],{"class":631,"line":797},[629,21960,21961],{"class":634}," :",[629,21963,20249],{"class":675},[629,21965,1138],{"class":634},[629,21967,3677],{"class":675},[629,21969,1138],{"class":634},[629,21971,21972],{"class":2426},"filter",[629,21974,2429],{"class":675},[629,21976,21134],{"class":6830},[629,21978,3669],{"class":642},[629,21980,21981],{"class":634}," !",[629,21983,21134],{"class":675},[629,21985,1138],{"class":634},[629,21987,21988],{"class":675},"isStroke)\n",[629,21990,21991],{"class":631,"line":819},[629,21992,2440],{"class":675},[629,21994,21995,21997,21999],{"class":631,"line":623},[629,21996,724],{"class":634},[629,21998,639],{"class":638},[629,22000,661],{"class":634},[629,22002,22003],{"class":631,"line":842},[629,22004,734],{"emptyLinePlaceholder":586},[629,22006,22007,22009,22011],{"class":631,"line":853},[629,22008,635],{"class":634},[629,22010,742],{"class":638},[629,22012,661],{"class":634},[629,22014,22015,22017,22019],{"class":631,"line":864},[629,22016,750],{"class":634},[629,22018,8808],{"class":638},[629,22020,661],{"class":634},[629,22022,22023,22025],{"class":631,"line":874},[629,22024,773],{"class":634},[629,22026,5118],{"class":638},[629,22028,22029,22031,22033,22035,22038],{"class":631,"line":624},[629,22030,20369],{"class":642},[629,22032,649],{"class":634},[629,22034,652],{"class":634},[629,22036,22037],{"class":655},"(layer, index) in visibleLayers",[629,22039,3123],{"class":634},[629,22041,22042,22044,22046,22048,22050],{"class":631,"line":894},[629,22043,20383],{"class":642},[629,22045,649],{"class":634},[629,22047,652],{"class":634},[629,22049,7990],{"class":655},[629,22051,3123],{"class":634},[629,22053,22054,22056,22058,22060,22062],{"class":631,"line":904},[629,22055,20397],{"class":642},[629,22057,649],{"class":634},[629,22059,652],{"class":634},[629,22061,20404],{"class":655},[629,22063,3123],{"class":634},[629,22065,22066],{"class":631,"line":2617},[629,22067,10453],{"class":634},[629,22069,22070,22072,22074,22076,22078,22080,22082,22084],{"class":631,"line":2626},[629,22071,845],{"class":634},[629,22073,7464],{"class":638},[629,22075,8982],{"class":642},[629,22077,649],{"class":634},[629,22079,652],{"class":634},[629,22081,20438],{"class":655},[629,22083,652],{"class":634},[629,22085,779],{"class":634},[629,22087,22088,22090,22092],{"class":631,"line":2646},[629,22089,887],{"class":634},[629,22091,848],{"class":638},[629,22093,661],{"class":634},[629,22095,22096,22098,22100],{"class":631,"line":2655},[629,22097,897],{"class":634},[629,22099,8808],{"class":638},[629,22101,661],{"class":634},[629,22103,22104,22106,22108],{"class":631,"line":2664},[629,22105,724],{"class":634},[629,22107,742],{"class":638},[629,22109,661],{"class":634},[21033,22111,22113],{"id":22112},"material-customization-per-layer","Material Customization per Layer",[618,22115,22117],{"className":620,"code":22116,"language":625,"meta":568,"style":568},"\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",[610,22118,22119,22139,22157,22161,22188,22196,22207,22217,22221,22230,22240,22251,22264,22268,22274,22282,22286,22294,22302,22308,22320,22332,22344,22348,22354,22366,22380,22384,22392,22400],{"__ignoreMap":568},[629,22120,22121,22123,22125,22127,22129,22131,22133,22135,22137],{"class":631,"line":569},[629,22122,635],{"class":634},[629,22124,639],{"class":638},[629,22126,643],{"class":642},[629,22128,646],{"class":642},[629,22130,649],{"class":634},[629,22132,652],{"class":634},[629,22134,656],{"class":655},[629,22136,652],{"class":634},[629,22138,661],{"class":634},[629,22140,22141,22143,22145,22147,22149,22151,22153,22155],{"class":631,"line":570},[629,22142,669],{"class":668},[629,22144,672],{"class":634},[629,22146,20205],{"class":675},[629,22148,685],{"class":634},[629,22150,688],{"class":668},[629,22152,691],{"class":634},[629,22154,694],{"class":655},[629,22156,697],{"class":634},[629,22158,22159],{"class":631,"line":700},[629,22160,734],{"emptyLinePlaceholder":586},[629,22162,22163,22165,22167,22169,22171,22173,22175,22177,22179,22182,22184,22186],{"class":631,"line":721},[629,22164,2407],{"class":642},[629,22166,672],{"class":634},[629,22168,20713],{"class":675},[629,22170,2420],{"class":634},[629,22172,2423],{"class":634},[629,22174,20205],{"class":2426},[629,22176,2429],{"class":675},[629,22178,2432],{"class":634},[629,22180,22181],{"class":655},"/logo.svg",[629,22183,2432],{"class":634},[629,22185,679],{"class":634},[629,22187,1196],{"class":634},[629,22189,22190,22192,22194],{"class":631,"line":731},[629,22191,20289],{"class":638},[629,22193,1210],{"class":634},[629,22195,1196],{"class":634},[629,22197,22198,22201,22203,22205],{"class":631,"line":737},[629,22199,22200],{"class":638}," transparent",[629,22202,1210],{"class":634},[629,22204,4390],{"class":4389},[629,22206,2480],{"class":634},[629,22208,22209,22212,22214],{"class":631,"line":747},[629,22210,22211],{"class":638}," opacity",[629,22213,1210],{"class":634},[629,22215,22216],{"class":2493}," 0.9\n",[629,22218,22219],{"class":631,"line":770},[629,22220,2589],{"class":634},[629,22222,22223,22226,22228],{"class":631,"line":782},[629,22224,22225],{"class":638}," strokeMaterial",[629,22227,1210],{"class":634},[629,22229,1196],{"class":634},[629,22231,22232,22234,22236,22238],{"class":631,"line":792},[629,22233,22200],{"class":638},[629,22235,1210],{"class":634},[629,22237,4390],{"class":4389},[629,22239,2480],{"class":634},[629,22241,22242,22244,22246,22249],{"class":631,"line":797},[629,22243,22211],{"class":638},[629,22245,1210],{"class":634},[629,22247,22248],{"class":2493}," 1.0",[629,22250,2480],{"class":634},[629,22252,22253,22256,22258,22260,22262],{"class":631,"line":819},[629,22254,22255],{"class":638}," color",[629,22257,1210],{"class":634},[629,22259,691],{"class":634},[629,22261,21174],{"class":655},[629,22263,697],{"class":634},[629,22265,22266],{"class":631,"line":623},[629,22267,7849],{"class":634},[629,22269,22270,22272],{"class":631,"line":842},[629,22271,2420],{"class":634},[629,22273,2440],{"class":675},[629,22275,22276,22278,22280],{"class":631,"line":853},[629,22277,724],{"class":634},[629,22279,639],{"class":638},[629,22281,661],{"class":634},[629,22283,22284],{"class":631,"line":864},[629,22285,734],{"emptyLinePlaceholder":586},[629,22287,22288,22290,22292],{"class":631,"line":874},[629,22289,635],{"class":634},[629,22291,742],{"class":638},[629,22293,661],{"class":634},[629,22295,22296,22298,22300],{"class":631,"line":624},[629,22297,750],{"class":634},[629,22299,8808],{"class":638},[629,22301,661],{"class":634},[629,22303,22304,22306],{"class":631,"line":894},[629,22305,773],{"class":634},[629,22307,5118],{"class":638},[629,22309,22310,22312,22314,22316,22318],{"class":631,"line":904},[629,22311,20369],{"class":642},[629,22313,649],{"class":634},[629,22315,652],{"class":634},[629,22317,20376],{"class":655},[629,22319,3123],{"class":634},[629,22321,22322,22324,22326,22328,22330],{"class":631,"line":2617},[629,22323,20383],{"class":642},[629,22325,649],{"class":634},[629,22327,652],{"class":634},[629,22329,7990],{"class":655},[629,22331,3123],{"class":634},[629,22333,22334,22336,22338,22340,22342],{"class":631,"line":2626},[629,22335,20397],{"class":642},[629,22337,649],{"class":634},[629,22339,652],{"class":634},[629,22341,20404],{"class":655},[629,22343,3123],{"class":634},[629,22345,22346],{"class":631,"line":2646},[629,22347,10453],{"class":634},[629,22349,22350,22352],{"class":631,"line":2655},[629,22351,845],{"class":634},[629,22353,21287],{"class":638},[629,22355,22356,22358,22360,22362,22364],{"class":631,"line":2664},[629,22357,21292],{"class":642},[629,22359,649],{"class":634},[629,22361,652],{"class":634},[629,22363,20438],{"class":655},[629,22365,3123],{"class":634},[629,22367,22368,22371,22373,22375,22378],{"class":631,"line":2673},[629,22369,22370],{"class":642}," :wireframe",[629,22372,649],{"class":634},[629,22374,652],{"class":634},[629,22376,22377],{"class":655},"layer.isStroke",[629,22379,3123],{"class":634},[629,22381,22382],{"class":631,"line":2695},[629,22383,8025],{"class":634},[629,22385,22386,22388,22390],{"class":631,"line":2739},[629,22387,887],{"class":634},[629,22389,848],{"class":638},[629,22391,661],{"class":634},[629,22393,22394,22396,22398],{"class":631,"line":2748},[629,22395,897],{"class":634},[629,22397,8808],{"class":638},[629,22399,661],{"class":634},[629,22401,22402,22404,22406],{"class":631,"line":2757},[629,22403,724],{"class":634},[629,22405,742],{"class":638},[629,22407,661],{"class":634},[496,22409,22411],{"id":22410},"usesvg-component","UseSVG Component",[606,22413,22414,22415,22418],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[610,22416,22417],{},"UseSVG"," component:",[618,22420,22422],{"className":620,"code":22421,"language":625,"meta":568,"style":568},"\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",[610,22423,22424,22444,22463,22471,22475,22483,22512,22519,22533,22546,22558,22565,22578,22582,22590],{"__ignoreMap":568},[629,22425,22426,22428,22430,22432,22434,22436,22438,22440,22442],{"class":631,"line":569},[629,22427,635],{"class":634},[629,22429,639],{"class":638},[629,22431,643],{"class":642},[629,22433,646],{"class":642},[629,22435,649],{"class":634},[629,22437,652],{"class":634},[629,22439,656],{"class":655},[629,22441,652],{"class":634},[629,22443,661],{"class":634},[629,22445,22446,22448,22450,22453,22455,22457,22459,22461],{"class":631,"line":570},[629,22447,669],{"class":668},[629,22449,672],{"class":634},[629,22451,22452],{"class":675}," UseSVG",[629,22454,685],{"class":634},[629,22456,688],{"class":668},[629,22458,691],{"class":634},[629,22460,694],{"class":655},[629,22462,697],{"class":634},[629,22464,22465,22467,22469],{"class":631,"line":700},[629,22466,724],{"class":634},[629,22468,639],{"class":638},[629,22470,661],{"class":634},[629,22472,22473],{"class":631,"line":721},[629,22474,734],{"emptyLinePlaceholder":586},[629,22476,22477,22479,22481],{"class":631,"line":731},[629,22478,635],{"class":634},[629,22480,742],{"class":638},[629,22482,661],{"class":634},[629,22484,22485,22487,22489,22491,22493,22495,22497,22499,22501,22503,22505,22508,22510],{"class":631,"line":737},[629,22486,750],{"class":634},[629,22488,8808],{"class":638},[629,22490,805],{"class":642},[629,22492,649],{"class":634},[629,22494,652],{"class":634},[629,22496,1878],{"class":655},[629,22498,652],{"class":634},[629,22500,1477],{"class":642},[629,22502,649],{"class":634},[629,22504,652],{"class":634},[629,22506,22507],{"class":655},"[-2.1, 1, 0]",[629,22509,652],{"class":634},[629,22511,661],{"class":634},[629,22513,22514,22516],{"class":631,"line":747},[629,22515,773],{"class":634},[629,22517,22518],{"class":638},"UseSVG\n",[629,22520,22521,22524,22526,22528,22531],{"class":631,"line":770},[629,22522,22523],{"class":642}," src",[629,22525,649],{"class":634},[629,22527,652],{"class":634},[629,22529,22530],{"class":655},"/path/to/logo.svg",[629,22532,3123],{"class":634},[629,22534,22535,22538,22540,22542,22544],{"class":631,"line":782},[629,22536,22537],{"class":642}," :skip-fills",[629,22539,649],{"class":634},[629,22541,652],{"class":634},[629,22543,963],{"class":655},[629,22545,3123],{"class":634},[629,22547,22548,22551,22553,22555],{"class":631,"line":792},[629,22549,22550],{"class":642}," :fill-material",[629,22552,649],{"class":634},[629,22554,652],{"class":634},[629,22556,22557],{"class":655},"{ transparent: true,\n",[629,22559,22560,22563],{"class":631,"line":797},[629,22561,22562],{"class":655}," opacity: 0.8 }",[629,22564,3123],{"class":634},[629,22566,22567,22570,22572,22574,22576],{"class":631,"line":819},[629,22568,22569],{"class":642}," depth",[629,22571,649],{"class":634},[629,22573,652],{"class":634},[629,22575,21383],{"class":655},[629,22577,3123],{"class":634},[629,22579,22580],{"class":631,"line":623},[629,22581,15338],{"class":634},[629,22583,22584,22586,22588],{"class":631,"line":842},[629,22585,897],{"class":634},[629,22587,8808],{"class":638},[629,22589,661],{"class":634},[629,22591,22592,22594,22596],{"class":631,"line":853},[629,22593,724],{"class":634},[629,22595,742],{"class":638},[629,22597,661],{"class":634},[4043,22599,914],{"id":913},[919,22601,22602,22614],{},[922,22603,22604],{},[925,22605,22606,22608,22610,22612],{},[928,22607,930],{"align":989},[928,22609,5961],{},[928,22611,933],{"align":989},[928,22613,936],{},[938,22615,22616,22636,22655,22674,22691,22708,22727,22745],{},[925,22617,22618,22623,22627,22634],{},[943,22619,22620],{"align":989},[1661,22621,22622],{},"src",[943,22624,22625],{},[610,22626,3564],{},[943,22628,22629,22630,22633],{"align":989},"Either a path to an SVG ",[1666,22631,22632],{},"or"," an SVG string",[943,22635],{},[925,22637,22638,22642,22646,22651],{},[943,22639,22640],{"align":989},[1661,22641,20881],{},[943,22643,22644],{},[610,22645,15629],{},[943,22647,950,22648,22650],{"align":989},[610,22649,953],{},", the SVG strokes will not be rendered.",[943,22652,22653],{},[610,22654,963],{},[925,22656,22657,22661,22665,22670],{},[943,22658,22659],{"align":989},[1661,22660,20899],{},[943,22662,22663],{},[610,22664,15629],{},[943,22666,950,22667,22669],{"align":989},[610,22668,953],{},", the SVG fills will not be rendered.",[943,22671,22672],{},[610,22673,963],{},[925,22675,22676,22680,22684,22687],{},[943,22677,22678],{"align":989},[1661,22679,20936],{},[943,22681,22682],{},[610,22683,20922],{},[943,22685,22686],{"align":989},"Props to assign to the stroke materials of the resulting meshes.",[943,22688,22689],{},[610,22690,1171],{},[925,22692,22693,22697,22701,22704],{},[943,22694,22695],{"align":989},[1661,22696,20917],{},[943,22698,22699],{},[610,22700,20922],{},[943,22702,22703],{"align":989},"Props to assign to the fill materials of the resulting meshes.",[943,22705,22706],{},[610,22707,1171],{},[925,22709,22710,22715,22720,22723],{},[943,22711,22712],{"align":989},[1661,22713,22714],{},"strokeMeshProps",[943,22716,22717],{},[610,22718,22719],{},"TresOptions",[943,22721,22722],{"align":989},"Props to assign to the resulting stroke meshes.",[943,22724,22725],{},[610,22726,1171],{},[925,22728,22729,22734,22738,22741],{},[943,22730,22731],{"align":989},[1661,22732,22733],{},"fillMeshProps",[943,22735,22736],{},[610,22737,22719],{},[943,22739,22740],{"align":989},"Props to assign to the resulting fill meshes.",[943,22742,22743],{},[610,22744,1171],{},[925,22746,22747,22751,22755,22762],{},[943,22748,22749],{"align":989},[1661,22750,11146],{},[943,22752,22753],{},[610,22754,20958],{},[943,22756,22757,22758,3332],{"align":989},"Specify how SVG layers are to be rendered. (",[1132,22759,22761],{"href":22760},"#depth-handling","See \"Depth\"",[943,22763,22764],{},[610,22765,21383],{},[496,22767,22769],{"id":22768},"troubleshooting","Troubleshooting",[22771,22772,22774],"alert",{"type":22773},"warning",[606,22775,22776],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[606,22778,22779],{},"Here are some things to try if you run into problems:",[4043,22781,22783],{"id":22782},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2205,22785,22786],{},[2208,22787,22788,22789,2242,22791,1138],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[610,22790,7563],{},[610,22792,22793],{},"rgb(255, 0, 0)",[4043,22795,22797],{"id":22796},"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",[2205,22799,22800,22812],{},[2208,22801,22802,22803,22805,22806,1138],{},"In your ",[610,22804,149],{}," options, ",[1132,22807,22808,22809,22811],{"href":22760},"change the ",[610,22810,11146],{}," option",[2208,22813,22814,22815,22818,22819,1138],{},"In the SVG source, use ",[610,22816,22817],{},"fill=\"none\""," rather than ",[610,22820,22821],{},"fill-opacity=\"0\"",[4043,22823,22825,22826],{"id":22824},"parts-of-the-svg-z-fight","Parts of the SVG ",[1132,22827,22829],{"href":21547,"rel":22828},[1136],"\"z-fight\"",[2205,22831,22832,22840],{},[2208,22833,22802,22834,22805,22836,1138],{},[610,22835,149],{},[1132,22837,22808,22838,22811],{"href":22760},[610,22839,11146],{},[2208,22841,22842],{},"Increase the distance between the SVG and other on-screen elements.",[4043,22844,22846],{"id":22845},"the-svg-is-not-visible","The SVG is not visible",[2205,22848,22849,22852,22861,22867],{},[2208,22850,22851],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2208,22853,22854,22855,22857,22858,1138],{},"Try scaling the SVG down, e.g., wrap it in a ",[610,22856,8808],{}," with ",[610,22859,22860],{},":scale=\"0.01\"",[2208,22862,22863,22864,1138],{},"Try moving the SVG up (+y), e.g., ",[610,22865,22866],{},":position=\"[0,2,0]\"",[2208,22868,22869,22870,22873],{},"Check that ",[610,22871,22872],{},"layers.length > 0"," before rendering.",[4043,22875,22877],{"id":22876},"performance-issues-with-many-layers","Performance issues with many layers",[2205,22879,22880,22887,22895],{},[2208,22881,22882,22883,22886],{},"Use the ",[610,22884,22885],{},"dispose()"," function when components unmount to clean up geometries.",[2208,22888,22889,22890,5603,22892,22894],{},"Consider using ",[610,22891,20881],{},[610,22893,20899],{}," to reduce the number of rendered layers.",[2208,22896,22897],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[496,22899,22901,22902,22904,22905,22907],{"id":22900},"when-to-use-usesvg-vs-svg-component","When to Use ",[610,22903,149],{}," vs ",[610,22906,20155],{}," Component",[606,22909,22910],{},[1661,22911,22912,22913,22915],{},"Use ",[610,22914,149],{}," when you need:",[2205,22917,22918,22921,22924,22927,22930],{},[2208,22919,22920],{},"Direct access to individual SVG layers",[2208,22922,22923],{},"Custom rendering logic",[2208,22925,22926],{},"Layer-specific animations",[2208,22928,22929],{},"Programmatic geometry manipulation",[2208,22931,22932],{},"Advanced material customization per layer",[606,22934,22935],{},[1661,22936,22882,22937,22939],{},[610,22938,20155],{}," component when you need:",[2205,22941,22942,22945,22948,22951],{},[2208,22943,22944],{},"Simple, declarative SVG rendering",[2208,22946,22947],{},"Quick prototyping",[2208,22949,22950],{},"Standard SVG display without custom logic",[2208,22952,22953],{},"Less code and setup",[1319,22955,22956],{},"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":568,"searchDepth":569,"depth":570,"links":22958},[22959,22969,22972,22980],{"id":20159,"depth":570,"text":20160,"children":22960},[22961,22962,22963,22964,22965,22966,22967,22968],{"id":616,"depth":700,"text":15},{"id":20668,"depth":700,"text":20669},{"id":15463,"depth":700,"text":15464},{"id":15602,"depth":700,"text":12085},{"id":20969,"depth":700,"text":20970},{"id":21345,"depth":700,"text":21346},{"id":21666,"depth":700,"text":21667},{"id":21801,"depth":700,"text":21802},{"id":22410,"depth":570,"text":22411,"children":22970},[22971],{"id":913,"depth":700,"text":914},{"id":22768,"depth":570,"text":22769,"children":22973},[22974,22975,22976,22978,22979],{"id":22782,"depth":700,"text":22783},{"id":22796,"depth":700,"text":22797},{"id":22824,"depth":700,"text":22977},"Parts of the SVG \"z-fight\"",{"id":22845,"depth":700,"text":22846},{"id":22876,"depth":700,"text":22877},{"id":22900,"depth":570,"text":22981},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":149,"description":22982},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":22987,"title":153,"body":22988,"description":23458,"extension":583,"links":584,"meta":23459,"navigation":586,"path":154,"seo":23460,"stem":155,"__hash__":23461},"docs/2.api/3.loaders/use-progress.md",{"type":493,"value":22989,"toc":23454},[22990,22997,23000,23002,23060,23066,23366,23377,23379,23435,23451],[606,22991,22992,22993,22996],{},"A composable to convenience wrap ",[610,22994,22995],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[606,22998,22999],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[496,23001,15],{"id":616},[618,23003,23005],{"className":1178,"code":23004,"language":656,"meta":568,"style":568},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[610,23006,23007,23026,23030],{"__ignoreMap":568},[629,23008,23009,23011,23013,23016,23018,23020,23022,23024],{"class":631,"line":569},[629,23010,669],{"class":668},[629,23012,672],{"class":634},[629,23014,23015],{"class":675}," useProgress",[629,23017,685],{"class":634},[629,23019,688],{"class":668},[629,23021,691],{"class":634},[629,23023,694],{"class":655},[629,23025,697],{"class":634},[629,23027,23028],{"class":631,"line":570},[629,23029,734],{"emptyLinePlaceholder":586},[629,23031,23032,23034,23036,23039,23041,23044,23046,23049,23051,23053,23056,23058],{"class":631,"line":700},[629,23033,2407],{"class":642},[629,23035,672],{"class":634},[629,23037,23038],{"class":675}," hasFinishLoading",[629,23040,679],{"class":634},[629,23042,23043],{"class":675}," progress",[629,23045,679],{"class":634},[629,23047,23048],{"class":675}," items ",[629,23050,2420],{"class":634},[629,23052,2423],{"class":634},[629,23054,23055],{"class":668}," await",[629,23057,23015],{"class":2426},[629,23059,6527],{"class":675},[606,23061,23062,23063,23065],{},"Then you can use the ",[610,23064,15561],{}," value to show a loading bar or a spinner:",[618,23067,23069],{"className":620,"code":23068,"language":625,"meta":568,"style":568},"\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",[610,23070,23071,23079,23086,23099,23113,23127,23131,23138,23152,23166,23170,23190,23195,23220,23228,23236,23245,23264,23282,23290,23298,23305,23310,23324,23338,23342,23350,23358],{"__ignoreMap":568},[629,23072,23073,23075,23077],{"class":631,"line":569},[629,23074,635],{"class":634},[629,23076,742],{"class":638},[629,23078,661],{"class":634},[629,23080,23081,23083],{"class":631,"line":570},[629,23082,750],{"class":634},[629,23084,23085],{"class":638},"Transition\n",[629,23087,23088,23090,23092,23094,23097],{"class":631,"line":700},[629,23089,5137],{"class":642},[629,23091,649],{"class":634},[629,23093,652],{"class":634},[629,23095,23096],{"class":655},"fade-overlay",[629,23098,3123],{"class":634},[629,23100,23101,23104,23106,23108,23111],{"class":631,"line":721},[629,23102,23103],{"class":642}," enter-active-class",[629,23105,649],{"class":634},[629,23107,652],{"class":634},[629,23109,23110],{"class":655},"opacity-1 transition-opacity duration-200",[629,23112,3123],{"class":634},[629,23114,23115,23118,23120,23122,23125],{"class":631,"line":731},[629,23116,23117],{"class":642}," leave-active-class",[629,23119,649],{"class":634},[629,23121,652],{"class":634},[629,23123,23124],{"class":655},"opacity-0 transition-opacity duration-200",[629,23126,3123],{"class":634},[629,23128,23129],{"class":631,"line":737},[629,23130,5165],{"class":634},[629,23132,23133,23135],{"class":631,"line":747},[629,23134,773],{"class":634},[629,23136,23137],{"class":638},"div\n",[629,23139,23140,23143,23145,23147,23150],{"class":631,"line":770},[629,23141,23142],{"class":642}," v-show",[629,23144,649],{"class":634},[629,23146,652],{"class":634},[629,23148,23149],{"class":655},"!hasFinishLoading",[629,23151,3123],{"class":634},[629,23153,23154,23157,23159,23161,23164],{"class":631,"line":782},[629,23155,23156],{"class":642}," class",[629,23158,649],{"class":634},[629,23160,652],{"class":634},[629,23162,23163],{"class":655},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[629,23165,3123],{"class":634},[629,23167,23168],{"class":631,"line":792},[629,23169,10453],{"class":634},[629,23171,23172,23174,23176,23179,23181,23183,23186,23188],{"class":631,"line":797},[629,23173,845],{"class":634},[629,23175,4111],{"class":638},[629,23177,23178],{"class":642}," class",[629,23180,649],{"class":634},[629,23182,652],{"class":634},[629,23184,23185],{"class":655},"w-200px",[629,23187,652],{"class":634},[629,23189,661],{"class":634},[629,23191,23192],{"class":631,"line":819},[629,23193,23194],{"class":675}," Loading... {{ progress }} %\n",[629,23196,23197,23199,23202,23204,23206,23208,23211,23213,23216,23218],{"class":631,"line":623},[629,23198,856],{"class":634},[629,23200,23201],{"class":638},"i",[629,23203,23178],{"class":642},[629,23205,649],{"class":634},[629,23207,652],{"class":634},[629,23209,23210],{"class":655},"i-ic-twotone-catching-pokemon animate-rotate-in",[629,23212,652],{"class":634},[629,23214,23215],{"class":634},">\u003C/",[629,23217,23201],{"class":638},[629,23219,661],{"class":634},[629,23221,23222,23224,23226],{"class":631,"line":842},[629,23223,877],{"class":634},[629,23225,4111],{"class":638},[629,23227,661],{"class":634},[629,23229,23230,23232,23234],{"class":631,"line":853},[629,23231,887],{"class":634},[629,23233,4111],{"class":638},[629,23235,661],{"class":634},[629,23237,23238,23240,23243],{"class":631,"line":864},[629,23239,897],{"class":634},[629,23241,23242],{"class":638},"Transition",[629,23244,661],{"class":634},[629,23246,23247,23249,23251,23253,23255,23257,23260,23262],{"class":631,"line":874},[629,23248,750],{"class":634},[629,23250,753],{"class":638},[629,23252,19735],{"class":642},[629,23254,649],{"class":634},[629,23256,652],{"class":634},[629,23258,23259],{"class":655},"realistic",[629,23261,652],{"class":634},[629,23263,661],{"class":634},[629,23265,23266,23268,23270,23272,23274,23276,23278,23280],{"class":631,"line":624},[629,23267,773],{"class":634},[629,23269,776],{"class":638},[629,23271,1477],{"class":642},[629,23273,649],{"class":634},[629,23275,652],{"class":634},[629,23277,17111],{"class":655},[629,23279,652],{"class":634},[629,23281,779],{"class":634},[629,23283,23284,23286,23288],{"class":631,"line":894},[629,23285,773],{"class":634},[629,23287,787],{"class":638},[629,23289,779],{"class":634},[629,23291,23292,23294,23296],{"class":631,"line":904},[629,23293,773],{"class":634},[629,23295,19723],{"class":638},[629,23297,661],{"class":634},[629,23299,23300,23302],{"class":631,"line":2617},[629,23301,845],{"class":634},[629,23303,23304],{"class":638},"Environment\n",[629,23306,23307],{"class":631,"line":2626},[629,23308,23309],{"class":642}," background\n",[629,23311,23312,23315,23317,23319,23322],{"class":631,"line":2646},[629,23313,23314],{"class":642}," :files",[629,23316,649],{"class":634},[629,23318,652],{"class":634},[629,23320,23321],{"class":655},"environmentFiles",[629,23323,3123],{"class":634},[629,23325,23326,23329,23331,23333,23336],{"class":631,"line":2655},[629,23327,23328],{"class":642}," path",[629,23330,649],{"class":634},[629,23332,652],{"class":634},[629,23334,23335],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[629,23337,3123],{"class":634},[629,23339,23340],{"class":631,"line":2664},[629,23341,8025],{"class":634},[629,23343,23344,23346,23348],{"class":631,"line":2673},[629,23345,887],{"class":634},[629,23347,19723],{"class":638},[629,23349,661],{"class":634},[629,23351,23352,23354,23356],{"class":631,"line":2695},[629,23353,897],{"class":634},[629,23355,753],{"class":638},[629,23357,661],{"class":634},[629,23359,23360,23362,23364],{"class":631,"line":2739},[629,23361,724],{"class":634},[629,23363,742],{"class":638},[629,23365,661],{"class":634},[22771,23367,23368],{"type":22773},[606,23369,23370,23371,23376],{},"This component use top level await. Please check the ",[1132,23372,23375],{"href":23373,"rel":23374},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1136],"Suspense API"," for more info",[496,23378,15464],{"id":15463},[919,23380,23381,23391],{},[922,23382,23383],{},[925,23384,23385,23387,23389],{},[928,23386,8081],{"align":989},[928,23388,5961],{"align":989},[928,23390,933],{"align":989},[938,23392,23393,23407,23420],{},[925,23394,23395,23400,23404],{},[943,23396,23397],{"align":989},[610,23398,23399],{},"hasFinishLoading",[943,23401,23402],{"align":989},[610,23403,15629],{},[943,23405,23406],{"align":989},"Whether all items have finished loading",[925,23408,23409,23413,23417],{},[943,23410,23411],{"align":989},[610,23412,15561],{},[943,23414,23415],{"align":989},[610,23416,5344],{},[943,23418,23419],{"align":989},"Loading progress as percentage (0-100)",[925,23421,23422,23427,23432],{},[943,23423,23424],{"align":989},[610,23425,23426],{},"items",[943,23428,23429],{"align":989},[610,23430,23431],{},"Array",[943,23433,23434],{"align":989},"Array of loading items with their status",[3191,23436,23437],{},[606,23438,23439,23440,23445,23446,23376],{},"This component use top level await it needs to be wrapped on a ",[1132,23441,23443],{"href":23373,"rel":23442},[1136],[610,23444,19723],{},". Please check the ",[1132,23447,23449],{"href":23373,"rel":23448},[1136],[610,23450,23375],{},[1319,23452,23453],{},"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":568,"searchDepth":569,"depth":570,"links":23455},[23456,23457],{"id":616,"depth":570,"text":15},{"id":15463,"depth":570,"text":15464},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":153,"description":23458},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":23463,"title":157,"body":23464,"description":24041,"extension":583,"links":584,"meta":24042,"navigation":586,"path":158,"seo":24043,"stem":159,"__hash__":24044},"docs/2.api/3.loaders/use-video-texture.md",{"type":493,"value":23465,"toc":24037},[23466,23471,23474,23481,23483,23920,23922,24025,24034],[2287,23467,23468],{},[23469,23470],"loaders-use-video-texture",{},[606,23472,23473],{},"A composable to easily use videos as textures in your meshes.",[606,23475,23476,23477],{},"This composable is based on the Drei ",[1132,23478,157],{"href":23479,"rel":23480},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1136],[496,23482,15],{"id":616},[14994,23484,23485,23700],{},[618,23486,23488],{"className":620,"code":23487,"filename":15150,"language":625,"meta":568,"style":568},"\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",[610,23489,23490,23510,23528,23546,23560,23568,23572,23580,23598,23605,23618,23632,23636,23644,23652,23660,23668,23676,23684,23692],{"__ignoreMap":568},[629,23491,23492,23494,23496,23498,23500,23502,23504,23506,23508],{"class":631,"line":569},[629,23493,635],{"class":634},[629,23495,639],{"class":638},[629,23497,643],{"class":642},[629,23499,646],{"class":642},[629,23501,649],{"class":634},[629,23503,652],{"class":634},[629,23505,656],{"class":655},[629,23507,652],{"class":634},[629,23509,661],{"class":634},[629,23511,23512,23514,23516,23518,23520,23522,23524,23526],{"class":631,"line":570},[629,23513,669],{"class":668},[629,23515,672],{"class":634},[629,23517,682],{"class":675},[629,23519,685],{"class":634},[629,23521,688],{"class":668},[629,23523,691],{"class":634},[629,23525,694],{"class":655},[629,23527,697],{"class":634},[629,23529,23530,23532,23534,23536,23538,23540,23542,23544],{"class":631,"line":700},[629,23531,669],{"class":668},[629,23533,672],{"class":634},[629,23535,707],{"class":675},[629,23537,685],{"class":634},[629,23539,688],{"class":668},[629,23541,691],{"class":634},[629,23543,716],{"class":655},[629,23545,697],{"class":634},[629,23547,23548,23550,23552,23554,23556,23558],{"class":631,"line":721},[629,23549,669],{"class":668},[629,23551,15215],{"class":675},[629,23553,15218],{"class":668},[629,23555,691],{"class":634},[629,23557,15223],{"class":655},[629,23559,697],{"class":634},[629,23561,23562,23564,23566],{"class":631,"line":731},[629,23563,724],{"class":634},[629,23565,639],{"class":638},[629,23567,661],{"class":634},[629,23569,23570],{"class":631,"line":737},[629,23571,734],{"emptyLinePlaceholder":586},[629,23573,23574,23576,23578],{"class":631,"line":747},[629,23575,635],{"class":634},[629,23577,742],{"class":638},[629,23579,661],{"class":634},[629,23581,23582,23584,23586,23588,23590,23592,23594,23596],{"class":631,"line":770},[629,23583,750],{"class":634},[629,23585,753],{"class":638},[629,23587,756],{"class":642},[629,23589,649],{"class":634},[629,23591,652],{"class":634},[629,23593,11000],{"class":655},[629,23595,652],{"class":634},[629,23597,661],{"class":634},[629,23599,23600,23602],{"class":631,"line":782},[629,23601,773],{"class":634},[629,23603,23604],{"class":638},"TresPerspectiveCamera\n",[629,23606,23607,23609,23611,23613,23616],{"class":631,"line":792},[629,23608,15325],{"class":642},[629,23610,649],{"class":634},[629,23612,652],{"class":634},[629,23614,23615],{"class":655},"[0, 5, 9]",[629,23617,3123],{"class":634},[629,23619,23620,23623,23625,23627,23630],{"class":631,"line":797},[629,23621,23622],{"class":642}," :look-at",[629,23624,649],{"class":634},[629,23626,652],{"class":634},[629,23628,23629],{"class":655},"[0, 1, 0]",[629,23631,3123],{"class":634},[629,23633,23634],{"class":631,"line":819},[629,23635,15338],{"class":634},[629,23637,23638,23640,23642],{"class":631,"line":623},[629,23639,773],{"class":634},[629,23641,787],{"class":638},[629,23643,779],{"class":634},[629,23645,23646,23648,23650],{"class":631,"line":842},[629,23647,773],{"class":634},[629,23649,19723],{"class":638},[629,23651,661],{"class":634},[629,23653,23654,23656,23658],{"class":631,"line":853},[629,23655,845],{"class":634},[629,23657,15298],{"class":638},[629,23659,779],{"class":634},[629,23661,23662,23664,23666],{"class":631,"line":864},[629,23663,887],{"class":634},[629,23665,19723],{"class":638},[629,23667,661],{"class":634},[629,23669,23670,23672,23674],{"class":631,"line":874},[629,23671,773],{"class":634},[629,23673,8041],{"class":638},[629,23675,779],{"class":634},[629,23677,23678,23680,23682],{"class":631,"line":624},[629,23679,773],{"class":634},[629,23681,8448],{"class":638},[629,23683,779],{"class":634},[629,23685,23686,23688,23690],{"class":631,"line":894},[629,23687,897],{"class":634},[629,23689,753],{"class":638},[629,23691,661],{"class":634},[629,23693,23694,23696,23698],{"class":631,"line":904},[629,23695,724],{"class":634},[629,23697,742],{"class":638},[629,23699,661],{"class":634},[618,23701,23705],{"className":620,"code":23702,"filename":23703,"highlights":23704,"language":625,"meta":568,"style":568},"\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",[700,770,623],[610,23706,23707,23727,23745,23770,23774,23789,23800,23812,23845,23853,23857,23865,23885,23904,23912],{"__ignoreMap":568},[629,23708,23709,23711,23713,23715,23717,23719,23721,23723,23725],{"class":631,"line":569},[629,23710,635],{"class":634},[629,23712,639],{"class":638},[629,23714,643],{"class":642},[629,23716,646],{"class":642},[629,23718,649],{"class":634},[629,23720,652],{"class":634},[629,23722,656],{"class":655},[629,23724,652],{"class":634},[629,23726,661],{"class":634},[629,23728,23729,23731,23733,23735,23737,23739,23741,23743],{"class":631,"line":570},[629,23730,669],{"class":668},[629,23732,672],{"class":634},[629,23734,3864],{"class":675},[629,23736,685],{"class":634},[629,23738,688],{"class":668},[629,23740,691],{"class":634},[629,23742,625],{"class":655},[629,23744,697],{"class":634},[629,23746,23748,23750,23752,23755,23757,23760,23762,23764,23766,23768],{"class":23747,"line":700},[631,665],[629,23749,669],{"class":668},[629,23751,672],{"class":634},[629,23753,23754],{"class":675}," Sphere",[629,23756,679],{"class":634},[629,23758,23759],{"class":675}," useVideoTexture",[629,23761,685],{"class":634},[629,23763,688],{"class":668},[629,23765,691],{"class":634},[629,23767,694],{"class":655},[629,23769,697],{"class":634},[629,23771,23772],{"class":631,"line":721},[629,23773,734],{"emptyLinePlaceholder":586},[629,23775,23776,23778,23781,23783,23785,23787],{"class":631,"line":731},[629,23777,2407],{"class":642},[629,23779,23780],{"class":675}," videoPath ",[629,23782,649],{"class":634},[629,23784,691],{"class":634},[629,23786,16876],{"class":655},[629,23788,697],{"class":634},[629,23790,23791,23793,23795,23798],{"class":631,"line":737},[629,23792,16883],{"class":634},[629,23794,691],{"class":634},[629,23796,23797],{"class":655},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[629,23799,697],{"class":634},[629,23801,23802,23804,23806,23808,23810],{"class":631,"line":747},[629,23803,2407],{"class":642},[629,23805,2417],{"class":675},[629,23807,649],{"class":634},[629,23809,3864],{"class":2426},[629,23811,6527],{"class":675},[629,23813,23815,23817,23819,23821,23823,23825,23827,23830,23832,23834,23837,23839,23841,23843],{"class":23814,"line":770},[631,665],[629,23816,2709],{"class":675},[629,23818,1138],{"class":634},[629,23820,6962],{"class":675},[629,23822,649],{"class":634},[629,23824,23055],{"class":668},[629,23826,23759],{"class":2426},[629,23828,23829],{"class":675},"(videoPath",[629,23831,679],{"class":634},[629,23833,672],{"class":634},[629,23835,23836],{"class":638}," loop",[629,23838,1210],{"class":634},[629,23840,6717],{"class":4389},[629,23842,685],{"class":634},[629,23844,2440],{"class":675},[629,23846,23847,23849,23851],{"class":631,"line":782},[629,23848,724],{"class":634},[629,23850,639],{"class":638},[629,23852,661],{"class":634},[629,23854,23855],{"class":631,"line":792},[629,23856,734],{"emptyLinePlaceholder":586},[629,23858,23859,23861,23863],{"class":631,"line":797},[629,23860,635],{"class":634},[629,23862,742],{"class":638},[629,23864,661],{"class":634},[629,23866,23867,23870,23872,23874,23876,23878,23881,23883],{"class":631,"line":819},[629,23868,23869],{"class":634}," \u003C",[629,23871,277],{"class":638},[629,23873,1477],{"class":642},[629,23875,649],{"class":634},[629,23877,652],{"class":634},[629,23879,23880],{"class":655},"[0, 2, 0]",[629,23882,652],{"class":634},[629,23884,661],{"class":634},[629,23886,23888,23890,23892,23894,23896,23898,23900,23902],{"class":23887,"line":623},[631,665],[629,23889,845],{"class":634},[629,23891,7464],{"class":638},[629,23893,2726],{"class":642},[629,23895,649],{"class":634},[629,23897,652],{"class":634},[629,23899,2709],{"class":655},[629,23901,652],{"class":634},[629,23903,779],{"class":634},[629,23905,23906,23908,23910],{"class":631,"line":842},[629,23907,887],{"class":634},[629,23909,277],{"class":638},[629,23911,661],{"class":634},[629,23913,23914,23916,23918],{"class":631,"line":853},[629,23915,724],{"class":634},[629,23917,742],{"class":638},[629,23919,661],{"class":634},[496,23921,914],{"id":913},[919,23923,23924,23934],{},[922,23925,23926],{},[925,23927,23928,23930,23932],{},[928,23929,930],{"align":989},[928,23931,933],{"align":989},[928,23933,936],{},[938,23935,23936,23949,23963,23978,23990,24002,24013],{},[925,23937,23938,23942,23945],{},[943,23939,23940],{"align":989},[610,23941,22622],{},[943,23943,23944],{"align":989},"Path to the video.",[943,23946,23947],{},[610,23948,1171],{},[925,23950,23951,23956,23958],{},[943,23952,23953],{"align":989},[610,23954,23955],{},"unsuspend",[943,23957,18008],{"align":989},[943,23959,23960],{},[610,23961,23962],{},"loadedmetadata",[925,23964,23965,23970,23973],{},[943,23966,23967],{"align":989},[610,23968,23969],{},"crossOrigin",[943,23971,23972],{"align":989},"Whether to use CORS to fetch the related video.",[943,23974,23975],{},[610,23976,23977],{},"Anonymous",[925,23979,23980,23985,23988],{},[943,23981,23982],{"align":989},[610,23983,23984],{},"muted",[943,23986,23987],{"align":989},"Whether to set the audio silenced.",[943,23989,953],{},[925,23991,23992,23997,24000],{},[943,23993,23994],{"align":989},[610,23995,23996],{},"loop",[943,23998,23999],{"align":989},"Automatically seek back to the start upon reaching the end of the video.",[943,24001,953],{},[925,24003,24004,24008,24011],{},[943,24005,24006],{"align":989},[610,24007,12372],{},[943,24009,24010],{"align":989},"To play to the video once loaded or not.",[943,24012,953],{},[925,24014,24015,24020,24023],{},[943,24016,24017],{"align":989},[610,24018,24019],{},"playsInline",[943,24021,24022],{"align":989},"To be play the video inline or not.",[943,24024,953],{},[2205,24026,24027],{},[2208,24028,24029,24030,24033],{},"Any other attribute for a ",[610,24031,24032],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1319,24035,24036],{},"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":568,"searchDepth":569,"depth":570,"links":24038},[24039,24040],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"A composable to load video textures in TresJS scenes.",{},{"title":157,"description":24041},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",[24046,24452,25050,25492,25663,26278,27002,27772,28056],{"id":24047,"title":167,"body":24048,"description":24448,"extension":583,"links":584,"meta":24449,"navigation":586,"path":168,"seo":24450,"stem":169,"__hash__":24451},"docs/2.api/4.materials/custom-shader-material.md",{"type":493,"value":24049,"toc":24444},[24050,24055,24075,24077,24425,24427,24441],[2287,24051,24052],{},[24053,24054],"materials-custom-shader-material",{},[606,24056,2768,24057,24059,24060,24063,24064,24071,24072,1138],{},[610,24058,7309],{}," package provides ",[610,24061,24062],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1132,24065,24068],{"href":24066,"rel":24067},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1136],[610,24069,24070],{},"three-custom-shader-material"," class. As states in the repo, it ",[1666,24073,24074],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[496,24076,15],{"id":616},[618,24078,24081],{"className":620,"code":24079,"highlights":24080,"language":625,"meta":568,"style":568},"\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",[570,623,842,853,864,874,624,894,904,2617,2626,2646,2655,2664,2673,2695],[610,24082,24083,24103,24123,24141,24145,24158,24166,24170,24178,24186,24204,24212,24220,24228,24243,24258,24273,24285,24291,24297,24303,24311,24325,24340,24355,24361,24375,24389,24393,24401,24409,24417],{"__ignoreMap":568},[629,24084,24085,24087,24089,24091,24093,24095,24097,24099,24101],{"class":631,"line":569},[629,24086,635],{"class":634},[629,24088,639],{"class":638},[629,24090,643],{"class":642},[629,24092,646],{"class":642},[629,24094,649],{"class":634},[629,24096,652],{"class":634},[629,24098,656],{"class":655},[629,24100,652],{"class":634},[629,24102,661],{"class":634},[629,24104,24106,24108,24110,24113,24115,24117,24119,24121],{"class":24105,"line":570},[631,665],[629,24107,669],{"class":668},[629,24109,672],{"class":634},[629,24111,24112],{"class":675}," TresCustomShaderMaterial",[629,24114,685],{"class":634},[629,24116,688],{"class":668},[629,24118,691],{"class":634},[629,24120,694],{"class":655},[629,24122,697],{"class":634},[629,24124,24125,24127,24129,24131,24133,24135,24137,24139],{"class":631,"line":700},[629,24126,669],{"class":668},[629,24128,672],{"class":634},[629,24130,3490],{"class":675},[629,24132,685],{"class":634},[629,24134,688],{"class":668},[629,24136,691],{"class":634},[629,24138,625],{"class":655},[629,24140,697],{"class":634},[629,24142,24143],{"class":631,"line":721},[629,24144,734],{"emptyLinePlaceholder":586},[629,24146,24147,24149,24152,24154,24156],{"class":631,"line":731},[629,24148,2407],{"class":642},[629,24150,24151],{"class":675}," customShaderMaterialRef ",[629,24153,649],{"class":634},[629,24155,3490],{"class":2426},[629,24157,6527],{"class":675},[629,24159,24160,24162,24164],{"class":631,"line":737},[629,24161,724],{"class":634},[629,24163,639],{"class":638},[629,24165,661],{"class":634},[629,24167,24168],{"class":631,"line":747},[629,24169,734],{"emptyLinePlaceholder":586},[629,24171,24172,24174,24176],{"class":631,"line":770},[629,24173,635],{"class":634},[629,24175,742],{"class":638},[629,24177,661],{"class":634},[629,24179,24180,24182,24184],{"class":631,"line":782},[629,24181,750],{"class":634},[629,24183,753],{"class":638},[629,24185,661],{"class":634},[629,24187,24188,24190,24192,24194,24196,24198,24200,24202],{"class":631,"line":792},[629,24189,773],{"class":634},[629,24191,776],{"class":638},[629,24193,1477],{"class":642},[629,24195,649],{"class":634},[629,24197,652],{"class":634},[629,24199,11342],{"class":655},[629,24201,652],{"class":634},[629,24203,779],{"class":634},[629,24205,24206,24208,24210],{"class":631,"line":797},[629,24207,773],{"class":634},[629,24209,848],{"class":638},[629,24211,661],{"class":634},[629,24213,24214,24216,24218],{"class":631,"line":819},[629,24215,845],{"class":634},[629,24217,859],{"class":638},[629,24219,779],{"class":634},[629,24221,24223,24225],{"class":24222,"line":623},[631,665],[629,24224,845],{"class":634},[629,24226,24227],{"class":638},"TresCustomShaderMaterial\n",[629,24229,24231,24234,24236,24238,24241],{"class":24230,"line":842},[631,665],[629,24232,24233],{"class":642}," ref",[629,24235,649],{"class":634},[629,24237,652],{"class":634},[629,24239,24240],{"class":655},"customShaderMaterialRef",[629,24242,3123],{"class":634},[629,24244,24246,24249,24251,24253,24256],{"class":24245,"line":853},[631,665],[629,24247,24248],{"class":642}," :vertex-shader",[629,24250,649],{"class":634},[629,24252,652],{"class":634},[629,24254,24255],{"class":655},"vertexShader",[629,24257,3123],{"class":634},[629,24259,24261,24264,24266,24268,24271],{"class":24260,"line":864},[631,665],[629,24262,24263],{"class":642}," :fragment-shader",[629,24265,649],{"class":634},[629,24267,652],{"class":634},[629,24269,24270],{"class":655},"fragmentShader",[629,24272,3123],{"class":634},[629,24274,24276,24279,24281,24283],{"class":24275,"line":874},[631,665],[629,24277,24278],{"class":642}," :uniforms",[629,24280,649],{"class":634},[629,24282,652],{"class":634},[629,24284,3252],{"class":655},[629,24286,24288],{"class":24287,"line":624},[631,665],[629,24289,24290],{"class":655}," u_time: { value: 0 },\n",[629,24292,24294],{"class":24293,"line":894},[631,665],[629,24295,24296],{"class":655}," u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n",[629,24298,24300],{"class":24299,"line":904},[631,665],[629,24301,24302],{"class":655}," u_resolution: { value: new THREE.Vector2() }\n",[629,24304,24306,24309],{"class":24305,"line":2617},[631,665],[629,24307,24308],{"class":655}," }",[629,24310,3123],{"class":634},[629,24312,24314,24317,24319,24321,24323],{"class":24313,"line":2626},[631,665],[629,24315,24316],{"class":642}," :transparent",[629,24318,649],{"class":634},[629,24320,652],{"class":634},[629,24322,953],{"class":655},[629,24324,3123],{"class":634},[629,24326,24328,24331,24333,24335,24338],{"class":24327,"line":2646},[631,665],[629,24329,24330],{"class":642}," :side",[629,24332,649],{"class":634},[629,24334,652],{"class":634},[629,24336,24337],{"class":655},"THREE.DoubleSide",[629,24339,3123],{"class":634},[629,24341,24343,24346,24348,24350,24353],{"class":24342,"line":2655},[631,665],[629,24344,24345],{"class":642}," base-material",[629,24347,649],{"class":634},[629,24349,652],{"class":634},[629,24351,24352],{"class":655},"MeshLambertMaterial",[629,24354,3123],{"class":634},[629,24356,24358],{"class":24357,"line":2664},[631,665],[629,24359,24360],{"class":642}," silent\n",[629,24362,24364,24367,24369,24371,24373],{"class":24363,"line":2673},[631,665],[629,24365,24366],{"class":642}," :map",[629,24368,649],{"class":634},[629,24370,652],{"class":634},[629,24372,2709],{"class":655},[629,24374,3123],{"class":634},[629,24376,24378,24380,24382,24384,24387],{"class":24377,"line":2695},[631,665],[629,24379,21305],{"class":642},[629,24381,649],{"class":634},[629,24383,652],{"class":634},[629,24385,24386],{"class":655},"0xff0000",[629,24388,3123],{"class":634},[629,24390,24391],{"class":631,"line":2739},[629,24392,8025],{"class":634},[629,24394,24395,24397,24399],{"class":631,"line":2748},[629,24396,887],{"class":634},[629,24398,848],{"class":638},[629,24400,661],{"class":634},[629,24402,24403,24405,24407],{"class":631,"line":2757},[629,24404,773],{"class":634},[629,24406,8448],{"class":638},[629,24408,779],{"class":634},[629,24410,24411,24413,24415],{"class":631,"line":3914},[629,24412,897],{"class":634},[629,24414,753],{"class":638},[629,24416,661],{"class":634},[629,24418,24419,24421,24423],{"class":631,"line":3945},[629,24420,724],{"class":634},[629,24422,742],{"class":638},[629,24424,661],{"class":634},[496,24426,914],{"id":913},[606,24428,24429,24430,24433,24434,24436,24437,1138],{},"Being a wrapper around the ",[610,24431,24432],{},"CustomShaderMaterial"," class, the ",[610,24435,24062],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1132,24438,24440],{"href":24066,"rel":24439},[1136],"official repo",[1319,24442,24443],{},"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":568,"searchDepth":569,"depth":570,"links":24445},[24446,24447],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":167,"description":24448},"_HOuAJQ5DQ9SpzOn3sJ32tgM-mbRXc16CsR6Pu3n5Bg",{"id":24453,"title":171,"body":24454,"description":25046,"extension":583,"links":584,"meta":25047,"navigation":586,"path":172,"seo":25048,"stem":173,"__hash__":25049},"docs/2.api/4.materials/glass-material.md",{"type":493,"value":24455,"toc":25037},[24456,24461,24472,24474,24478,24674,24676,24683,24687,25022,25026,25034],[2287,24457,24458],{},[24459,24460],"materials-glass-material",{},[606,24462,2768,24463,24465,24466,24469,24470,1138],{},[610,24464,7309],{}," package provides a new",[610,24467,24468],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[610,24471,2990],{},[496,24473,15],{"id":616},[4043,24475,24477],{"id":24476},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[618,24479,24482],{"className":620,"code":24480,"highlights":24481,"language":625,"meta":568,"style":568},"\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",[570,792],[610,24483,24484,24504,24523,24542,24550,24554,24562,24570,24598,24606,24615,24624,24632,24640,24658,24666],{"__ignoreMap":568},[629,24485,24486,24488,24490,24492,24494,24496,24498,24500,24502],{"class":631,"line":569},[629,24487,635],{"class":634},[629,24489,639],{"class":638},[629,24491,643],{"class":642},[629,24493,646],{"class":642},[629,24495,649],{"class":634},[629,24497,652],{"class":634},[629,24499,656],{"class":655},[629,24501,652],{"class":634},[629,24503,661],{"class":634},[629,24505,24507,24509,24511,24513,24515,24517,24519,24521],{"class":24506,"line":570},[631,665],[629,24508,669],{"class":668},[629,24510,672],{"class":634},[629,24512,707],{"class":675},[629,24514,685],{"class":634},[629,24516,688],{"class":668},[629,24518,691],{"class":634},[629,24520,716],{"class":655},[629,24522,697],{"class":634},[629,24524,24525,24527,24529,24532,24534,24536,24538,24540],{"class":631,"line":700},[629,24526,669],{"class":668},[629,24528,672],{"class":634},[629,24530,24531],{"class":675}," MeshGlassMaterial",[629,24533,685],{"class":634},[629,24535,688],{"class":668},[629,24537,691],{"class":634},[629,24539,694],{"class":655},[629,24541,697],{"class":634},[629,24543,24544,24546,24548],{"class":631,"line":721},[629,24545,724],{"class":634},[629,24547,639],{"class":638},[629,24549,661],{"class":634},[629,24551,24552],{"class":631,"line":731},[629,24553,734],{"emptyLinePlaceholder":586},[629,24555,24556,24558,24560],{"class":631,"line":737},[629,24557,635],{"class":634},[629,24559,742],{"class":638},[629,24561,661],{"class":634},[629,24563,24564,24566,24568],{"class":631,"line":747},[629,24565,750],{"class":634},[629,24567,753],{"class":638},[629,24569,661],{"class":634},[629,24571,24572,24574,24576,24578,24580,24582,24584,24586,24588,24590,24592,24594,24596],{"class":631,"line":770},[629,24573,773],{"class":634},[629,24575,776],{"class":638},[629,24577,1477],{"class":642},[629,24579,649],{"class":634},[629,24581,652],{"class":634},[629,24583,11342],{"class":655},[629,24585,652],{"class":634},[629,24587,8383],{"class":642},[629,24589,649],{"class":634},[629,24591,652],{"class":634},[629,24593,8390],{"class":655},[629,24595,652],{"class":634},[629,24597,779],{"class":634},[629,24599,24600,24602,24604],{"class":631,"line":782},[629,24601,773],{"class":634},[629,24603,848],{"class":638},[629,24605,661],{"class":634},[629,24607,24609,24611,24613],{"class":24608,"line":792},[631,665],[629,24610,845],{"class":634},[629,24612,9924],{"class":638},[629,24614,779],{"class":634},[629,24616,24617,24619,24622],{"class":631,"line":797},[629,24618,845],{"class":634},[629,24620,24621],{"class":638},"MeshGlassMaterial",[629,24623,779],{"class":634},[629,24625,24626,24628,24630],{"class":631,"line":819},[629,24627,887],{"class":634},[629,24629,848],{"class":638},[629,24631,661],{"class":634},[629,24633,24634,24636,24638],{"class":631,"line":623},[629,24635,773],{"class":634},[629,24637,8448],{"class":638},[629,24639,779],{"class":634},[629,24641,24642,24644,24646,24648,24650,24652,24654,24656],{"class":631,"line":842},[629,24643,773],{"class":634},[629,24645,8467],{"class":638},[629,24647,1477],{"class":642},[629,24649,649],{"class":634},[629,24651,652],{"class":634},[629,24653,11424],{"class":655},[629,24655,652],{"class":634},[629,24657,779],{"class":634},[629,24659,24660,24662,24664],{"class":631,"line":853},[629,24661,897],{"class":634},[629,24663,753],{"class":638},[629,24665,661],{"class":634},[629,24667,24668,24670,24672],{"class":631,"line":864},[629,24669,724],{"class":634},[629,24671,742],{"class":638},[629,24673,661],{"class":634},[496,24675,914],{"id":913},[606,24677,24678,24679,24682],{},"No props are required. The component extends ",[610,24680,24681],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4043,24684,24686],{"id":24685},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[618,24688,24691],{"className":620,"code":24689,"highlights":24690,"language":625,"meta":568,"style":568},"\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",[721,737,747,770,782,792,797,819,623,842,853,904],[610,24692,24693,24713,24739,24757,24780,24784,24798,24811,24816,24833,24839,24863,24868,24874,24900,24907,24915,24923,24931,24939,24959,24967,24972,24990,24998,25006,25014],{"__ignoreMap":568},[629,24694,24695,24697,24699,24701,24703,24705,24707,24709,24711],{"class":631,"line":569},[629,24696,635],{"class":634},[629,24698,639],{"class":638},[629,24700,643],{"class":642},[629,24702,646],{"class":642},[629,24704,649],{"class":634},[629,24706,652],{"class":634},[629,24708,656],{"class":655},[629,24710,652],{"class":634},[629,24712,661],{"class":634},[629,24714,24715,24717,24719,24721,24723,24725,24727,24729,24731,24733,24735,24737],{"class":631,"line":570},[629,24716,669],{"class":668},[629,24718,672],{"class":634},[629,24720,3864],{"class":675},[629,24722,679],{"class":634},[629,24724,3490],{"class":675},[629,24726,679],{"class":634},[629,24728,10202],{"class":675},[629,24730,685],{"class":634},[629,24732,688],{"class":668},[629,24734,691],{"class":634},[629,24736,625],{"class":655},[629,24738,697],{"class":634},[629,24740,24741,24743,24745,24747,24749,24751,24753,24755],{"class":631,"line":700},[629,24742,669],{"class":668},[629,24744,672],{"class":634},[629,24746,707],{"class":675},[629,24748,685],{"class":634},[629,24750,688],{"class":668},[629,24752,691],{"class":634},[629,24754,716],{"class":655},[629,24756,697],{"class":634},[629,24758,24760,24762,24764,24766,24768,24770,24772,24774,24776,24778],{"class":24759,"line":721},[631,665],[629,24761,669],{"class":668},[629,24763,672],{"class":634},[629,24765,24531],{"class":675},[629,24767,679],{"class":634},[629,24769,1389],{"class":675},[629,24771,685],{"class":634},[629,24773,688],{"class":668},[629,24775,691],{"class":634},[629,24777,694],{"class":655},[629,24779,697],{"class":634},[629,24781,24782],{"class":631,"line":731},[629,24783,734],{"emptyLinePlaceholder":586},[629,24785,24787,24789,24792,24794,24796],{"class":24786,"line":737},[631,665],[629,24788,2407],{"class":642},[629,24790,24791],{"class":675}," glassMaterialRef ",[629,24793,649],{"class":634},[629,24795,3490],{"class":2426},[629,24797,6527],{"class":675},[629,24799,24801,24803,24805,24807,24809],{"class":24800,"line":747},[631,665],[629,24802,2407],{"class":642},[629,24804,14322],{"class":675},[629,24806,649],{"class":634},[629,24808,3490],{"class":2426},[629,24810,6527],{"class":675},[629,24812,24814],{"class":24813,"line":770},[631,665],[629,24815,734],{"emptyLinePlaceholder":586},[629,24817,24819,24821,24824,24826,24829,24831],{"class":24818,"line":782},[631,665],[629,24820,10251],{"class":2426},[629,24822,24823],{"class":675},"(glassMaterialRef",[629,24825,679],{"class":634},[629,24827,24828],{"class":6830}," value",[629,24830,3669],{"class":642},[629,24832,1196],{"class":634},[629,24834,24836],{"class":24835,"line":792},[631,665],[629,24837,24838],{"class":1201}," // For good practice we dispose the old material\n",[629,24840,24842,24845,24847,24849,24851,24853,24855,24857,24859,24861],{"class":24841,"line":797},[631,665],[629,24843,24844],{"class":675}," boxRef",[629,24846,1138],{"class":634},[629,24848,3677],{"class":675},[629,24850,1138],{"class":634},[629,24852,16385],{"class":675},[629,24854,1138],{"class":634},[629,24856,5192],{"class":675},[629,24858,1138],{"class":634},[629,24860,20849],{"class":2426},[629,24862,6527],{"class":638},[629,24864,24866],{"class":24865,"line":819},[631,665],[629,24867,734],{"emptyLinePlaceholder":586},[629,24869,24871],{"class":24870,"line":623},[631,665],[629,24872,24873],{"class":1201}," // We assign the new MeshGlassMaterialClass\n",[629,24875,24877,24879,24881,24883,24885,24887,24889,24891,24893,24895,24897],{"class":24876,"line":842},[631,665],[629,24878,24844],{"class":675},[629,24880,1138],{"class":634},[629,24882,3677],{"class":675},[629,24884,1138],{"class":634},[629,24886,16385],{"class":675},[629,24888,1138],{"class":634},[629,24890,5192],{"class":675},[629,24892,2423],{"class":634},[629,24894,24828],{"class":675},[629,24896,1138],{"class":634},[629,24898,24899],{"class":675},"MeshGlassMaterialClass\n",[629,24901,24903,24905],{"class":24902,"line":853},[631,665],[629,24904,2420],{"class":634},[629,24906,2440],{"class":675},[629,24908,24909,24911,24913],{"class":631,"line":864},[629,24910,724],{"class":634},[629,24912,639],{"class":638},[629,24914,661],{"class":634},[629,24916,24917,24919,24921],{"class":631,"line":874},[629,24918,635],{"class":634},[629,24920,742],{"class":638},[629,24922,661],{"class":634},[629,24924,24925,24927,24929],{"class":631,"line":624},[629,24926,750],{"class":634},[629,24928,848],{"class":638},[629,24930,661],{"class":634},[629,24932,24933,24935,24937],{"class":631,"line":894},[629,24934,773],{"class":634},[629,24936,9924],{"class":638},[629,24938,779],{"class":634},[629,24940,24942,24944,24946,24948,24950,24952,24955,24957],{"class":24941,"line":904},[631,665],[629,24943,773],{"class":634},[629,24945,24621],{"class":638},[629,24947,3864],{"class":642},[629,24949,649],{"class":634},[629,24951,652],{"class":634},[629,24953,24954],{"class":655},"glassMaterialRef",[629,24956,652],{"class":634},[629,24958,779],{"class":634},[629,24960,24961,24963,24965],{"class":631,"line":2617},[629,24962,897],{"class":634},[629,24964,848],{"class":638},[629,24966,661],{"class":634},[629,24968,24969],{"class":631,"line":2626},[629,24970,24971],{"class":1201}," \u003C!-- Mesh to be replaced -->\n",[629,24973,24974,24976,24978,24980,24982,24984,24986,24988],{"class":631,"line":2646},[629,24975,750],{"class":634},[629,24977,848],{"class":638},[629,24979,3864],{"class":642},[629,24981,649],{"class":634},[629,24983,652],{"class":634},[629,24985,14398],{"class":655},[629,24987,652],{"class":634},[629,24989,661],{"class":634},[629,24991,24992,24994,24996],{"class":631,"line":2655},[629,24993,773],{"class":634},[629,24995,859],{"class":638},[629,24997,779],{"class":634},[629,24999,25000,25002,25004],{"class":631,"line":2664},[629,25001,773],{"class":634},[629,25003,2983],{"class":638},[629,25005,12057],{"class":634},[629,25007,25008,25010,25012],{"class":631,"line":2673},[629,25009,897],{"class":634},[629,25011,848],{"class":638},[629,25013,661],{"class":634},[629,25015,25016,25018,25020],{"class":631,"line":2695},[629,25017,724],{"class":634},[629,25019,742],{"class":638},[629,25021,661],{"class":634},[496,25023,25025],{"id":25024},"tips","Tips",[2205,25027,25028,25031],{},[2208,25029,25030],{},"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",[2208,25032,25033],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1319,25035,25036],{},"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":568,"searchDepth":569,"depth":570,"links":25038},[25039,25042,25045],{"id":616,"depth":570,"text":15,"children":25040},[25041],{"id":24476,"depth":700,"text":24477},{"id":913,"depth":570,"text":914,"children":25043},[25044],{"id":24685,"depth":700,"text":24686},{"id":25024,"depth":570,"text":25025},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":171,"description":25046},"oLHskfHH-pJ6DBy0QJ2dNa5baMGuKNpEQRJ-5FVmwvI",{"id":25051,"title":175,"body":25052,"description":25488,"extension":583,"links":584,"meta":25489,"navigation":586,"path":176,"seo":25490,"stem":177,"__hash__":25491},"docs/2.api/4.materials/holographic-material.md",{"type":493,"value":25053,"toc":25483},[25054,25059,25063,25066,25069,25074,25076,25257,25259,25481],[600,25055,25056],{},[25057,25058],"materials-holographic-material",{},[496,25060,25062],{"id":25061},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[606,25064,25065],{},"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.",[606,25067,25068],{},"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.",[1997,25070,25071],{},[606,25072,25073],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[496,25075,15],{"id":616},[618,25077,25080],{"className":620,"code":25078,"highlights":25079,"language":625,"meta":568,"style":568},"\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",[700,792],[610,25081,25082,25102,25120,25144,25148,25156,25164,25172,25197,25215,25225,25233,25241,25249],{"__ignoreMap":568},[629,25083,25084,25086,25088,25090,25092,25094,25096,25098,25100],{"class":631,"line":569},[629,25085,635],{"class":634},[629,25087,639],{"class":638},[629,25089,643],{"class":642},[629,25091,646],{"class":642},[629,25093,649],{"class":634},[629,25095,652],{"class":634},[629,25097,656],{"class":655},[629,25099,652],{"class":634},[629,25101,661],{"class":634},[629,25103,25104,25106,25108,25110,25112,25114,25116,25118],{"class":631,"line":570},[629,25105,669],{"class":668},[629,25107,672],{"class":634},[629,25109,707],{"class":675},[629,25111,685],{"class":634},[629,25113,688],{"class":668},[629,25115,691],{"class":634},[629,25117,716],{"class":655},[629,25119,697],{"class":634},[629,25121,25123,25125,25127,25130,25132,25134,25136,25138,25140,25142],{"class":25122,"line":700},[631,665],[629,25124,669],{"class":668},[629,25126,672],{"class":634},[629,25128,25129],{"class":675}," HolographicMaterial",[629,25131,679],{"class":634},[629,25133,23754],{"class":675},[629,25135,685],{"class":634},[629,25137,688],{"class":668},[629,25139,691],{"class":634},[629,25141,694],{"class":655},[629,25143,697],{"class":634},[629,25145,25146],{"class":631,"line":721},[629,25147,734],{"emptyLinePlaceholder":586},[629,25149,25150,25152,25154],{"class":631,"line":731},[629,25151,724],{"class":634},[629,25153,639],{"class":638},[629,25155,661],{"class":634},[629,25157,25158,25160,25162],{"class":631,"line":737},[629,25159,635],{"class":634},[629,25161,742],{"class":638},[629,25163,661],{"class":634},[629,25165,25166,25168,25170],{"class":631,"line":747},[629,25167,750],{"class":634},[629,25169,753],{"class":638},[629,25171,661],{"class":634},[629,25173,25174,25176,25178,25180,25182,25184,25186,25188,25190,25192,25195],{"class":631,"line":770},[629,25175,773],{"class":634},[629,25177,776],{"class":638},[629,25179,1477],{"class":642},[629,25181,649],{"class":634},[629,25183,652],{"class":634},[629,25185,11342],{"class":655},[629,25187,652],{"class":634},[629,25189,8383],{"class":642},[629,25191,649],{"class":634},[629,25193,25194],{"class":655},"[0,0,0]",[629,25196,779],{"class":634},[629,25198,25199,25201,25203,25205,25207,25209,25211,25213],{"class":631,"line":782},[629,25200,773],{"class":634},[629,25202,277],{"class":638},[629,25204,805],{"class":642},[629,25206,649],{"class":634},[629,25208,652],{"class":634},[629,25210,1938],{"class":655},[629,25212,652],{"class":634},[629,25214,661],{"class":634},[629,25216,25218,25220,25223],{"class":25217,"line":792},[631,665],[629,25219,845],{"class":634},[629,25221,25222],{"class":638},"HolographicMaterial",[629,25224,779],{"class":634},[629,25226,25227,25229,25231],{"class":631,"line":797},[629,25228,887],{"class":634},[629,25230,277],{"class":638},[629,25232,661],{"class":634},[629,25234,25235,25237,25239],{"class":631,"line":819},[629,25236,773],{"class":634},[629,25238,8448],{"class":638},[629,25240,779],{"class":634},[629,25242,25243,25245,25247],{"class":631,"line":623},[629,25244,897],{"class":634},[629,25246,753],{"class":638},[629,25248,661],{"class":634},[629,25250,25251,25253,25255],{"class":631,"line":842},[629,25252,724],{"class":634},[629,25254,742],{"class":638},[629,25256,661],{"class":634},[496,25258,914],{"id":913},[919,25260,25261,25274],{},[922,25262,25263],{},[925,25264,25265,25267,25269,25271],{},[928,25266,930],{"align":989},[928,25268,933],{"align":989},[928,25270,5961],{},[928,25272,25273],{},"default",[938,25275,25276,25295,25313,25332,25351,25369,25388,25407,25425,25443,25461],{},[925,25277,25278,25283,25286,25290],{},[943,25279,25280],{"align":989},[1661,25281,25282],{},"fresnelAmount",[943,25284,25285],{"align":989},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[943,25287,25288],{},[610,25289,10076],{},[943,25291,25292],{},[610,25293,25294],{},"0.45",[925,25296,25297,25302,25305,25309],{},[943,25298,25299],{"align":989},[1661,25300,25301],{},"fresnelOpacity",[943,25303,25304],{"align":989},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[943,25306,25307],{},[610,25308,10076],{},[943,25310,25311],{},[610,25312,11723],{},[925,25314,25315,25320,25323,25327],{},[943,25316,25317],{"align":989},[1661,25318,25319],{},"scanlineSize",[943,25321,25322],{"align":989},"Size of the scanlines. Ranges from 1 to 15.",[943,25324,25325],{},[610,25326,10076],{},[943,25328,25329],{},[610,25330,25331],{},"8.0",[925,25333,25334,25339,25342,25346],{},[943,25335,25336],{"align":989},[1661,25337,25338],{},"hologramBrightness",[943,25340,25341],{"align":989},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[943,25343,25344],{},[610,25345,10076],{},[943,25347,25348],{},[610,25349,25350],{},"1.2",[925,25352,25353,25358,25361,25365],{},[943,25354,25355],{"align":989},[1661,25356,25357],{},"signalSpeed",[943,25359,25360],{"align":989},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[943,25362,25363],{},[610,25364,10076],{},[943,25366,25367],{},[610,25368,25294],{},[925,25370,25371,25376,25379,25383],{},[943,25372,25373],{"align":989},[1661,25374,25375],{},"hologramColor",[943,25377,25378],{"align":989},"Specifies the color of the hologram.",[943,25380,25381],{},[610,25382,10098],{},[943,25384,25385],{},[610,25386,25387],{},"\"#00d5ff\"",[925,25389,25390,25395,25398,25403],{},[943,25391,25392],{"align":989},[1661,25393,25394],{},"enableBlinking",[943,25396,25397],{"align":989},"Enables or disables the blinking effect.",[943,25399,25400],{},[610,25401,25402],{},"Boolean",[943,25404,25405],{},[610,25406,953],{},[925,25408,25409,25414,25417,25421],{},[943,25410,25411],{"align":989},[1661,25412,25413],{},"hologramOpacity",[943,25415,25416],{"align":989},"Specifies the opacity of the hologram.",[943,25418,25419],{},[610,25420,10076],{},[943,25422,25423],{},[610,25424,11723],{},[925,25426,25427,25432,25435,25439],{},[943,25428,25429],{"align":989},[1661,25430,25431],{},"blinkFresnelOnly",[943,25433,25434],{"align":989},"Enables or disables the blinking effect for the Fresnel only.",[943,25436,25437],{},[610,25438,25402],{},[943,25440,25441],{},[610,25442,953],{},[925,25444,25445,25450,25453,25457],{},[943,25446,25447],{"align":989},[1661,25448,25449],{},"enableAdditive",[943,25451,25452],{"align":989},"Enables or disables the Additive Blend Mode.",[943,25454,25455],{},[610,25456,25402],{},[943,25458,25459],{},[610,25460,953],{},[925,25462,25463,25468,25471,25476],{},[943,25464,25465],{"align":989},[1661,25466,25467],{},"side",[943,25469,25470],{"align":989},"Specifies side for the material, as String.",[943,25472,25473],{},[610,25474,25475],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[943,25477,25478],{},[610,25479,25480],{},"FrontSide",[1319,25482,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":25484},[25485,25486,25487],{"id":25061,"depth":570,"text":25062},{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":175,"description":25488},"xIEPkRUmuLTvzMRufIpFP12igw1vvqL43oWczW_i5i4",{"id":25493,"title":179,"body":25494,"description":25659,"extension":583,"links":584,"meta":25660,"navigation":586,"path":180,"seo":25661,"stem":181,"__hash__":25662},"docs/2.api/4.materials/mesh-discard-material.md",{"type":493,"value":25495,"toc":25656},[25496,25502,25504,25654],[606,25497,25498,25501],{},[610,25499,25500],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[496,25503,15],{"id":616},[618,25505,25508],{"className":620,"code":25506,"highlights":25507,"language":625,"meta":568,"style":568},"\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",[700,797],[610,25509,25510,25530,25548,25568,25576,25580,25588,25596,25604,25612,25620,25630,25638,25646],{"__ignoreMap":568},[629,25511,25512,25514,25516,25518,25520,25522,25524,25526,25528],{"class":631,"line":569},[629,25513,635],{"class":634},[629,25515,639],{"class":638},[629,25517,643],{"class":642},[629,25519,646],{"class":642},[629,25521,649],{"class":634},[629,25523,652],{"class":634},[629,25525,656],{"class":655},[629,25527,652],{"class":634},[629,25529,661],{"class":634},[629,25531,25532,25534,25536,25538,25540,25542,25544,25546],{"class":631,"line":570},[629,25533,669],{"class":668},[629,25535,672],{"class":634},[629,25537,707],{"class":675},[629,25539,685],{"class":634},[629,25541,688],{"class":668},[629,25543,691],{"class":634},[629,25545,716],{"class":655},[629,25547,697],{"class":634},[629,25549,25551,25553,25555,25558,25560,25562,25564,25566],{"class":25550,"line":700},[631,665],[629,25552,669],{"class":668},[629,25554,672],{"class":634},[629,25556,25557],{"class":675}," MeshDiscardMaterial",[629,25559,685],{"class":634},[629,25561,688],{"class":668},[629,25563,691],{"class":634},[629,25565,694],{"class":655},[629,25567,697],{"class":634},[629,25569,25570,25572,25574],{"class":631,"line":721},[629,25571,724],{"class":634},[629,25573,639],{"class":638},[629,25575,661],{"class":634},[629,25577,25578],{"class":631,"line":731},[629,25579,734],{"emptyLinePlaceholder":586},[629,25581,25582,25584,25586],{"class":631,"line":737},[629,25583,635],{"class":634},[629,25585,742],{"class":638},[629,25587,661],{"class":634},[629,25589,25590,25592,25594],{"class":631,"line":747},[629,25591,750],{"class":634},[629,25593,753],{"class":638},[629,25595,661],{"class":634},[629,25597,25598,25600,25602],{"class":631,"line":770},[629,25599,773],{"class":634},[629,25601,776],{"class":638},[629,25603,779],{"class":634},[629,25605,25606,25608,25610],{"class":631,"line":782},[629,25607,773],{"class":634},[629,25609,848],{"class":638},[629,25611,661],{"class":634},[629,25613,25614,25616,25618],{"class":631,"line":792},[629,25615,845],{"class":634},[629,25617,859],{"class":638},[629,25619,779],{"class":634},[629,25621,25623,25625,25628],{"class":25622,"line":797},[631,665],[629,25624,845],{"class":634},[629,25626,25627],{"class":638},"MeshDiscardMaterial",[629,25629,779],{"class":634},[629,25631,25632,25634,25636],{"class":631,"line":819},[629,25633,887],{"class":634},[629,25635,848],{"class":638},[629,25637,661],{"class":634},[629,25639,25640,25642,25644],{"class":631,"line":623},[629,25641,897],{"class":634},[629,25643,753],{"class":638},[629,25645,661],{"class":634},[629,25647,25648,25650,25652],{"class":631,"line":842},[629,25649,724],{"class":634},[629,25651,742],{"class":638},[629,25653,661],{"class":634},[1319,25655,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":25657},[25658],{"id":616,"depth":570,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":179,"description":25659},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":25664,"title":183,"body":25665,"description":26274,"extension":583,"links":584,"meta":26275,"navigation":586,"path":184,"seo":26276,"stem":185,"__hash__":26277},"docs/2.api/4.materials/mesh-portal-material.md",{"type":493,"value":25666,"toc":26269},[25667,25672,25680,25696,25708,25710,26001,26003,26096,26100,26110,26186,26231,26255,26266],[600,25668,25669],{},[25670,25671],"materials-mesh-portal-material",{},[606,25673,2768,25674,8235,25676,25679],{},[610,25675,7309],{},[610,25677,25678],{},"\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.",[606,25681,25682,25683,25686,25687,25690,25691,25693,25694,5566],{},"Children declared inside the component render into the ",[1661,25684,25685],{},"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 ",[610,25688,25689],{},"blend","\ncross-fades between the world (",[610,25692,957],{},") and the portal (",[610,25695,1866],{},[1997,25697,25698],{},[606,25699,25700,25701,25707],{},"This component is a port of the ",[1132,25702,25706],{"href":25703,"rel":25704,"target":25705},"https://drei.docs.pmnd.rs/portals/mesh-portal-material",[1136],"_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[496,25709,15],{"id":616},[618,25711,25713],{"className":620,"code":25712,"language":625,"meta":568,"style":568},"\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",[610,25714,25715,25735,25753,25776,25784,25788,25796,25804,25823,25831,25839,25859,25879,25884,25902,25921,25942,25960,25969,25977,25985,25993],{"__ignoreMap":568},[629,25716,25717,25719,25721,25723,25725,25727,25729,25731,25733],{"class":631,"line":569},[629,25718,635],{"class":634},[629,25720,639],{"class":638},[629,25722,643],{"class":642},[629,25724,646],{"class":642},[629,25726,649],{"class":634},[629,25728,652],{"class":634},[629,25730,656],{"class":655},[629,25732,652],{"class":634},[629,25734,661],{"class":634},[629,25736,25737,25739,25741,25743,25745,25747,25749,25751],{"class":631,"line":570},[629,25738,669],{"class":668},[629,25740,672],{"class":634},[629,25742,707],{"class":675},[629,25744,685],{"class":634},[629,25746,688],{"class":668},[629,25748,691],{"class":634},[629,25750,716],{"class":655},[629,25752,697],{"class":634},[629,25754,25755,25757,25759,25762,25764,25766,25768,25770,25772,25774],{"class":631,"line":700},[629,25756,669],{"class":668},[629,25758,672],{"class":634},[629,25760,25761],{"class":675}," MeshPortalMaterial",[629,25763,679],{"class":634},[629,25765,682],{"class":675},[629,25767,685],{"class":634},[629,25769,688],{"class":668},[629,25771,691],{"class":634},[629,25773,694],{"class":655},[629,25775,697],{"class":634},[629,25777,25778,25780,25782],{"class":631,"line":721},[629,25779,724],{"class":634},[629,25781,639],{"class":638},[629,25783,661],{"class":634},[629,25785,25786],{"class":631,"line":731},[629,25787,734],{"emptyLinePlaceholder":586},[629,25789,25790,25792,25794],{"class":631,"line":737},[629,25791,635],{"class":634},[629,25793,742],{"class":638},[629,25795,661],{"class":634},[629,25797,25798,25800,25802],{"class":631,"line":747},[629,25799,750],{"class":634},[629,25801,753],{"class":638},[629,25803,661],{"class":634},[629,25805,25806,25808,25810,25812,25814,25816,25819,25821],{"class":631,"line":770},[629,25807,773],{"class":634},[629,25809,776],{"class":638},[629,25811,1477],{"class":642},[629,25813,649],{"class":634},[629,25815,652],{"class":634},[629,25817,25818],{"class":655},"[0, 0, 6]",[629,25820,652],{"class":634},[629,25822,779],{"class":634},[629,25824,25825,25827,25829],{"class":631,"line":782},[629,25826,773],{"class":634},[629,25828,787],{"class":638},[629,25830,779],{"class":634},[629,25832,25833,25835,25837],{"class":631,"line":792},[629,25834,773],{"class":634},[629,25836,848],{"class":638},[629,25838,661],{"class":634},[629,25840,25841,25843,25846,25848,25850,25852,25855,25857],{"class":631,"line":797},[629,25842,845],{"class":634},[629,25844,25845],{"class":638},"TresPlaneGeometry",[629,25847,1951],{"class":642},[629,25849,649],{"class":634},[629,25851,652],{"class":634},[629,25853,25854],{"class":655},"[3, 4]",[629,25856,652],{"class":634},[629,25858,779],{"class":634},[629,25860,25861,25863,25866,25869,25871,25873,25875,25877],{"class":631,"line":819},[629,25862,845],{"class":634},[629,25864,25865],{"class":638},"MeshPortalMaterial",[629,25867,25868],{"class":642}," :blend",[629,25870,649],{"class":634},[629,25872,652],{"class":634},[629,25874,957],{"class":655},[629,25876,652],{"class":634},[629,25878,661],{"class":634},[629,25880,25881],{"class":631,"line":623},[629,25882,25883],{"class":1201}," \u003C!-- children render INTO the portal scene -->\n",[629,25885,25886,25888,25890,25892,25894,25896,25898,25900],{"class":631,"line":842},[629,25887,856],{"class":634},[629,25889,8448],{"class":638},[629,25891,1859],{"class":642},[629,25893,649],{"class":634},[629,25895,652],{"class":634},[629,25897,1938],{"class":655},[629,25899,652],{"class":634},[629,25901,779],{"class":634},[629,25903,25904,25906,25908,25910,25912,25914,25917,25919],{"class":631,"line":853},[629,25905,856],{"class":634},[629,25907,848],{"class":638},[629,25909,1477],{"class":642},[629,25911,649],{"class":634},[629,25913,652],{"class":634},[629,25915,25916],{"class":655},"[0, 0, -1]",[629,25918,652],{"class":634},[629,25920,661],{"class":634},[629,25922,25923,25926,25929,25931,25933,25935,25938,25940],{"class":631,"line":864},[629,25924,25925],{"class":634}," \u003C",[629,25927,25928],{"class":638},"TresTorusKnotGeometry",[629,25930,1951],{"class":642},[629,25932,649],{"class":634},[629,25934,652],{"class":634},[629,25936,25937],{"class":655},"[0.6, 0.25, 128, 32]",[629,25939,652],{"class":634},[629,25941,779],{"class":634},[629,25943,25944,25946,25948,25950,25952,25954,25956,25958],{"class":631,"line":874},[629,25945,25925],{"class":634},[629,25947,2678],{"class":638},[629,25949,2681],{"class":642},[629,25951,649],{"class":634},[629,25953,652],{"class":634},[629,25955,8920],{"class":655},[629,25957,652],{"class":634},[629,25959,779],{"class":634},[629,25961,25962,25965,25967],{"class":631,"line":624},[629,25963,25964],{"class":634}," \u003C/",[629,25966,848],{"class":638},[629,25968,661],{"class":634},[629,25970,25971,25973,25975],{"class":631,"line":894},[629,25972,877],{"class":634},[629,25974,25865],{"class":638},[629,25976,661],{"class":634},[629,25978,25979,25981,25983],{"class":631,"line":904},[629,25980,887],{"class":634},[629,25982,848],{"class":638},[629,25984,661],{"class":634},[629,25986,25987,25989,25991],{"class":631,"line":2617},[629,25988,897],{"class":634},[629,25990,753],{"class":638},[629,25992,661],{"class":634},[629,25994,25995,25997,25999],{"class":631,"line":2626},[629,25996,724],{"class":634},[629,25998,742],{"class":638},[629,26000,661],{"class":634},[496,26002,914],{"id":913},[919,26004,26005,26017],{},[922,26006,26007],{},[925,26008,26009,26011,26013,26015],{},[928,26010,930],{},[928,26012,5961],{},[928,26014,936],{},[928,26016,933],{},[938,26018,26019,26041,26060,26078],{},[925,26020,26021,26025,26029,26033],{},[943,26022,26023],{},[610,26024,25689],{},[943,26026,26027],{},[610,26028,5344],{},[943,26030,26031],{},[610,26032,957],{},[943,26034,26035,26037,26038,26040],{},[610,26036,957],{}," = world only, ",[610,26039,1866],{}," = portal only; cross-fades between.",[925,26042,26043,26048,26052,26057],{},[943,26044,26045],{},[610,26046,26047],{},"resolution",[943,26049,26050],{},[610,26051,5344],{},[943,26053,26054],{},[610,26055,26056],{},"512",[943,26058,26059],{},"Frame buffer resolution for the portal render.",[925,26061,26062,26067,26071,26075],{},[943,26063,26064],{},[610,26065,26066],{},"worldUnits",[943,26068,26069],{},[610,26070,15629],{},[943,26072,26073],{},[610,26074,963],{},[943,26076,26077],{},"Keep portal contents in world units instead of host-relative.",[925,26079,26080,26085,26089,26093],{},[943,26081,26082],{},[610,26083,26084],{},"renderPriority",[943,26086,26087],{},[610,26088,5344],{},[943,26090,26091],{},[610,26092,957],{},[943,26094,26095],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[496,26097,26099],{"id":26098},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[606,26101,26102,26105,26106,26109],{},[610,26103,26104],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[1661,26107,26108],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[618,26111,26113],{"className":620,"code":26112,"language":625,"meta":568,"style":568},"\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",[610,26114,26115,26135,26140,26145,26150,26155,26159,26164,26169,26173,26178],{"__ignoreMap":568},[629,26116,26117,26119,26121,26123,26125,26127,26129,26131,26133],{"class":631,"line":569},[629,26118,635],{"class":634},[629,26120,25865],{"class":638},[629,26122,3021],{"class":634},[629,26124,25689],{"class":642},[629,26126,649],{"class":634},[629,26128,652],{"class":634},[629,26130,25689],{"class":675},[629,26132,652],{"class":634},[629,26134,661],{"class":634},[629,26136,26137],{"class":631,"line":570},[629,26138,26139],{"class":675}," \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[629,26141,26142],{"class":631,"line":700},[629,26143,26144],{"class":675}," \u003CSuspense>\n",[629,26146,26147],{"class":631,"line":721},[629,26148,26149],{"class":675}," \u003CEnvironment preset=\"dawn\" :background=\"true\" />\n",[629,26151,26152],{"class":631,"line":731},[629,26153,26154],{"class":675}," \u003C/Suspense>\n",[629,26156,26157],{"class":631,"line":737},[629,26158,734],{"emptyLinePlaceholder":586},[629,26160,26161],{"class":631,"line":747},[629,26162,26163],{"class":675}," \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[629,26165,26166],{"class":631,"line":770},[629,26167,26168],{"class":675}," \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" />\n",[629,26170,26171],{"class":631,"line":782},[629,26172,734],{"emptyLinePlaceholder":586},[629,26174,26175],{"class":631,"line":792},[629,26176,26177],{"class":675}," \u003C!-- ...portal scene contents... -->\n",[629,26179,26180,26182,26184],{"class":631,"line":797},[629,26181,724],{"class":634},[629,26183,25865],{"class":638},[629,26185,661],{"class":634},[1997,26187,26188],{},[606,26189,26190,26193,26194,26197,26198,26200,26201,26204,26205,26208,26209,26204,26212,26215,26216,26219,26220,26223,26224,26227,26228,26230],{},[1661,26191,26192],{},"How it works:"," the component ",[610,26195,26196],{},"provide()","s a context whose ",[610,26199,16533],{}," points at the\nprivate portal scene. Vue's ",[610,26202,26203],{},"provide","/",[610,26206,26207],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[610,26210,26211],{},"\u003CTresPortal>",[610,26213,26214],{},"\u003CTeleport>","), so both imperative\nhelpers (",[610,26217,26218],{},"useTres().scene",", e.g. ",[610,26221,26222],{},"\u003CEnvironment>",") and declarative ",[610,26225,26226],{},"attach"," configure\nthe portal scene. Only the ",[610,26229,16533],{}," is swapped — renderer, camera and sizes are shared.",[3191,26232,26233],{},[606,26234,26235,26238,26239,26241,26242,26245,26246,26248,26249,26254],{},[1661,26236,26237],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[610,26240,25689],{}," takeover stays\nin sync. To do this it calls ",[610,26243,26244],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[610,26247,26104],{}," effectively opts out of\n",[1132,26250,26253],{"href":26251,"rel":26252,"target":25705},"https://docs.tresjs.org/api/advanced/performance#mode-on-demand",[1136],"on-demand rendering"," while mounted.",[1997,26256,26257],{},[606,26258,26259,3186,26262,26265],{},[1661,26260,26261],{},"Limitations (MVP):",[610,26263,26264],{},"blur"," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1319,26267,26268],{},"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":568,"searchDepth":569,"depth":570,"links":26270},[26271,26272,26273],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":26098,"depth":570,"text":26099},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.",{},{"title":183,"description":26274},"ohfbKC7GzCyDLCAu6PE_RcaQcHLETnumKwxeb3qJ82E",{"id":26279,"title":187,"body":26280,"description":26998,"extension":583,"links":584,"meta":26999,"navigation":586,"path":188,"seo":27000,"stem":189,"__hash__":27001},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":493,"value":26281,"toc":26994},[26282,26287,26298,26307,26314,26316,26699,26701,26971,26992],[600,26283,26284],{},[26285,26286],"materials-mesh-reflection-material",{},[606,26288,2768,26289,8235,26291,26294,26295,1138],{},[610,26290,7309],{},[610,26292,26293],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[610,26296,26297],{},"Scene",[606,26299,26300,26301,26306],{},"The component is based on the excellent ",[1132,26302,26305],{"href":26303,"rel":26304},"https://github.com/pmndrs/drei",[1136],"Drei"," component of the same name.",[606,26308,26309,26310,26313],{},"It extends ",[610,26311,26312],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[496,26315,15],{"id":616},[618,26317,26320],{"className":620,"code":26318,"highlights":26319,"language":625,"meta":568,"style":568},"\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",[700,864,874,624,894],[610,26321,26322,26342,26360,26380,26388,26392,26400,26408,26436,26456,26474,26481,26495,26509,26523,26536,26551,26565,26579,26593,26597,26605,26623,26631,26649,26657,26665,26683,26691],{"__ignoreMap":568},[629,26323,26324,26326,26328,26330,26332,26334,26336,26338,26340],{"class":631,"line":569},[629,26325,635],{"class":634},[629,26327,639],{"class":638},[629,26329,643],{"class":642},[629,26331,646],{"class":642},[629,26333,649],{"class":634},[629,26335,652],{"class":634},[629,26337,656],{"class":655},[629,26339,652],{"class":634},[629,26341,661],{"class":634},[629,26343,26344,26346,26348,26350,26352,26354,26356,26358],{"class":631,"line":570},[629,26345,669],{"class":668},[629,26347,672],{"class":634},[629,26349,707],{"class":675},[629,26351,685],{"class":634},[629,26353,688],{"class":668},[629,26355,691],{"class":634},[629,26357,716],{"class":655},[629,26359,697],{"class":634},[629,26361,26363,26365,26367,26370,26372,26374,26376,26378],{"class":26362,"line":700},[631,665],[629,26364,669],{"class":668},[629,26366,672],{"class":634},[629,26368,26369],{"class":675}," MeshReflectionMaterial",[629,26371,685],{"class":634},[629,26373,688],{"class":668},[629,26375,691],{"class":634},[629,26377,694],{"class":655},[629,26379,697],{"class":634},[629,26381,26382,26384,26386],{"class":631,"line":721},[629,26383,724],{"class":634},[629,26385,639],{"class":638},[629,26387,661],{"class":634},[629,26389,26390],{"class":631,"line":731},[629,26391,734],{"emptyLinePlaceholder":586},[629,26393,26394,26396,26398],{"class":631,"line":737},[629,26395,635],{"class":634},[629,26397,742],{"class":638},[629,26399,661],{"class":634},[629,26401,26402,26404,26406],{"class":631,"line":747},[629,26403,750],{"class":634},[629,26405,753],{"class":638},[629,26407,661],{"class":634},[629,26409,26410,26412,26414,26416,26418,26420,26422,26424,26426,26428,26430,26432,26434],{"class":631,"line":770},[629,26411,773],{"class":634},[629,26413,776],{"class":638},[629,26415,1477],{"class":642},[629,26417,649],{"class":634},[629,26419,652],{"class":634},[629,26421,11342],{"class":655},[629,26423,652],{"class":634},[629,26425,8383],{"class":642},[629,26427,649],{"class":634},[629,26429,652],{"class":634},[629,26431,8390],{"class":655},[629,26433,652],{"class":634},[629,26435,779],{"class":634},[629,26437,26438,26440,26442,26445,26447,26449,26452,26454],{"class":631,"line":782},[629,26439,773],{"class":634},[629,26441,848],{"class":638},[629,26443,26444],{"class":642}," :rotation",[629,26446,649],{"class":634},[629,26448,652],{"class":634},[629,26450,26451],{"class":655},"[-Math.PI / 2, 0, 0]",[629,26453,652],{"class":634},[629,26455,661],{"class":634},[629,26457,26458,26460,26462,26464,26466,26468,26470,26472],{"class":631,"line":792},[629,26459,845],{"class":634},[629,26461,25845],{"class":638},[629,26463,1951],{"class":642},[629,26465,649],{"class":634},[629,26467,652],{"class":634},[629,26469,10023],{"class":655},[629,26471,652],{"class":634},[629,26473,779],{"class":634},[629,26475,26476,26478],{"class":631,"line":797},[629,26477,845],{"class":634},[629,26479,26480],{"class":638},"MeshReflectionMaterial\n",[629,26482,26483,26486,26488,26490,26493],{"class":631,"line":819},[629,26484,26485],{"class":642}," :blur",[629,26487,649],{"class":634},[629,26489,652],{"class":634},[629,26491,26492],{"class":655},"[300, 100]",[629,26494,3123],{"class":634},[629,26496,26497,26500,26502,26504,26507],{"class":631,"line":623},[629,26498,26499],{"class":642}," :mixBlur",[629,26501,649],{"class":634},[629,26503,652],{"class":634},[629,26505,26506],{"class":655},"30",[629,26508,3123],{"class":634},[629,26510,26511,26514,26516,26518,26521],{"class":631,"line":842},[629,26512,26513],{"class":642}," :mixStrength",[629,26515,649],{"class":634},[629,26517,652],{"class":634},[629,26519,26520],{"class":655},"80",[629,26522,3123],{"class":634},[629,26524,26525,26528,26530,26532,26534],{"class":631,"line":853},[629,26526,26527],{"class":642}," :mixContrast",[629,26529,649],{"class":634},[629,26531,652],{"class":634},[629,26533,1866],{"class":655},[629,26535,3123],{"class":634},[629,26537,26539,26542,26544,26546,26549],{"class":26538,"line":864},[631,665],[629,26540,26541],{"class":642}," color",[629,26543,649],{"class":634},[629,26545,652],{"class":634},[629,26547,26548],{"class":655},"#a0a0a0",[629,26550,3123],{"class":634},[629,26552,26554,26557,26559,26561,26563],{"class":26553,"line":874},[631,665],[629,26555,26556],{"class":642}," metalness",[629,26558,649],{"class":634},[629,26560,652],{"class":634},[629,26562,1938],{"class":655},[629,26564,3123],{"class":634},[629,26566,26568,26571,26573,26575,26577],{"class":26567,"line":624},[631,665],[629,26569,26570],{"class":642}," roughness",[629,26572,649],{"class":634},[629,26574,652],{"class":634},[629,26576,1866],{"class":655},[629,26578,3123],{"class":634},[629,26580,26582,26585,26587,26589,26591],{"class":26581,"line":894},[631,665],[629,26583,26584],{"class":642}," mirror",[629,26586,649],{"class":634},[629,26588,652],{"class":634},[629,26590,957],{"class":655},[629,26592,3123],{"class":634},[629,26594,26595],{"class":631,"line":904},[629,26596,8025],{"class":634},[629,26598,26599,26601,26603],{"class":631,"line":2617},[629,26600,887],{"class":634},[629,26602,848],{"class":638},[629,26604,661],{"class":634},[629,26606,26607,26609,26611,26613,26615,26617,26619,26621],{"class":631,"line":2626},[629,26608,773],{"class":634},[629,26610,848],{"class":638},[629,26612,1477],{"class":642},[629,26614,649],{"class":634},[629,26616,652],{"class":634},[629,26618,23629],{"class":655},[629,26620,652],{"class":634},[629,26622,661],{"class":634},[629,26624,26625,26627,26629],{"class":631,"line":2646},[629,26626,845],{"class":634},[629,26628,859],{"class":638},[629,26630,779],{"class":634},[629,26632,26633,26635,26637,26639,26641,26643,26645,26647],{"class":631,"line":2655},[629,26634,845],{"class":634},[629,26636,2678],{"class":638},[629,26638,2681],{"class":642},[629,26640,649],{"class":634},[629,26642,652],{"class":634},[629,26644,11389],{"class":655},[629,26646,652],{"class":634},[629,26648,779],{"class":634},[629,26650,26651,26653,26655],{"class":631,"line":2664},[629,26652,887],{"class":634},[629,26654,848],{"class":638},[629,26656,661],{"class":634},[629,26658,26659,26661,26663],{"class":631,"line":2673},[629,26660,773],{"class":634},[629,26662,8448],{"class":638},[629,26664,779],{"class":634},[629,26666,26667,26669,26671,26673,26675,26677,26679,26681],{"class":631,"line":2695},[629,26668,773],{"class":634},[629,26670,8467],{"class":638},[629,26672,1477],{"class":642},[629,26674,649],{"class":634},[629,26676,652],{"class":634},[629,26678,11424],{"class":655},[629,26680,652],{"class":634},[629,26682,779],{"class":634},[629,26684,26685,26687,26689],{"class":631,"line":2739},[629,26686,897],{"class":634},[629,26688,753],{"class":638},[629,26690,661],{"class":634},[629,26692,26693,26695,26697],{"class":631,"line":2748},[629,26694,724],{"class":634},[629,26696,742],{"class":638},[629,26698,661],{"class":634},[496,26700,914],{"id":913},[919,26702,26703,26713],{},[922,26704,26705],{},[925,26706,26707,26709,26711],{},[928,26708,8081],{"align":989},[928,26710,933],{"align":989},[928,26712,936],{},[938,26714,26715,26729,26743,26757,26774,26788,26802,26816,26830,26844,26861,26875,26889,26903,26927,26941,26957],{},[925,26716,26717,26721,26724],{},[943,26718,26719],{"align":989},[610,26720,26047],{},[943,26722,26723],{"align":989},"Length in pixels of one side of the square reflective textures",[943,26725,26726],{},[610,26727,26728],{},"256",[925,26730,26731,26736,26739],{},[943,26732,26733],{"align":989},[610,26734,26735],{},"mix",[943,26737,26738],{"align":989},"Overall strength of the reflection",[943,26740,26741],{},[610,26742,1866],{},[925,26744,26745,26750,26753],{},[943,26746,26747],{"align":989},[610,26748,26749],{},"sharpMix",[943,26751,26752],{"align":989},"Strength of the sharp reflection on smooth surfaces",[943,26754,26755],{},[610,26756,1866],{},[925,26758,26759,26764,26770],{},[943,26760,26761],{"align":989},[610,26762,26763],{},"sharpDepthScale",[943,26765,26766,26767,26769],{"align":989},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[610,26768,957],{},", a depth texture will be created",[943,26771,26772],{},[610,26773,1866],{},[925,26775,26776,26781,26784],{},[943,26777,26778],{"align":989},[610,26779,26780],{},"sharpDepthBias",[943,26782,26783],{"align":989},"Sharp reflection depth falloff bias",[943,26785,26786],{},[610,26787,957],{},[925,26789,26790,26795,26798],{},[943,26791,26792],{"align":989},[610,26793,26794],{},"sharpDepthEdgeMin",[943,26796,26797],{"align":989},"Sharp reflection depth falloff start",[943,26799,26800],{},[610,26801,957],{},[925,26803,26804,26809,26812],{},[943,26805,26806],{"align":989},[610,26807,26808],{},"sharpDepthEdgeMax",[943,26810,26811],{"align":989},"Sharp reflection depth falloff end",[943,26813,26814],{},[610,26815,5721],{},[925,26817,26818,26823,26826],{},[943,26819,26820],{"align":989},[610,26821,26822],{},"blurMixSmooth",[943,26824,26825],{"align":989},"Strength of the blurred reflection on smooth surfaces",[943,26827,26828],{},[610,26829,1866],{},[925,26831,26832,26837,26840],{},[943,26833,26834],{"align":989},[610,26835,26836],{},"blurMixRough",[943,26838,26839],{"align":989},"Strength of the blurred reflection on rough surfaces",[943,26841,26842],{},[610,26843,1866],{},[925,26845,26846,26851,26857],{},[943,26847,26848],{"align":989},[610,26849,26850],{},"blurDepthScale",[943,26852,26853,26854,26856],{"align":989},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[610,26855,957],{},", depth texture will be rendered",[943,26858,26859],{},[610,26860,1866],{},[925,26862,26863,26868,26871],{},[943,26864,26865],{"align":989},[610,26866,26867],{},"blurDepthBias",[943,26869,26870],{"align":989},"Blurred reflection depth spread bias",[943,26872,26873],{},[610,26874,957],{},[925,26876,26877,26882,26885],{},[943,26878,26879],{"align":989},[610,26880,26881],{},"blurDepthEdgeMin",[943,26883,26884],{"align":989},"Blurred reflection depth spread start",[943,26886,26887],{},[610,26888,957],{},[925,26890,26891,26896,26899],{},[943,26892,26893],{"align":989},[610,26894,26895],{},"blurDepthEdgeMax",[943,26897,26898],{"align":989},"Blurred reflection depth spread end",[943,26900,26901],{},[610,26902,5721],{},[925,26904,26905,26910,26923],{},[943,26906,26907],{"align":989},[610,26908,26909],{},"blurSize",[943,26911,26912,26913,26916,26917,5603,26920,26922],{"align":989},"Size of the blur. If ",[610,26914,26915],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[610,26918,26919],{},"[0, 0]",[610,26921,957],{},", a blur texture will be rendered",[943,26924,26925],{},[610,26926,26919],{},[925,26928,26929,26934,26937],{},[943,26930,26931],{"align":989},[610,26932,26933],{},"distortionMap",[943,26935,26936],{"align":989},"Texture for offsetting the reflection",[943,26938,26939],{},[610,26940,1171],{},[925,26942,26943,26948,26953],{},[943,26944,26945],{"align":989},[610,26946,26947],{},"distortion",[943,26949,26950,26951],{"align":989},"Influence of ",[610,26952,26933],{},[943,26954,26955],{},[610,26956,957],{},[925,26958,26959,26964,26967],{},[943,26960,26961],{"align":989},[610,26962,26963],{},"reflectorOffset",[943,26965,26966],{"align":989},"Offsets the reflection",[943,26968,26969],{},[610,26970,957],{},[606,26972,26973,26974,26976,26977,1664,26979,1664,26981,1664,26983,1664,26985,1664,26987,1664,26989,26991],{},"Additionally, the component extends ",[610,26975,26312],{}," and accepts all the same props including ",[610,26978,7539],{},[610,26980,19534],{},[610,26982,19519],{},[610,26984,2973],{},[610,26986,19418],{},[610,26988,19437],{},[610,26990,19456],{},", and more.",[1319,26993,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":26995},[26996,26997],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":187,"description":26998},"-dhKiUbKV5dPMARGNmTRwR-6x_sfsh0AlnXCQ6x3KUM",{"id":27003,"title":191,"body":27004,"description":27768,"extension":583,"links":584,"meta":27769,"navigation":586,"path":192,"seo":27770,"stem":193,"__hash__":27771},"docs/2.api/4.materials/mesh-transmission-material.md",{"type":493,"value":27005,"toc":27763},[27006,27011,27019,27026,27035,27037,27292,27294,27718,27723,27725,27761],[600,27007,27008],{},[27009,27010],"materials-mesh-transmission-material",{},[606,27012,2768,27013,8235,27015,27018],{},[610,27014,7309],{},[610,27016,27017],{},"\u003CMeshTransmissionMaterial />"," component that produces high-quality glass and transmission effects.",[606,27020,27021,27022,27025],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[610,27023,27024],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[1997,27027,27028],{},[606,27029,25700,27030,25707],{},[1132,27031,27034],{"href":27032,"rel":27033,"target":25705},"https://drei.docs.pmnd.rs/shaders/mesh-transmission-material",[1136],"drei MeshTransmissionMaterial",[496,27036,15],{"id":616},[618,27038,27041],{"className":620,"code":27039,"highlights":27040,"language":625,"meta":568,"style":568},"\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",[700,792,797,819,623,842,853,864],[610,27042,27043,27063,27081,27105,27113,27117,27125,27133,27151,27170,27179,27199,27207,27221,27235,27250,27264,27268,27276,27284],{"__ignoreMap":568},[629,27044,27045,27047,27049,27051,27053,27055,27057,27059,27061],{"class":631,"line":569},[629,27046,635],{"class":634},[629,27048,639],{"class":638},[629,27050,643],{"class":642},[629,27052,646],{"class":642},[629,27054,649],{"class":634},[629,27056,652],{"class":634},[629,27058,656],{"class":655},[629,27060,652],{"class":634},[629,27062,661],{"class":634},[629,27064,27065,27067,27069,27071,27073,27075,27077,27079],{"class":631,"line":570},[629,27066,669],{"class":668},[629,27068,672],{"class":634},[629,27070,707],{"class":675},[629,27072,685],{"class":634},[629,27074,688],{"class":668},[629,27076,691],{"class":634},[629,27078,716],{"class":655},[629,27080,697],{"class":634},[629,27082,27084,27086,27088,27091,27093,27095,27097,27099,27101,27103],{"class":27083,"line":700},[631,665],[629,27085,669],{"class":668},[629,27087,672],{"class":634},[629,27089,27090],{"class":675}," MeshTransmissionMaterial",[629,27092,679],{"class":634},[629,27094,19017],{"class":675},[629,27096,685],{"class":634},[629,27098,688],{"class":668},[629,27100,691],{"class":634},[629,27102,694],{"class":655},[629,27104,697],{"class":634},[629,27106,27107,27109,27111],{"class":631,"line":721},[629,27108,724],{"class":634},[629,27110,639],{"class":638},[629,27112,661],{"class":634},[629,27114,27115],{"class":631,"line":731},[629,27116,734],{"emptyLinePlaceholder":586},[629,27118,27119,27121,27123],{"class":631,"line":737},[629,27120,635],{"class":634},[629,27122,742],{"class":638},[629,27124,661],{"class":634},[629,27126,27127,27129,27131],{"class":631,"line":747},[629,27128,750],{"class":634},[629,27130,753],{"class":638},[629,27132,661],{"class":634},[629,27134,27135,27137,27139,27141,27143,27145,27147,27149],{"class":631,"line":770},[629,27136,773],{"class":634},[629,27138,776],{"class":638},[629,27140,1477],{"class":642},[629,27142,649],{"class":634},[629,27144,652],{"class":634},[629,27146,8378],{"class":655},[629,27148,652],{"class":634},[629,27150,779],{"class":634},[629,27152,27153,27155,27157,27159,27161,27163,27166,27168],{"class":631,"line":782},[629,27154,773],{"class":634},[629,27156,367],{"class":638},[629,27158,19735],{"class":642},[629,27160,649],{"class":634},[629,27162,652],{"class":634},[629,27164,27165],{"class":655},"city",[629,27167,652],{"class":634},[629,27169,779],{"class":634},[629,27171,27173,27175,27177],{"class":27172,"line":792},[631,665],[629,27174,773],{"class":634},[629,27176,848],{"class":638},[629,27178,661],{"class":634},[629,27180,27182,27184,27186,27188,27190,27192,27195,27197],{"class":27181,"line":797},[631,665],[629,27183,845],{"class":634},[629,27185,25928],{"class":638},[629,27187,1951],{"class":642},[629,27189,649],{"class":634},[629,27191,652],{"class":634},[629,27193,27194],{"class":655},"[1, 0.3, 128, 32]",[629,27196,652],{"class":634},[629,27198,779],{"class":634},[629,27200,27202,27204],{"class":27201,"line":819},[631,665],[629,27203,845],{"class":634},[629,27205,27206],{"class":638},"MeshTransmissionMaterial\n",[629,27208,27210,27213,27215,27217,27219],{"class":27209,"line":623},[631,665],[629,27211,27212],{"class":642}," :transmission",[629,27214,649],{"class":634},[629,27216,652],{"class":634},[629,27218,1866],{"class":655},[629,27220,3123],{"class":634},[629,27222,27224,27227,27229,27231,27233],{"class":27223,"line":842},[631,665],[629,27225,27226],{"class":642}," :thickness",[629,27228,649],{"class":634},[629,27230,652],{"class":634},[629,27232,1938],{"class":655},[629,27234,3123],{"class":634},[629,27236,27238,27241,27243,27245,27248],{"class":27237,"line":853},[631,665],[629,27239,27240],{"class":642}," :chromatic-aberration",[629,27242,649],{"class":634},[629,27244,652],{"class":634},[629,27246,27247],{"class":655},"0.03",[629,27249,3123],{"class":634},[629,27251,27253,27256,27258,27260,27262],{"class":27252,"line":864},[631,665],[629,27254,27255],{"class":642}," :resolution",[629,27257,649],{"class":634},[629,27259,652],{"class":634},[629,27261,26056],{"class":655},[629,27263,3123],{"class":634},[629,27265,27266],{"class":631,"line":874},[629,27267,8025],{"class":634},[629,27269,27270,27272,27274],{"class":631,"line":624},[629,27271,887],{"class":634},[629,27273,848],{"class":638},[629,27275,661],{"class":634},[629,27277,27278,27280,27282],{"class":631,"line":894},[629,27279,897],{"class":634},[629,27281,753],{"class":638},[629,27283,661],{"class":634},[629,27285,27286,27288,27290],{"class":631,"line":904},[629,27287,724],{"class":634},[629,27289,742],{"class":638},[629,27291,661],{"class":634},[496,27293,914],{"id":913},[919,27295,27296,27309],{},[922,27297,27298],{},[925,27299,27300,27302,27304,27306],{},[928,27301,930],{"align":989},[928,27303,933],{"align":989},[928,27305,5961],{"align":989},[928,27307,936],{"align":27308},"center",[938,27310,27311,27333,27350,27367,27385,27403,27420,27438,27456,27475,27492,27510,27528,27546,27564,27582,27600,27617,27637,27656,27675,27697],{},[925,27312,27313,27318,27325,27329],{},[943,27314,27315],{"align":989},[610,27316,27317],{},"transmission",[943,27319,27320,27321,27324],{"align":989},"Glass opacity (maps to the internal ",[610,27322,27323],{},"_transmission"," uniform)",[943,27326,27327],{"align":989},[610,27328,5344],{},[943,27330,27331],{"align":27308},[610,27332,1866],{},[925,27334,27335,27339,27342,27346],{},[943,27336,27337],{"align":989},[610,27338,9696],{},[943,27340,27341],{"align":989},"Thickness of the glass volume",[943,27343,27344],{"align":989},[610,27345,5344],{},[943,27347,27348],{"align":27308},[610,27349,957],{},[925,27351,27352,27356,27359,27363],{},[943,27353,27354],{"align":989},[610,27355,19534],{},[943,27357,27358],{"align":989},"Surface roughness",[943,27360,27361],{"align":989},[610,27362,5344],{},[943,27364,27365],{"align":27308},[610,27366,957],{},[925,27368,27369,27374,27377,27381],{},[943,27370,27371],{"align":989},[610,27372,27373],{},"chromaticAberration",[943,27375,27376],{"align":989},"Chromatic aberration intensity",[943,27378,27379],{"align":989},[610,27380,5344],{},[943,27382,27383],{"align":27308},[610,27384,27247],{},[925,27386,27387,27392,27395,27399],{},[943,27388,27389],{"align":989},[610,27390,27391],{},"anisotropicBlur",[943,27393,27394],{"align":989},"Anisotropic blur amount",[943,27396,27397],{"align":989},[610,27398,5344],{},[943,27400,27401],{"align":27308},[610,27402,2155],{},[925,27404,27405,27409,27412,27416],{},[943,27406,27407],{"align":989},[610,27408,26947],{},[943,27410,27411],{"align":989},"Distortion amount",[943,27413,27414],{"align":989},[610,27415,5344],{},[943,27417,27418],{"align":27308},[610,27419,957],{},[925,27421,27422,27427,27430,27434],{},[943,27423,27424],{"align":989},[610,27425,27426],{},"distortionScale",[943,27428,27429],{"align":989},"Scale of the distortion noise",[943,27431,27432],{"align":989},[610,27433,5344],{},[943,27435,27436],{"align":27308},[610,27437,1938],{},[925,27439,27440,27445,27448,27452],{},[943,27441,27442],{"align":989},[610,27443,27444],{},"temporalDistortion",[943,27446,27447],{"align":989},"Animates the distortion over time",[943,27449,27450],{"align":989},[610,27451,5344],{},[943,27453,27454],{"align":27308},[610,27455,957],{},[925,27457,27458,27463,27466,27470],{},[943,27459,27460],{"align":989},[610,27461,27462],{},"ior",[943,27464,27465],{"align":989},"Index of refraction",[943,27467,27468],{"align":989},[610,27469,5344],{},[943,27471,27472],{"align":27308},[610,27473,27474],{},"1.5",[925,27476,27477,27481,27484,27488],{},[943,27478,27479],{"align":989},[610,27480,7539],{},[943,27482,27483],{"align":989},"Base color of the glass",[943,27485,27486],{"align":989},[610,27487,7554],{},[943,27489,27490],{"align":27308},[610,27491,2688],{},[925,27493,27494,27499,27502,27506],{},[943,27495,27496],{"align":989},[610,27497,27498],{},"clearcoat",[943,27500,27501],{"align":989},"Clearcoat layer intensity",[943,27503,27504],{"align":989},[610,27505,5344],{},[943,27507,27508],{"align":27308},[610,27509,957],{},[925,27511,27512,27517,27520,27524],{},[943,27513,27514],{"align":989},[610,27515,27516],{},"clearcoatRoughness",[943,27518,27519],{"align":989},"Clearcoat roughness",[943,27521,27522],{"align":989},[610,27523,5344],{},[943,27525,27526],{"align":27308},[610,27527,957],{},[925,27529,27530,27535,27538,27542],{},[943,27531,27532],{"align":989},[610,27533,27534],{},"attenuationDistance",[943,27536,27537],{"align":989},"Distance at which light is attenuated through the volume",[943,27539,27540],{"align":989},[610,27541,5344],{},[943,27543,27544],{"align":27308},[610,27545,11576],{},[925,27547,27548,27553,27556,27560],{},[943,27549,27550],{"align":989},[610,27551,27552],{},"attenuationColor",[943,27554,27555],{"align":989},"Color the light shifts to as it passes through the volume",[943,27557,27558],{"align":989},[610,27559,7554],{},[943,27561,27562],{"align":27308},[610,27563,2688],{},[925,27565,27566,27571,27574,27578],{},[943,27567,27568],{"align":989},[610,27569,27570],{},"backside",[943,27572,27573],{"align":989},"Render back faces into a separate buffer for proper glass thickness",[943,27575,27576],{"align":989},[610,27577,15629],{},[943,27579,27580],{"align":27308},[610,27581,963],{},[925,27583,27584,27589,27592,27596],{},[943,27585,27586],{"align":989},[610,27587,27588],{},"backsideThickness",[943,27590,27591],{"align":989},"Thickness used during the backside pass",[943,27593,27594],{"align":989},[610,27595,5344],{},[943,27597,27598],{"align":27308},[610,27599,957],{},[925,27601,27602,27606,27609,27613],{},[943,27603,27604],{"align":989},[610,27605,26047],{},[943,27607,27608],{"align":989},"Resolution of the FBO render target in pixels",[943,27610,27611],{"align":989},[610,27612,5344],{},[943,27614,27615],{"align":27308},[610,27616,26728],{},[925,27618,27619,27624,27629,27633],{},[943,27620,27621],{"align":989},[610,27622,27623],{},"backsideResolution",[943,27625,27626,27627],{"align":989},"Resolution of the backside FBO. Defaults to ",[610,27628,26047],{},[943,27630,27631],{"align":989},[610,27632,5344],{},[943,27634,27635],{"align":27308},[610,27636,26047],{},[925,27638,27639,27644,27647,27652],{},[943,27640,27641],{"align":989},[610,27642,27643],{},"background",[943,27645,27646],{"align":989},"Override the scene background during the FBO pass",[943,27648,27649],{"align":989},[610,27650,27651],{},"THREE.Color | null",[943,27653,27654],{"align":27308},[610,27655,1171],{},[925,27657,27658,27663,27666,27671],{},[943,27659,27660],{"align":989},[610,27661,27662],{},"buffer",[943,27664,27665],{"align":989},"Supply your own render-target texture, skipping the internal FBO pass",[943,27667,27668],{"align":989},[610,27669,27670],{},"THREE.Texture | null",[943,27672,27673],{"align":27308},[610,27674,1171],{},[925,27676,27677,27682,27688,27692],{},[943,27678,27679],{"align":989},[610,27680,27681],{},"samples",[943,27683,27684,27685],{"align":989},"Number of refraction samples. ",[1661,27686,27687],{},"Baked at compile time — changing requires remount.",[943,27689,27690],{"align":989},[610,27691,5344],{},[943,27693,27694],{"align":27308},[610,27695,27696],{},"6",[925,27698,27699,27704,27710,27714],{},[943,27700,27701],{"align":989},[610,27702,27703],{},"transmissionSampler",[943,27705,27706,27707],{"align":989},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[1661,27708,27709],{},"Baked at compile time.",[943,27711,27712],{"align":989},[610,27713,15629],{},[943,27715,27716],{"align":27308},[610,27717,963],{},[606,27719,27720,27721,26313],{},"The component extends ",[610,27722,24681],{},[496,27724,25025],{"id":25024},[2205,27726,27727,27736,27743,27751],{},[2208,27728,27729,27730,5603,27732,27735],{},"An ",[610,27731,26222],{},[610,27733,27734],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[2208,27737,27738,3055,27740,27742],{},[610,27739,27681],{},[610,27741,27703],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[2208,27744,16670,27745,27747,27748,27750],{},[610,27746,27570],{}," with a non-zero ",[610,27749,27588],{}," for more convincing thick-glass effects.",[2208,27752,27753,27754,27756,27757,27760],{},"Lower ",[610,27755,26047],{}," (e.g. ",[610,27758,27759],{},"128",") improves performance at the cost of refraction sharpness.",[1319,27762,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":27764},[27765,27766,27767],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":25024,"depth":570,"text":25025},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":191,"description":27768},"MSm1cDIVGWOO8lvYX_2hfQL4QLQbohqGi_4-iSPYgOA",{"id":27773,"title":195,"body":27774,"description":28052,"extension":583,"links":584,"meta":28053,"navigation":586,"path":196,"seo":28054,"stem":197,"__hash__":28055},"docs/2.api/4.materials/point-material.md",{"type":493,"value":27775,"toc":28048},[27776,27781,27791,27796,27798,28030,28032,28046],[2287,27777,27778],{},[27779,27780],"materials-point-material",{},[606,27782,27783,27786,27787,27790],{},[610,27784,27785],{},"\u003CPointMaterial />"," extends ",[610,27788,27789],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3191,27792,27793],{},[606,27794,27795],{},"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.",[496,27797,15],{"id":616},[618,27799,27802],{"className":620,"code":27800,"highlights":27801,"language":625,"meta":568,"style":568},"\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",[700,819,623,842],[610,27803,27804,27824,27842,27866,27874,27878,27886,27894,27922,27930,27939,27959,27967,27981,27994,27998,28006,28014,28022],{"__ignoreMap":568},[629,27805,27806,27808,27810,27812,27814,27816,27818,27820,27822],{"class":631,"line":569},[629,27807,635],{"class":634},[629,27809,639],{"class":638},[629,27811,643],{"class":642},[629,27813,646],{"class":642},[629,27815,649],{"class":634},[629,27817,652],{"class":634},[629,27819,656],{"class":655},[629,27821,652],{"class":634},[629,27823,661],{"class":634},[629,27825,27826,27828,27830,27832,27834,27836,27838,27840],{"class":631,"line":570},[629,27827,669],{"class":668},[629,27829,672],{"class":634},[629,27831,707],{"class":675},[629,27833,685],{"class":634},[629,27835,688],{"class":668},[629,27837,691],{"class":634},[629,27839,716],{"class":655},[629,27841,697],{"class":634},[629,27843,27845,27847,27849,27852,27854,27856,27858,27860,27862,27864],{"class":27844,"line":700},[631,665],[629,27846,669],{"class":668},[629,27848,672],{"class":634},[629,27850,27851],{"class":675}," PointMaterial",[629,27853,679],{"class":634},[629,27855,682],{"class":675},[629,27857,685],{"class":634},[629,27859,688],{"class":668},[629,27861,691],{"class":634},[629,27863,694],{"class":655},[629,27865,697],{"class":634},[629,27867,27868,27870,27872],{"class":631,"line":721},[629,27869,724],{"class":634},[629,27871,639],{"class":638},[629,27873,661],{"class":634},[629,27875,27876],{"class":631,"line":731},[629,27877,734],{"emptyLinePlaceholder":586},[629,27879,27880,27882,27884],{"class":631,"line":737},[629,27881,635],{"class":634},[629,27883,742],{"class":638},[629,27885,661],{"class":634},[629,27887,27888,27890,27892],{"class":631,"line":747},[629,27889,750],{"class":634},[629,27891,753],{"class":638},[629,27893,661],{"class":634},[629,27895,27896,27898,27900,27902,27904,27906,27908,27910,27912,27914,27916,27918,27920],{"class":631,"line":770},[629,27897,773],{"class":634},[629,27899,776],{"class":638},[629,27901,1477],{"class":642},[629,27903,649],{"class":634},[629,27905,652],{"class":634},[629,27907,11342],{"class":655},[629,27909,652],{"class":634},[629,27911,8383],{"class":642},[629,27913,649],{"class":634},[629,27915,652],{"class":634},[629,27917,8390],{"class":655},[629,27919,652],{"class":634},[629,27921,779],{"class":634},[629,27923,27924,27926,27928],{"class":631,"line":782},[629,27925,773],{"class":634},[629,27927,787],{"class":638},[629,27929,779],{"class":634},[629,27931,27932,27934,27937],{"class":631,"line":792},[629,27933,773],{"class":634},[629,27935,27936],{"class":638},"TresPoints",[629,27938,661],{"class":634},[629,27940,27941,27943,27946,27948,27950,27952,27955,27957],{"class":631,"line":797},[629,27942,845],{"class":634},[629,27944,27945],{"class":638},"TresIcosahedronGeometry",[629,27947,1951],{"class":642},[629,27949,649],{"class":634},[629,27951,652],{"class":634},[629,27953,27954],{"class":655},"[1, 4]",[629,27956,652],{"class":634},[629,27958,779],{"class":634},[629,27960,27962,27964],{"class":27961,"line":819},[631,665],[629,27963,845],{"class":634},[629,27965,27966],{"class":638},"PointMaterial\n",[629,27968,27970,27973,27975,27977,27979],{"class":27969,"line":623},[631,665],[629,27971,27972],{"class":642}," :size",[629,27974,649],{"class":634},[629,27976,652],{"class":634},[629,27978,10771],{"class":655},[629,27980,3123],{"class":634},[629,27982,27984,27986,27988,27990,27992],{"class":27983,"line":842},[631,665],[629,27985,26541],{"class":642},[629,27987,649],{"class":634},[629,27989,652],{"class":634},[629,27991,11389],{"class":655},[629,27993,3123],{"class":634},[629,27995,27996],{"class":631,"line":853},[629,27997,8025],{"class":634},[629,27999,28000,28002,28004],{"class":631,"line":864},[629,28001,887],{"class":634},[629,28003,27936],{"class":638},[629,28005,661],{"class":634},[629,28007,28008,28010,28012],{"class":631,"line":874},[629,28009,773],{"class":634},[629,28011,8448],{"class":638},[629,28013,779],{"class":634},[629,28015,28016,28018,28020],{"class":631,"line":624},[629,28017,897],{"class":634},[629,28019,753],{"class":638},[629,28021,661],{"class":634},[629,28023,28024,28026,28028],{"class":631,"line":894},[629,28025,724],{"class":634},[629,28027,742],{"class":638},[629,28029,661],{"class":634},[496,28031,914],{"id":913},[606,28033,28034,28035,28042,28043,1138],{},"All ",[1132,28036,28039,28041],{"href":28037,"rel":28038},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1136],[610,28040,27789],{}," properties"," are inherited by ",[610,28044,28045],{},"PointMaterial",[1319,28047,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":28049},[28050,28051],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":195,"description":28052},"KQarQWFbe_ZShVTsHEKL-hBviOOcUTm-CtCNsZFQ3jo",{"id":28057,"title":199,"body":28058,"description":28371,"extension":583,"links":584,"meta":28372,"navigation":586,"path":200,"seo":28373,"stem":201,"__hash__":28374},"docs/2.api/4.materials/wobble-material.md",{"type":493,"value":28059,"toc":28367},[28060,28065,28073,28075,28317,28319,28360,28365],[600,28061,28062],{},[28063,28064],"materials-wobble-material",{},[606,28066,2768,28067,8235,28069,28072],{},[610,28068,7309],{},[610,28070,28071],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[496,28074,15],{"id":616},[618,28076,28079],{"className":620,"code":28077,"highlights":28078,"language":625,"meta":568,"style":568},"\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",[700,797,819,623,842,853],[610,28080,28081,28101,28119,28139,28147,28151,28159,28167,28195,28203,28211,28219,28233,28247,28262,28267,28275,28283,28301,28309],{"__ignoreMap":568},[629,28082,28083,28085,28087,28089,28091,28093,28095,28097,28099],{"class":631,"line":569},[629,28084,635],{"class":634},[629,28086,639],{"class":638},[629,28088,643],{"class":642},[629,28090,646],{"class":642},[629,28092,649],{"class":634},[629,28094,652],{"class":634},[629,28096,656],{"class":655},[629,28098,652],{"class":634},[629,28100,661],{"class":634},[629,28102,28103,28105,28107,28109,28111,28113,28115,28117],{"class":631,"line":570},[629,28104,669],{"class":668},[629,28106,672],{"class":634},[629,28108,707],{"class":675},[629,28110,685],{"class":634},[629,28112,688],{"class":668},[629,28114,691],{"class":634},[629,28116,716],{"class":655},[629,28118,697],{"class":634},[629,28120,28122,28124,28126,28129,28131,28133,28135,28137],{"class":28121,"line":700},[631,665],[629,28123,669],{"class":668},[629,28125,672],{"class":634},[629,28127,28128],{"class":675}," MeshWobbleMaterial",[629,28130,685],{"class":634},[629,28132,688],{"class":668},[629,28134,691],{"class":634},[629,28136,694],{"class":655},[629,28138,697],{"class":634},[629,28140,28141,28143,28145],{"class":631,"line":721},[629,28142,724],{"class":634},[629,28144,639],{"class":638},[629,28146,661],{"class":634},[629,28148,28149],{"class":631,"line":731},[629,28150,734],{"emptyLinePlaceholder":586},[629,28152,28153,28155,28157],{"class":631,"line":737},[629,28154,635],{"class":634},[629,28156,742],{"class":638},[629,28158,661],{"class":634},[629,28160,28161,28163,28165],{"class":631,"line":747},[629,28162,750],{"class":634},[629,28164,753],{"class":638},[629,28166,661],{"class":634},[629,28168,28169,28171,28173,28175,28177,28179,28181,28183,28185,28187,28189,28191,28193],{"class":631,"line":770},[629,28170,773],{"class":634},[629,28172,776],{"class":638},[629,28174,1477],{"class":642},[629,28176,649],{"class":634},[629,28178,652],{"class":634},[629,28180,11342],{"class":655},[629,28182,652],{"class":634},[629,28184,8383],{"class":642},[629,28186,649],{"class":634},[629,28188,652],{"class":634},[629,28190,8390],{"class":655},[629,28192,652],{"class":634},[629,28194,779],{"class":634},[629,28196,28197,28199,28201],{"class":631,"line":782},[629,28198,773],{"class":634},[629,28200,848],{"class":638},[629,28202,661],{"class":634},[629,28204,28205,28207,28209],{"class":631,"line":792},[629,28206,845],{"class":634},[629,28208,9924],{"class":638},[629,28210,779],{"class":634},[629,28212,28214,28216],{"class":28213,"line":797},[631,665],[629,28215,845],{"class":634},[629,28217,28218],{"class":638},"MeshWobbleMaterial\n",[629,28220,28222,28224,28226,28228,28231],{"class":28221,"line":819},[631,665],[629,28223,26541],{"class":642},[629,28225,649],{"class":634},[629,28227,652],{"class":634},[629,28229,28230],{"class":655},"#f25042",[629,28232,3123],{"class":634},[629,28234,28236,28239,28241,28243,28245],{"class":28235,"line":623},[631,665],[629,28237,28238],{"class":642}," :speed",[629,28240,649],{"class":634},[629,28242,652],{"class":634},[629,28244,1866],{"class":655},[629,28246,3123],{"class":634},[629,28248,28250,28253,28255,28257,28260],{"class":28249,"line":842},[631,665],[629,28251,28252],{"class":642}," :factor",[629,28254,649],{"class":634},[629,28256,652],{"class":634},[629,28258,28259],{"class":655},"0.6",[629,28261,3123],{"class":634},[629,28263,28265],{"class":28264,"line":853},[631,665],[629,28266,8025],{"class":634},[629,28268,28269,28271,28273],{"class":631,"line":864},[629,28270,887],{"class":634},[629,28272,848],{"class":638},[629,28274,661],{"class":634},[629,28276,28277,28279,28281],{"class":631,"line":874},[629,28278,773],{"class":634},[629,28280,8448],{"class":638},[629,28282,779],{"class":634},[629,28284,28285,28287,28289,28291,28293,28295,28297,28299],{"class":631,"line":624},[629,28286,773],{"class":634},[629,28288,8467],{"class":638},[629,28290,1477],{"class":642},[629,28292,649],{"class":634},[629,28294,652],{"class":634},[629,28296,11424],{"class":655},[629,28298,652],{"class":634},[629,28300,779],{"class":634},[629,28302,28303,28305,28307],{"class":631,"line":894},[629,28304,897],{"class":634},[629,28306,753],{"class":638},[629,28308,661],{"class":634},[629,28310,28311,28313,28315],{"class":631,"line":904},[629,28312,724],{"class":634},[629,28314,742],{"class":638},[629,28316,661],{"class":634},[496,28318,914],{"id":913},[919,28320,28321,28331],{},[922,28322,28323],{},[925,28324,28325,28327,28329],{},[928,28326,930],{"align":989},[928,28328,933],{"align":989},[928,28330,936],{},[938,28332,28333,28346],{},[925,28334,28335,28339,28342],{},[943,28336,28337],{"align":989},[1661,28338,8548],{},[943,28340,28341],{"align":989},"how fast the wobble effect would be.",[943,28343,28344],{},[610,28345,1866],{},[925,28347,28348,28353,28356],{},[943,28349,28350],{"align":989},[1661,28351,28352],{},"factor",[943,28354,28355],{"align":989},"how strong the wobble effect will deform the geometry",[943,28357,28358],{},[610,28359,1866],{},[606,28361,28362,28363,24682],{},"This material extends ",[610,28364,26312],{},[1319,28366,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":28368},[28369,28370],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":199,"description":28371},"FcmdcQOb0wna_07P1wVmXmyOFm6O2rnxJE44Peni4w8",[28376,28560,29066,29236,29414,29801,30038,30207,30749,30917,31515,31682,31857,32217,32394,32556,32717,32911,33087,33491,33659,33850,34039],{"id":28377,"title":209,"body":28378,"description":28556,"extension":583,"links":584,"meta":28557,"navigation":586,"path":210,"seo":28558,"stem":211,"__hash__":28559},"docs/2.api/5.shapes/box.md",{"type":493,"value":28379,"toc":28553},[28380,28385,28396,28404,28411,28413,28550],[600,28381,28382],{},[28383,28384],"shapes-box",{},[606,28386,2768,28387,8235,28389,28392,28393,1138],{},[610,28388,7309],{},[610,28390,28391],{},"\u003CBox />"," component that serves as a short-cut for a ",[610,28394,28395],{},"BoxGeometry",[618,28397,28402],{"className":28398,"code":28400,"language":28401},[28399],"language-text","args: [\n width: number,\n height: number,\n depth: number,\n widthSegments: number,\n heightSegments: number,\n depthSegments: number\n]\n","text",[610,28403,28400],{"__ignoreMap":568},[606,28405,28406,28407],{},"Reference: ",[1132,28408,28395],{"href":28409,"rel":28410},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1136],[496,28412,15],{"id":616},[618,28414,28416],{"className":620,"code":28415,"language":625,"meta":568,"style":568},"\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",[610,28417,28418,28461,28465,28470,28537,28542],{"__ignoreMap":568},[629,28419,28420,28422,28424,28426,28429,28431,28433,28435,28437,28439,28441,28443,28445,28447,28449,28451,28453,28455,28457,28459],{"class":631,"line":569},[629,28421,635],{"class":634},[629,28423,209],{"class":638},[629,28425,3021],{"class":634},[629,28427,28428],{"class":642},"args",[629,28430,649],{"class":634},[629,28432,652],{"class":634},[629,28434,19405],{"class":675},[629,28436,1866],{"class":2493},[629,28438,679],{"class":634},[629,28440,2553],{"class":2493},[629,28442,679],{"class":634},[629,28444,2553],{"class":2493},[629,28446,2506],{"class":675},[629,28448,652],{"class":634},[629,28450,2681],{"class":642},[629,28452,649],{"class":634},[629,28454,652],{"class":634},[629,28456,11389],{"class":655},[629,28458,652],{"class":634},[629,28460,779],{"class":634},[629,28462,28463],{"class":631,"line":570},[629,28464,734],{"emptyLinePlaceholder":586},[629,28466,28467],{"class":631,"line":700},[629,28468,28469],{"class":675},"// Box with a custom material transformations\n",[629,28471,28472,28474,28476,28478,28480,28482,28484,28486,28488,28490,28492,28494,28496,28498,28500,28502,28504,28506,28508,28510,28512,28514,28516,28518,28520,28522,28524,28527,28529,28531,28533,28535],{"class":631,"line":721},[629,28473,635],{"class":634},[629,28475,209],{"class":638},[629,28477,3864],{"class":642},[629,28479,649],{"class":634},[629,28481,652],{"class":634},[629,28483,14398],{"class":655},[629,28485,652],{"class":634},[629,28487,3021],{"class":634},[629,28489,28428],{"class":642},[629,28491,649],{"class":634},[629,28493,652],{"class":634},[629,28495,19405],{"class":675},[629,28497,1866],{"class":2493},[629,28499,679],{"class":634},[629,28501,2553],{"class":2493},[629,28503,679],{"class":634},[629,28505,2553],{"class":2493},[629,28507,2506],{"class":675},[629,28509,652],{"class":634},[629,28511,3021],{"class":634},[629,28513,4122],{"class":642},[629,28515,649],{"class":634},[629,28517,652],{"class":634},[629,28519,19405],{"class":675},[629,28521,957],{"class":2493},[629,28523,679],{"class":634},[629,28525,28526],{"class":2493}," 4",[629,28528,679],{"class":634},[629,28530,2498],{"class":2493},[629,28532,2506],{"class":675},[629,28534,652],{"class":634},[629,28536,661],{"class":634},[629,28538,28539],{"class":631,"line":731},[629,28540,28541],{"class":675}," \u003CTresMeshToonMaterial color=\"orange\" />\n",[629,28543,28544,28546,28548],{"class":631,"line":737},[629,28545,724],{"class":634},[629,28547,209],{"class":638},[629,28549,661],{"class":634},[1319,28551,28552],{},"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":568,"searchDepth":569,"depth":570,"links":28554},[28555],{"id":616,"depth":570,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":209,"description":28556},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":28561,"title":213,"body":28562,"description":29062,"extension":583,"links":584,"meta":29063,"navigation":586,"path":214,"seo":29064,"stem":215,"__hash__":29065},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":493,"value":28563,"toc":29058},[28564,28569,28577,28600,28602,28824,28826,29056],[2287,28565,28566],{},[28567,28568],"shapes-catmull-rom-curve3",{},[606,28570,2768,28571,8235,28573,28576],{},[610,28572,7309],{},[610,28574,28575],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[606,28578,28579,28581,28582,28589,28590,28593,28594],{},[610,28580,28575],{}," wraps ",[1132,28583,28586,28587],{"href":28584,"rel":28585},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1136],"Three.js's ",[610,28588,213],{}," functionality, but applies it to Cientos' ",[610,28591,28592],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1132,28595,28597,28598,1138],{"href":28596},"line2#props","all the props from ",[610,28599,28592],{},[496,28601,15],{"id":616},[618,28603,28606],{"className":620,"code":28604,"highlights":28605,"language":625,"meta":568,"style":568},"\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",[700,792,797,819,623,842],[610,28607,28608,28628,28646,28666,28685,28693,28697,28705,28713,28731,28739,28754,28768,28782,28796,28800,28808,28816],{"__ignoreMap":568},[629,28609,28610,28612,28614,28616,28618,28620,28622,28624,28626],{"class":631,"line":569},[629,28611,635],{"class":634},[629,28613,639],{"class":638},[629,28615,643],{"class":642},[629,28617,646],{"class":642},[629,28619,649],{"class":634},[629,28621,652],{"class":634},[629,28623,656],{"class":655},[629,28625,652],{"class":634},[629,28627,661],{"class":634},[629,28629,28630,28632,28634,28636,28638,28640,28642,28644],{"class":631,"line":570},[629,28631,669],{"class":668},[629,28633,672],{"class":634},[629,28635,707],{"class":675},[629,28637,685],{"class":634},[629,28639,688],{"class":668},[629,28641,691],{"class":634},[629,28643,716],{"class":655},[629,28645,697],{"class":634},[629,28647,28649,28651,28653,28656,28658,28660,28662,28664],{"class":28648,"line":700},[631,665],[629,28650,669],{"class":668},[629,28652,672],{"class":634},[629,28654,28655],{"class":675}," CatmullRomCurve3",[629,28657,685],{"class":634},[629,28659,688],{"class":668},[629,28661,691],{"class":634},[629,28663,694],{"class":655},[629,28665,697],{"class":634},[629,28667,28668,28670,28672,28675,28677,28679,28681,28683],{"class":631,"line":721},[629,28669,669],{"class":668},[629,28671,672],{"class":634},[629,28673,28674],{"class":675}," Vector3",[629,28676,685],{"class":634},[629,28678,688],{"class":668},[629,28680,691],{"class":634},[629,28682,4618],{"class":655},[629,28684,697],{"class":634},[629,28686,28687,28689,28691],{"class":631,"line":731},[629,28688,724],{"class":634},[629,28690,639],{"class":638},[629,28692,661],{"class":634},[629,28694,28695],{"class":631,"line":737},[629,28696,734],{"emptyLinePlaceholder":586},[629,28698,28699,28701,28703],{"class":631,"line":747},[629,28700,635],{"class":634},[629,28702,742],{"class":638},[629,28704,661],{"class":634},[629,28706,28707,28709,28711],{"class":631,"line":770},[629,28708,750],{"class":634},[629,28710,753],{"class":638},[629,28712,661],{"class":634},[629,28714,28715,28717,28719,28721,28723,28725,28727,28729],{"class":631,"line":782},[629,28716,773],{"class":634},[629,28718,776],{"class":638},[629,28720,1477],{"class":642},[629,28722,649],{"class":634},[629,28724,652],{"class":634},[629,28726,11342],{"class":655},[629,28728,652],{"class":634},[629,28730,779],{"class":634},[629,28732,28734,28736],{"class":28733,"line":792},[631,665],[629,28735,773],{"class":634},[629,28737,28738],{"class":638},"CatmullRomCurve3\n",[629,28740,28742,28745,28747,28749,28752],{"class":28741,"line":797},[631,665],[629,28743,28744],{"class":642}," :points",[629,28746,649],{"class":634},[629,28748,652],{"class":634},[629,28750,28751],{"class":655},"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]",[629,28753,3123],{"class":634},[629,28755,28757,28760,28762,28764,28766],{"class":28756,"line":819},[631,665],[629,28758,28759],{"class":642}," :segments",[629,28761,649],{"class":634},[629,28763,652],{"class":634},[629,28765,9437],{"class":655},[629,28767,3123],{"class":634},[629,28769,28771,28774,28776,28778,28780],{"class":28770,"line":623},[631,665],[629,28772,28773],{"class":642}," color",[629,28775,649],{"class":634},[629,28777,652],{"class":634},[629,28779,11389],{"class":655},[629,28781,3123],{"class":634},[629,28783,28785,28788,28790,28792,28794],{"class":28784,"line":842},[631,665],[629,28786,28787],{"class":642}," :line-width",[629,28789,649],{"class":634},[629,28791,652],{"class":634},[629,28793,19465],{"class":655},[629,28795,3123],{"class":634},[629,28797,28798],{"class":631,"line":853},[629,28799,15338],{"class":634},[629,28801,28802,28804,28806],{"class":631,"line":864},[629,28803,773],{"class":634},[629,28805,8448],{"class":638},[629,28807,779],{"class":634},[629,28809,28810,28812,28814],{"class":631,"line":874},[629,28811,897],{"class":634},[629,28813,753],{"class":638},[629,28815,661],{"class":634},[629,28817,28818,28820,28822],{"class":631,"line":624},[629,28819,724],{"class":634},[629,28821,742],{"class":638},[629,28823,661],{"class":634},[496,28825,914],{"id":913},[919,28827,28828,28840],{},[922,28829,28830],{},[925,28831,28832,28834,28836,28838],{},[928,28833,930],{},[928,28835,5961],{},[928,28837,933],{},[928,28839,936],{},[938,28841,28842,28857,28872,28886,28902,28916,28931,28945,28959,28972,28986,29000,29014,29028,29042],{},[925,28843,28844,28847,28852,28855],{},[943,28845,28846],{},"points",[943,28848,28849],{},[610,28850,28851],{},"Array\u003CVector3 | [number, number, number]>",[943,28853,28854],{},"Curve's control points",[943,28856],{},[925,28858,28859,28862,28866,28869],{},[943,28860,28861],{},"segments",[943,28863,28864],{},[610,28865,5344],{},[943,28867,28868],{},"Number of segments in the resulting curve (higher = smoother)",[943,28870,28871],{},"20",[925,28873,28874,28877,28881,28884],{},[943,28875,28876],{},"closed",[943,28878,28879],{},[610,28880,15629],{},[943,28882,28883],{},"The curve will loop back onto itself when this is true.",[943,28885,963],{},[925,28887,28888,28891,28896,28899],{},[943,28889,28890],{},"curveType",[943,28892,28893],{},[610,28894,28895],{},"'centripetal' | 'chordal' | 'catmullrom'",[943,28897,28898],{},"Curve type",[943,28900,28901],{},"'centripetal'",[925,28903,28904,28907,28911,28914],{},[943,28905,28906],{},"tension",[943,28908,28909],{},[610,28910,5344],{},[943,28912,28913],{},"Catmullrom's tension, when curveType is 'catmullrom'",[943,28915,1938],{},[925,28917,28918,28921,28926,28929],{},[943,28919,28920],{},"vertexColors",[943,28922,28923],{},[610,28924,28925],{},"TresColor[]",[943,28927,28928],{},"Vertex colors, if using",[943,28930,3648],{},[925,28932,28933,28935,28939,28942],{},[943,28934,7539],{},[943,28936,28937],{},[610,28938,7554],{},[943,28940,28941],{},"Color for the line – multiplies vertex colors",[943,28943,28944],{},"'white'",[925,28946,28947,28950,28954,28957],{},[943,28948,28949],{},"lineWidth",[943,28951,28952],{},[610,28953,5344],{},[943,28955,28956],{},"Width of the line – in world units with size attenuation, pixels otherwise",[943,28958,1866],{},[925,28960,28961,28963,28967,28970],{},[943,28962,26066],{},[943,28964,28965],{},[610,28966,15629],{},[943,28968,28969],{},"Whether the line width is in world units or pixels",[943,28971,963],{},[925,28973,28974,28977,28981,28984],{},[943,28975,28976],{},"alphaToCoverage",[943,28978,28979],{},[610,28980,15629],{},[943,28982,28983],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[943,28985,963],{},[925,28987,28988,28991,28995,28998],{},[943,28989,28990],{},"dashed",[943,28992,28993],{},[610,28994,15629],{},[943,28996,28997],{},"Whether the line is dashed",[943,28999,963],{},[925,29001,29002,29005,29009,29012],{},[943,29003,29004],{},"dashSize",[943,29006,29007],{},[610,29008,5344],{},[943,29010,29011],{},"Dash size",[943,29013,1866],{},[925,29015,29016,29019,29023,29026],{},[943,29017,29018],{},"gapSize",[943,29020,29021],{},[610,29022,5344],{},[943,29024,29025],{},"Gap size in dashed line",[943,29027,1866],{},[925,29029,29030,29033,29037,29040],{},[943,29031,29032],{},"dashScale",[943,29034,29035],{},[610,29036,5344],{},[943,29038,29039],{},"Scale of the dashes/gaps",[943,29041,1866],{},[925,29043,29044,29047,29051,29054],{},[943,29045,29046],{},"dashOffset",[943,29048,29049],{},[610,29050,5344],{},[943,29052,29053],{},"Dash offset",[943,29055,957],{},[1319,29057,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":29059},[29060,29061],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":213,"description":29062},"qeOP9WBmpA_w2Yd5qceOSBKv-l797GiqondBBAasbSM",{"id":29067,"title":217,"body":29068,"description":29232,"extension":583,"links":584,"meta":29233,"navigation":586,"path":218,"seo":29234,"stem":219,"__hash__":29235},"docs/2.api/5.shapes/circle.md",{"type":493,"value":29069,"toc":29229},[29070,29075,29085,29091,29097,29099,29227],[600,29071,29072],{},[29073,29074],"shapes-circle",{},[606,29076,2768,29077,8235,29079,28392,29082,1138],{},[610,29078,7309],{},[610,29080,29081],{},"\u003CCircle />",[610,29083,29084],{},"CircleGeometry",[618,29086,29089],{"className":29087,"code":29088,"language":28401},[28399],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[610,29090,29088],{"__ignoreMap":568},[606,29092,28406,29093],{},[1132,29094,29084],{"href":29095,"rel":29096},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1136],[496,29098,15],{"id":616},[618,29100,29102],{"className":620,"code":29101,"language":625,"meta":568,"style":568},"\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",[610,29103,29104,29143,29147,29152,29215,29219],{"__ignoreMap":568},[629,29105,29106,29108,29110,29112,29114,29116,29118,29120,29122,29124,29127,29129,29131,29133,29135,29137,29139,29141],{"class":631,"line":569},[629,29107,635],{"class":634},[629,29109,217],{"class":638},[629,29111,3021],{"class":634},[629,29113,28428],{"class":642},[629,29115,649],{"class":634},[629,29117,652],{"class":634},[629,29119,19405],{"class":675},[629,29121,1866],{"class":2493},[629,29123,679],{"class":634},[629,29125,29126],{"class":2493}," 32",[629,29128,2506],{"class":675},[629,29130,652],{"class":634},[629,29132,2681],{"class":642},[629,29134,649],{"class":634},[629,29136,652],{"class":634},[629,29138,11389],{"class":655},[629,29140,652],{"class":634},[629,29142,779],{"class":634},[629,29144,29145],{"class":631,"line":570},[629,29146,734],{"emptyLinePlaceholder":586},[629,29148,29149],{"class":631,"line":700},[629,29150,29151],{"class":675},"// Circle with a custom material transformations\n",[629,29153,29154,29156,29158,29160,29162,29164,29167,29169,29171,29173,29175,29177,29179,29181,29183,29185,29187,29189,29191,29193,29195,29197,29199,29201,29203,29205,29207,29209,29211,29213],{"class":631,"line":721},[629,29155,635],{"class":634},[629,29157,217],{"class":638},[629,29159,3864],{"class":642},[629,29161,649],{"class":634},[629,29163,652],{"class":634},[629,29165,29166],{"class":655},"circleRef",[629,29168,652],{"class":634},[629,29170,3021],{"class":634},[629,29172,28428],{"class":642},[629,29174,649],{"class":634},[629,29176,652],{"class":634},[629,29178,19405],{"class":675},[629,29180,1866],{"class":2493},[629,29182,679],{"class":634},[629,29184,29126],{"class":2493},[629,29186,2506],{"class":675},[629,29188,652],{"class":634},[629,29190,3021],{"class":634},[629,29192,4122],{"class":642},[629,29194,649],{"class":634},[629,29196,652],{"class":634},[629,29198,19405],{"class":675},[629,29200,957],{"class":2493},[629,29202,679],{"class":634},[629,29204,2498],{"class":2493},[629,29206,679],{"class":634},[629,29208,2498],{"class":2493},[629,29210,2506],{"class":675},[629,29212,652],{"class":634},[629,29214,661],{"class":634},[629,29216,29217],{"class":631,"line":731},[629,29218,28541],{"class":675},[629,29220,29221,29223,29225],{"class":631,"line":737},[629,29222,724],{"class":634},[629,29224,217],{"class":638},[629,29226,661],{"class":634},[1319,29228,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":29230},[29231],{"id":616,"depth":570,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":29232},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":29237,"title":221,"body":29238,"description":29410,"extension":583,"links":584,"meta":29411,"navigation":586,"path":222,"seo":29412,"stem":223,"__hash__":29413},"docs/2.api/5.shapes/cone.md",{"type":493,"value":29239,"toc":29407},[29240,29245,29255,29261,29267,29269,29405],[600,29241,29242],{},[29243,29244],"shapes-cone",{},[606,29246,2768,29247,8235,29249,28392,29252,1138],{},[610,29248,7309],{},[610,29250,29251],{},"\u003CCone />",[610,29253,29254],{},"ConeGeometry",[618,29256,29259],{"className":29257,"code":29258,"language":28401},[28399],"args: [\n radius: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[610,29260,29258],{"__ignoreMap":568},[606,29262,28406,29263],{},[1132,29264,29254],{"href":29265,"rel":29266},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1136],[496,29268,15],{"id":616},[618,29270,29272],{"className":620,"code":29271,"language":625,"meta":568,"style":568},"\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",[610,29273,29274,29317,29321,29326,29393,29397],{"__ignoreMap":568},[629,29275,29276,29278,29280,29282,29284,29286,29288,29290,29292,29294,29296,29298,29301,29303,29305,29307,29309,29311,29313,29315],{"class":631,"line":569},[629,29277,635],{"class":634},[629,29279,221],{"class":638},[629,29281,3021],{"class":634},[629,29283,28428],{"class":642},[629,29285,649],{"class":634},[629,29287,652],{"class":634},[629,29289,19405],{"class":675},[629,29291,1866],{"class":2493},[629,29293,679],{"class":634},[629,29295,2553],{"class":2493},[629,29297,679],{"class":634},[629,29299,29300],{"class":2493}," 8",[629,29302,2506],{"class":675},[629,29304,652],{"class":634},[629,29306,2681],{"class":642},[629,29308,649],{"class":634},[629,29310,652],{"class":634},[629,29312,11389],{"class":655},[629,29314,652],{"class":634},[629,29316,779],{"class":634},[629,29318,29319],{"class":631,"line":570},[629,29320,734],{"emptyLinePlaceholder":586},[629,29322,29323],{"class":631,"line":700},[629,29324,29325],{"class":675},"// Cone with a custom material transformations\n",[629,29327,29328,29330,29332,29334,29336,29338,29341,29343,29345,29347,29349,29351,29353,29355,29357,29359,29361,29363,29365,29367,29369,29371,29373,29375,29377,29379,29381,29383,29385,29387,29389,29391],{"class":631,"line":721},[629,29329,635],{"class":634},[629,29331,221],{"class":638},[629,29333,3864],{"class":642},[629,29335,649],{"class":634},[629,29337,652],{"class":634},[629,29339,29340],{"class":655},"coneRef",[629,29342,652],{"class":634},[629,29344,3021],{"class":634},[629,29346,28428],{"class":642},[629,29348,649],{"class":634},[629,29350,652],{"class":634},[629,29352,19405],{"class":675},[629,29354,1866],{"class":2493},[629,29356,679],{"class":634},[629,29358,2553],{"class":2493},[629,29360,679],{"class":634},[629,29362,29300],{"class":2493},[629,29364,2506],{"class":675},[629,29366,652],{"class":634},[629,29368,3021],{"class":634},[629,29370,4122],{"class":642},[629,29372,649],{"class":634},[629,29374,652],{"class":634},[629,29376,19405],{"class":675},[629,29378,957],{"class":2493},[629,29380,679],{"class":634},[629,29382,28526],{"class":2493},[629,29384,679],{"class":634},[629,29386,2498],{"class":2493},[629,29388,2506],{"class":675},[629,29390,652],{"class":634},[629,29392,661],{"class":634},[629,29394,29395],{"class":631,"line":731},[629,29396,28541],{"class":675},[629,29398,29399,29401,29403],{"class":631,"line":737},[629,29400,724],{"class":634},[629,29402,221],{"class":638},[629,29404,661],{"class":634},[1319,29406,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":29408},[29409],{"id":616,"depth":570,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":221,"description":29410},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":29415,"title":225,"body":29416,"description":29797,"extension":583,"links":584,"meta":29798,"navigation":586,"path":226,"seo":29799,"stem":227,"__hash__":29800},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":493,"value":29417,"toc":29793},[29418,29423,29432,29434,29687,29689,29698,29791],[2287,29419,29420],{},[29421,29422],"shapes-cubic-bezier-line",{},[606,29424,29425,29428,29429,29431],{},[610,29426,29427],{},"\u003CCubicBezierLine />"," renders a ",[610,29430,28592],{}," between start and end points, with additional 2 control points.",[496,29433,15],{"id":616},[618,29435,29437],{"className":620,"code":29436,"language":625,"meta":568,"style":568},"\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",[610,29438,29439,29459,29477,29496,29514,29522,29526,29534,29542,29560,29567,29581,29595,29609,29623,29635,29647,29659,29663,29671,29679],{"__ignoreMap":568},[629,29440,29441,29443,29445,29447,29449,29451,29453,29455,29457],{"class":631,"line":569},[629,29442,635],{"class":634},[629,29444,639],{"class":638},[629,29446,643],{"class":642},[629,29448,646],{"class":642},[629,29450,649],{"class":634},[629,29452,652],{"class":634},[629,29454,656],{"class":655},[629,29456,652],{"class":634},[629,29458,661],{"class":634},[629,29460,29461,29463,29465,29467,29469,29471,29473,29475],{"class":631,"line":570},[629,29462,669],{"class":668},[629,29464,672],{"class":634},[629,29466,707],{"class":675},[629,29468,685],{"class":634},[629,29470,688],{"class":668},[629,29472,691],{"class":634},[629,29474,716],{"class":655},[629,29476,697],{"class":634},[629,29478,29479,29481,29483,29486,29488,29490,29492,29494],{"class":631,"line":700},[629,29480,669],{"class":668},[629,29482,672],{"class":634},[629,29484,29485],{"class":675}," CubicBezierLine",[629,29487,685],{"class":634},[629,29489,688],{"class":668},[629,29491,691],{"class":634},[629,29493,694],{"class":655},[629,29495,697],{"class":634},[629,29497,29498,29500,29502,29504,29506,29508,29510,29512],{"class":631,"line":721},[629,29499,669],{"class":668},[629,29501,672],{"class":634},[629,29503,28674],{"class":675},[629,29505,685],{"class":634},[629,29507,688],{"class":668},[629,29509,691],{"class":634},[629,29511,4618],{"class":655},[629,29513,697],{"class":634},[629,29515,29516,29518,29520],{"class":631,"line":731},[629,29517,724],{"class":634},[629,29519,639],{"class":638},[629,29521,661],{"class":634},[629,29523,29524],{"class":631,"line":737},[629,29525,734],{"emptyLinePlaceholder":586},[629,29527,29528,29530,29532],{"class":631,"line":747},[629,29529,635],{"class":634},[629,29531,742],{"class":638},[629,29533,661],{"class":634},[629,29535,29536,29538,29540],{"class":631,"line":770},[629,29537,750],{"class":634},[629,29539,753],{"class":638},[629,29541,661],{"class":634},[629,29543,29544,29546,29548,29550,29552,29554,29556,29558],{"class":631,"line":782},[629,29545,773],{"class":634},[629,29547,776],{"class":638},[629,29549,1477],{"class":642},[629,29551,649],{"class":634},[629,29553,652],{"class":634},[629,29555,11342],{"class":655},[629,29557,652],{"class":634},[629,29559,779],{"class":634},[629,29561,29562,29564],{"class":631,"line":792},[629,29563,773],{"class":634},[629,29565,29566],{"class":638},"CubicBezierLine\n",[629,29568,29569,29572,29574,29576,29579],{"class":631,"line":797},[629,29570,29571],{"class":642}," :start",[629,29573,649],{"class":634},[629,29575,652],{"class":634},[629,29577,29578],{"class":655},"new Vector3(-1, 0, 0)",[629,29580,3123],{"class":634},[629,29582,29583,29586,29588,29590,29593],{"class":631,"line":819},[629,29584,29585],{"class":642}," :end",[629,29587,649],{"class":634},[629,29589,652],{"class":634},[629,29591,29592],{"class":655},"new Vector3(1, 0, 0)",[629,29594,3123],{"class":634},[629,29596,29597,29600,29602,29604,29607],{"class":631,"line":623},[629,29598,29599],{"class":642}," :midA",[629,29601,649],{"class":634},[629,29603,652],{"class":634},[629,29605,29606],{"class":655},"new Vector3(-0.5, 1, 0)",[629,29608,3123],{"class":634},[629,29610,29611,29614,29616,29618,29621],{"class":631,"line":842},[629,29612,29613],{"class":642}," :midB",[629,29615,649],{"class":634},[629,29617,652],{"class":634},[629,29619,29620],{"class":655},"new Vector3(0.5, 1, 0)",[629,29622,3123],{"class":634},[629,29624,29625,29627,29629,29631,29633],{"class":631,"line":853},[629,29626,28759],{"class":642},[629,29628,649],{"class":634},[629,29630,652],{"class":634},[629,29632,9437],{"class":655},[629,29634,3123],{"class":634},[629,29636,29637,29639,29641,29643,29645],{"class":631,"line":864},[629,29638,28773],{"class":642},[629,29640,649],{"class":634},[629,29642,652],{"class":634},[629,29644,11389],{"class":655},[629,29646,3123],{"class":634},[629,29648,29649,29651,29653,29655,29657],{"class":631,"line":874},[629,29650,28787],{"class":642},[629,29652,649],{"class":634},[629,29654,652],{"class":634},[629,29656,19465],{"class":655},[629,29658,3123],{"class":634},[629,29660,29661],{"class":631,"line":624},[629,29662,15338],{"class":634},[629,29664,29665,29667,29669],{"class":631,"line":894},[629,29666,773],{"class":634},[629,29668,8448],{"class":638},[629,29670,779],{"class":634},[629,29672,29673,29675,29677],{"class":631,"line":904},[629,29674,897],{"class":634},[629,29676,753],{"class":638},[629,29678,661],{"class":634},[629,29680,29681,29683,29685],{"class":631,"line":2617},[629,29682,724],{"class":634},[629,29684,742],{"class":638},[629,29686,661],{"class":634},[496,29688,914],{"id":913},[606,29690,29691,29693,29694,7211,29696,1138],{},[610,29692,29427],{}," inherits all props but ",[610,29695,28846],{},[610,29697,28592],{},[919,29699,29700,29712],{},[922,29701,29702],{},[925,29703,29704,29706,29708,29710],{},[928,29705,930],{},[928,29707,5961],{},[928,29709,933],{},[928,29711,936],{},[938,29713,29714,29730,29745,29761,29777],{},[925,29715,29716,29720,29725,29728],{},[943,29717,29718],{},[610,29719,12372],{},[943,29721,29722],{},[610,29723,29724],{},"Vector3 | [number, number, number]",[943,29726,29727],{},"Starting point",[943,29729],{},[925,29731,29732,29736,29740,29743],{},[943,29733,29734],{},[610,29735,12386],{},[943,29737,29738],{},[610,29739,29724],{},[943,29741,29742],{},"Ending point",[943,29744],{},[925,29746,29747,29752,29756,29759],{},[943,29748,29749],{},[610,29750,29751],{},"midA",[943,29753,29754],{},[610,29755,29724],{},[943,29757,29758],{},"First control point",[943,29760],{},[925,29762,29763,29768,29772,29775],{},[943,29764,29765],{},[610,29766,29767],{},"midB",[943,29769,29770],{},[610,29771,29724],{},[943,29773,29774],{},"Second control point",[943,29776],{},[925,29778,29779,29783,29787,29789],{},[943,29780,29781],{},[610,29782,28861],{},[943,29784,29785],{},[610,29786,5344],{},[943,29788,28868],{},[943,29790,28871],{},[1319,29792,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":29794},[29795,29796],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Renders a Line2 between start and end points with two control points.",{},{"title":225,"description":29797},"Bi4-z99FCo5x_LjzwKRj0meHtbAxC8tTMsvdiP4y5sU",{"id":29802,"title":229,"body":29803,"description":30034,"extension":583,"links":584,"meta":30035,"navigation":586,"path":230,"seo":30036,"stem":231,"__hash__":30037},"docs/2.api/5.shapes/cylinder.md",{"type":493,"value":29804,"toc":30031},[29805,29810,29820,29826,29832,29834,30028],[600,29806,29807],{},[29808,29809],"shapes-cylinder",{},[606,29811,2768,29812,8235,29814,28392,29817,1138],{},[610,29813,7309],{},[610,29815,29816],{},"\u003CCylinder />",[610,29818,29819],{},"CylinderGeometry",[618,29821,29824],{"className":29822,"code":29823,"language":28401},[28399],"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",[610,29825,29823],{"__ignoreMap":568},[606,29827,28406,29828],{},[1132,29829,29819],{"href":29830,"rel":29831},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1136],[496,29833,15],{"id":616},[618,29835,29837],{"className":620,"code":29836,"language":625,"meta":568,"style":568},"\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",[610,29838,29839,29912,29916,29921,30016,30020],{"__ignoreMap":568},[629,29840,29841,29843,29845,29847,29849,29851,29853,29855,29857,29859,29861,29863,29865,29867,29869,29871,29873,29875,29877,29879,29881,29883,29886,29888,29891,29893,29896,29898,29900,29902,29904,29906,29908,29910],{"class":631,"line":569},[629,29842,635],{"class":634},[629,29844,229],{"class":638},[629,29846,3021],{"class":634},[629,29848,28428],{"class":642},[629,29850,649],{"class":634},[629,29852,652],{"class":634},[629,29854,19405],{"class":675},[629,29856,1866],{"class":2493},[629,29858,679],{"class":634},[629,29860,2553],{"class":2493},[629,29862,679],{"class":634},[629,29864,2553],{"class":2493},[629,29866,679],{"class":634},[629,29868,29126],{"class":2493},[629,29870,679],{"class":634},[629,29872,2553],{"class":2493},[629,29874,679],{"class":634},[629,29876,6717],{"class":4389},[629,29878,679],{"class":634},[629,29880,2498],{"class":2493},[629,29882,679],{"class":634},[629,29884,29885],{"class":675}," Math",[629,29887,1138],{"class":634},[629,29889,29890],{"class":675},"PI ",[629,29892,21192],{"class":634},[629,29894,29895],{"class":2493}," 2",[629,29897,2506],{"class":675},[629,29899,652],{"class":634},[629,29901,2681],{"class":642},[629,29903,649],{"class":634},[629,29905,652],{"class":634},[629,29907,11389],{"class":655},[629,29909,652],{"class":634},[629,29911,779],{"class":634},[629,29913,29914],{"class":631,"line":570},[629,29915,734],{"emptyLinePlaceholder":586},[629,29917,29918],{"class":631,"line":700},[629,29919,29920],{"class":675},"// Cylinder with a custom material transformations\n",[629,29922,29923,29925,29927,29929,29931,29933,29936,29938,29940,29942,29944,29946,29948,29950,29952,29954,29956,29958,29960,29962,29964,29966,29968,29970,29972,29974,29976,29978,29980,29982,29984,29986,29988,29990,29992,29994,29996,29998,30000,30002,30004,30006,30008,30010,30012,30014],{"class":631,"line":721},[629,29924,635],{"class":634},[629,29926,229],{"class":638},[629,29928,3864],{"class":642},[629,29930,649],{"class":634},[629,29932,652],{"class":634},[629,29934,29935],{"class":655},"cylinderRef",[629,29937,652],{"class":634},[629,29939,3021],{"class":634},[629,29941,28428],{"class":642},[629,29943,649],{"class":634},[629,29945,652],{"class":634},[629,29947,19405],{"class":675},[629,29949,1866],{"class":2493},[629,29951,679],{"class":634},[629,29953,2553],{"class":2493},[629,29955,679],{"class":634},[629,29957,2553],{"class":2493},[629,29959,679],{"class":634},[629,29961,29126],{"class":2493},[629,29963,679],{"class":634},[629,29965,2553],{"class":2493},[629,29967,679],{"class":634},[629,29969,6717],{"class":4389},[629,29971,679],{"class":634},[629,29973,2498],{"class":2493},[629,29975,679],{"class":634},[629,29977,29885],{"class":675},[629,29979,1138],{"class":634},[629,29981,29890],{"class":675},[629,29983,21192],{"class":634},[629,29985,29895],{"class":2493},[629,29987,2506],{"class":675},[629,29989,652],{"class":634},[629,29991,3021],{"class":634},[629,29993,4122],{"class":642},[629,29995,649],{"class":634},[629,29997,652],{"class":634},[629,29999,19405],{"class":675},[629,30001,957],{"class":2493},[629,30003,679],{"class":634},[629,30005,28526],{"class":2493},[629,30007,679],{"class":634},[629,30009,2498],{"class":2493},[629,30011,2506],{"class":675},[629,30013,652],{"class":634},[629,30015,661],{"class":634},[629,30017,30018],{"class":631,"line":731},[629,30019,28541],{"class":675},[629,30021,30022,30024,30026],{"class":631,"line":737},[629,30023,724],{"class":634},[629,30025,229],{"class":638},[629,30027,661],{"class":634},[1319,30029,30030],{},"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":568,"searchDepth":569,"depth":570,"links":30032},[30033],{"id":616,"depth":570,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":30034},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":30039,"title":233,"body":30040,"description":30203,"extension":583,"links":584,"meta":30204,"navigation":586,"path":234,"seo":30205,"stem":235,"__hash__":30206},"docs/2.api/5.shapes/dodecahedron.md",{"type":493,"value":30041,"toc":30200},[30042,30047,30057,30063,30069,30071,30198],[600,30043,30044],{},[30045,30046],"shapes-dodecahedron",{},[606,30048,2768,30049,8235,30051,28392,30054,1138],{},[610,30050,7309],{},[610,30052,30053],{},"\u003CDodecahedron />",[610,30055,30056],{},"DodecahedronGeometry",[618,30058,30061],{"className":30059,"code":30060,"language":28401},[28399],"args: [radius: number, detail: number]\n",[610,30062,30060],{"__ignoreMap":568},[606,30064,28406,30065],{},[1132,30066,30056],{"href":30067,"rel":30068},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1136],[496,30070,15],{"id":616},[618,30072,30074],{"className":620,"code":30073,"language":625,"meta":568,"style":568},"\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",[610,30075,30076,30114,30118,30123,30186,30190],{"__ignoreMap":568},[629,30077,30078,30080,30082,30084,30086,30088,30090,30092,30094,30096,30098,30100,30102,30104,30106,30108,30110,30112],{"class":631,"line":569},[629,30079,635],{"class":634},[629,30081,233],{"class":638},[629,30083,3021],{"class":634},[629,30085,28428],{"class":642},[629,30087,649],{"class":634},[629,30089,652],{"class":634},[629,30091,19405],{"class":675},[629,30093,1866],{"class":2493},[629,30095,679],{"class":634},[629,30097,2498],{"class":2493},[629,30099,2506],{"class":675},[629,30101,652],{"class":634},[629,30103,2681],{"class":642},[629,30105,649],{"class":634},[629,30107,652],{"class":634},[629,30109,11389],{"class":655},[629,30111,652],{"class":634},[629,30113,779],{"class":634},[629,30115,30116],{"class":631,"line":570},[629,30117,734],{"emptyLinePlaceholder":586},[629,30119,30120],{"class":631,"line":700},[629,30121,30122],{"class":675},"// Dodecahedron with a custom material transformations\n",[629,30124,30125,30127,30129,30131,30133,30135,30138,30140,30142,30144,30146,30148,30150,30152,30154,30156,30158,30160,30162,30164,30166,30168,30170,30172,30174,30176,30178,30180,30182,30184],{"class":631,"line":721},[629,30126,635],{"class":634},[629,30128,233],{"class":638},[629,30130,3864],{"class":642},[629,30132,649],{"class":634},[629,30134,652],{"class":634},[629,30136,30137],{"class":655},"dodecahedronRef",[629,30139,652],{"class":634},[629,30141,3021],{"class":634},[629,30143,28428],{"class":642},[629,30145,649],{"class":634},[629,30147,652],{"class":634},[629,30149,19405],{"class":675},[629,30151,1866],{"class":2493},[629,30153,679],{"class":634},[629,30155,2498],{"class":2493},[629,30157,2506],{"class":675},[629,30159,652],{"class":634},[629,30161,3021],{"class":634},[629,30163,4122],{"class":642},[629,30165,649],{"class":634},[629,30167,652],{"class":634},[629,30169,19405],{"class":675},[629,30171,812],{"class":2493},[629,30173,679],{"class":634},[629,30175,28526],{"class":2493},[629,30177,679],{"class":634},[629,30179,2498],{"class":2493},[629,30181,2506],{"class":675},[629,30183,652],{"class":634},[629,30185,661],{"class":634},[629,30187,30188],{"class":631,"line":731},[629,30189,28541],{"class":675},[629,30191,30192,30194,30196],{"class":631,"line":737},[629,30193,724],{"class":634},[629,30195,233],{"class":638},[629,30197,661],{"class":634},[1319,30199,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":30201},[30202],{"id":616,"depth":570,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":233,"description":30203},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":30208,"title":237,"body":30209,"description":30745,"extension":583,"links":584,"meta":30746,"navigation":586,"path":238,"seo":30747,"stem":239,"__hash__":30748},"docs/2.api/5.shapes/grid.md",{"type":493,"value":30210,"toc":30741},[30211,30216,30222,30224,30554,30556,30739],[600,30212,30213],{},[30214,30215],"shapes-grid",{},[606,30217,30218,30221],{},[610,30219,30220],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[496,30223,15],{"id":616},[618,30225,30228],{"className":620,"code":30226,"highlights":30227,"language":625,"meta":568,"style":568},"\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",[570,792,797,819,623,842,853,864,874,624,894,904,2617],[610,30229,30230,30250,30274,30292,30300,30304,30312,30331,30362,30370,30378,30392,30406,30420,30434,30448,30462,30477,30491,30505,30520,30534,30538,30546],{"__ignoreMap":568},[629,30231,30232,30234,30236,30238,30240,30242,30244,30246,30248],{"class":631,"line":569},[629,30233,635],{"class":634},[629,30235,639],{"class":638},[629,30237,643],{"class":642},[629,30239,646],{"class":642},[629,30241,649],{"class":634},[629,30243,652],{"class":634},[629,30245,656],{"class":655},[629,30247,652],{"class":634},[629,30249,661],{"class":634},[629,30251,30253,30255,30257,30260,30262,30264,30266,30268,30270,30272],{"class":30252,"line":570},[631,665],[629,30254,669],{"class":668},[629,30256,672],{"class":634},[629,30258,30259],{"class":675}," Grid",[629,30261,679],{"class":634},[629,30263,682],{"class":675},[629,30265,685],{"class":634},[629,30267,688],{"class":668},[629,30269,691],{"class":634},[629,30271,694],{"class":655},[629,30273,697],{"class":634},[629,30275,30276,30278,30280,30282,30284,30286,30288,30290],{"class":631,"line":700},[629,30277,669],{"class":668},[629,30279,672],{"class":634},[629,30281,707],{"class":675},[629,30283,685],{"class":634},[629,30285,688],{"class":668},[629,30287,691],{"class":634},[629,30289,716],{"class":655},[629,30291,697],{"class":634},[629,30293,30294,30296,30298],{"class":631,"line":721},[629,30295,724],{"class":634},[629,30297,639],{"class":638},[629,30299,661],{"class":634},[629,30301,30302],{"class":631,"line":731},[629,30303,734],{"emptyLinePlaceholder":586},[629,30305,30306,30308,30310],{"class":631,"line":737},[629,30307,635],{"class":634},[629,30309,742],{"class":638},[629,30311,661],{"class":634},[629,30313,30314,30316,30318,30320,30322,30324,30327,30329],{"class":631,"line":747},[629,30315,750],{"class":634},[629,30317,753],{"class":638},[629,30319,756],{"class":642},[629,30321,649],{"class":634},[629,30323,652],{"class":634},[629,30325,30326],{"class":655},"#222222",[629,30328,652],{"class":634},[629,30330,661],{"class":634},[629,30332,30333,30335,30337,30339,30341,30343,30346,30348,30351,30353,30355,30358,30360],{"class":631,"line":770},[629,30334,773],{"class":634},[629,30336,776],{"class":638},[629,30338,1477],{"class":642},[629,30340,649],{"class":634},[629,30342,652],{"class":634},[629,30344,30345],{"class":655},"[8, 10, 10]",[629,30347,652],{"class":634},[629,30349,30350],{"class":642}," :fov",[629,30352,649],{"class":634},[629,30354,652],{"class":634},[629,30356,30357],{"class":655},"25",[629,30359,652],{"class":634},[629,30361,779],{"class":634},[629,30363,30364,30366,30368],{"class":631,"line":782},[629,30365,773],{"class":634},[629,30367,787],{"class":638},[629,30369,779],{"class":634},[629,30371,30373,30375],{"class":30372,"line":792},[631,665],[629,30374,773],{"class":634},[629,30376,30377],{"class":638},"Grid\n",[629,30379,30381,30383,30385,30387,30390],{"class":30380,"line":797},[631,665],[629,30382,10439],{"class":642},[629,30384,649],{"class":634},[629,30386,652],{"class":634},[629,30388,30389],{"class":655},"[10.5, 10.5]",[629,30391,3123],{"class":634},[629,30393,30395,30398,30400,30402,30404],{"class":30394,"line":819},[631,665],[629,30396,30397],{"class":642}," cell-color",[629,30399,649],{"class":634},[629,30401,652],{"class":634},[629,30403,9517],{"class":655},[629,30405,3123],{"class":634},[629,30407,30409,30412,30414,30416,30418],{"class":30408,"line":623},[631,665],[629,30410,30411],{"class":642}," :cell-size",[629,30413,649],{"class":634},[629,30415,652],{"class":634},[629,30417,28259],{"class":655},[629,30419,3123],{"class":634},[629,30421,30423,30426,30428,30430,30432],{"class":30422,"line":842},[631,665],[629,30424,30425],{"class":642}," :cell-thickness",[629,30427,649],{"class":634},[629,30429,652],{"class":634},[629,30431,1938],{"class":655},[629,30433,3123],{"class":634},[629,30435,30437,30440,30442,30444,30446],{"class":30436,"line":853},[631,665],[629,30438,30439],{"class":642}," section-color",[629,30441,649],{"class":634},[629,30443,652],{"class":634},[629,30445,8920],{"class":655},[629,30447,3123],{"class":634},[629,30449,30451,30454,30456,30458,30460],{"class":30450,"line":864},[631,665],[629,30452,30453],{"class":642}," :section-size",[629,30455,649],{"class":634},[629,30457,652],{"class":634},[629,30459,812],{"class":655},[629,30461,3123],{"class":634},[629,30463,30465,30468,30470,30472,30475],{"class":30464,"line":874},[631,665],[629,30466,30467],{"class":642}," :section-thickness",[629,30469,649],{"class":634},[629,30471,652],{"class":634},[629,30473,30474],{"class":655},"1.3",[629,30476,3123],{"class":634},[629,30478,30480,30483,30485,30487,30489],{"class":30479,"line":624},[631,665],[629,30481,30482],{"class":642}," :infinite-grid",[629,30484,649],{"class":634},[629,30486,652],{"class":634},[629,30488,953],{"class":655},[629,30490,3123],{"class":634},[629,30492,30494,30497,30499,30501,30503],{"class":30493,"line":894},[631,665],[629,30495,30496],{"class":642}," :fade-from",[629,30498,649],{"class":634},[629,30500,652],{"class":634},[629,30502,957],{"class":655},[629,30504,3123],{"class":634},[629,30506,30508,30511,30513,30515,30518],{"class":30507,"line":904},[631,665],[629,30509,30510],{"class":642}," :fade-distance",[629,30512,649],{"class":634},[629,30514,652],{"class":634},[629,30516,30517],{"class":655},"12",[629,30519,3123],{"class":634},[629,30521,30523,30526,30528,30530,30532],{"class":30522,"line":2617},[631,665],[629,30524,30525],{"class":642}," :fade-strength",[629,30527,649],{"class":634},[629,30529,652],{"class":634},[629,30531,1866],{"class":655},[629,30533,3123],{"class":634},[629,30535,30536],{"class":631,"line":2626},[629,30537,15338],{"class":634},[629,30539,30540,30542,30544],{"class":631,"line":2646},[629,30541,897],{"class":634},[629,30543,753],{"class":638},[629,30545,661],{"class":634},[629,30547,30548,30550,30552],{"class":631,"line":2655},[629,30549,724],{"class":634},[629,30551,742],{"class":638},[629,30553,661],{"class":634},[496,30555,914],{"id":913},[919,30557,30558,30568],{},[922,30559,30560],{},[925,30561,30562,30564,30566],{},[928,30563,930],{"align":989},[928,30565,933],{"align":989},[928,30567,936],{},[938,30569,30570,30584,30598,30612,30626,30640,30654,30668,30682,30697,30711,30725],{},[925,30571,30572,30577,30580],{},[943,30573,30574],{"align":989},[1661,30575,30576],{},"cellSize",[943,30578,30579],{"align":989},"Cell size",[943,30581,30582],{},[610,30583,1938],{},[925,30585,30586,30591,30594],{},[943,30587,30588],{"align":989},[1661,30589,30590],{},"cellThickness",[943,30592,30593],{"align":989},"Thickness of cell lines",[943,30595,30596],{},[610,30597,1938],{},[925,30599,30600,30605,30608],{},[943,30601,30602],{"align":989},[1661,30603,30604],{},"cellColor",[943,30606,30607],{"align":989},"Color of cell lines",[943,30609,30610],{},[610,30611,9655],{},[925,30613,30614,30619,30622],{},[943,30615,30616],{"align":989},[1661,30617,30618],{},"sectionSize",[943,30620,30621],{"align":989},"Section size",[943,30623,30624],{},[610,30625,1866],{},[925,30627,30628,30633,30636],{},[943,30629,30630],{"align":989},[1661,30631,30632],{},"sectionThickness",[943,30634,30635],{"align":989},"Thickness of section lines",[943,30637,30638],{},[610,30639,1866],{},[925,30641,30642,30647,30649],{},[943,30643,30644],{"align":989},[1661,30645,30646],{},"sectionColor",[943,30648,30607],{"align":989},[943,30650,30651],{},[610,30652,30653],{},"'blue'",[925,30655,30656,30661,30664],{},[943,30657,30658],{"align":989},[1661,30659,30660],{},"followCamera",[943,30662,30663],{"align":989},"Whether to follow camera",[943,30665,30666],{},[610,30667,963],{},[925,30669,30670,30675,30678],{},[943,30671,30672],{"align":989},[1661,30673,30674],{},"infiniteGrid",[943,30676,30677],{"align":989},"Whether to display an infinite grid",[943,30679,30680],{},[610,30681,963],{},[925,30683,30684,30689,30692],{},[943,30685,30686],{"align":989},[1661,30687,30688],{},"fadeDistance",[943,30690,30691],{"align":989},"Fade distance",[943,30693,30694],{},[610,30695,30696],{},"100",[925,30698,30699,30704,30707],{},[943,30700,30701],{"align":989},[1661,30702,30703],{},"fadeStrength",[943,30705,30706],{"align":989},"Fade strength",[943,30708,30709],{},[610,30710,1866],{},[925,30712,30713,30718,30721],{},[943,30714,30715],{"align":989},[1661,30716,30717],{},"fadeFrom",[943,30719,30720],{"align":989},"Fade from camera (1) or origin (0) or in between",[943,30722,30723],{},[610,30724,1866],{},[925,30726,30727,30731,30734],{},[943,30728,30729],{"align":989},[1661,30730,25467],{},[943,30732,30733],{"align":989},"Material side",[943,30735,30736],{},[610,30737,30738],{},"THREE.BackSide",[1319,30740,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":30742},[30743,30744],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Shader-based grid plane with customizable cell and section lines.",{},{"title":237,"description":30745},"gUhcCJXpeIhlg4aOnkCR0HsAX8-yKo0ddjfKc6h8BKY",{"id":30750,"title":241,"body":30751,"description":30913,"extension":583,"links":584,"meta":30914,"navigation":586,"path":242,"seo":30915,"stem":243,"__hash__":30916},"docs/2.api/5.shapes/icosahedron.md",{"type":493,"value":30752,"toc":30910},[30753,30758,30768,30773,30779,30781,30908],[600,30754,30755],{},[30756,30757],"shapes-icosahedron",{},[606,30759,2768,30760,8235,30762,28392,30765,1138],{},[610,30761,7309],{},[610,30763,30764],{},"\u003CIcosahedron />",[610,30766,30767],{},"IcosahedronGeometry",[618,30769,30771],{"className":30770,"code":30060,"language":28401},[28399],[610,30772,30060],{"__ignoreMap":568},[606,30774,28406,30775],{},[1132,30776,30767],{"href":30777,"rel":30778},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1136],[496,30780,15],{"id":616},[618,30782,30784],{"className":620,"code":30783,"language":625,"meta":568,"style":568},"\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",[610,30785,30786,30824,30828,30833,30896,30900],{"__ignoreMap":568},[629,30787,30788,30790,30792,30794,30796,30798,30800,30802,30804,30806,30808,30810,30812,30814,30816,30818,30820,30822],{"class":631,"line":569},[629,30789,635],{"class":634},[629,30791,241],{"class":638},[629,30793,3021],{"class":634},[629,30795,28428],{"class":642},[629,30797,649],{"class":634},[629,30799,652],{"class":634},[629,30801,19405],{"class":675},[629,30803,1866],{"class":2493},[629,30805,679],{"class":634},[629,30807,2498],{"class":2493},[629,30809,2506],{"class":675},[629,30811,652],{"class":634},[629,30813,2681],{"class":642},[629,30815,649],{"class":634},[629,30817,652],{"class":634},[629,30819,11389],{"class":655},[629,30821,652],{"class":634},[629,30823,779],{"class":634},[629,30825,30826],{"class":631,"line":570},[629,30827,734],{"emptyLinePlaceholder":586},[629,30829,30830],{"class":631,"line":700},[629,30831,30832],{"class":675},"// Icosahedron with a custom material transformations\n",[629,30834,30835,30837,30839,30841,30843,30845,30848,30850,30852,30854,30856,30858,30860,30862,30864,30866,30868,30870,30872,30874,30876,30878,30880,30882,30884,30886,30888,30890,30892,30894],{"class":631,"line":721},[629,30836,635],{"class":634},[629,30838,241],{"class":638},[629,30840,3864],{"class":642},[629,30842,649],{"class":634},[629,30844,652],{"class":634},[629,30846,30847],{"class":655},"icosahedronRef",[629,30849,652],{"class":634},[629,30851,3021],{"class":634},[629,30853,28428],{"class":642},[629,30855,649],{"class":634},[629,30857,652],{"class":634},[629,30859,19405],{"class":675},[629,30861,1866],{"class":2493},[629,30863,679],{"class":634},[629,30865,2498],{"class":2493},[629,30867,2506],{"class":675},[629,30869,652],{"class":634},[629,30871,3021],{"class":634},[629,30873,4122],{"class":642},[629,30875,649],{"class":634},[629,30877,652],{"class":634},[629,30879,19405],{"class":675},[629,30881,812],{"class":2493},[629,30883,679],{"class":634},[629,30885,28526],{"class":2493},[629,30887,679],{"class":634},[629,30889,2498],{"class":2493},[629,30891,2506],{"class":675},[629,30893,652],{"class":634},[629,30895,661],{"class":634},[629,30897,30898],{"class":631,"line":731},[629,30899,28541],{"class":675},[629,30901,30902,30904,30906],{"class":631,"line":737},[629,30903,724],{"class":634},[629,30905,241],{"class":638},[629,30907,661],{"class":634},[1319,30909,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":30911},[30912],{"id":616,"depth":570,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":30913},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":30918,"title":245,"body":30919,"description":31511,"extension":583,"links":584,"meta":31512,"navigation":586,"path":246,"seo":31513,"stem":247,"__hash__":31514},"docs/2.api/5.shapes/line2.md",{"type":493,"value":30920,"toc":31505},[30921,30926,30939,30941,31128,31130,31281,31284,31287,31292,31299,31362,31367,31499,31502],[2287,30922,30923],{},[30924,30925],"shapes-line2",{},[606,30927,2768,30928,8235,30930,30932,30933,1138],{},[610,30929,7309],{},[610,30931,28592],{}," component for creating 3-D lines. It wraps ",[1132,30934,28586,30937],{"href":30935,"rel":30936},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1136],[610,30938,245],{},[496,30940,15],{"id":616},[618,30942,30945],{"className":620,"code":30943,"highlights":30944,"language":625,"meta":568,"style":568},"\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",[700,770,782,792,797,819],[610,30946,30947,30967,30985,31005,31013,31017,31025,31033,31052,31060,31074,31087,31100,31104,31112,31120],{"__ignoreMap":568},[629,30948,30949,30951,30953,30955,30957,30959,30961,30963,30965],{"class":631,"line":569},[629,30950,635],{"class":634},[629,30952,639],{"class":638},[629,30954,643],{"class":642},[629,30956,646],{"class":642},[629,30958,649],{"class":634},[629,30960,652],{"class":634},[629,30962,656],{"class":655},[629,30964,652],{"class":634},[629,30966,661],{"class":634},[629,30968,30969,30971,30973,30975,30977,30979,30981,30983],{"class":631,"line":570},[629,30970,669],{"class":668},[629,30972,672],{"class":634},[629,30974,707],{"class":675},[629,30976,685],{"class":634},[629,30978,688],{"class":668},[629,30980,691],{"class":634},[629,30982,716],{"class":655},[629,30984,697],{"class":634},[629,30986,30988,30990,30992,30995,30997,30999,31001,31003],{"class":30987,"line":700},[631,665],[629,30989,669],{"class":668},[629,30991,672],{"class":634},[629,30993,30994],{"class":675}," Line2",[629,30996,685],{"class":634},[629,30998,688],{"class":668},[629,31000,691],{"class":634},[629,31002,694],{"class":655},[629,31004,697],{"class":634},[629,31006,31007,31009,31011],{"class":631,"line":721},[629,31008,724],{"class":634},[629,31010,639],{"class":638},[629,31012,661],{"class":634},[629,31014,31015],{"class":631,"line":731},[629,31016,734],{"emptyLinePlaceholder":586},[629,31018,31019,31021,31023],{"class":631,"line":737},[629,31020,635],{"class":634},[629,31022,742],{"class":638},[629,31024,661],{"class":634},[629,31026,31027,31029,31031],{"class":631,"line":747},[629,31028,750],{"class":634},[629,31030,753],{"class":638},[629,31032,661],{"class":634},[629,31034,31036,31038,31040,31042,31044,31046,31048,31050],{"class":31035,"line":770},[631,665],[629,31037,773],{"class":634},[629,31039,776],{"class":638},[629,31041,1477],{"class":642},[629,31043,649],{"class":634},[629,31045,652],{"class":634},[629,31047,11342],{"class":655},[629,31049,652],{"class":634},[629,31051,779],{"class":634},[629,31053,31055,31057],{"class":31054,"line":782},[631,665],[629,31056,773],{"class":634},[629,31058,31059],{"class":638},"Line2\n",[629,31061,31063,31065,31067,31069,31072],{"class":31062,"line":792},[631,665],[629,31064,28744],{"class":642},[629,31066,649],{"class":634},[629,31068,652],{"class":634},[629,31070,31071],{"class":655},"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]",[629,31073,3123],{"class":634},[629,31075,31077,31079,31081,31083,31085],{"class":31076,"line":797},[631,665],[629,31078,28773],{"class":642},[629,31080,649],{"class":634},[629,31082,652],{"class":634},[629,31084,11389],{"class":655},[629,31086,3123],{"class":634},[629,31088,31090,31092,31094,31096,31098],{"class":31089,"line":819},[631,665],[629,31091,28787],{"class":642},[629,31093,649],{"class":634},[629,31095,652],{"class":634},[629,31097,19465],{"class":655},[629,31099,3123],{"class":634},[629,31101,31102],{"class":631,"line":623},[629,31103,15338],{"class":634},[629,31105,31106,31108,31110],{"class":631,"line":842},[629,31107,773],{"class":634},[629,31109,8448],{"class":638},[629,31111,779],{"class":634},[629,31113,31114,31116,31118],{"class":631,"line":853},[629,31115,897],{"class":634},[629,31117,753],{"class":638},[629,31119,661],{"class":634},[629,31121,31122,31124,31126],{"class":631,"line":864},[629,31123,724],{"class":634},[629,31125,742],{"class":638},[629,31127,661],{"class":634},[496,31129,914],{"id":913},[919,31131,31132,31144],{},[922,31133,31134],{},[925,31135,31136,31138,31140,31142],{},[928,31137,930],{},[928,31139,5961],{},[928,31141,933],{},[928,31143,936],{},[938,31145,31146,31161,31173,31185,31197,31209,31221,31233,31245,31257,31269],{},[925,31147,31148,31150,31156,31159],{},[943,31149,28846],{},[943,31151,31152],{},[1132,31153,31155],{"href":31154},"#points","See below",[943,31157,31158],{},"Points representing the line",[943,31160],{},[925,31162,31163,31165,31169,31171],{},[943,31164,28920],{},[943,31166,31167],{},[610,31168,28925],{},[943,31170,28928],{},[943,31172,3648],{},[925,31174,31175,31177,31181,31183],{},[943,31176,7539],{},[943,31178,31179],{},[610,31180,7554],{},[943,31182,28941],{},[943,31184,28944],{},[925,31186,31187,31189,31193,31195],{},[943,31188,28949],{},[943,31190,31191],{},[610,31192,5344],{},[943,31194,28956],{},[943,31196,1866],{},[925,31198,31199,31201,31205,31207],{},[943,31200,26066],{},[943,31202,31203],{},[610,31204,15629],{},[943,31206,28969],{},[943,31208,963],{},[925,31210,31211,31213,31217,31219],{},[943,31212,28976],{},[943,31214,31215],{},[610,31216,15629],{},[943,31218,28983],{},[943,31220,963],{},[925,31222,31223,31225,31229,31231],{},[943,31224,28990],{},[943,31226,31227],{},[610,31228,15629],{},[943,31230,28997],{},[943,31232,963],{},[925,31234,31235,31237,31241,31243],{},[943,31236,29004],{},[943,31238,31239],{},[610,31240,5344],{},[943,31242,29011],{},[943,31244,1866],{},[925,31246,31247,31249,31253,31255],{},[943,31248,29018],{},[943,31250,31251],{},[610,31252,5344],{},[943,31254,29025],{},[943,31256,1866],{},[925,31258,31259,31261,31265,31267],{},[943,31260,29032],{},[943,31262,31263],{},[610,31264,5344],{},[943,31266,29039],{},[943,31268,1866],{},[925,31270,31271,31273,31277,31279],{},[943,31272,29046],{},[943,31274,31275],{},[610,31276,5344],{},[943,31278,29053],{},[943,31280,957],{},[4043,31282,31283],{"id":28846},"Points",[606,31285,31286],{},"The points prop has the following type:",[606,31288,31289],{},[610,31290,31291],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[606,31293,31294,31295,31298],{},"The passed array is converted to ",[610,31296,31297],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[919,31300,31301,31311],{},[922,31302,31303],{},[925,31304,31305,31308],{},[928,31306,31307],{},"Entry type",[928,31309,31310],{},"Interpretation",[938,31312,31313,31322,31334,31344,31353],{},[925,31314,31315,31319],{},[943,31316,31317],{},[610,31318,8132],{},[943,31320,31321],{},"Insert the vector's x, y, z into the result array",[925,31323,31324,31331],{},[943,31325,31326],{},[31327,31328,31329],"nobr",{},[610,31330,8129],{},[943,31332,31333],{},"Insert the array values into the result array",[925,31335,31336,31341],{},[943,31337,31338],{},[610,31339,31340],{},"Vector2",[943,31342,31343],{},"Insert the vector's x, y, then 0 into the result array",[925,31345,31346,31350],{},[943,31347,31348],{},[610,31349,26915],{},[943,31351,31352],{},"Insert the array values, then 0 into the result array",[925,31354,31355,31359],{},[943,31356,31357],{},[610,31358,5344],{},[943,31360,31361],{},"Insert the number into the result array",[3191,31363,31364],{},[606,31365,31366],{},"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.",[618,31368,31370],{"className":620,"code":31369,"language":625,"meta":568,"style":568},"\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",[610,31371,31372,31377,31427,31432,31436,31441,31494],{"__ignoreMap":568},[629,31373,31374],{"class":631,"line":569},[629,31375,31376],{"class":1201},"\u003C!-- Wrong -->\n",[629,31378,31379,31381,31383,31385,31387,31389,31391,31394,31396,31398,31400,31402,31404,31406,31408,31410,31412,31414,31416,31418,31420,31423,31425],{"class":631,"line":570},[629,31380,635],{"class":634},[629,31382,245],{"class":638},[629,31384,3021],{"class":634},[629,31386,28846],{"class":642},[629,31388,649],{"class":634},[629,31390,652],{"class":634},[629,31392,31393],{"class":675},"[[",[629,31395,1866],{"class":2493},[629,31397,679],{"class":634},[629,31399,1866],{"class":2493},[629,31401,2506],{"class":675},[629,31403,679],{"class":634},[629,31405,29895],{"class":2493},[629,31407,679],{"class":634},[629,31409,29895],{"class":2493},[629,31411,679],{"class":634},[629,31413,2490],{"class":675},[629,31415,19465],{"class":2493},[629,31417,679],{"class":634},[629,31419,19465],{"class":2493},[629,31421,31422],{"class":675},"]]",[629,31424,652],{"class":634},[629,31426,779],{"class":634},[629,31428,31429],{"class":631,"line":700},[629,31430,31431],{"class":1201},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[629,31433,31434],{"class":631,"line":721},[629,31435,734],{"emptyLinePlaceholder":586},[629,31437,31438],{"class":631,"line":731},[629,31439,31440],{"class":1201},"\u003C!-- Right -->\n",[629,31442,31443,31445,31447,31449,31451,31453,31455,31457,31459,31461,31463,31465,31467,31469,31471,31473,31475,31477,31479,31481,31483,31485,31488,31490,31492],{"class":631,"line":737},[629,31444,635],{"class":634},[629,31446,245],{"class":638},[629,31448,3021],{"class":634},[629,31450,28846],{"class":642},[629,31452,649],{"class":634},[629,31454,652],{"class":634},[629,31456,31393],{"class":675},[629,31458,1866],{"class":2493},[629,31460,679],{"class":634},[629,31462,2553],{"class":2493},[629,31464,2506],{"class":675},[629,31466,679],{"class":634},[629,31468,29895],{"class":2493},[629,31470,679],{"class":634},[629,31472,29895],{"class":2493},[629,31474,679],{"class":634},[629,31476,2498],{"class":2493},[629,31478,679],{"class":634},[629,31480,2490],{"class":675},[629,31482,19465],{"class":2493},[629,31484,679],{"class":634},[629,31486,31487],{"class":2493}," 3",[629,31489,31422],{"class":675},[629,31491,652],{"class":634},[629,31493,779],{"class":634},[629,31495,31496],{"class":631,"line":747},[629,31497,31498],{"class":1201},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[606,31500,31501],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1319,31503,31504],{},"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":568,"searchDepth":569,"depth":570,"links":31506},[31507,31508],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914,"children":31509},[31510],{"id":28846,"depth":700,"text":31283},"Component for creating 3D lines using Three.js's Line2.",{},{"title":245,"description":31511},"3_PA8PNLJqkUe1WxI0VGct3uJ9JTkMiGeSxC7ZRsjNc",{"id":31516,"title":249,"body":31517,"description":31678,"extension":583,"links":584,"meta":31679,"navigation":586,"path":250,"seo":31680,"stem":251,"__hash__":31681},"docs/2.api/5.shapes/octahedron.md",{"type":493,"value":31518,"toc":31675},[31519,31524,31534,31539,31545,31547,31673],[600,31520,31521],{},[31522,31523],"shapes-octahedron",{},[606,31525,2768,31526,8235,31528,28392,31531,1138],{},[610,31527,7309],{},[610,31529,31530],{},"\u003COctahedron />",[610,31532,31533],{},"OctahedronGeometry",[618,31535,31537],{"className":31536,"code":30060,"language":28401},[28399],[610,31538,30060],{"__ignoreMap":568},[606,31540,28406,31541],{},[1132,31542,31533],{"href":31543,"rel":31544},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1136],[496,31546,15],{"id":616},[618,31548,31550],{"className":620,"code":31549,"language":625,"meta":568,"style":568},"\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",[610,31551,31552,31590,31594,31599,31661,31665],{"__ignoreMap":568},[629,31553,31554,31556,31558,31560,31562,31564,31566,31568,31570,31572,31574,31576,31578,31580,31582,31584,31586,31588],{"class":631,"line":569},[629,31555,635],{"class":634},[629,31557,249],{"class":638},[629,31559,3021],{"class":634},[629,31561,28428],{"class":642},[629,31563,649],{"class":634},[629,31565,652],{"class":634},[629,31567,19405],{"class":675},[629,31569,1866],{"class":2493},[629,31571,679],{"class":634},[629,31573,2498],{"class":2493},[629,31575,2506],{"class":675},[629,31577,652],{"class":634},[629,31579,2681],{"class":642},[629,31581,649],{"class":634},[629,31583,652],{"class":634},[629,31585,11389],{"class":655},[629,31587,652],{"class":634},[629,31589,779],{"class":634},[629,31591,31592],{"class":631,"line":570},[629,31593,734],{"emptyLinePlaceholder":586},[629,31595,31596],{"class":631,"line":700},[629,31597,31598],{"class":675},"// Octahedron with a custom material transformations\n",[629,31600,31601,31603,31605,31607,31609,31611,31613,31615,31617,31619,31621,31623,31625,31627,31629,31631,31633,31635,31637,31639,31641,31643,31645,31647,31649,31651,31653,31655,31657,31659],{"class":631,"line":721},[629,31602,635],{"class":634},[629,31604,249],{"class":638},[629,31606,3864],{"class":642},[629,31608,649],{"class":634},[629,31610,652],{"class":634},[629,31612,30847],{"class":655},[629,31614,652],{"class":634},[629,31616,3021],{"class":634},[629,31618,28428],{"class":642},[629,31620,649],{"class":634},[629,31622,652],{"class":634},[629,31624,19405],{"class":675},[629,31626,1866],{"class":2493},[629,31628,679],{"class":634},[629,31630,2498],{"class":2493},[629,31632,2506],{"class":675},[629,31634,652],{"class":634},[629,31636,3021],{"class":634},[629,31638,4122],{"class":642},[629,31640,649],{"class":634},[629,31642,652],{"class":634},[629,31644,19405],{"class":675},[629,31646,812],{"class":2493},[629,31648,679],{"class":634},[629,31650,28526],{"class":2493},[629,31652,679],{"class":634},[629,31654,2498],{"class":2493},[629,31656,2506],{"class":675},[629,31658,652],{"class":634},[629,31660,661],{"class":634},[629,31662,31663],{"class":631,"line":731},[629,31664,28541],{"class":675},[629,31666,31667,31669,31671],{"class":631,"line":737},[629,31668,724],{"class":634},[629,31670,249],{"class":638},[629,31672,661],{"class":634},[1319,31674,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":31676},[31677],{"id":616,"depth":570,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":31678},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":31683,"title":253,"body":31684,"description":31853,"extension":583,"links":584,"meta":31854,"navigation":586,"path":254,"seo":31855,"stem":255,"__hash__":31856},"docs/2.api/5.shapes/plane.md",{"type":493,"value":31685,"toc":31850},[31686,31691,31701,31707,31713,31718,31720,31848],[600,31687,31688],{},[31689,31690],"shapes-plane",{},[606,31692,2768,31693,8235,31695,28392,31698,1138],{},[610,31694,7309],{},[610,31696,31697],{},"\u003CPlane />",[610,31699,31700],{},"PlaneGeometry",[618,31702,31705],{"className":31703,"code":31704,"language":28401},[28399],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[610,31706,31704],{"__ignoreMap":568},[606,31708,28406,31709],{},[1132,31710,31700],{"href":31711,"rel":31712},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1136],[1997,31714,31715],{},[606,31716,31717],{},"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).",[496,31719,15],{"id":616},[618,31721,31723],{"className":620,"code":31722,"language":625,"meta":568,"style":568},"\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",[610,31724,31725,31763,31767,31772,31836,31840],{"__ignoreMap":568},[629,31726,31727,31729,31731,31733,31735,31737,31739,31741,31743,31745,31747,31749,31751,31753,31755,31757,31759,31761],{"class":631,"line":569},[629,31728,635],{"class":634},[629,31730,253],{"class":638},[629,31732,3021],{"class":634},[629,31734,28428],{"class":642},[629,31736,649],{"class":634},[629,31738,652],{"class":634},[629,31740,19405],{"class":675},[629,31742,1866],{"class":2493},[629,31744,679],{"class":634},[629,31746,2553],{"class":2493},[629,31748,2506],{"class":675},[629,31750,652],{"class":634},[629,31752,2681],{"class":642},[629,31754,649],{"class":634},[629,31756,652],{"class":634},[629,31758,11389],{"class":655},[629,31760,652],{"class":634},[629,31762,779],{"class":634},[629,31764,31765],{"class":631,"line":570},[629,31766,734],{"emptyLinePlaceholder":586},[629,31768,31769],{"class":631,"line":700},[629,31770,31771],{"class":675},"// Plane with a custom material transformations\n",[629,31773,31774,31776,31778,31780,31782,31784,31787,31789,31791,31793,31795,31797,31799,31802,31804,31806,31808,31810,31812,31814,31816,31818,31820,31822,31824,31826,31828,31830,31832,31834],{"class":631,"line":721},[629,31775,635],{"class":634},[629,31777,253],{"class":638},[629,31779,3864],{"class":642},[629,31781,649],{"class":634},[629,31783,652],{"class":634},[629,31785,31786],{"class":655},"planeRef",[629,31788,652],{"class":634},[629,31790,3021],{"class":634},[629,31792,28428],{"class":642},[629,31794,649],{"class":634},[629,31796,652],{"class":634},[629,31798,19405],{"class":675},[629,31800,31801],{"class":2493},"8",[629,31803,679],{"class":634},[629,31805,29300],{"class":2493},[629,31807,2506],{"class":675},[629,31809,652],{"class":634},[629,31811,3021],{"class":634},[629,31813,4122],{"class":642},[629,31815,649],{"class":634},[629,31817,652],{"class":634},[629,31819,19405],{"class":675},[629,31821,957],{"class":2493},[629,31823,679],{"class":634},[629,31825,28526],{"class":2493},[629,31827,679],{"class":634},[629,31829,2498],{"class":2493},[629,31831,2506],{"class":675},[629,31833,652],{"class":634},[629,31835,661],{"class":634},[629,31837,31838],{"class":631,"line":731},[629,31839,28541],{"class":675},[629,31841,31842,31844,31846],{"class":631,"line":737},[629,31843,724],{"class":634},[629,31845,253],{"class":638},[629,31847,661],{"class":634},[1319,31849,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":31851},[31852],{"id":616,"depth":570,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":253,"description":31853},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":31858,"title":257,"body":31859,"description":32213,"extension":583,"links":584,"meta":32214,"navigation":586,"path":258,"seo":32215,"stem":259,"__hash__":32216},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":493,"value":31860,"toc":32209},[31861,31866,31874,31876,32111,32113,32121,32207],[2287,31862,31863],{},[31864,31865],"shapes-quadratic-bezier-line",{},[606,31867,31868,29428,31871,31873],{},[610,31869,31870],{},"\u003CQuadraticBezierLine />",[610,31872,28592],{}," between start and end points, with an optional control point.",[496,31875,15],{"id":616},[618,31877,31879],{"className":620,"code":31878,"language":625,"meta":568,"style":568},"\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",[610,31880,31881,31901,31919,31938,31956,31964,31968,31976,31984,32002,32009,32021,32033,32047,32059,32071,32083,32087,32095,32103],{"__ignoreMap":568},[629,31882,31883,31885,31887,31889,31891,31893,31895,31897,31899],{"class":631,"line":569},[629,31884,635],{"class":634},[629,31886,639],{"class":638},[629,31888,643],{"class":642},[629,31890,646],{"class":642},[629,31892,649],{"class":634},[629,31894,652],{"class":634},[629,31896,656],{"class":655},[629,31898,652],{"class":634},[629,31900,661],{"class":634},[629,31902,31903,31905,31907,31909,31911,31913,31915,31917],{"class":631,"line":570},[629,31904,669],{"class":668},[629,31906,672],{"class":634},[629,31908,707],{"class":675},[629,31910,685],{"class":634},[629,31912,688],{"class":668},[629,31914,691],{"class":634},[629,31916,716],{"class":655},[629,31918,697],{"class":634},[629,31920,31921,31923,31925,31928,31930,31932,31934,31936],{"class":631,"line":700},[629,31922,669],{"class":668},[629,31924,672],{"class":634},[629,31926,31927],{"class":675}," QuadraticBezierLine",[629,31929,685],{"class":634},[629,31931,688],{"class":668},[629,31933,691],{"class":634},[629,31935,694],{"class":655},[629,31937,697],{"class":634},[629,31939,31940,31942,31944,31946,31948,31950,31952,31954],{"class":631,"line":721},[629,31941,669],{"class":668},[629,31943,672],{"class":634},[629,31945,28674],{"class":675},[629,31947,685],{"class":634},[629,31949,688],{"class":668},[629,31951,691],{"class":634},[629,31953,4618],{"class":655},[629,31955,697],{"class":634},[629,31957,31958,31960,31962],{"class":631,"line":731},[629,31959,724],{"class":634},[629,31961,639],{"class":638},[629,31963,661],{"class":634},[629,31965,31966],{"class":631,"line":737},[629,31967,734],{"emptyLinePlaceholder":586},[629,31969,31970,31972,31974],{"class":631,"line":747},[629,31971,635],{"class":634},[629,31973,742],{"class":638},[629,31975,661],{"class":634},[629,31977,31978,31980,31982],{"class":631,"line":770},[629,31979,750],{"class":634},[629,31981,753],{"class":638},[629,31983,661],{"class":634},[629,31985,31986,31988,31990,31992,31994,31996,31998,32000],{"class":631,"line":782},[629,31987,773],{"class":634},[629,31989,776],{"class":638},[629,31991,1477],{"class":642},[629,31993,649],{"class":634},[629,31995,652],{"class":634},[629,31997,11342],{"class":655},[629,31999,652],{"class":634},[629,32001,779],{"class":634},[629,32003,32004,32006],{"class":631,"line":792},[629,32005,773],{"class":634},[629,32007,32008],{"class":638},"QuadraticBezierLine\n",[629,32010,32011,32013,32015,32017,32019],{"class":631,"line":797},[629,32012,29571],{"class":642},[629,32014,649],{"class":634},[629,32016,652],{"class":634},[629,32018,29578],{"class":655},[629,32020,3123],{"class":634},[629,32022,32023,32025,32027,32029,32031],{"class":631,"line":819},[629,32024,29585],{"class":642},[629,32026,649],{"class":634},[629,32028,652],{"class":634},[629,32030,29592],{"class":655},[629,32032,3123],{"class":634},[629,32034,32035,32038,32040,32042,32045],{"class":631,"line":623},[629,32036,32037],{"class":642}," :mid",[629,32039,649],{"class":634},[629,32041,652],{"class":634},[629,32043,32044],{"class":655},"new Vector3(0, 1, 0)",[629,32046,3123],{"class":634},[629,32048,32049,32051,32053,32055,32057],{"class":631,"line":842},[629,32050,28759],{"class":642},[629,32052,649],{"class":634},[629,32054,652],{"class":634},[629,32056,9437],{"class":655},[629,32058,3123],{"class":634},[629,32060,32061,32063,32065,32067,32069],{"class":631,"line":853},[629,32062,28773],{"class":642},[629,32064,649],{"class":634},[629,32066,652],{"class":634},[629,32068,11389],{"class":655},[629,32070,3123],{"class":634},[629,32072,32073,32075,32077,32079,32081],{"class":631,"line":864},[629,32074,28787],{"class":642},[629,32076,649],{"class":634},[629,32078,652],{"class":634},[629,32080,19465],{"class":655},[629,32082,3123],{"class":634},[629,32084,32085],{"class":631,"line":874},[629,32086,15338],{"class":634},[629,32088,32089,32091,32093],{"class":631,"line":624},[629,32090,773],{"class":634},[629,32092,8448],{"class":638},[629,32094,779],{"class":634},[629,32096,32097,32099,32101],{"class":631,"line":894},[629,32098,897],{"class":634},[629,32100,753],{"class":638},[629,32102,661],{"class":634},[629,32104,32105,32107,32109],{"class":631,"line":904},[629,32106,724],{"class":634},[629,32108,742],{"class":638},[629,32110,661],{"class":634},[496,32112,914],{"id":913},[606,32114,32115,29693,32117,7211,32119,1138],{},[610,32116,31870],{},[610,32118,28846],{},[610,32120,28592],{},[919,32122,32123,32137],{},[922,32124,32125],{},[925,32126,32127,32129,32131,32133,32135],{},[928,32128,930],{},[928,32130,5961],{},[928,32132,933],{},[928,32134,936],{},[928,32136,16657],{},[938,32138,32139,32156,32172,32191],{},[925,32140,32141,32145,32149,32151,32153],{},[943,32142,32143],{},[610,32144,12372],{},[943,32146,32147],{},[610,32148,29724],{},[943,32150,29727],{},[943,32152],{},[943,32154,32155],{},"yes",[925,32157,32158,32162,32166,32168,32170],{},[943,32159,32160],{},[610,32161,12386],{},[943,32163,32164],{},[610,32165,29724],{},[943,32167,29742],{},[943,32169],{},[943,32171,32155],{},[925,32173,32174,32179,32183,32186,32188],{},[943,32175,32176],{},[610,32177,32178],{},"mid",[943,32180,32181],{},[610,32182,29724],{},[943,32184,32185],{},"Control point",[943,32187],{},[943,32189,32190],{},"no",[925,32192,32193,32197,32201,32203,32205],{},[943,32194,32195],{},[610,32196,28861],{},[943,32198,32199],{},[610,32200,5344],{},[943,32202,28868],{},[943,32204,28871],{},[943,32206,32190],{},[1319,32208,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":32210},[32211,32212],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Renders a Line2 between start and end points with an optional control point.",{},{"title":257,"description":32213},"hH6Hhkz4HlI9pLG1_7W6Yd5ehTKlLTzjWtTfZEcye0I",{"id":32218,"title":261,"body":32219,"description":32390,"extension":583,"links":584,"meta":32391,"navigation":586,"path":262,"seo":32392,"stem":263,"__hash__":32393},"docs/2.api/5.shapes/ring.md",{"type":493,"value":32220,"toc":32387},[32221,32226,32236,32242,32248,32250,32385],[600,32222,32223],{},[32224,32225],"shapes-ring",{},[606,32227,2768,32228,8235,32230,28392,32233,1138],{},[610,32229,7309],{},[610,32231,32232],{},"\u003CRing />",[610,32234,32235],{},"RingGeometry",[618,32237,32240],{"className":32238,"code":32239,"language":28401},[28399],"args: [\n innerRadius: number,\n outerRadius: number,\n thetaSegments: number,\n phiSegments: number,\n thetaStart: number,\n thetaLength: number\n]\n",[610,32241,32239],{"__ignoreMap":568},[606,32243,28406,32244],{},[1132,32245,32235],{"href":32246,"rel":32247},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1136],[496,32249,15],{"id":616},[618,32251,32253],{"className":620,"code":32252,"language":625,"meta":568,"style":568},"\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",[610,32254,32255,32297,32301,32306,32373,32377],{"__ignoreMap":568},[629,32256,32257,32259,32261,32263,32265,32267,32269,32271,32273,32275,32277,32279,32281,32283,32285,32287,32289,32291,32293,32295],{"class":631,"line":569},[629,32258,635],{"class":634},[629,32260,261],{"class":638},[629,32262,3021],{"class":634},[629,32264,28428],{"class":642},[629,32266,649],{"class":634},[629,32268,652],{"class":634},[629,32270,19405],{"class":675},[629,32272,1938],{"class":2493},[629,32274,679],{"class":634},[629,32276,2553],{"class":2493},[629,32278,679],{"class":634},[629,32280,29126],{"class":2493},[629,32282,2506],{"class":675},[629,32284,652],{"class":634},[629,32286,2681],{"class":642},[629,32288,649],{"class":634},[629,32290,652],{"class":634},[629,32292,11389],{"class":655},[629,32294,652],{"class":634},[629,32296,779],{"class":634},[629,32298,32299],{"class":631,"line":570},[629,32300,734],{"emptyLinePlaceholder":586},[629,32302,32303],{"class":631,"line":700},[629,32304,32305],{"class":675},"// Ring with a custom material transformations\n",[629,32307,32308,32310,32312,32314,32316,32318,32321,32323,32325,32327,32329,32331,32333,32335,32337,32339,32341,32343,32345,32347,32349,32351,32353,32355,32357,32359,32361,32363,32365,32367,32369,32371],{"class":631,"line":721},[629,32309,635],{"class":634},[629,32311,261],{"class":638},[629,32313,3864],{"class":642},[629,32315,649],{"class":634},[629,32317,652],{"class":634},[629,32319,32320],{"class":655},"ringRef",[629,32322,652],{"class":634},[629,32324,3021],{"class":634},[629,32326,28428],{"class":642},[629,32328,649],{"class":634},[629,32330,652],{"class":634},[629,32332,19405],{"class":675},[629,32334,1938],{"class":2493},[629,32336,679],{"class":634},[629,32338,2553],{"class":2493},[629,32340,679],{"class":634},[629,32342,29126],{"class":2493},[629,32344,2506],{"class":675},[629,32346,652],{"class":634},[629,32348,3021],{"class":634},[629,32350,4122],{"class":642},[629,32352,649],{"class":634},[629,32354,652],{"class":634},[629,32356,19405],{"class":675},[629,32358,812],{"class":2493},[629,32360,679],{"class":634},[629,32362,28526],{"class":2493},[629,32364,679],{"class":634},[629,32366,2498],{"class":2493},[629,32368,2506],{"class":675},[629,32370,652],{"class":634},[629,32372,661],{"class":634},[629,32374,32375],{"class":631,"line":731},[629,32376,28541],{"class":675},[629,32378,32379,32381,32383],{"class":631,"line":737},[629,32380,724],{"class":634},[629,32382,261],{"class":638},[629,32384,661],{"class":634},[1319,32386,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":32388},[32389],{"id":616,"depth":570,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":32390},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":32395,"title":265,"body":32396,"description":32552,"extension":583,"links":584,"meta":32553,"navigation":586,"path":266,"seo":32554,"stem":267,"__hash__":32555},"docs/2.api/5.shapes/rounded-box.md",{"type":493,"value":32397,"toc":32549},[32398,32403,32414,32420,32426,32428,32547],[600,32399,32400],{},[32401,32402],"shapes-rounded-box",{},[606,32404,2768,32405,8235,32407,28392,32410,32413],{},[610,32406,7309],{},[610,32408,32409],{},"\u003CRoundedBox />",[610,32411,32412],{},"RoundedBoxGeometry"," .",[618,32415,32418],{"className":32416,"code":32417,"language":28401},[28399],"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",[610,32419,32417],{"__ignoreMap":568},[606,32421,28406,32422],{},[1132,32423,32412],{"href":32424,"rel":32425},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1136],[496,32427,15],{"id":616},[618,32429,32431],{"className":620,"code":32430,"language":625,"meta":568,"style":568},"\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",[610,32432,32433,32484,32488,32493,32535,32539],{"__ignoreMap":568},[629,32434,32435,32437,32440,32442,32444,32446,32448,32450,32452,32454,32456,32458,32460,32462,32464,32466,32468,32470,32472,32474,32476,32478,32480,32482],{"class":631,"line":569},[629,32436,635],{"class":634},[629,32438,32439],{"class":638},"RoundedBox",[629,32441,3021],{"class":634},[629,32443,28428],{"class":642},[629,32445,649],{"class":634},[629,32447,652],{"class":634},[629,32449,19405],{"class":675},[629,32451,1866],{"class":2493},[629,32453,679],{"class":634},[629,32455,2553],{"class":2493},[629,32457,679],{"class":634},[629,32459,2553],{"class":2493},[629,32461,679],{"class":634},[629,32463,29895],{"class":2493},[629,32465,679],{"class":634},[629,32467,21659],{"class":2493},[629,32469,2506],{"class":675},[629,32471,652],{"class":634},[629,32473,2681],{"class":642},[629,32475,649],{"class":634},[629,32477,652],{"class":634},[629,32479,11389],{"class":655},[629,32481,652],{"class":634},[629,32483,779],{"class":634},[629,32485,32486],{"class":631,"line":570},[629,32487,734],{"emptyLinePlaceholder":586},[629,32489,32490],{"class":631,"line":700},[629,32491,32492],{"class":675},"// RoundedBox with a custom material transformations\n",[629,32494,32495,32497,32499,32501,32503,32505,32507,32509,32511,32513,32515,32517,32519,32521,32523,32525,32527,32529,32531,32533],{"class":631,"line":721},[629,32496,635],{"class":634},[629,32498,32439],{"class":638},[629,32500,3864],{"class":642},[629,32502,649],{"class":634},[629,32504,652],{"class":634},[629,32506,14398],{"class":655},[629,32508,652],{"class":634},[629,32510,3021],{"class":634},[629,32512,4122],{"class":642},[629,32514,649],{"class":634},[629,32516,652],{"class":634},[629,32518,19405],{"class":675},[629,32520,957],{"class":2493},[629,32522,679],{"class":634},[629,32524,28526],{"class":2493},[629,32526,679],{"class":634},[629,32528,2498],{"class":2493},[629,32530,2506],{"class":675},[629,32532,652],{"class":634},[629,32534,661],{"class":634},[629,32536,32537],{"class":631,"line":731},[629,32538,28541],{"class":675},[629,32540,32541,32543,32545],{"class":631,"line":737},[629,32542,724],{"class":634},[629,32544,32439],{"class":638},[629,32546,661],{"class":634},[1319,32548,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":32550},[32551],{"id":616,"depth":570,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":265,"description":32552},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":32557,"title":269,"body":32558,"description":32713,"extension":583,"links":584,"meta":32714,"navigation":586,"path":270,"seo":32715,"stem":271,"__hash__":32716},"docs/2.api/5.shapes/rounded-plane.md",{"type":493,"value":32559,"toc":32710},[32560,32565,32582,32588,32590,32708],[600,32561,32562],{},[32563,32564],"shapes-rounded-plane",{},[606,32566,2768,32567,8235,32569,28392,32572,32575,32576,32581],{},[610,32568,7309],{},[610,32570,32571],{},"\u003CRoundedPlane />",[610,32573,32574],{},"RoundedPlaneGeometry",": a plane with rounded corners. The geometry is vendored from ",[1132,32577,32580],{"href":32578,"rel":32579},"https://github.com/pmndrs/maath/blob/main/packages/maath/src/geometry.ts",[1136],"pmndrs/maath"," (MIT), so it ships with no extra dependency.",[618,32583,32586],{"className":32584,"code":32585,"language":28401},[28399],"args: [\n width: number, // default 1\n height: number, // default 1\n radius: number, // default 0.2\n segments: number, // default 16\n]\n",[610,32587,32585],{"__ignoreMap":568},[496,32589,15],{"id":616},[618,32591,32593],{"className":620,"code":32592,"language":625,"meta":568,"style":568},"\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",[610,32594,32595,32644,32648,32653,32695,32700],{"__ignoreMap":568},[629,32596,32597,32599,32602,32604,32606,32608,32610,32612,32614,32616,32618,32620,32623,32625,32628,32630,32632,32634,32636,32638,32640,32642],{"class":631,"line":569},[629,32598,635],{"class":634},[629,32600,32601],{"class":638},"RoundedPlane",[629,32603,3021],{"class":634},[629,32605,28428],{"class":642},[629,32607,649],{"class":634},[629,32609,652],{"class":634},[629,32611,19405],{"class":675},[629,32613,27474],{"class":2493},[629,32615,679],{"class":634},[629,32617,2553],{"class":2493},[629,32619,679],{"class":634},[629,32621,32622],{"class":2493}," 0.2",[629,32624,679],{"class":634},[629,32626,32627],{"class":2493}," 16",[629,32629,2506],{"class":675},[629,32631,652],{"class":634},[629,32633,2681],{"class":642},[629,32635,649],{"class":634},[629,32637,652],{"class":634},[629,32639,11389],{"class":655},[629,32641,652],{"class":634},[629,32643,779],{"class":634},[629,32645,32646],{"class":631,"line":570},[629,32647,734],{"emptyLinePlaceholder":586},[629,32649,32650],{"class":631,"line":700},[629,32651,32652],{"class":675},"// RoundedPlane with a custom material\n",[629,32654,32655,32657,32659,32661,32663,32665,32667,32669,32671,32673,32675,32677,32679,32681,32683,32685,32687,32689,32691,32693],{"class":631,"line":721},[629,32656,635],{"class":634},[629,32658,32601],{"class":638},[629,32660,3864],{"class":642},[629,32662,649],{"class":634},[629,32664,652],{"class":634},[629,32666,31786],{"class":655},[629,32668,652],{"class":634},[629,32670,3021],{"class":634},[629,32672,4122],{"class":642},[629,32674,649],{"class":634},[629,32676,652],{"class":634},[629,32678,19405],{"class":675},[629,32680,957],{"class":2493},[629,32682,679],{"class":634},[629,32684,28526],{"class":2493},[629,32686,679],{"class":634},[629,32688,2498],{"class":2493},[629,32690,2506],{"class":675},[629,32692,652],{"class":634},[629,32694,661],{"class":634},[629,32696,32697],{"class":631,"line":731},[629,32698,32699],{"class":675}," \u003CTresMeshStandardMaterial color=\"orange\" />\n",[629,32701,32702,32704,32706],{"class":631,"line":737},[629,32703,724],{"class":634},[629,32705,32601],{"class":638},[629,32707,661],{"class":634},[1319,32709,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":32711},[32712],{"id":616,"depth":570,"text":15},"Short-cut for a RoundedPlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":32713},"HH5158_07Il55CXeB5dFOKuUS3I52MwiYYeqEjcgDoM",{"id":32718,"title":273,"body":32719,"description":32907,"extension":583,"links":584,"meta":32908,"navigation":586,"path":274,"seo":32909,"stem":275,"__hash__":32910},"docs/2.api/5.shapes/screen-quad.md",{"type":493,"value":32720,"toc":32903},[32721,32726,32729,32731,32881,32885,32901],[2287,32722,32723],{},[32724,32725],"shapes-screen-quad",{},[606,32727,32728],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[496,32730,15],{"id":616},[618,32732,32734],{"className":620,"code":32733,"language":625,"meta":568,"style":568},"\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",[610,32735,32736,32756,32774,32793,32801,32805,32813,32821,32830,32839,32857,32865,32873],{"__ignoreMap":568},[629,32737,32738,32740,32742,32744,32746,32748,32750,32752,32754],{"class":631,"line":569},[629,32739,635],{"class":634},[629,32741,639],{"class":638},[629,32743,643],{"class":642},[629,32745,646],{"class":642},[629,32747,649],{"class":634},[629,32749,652],{"class":634},[629,32751,656],{"class":655},[629,32753,652],{"class":634},[629,32755,661],{"class":634},[629,32757,32758,32760,32762,32764,32766,32768,32770,32772],{"class":631,"line":570},[629,32759,669],{"class":668},[629,32761,672],{"class":634},[629,32763,707],{"class":675},[629,32765,685],{"class":634},[629,32767,688],{"class":668},[629,32769,691],{"class":634},[629,32771,716],{"class":655},[629,32773,697],{"class":634},[629,32775,32776,32778,32780,32783,32785,32787,32789,32791],{"class":631,"line":700},[629,32777,669],{"class":668},[629,32779,672],{"class":634},[629,32781,32782],{"class":675}," ScreenQuad",[629,32784,685],{"class":634},[629,32786,688],{"class":668},[629,32788,691],{"class":634},[629,32790,694],{"class":655},[629,32792,697],{"class":634},[629,32794,32795,32797,32799],{"class":631,"line":721},[629,32796,724],{"class":634},[629,32798,639],{"class":638},[629,32800,661],{"class":634},[629,32802,32803],{"class":631,"line":731},[629,32804,734],{"emptyLinePlaceholder":586},[629,32806,32807,32809,32811],{"class":631,"line":737},[629,32808,635],{"class":634},[629,32810,742],{"class":638},[629,32812,661],{"class":634},[629,32814,32815,32817,32819],{"class":631,"line":747},[629,32816,750],{"class":634},[629,32818,753],{"class":638},[629,32820,661],{"class":634},[629,32822,32823,32825,32828],{"class":631,"line":770},[629,32824,773],{"class":634},[629,32826,32827],{"class":638},"TresOrthographicCamera",[629,32829,779],{"class":634},[629,32831,32832,32834,32837],{"class":631,"line":782},[629,32833,773],{"class":634},[629,32835,32836],{"class":638},"ScreenQuad",[629,32838,661],{"class":634},[629,32840,32841,32843,32845,32847,32849,32851,32853,32855],{"class":631,"line":792},[629,32842,845],{"class":634},[629,32844,11380],{"class":638},[629,32846,2681],{"class":642},[629,32848,649],{"class":634},[629,32850,652],{"class":634},[629,32852,11389],{"class":655},[629,32854,652],{"class":634},[629,32856,779],{"class":634},[629,32858,32859,32861,32863],{"class":631,"line":797},[629,32860,887],{"class":634},[629,32862,32836],{"class":638},[629,32864,661],{"class":634},[629,32866,32867,32869,32871],{"class":631,"line":819},[629,32868,897],{"class":634},[629,32870,753],{"class":638},[629,32872,661],{"class":634},[629,32874,32875,32877,32879],{"class":631,"line":623},[629,32876,724],{"class":634},[629,32878,742],{"class":638},[629,32880,661],{"class":634},[496,32882,32884],{"id":32883},"references","References",[2205,32886,32887,32894],{},[2208,32888,32889],{},[1132,32890,32893],{"href":32891,"rel":32892},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1136],"Why a triangle?",[2208,32895,32896],{},[1132,32897,32900],{"href":32898,"rel":32899},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1136],"Simple postprocessing in Three.js",[1319,32902,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":32904},[32905,32906],{"id":616,"depth":570,"text":15},{"id":32883,"depth":570,"text":32884},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":273,"description":32907},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":32912,"title":277,"body":32913,"description":33083,"extension":583,"links":584,"meta":33084,"navigation":586,"path":278,"seo":33085,"stem":279,"__hash__":33086},"docs/2.api/5.shapes/sphere.md",{"type":493,"value":32914,"toc":33080},[32915,32920,32930,32936,32942,32944,33078],[600,32916,32917],{},[32918,32919],"shapes-sphere",{},[606,32921,2768,32922,8235,32924,28392,32927,1138],{},[610,32923,7309],{},[610,32925,32926],{},"\u003CSphere />",[610,32928,32929],{},"SphereGeometry",[618,32931,32934],{"className":32932,"code":32933,"language":28401},[28399],"args: [\n radius: number,\n widthSegments: number,\n heightSegments: number,\n phiStart: number,\n phiLength: number,\n thetaStart: number,\n thetaLength: number\n]\n",[610,32935,32933],{"__ignoreMap":568},[606,32937,28406,32938],{},[1132,32939,32929],{"href":32940,"rel":32941},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1136],[496,32943,15],{"id":616},[618,32945,32947],{"className":620,"code":32946,"language":625,"meta":568,"style":568},"\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",[610,32948,32949,32991,32995,33000,33066,33070],{"__ignoreMap":568},[629,32950,32951,32953,32955,32957,32959,32961,32963,32965,32967,32969,32971,32973,32975,32977,32979,32981,32983,32985,32987,32989],{"class":631,"line":569},[629,32952,635],{"class":634},[629,32954,277],{"class":638},[629,32956,3021],{"class":634},[629,32958,28428],{"class":642},[629,32960,649],{"class":634},[629,32962,652],{"class":634},[629,32964,19405],{"class":675},[629,32966,1866],{"class":2493},[629,32968,679],{"class":634},[629,32970,2553],{"class":2493},[629,32972,679],{"class":634},[629,32974,2553],{"class":2493},[629,32976,2506],{"class":675},[629,32978,652],{"class":634},[629,32980,2681],{"class":642},[629,32982,649],{"class":634},[629,32984,652],{"class":634},[629,32986,11389],{"class":655},[629,32988,652],{"class":634},[629,32990,779],{"class":634},[629,32992,32993],{"class":631,"line":570},[629,32994,734],{"emptyLinePlaceholder":586},[629,32996,32997],{"class":631,"line":700},[629,32998,32999],{"class":675},"// Sphere with a custom material transformations\n",[629,33001,33002,33004,33006,33008,33010,33012,33014,33016,33018,33020,33022,33024,33026,33028,33030,33032,33034,33036,33038,33040,33042,33044,33046,33048,33050,33052,33054,33056,33058,33060,33062,33064],{"class":631,"line":721},[629,33003,635],{"class":634},[629,33005,277],{"class":638},[629,33007,3864],{"class":642},[629,33009,649],{"class":634},[629,33011,652],{"class":634},[629,33013,31786],{"class":655},[629,33015,652],{"class":634},[629,33017,3021],{"class":634},[629,33019,28428],{"class":642},[629,33021,649],{"class":634},[629,33023,652],{"class":634},[629,33025,19405],{"class":675},[629,33027,1866],{"class":2493},[629,33029,679],{"class":634},[629,33031,2553],{"class":2493},[629,33033,679],{"class":634},[629,33035,2553],{"class":2493},[629,33037,2506],{"class":675},[629,33039,652],{"class":634},[629,33041,3021],{"class":634},[629,33043,4122],{"class":642},[629,33045,649],{"class":634},[629,33047,652],{"class":634},[629,33049,19405],{"class":675},[629,33051,812],{"class":2493},[629,33053,679],{"class":634},[629,33055,28526],{"class":2493},[629,33057,679],{"class":634},[629,33059,2498],{"class":2493},[629,33061,2506],{"class":675},[629,33063,652],{"class":634},[629,33065,661],{"class":634},[629,33067,33068],{"class":631,"line":731},[629,33069,28541],{"class":675},[629,33071,33072,33074,33076],{"class":631,"line":737},[629,33073,724],{"class":634},[629,33075,277],{"class":638},[629,33077,661],{"class":634},[1319,33079,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":33081},[33082],{"id":616,"depth":570,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":33083},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":33088,"title":281,"body":33089,"description":33487,"extension":583,"links":584,"meta":33488,"navigation":586,"path":282,"seo":33489,"stem":283,"__hash__":33490},"docs/2.api/5.shapes/superformula.md",{"type":493,"value":33090,"toc":33482},[33091,33096,33109,33111,33347,33349,33359,33471,33475,33480],[600,33092,33093],{},[33094,33095],"shapes-super-formula",{},[606,33097,2768,33098,8235,33100,33103,33104,1138],{},[610,33099,7309],{},[610,33101,33102],{},"\u003CSuperformula />"," component that produces a configurable ",[1132,33105,33108],{"href":33106,"rel":33107},"https://en.wikipedia.org/wiki/Superformula",[1136],"3D plot of the superformula",[496,33110,15],{"id":616},[618,33112,33115],{"className":620,"code":33113,"highlights":33114,"language":625,"meta":568,"style":568},"\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",[700,782,792,797,819,623,842],[610,33116,33117,33137,33155,33175,33183,33187,33195,33203,33221,33229,33244,33258,33272,33287,33301,33305,33313,33331,33339],{"__ignoreMap":568},[629,33118,33119,33121,33123,33125,33127,33129,33131,33133,33135],{"class":631,"line":569},[629,33120,635],{"class":634},[629,33122,639],{"class":638},[629,33124,643],{"class":642},[629,33126,646],{"class":642},[629,33128,649],{"class":634},[629,33130,652],{"class":634},[629,33132,656],{"class":655},[629,33134,652],{"class":634},[629,33136,661],{"class":634},[629,33138,33139,33141,33143,33145,33147,33149,33151,33153],{"class":631,"line":570},[629,33140,669],{"class":668},[629,33142,672],{"class":634},[629,33144,707],{"class":675},[629,33146,685],{"class":634},[629,33148,688],{"class":668},[629,33150,691],{"class":634},[629,33152,716],{"class":655},[629,33154,697],{"class":634},[629,33156,33158,33160,33162,33165,33167,33169,33171,33173],{"class":33157,"line":700},[631,665],[629,33159,669],{"class":668},[629,33161,672],{"class":634},[629,33163,33164],{"class":675}," Superformula",[629,33166,685],{"class":634},[629,33168,688],{"class":668},[629,33170,691],{"class":634},[629,33172,694],{"class":655},[629,33174,697],{"class":634},[629,33176,33177,33179,33181],{"class":631,"line":721},[629,33178,724],{"class":634},[629,33180,639],{"class":638},[629,33182,661],{"class":634},[629,33184,33185],{"class":631,"line":731},[629,33186,734],{"emptyLinePlaceholder":586},[629,33188,33189,33191,33193],{"class":631,"line":737},[629,33190,635],{"class":634},[629,33192,742],{"class":638},[629,33194,661],{"class":634},[629,33196,33197,33199,33201],{"class":631,"line":747},[629,33198,750],{"class":634},[629,33200,753],{"class":638},[629,33202,661],{"class":634},[629,33204,33205,33207,33209,33211,33213,33215,33217,33219],{"class":631,"line":770},[629,33206,773],{"class":634},[629,33208,776],{"class":638},[629,33210,1477],{"class":642},[629,33212,649],{"class":634},[629,33214,652],{"class":634},[629,33216,11342],{"class":655},[629,33218,652],{"class":634},[629,33220,779],{"class":634},[629,33222,33224,33226],{"class":33223,"line":782},[631,665],[629,33225,773],{"class":634},[629,33227,33228],{"class":638},"Superformula\n",[629,33230,33232,33235,33237,33239,33242],{"class":33231,"line":792},[631,665],[629,33233,33234],{"class":642}," :width-segments",[629,33236,649],{"class":634},[629,33238,652],{"class":634},[629,33240,33241],{"class":655},"64",[629,33243,3123],{"class":634},[629,33245,33247,33250,33252,33254,33256],{"class":33246,"line":797},[631,665],[629,33248,33249],{"class":642}," :height-segments",[629,33251,649],{"class":634},[629,33253,652],{"class":634},[629,33255,33241],{"class":655},[629,33257,3123],{"class":634},[629,33259,33261,33264,33266,33268,33270],{"class":33260,"line":819},[631,665],[629,33262,33263],{"class":642}," :num-arms-a",[629,33265,649],{"class":634},[629,33267,652],{"class":634},[629,33269,10771],{"class":655},[629,33271,3123],{"class":634},[629,33273,33275,33278,33280,33282,33285],{"class":33274,"line":623},[631,665],[629,33276,33277],{"class":642}," :exp-a",[629,33279,649],{"class":634},[629,33281,652],{"class":634},[629,33283,33284],{"class":655},"[40, 1.3, 0.9]",[629,33286,3123],{"class":634},[629,33288,33290,33292,33294,33296,33299],{"class":33289,"line":842},[631,665],[629,33291,28773],{"class":642},[629,33293,649],{"class":634},[629,33295,652],{"class":634},[629,33297,33298],{"class":655},"#ff6b6b",[629,33300,3123],{"class":634},[629,33302,33303],{"class":631,"line":853},[629,33304,15338],{"class":634},[629,33306,33307,33309,33311],{"class":631,"line":864},[629,33308,773],{"class":634},[629,33310,8448],{"class":638},[629,33312,779],{"class":634},[629,33314,33315,33317,33319,33321,33323,33325,33327,33329],{"class":631,"line":874},[629,33316,773],{"class":634},[629,33318,8467],{"class":638},[629,33320,1477],{"class":642},[629,33322,649],{"class":634},[629,33324,652],{"class":634},[629,33326,11424],{"class":655},[629,33328,652],{"class":634},[629,33330,779],{"class":634},[629,33332,33333,33335,33337],{"class":631,"line":624},[629,33334,897],{"class":634},[629,33336,753],{"class":638},[629,33338,661],{"class":634},[629,33340,33341,33343,33345],{"class":631,"line":894},[629,33342,724],{"class":634},[629,33344,742],{"class":638},[629,33346,661],{"class":634},[496,33348,914],{"id":913},[606,33350,2768,33351,33353,33354,33358],{},[610,33352,33102],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1132,33355,33357],{"href":33106,"rel":33356},[1136],"Wikipedia article about the superformula"," for more information about the function's arguments.",[919,33360,33361,33371],{},[922,33362,33363],{},[925,33364,33365,33367,33369],{},[928,33366,8081],{"align":989},[928,33368,933],{"align":989},[928,33370,936],{"align":989},[938,33372,33373,33388,33402,33416,33430,33444,33458],{},[925,33374,33375,33380,33383],{},[943,33376,33377],{"align":989},[1661,33378,33379],{},"widthSegments",[943,33381,33382],{"align":989},"Number of horizontal mesh segments",[943,33384,33385],{"align":989},[610,33386,33387],{},"32",[925,33389,33390,33395,33398],{},[943,33391,33392],{"align":989},[1661,33393,33394],{},"heightSegments",[943,33396,33397],{"align":989},"Number of vertical mesh segments",[943,33399,33400],{"align":989},[610,33401,33387],{},[925,33403,33404,33409,33412],{},[943,33405,33406],{"align":989},[1661,33407,33408],{},"numArmsA",[943,33410,33411],{"align":989},"For A, number of radial arms/ripples",[943,33413,33414],{"align":989},[610,33415,8420],{},[925,33417,33418,33423,33426],{},[943,33419,33420],{"align":989},[1661,33421,33422],{},"expA",[943,33424,33425],{"align":989},"A's 3 exponents",[943,33427,33428],{"align":989},[610,33429,33284],{},[925,33431,33432,33437,33440],{},[943,33433,33434],{"align":989},[1661,33435,33436],{},"numArmsB",[943,33438,33439],{"align":989},"For B, number of radial arms/ripples",[943,33441,33442],{"align":989},[610,33443,8420],{},[925,33445,33446,33451,33454],{},[943,33447,33448],{"align":989},[1661,33449,33450],{},"expB",[943,33452,33453],{"align":989},"B's 3 exponents",[943,33455,33456],{"align":989},[610,33457,33284],{},[925,33459,33460,33464,33467],{},[943,33461,33462],{"align":989},[1661,33463,7539],{},[943,33465,33466],{"align":989},"If no material is provided, a color for the default material",[943,33468,33469],{"align":989},[610,33470,28944],{},[496,33472,33474],{"id":33473},"slot","Slot",[606,33476,33477,33479],{},[610,33478,33102],{}," has a single slot for an optional material.",[1319,33481,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":33483},[33484,33485,33486],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":33473,"depth":570,"text":33474},"Produces a configurable 3D plot of the superformula.",{},{"title":281,"description":33487},"MwKL1T459MzFaCW-z9Syi59B9UEjgZjpfCi8goXNYmQ",{"id":33492,"title":285,"body":33493,"description":33655,"extension":583,"links":584,"meta":33656,"navigation":586,"path":286,"seo":33657,"stem":287,"__hash__":33658},"docs/2.api/5.shapes/tetrahedron.md",{"type":493,"value":33494,"toc":33652},[33495,33500,33510,33515,33521,33523,33650],[600,33496,33497],{},[33498,33499],"shapes-tetrahedron",{},[606,33501,2768,33502,8235,33504,28392,33507,1138],{},[610,33503,7309],{},[610,33505,33506],{},"\u003CTetrahedron />",[610,33508,33509],{},"TetrahedronGeometry",[618,33511,33513],{"className":33512,"code":30060,"language":28401},[28399],[610,33514,30060],{"__ignoreMap":568},[606,33516,28406,33517],{},[1132,33518,33509],{"href":33519,"rel":33520},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1136],[496,33522,15],{"id":616},[618,33524,33526],{"className":620,"code":33525,"language":625,"meta":568,"style":568},"\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",[610,33527,33528,33566,33570,33575,33638,33642],{"__ignoreMap":568},[629,33529,33530,33532,33534,33536,33538,33540,33542,33544,33546,33548,33550,33552,33554,33556,33558,33560,33562,33564],{"class":631,"line":569},[629,33531,635],{"class":634},[629,33533,285],{"class":638},[629,33535,3021],{"class":634},[629,33537,28428],{"class":642},[629,33539,649],{"class":634},[629,33541,652],{"class":634},[629,33543,19405],{"class":675},[629,33545,1866],{"class":2493},[629,33547,679],{"class":634},[629,33549,2498],{"class":2493},[629,33551,2506],{"class":675},[629,33553,652],{"class":634},[629,33555,2681],{"class":642},[629,33557,649],{"class":634},[629,33559,652],{"class":634},[629,33561,11389],{"class":655},[629,33563,652],{"class":634},[629,33565,779],{"class":634},[629,33567,33568],{"class":631,"line":570},[629,33569,734],{"emptyLinePlaceholder":586},[629,33571,33572],{"class":631,"line":700},[629,33573,33574],{"class":675},"// Tetrahedron with a custom material transformations\n",[629,33576,33577,33579,33581,33583,33585,33587,33590,33592,33594,33596,33598,33600,33602,33604,33606,33608,33610,33612,33614,33616,33618,33620,33622,33624,33626,33628,33630,33632,33634,33636],{"class":631,"line":721},[629,33578,635],{"class":634},[629,33580,285],{"class":638},[629,33582,3864],{"class":642},[629,33584,649],{"class":634},[629,33586,652],{"class":634},[629,33588,33589],{"class":655},"tetrahedronRef",[629,33591,652],{"class":634},[629,33593,3021],{"class":634},[629,33595,28428],{"class":642},[629,33597,649],{"class":634},[629,33599,652],{"class":634},[629,33601,19405],{"class":675},[629,33603,1866],{"class":2493},[629,33605,679],{"class":634},[629,33607,2498],{"class":2493},[629,33609,2506],{"class":675},[629,33611,652],{"class":634},[629,33613,3021],{"class":634},[629,33615,4122],{"class":642},[629,33617,649],{"class":634},[629,33619,652],{"class":634},[629,33621,19405],{"class":675},[629,33623,812],{"class":2493},[629,33625,679],{"class":634},[629,33627,28526],{"class":2493},[629,33629,679],{"class":634},[629,33631,2498],{"class":2493},[629,33633,2506],{"class":675},[629,33635,652],{"class":634},[629,33637,661],{"class":634},[629,33639,33640],{"class":631,"line":731},[629,33641,28541],{"class":675},[629,33643,33644,33646,33648],{"class":631,"line":737},[629,33645,724],{"class":634},[629,33647,285],{"class":638},[629,33649,661],{"class":634},[1319,33651,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":33653},[33654],{"id":616,"depth":570,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":285,"description":33655},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":33660,"title":289,"body":33661,"description":33846,"extension":583,"links":584,"meta":33847,"navigation":586,"path":290,"seo":33848,"stem":291,"__hash__":33849},"docs/2.api/5.shapes/torus.md",{"type":493,"value":33662,"toc":33843},[33663,33668,33678,33684,33690,33692,33841],[600,33664,33665],{},[33666,33667],"shapes-torus",{},[606,33669,2768,33670,8235,33672,28392,33675,1138],{},[610,33671,7309],{},[610,33673,33674],{},"\u003CTorus />",[610,33676,33677],{},"TorusGeometry",[618,33679,33682],{"className":33680,"code":33681,"language":28401},[28399],"args: [\n radius: number,\n tube: number,\n radialSegments: number,\n tubularSegments: number,\n arc: number\n]\n",[610,33683,33681],{"__ignoreMap":568},[606,33685,28406,33686],{},[1132,33687,33677],{"href":33688,"rel":33689},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1136],[496,33691,15],{"id":616},[618,33693,33695],{"className":620,"code":33694,"language":625,"meta":568,"style":568},"\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",[610,33696,33697,33745,33749,33754,33829,33833],{"__ignoreMap":568},[629,33698,33699,33701,33703,33705,33707,33709,33711,33713,33715,33717,33720,33722,33725,33727,33729,33731,33733,33735,33737,33739,33741,33743],{"class":631,"line":569},[629,33700,635],{"class":634},[629,33702,289],{"class":638},[629,33704,3021],{"class":634},[629,33706,28428],{"class":642},[629,33708,649],{"class":634},[629,33710,652],{"class":634},[629,33712,19405],{"class":675},[629,33714,812],{"class":2493},[629,33716,679],{"class":634},[629,33718,33719],{"class":2493}," 0.4",[629,33721,679],{"class":634},[629,33723,33724],{"class":2493}," 42",[629,33726,679],{"class":634},[629,33728,7755],{"class":2493},[629,33730,2506],{"class":675},[629,33732,652],{"class":634},[629,33734,2681],{"class":642},[629,33736,649],{"class":634},[629,33738,652],{"class":634},[629,33740,11389],{"class":655},[629,33742,652],{"class":634},[629,33744,779],{"class":634},[629,33746,33747],{"class":631,"line":570},[629,33748,734],{"emptyLinePlaceholder":586},[629,33750,33751],{"class":631,"line":700},[629,33752,33753],{"class":675},"// Torus with a custom material transformations\n",[629,33755,33756,33758,33760,33762,33764,33766,33768,33770,33772,33774,33776,33778,33780,33782,33784,33786,33788,33790,33792,33795,33797,33799,33801,33803,33805,33807,33809,33812,33814,33816,33819,33821,33823,33825,33827],{"class":631,"line":721},[629,33757,635],{"class":634},[629,33759,289],{"class":638},[629,33761,3864],{"class":642},[629,33763,649],{"class":634},[629,33765,652],{"class":634},[629,33767,10389],{"class":655},[629,33769,652],{"class":634},[629,33771,3021],{"class":634},[629,33773,28428],{"class":642},[629,33775,649],{"class":634},[629,33777,652],{"class":634},[629,33779,19405],{"class":675},[629,33781,2543],{"class":2493},[629,33783,679],{"class":634},[629,33785,33719],{"class":2493},[629,33787,679],{"class":634},[629,33789,32627],{"class":2493},[629,33791,679],{"class":634},[629,33793,33794],{"class":2493}," 80",[629,33796,2506],{"class":675},[629,33798,652],{"class":634},[629,33800,3021],{"class":634},[629,33802,4122],{"class":642},[629,33804,649],{"class":634},[629,33806,652],{"class":634},[629,33808,19405],{"class":675},[629,33810,33811],{"class":634},"-",[629,33813,812],{"class":2493},[629,33815,679],{"class":634},[629,33817,33818],{"class":2493}," 6",[629,33820,679],{"class":634},[629,33822,2498],{"class":2493},[629,33824,2506],{"class":675},[629,33826,652],{"class":634},[629,33828,661],{"class":634},[629,33830,33831],{"class":631,"line":731},[629,33832,28541],{"class":675},[629,33834,33835,33837,33839],{"class":631,"line":737},[629,33836,724],{"class":634},[629,33838,289],{"class":638},[629,33840,661],{"class":634},[1319,33842,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":33844},[33845],{"id":616,"depth":570,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":289,"description":33846},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":33851,"title":293,"body":33852,"description":34035,"extension":583,"links":584,"meta":34036,"navigation":586,"path":294,"seo":34037,"stem":295,"__hash__":34038},"docs/2.api/5.shapes/torus-knot.md",{"type":493,"value":33853,"toc":34032},[33854,33859,33869,33875,33881,33883,34030],[600,33855,33856],{},[33857,33858],"shapes-torus-knot",{},[606,33860,2768,33861,8235,33863,28392,33866,1138],{},[610,33862,7309],{},[610,33864,33865],{},"\u003CTorusKnot />",[610,33867,33868],{},"TorusKnotGeometry",[618,33870,33873],{"className":33871,"code":33872,"language":28401},[28399],"args: [\n radius: number,\n tube: number,\n tubularSegments: number,\n radialSegments: number,\n p: number,\n q: number\n]\n",[610,33874,33872],{"__ignoreMap":568},[606,33876,28406,33877],{},[1132,33878,33868],{"href":33879,"rel":33880},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1136],[496,33882,15],{"id":616},[618,33884,33886],{"className":620,"code":33885,"language":625,"meta":568,"style":568},"\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",[610,33887,33888,33936,33940,33945,34018,34022],{"__ignoreMap":568},[629,33889,33890,33892,33895,33897,33899,33901,33903,33905,33907,33909,33911,33913,33916,33918,33920,33922,33924,33926,33928,33930,33932,33934],{"class":631,"line":569},[629,33891,635],{"class":634},[629,33893,33894],{"class":638},"TorusKnot",[629,33896,3021],{"class":634},[629,33898,28428],{"class":642},[629,33900,649],{"class":634},[629,33902,652],{"class":634},[629,33904,19405],{"class":675},[629,33906,28259],{"class":2493},[629,33908,679],{"class":634},[629,33910,32622],{"class":2493},[629,33912,679],{"class":634},[629,33914,33915],{"class":2493}," 64",[629,33917,679],{"class":634},[629,33919,29300],{"class":2493},[629,33921,2506],{"class":675},[629,33923,652],{"class":634},[629,33925,2681],{"class":642},[629,33927,649],{"class":634},[629,33929,652],{"class":634},[629,33931,11389],{"class":655},[629,33933,652],{"class":634},[629,33935,779],{"class":634},[629,33937,33938],{"class":631,"line":570},[629,33939,734],{"emptyLinePlaceholder":586},[629,33941,33942],{"class":631,"line":700},[629,33943,33944],{"class":675},"// TorusKnot with a custom material transformations\n",[629,33946,33947,33949,33951,33953,33955,33957,33960,33962,33964,33966,33968,33970,33972,33974,33976,33978,33980,33982,33984,33986,33988,33990,33992,33994,33996,33998,34000,34002,34004,34006,34008,34010,34012,34014,34016],{"class":631,"line":721},[629,33948,635],{"class":634},[629,33950,33894],{"class":638},[629,33952,3864],{"class":642},[629,33954,649],{"class":634},[629,33956,652],{"class":634},[629,33958,33959],{"class":655},"torusKnotRef",[629,33961,652],{"class":634},[629,33963,3021],{"class":634},[629,33965,28428],{"class":642},[629,33967,649],{"class":634},[629,33969,652],{"class":634},[629,33971,19405],{"class":675},[629,33973,28259],{"class":2493},[629,33975,679],{"class":634},[629,33977,32622],{"class":2493},[629,33979,679],{"class":634},[629,33981,33915],{"class":2493},[629,33983,679],{"class":634},[629,33985,29300],{"class":2493},[629,33987,2506],{"class":675},[629,33989,652],{"class":634},[629,33991,3021],{"class":634},[629,33993,4122],{"class":642},[629,33995,649],{"class":634},[629,33997,652],{"class":634},[629,33999,19405],{"class":675},[629,34001,33811],{"class":634},[629,34003,812],{"class":2493},[629,34005,679],{"class":634},[629,34007,33818],{"class":2493},[629,34009,679],{"class":634},[629,34011,29895],{"class":2493},[629,34013,2506],{"class":675},[629,34015,652],{"class":634},[629,34017,661],{"class":634},[629,34019,34020],{"class":631,"line":731},[629,34021,28541],{"class":675},[629,34023,34024,34026,34028],{"class":631,"line":737},[629,34025,724],{"class":634},[629,34027,33894],{"class":638},[629,34029,661],{"class":634},[1319,34031,28552],{},{"title":568,"searchDepth":569,"depth":570,"links":34033},[34034],{"id":616,"depth":570,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":293,"description":34035},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":34040,"title":297,"body":34041,"description":34416,"extension":583,"links":584,"meta":34417,"navigation":586,"path":298,"seo":34418,"stem":299,"__hash__":34419},"docs/2.api/5.shapes/tube.md",{"type":493,"value":34042,"toc":34412},[34043,34048,34058,34064,34066,34400,34403,34409],[600,34044,34045],{},[34046,34047],"shapes-tube",{},[606,34049,2768,34050,8235,34052,28392,34055,1138],{},[610,34051,7309],{},[610,34053,34054],{},"\u003CTube />",[610,34056,34057],{},"TubeGeometry",[606,34059,28406,34060],{},[1132,34061,34057],{"href":34062,"rel":34063},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1136],[496,34065,15],{"id":616},[618,34067,34069],{"className":620,"code":34068,"language":625,"meta":568,"style":568},"\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",[610,34070,34071,34091,34110,34133,34151,34155,34175,34200,34227,34249,34271,34275,34283,34287,34295,34300,34329,34333,34338,34366,34384,34392],{"__ignoreMap":568},[629,34072,34073,34075,34077,34079,34081,34083,34085,34087,34089],{"class":631,"line":569},[629,34074,635],{"class":634},[629,34076,639],{"class":638},[629,34078,643],{"class":642},[629,34080,646],{"class":642},[629,34082,649],{"class":634},[629,34084,652],{"class":634},[629,34086,656],{"class":655},[629,34088,652],{"class":634},[629,34090,661],{"class":634},[629,34092,34093,34095,34097,34100,34102,34104,34106,34108],{"class":631,"line":570},[629,34094,669],{"class":668},[629,34096,672],{"class":634},[629,34098,34099],{"class":675}," Tube",[629,34101,685],{"class":634},[629,34103,688],{"class":668},[629,34105,691],{"class":634},[629,34107,694],{"class":655},[629,34109,697],{"class":634},[629,34111,34112,34114,34116,34119,34121,34123,34125,34127,34129,34131],{"class":631,"line":700},[629,34113,669],{"class":668},[629,34115,672],{"class":634},[629,34117,34118],{"class":675}," CubicBezierCurve3",[629,34120,679],{"class":634},[629,34122,28674],{"class":675},[629,34124,685],{"class":634},[629,34126,688],{"class":668},[629,34128,691],{"class":634},[629,34130,4618],{"class":655},[629,34132,697],{"class":634},[629,34134,34135,34137,34139,34141,34143,34145,34147,34149],{"class":631,"line":721},[629,34136,669],{"class":668},[629,34138,672],{"class":634},[629,34140,3864],{"class":675},[629,34142,685],{"class":634},[629,34144,688],{"class":668},[629,34146,691],{"class":634},[629,34148,625],{"class":655},[629,34150,697],{"class":634},[629,34152,34153],{"class":631,"line":731},[629,34154,734],{"emptyLinePlaceholder":586},[629,34156,34157,34159,34162,34164,34166,34168,34171,34173],{"class":631,"line":737},[629,34158,2407],{"class":642},[629,34160,34161],{"class":675}," tubePath ",[629,34163,649],{"class":634},[629,34165,3864],{"class":2426},[629,34167,2429],{"class":675},[629,34169,34170],{"class":634},"new",[629,34172,34118],{"class":2426},[629,34174,4690],{"class":675},[629,34176,34177,34180,34182,34184,34186,34188,34190,34192,34194,34196,34198],{"class":631,"line":747},[629,34178,34179],{"class":634}," new",[629,34181,28674],{"class":2426},[629,34183,2429],{"class":675},[629,34185,33811],{"class":634},[629,34187,1866],{"class":2493},[629,34189,679],{"class":634},[629,34191,2498],{"class":2493},[629,34193,679],{"class":634},[629,34195,2498],{"class":2493},[629,34197,3332],{"class":675},[629,34199,2480],{"class":634},[629,34201,34202,34204,34206,34208,34210,34212,34214,34217,34219,34221,34223,34225],{"class":631,"line":770},[629,34203,34179],{"class":634},[629,34205,28674],{"class":2426},[629,34207,2429],{"class":675},[629,34209,33811],{"class":634},[629,34211,1938],{"class":2493},[629,34213,679],{"class":634},[629,34215,34216],{"class":634}," -",[629,34218,1866],{"class":2493},[629,34220,679],{"class":634},[629,34222,2498],{"class":2493},[629,34224,3332],{"class":675},[629,34226,2480],{"class":634},[629,34228,34229,34231,34233,34235,34237,34239,34241,34243,34245,34247],{"class":631,"line":782},[629,34230,34179],{"class":634},[629,34232,28674],{"class":2426},[629,34234,2429],{"class":675},[629,34236,1938],{"class":2493},[629,34238,679],{"class":634},[629,34240,2553],{"class":2493},[629,34242,679],{"class":634},[629,34244,2498],{"class":2493},[629,34246,3332],{"class":675},[629,34248,2480],{"class":634},[629,34250,34251,34253,34255,34257,34259,34261,34263,34265,34267,34269],{"class":631,"line":792},[629,34252,34179],{"class":634},[629,34254,28674],{"class":2426},[629,34256,2429],{"class":675},[629,34258,1866],{"class":2493},[629,34260,679],{"class":634},[629,34262,2498],{"class":2493},[629,34264,679],{"class":634},[629,34266,2498],{"class":2493},[629,34268,3332],{"class":675},[629,34270,2480],{"class":634},[629,34272,34273],{"class":631,"line":797},[629,34274,7181],{"class":675},[629,34276,34277,34279,34281],{"class":631,"line":819},[629,34278,724],{"class":634},[629,34280,639],{"class":638},[629,34282,661],{"class":634},[629,34284,34285],{"class":631,"line":623},[629,34286,734],{"emptyLinePlaceholder":586},[629,34288,34289,34291,34293],{"class":631,"line":842},[629,34290,635],{"class":634},[629,34292,742],{"class":638},[629,34294,661],{"class":634},[629,34296,34297],{"class":631,"line":853},[629,34298,34299],{"class":1201}," \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[629,34301,34302,34304,34306,34308,34310,34312,34315,34317,34319,34321,34323,34325,34327],{"class":631,"line":864},[629,34303,750],{"class":634},[629,34305,297],{"class":638},[629,34307,1951],{"class":642},[629,34309,649],{"class":634},[629,34311,652],{"class":634},[629,34313,34314],{"class":655},"[tubePath, 20, 0.2, 8, false]",[629,34316,652],{"class":634},[629,34318,2681],{"class":642},[629,34320,649],{"class":634},[629,34322,652],{"class":634},[629,34324,11389],{"class":655},[629,34326,652],{"class":634},[629,34328,779],{"class":634},[629,34330,34331],{"class":631,"line":874},[629,34332,734],{"emptyLinePlaceholder":586},[629,34334,34335],{"class":631,"line":624},[629,34336,34337],{"class":1201}," \u003C!-- Tube with a custom material transformations -->\n",[629,34339,34340,34342,34344,34346,34348,34350,34352,34354,34356,34358,34360,34362,34364],{"class":631,"line":894},[629,34341,750],{"class":634},[629,34343,297],{"class":638},[629,34345,1951],{"class":642},[629,34347,649],{"class":634},[629,34349,652],{"class":634},[629,34351,34314],{"class":655},[629,34353,652],{"class":634},[629,34355,1477],{"class":642},[629,34357,649],{"class":634},[629,34359,652],{"class":634},[629,34361,14427],{"class":655},[629,34363,652],{"class":634},[629,34365,661],{"class":634},[629,34367,34368,34370,34372,34374,34376,34378,34380,34382],{"class":631,"line":904},[629,34369,773],{"class":634},[629,34371,11380],{"class":638},[629,34373,2681],{"class":642},[629,34375,649],{"class":634},[629,34377,652],{"class":634},[629,34379,11389],{"class":655},[629,34381,652],{"class":634},[629,34383,779],{"class":634},[629,34385,34386,34388,34390],{"class":631,"line":2617},[629,34387,897],{"class":634},[629,34389,297],{"class":638},[629,34391,661],{"class":634},[629,34393,34394,34396,34398],{"class":631,"line":2626},[629,34395,724],{"class":634},[629,34397,742],{"class":638},[629,34399,661],{"class":634},[496,34401,34402],{"id":28428},"Args",[618,34404,34407],{"className":34405,"code":34406,"language":28401},[28399],"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",[610,34408,34406],{"__ignoreMap":568},[1319,34410,34411],{},"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":568,"searchDepth":569,"depth":570,"links":34413},[34414,34415],{"id":616,"depth":570,"text":15},{"id":28428,"depth":570,"text":34402},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":297,"description":34416},"zVAYQCaOg4ZLIRgpfR02Fdo7jK-GAaHqfNXcfRiMzEs",[34421,34715,35155,35366,35664],{"id":34422,"title":307,"body":34423,"description":34711,"extension":583,"links":584,"meta":34712,"navigation":586,"path":308,"seo":34713,"stem":309,"__hash__":34714},"docs/2.api/6.debug-performance/helper.md",{"type":493,"value":34424,"toc":34707},[34425,34430,34436,34438,34665,34667,34705],[2287,34426,34427],{},[34428,34429],"debug-performance-helper",{},[606,34431,34432,34435],{},[610,34433,34434],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[496,34437,15],{"id":616},[618,34439,34442],{"className":620,"code":34440,"highlights":34441,"language":625,"meta":568,"style":568},"\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",[700,623],[610,34443,34444,34464,34482,34502,34521,34529,34533,34541,34549,34567,34585,34593,34601,34633,34641,34649,34657],{"__ignoreMap":568},[629,34445,34446,34448,34450,34452,34454,34456,34458,34460,34462],{"class":631,"line":569},[629,34447,635],{"class":634},[629,34449,639],{"class":638},[629,34451,643],{"class":642},[629,34453,646],{"class":642},[629,34455,649],{"class":634},[629,34457,652],{"class":634},[629,34459,656],{"class":655},[629,34461,652],{"class":634},[629,34463,661],{"class":634},[629,34465,34466,34468,34470,34472,34474,34476,34478,34480],{"class":631,"line":570},[629,34467,669],{"class":668},[629,34469,672],{"class":634},[629,34471,707],{"class":675},[629,34473,685],{"class":634},[629,34475,688],{"class":668},[629,34477,691],{"class":634},[629,34479,716],{"class":655},[629,34481,697],{"class":634},[629,34483,34485,34487,34489,34492,34494,34496,34498,34500],{"class":34484,"line":700},[631,665],[629,34486,669],{"class":668},[629,34488,672],{"class":634},[629,34490,34491],{"class":675}," Helper",[629,34493,685],{"class":634},[629,34495,688],{"class":668},[629,34497,691],{"class":634},[629,34499,694],{"class":655},[629,34501,697],{"class":634},[629,34503,34504,34506,34508,34511,34513,34515,34517,34519],{"class":631,"line":721},[629,34505,669],{"class":668},[629,34507,672],{"class":634},[629,34509,34510],{"class":675}," BoxHelper",[629,34512,685],{"class":634},[629,34514,688],{"class":668},[629,34516,691],{"class":634},[629,34518,4618],{"class":655},[629,34520,697],{"class":634},[629,34522,34523,34525,34527],{"class":631,"line":731},[629,34524,724],{"class":634},[629,34526,639],{"class":638},[629,34528,661],{"class":634},[629,34530,34531],{"class":631,"line":737},[629,34532,734],{"emptyLinePlaceholder":586},[629,34534,34535,34537,34539],{"class":631,"line":747},[629,34536,635],{"class":634},[629,34538,742],{"class":638},[629,34540,661],{"class":634},[629,34542,34543,34545,34547],{"class":631,"line":770},[629,34544,750],{"class":634},[629,34546,753],{"class":638},[629,34548,661],{"class":634},[629,34550,34551,34553,34555,34557,34559,34561,34563,34565],{"class":631,"line":782},[629,34552,773],{"class":634},[629,34554,776],{"class":638},[629,34556,1477],{"class":642},[629,34558,649],{"class":634},[629,34560,652],{"class":634},[629,34562,11342],{"class":655},[629,34564,652],{"class":634},[629,34566,779],{"class":634},[629,34568,34569,34571,34573,34575,34577,34579,34581,34583],{"class":631,"line":792},[629,34570,773],{"class":634},[629,34572,848],{"class":638},[629,34574,3864],{"class":642},[629,34576,649],{"class":634},[629,34578,652],{"class":634},[629,34580,14398],{"class":655},[629,34582,652],{"class":634},[629,34584,661],{"class":634},[629,34586,34587,34589,34591],{"class":631,"line":797},[629,34588,845],{"class":634},[629,34590,859],{"class":638},[629,34592,779],{"class":634},[629,34594,34595,34597,34599],{"class":631,"line":819},[629,34596,845],{"class":634},[629,34598,869],{"class":638},[629,34600,779],{"class":634},[629,34602,34604,34606,34608,34611,34613,34615,34618,34620,34622,34624,34626,34629,34631],{"class":34603,"line":623},[631,665],[629,34605,845],{"class":634},[629,34607,307],{"class":638},[629,34609,34610],{"class":642}," :type",[629,34612,649],{"class":634},[629,34614,652],{"class":634},[629,34616,34617],{"class":655},"BoxHelper",[629,34619,652],{"class":634},[629,34621,1951],{"class":642},[629,34623,649],{"class":634},[629,34625,652],{"class":634},[629,34627,34628],{"class":655},"[0xff0000]",[629,34630,652],{"class":634},[629,34632,779],{"class":634},[629,34634,34635,34637,34639],{"class":631,"line":842},[629,34636,887],{"class":634},[629,34638,848],{"class":638},[629,34640,661],{"class":634},[629,34642,34643,34645,34647],{"class":631,"line":853},[629,34644,773],{"class":634},[629,34646,8448],{"class":638},[629,34648,779],{"class":634},[629,34650,34651,34653,34655],{"class":631,"line":864},[629,34652,897],{"class":634},[629,34654,753],{"class":638},[629,34656,661],{"class":634},[629,34658,34659,34661,34663],{"class":631,"line":874},[629,34660,724],{"class":634},[629,34662,742],{"class":638},[629,34664,661],{"class":634},[496,34666,914],{"id":913},[919,34668,34669,34679],{},[922,34670,34671],{},[925,34672,34673,34675,34677],{},[928,34674,930],{"align":989},[928,34676,933],{"align":989},[928,34678,936],{},[938,34680,34681,34692],{},[925,34682,34683,34687,34690],{},[943,34684,34685],{"align":989},[1661,34686,5509],{},[943,34688,34689],{"align":989},"Helper constructor - required",[943,34691],{},[925,34693,34694,34698,34701],{},[943,34695,34696],{"align":989},[1661,34697,28428],{},[943,34699,34700],{"align":989},"Helper constructor args",[943,34702,34703],{},[610,34704,3571],{},[1319,34706,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":34708},[34709,34710],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":307,"description":34711},"sOeaxtC-_woCHM-l_CN1ntMywo7uC7PTbXeoO7-e15E",{"id":34716,"title":311,"body":34717,"description":35151,"extension":583,"links":584,"meta":35152,"navigation":586,"path":312,"seo":35153,"stem":313,"__hash__":35154},"docs/2.api/6.debug-performance/lod.md",{"type":493,"value":34718,"toc":35147},[34719,34724,34727,34738,34740,35094,35096,35145],[2287,34720,34721],{},[34722,34723],"debug-performance-lod",{},[606,34725,34726],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[606,34728,34729,34732,34733,34737],{},[610,34730,34731],{},"\u003CLOD />"," is a wrapper for THREE's ",[1132,34734,311],{"href":34735,"rel":34736},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1136]," class.",[496,34739,15],{"id":616},[618,34741,34743],{"className":620,"code":34742,"language":625,"meta":568,"style":568},"\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",[610,34744,34745,34765,34783,34802,34810,34814,34822,34830,34848,34868,34873,34881,34900,34919,34927,34932,34940,34959,34977,34985,34990,34998,35017,35036,35044,35052,35060,35078,35086],{"__ignoreMap":568},[629,34746,34747,34749,34751,34753,34755,34757,34759,34761,34763],{"class":631,"line":569},[629,34748,635],{"class":634},[629,34750,639],{"class":638},[629,34752,643],{"class":642},[629,34754,646],{"class":642},[629,34756,649],{"class":634},[629,34758,652],{"class":634},[629,34760,656],{"class":655},[629,34762,652],{"class":634},[629,34764,661],{"class":634},[629,34766,34767,34769,34771,34773,34775,34777,34779,34781],{"class":631,"line":570},[629,34768,669],{"class":668},[629,34770,672],{"class":634},[629,34772,707],{"class":675},[629,34774,685],{"class":634},[629,34776,688],{"class":668},[629,34778,691],{"class":634},[629,34780,716],{"class":655},[629,34782,697],{"class":634},[629,34784,34785,34787,34789,34792,34794,34796,34798,34800],{"class":631,"line":700},[629,34786,669],{"class":668},[629,34788,672],{"class":634},[629,34790,34791],{"class":675}," LOD",[629,34793,685],{"class":634},[629,34795,688],{"class":668},[629,34797,691],{"class":634},[629,34799,694],{"class":655},[629,34801,697],{"class":634},[629,34803,34804,34806,34808],{"class":631,"line":721},[629,34805,724],{"class":634},[629,34807,639],{"class":638},[629,34809,661],{"class":634},[629,34811,34812],{"class":631,"line":731},[629,34813,734],{"emptyLinePlaceholder":586},[629,34815,34816,34818,34820],{"class":631,"line":737},[629,34817,635],{"class":634},[629,34819,742],{"class":638},[629,34821,661],{"class":634},[629,34823,34824,34826,34828],{"class":631,"line":747},[629,34825,750],{"class":634},[629,34827,753],{"class":638},[629,34829,661],{"class":634},[629,34831,34832,34834,34836,34838,34840,34842,34844,34846],{"class":631,"line":770},[629,34833,773],{"class":634},[629,34835,776],{"class":638},[629,34837,1477],{"class":642},[629,34839,649],{"class":634},[629,34841,652],{"class":634},[629,34843,7437],{"class":655},[629,34845,652],{"class":634},[629,34847,779],{"class":634},[629,34849,34850,34852,34854,34857,34859,34861,34864,34866],{"class":631,"line":782},[629,34851,773],{"class":634},[629,34853,311],{"class":638},[629,34855,34856],{"class":642}," :levels",[629,34858,649],{"class":634},[629,34860,652],{"class":634},[629,34862,34863],{"class":655},"[0, 5, 10]",[629,34865,652],{"class":634},[629,34867,661],{"class":634},[629,34869,34870],{"class":631,"line":792},[629,34871,34872],{"class":1201}," \u003C!-- High detail mesh - shown when close -->\n",[629,34874,34875,34877,34879],{"class":631,"line":797},[629,34876,845],{"class":634},[629,34878,848],{"class":638},[629,34880,661],{"class":634},[629,34882,34883,34885,34887,34889,34891,34893,34896,34898],{"class":631,"line":819},[629,34884,856],{"class":634},[629,34886,3950],{"class":638},[629,34888,1951],{"class":642},[629,34890,649],{"class":634},[629,34892,652],{"class":634},[629,34894,34895],{"class":655},"[1, 32, 32]",[629,34897,652],{"class":634},[629,34899,779],{"class":634},[629,34901,34902,34904,34906,34908,34910,34912,34915,34917],{"class":631,"line":623},[629,34903,856],{"class":634},[629,34905,2678],{"class":638},[629,34907,2681],{"class":642},[629,34909,649],{"class":634},[629,34911,652],{"class":634},[629,34913,34914],{"class":655},"red",[629,34916,652],{"class":634},[629,34918,779],{"class":634},[629,34920,34921,34923,34925],{"class":631,"line":842},[629,34922,877],{"class":634},[629,34924,848],{"class":638},[629,34926,661],{"class":634},[629,34928,34929],{"class":631,"line":853},[629,34930,34931],{"class":1201}," \u003C!-- Medium detail mesh - shown at mid distance -->\n",[629,34933,34934,34936,34938],{"class":631,"line":864},[629,34935,845],{"class":634},[629,34937,848],{"class":638},[629,34939,661],{"class":634},[629,34941,34942,34944,34946,34948,34950,34952,34955,34957],{"class":631,"line":874},[629,34943,856],{"class":634},[629,34945,3950],{"class":638},[629,34947,1951],{"class":642},[629,34949,649],{"class":634},[629,34951,652],{"class":634},[629,34953,34954],{"class":655},"[1, 16, 16]",[629,34956,652],{"class":634},[629,34958,779],{"class":634},[629,34960,34961,34963,34965,34967,34969,34971,34973,34975],{"class":631,"line":624},[629,34962,856],{"class":634},[629,34964,2678],{"class":638},[629,34966,2681],{"class":642},[629,34968,649],{"class":634},[629,34970,652],{"class":634},[629,34972,11389],{"class":655},[629,34974,652],{"class":634},[629,34976,779],{"class":634},[629,34978,34979,34981,34983],{"class":631,"line":894},[629,34980,877],{"class":634},[629,34982,848],{"class":638},[629,34984,661],{"class":634},[629,34986,34987],{"class":631,"line":904},[629,34988,34989],{"class":1201}," \u003C!-- Low detail mesh - shown when far -->\n",[629,34991,34992,34994,34996],{"class":631,"line":2617},[629,34993,845],{"class":634},[629,34995,848],{"class":638},[629,34997,661],{"class":634},[629,34999,35000,35002,35004,35006,35008,35010,35013,35015],{"class":631,"line":2626},[629,35001,856],{"class":634},[629,35003,3950],{"class":638},[629,35005,1951],{"class":642},[629,35007,649],{"class":634},[629,35009,652],{"class":634},[629,35011,35012],{"class":655},"[1, 8, 8]",[629,35014,652],{"class":634},[629,35016,779],{"class":634},[629,35018,35019,35021,35023,35025,35027,35029,35032,35034],{"class":631,"line":2646},[629,35020,856],{"class":634},[629,35022,2678],{"class":638},[629,35024,2681],{"class":642},[629,35026,649],{"class":634},[629,35028,652],{"class":634},[629,35030,35031],{"class":655},"yellow",[629,35033,652],{"class":634},[629,35035,779],{"class":634},[629,35037,35038,35040,35042],{"class":631,"line":2655},[629,35039,877],{"class":634},[629,35041,848],{"class":638},[629,35043,661],{"class":634},[629,35045,35046,35048,35050],{"class":631,"line":2664},[629,35047,887],{"class":634},[629,35049,311],{"class":638},[629,35051,661],{"class":634},[629,35053,35054,35056,35058],{"class":631,"line":2673},[629,35055,773],{"class":634},[629,35057,8448],{"class":638},[629,35059,779],{"class":634},[629,35061,35062,35064,35066,35068,35070,35072,35074,35076],{"class":631,"line":2695},[629,35063,773],{"class":634},[629,35065,8467],{"class":638},[629,35067,1477],{"class":642},[629,35069,649],{"class":634},[629,35071,652],{"class":634},[629,35073,11424],{"class":655},[629,35075,652],{"class":634},[629,35077,779],{"class":634},[629,35079,35080,35082,35084],{"class":631,"line":2739},[629,35081,897],{"class":634},[629,35083,753],{"class":638},[629,35085,661],{"class":634},[629,35087,35088,35090,35092],{"class":631,"line":2748},[629,35089,724],{"class":634},[629,35091,742],{"class":638},[629,35093,661],{"class":634},[496,35095,914],{"id":913},[919,35097,35098,35108],{},[922,35099,35100],{},[925,35101,35102,35104,35106],{},[928,35103,930],{"align":989},[928,35105,933],{"align":989},[928,35107,936],{},[938,35109,35110,35131],{},[925,35111,35112,35117,35129],{},[943,35113,35114],{"align":989},[1661,35115,35116],{},"levels",[943,35118,35119,35122,35123,35125,35126,35128],{"align":989},[610,35120,35121],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[610,35124,35116],{}," value for each ",[610,35127,311],{}," child.",[943,35130],{},[925,35132,35133,35138,35141],{},[943,35134,35135],{"align":989},[1661,35136,35137],{},"hysteresis",[943,35139,35140],{"align":989},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[943,35142,35143],{},[610,35144,11845],{},[1319,35146,26268],{},{"title":568,"searchDepth":569,"depth":570,"links":35148},[35149,35150],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":311,"description":35151},"Vf93ORp5sHYAGbVs0PWkO2EoHaFKA4HQ5pb0l8rQxoQ",{"id":35156,"title":315,"body":35157,"description":35362,"extension":583,"links":584,"meta":35363,"navigation":586,"path":316,"seo":35364,"stem":317,"__hash__":35365},"docs/2.api/6.debug-performance/stats.md",{"type":493,"value":35158,"toc":35358},[35159,35173,35182,35186,35303,35305,35339,35356],[606,35160,35161,35166,35167,35172],{},[1132,35162,35165],{"href":35163,"rel":35164},"https://github.com/mrdoob/stats.js/",[1136],"stats.js"," is a JavaScript performance monitor, made by ",[1132,35168,35171],{"href":35169,"rel":35170},"https://github.com/mrdoob",[1136],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[606,35174,35175,35178,35179,35181],{},[1661,35176,35177],{},"Cientos"," provides a component called ",[610,35180,315],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[496,35183,35185],{"id":35184},"basic-usage","Basic usage",[618,35187,35190],{"className":620,"code":35188,"highlights":35189,"language":625,"meta":568,"style":568},"\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",[700,770],[610,35191,35192,35212,35230,35250,35258,35262,35270,35278,35287,35295],{"__ignoreMap":568},[629,35193,35194,35196,35198,35200,35202,35204,35206,35208,35210],{"class":631,"line":569},[629,35195,635],{"class":634},[629,35197,639],{"class":638},[629,35199,643],{"class":642},[629,35201,646],{"class":642},[629,35203,649],{"class":634},[629,35205,652],{"class":634},[629,35207,656],{"class":655},[629,35209,652],{"class":634},[629,35211,661],{"class":634},[629,35213,35214,35216,35218,35220,35222,35224,35226,35228],{"class":631,"line":570},[629,35215,669],{"class":668},[629,35217,672],{"class":634},[629,35219,707],{"class":675},[629,35221,685],{"class":634},[629,35223,688],{"class":668},[629,35225,691],{"class":634},[629,35227,716],{"class":655},[629,35229,697],{"class":634},[629,35231,35233,35235,35237,35240,35242,35244,35246,35248],{"class":35232,"line":700},[631,665],[629,35234,669],{"class":668},[629,35236,672],{"class":634},[629,35238,35239],{"class":675}," Stats",[629,35241,685],{"class":634},[629,35243,688],{"class":668},[629,35245,691],{"class":634},[629,35247,694],{"class":655},[629,35249,697],{"class":634},[629,35251,35252,35254,35256],{"class":631,"line":721},[629,35253,724],{"class":634},[629,35255,639],{"class":638},[629,35257,661],{"class":634},[629,35259,35260],{"class":631,"line":731},[629,35261,734],{"emptyLinePlaceholder":586},[629,35263,35264,35266,35268],{"class":631,"line":737},[629,35265,635],{"class":634},[629,35267,742],{"class":638},[629,35269,661],{"class":634},[629,35271,35272,35274,35276],{"class":631,"line":747},[629,35273,750],{"class":634},[629,35275,753],{"class":638},[629,35277,661],{"class":634},[629,35279,35281,35283,35285],{"class":35280,"line":770},[631,665],[629,35282,773],{"class":634},[629,35284,315],{"class":638},[629,35286,779],{"class":634},[629,35288,35289,35291,35293],{"class":631,"line":782},[629,35290,897],{"class":634},[629,35292,753],{"class":638},[629,35294,661],{"class":634},[629,35296,35297,35299,35301],{"class":631,"line":792},[629,35298,724],{"class":634},[629,35300,742],{"class":638},[629,35302,661],{"class":634},[496,35304,914],{"id":913},[919,35306,35307,35319],{},[922,35308,35309],{},[925,35310,35311,35313,35315,35317],{},[928,35312,930],{"align":989},[928,35314,5961],{},[928,35316,936],{},[928,35318,933],{},[938,35320,35321],{},[925,35322,35323,35328,35332,35336],{},[943,35324,35325],{"align":989},[1661,35326,35327],{},"showPanel",[943,35329,35330],{},[610,35331,5344],{},[943,35333,35334],{},[610,35335,957],{},[943,35337,35338],{},"FPS monitor.",[2205,35340,35341,35344,35347,35350],{},[2208,35342,35343],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2208,35345,35346],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2208,35348,35349],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2208,35351,35352,35353,1138],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1132,35354,35165],{"href":35163,"rel":35355},[1136],[1319,35357,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":35359},[35360,35361],{"id":35184,"depth":570,"text":35185},{"id":913,"depth":570,"text":914},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":315,"description":35362},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":35367,"title":319,"body":35368,"description":35660,"extension":583,"links":584,"meta":35661,"navigation":586,"path":320,"seo":35662,"stem":321,"__hash__":35663},"docs/2.api/6.debug-performance/stats-gl.md",{"type":493,"value":35369,"toc":35656},[35370,35388,35391,35393,35510,35512,35654],[606,35371,35372,35377,35378,35383,35384,35387],{},[1132,35373,35376],{"href":35374,"rel":35375},"https://github.com/RenaudRohlinger/stats-gl",[1136],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1132,35379,35382],{"href":35380,"rel":35381},"https://github.com/RenaudRohlinger",[1136],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1132,35385,35165],{"href":35163,"rel":35386},[1136],", capable of displaying CPU and GPU metrics.",[606,35389,35390],{},"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.",[496,35392,35185],{"id":35184},[618,35394,35397],{"className":620,"code":35395,"highlights":35396,"language":625,"meta":568,"style":568},"\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",[700,770],[610,35398,35399,35419,35437,35457,35465,35469,35477,35485,35494,35502],{"__ignoreMap":568},[629,35400,35401,35403,35405,35407,35409,35411,35413,35415,35417],{"class":631,"line":569},[629,35402,635],{"class":634},[629,35404,639],{"class":638},[629,35406,643],{"class":642},[629,35408,646],{"class":642},[629,35410,649],{"class":634},[629,35412,652],{"class":634},[629,35414,656],{"class":655},[629,35416,652],{"class":634},[629,35418,661],{"class":634},[629,35420,35421,35423,35425,35427,35429,35431,35433,35435],{"class":631,"line":570},[629,35422,669],{"class":668},[629,35424,672],{"class":634},[629,35426,707],{"class":675},[629,35428,685],{"class":634},[629,35430,688],{"class":668},[629,35432,691],{"class":634},[629,35434,716],{"class":655},[629,35436,697],{"class":634},[629,35438,35440,35442,35444,35447,35449,35451,35453,35455],{"class":35439,"line":700},[631,665],[629,35441,669],{"class":668},[629,35443,672],{"class":634},[629,35445,35446],{"class":675}," StatsGl",[629,35448,685],{"class":634},[629,35450,688],{"class":668},[629,35452,691],{"class":634},[629,35454,694],{"class":655},[629,35456,697],{"class":634},[629,35458,35459,35461,35463],{"class":631,"line":721},[629,35460,724],{"class":634},[629,35462,639],{"class":638},[629,35464,661],{"class":634},[629,35466,35467],{"class":631,"line":731},[629,35468,734],{"emptyLinePlaceholder":586},[629,35470,35471,35473,35475],{"class":631,"line":737},[629,35472,635],{"class":634},[629,35474,742],{"class":638},[629,35476,661],{"class":634},[629,35478,35479,35481,35483],{"class":631,"line":747},[629,35480,750],{"class":634},[629,35482,753],{"class":638},[629,35484,661],{"class":634},[629,35486,35488,35490,35492],{"class":35487,"line":770},[631,665],[629,35489,773],{"class":634},[629,35491,319],{"class":638},[629,35493,779],{"class":634},[629,35495,35496,35498,35500],{"class":631,"line":782},[629,35497,897],{"class":634},[629,35499,753],{"class":638},[629,35501,661],{"class":634},[629,35503,35504,35506,35508],{"class":631,"line":792},[629,35505,724],{"class":634},[629,35507,742],{"class":638},[629,35509,661],{"class":634},[496,35511,12085],{"id":15602},[919,35513,35514,35526],{},[922,35515,35516],{},[925,35517,35518,35520,35522,35524],{},[928,35519,8081],{"align":989},[928,35521,5961],{},[928,35523,936],{},[928,35525,933],{},[938,35527,35528,35546,35564,35583,35601,35619,35637],{},[925,35529,35530,35535,35539,35543],{},[943,35531,35532],{"align":989},[1661,35533,35534],{},"logsPerSecond",[943,35536,35537],{},[610,35538,5344],{},[943,35540,35541],{},[610,35542,28871],{},[943,35544,35545],{},"How often to log performance data, in logs per second.",[925,35547,35548,35553,35557,35561],{},[943,35549,35550],{"align":989},[1661,35551,35552],{},"samplesLog",[943,35554,35555],{},[610,35556,5344],{},[943,35558,35559],{},[610,35560,30696],{},[943,35562,35563],{},"Number of recent log samples to keep for computing averages.",[925,35565,35566,35571,35575,35580],{},[943,35567,35568],{"align":989},[1661,35569,35570],{},"samplesGraph",[943,35572,35573],{},[610,35574,5344],{},[943,35576,35577],{},[610,35578,35579],{},"10",[943,35581,35582],{},"Number of recent graph samples to keep for computing averages.",[925,35584,35585,35590,35594,35598],{},[943,35586,35587],{"align":989},[1661,35588,35589],{},"precision",[943,35591,35592],{},[610,35593,5344],{},[943,35595,35596],{},[610,35597,812],{},[943,35599,35600],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[925,35602,35603,35608,35612,35616],{},[943,35604,35605],{"align":989},[1661,35606,35607],{},"horizontal",[943,35609,35610],{},[610,35611,15629],{},[943,35613,35614],{},[610,35615,953],{},[943,35617,35618],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[925,35620,35621,35626,35630,35634],{},[943,35622,35623],{"align":989},[1661,35624,35625],{},"minimal",[943,35627,35628],{},[610,35629,15629],{},[943,35631,35632],{},[610,35633,963],{},[943,35635,35636],{},"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.",[925,35638,35639,35643,35647,35651],{},[943,35640,35641],{"align":989},[1661,35642,6856],{},[943,35644,35645],{},[610,35646,5344],{},[943,35648,35649],{},[610,35650,957],{},[943,35652,35653],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1319,35655,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":35657},[35658,35659],{"id":35184,"depth":570,"text":35185},{"id":15602,"depth":570,"text":12085},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":319,"description":35660},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":35665,"title":323,"body":35666,"description":37074,"extension":583,"links":584,"meta":37075,"navigation":586,"path":324,"seo":37076,"stem":325,"__hash__":37077},"docs/2.api/6.debug-performance/use-bvh.md",{"type":493,"value":35667,"toc":37050},[35668,35673,35680,35694,35698,35701,35706,35717,35719,35722,35887,35891,35894,36041,36045,36048,36338,36340,36354,36358,36411,36415,36421,36569,36573,36593,36595,36599,36602,36694,36698,36701,36744,36747,36751,36801,36805,36831,36835,36841,36997,36999,37003,37024,37028,37047],[600,35669,35670],{},[35671,35672],"debug-performance-use-bounding-volume-hierarchy",{},[606,35674,35675,35676,35679],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1661,35677,35678],{},"orders of magnitude",", especially for complex models with many triangles.",[606,35681,35682,35683,35688,35689,1138],{},"Built on top of ",[1132,35684,35687],{"href":35685,"rel":35686},"https://github.com/gkjohnson/three-mesh-bvh",[1136],"three-mesh-bvh"," by ",[1132,35690,35693],{"href":35691,"rel":35692},"https://github.com/gkjohnson",[1136],"Garrett Johnson",[496,35695,35697],{"id":35696},"what-is-bvh","What is BVH?",[606,35699,35700],{},"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).",[606,35702,35703],{},[1661,35704,35705],{},"Use cases:",[2205,35707,35708,35711,35714],{},[2208,35709,35710],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2208,35712,35713],{},"Complex models with thousands of triangles",[2208,35715,35716],{},"Scenes with multiple raycasting operations per frame",[496,35718,15],{"id":616},[4043,35720,35721],{"id":35184},"Basic Usage",[618,35723,35726],{"className":620,"code":35724,"highlights":35725,"language":625,"meta":568,"style":568},"\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",[570,731,737,747,770,792],[610,35727,35728,35748,35772,35776,35805,35826,35835,35840,35849,35878],{"__ignoreMap":568},[629,35729,35730,35732,35734,35736,35738,35740,35742,35744,35746],{"class":631,"line":569},[629,35731,635],{"class":634},[629,35733,639],{"class":638},[629,35735,643],{"class":642},[629,35737,646],{"class":642},[629,35739,649],{"class":634},[629,35741,652],{"class":634},[629,35743,656],{"class":655},[629,35745,652],{"class":634},[629,35747,661],{"class":634},[629,35749,35751,35753,35755,35757,35759,35762,35764,35766,35768,35770],{"class":35750,"line":570},[631,665],[629,35752,669],{"class":668},[629,35754,672],{"class":634},[629,35756,4339],{"class":675},[629,35758,679],{"class":634},[629,35760,35761],{"class":675}," useBVH",[629,35763,685],{"class":634},[629,35765,688],{"class":668},[629,35767,691],{"class":634},[629,35769,694],{"class":655},[629,35771,697],{"class":634},[629,35773,35774],{"class":631,"line":700},[629,35775,734],{"emptyLinePlaceholder":586},[629,35777,35778,35780,35782,35784,35786,35788,35790,35792,35794,35796,35798,35801,35803],{"class":631,"line":721},[629,35779,2407],{"class":642},[629,35781,672],{"class":634},[629,35783,2412],{"class":638},[629,35785,1210],{"class":634},[629,35787,5001],{"class":675},[629,35789,2420],{"class":634},[629,35791,2423],{"class":634},[629,35793,4339],{"class":2426},[629,35795,2429],{"class":675},[629,35797,2432],{"class":634},[629,35799,35800],{"class":655},"/models/complex-model.glb",[629,35802,2432],{"class":634},[629,35804,2440],{"class":675},[629,35806,35808,35810,35812,35814,35816,35818,35820,35822,35824],{"class":35807,"line":731},[631,665],[629,35809,323],{"class":2426},[629,35811,2429],{"class":675},[629,35813,3666],{"class":634},[629,35815,3669],{"class":642},[629,35817,5040],{"class":675},[629,35819,1138],{"class":634},[629,35821,3677],{"class":675},[629,35823,3680],{"class":634},[629,35825,5049],{"class":675},[629,35827,35829,35831,35833],{"class":35828,"line":737},[631,665],[629,35830,724],{"class":634},[629,35832,639],{"class":638},[629,35834,661],{"class":634},[629,35836,35838],{"class":35837,"line":747},[631,665],[629,35839,734],{"emptyLinePlaceholder":586},[629,35841,35843,35845,35847],{"class":35842,"line":770},[631,665],[629,35844,635],{"class":634},[629,35846,742],{"class":638},[629,35848,661],{"class":634},[629,35850,35851,35853,35855,35857,35859,35861,35863,35865,35867,35869,35871,35874,35876],{"class":631,"line":782},[629,35852,750],{"class":634},[629,35854,4426],{"class":638},[629,35856,2702],{"class":642},[629,35858,649],{"class":634},[629,35860,652],{"class":634},[629,35862,17875],{"class":655},[629,35864,652],{"class":634},[629,35866,4440],{"class":642},[629,35868,649],{"class":634},[629,35870,652],{"class":634},[629,35872,35873],{"class":655},"model.scene",[629,35875,652],{"class":634},[629,35877,779],{"class":634},[629,35879,35881,35883,35885],{"class":35880,"line":792},[631,665],[629,35882,724],{"class":634},[629,35884,742],{"class":638},[629,35886,661],{"class":634},[4043,35888,35890],{"id":35889},"with-debug-visualization","With Debug Visualization",[606,35892,35893],{},"Enable debug mode to visualize the BVH bounding boxes:",[618,35895,35898],{"className":620,"code":35896,"highlights":35897,"language":625,"meta":568,"style":568},"\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",[721,731,737,747],[610,35899,35900,35920,35942,35946,35976,35981,35988,36007,36011,36025,36029,36033],{"__ignoreMap":568},[629,35901,35902,35904,35906,35908,35910,35912,35914,35916,35918],{"class":631,"line":569},[629,35903,635],{"class":634},[629,35905,639],{"class":638},[629,35907,643],{"class":642},[629,35909,646],{"class":642},[629,35911,649],{"class":634},[629,35913,652],{"class":634},[629,35915,656],{"class":655},[629,35917,652],{"class":634},[629,35919,661],{"class":634},[629,35921,35922,35924,35926,35928,35930,35932,35934,35936,35938,35940],{"class":631,"line":570},[629,35923,669],{"class":668},[629,35925,672],{"class":634},[629,35927,4339],{"class":675},[629,35929,679],{"class":634},[629,35931,35761],{"class":675},[629,35933,685],{"class":634},[629,35935,688],{"class":668},[629,35937,691],{"class":634},[629,35939,694],{"class":655},[629,35941,697],{"class":634},[629,35943,35944],{"class":631,"line":700},[629,35945,734],{"emptyLinePlaceholder":586},[629,35947,35949,35951,35953,35955,35957,35959,35961,35963,35965,35967,35969,35972,35974],{"class":35948,"line":721},[631,665],[629,35950,2407],{"class":642},[629,35952,672],{"class":634},[629,35954,2412],{"class":638},[629,35956,1210],{"class":634},[629,35958,5001],{"class":675},[629,35960,2420],{"class":634},[629,35962,2423],{"class":634},[629,35964,4339],{"class":2426},[629,35966,2429],{"class":675},[629,35968,2432],{"class":634},[629,35970,35971],{"class":655},"/models/model.glb",[629,35973,2432],{"class":634},[629,35975,2440],{"class":675},[629,35977,35979],{"class":35978,"line":731},[631,665],[629,35980,734],{"emptyLinePlaceholder":586},[629,35982,35984,35986],{"class":35983,"line":737},[631,665],[629,35985,323],{"class":2426},[629,35987,4690],{"class":675},[629,35989,35991,35993,35995,35997,35999,36001,36003,36005],{"class":35990,"line":747},[631,665],[629,35992,4695],{"class":634},[629,35994,3669],{"class":642},[629,35996,5040],{"class":675},[629,35998,1138],{"class":634},[629,36000,3677],{"class":675},[629,36002,3680],{"class":634},[629,36004,16533],{"class":675},[629,36006,2480],{"class":634},[629,36008,36009],{"class":631,"line":770},[629,36010,2463],{"class":634},[629,36012,36013,36016,36018,36020,36022],{"class":631,"line":782},[629,36014,36015],{"class":638}," debug",[629,36017,1210],{"class":634},[629,36019,4390],{"class":4389},[629,36021,679],{"class":634},[629,36023,36024],{"class":1201}," // Show BVH bounding boxes\n",[629,36026,36027],{"class":631,"line":792},[629,36028,7849],{"class":634},[629,36030,36031],{"class":631,"line":797},[629,36032,2440],{"class":675},[629,36034,36035,36037,36039],{"class":631,"line":819},[629,36036,724],{"class":634},[629,36038,639],{"class":638},[629,36040,661],{"class":634},[4043,36042,36044],{"id":36043},"reactive-enabled-state","Reactive Enabled State",[606,36046,36047],{},"Control BVH optimization dynamically:",[618,36049,36052],{"className":620,"code":36050,"highlights":36051,"language":625,"meta":568,"style":568},"\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",[721,737,747,770,782],[610,36053,36054,36074,36096,36118,36123,36140,36145,36174,36179,36186,36204,36208,36220,36224,36228,36232,36240,36244,36252,36260,36281,36286,36294,36322,36330],{"__ignoreMap":568},[629,36055,36056,36058,36060,36062,36064,36066,36068,36070,36072],{"class":631,"line":569},[629,36057,635],{"class":634},[629,36059,639],{"class":638},[629,36061,643],{"class":642},[629,36063,646],{"class":642},[629,36065,649],{"class":634},[629,36067,652],{"class":634},[629,36069,656],{"class":655},[629,36071,652],{"class":634},[629,36073,661],{"class":634},[629,36075,36076,36078,36080,36082,36084,36086,36088,36090,36092,36094],{"class":631,"line":570},[629,36077,669],{"class":668},[629,36079,672],{"class":634},[629,36081,3864],{"class":675},[629,36083,679],{"class":634},[629,36085,3481],{"class":675},[629,36087,685],{"class":634},[629,36089,688],{"class":668},[629,36091,691],{"class":634},[629,36093,625],{"class":655},[629,36095,697],{"class":634},[629,36097,36098,36100,36102,36104,36106,36108,36110,36112,36114,36116],{"class":631,"line":700},[629,36099,669],{"class":668},[629,36101,672],{"class":634},[629,36103,4339],{"class":675},[629,36105,679],{"class":634},[629,36107,35761],{"class":675},[629,36109,685],{"class":634},[629,36111,688],{"class":668},[629,36113,691],{"class":634},[629,36115,694],{"class":655},[629,36117,697],{"class":634},[629,36119,36121],{"class":36120,"line":721},[631,665],[629,36122,734],{"emptyLinePlaceholder":586},[629,36124,36125,36127,36130,36132,36134,36136,36138],{"class":631,"line":731},[629,36126,2407],{"class":642},[629,36128,36129],{"class":675}," bvhEnabled ",[629,36131,649],{"class":634},[629,36133,3864],{"class":2426},[629,36135,2429],{"class":675},[629,36137,953],{"class":4389},[629,36139,2440],{"class":675},[629,36141,36143],{"class":36142,"line":737},[631,665],[629,36144,734],{"emptyLinePlaceholder":586},[629,36146,36148,36150,36152,36154,36156,36158,36160,36162,36164,36166,36168,36170,36172],{"class":36147,"line":747},[631,665],[629,36149,2407],{"class":642},[629,36151,672],{"class":634},[629,36153,2412],{"class":638},[629,36155,1210],{"class":634},[629,36157,5001],{"class":675},[629,36159,2420],{"class":634},[629,36161,2423],{"class":634},[629,36163,4339],{"class":2426},[629,36165,2429],{"class":675},[629,36167,2432],{"class":634},[629,36169,35971],{"class":655},[629,36171,2432],{"class":634},[629,36173,2440],{"class":675},[629,36175,36177],{"class":36176,"line":770},[631,665],[629,36178,734],{"emptyLinePlaceholder":586},[629,36180,36182,36184],{"class":36181,"line":782},[631,665],[629,36183,323],{"class":2426},[629,36185,4690],{"class":675},[629,36187,36188,36190,36192,36194,36196,36198,36200,36202],{"class":631,"line":792},[629,36189,4695],{"class":634},[629,36191,3669],{"class":642},[629,36193,5040],{"class":675},[629,36195,1138],{"class":634},[629,36197,3677],{"class":675},[629,36199,3680],{"class":634},[629,36201,16533],{"class":675},[629,36203,2480],{"class":634},[629,36205,36206],{"class":631,"line":797},[629,36207,2463],{"class":634},[629,36209,36210,36213,36215,36218],{"class":631,"line":819},[629,36211,36212],{"class":638}," enabled",[629,36214,1210],{"class":634},[629,36216,36217],{"class":675}," bvhEnabled",[629,36219,2480],{"class":634},[629,36221,36222],{"class":631,"line":623},[629,36223,7849],{"class":634},[629,36225,36226],{"class":631,"line":842},[629,36227,2440],{"class":675},[629,36229,36230],{"class":631,"line":853},[629,36231,734],{"emptyLinePlaceholder":586},[629,36233,36234,36236,36238],{"class":631,"line":864},[629,36235,724],{"class":634},[629,36237,639],{"class":638},[629,36239,661],{"class":634},[629,36241,36242],{"class":631,"line":874},[629,36243,734],{"emptyLinePlaceholder":586},[629,36245,36246,36248,36250],{"class":631,"line":624},[629,36247,635],{"class":634},[629,36249,742],{"class":638},[629,36251,661],{"class":634},[629,36253,36254,36256,36258],{"class":631,"line":894},[629,36255,750],{"class":634},[629,36257,4111],{"class":638},[629,36259,661],{"class":634},[629,36261,36262,36264,36267,36270,36272,36274,36277,36279],{"class":631,"line":904},[629,36263,773],{"class":634},[629,36265,36266],{"class":638},"button",[629,36268,36269],{"class":642}," @click",[629,36271,649],{"class":634},[629,36273,652],{"class":634},[629,36275,36276],{"class":655},"bvhEnabled = !bvhEnabled",[629,36278,652],{"class":634},[629,36280,661],{"class":634},[629,36282,36283],{"class":631,"line":2617},[629,36284,36285],{"class":675}," Toggle BVH\n",[629,36287,36288,36290,36292],{"class":631,"line":2626},[629,36289,887],{"class":634},[629,36291,36266],{"class":638},[629,36293,661],{"class":634},[629,36295,36296,36298,36300,36302,36304,36306,36308,36310,36312,36314,36316,36318,36320],{"class":631,"line":2646},[629,36297,773],{"class":634},[629,36299,4426],{"class":638},[629,36301,2702],{"class":642},[629,36303,649],{"class":634},[629,36305,652],{"class":634},[629,36307,17875],{"class":655},[629,36309,652],{"class":634},[629,36311,4440],{"class":642},[629,36313,649],{"class":634},[629,36315,652],{"class":634},[629,36317,35873],{"class":655},[629,36319,652],{"class":634},[629,36321,779],{"class":634},[629,36323,36324,36326,36328],{"class":631,"line":2655},[629,36325,897],{"class":634},[629,36327,4111],{"class":638},[629,36329,661],{"class":634},[629,36331,36332,36334,36336],{"class":631,"line":2664},[629,36333,724],{"class":634},[629,36335,742],{"class":638},[629,36337,661],{"class":634},[496,36339,12085],{"id":15602},[606,36341,36342,36343,36346,36347,36350,36351,36353],{},"Options are divided into ",[1661,36344,36345],{},"reactive"," (can change at runtime) and ",[1661,36348,36349],{},"static"," (set once at creation - changing requires toggling ",[610,36352,14722],{}," off/on to rebuild).",[4043,36355,36357],{"id":36356},"reactive-options","Reactive Options",[919,36359,36360,36373],{},[922,36361,36362],{},[925,36363,36364,36367,36369,36371],{},[928,36365,36366],{"align":989},"Option",[928,36368,5961],{"align":989},[928,36370,936],{"align":989},[928,36372,933],{"align":989},[938,36374,36375,36393],{},[925,36376,36377,36381,36386,36390],{},[943,36378,36379],{"align":989},[1661,36380,14722],{},[943,36382,36383],{"align":989},[610,36384,36385],{},"MaybeRefOrGetter\u003Cboolean>",[943,36387,36388],{"align":989},[610,36389,953],{},[943,36391,36392],{"align":989},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[925,36394,36395,36400,36404,36408],{},[943,36396,36397],{"align":989},[1661,36398,36399],{},"debug",[943,36401,36402],{"align":989},[610,36403,36385],{},[943,36405,36406],{"align":989},[610,36407,963],{},[943,36409,36410],{"align":989},"Show debug visualization of BVH bounding boxes.",[4043,36412,36414],{"id":36413},"static-options-bvh-construction","Static Options (BVH Construction)",[606,36416,36417,36418,36420],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[610,36419,14722],{}," off/on to rebuild with new values.",[919,36422,36423,36435],{},[922,36424,36425],{},[925,36426,36427,36429,36431,36433],{},[928,36428,36366],{"align":989},[928,36430,5961],{"align":989},[928,36432,936],{"align":989},[928,36434,933],{"align":989},[938,36436,36437,36458,36478,36497,36515,36533,36551],{},[925,36438,36439,36444,36448,36452],{},[943,36440,36441],{"align":989},[1661,36442,36443],{},"firstHitOnly",[943,36445,36446],{"align":989},[610,36447,15629],{},[943,36449,36450],{"align":989},[610,36451,963],{},[943,36453,22912,36454,36457],{"align":989},[610,36455,36456],{},"raycastFirst"," for better performance when only the first hit is needed.",[925,36459,36460,36465,36470,36475],{},[943,36461,36462],{"align":989},[1661,36463,36464],{},"splitStrategy",[943,36466,36467],{"align":989},[610,36468,36469],{},"'CENTER' | 'AVERAGE' | 'SAH'",[943,36471,36472],{"align":989},[610,36473,36474],{},"'SAH'",[943,36476,36477],{"align":989},"BVH build strategy. See section below.",[925,36479,36480,36485,36489,36494],{},[943,36481,36482],{"align":989},[1661,36483,36484],{},"maxDepth",[943,36486,36487],{"align":989},[610,36488,5344],{},[943,36490,36491],{"align":989},[610,36492,36493],{},"40",[943,36495,36496],{"align":989},"Maximum tree depth for the BVH structure.",[925,36498,36499,36504,36508,36512],{},[943,36500,36501],{"align":989},[1661,36502,36503],{},"maxLeafSize",[943,36505,36506],{"align":989},[610,36507,5344],{},[943,36509,36510],{"align":989},[610,36511,35579],{},[943,36513,36514],{"align":989},"Target number of triangles per leaf node.",[925,36516,36517,36522,36526,36530],{},[943,36518,36519],{"align":989},[1661,36520,36521],{},"verbose",[943,36523,36524],{"align":989},[610,36525,15629],{},[943,36527,36528],{"align":989},[610,36529,963],{},[943,36531,36532],{"align":989},"Print construction warnings and progress to console.",[925,36534,36535,36540,36544,36548],{},[943,36536,36537],{"align":989},[1661,36538,36539],{},"setBoundingBox",[943,36541,36542],{"align":989},[610,36543,15629],{},[943,36545,36546],{"align":989},[610,36547,953],{},[943,36549,36550],{"align":989},"Automatically set geometry bounding box after BVH construction.",[925,36552,36553,36558,36562,36566],{},[943,36554,36555],{"align":989},[1661,36556,36557],{},"indirect",[943,36559,36560],{"align":989},[610,36561,15629],{},[943,36563,36564],{"align":989},[610,36565,963],{},[943,36567,36568],{"align":989},"If false, creates and rearranges index buffer for better performance.",[4043,36570,36572],{"id":36571},"split-strategies","Split Strategies",[2205,36574,36575,36581,36587],{},[2208,36576,36577,36580],{},[1661,36578,36579],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2208,36582,36583,36586],{},[1661,36584,36585],{},"AVERAGE"," - Balanced build time and runtime performance.",[2208,36588,36589,36592],{},[1661,36590,36591],{},"CENTER"," - Fastest to build, slower at runtime.",[496,36594,21802],{"id":21801},[4043,36596,36598],{"id":36597},"fine-tuning-performance","Fine-tuning Performance",[606,36600,36601],{},"Adjust BVH construction parameters for your use case:",[618,36603,36605],{"className":1178,"code":36604,"language":656,"meta":568,"style":568},"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",[610,36606,36607,36613,36620,36624,36643,36657,36672,36686,36690],{"__ignoreMap":568},[629,36608,36609,36611],{"class":631,"line":569},[629,36610,323],{"class":2426},[629,36612,4690],{"class":675},[629,36614,36615,36618],{"class":631,"line":570},[629,36616,36617],{"class":675}," target",[629,36619,2480],{"class":634},[629,36621,36622],{"class":631,"line":700},[629,36623,2463],{"class":634},[629,36625,36626,36629,36631,36633,36636,36638,36640],{"class":631,"line":721},[629,36627,36628],{"class":638}," splitStrategy",[629,36630,1210],{"class":634},[629,36632,691],{"class":634},[629,36634,36635],{"class":655},"SAH",[629,36637,2432],{"class":634},[629,36639,679],{"class":634},[629,36641,36642],{"class":1201}," // Best runtime performance\n",[629,36644,36645,36648,36650,36652,36654],{"class":631,"line":731},[629,36646,36647],{"class":638}," maxDepth",[629,36649,1210],{"class":634},[629,36651,21195],{"class":2493},[629,36653,679],{"class":634},[629,36655,36656],{"class":1201}," // Shallower tree (faster build)\n",[629,36658,36659,36662,36664,36667,36669],{"class":631,"line":737},[629,36660,36661],{"class":638}," maxLeafSize",[629,36663,1210],{"class":634},[629,36665,36666],{"class":2493}," 5",[629,36668,679],{"class":634},[629,36670,36671],{"class":1201}," // Smaller leaves (better culling)\n",[629,36673,36674,36677,36679,36681,36683],{"class":631,"line":747},[629,36675,36676],{"class":638}," verbose",[629,36678,1210],{"class":634},[629,36680,4390],{"class":4389},[629,36682,679],{"class":634},[629,36684,36685],{"class":1201}," // Debug construction\n",[629,36687,36688],{"class":631,"line":770},[629,36689,7849],{"class":634},[629,36691,36692],{"class":631,"line":782},[629,36693,2440],{"class":675},[4043,36695,36697],{"id":36696},"first-hit-only-mode","First Hit Only Mode",[606,36699,36700],{},"When you only need the closest intersection (e.g., mouse picking):",[618,36702,36704],{"className":1178,"code":36703,"language":656,"meta":568,"style":568},"useBVH(\n target,\n {\n firstHitOnly: true, // Uses raycastFirst internally\n }\n)\n",[610,36705,36706,36712,36718,36722,36736,36740],{"__ignoreMap":568},[629,36707,36708,36710],{"class":631,"line":569},[629,36709,323],{"class":2426},[629,36711,4690],{"class":675},[629,36713,36714,36716],{"class":631,"line":570},[629,36715,36617],{"class":675},[629,36717,2480],{"class":634},[629,36719,36720],{"class":631,"line":700},[629,36721,2463],{"class":634},[629,36723,36724,36727,36729,36731,36733],{"class":631,"line":721},[629,36725,36726],{"class":638}," firstHitOnly",[629,36728,1210],{"class":634},[629,36730,4390],{"class":4389},[629,36732,679],{"class":634},[629,36734,36735],{"class":1201}," // Uses raycastFirst internally\n",[629,36737,36738],{"class":631,"line":731},[629,36739,7849],{"class":634},[629,36741,36742],{"class":631,"line":737},[629,36743,2440],{"class":675},[606,36745,36746],{},"This is significantly faster than computing all intersections when you only need one.",[496,36748,36750],{"id":36749},"important-notes","Important Notes",[2205,36752,36753,36759,36778,36784,36795],{},[2208,36754,36755,36758],{},[1661,36756,36757],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2208,36760,36761,36764,36765,3055,36767,36769,36770,1664,36772,36774,36775,36777],{},[1661,36762,36763],{},"Reactive options",": Only ",[610,36766,14722],{},[610,36768,36399],{}," are reactive. Construction options (",[610,36771,36464],{},[610,36773,36484],{},", etc.) are static - to apply new values, toggle ",[610,36776,14722],{}," off/on.",[2208,36779,36780,36783],{},[1661,36781,36782],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2208,36785,36786,36789,36790,3055,36792,36794],{},[1661,36787,36788],{},"Automatic mesh detection",": Works with ",[610,36791,4284],{},[610,36793,6343],{}," instances.",[2208,36796,36797,36800],{},[1661,36798,36799],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[496,36802,36804],{"id":36803},"performance-tips","Performance Tips",[12204,36806,36807,36813,36819,36825],{},[2208,36808,36809,36812],{},[1661,36810,36811],{},"Use firstHitOnly"," when you only need the closest intersection",[2208,36814,36815,36818],{},[1661,36816,36817],{},"SAH strategy"," gives best runtime performance for production",[2208,36820,36821,36824],{},[1661,36822,36823],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2208,36826,36827,36830],{},[1661,36828,36829],{},"Enable debug mode"," during development to verify BVH coverage",[496,36832,36834],{"id":36833},"integration-with-usegltf","Integration with useGLTF",[606,36836,36837,36838,36840],{},"Perfect pairing with ",[610,36839,125],{}," for optimized model loading:",[618,36842,36844],{"className":620,"code":36843,"language":625,"meta":568,"style":568},"\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",[610,36845,36846,36866,36888,36892,36923,36933,36939,36943,36949,36967,36985,36989],{"__ignoreMap":568},[629,36847,36848,36850,36852,36854,36856,36858,36860,36862,36864],{"class":631,"line":569},[629,36849,635],{"class":634},[629,36851,639],{"class":638},[629,36853,643],{"class":642},[629,36855,646],{"class":642},[629,36857,649],{"class":634},[629,36859,652],{"class":634},[629,36861,656],{"class":655},[629,36863,652],{"class":634},[629,36865,661],{"class":634},[629,36867,36868,36870,36872,36874,36876,36878,36880,36882,36884,36886],{"class":631,"line":570},[629,36869,669],{"class":668},[629,36871,672],{"class":634},[629,36873,35761],{"class":675},[629,36875,679],{"class":634},[629,36877,4339],{"class":675},[629,36879,685],{"class":634},[629,36881,688],{"class":668},[629,36883,691],{"class":634},[629,36885,694],{"class":655},[629,36887,697],{"class":634},[629,36889,36890],{"class":631,"line":700},[629,36891,734],{"emptyLinePlaceholder":586},[629,36893,36894,36896,36898,36900,36902,36904,36906,36908,36910,36912,36914,36917,36919,36921],{"class":631,"line":721},[629,36895,2407],{"class":642},[629,36897,672],{"class":634},[629,36899,2412],{"class":638},[629,36901,1210],{"class":634},[629,36903,5001],{"class":675},[629,36905,2420],{"class":634},[629,36907,2423],{"class":634},[629,36909,4339],{"class":2426},[629,36911,2429],{"class":675},[629,36913,2432],{"class":634},[629,36915,36916],{"class":655},"/models/high-poly-model.glb",[629,36918,2432],{"class":634},[629,36920,679],{"class":634},[629,36922,1196],{"class":634},[629,36924,36925,36928,36930],{"class":631,"line":731},[629,36926,36927],{"class":638}," draco",[629,36929,1210],{"class":634},[629,36931,36932],{"class":4389}," true\n",[629,36934,36935,36937],{"class":631,"line":737},[629,36936,2420],{"class":634},[629,36938,2440],{"class":675},[629,36940,36941],{"class":631,"line":747},[629,36942,734],{"emptyLinePlaceholder":586},[629,36944,36945,36947],{"class":631,"line":770},[629,36946,323],{"class":2426},[629,36948,4690],{"class":675},[629,36950,36951,36953,36955,36957,36959,36961,36963,36965],{"class":631,"line":782},[629,36952,4695],{"class":634},[629,36954,3669],{"class":642},[629,36956,5040],{"class":675},[629,36958,1138],{"class":634},[629,36960,3677],{"class":675},[629,36962,3680],{"class":634},[629,36964,16533],{"class":675},[629,36966,2480],{"class":634},[629,36968,36969,36972,36975,36977,36979,36981,36983],{"class":631,"line":792},[629,36970,36971],{"class":634}," {",[629,36973,36974],{"class":638}," splitStrategy",[629,36976,1210],{"class":634},[629,36978,691],{"class":634},[629,36980,36635],{"class":655},[629,36982,2432],{"class":634},[629,36984,15865],{"class":634},[629,36986,36987],{"class":631,"line":797},[629,36988,2440],{"class":675},[629,36990,36991,36993,36995],{"class":631,"line":819},[629,36992,724],{"class":634},[629,36994,639],{"class":638},[629,36996,661],{"class":634},[496,36998,22769],{"id":22768},[4043,37000,37002],{"id":37001},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2205,37004,37005,37008,37015],{},[2208,37006,37007],{},"Ensure meshes have valid geometry with position attributes",[2208,37009,37010,37011,37014],{},"Check console with ",[610,37012,37013],{},"verbose: true"," to see which meshes are skipped",[2208,37016,37017,37018,37020,37021,37023],{},"Verify the object is an ",[610,37019,7614],{}," (use ",[610,37022,4426],{}," in templates)",[4043,37025,37027],{"id":37026},"performance-not-improving","Performance not improving",[2205,37029,37030,37035,37041,37044],{},[2208,37031,16670,37032,37034],{},[610,37033,36443],{}," if you only need one intersection",[2208,37036,37037,37038,37040],{},"Try different split strategies (",[610,37039,36635],{}," is usually best)",[2208,37042,37043],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[2208,37045,37046],{},"Consider LOD for very distant objects",[1319,37048,37049],{},"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":568,"searchDepth":569,"depth":570,"links":37051},[37052,37053,37058,37063,37067,37068,37069,37070],{"id":35696,"depth":570,"text":35697},{"id":616,"depth":570,"text":15,"children":37054},[37055,37056,37057],{"id":35184,"depth":700,"text":35721},{"id":35889,"depth":700,"text":35890},{"id":36043,"depth":700,"text":36044},{"id":15602,"depth":570,"text":12085,"children":37059},[37060,37061,37062],{"id":36356,"depth":700,"text":36357},{"id":36413,"depth":700,"text":36414},{"id":36571,"depth":700,"text":36572},{"id":21801,"depth":570,"text":21802,"children":37064},[37065,37066],{"id":36597,"depth":700,"text":36598},{"id":36696,"depth":700,"text":36697},{"id":36749,"depth":570,"text":36750},{"id":36803,"depth":570,"text":36804},{"id":36833,"depth":570,"text":36834},{"id":22768,"depth":570,"text":22769,"children":37071},[37072,37073],{"id":37001,"depth":700,"text":37002},{"id":37026,"depth":700,"text":37027},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":323,"description":37074},"Ubx_HIq-xEI-Pv2T8zVe8LT3sJ_wBF7VmDcGGpLgBYs",[37079,37618,38164,38555,39029,40545,41174],{"id":37080,"title":333,"body":37081,"description":37614,"extension":583,"links":584,"meta":37615,"navigation":586,"path":334,"seo":37616,"stem":335,"__hash__":37617},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":493,"value":37082,"toc":37609},[37083,37088,37102,37104,37380,37382,37575,37577,37587,37607],[600,37084,37085],{},[37086,37087],"light-shadow-accumulative-shadows",{},[606,37089,37090,4296,37093,37096,37097,1138],{},[610,37091,37092],{},"\u003CAccumulativeShadows />",[610,37094,37095],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1132,37098,37101],{"href":37099,"rel":37100},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1136],"Drei component of the same name",[496,37103,15],{"id":616},[618,37105,37108],{"className":620,"code":37106,"highlights":37107,"language":625,"meta":568,"style":568},"\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",[570,853,864,874,624,894],[610,37109,37110,37130,37150,37168,37176,37180,37188,37217,37223,37235,37239,37280,37288,37296,37304,37312,37326,37339,37345,37360,37364,37372],{"__ignoreMap":568},[629,37111,37112,37114,37116,37118,37120,37122,37124,37126,37128],{"class":631,"line":569},[629,37113,635],{"class":634},[629,37115,639],{"class":638},[629,37117,643],{"class":642},[629,37119,646],{"class":642},[629,37121,649],{"class":634},[629,37123,652],{"class":634},[629,37125,656],{"class":655},[629,37127,652],{"class":634},[629,37129,661],{"class":634},[629,37131,37133,37135,37137,37140,37142,37144,37146,37148],{"class":37132,"line":570},[631,665],[629,37134,669],{"class":668},[629,37136,672],{"class":634},[629,37138,37139],{"class":675}," AccumulativeShadows",[629,37141,685],{"class":634},[629,37143,688],{"class":668},[629,37145,691],{"class":634},[629,37147,694],{"class":655},[629,37149,697],{"class":634},[629,37151,37152,37154,37156,37158,37160,37162,37164,37166],{"class":631,"line":700},[629,37153,669],{"class":668},[629,37155,672],{"class":634},[629,37157,707],{"class":675},[629,37159,685],{"class":634},[629,37161,688],{"class":668},[629,37163,691],{"class":634},[629,37165,716],{"class":655},[629,37167,697],{"class":634},[629,37169,37170,37172,37174],{"class":631,"line":721},[629,37171,724],{"class":634},[629,37173,639],{"class":638},[629,37175,661],{"class":634},[629,37177,37178],{"class":631,"line":731},[629,37179,734],{"emptyLinePlaceholder":586},[629,37181,37182,37184,37186],{"class":631,"line":737},[629,37183,635],{"class":634},[629,37185,742],{"class":638},[629,37187,661],{"class":634},[629,37189,37190,37192,37194,37196,37198,37200,37202,37204,37207,37209,37211,37213,37215],{"class":631,"line":747},[629,37191,750],{"class":634},[629,37193,753],{"class":638},[629,37195,756],{"class":642},[629,37197,649],{"class":634},[629,37199,652],{"class":634},[629,37201,8920],{"class":655},[629,37203,652],{"class":634},[629,37205,37206],{"class":642}," :shadows",[629,37208,649],{"class":634},[629,37210,652],{"class":634},[629,37212,953],{"class":655},[629,37214,652],{"class":634},[629,37216,661],{"class":634},[629,37218,37219,37221],{"class":631,"line":770},[629,37220,845],{"class":634},[629,37222,23604],{"class":638},[629,37224,37225,37227,37229,37231,37233],{"class":631,"line":782},[629,37226,23622],{"class":642},[629,37228,649],{"class":634},[629,37230,652],{"class":634},[629,37232,8390],{"class":655},[629,37234,3123],{"class":634},[629,37236,37237],{"class":631,"line":792},[629,37238,15338],{"class":634},[629,37240,37241,37243,37245,37247,37249,37251,37254,37256,37258,37260,37262,37265,37267,37270,37272,37274,37276,37278],{"class":631,"line":797},[629,37242,773],{"class":634},[629,37244,848],{"class":638},[629,37246,1931],{"class":642},[629,37248,649],{"class":634},[629,37250,652],{"class":634},[629,37252,37253],{"class":655},"0.3",[629,37255,652],{"class":634},[629,37257,805],{"class":642},[629,37259,649],{"class":634},[629,37261,652],{"class":634},[629,37263,37264],{"class":655},"0.4",[629,37266,652],{"class":634},[629,37268,37269],{"class":642}," :cast-shadow",[629,37271,649],{"class":634},[629,37273,652],{"class":634},[629,37275,953],{"class":655},[629,37277,652],{"class":634},[629,37279,661],{"class":634},[629,37281,37282,37284,37286],{"class":631,"line":819},[629,37283,845],{"class":634},[629,37285,25928],{"class":638},[629,37287,779],{"class":634},[629,37289,37290,37292,37294],{"class":631,"line":623},[629,37291,845],{"class":634},[629,37293,869],{"class":638},[629,37295,779],{"class":634},[629,37297,37298,37300,37302],{"class":631,"line":842},[629,37299,887],{"class":634},[629,37301,848],{"class":638},[629,37303,661],{"class":634},[629,37305,37307,37309],{"class":37306,"line":853},[631,665],[629,37308,773],{"class":634},[629,37310,37311],{"class":638},"AccumulativeShadows\n",[629,37313,37315,37318,37320,37322,37324],{"class":37314,"line":864},[631,665],[629,37316,37317],{"class":642}," :blend",[629,37319,649],{"class":634},[629,37321,652],{"class":634},[629,37323,30696],{"class":655},[629,37325,3123],{"class":634},[629,37327,37329,37331,37333,37335,37337],{"class":37328,"line":874},[631,665],[629,37330,28773],{"class":642},[629,37332,649],{"class":634},[629,37334,652],{"class":634},[629,37336,8920],{"class":655},[629,37338,3123],{"class":634},[629,37340,37342],{"class":37341,"line":624},[631,665],[629,37343,37344],{"class":642}," once\n",[629,37346,37348,37351,37353,37355,37358],{"class":37347,"line":894},[631,665],[629,37349,37350],{"class":642}," :position-y",[629,37352,649],{"class":634},[629,37354,652],{"class":634},[629,37356,37357],{"class":655},"-0.4",[629,37359,3123],{"class":634},[629,37361,37362],{"class":631,"line":904},[629,37363,15338],{"class":634},[629,37365,37366,37368,37370],{"class":631,"line":2617},[629,37367,897],{"class":634},[629,37369,753],{"class":638},[629,37371,661],{"class":634},[629,37373,37374,37376,37378],{"class":631,"line":2626},[629,37375,724],{"class":634},[629,37377,742],{"class":638},[629,37379,661],{"class":634},[496,37381,914],{"id":913},[919,37383,37384,37394],{},[922,37385,37386],{},[925,37387,37388,37390,37392],{},[928,37389,930],{},[928,37391,933],{},[928,37393,936],{},[938,37395,37396,37409,37423,37447,37462,37479,37492,37505,37519,37532,37547,37561],{},[925,37397,37398,37402,37405],{},[943,37399,37400],{},[610,37401,3200],{},[943,37403,37404],{},"Whether shadow creation only happens once (resets after props change)",[943,37406,37407],{},[610,37408,963],{},[925,37410,37411,37416,37419],{},[943,37412,37413],{},[610,37414,37415],{},"accumulate",[943,37417,37418],{},"Whether shadows accumulate progressively over several frames",[943,37420,37421],{},[610,37422,953],{},[925,37424,37425,37430,37443],{},[943,37426,37427],{},[610,37428,37429],{},"frames",[943,37431,37432,37433,37436,37437,37439,37440,37442],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[610,37434,37435],{},"accumulate && once",", 1 frame will be consumed every update for ",[610,37438,37429],{}," updates. Otherwise, ",[610,37441,37429],{}," frames are consumed for every update.",[943,37444,37445],{},[610,37446,36493],{},[925,37448,37449,37453,37458],{},[943,37450,37451],{},[610,37452,25689],{},[943,37454,950,37455,37457],{},[610,37456,37415],{},", controls the refresh ratio",[943,37459,37460],{},[610,37461,30696],{},[925,37463,37464,37469,37475],{},[943,37465,37466],{},[610,37467,37468],{},"limit",[943,37470,37471,37472,37474],{},"If less than ",[610,37473,11576],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[943,37476,37477],{},[610,37478,11576],{},[925,37480,37481,37485,37488],{},[943,37482,37483],{},[610,37484,5622],{},[943,37486,37487],{},"Scale of the plane",[943,37489,37490],{},[610,37491,35579],{},[925,37493,37494,37498,37501],{},[943,37495,37496],{},[610,37497,9672],{},[943,37499,37500],{},"Opacity of the plane",[943,37502,37503],{},[610,37504,1866],{},[925,37506,37507,37512,37515],{},[943,37508,37509],{},[610,37510,37511],{},"alphaTest",[943,37513,37514],{},"Discards alpha pixels",[943,37516,37517],{},[610,37518,2098],{},[925,37520,37521,37525,37528],{},[943,37522,37523],{},[610,37524,7539],{},[943,37526,37527],{},"Shadow color",[943,37529,37530],{},[610,37531,9655],{},[925,37533,37534,37539,37543],{},[943,37535,37536],{},[610,37537,37538],{},"colorBlend",[943,37540,37471,37541,37474],{},[610,37542,11576],{},[943,37544,37545],{},[610,37546,11576],{},[925,37548,37549,37553,37556],{},[943,37550,37551],{},[610,37552,26047],{},[943,37554,37555],{},"Buffer resolution",[943,37557,37558],{},[610,37559,37560],{},"1024",[925,37562,37563,37568,37571],{},[943,37564,37565],{},[610,37566,37567],{},"toneMapped",[943,37569,37570],{},"Texture tonemapping",[943,37572,37573],{},[610,37574,953],{},[496,37576,33474],{"id":33473},[606,37578,37579,37580,37583,37584,1138],{},"You can bring your own lights to ",[610,37581,37582],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[610,37585,37586],{},"\u003CRandomizedLights />",[606,37588,37589,37590,37594,37595,37597,37598,37601,37602,37606],{},"By default, there's a ",[1132,37591,37592],{"href":354},[610,37593,37586],{}," instance provided in ",[610,37596,37582],{},"'s ",[610,37599,37600],{},"\u003Cslot />",". You can replace it with your own ",[1132,37603,37604],{"href":354},[610,37605,37586],{}," or an alternative by passing it as a child component.",[1319,37608,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":37610},[37611,37612,37613],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":33473,"depth":570,"text":33474},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":333,"description":37614},"52wZKp-YdSVGNT5yYFR1FOUZnGMwxDTUxyUOljm6OBA",{"id":37619,"title":337,"body":37620,"description":38160,"extension":583,"links":584,"meta":38161,"navigation":586,"path":338,"seo":38162,"stem":339,"__hash__":38163},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":493,"value":37621,"toc":38157},[37622,37627,37638,37640,37645,38154],[2287,37623,37624],{},[37625,37626],"light-shadow-bake-shadows",{},[606,37628,37629,35178,37631,37634,37635,37637],{},[1661,37630,35177],{},[610,37632,37633],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[610,37636,963],{},", 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.",[496,37639,35185],{"id":35184},[3191,37641,37642],{},[606,37643,37644],{},"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.",[618,37646,37649],{"className":620,"code":37647,"highlights":37648,"language":625,"meta":568,"style":568},"\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",[570,2673],[610,37650,37651,37671,37691,37709,37727,37731,37744,37748,37778,37795,37823,37847,37851,37855,37863,37867,37875,37882,37895,37900,37914,37918,37924,37936,37948,37952,37961,37967,37979,37984,37988,37996,38014,38022,38028,38033,38046,38060,38064,38083,38103,38111,38117,38121,38134,38138,38146],{"__ignoreMap":568},[629,37652,37653,37655,37657,37659,37661,37663,37665,37667,37669],{"class":631,"line":569},[629,37654,635],{"class":634},[629,37656,639],{"class":638},[629,37658,643],{"class":642},[629,37660,646],{"class":642},[629,37662,649],{"class":634},[629,37664,652],{"class":634},[629,37666,656],{"class":655},[629,37668,652],{"class":634},[629,37670,661],{"class":634},[629,37672,37674,37676,37678,37681,37683,37685,37687,37689],{"class":37673,"line":570},[631,665],[629,37675,669],{"class":668},[629,37677,672],{"class":634},[629,37679,37680],{"class":675}," BakeShadows",[629,37682,685],{"class":634},[629,37684,688],{"class":668},[629,37686,691],{"class":634},[629,37688,694],{"class":655},[629,37690,697],{"class":634},[629,37692,37693,37695,37697,37699,37701,37703,37705,37707],{"class":631,"line":700},[629,37694,669],{"class":668},[629,37696,672],{"class":634},[629,37698,707],{"class":675},[629,37700,685],{"class":634},[629,37702,688],{"class":668},[629,37704,691],{"class":634},[629,37706,716],{"class":655},[629,37708,697],{"class":634},[629,37710,37711,37713,37715,37717,37719,37721,37723,37725],{"class":631,"line":721},[629,37712,669],{"class":668},[629,37714,672],{"class":634},[629,37716,3490],{"class":675},[629,37718,685],{"class":634},[629,37720,688],{"class":668},[629,37722,691],{"class":634},[629,37724,625],{"class":655},[629,37726,697],{"class":634},[629,37728,37729],{"class":631,"line":731},[629,37730,734],{"emptyLinePlaceholder":586},[629,37732,37733,37735,37738,37740,37742],{"class":631,"line":737},[629,37734,2407],{"class":642},[629,37736,37737],{"class":675}," cubeRef ",[629,37739,649],{"class":634},[629,37741,3490],{"class":2426},[629,37743,6527],{"class":675},[629,37745,37746],{"class":631,"line":747},[629,37747,734],{"emptyLinePlaceholder":586},[629,37749,37750,37753,37756,37759,37762,37765,37767,37769,37771,37773,37776],{"class":631,"line":770},[629,37751,37752],{"class":642},"function",[629,37754,37755],{"class":2426}," onLoop",[629,37757,37758],{"class":634},"({",[629,37760,37761],{"class":6830}," elapsed",[629,37763,37764],{"class":634}," }:",[629,37766,672],{"class":634},[629,37768,37761],{"class":638},[629,37770,1210],{"class":634},[629,37772,5349],{"class":1192},[629,37774,37775],{"class":634}," })",[629,37777,1196],{"class":634},[629,37779,37780,37782,37784,37787,37789,37791,37793],{"class":631,"line":782},[629,37781,19324],{"class":668},[629,37783,3066],{"class":638},[629,37785,37786],{"class":675},"cubeRef",[629,37788,1138],{"class":634},[629,37790,3677],{"class":675},[629,37792,4726],{"class":638},[629,37794,3252],{"class":634},[629,37796,37797,37800,37802,37804,37806,37808,37810,37813,37815,37817,37820],{"class":631,"line":792},[629,37798,37799],{"class":675}," cubeRef",[629,37801,1138],{"class":634},[629,37803,3677],{"class":675},[629,37805,1138],{"class":634},[629,37807,5619],{"class":675},[629,37809,1138],{"class":634},[629,37811,37812],{"class":675},"y",[629,37814,2423],{"class":634},[629,37816,37761],{"class":675},[629,37818,37819],{"class":634}," *",[629,37821,37822],{"class":2493}," 0.5\n",[629,37824,37825,37827,37829,37831,37833,37835,37837,37839,37841,37843,37845],{"class":631,"line":797},[629,37826,37799],{"class":675},[629,37828,1138],{"class":634},[629,37830,3677],{"class":675},[629,37832,1138],{"class":634},[629,37834,5619],{"class":675},[629,37836,1138],{"class":634},[629,37838,7832],{"class":675},[629,37840,2423],{"class":634},[629,37842,37761],{"class":675},[629,37844,37819],{"class":634},[629,37846,37822],{"class":2493},[629,37848,37849],{"class":631,"line":819},[629,37850,7849],{"class":634},[629,37852,37853],{"class":631,"line":623},[629,37854,1317],{"class":634},[629,37856,37857,37859,37861],{"class":631,"line":842},[629,37858,724],{"class":634},[629,37860,639],{"class":638},[629,37862,661],{"class":634},[629,37864,37865],{"class":631,"line":853},[629,37866,734],{"emptyLinePlaceholder":586},[629,37868,37869,37871,37873],{"class":631,"line":864},[629,37870,635],{"class":634},[629,37872,742],{"class":638},[629,37874,661],{"class":634},[629,37876,37877,37879],{"class":631,"line":874},[629,37878,750],{"class":634},[629,37880,37881],{"class":638},"TresCanvas\n",[629,37883,37884,37887,37889,37891,37893],{"class":631,"line":624},[629,37885,37886],{"class":642}," clear-color",[629,37888,649],{"class":634},[629,37890,652],{"class":634},[629,37892,9852],{"class":655},[629,37894,3123],{"class":634},[629,37896,37897],{"class":631,"line":894},[629,37898,37899],{"class":642}," shadows\n",[629,37901,37902,37905,37907,37909,37912],{"class":631,"line":904},[629,37903,37904],{"class":642}," @loop",[629,37906,649],{"class":634},[629,37908,652],{"class":634},[629,37910,37911],{"class":655},"onLoop",[629,37913,3123],{"class":634},[629,37915,37916],{"class":631,"line":2617},[629,37917,5165],{"class":634},[629,37919,37920,37922],{"class":631,"line":2626},[629,37921,773],{"class":634},[629,37923,23604],{"class":638},[629,37925,37926,37928,37930,37932,37934],{"class":631,"line":2646},[629,37927,15325],{"class":642},[629,37929,649],{"class":634},[629,37931,652],{"class":634},[629,37933,7437],{"class":655},[629,37935,3123],{"class":634},[629,37937,37938,37940,37942,37944,37946],{"class":631,"line":2655},[629,37939,23622],{"class":642},[629,37941,649],{"class":634},[629,37943,652],{"class":634},[629,37945,8390],{"class":655},[629,37947,3123],{"class":634},[629,37949,37950],{"class":631,"line":2664},[629,37951,15338],{"class":634},[629,37953,37955,37957,37959],{"class":37954,"line":2673},[631,665],[629,37956,773],{"class":634},[629,37958,37633],{"class":638},[629,37960,779],{"class":634},[629,37962,37963,37965],{"class":631,"line":2695},[629,37964,773],{"class":634},[629,37966,5118],{"class":638},[629,37968,37969,37971,37973,37975,37977],{"class":631,"line":2739},[629,37970,10425],{"class":642},[629,37972,649],{"class":634},[629,37974,652],{"class":634},[629,37976,37786],{"class":655},[629,37978,3123],{"class":634},[629,37980,37981],{"class":631,"line":2748},[629,37982,37983],{"class":642}," cast-shadow\n",[629,37985,37986],{"class":631,"line":2757},[629,37987,10453],{"class":634},[629,37989,37990,37992,37994],{"class":631,"line":3914},[629,37991,845],{"class":634},[629,37993,859],{"class":638},[629,37995,779],{"class":634},[629,37997,37998,38000,38002,38004,38006,38008,38010,38012],{"class":631,"line":3945},[629,37999,845],{"class":634},[629,38001,2678],{"class":638},[629,38003,2681],{"class":642},[629,38005,649],{"class":634},[629,38007,652],{"class":634},[629,38009,11389],{"class":655},[629,38011,652],{"class":634},[629,38013,779],{"class":634},[629,38015,38016,38018,38020],{"class":631,"line":3966},[629,38017,887],{"class":634},[629,38019,848],{"class":638},[629,38021,661],{"class":634},[629,38023,38024,38026],{"class":631,"line":3985},[629,38025,773],{"class":634},[629,38027,5118],{"class":638},[629,38029,38030],{"class":631,"line":4017},[629,38031,38032],{"class":642}," receive-shadow\n",[629,38034,38035,38037,38039,38041,38044],{"class":631,"line":4026},[629,38036,15325],{"class":642},[629,38038,649],{"class":634},[629,38040,652],{"class":634},[629,38042,38043],{"class":655},"[0, -2, 0]",[629,38045,3123],{"class":634},[629,38047,38048,38051,38053,38055,38058],{"class":631,"line":4035},[629,38049,38050],{"class":642}," :rotation-x",[629,38052,649],{"class":634},[629,38054,652],{"class":634},[629,38056,38057],{"class":655},"-Math.PI / 2",[629,38059,3123],{"class":634},[629,38061,38062],{"class":631,"line":19512},[629,38063,10453],{"class":634},[629,38065,38066,38068,38070,38072,38074,38076,38079,38081],{"class":631,"line":19527},[629,38067,845],{"class":634},[629,38069,25845],{"class":638},[629,38071,1951],{"class":642},[629,38073,649],{"class":634},[629,38075,652],{"class":634},[629,38077,38078],{"class":655},"[5, 5]",[629,38080,652],{"class":634},[629,38082,779],{"class":634},[629,38084,38085,38087,38089,38092,38094,38096,38099,38101],{"class":631,"line":19542},[629,38086,845],{"class":634},[629,38088,2678],{"class":638},[629,38090,38091],{"class":642}," :color",[629,38093,649],{"class":634},[629,38095,652],{"class":634},[629,38097,38098],{"class":655},"0xF7F7F7",[629,38100,652],{"class":634},[629,38102,779],{"class":634},[629,38104,38105,38107,38109],{"class":631,"line":19547},[629,38106,887],{"class":634},[629,38108,848],{"class":638},[629,38110,661],{"class":634},[629,38112,38113,38115],{"class":631,"line":19554},[629,38114,773],{"class":634},[629,38116,15307],{"class":638},[629,38118,38119],{"class":631,"line":19559},[629,38120,37983],{"class":642},[629,38122,38123,38125,38127,38129,38132],{"class":631,"line":19565},[629,38124,15325],{"class":642},[629,38126,649],{"class":634},[629,38128,652],{"class":634},[629,38130,38131],{"class":655},"[0, 10, 0]",[629,38133,3123],{"class":634},[629,38135,38136],{"class":631,"line":19586},[629,38137,15338],{"class":634},[629,38139,38140,38142,38144],{"class":631,"line":19592},[629,38141,897],{"class":634},[629,38143,753],{"class":638},[629,38145,661],{"class":634},[629,38147,38148,38150,38152],{"class":631,"line":19599},[629,38149,724],{"class":634},[629,38151,742],{"class":638},[629,38153,661],{"class":634},[1319,38155,38156],{},"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":568,"searchDepth":569,"depth":570,"links":38158},[38159],{"id":35184,"depth":570,"text":35185},"Bakes shadows in the first frame for performance optimization.",{},{"title":337,"description":38160},"hU2MwhHPZEp5uQ1ZY4cZSmx8JjSu1SZkY7M14ckgtTM",{"id":38165,"title":341,"body":38166,"description":38551,"extension":583,"links":584,"meta":38552,"navigation":586,"path":342,"seo":38553,"stem":343,"__hash__":38554},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":493,"value":38167,"toc":38547},[38168,38173,38182,38184,38451,38453,38455,38545],[600,38169,38170],{},[38171,38172],"light-shadow-circle-shadow",{},[606,38174,38175,38178,38179,1138],{},[610,38176,38177],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[610,38180,38181],{},"THREE.PlaneGeometry",[496,38183,15],{"id":616},[618,38185,38188],{"className":620,"code":38186,"highlights":38187,"language":625,"meta":568,"style":568},"\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",[570,853],[610,38189,38190,38210,38236,38256,38264,38268,38276,38294,38302,38310,38329,38347,38355,38373,38381,38401,38409,38417,38435,38443],{"__ignoreMap":568},[629,38191,38192,38194,38196,38198,38200,38202,38204,38206,38208],{"class":631,"line":569},[629,38193,635],{"class":634},[629,38195,639],{"class":638},[629,38197,643],{"class":642},[629,38199,646],{"class":642},[629,38201,649],{"class":634},[629,38203,652],{"class":634},[629,38205,656],{"class":655},[629,38207,652],{"class":634},[629,38209,661],{"class":634},[629,38211,38213,38215,38217,38220,38222,38224,38226,38228,38230,38232,38234],{"class":38212,"line":570},[631,665],[629,38214,669],{"class":668},[629,38216,672],{"class":634},[629,38218,38219],{"class":675}," CircleShadow",[629,38221,679],{"class":634},[629,38223,682],{"class":675},[629,38225,685],{"class":634},[629,38227,688],{"class":668},[629,38229,8282],{"class":634},[629,38231,694],{"class":655},[629,38233,652],{"class":634},[629,38235,8289],{"class":634},[629,38237,38238,38240,38242,38244,38246,38248,38250,38252,38254],{"class":631,"line":700},[629,38239,669],{"class":668},[629,38241,672],{"class":634},[629,38243,707],{"class":675},[629,38245,685],{"class":634},[629,38247,688],{"class":668},[629,38249,8282],{"class":634},[629,38251,716],{"class":655},[629,38253,652],{"class":634},[629,38255,8289],{"class":634},[629,38257,38258,38260,38262],{"class":631,"line":721},[629,38259,724],{"class":634},[629,38261,639],{"class":638},[629,38263,661],{"class":634},[629,38265,38266],{"class":631,"line":731},[629,38267,734],{"emptyLinePlaceholder":586},[629,38269,38270,38272,38274],{"class":631,"line":737},[629,38271,635],{"class":634},[629,38273,742],{"class":638},[629,38275,661],{"class":634},[629,38277,38278,38280,38282,38284,38286,38288,38290,38292],{"class":631,"line":747},[629,38279,750],{"class":634},[629,38281,753],{"class":638},[629,38283,756],{"class":642},[629,38285,649],{"class":634},[629,38287,652],{"class":634},[629,38289,9852],{"class":655},[629,38291,652],{"class":634},[629,38293,661],{"class":634},[629,38295,38296,38298,38300],{"class":631,"line":770},[629,38297,773],{"class":634},[629,38299,776],{"class":638},[629,38301,779],{"class":634},[629,38303,38304,38306,38308],{"class":631,"line":782},[629,38305,773],{"class":634},[629,38307,787],{"class":638},[629,38309,779],{"class":634},[629,38311,38312,38314,38316,38318,38320,38322,38325,38327],{"class":631,"line":792},[629,38313,773],{"class":634},[629,38315,8808],{"class":638},[629,38317,1931],{"class":642},[629,38319,649],{"class":634},[629,38321,652],{"class":634},[629,38323,38324],{"class":655},"-0.5",[629,38326,652],{"class":634},[629,38328,661],{"class":634},[629,38330,38331,38333,38335,38337,38339,38341,38343,38345],{"class":631,"line":797},[629,38332,845],{"class":634},[629,38334,848],{"class":638},[629,38336,1931],{"class":642},[629,38338,649],{"class":634},[629,38340,652],{"class":634},[629,38342,1866],{"class":655},[629,38344,652],{"class":634},[629,38346,661],{"class":634},[629,38348,38349,38351,38353],{"class":631,"line":819},[629,38350,856],{"class":634},[629,38352,859],{"class":638},[629,38354,779],{"class":634},[629,38356,38357,38359,38361,38363,38365,38367,38369,38371],{"class":631,"line":623},[629,38358,856],{"class":634},[629,38360,11380],{"class":638},[629,38362,2681],{"class":642},[629,38364,649],{"class":634},[629,38366,652],{"class":634},[629,38368,11389],{"class":655},[629,38370,652],{"class":634},[629,38372,779],{"class":634},[629,38374,38375,38377,38379],{"class":631,"line":842},[629,38376,877],{"class":634},[629,38378,848],{"class":638},[629,38380,661],{"class":634},[629,38382,38384,38386,38389,38391,38393,38395,38397,38399],{"class":38383,"line":853},[631,665],[629,38385,845],{"class":634},[629,38387,38388],{"class":638},"CircleShadow",[629,38390,805],{"class":642},[629,38392,649],{"class":634},[629,38394,652],{"class":634},[629,38396,27474],{"class":655},[629,38398,652],{"class":634},[629,38400,779],{"class":634},[629,38402,38403,38405,38407],{"class":631,"line":864},[629,38404,887],{"class":634},[629,38406,8808],{"class":638},[629,38408,661],{"class":634},[629,38410,38411,38413,38415],{"class":631,"line":874},[629,38412,773],{"class":634},[629,38414,8448],{"class":638},[629,38416,779],{"class":634},[629,38418,38419,38421,38423,38425,38427,38429,38431,38433],{"class":631,"line":624},[629,38420,773],{"class":634},[629,38422,8467],{"class":638},[629,38424,1477],{"class":642},[629,38426,649],{"class":634},[629,38428,652],{"class":634},[629,38430,11424],{"class":655},[629,38432,652],{"class":634},[629,38434,779],{"class":634},[629,38436,38437,38439,38441],{"class":631,"line":894},[629,38438,897],{"class":634},[629,38440,753],{"class":638},[629,38442,661],{"class":634},[629,38444,38445,38447,38449],{"class":631,"line":904},[629,38446,724],{"class":634},[629,38448,742],{"class":638},[629,38450,661],{"class":634},[496,38452,914],{"id":913},[606,38454,917],{},[919,38456,38457,38467],{},[922,38458,38459],{},[925,38460,38461,38463,38465],{},[928,38462,8081],{"align":989},[928,38464,933],{"align":989},[928,38466,936],{},[938,38468,38469,38485,38498,38518,38532],{},[925,38470,38471,38475,38481],{},[943,38472,38473],{"align":989},[610,38474,7539],{},[943,38476,38477,38478],{"align":989},"Color of the shadow as a ",[610,38479,38480],{},"Color | number | string",[943,38482,38483],{},[610,38484,9655],{},[925,38486,38487,38491,38494],{},[943,38488,38489],{"align":989},[610,38490,9672],{},[943,38492,38493],{"align":989},"Opacity of the shadow",[943,38495,38496],{},[610,38497,1938],{},[925,38499,38500,38505,38514],{},[943,38501,38502],{"align":989},[610,38503,38504],{},"offset",[943,38506,38507,38508,38510,38511,38513],{"align":989},"Placement of the first radial gradient color stop. ",[610,38509,11845],{}," is the center of the circle. ",[610,38512,11723],{}," is edge.",[943,38515,38516],{},[610,38517,957],{},[925,38519,38520,38525,38528],{},[943,38521,38522],{"align":989},[610,38523,38524],{},"fog",[943,38526,38527],{"align":989},"Whether the material is affected by fog",[943,38529,38530],{},[610,38531,963],{},[925,38533,38534,38538,38541],{},[943,38535,38536],{"align":989},[610,38537,9179],{},[943,38539,38540],{"align":989},"Whether rendering the material has any effect on the depth buffer",[943,38542,38543],{},[610,38544,963],{},[1319,38546,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":38548},[38549,38550],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":341,"description":38551},"TUy3Uz9v0MKp5WFl-uNVQ_T1BiUHugE-_tL8tI71jFo",{"id":38556,"title":345,"body":38557,"description":39025,"extension":583,"links":584,"meta":39026,"navigation":586,"path":346,"seo":39027,"stem":347,"__hash__":39028},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":493,"value":38558,"toc":39021},[38559,38564,38580,38582,38834,38836,39019],[600,38560,38561],{},[38562,38563],"light-shadow-contact-shadow",{},[606,38565,38566,38569,38570,35688,38575,1138],{},[610,38567,38568],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1132,38571,38574],{"href":38572,"rel":38573},"https://threejs.org/examples/webgl_shadow_contact.html",[1136],"Three.js contact shadows example",[1132,38576,38579],{"href":38577,"rel":38578},"https://twitter.com/mrdoob",[1136],"@mrdoob",[496,38581,15],{"id":616},[618,38583,38586],{"className":620,"code":38584,"highlights":38585,"language":625,"meta":568,"style":568},"\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",[570,623],[610,38587,38588,38608,38637,38655,38663,38667,38675,38693,38735,38753,38761,38769,38777,38818,38826],{"__ignoreMap":568},[629,38589,38590,38592,38594,38596,38598,38600,38602,38604,38606],{"class":631,"line":569},[629,38591,635],{"class":634},[629,38593,639],{"class":638},[629,38595,643],{"class":642},[629,38597,646],{"class":642},[629,38599,649],{"class":634},[629,38601,652],{"class":634},[629,38603,656],{"class":655},[629,38605,652],{"class":634},[629,38607,661],{"class":634},[629,38609,38611,38613,38615,38618,38620,38622,38624,38627,38629,38631,38633,38635],{"class":38610,"line":570},[631,665],[629,38612,669],{"class":668},[629,38614,672],{"class":634},[629,38616,38617],{"class":675}," ContactShadows",[629,38619,679],{"class":634},[629,38621,8299],{"class":675},[629,38623,679],{"class":634},[629,38625,38626],{"class":675}," TorusKnot",[629,38628,685],{"class":634},[629,38630,688],{"class":668},[629,38632,691],{"class":634},[629,38634,694],{"class":655},[629,38636,697],{"class":634},[629,38638,38639,38641,38643,38645,38647,38649,38651,38653],{"class":631,"line":700},[629,38640,669],{"class":668},[629,38642,672],{"class":634},[629,38644,707],{"class":675},[629,38646,685],{"class":634},[629,38648,688],{"class":668},[629,38650,691],{"class":634},[629,38652,716],{"class":655},[629,38654,697],{"class":634},[629,38656,38657,38659,38661],{"class":631,"line":721},[629,38658,724],{"class":634},[629,38660,639],{"class":638},[629,38662,661],{"class":634},[629,38664,38665],{"class":631,"line":731},[629,38666,734],{"emptyLinePlaceholder":586},[629,38668,38669,38671,38673],{"class":631,"line":737},[629,38670,635],{"class":634},[629,38672,742],{"class":638},[629,38674,661],{"class":634},[629,38676,38677,38679,38681,38683,38685,38687,38689,38691],{"class":631,"line":747},[629,38678,750],{"class":634},[629,38680,753],{"class":638},[629,38682,756],{"class":642},[629,38684,649],{"class":634},[629,38686,652],{"class":634},[629,38688,2688],{"class":655},[629,38690,652],{"class":634},[629,38692,661],{"class":634},[629,38694,38695,38697,38699,38701,38703,38705,38707,38709,38712,38714,38716,38719,38721,38724,38726,38728,38731,38733],{"class":631,"line":770},[629,38696,773],{"class":634},[629,38698,8410],{"class":638},[629,38700,8413],{"class":642},[629,38702,649],{"class":634},[629,38704,652],{"class":634},[629,38706,812],{"class":655},[629,38708,652],{"class":634},[629,38710,38711],{"class":642}," :range",[629,38713,649],{"class":634},[629,38715,652],{"class":634},[629,38717,38718],{"class":655},"[0, 0.7]",[629,38720,652],{"class":634},[629,38722,38723],{"class":642}," :rotation-factor",[629,38725,649],{"class":634},[629,38727,652],{"class":634},[629,38729,38730],{"class":655},"9",[629,38732,652],{"class":634},[629,38734,661],{"class":634},[629,38736,38737,38739,38741,38743,38745,38747,38749,38751],{"class":631,"line":782},[629,38738,845],{"class":634},[629,38740,33894],{"class":638},[629,38742,805],{"class":642},[629,38744,649],{"class":634},[629,38746,652],{"class":634},[629,38748,25294],{"class":655},[629,38750,652],{"class":634},[629,38752,661],{"class":634},[629,38754,38755,38757,38759],{"class":631,"line":792},[629,38756,856],{"class":634},[629,38758,869],{"class":638},[629,38760,779],{"class":634},[629,38762,38763,38765,38767],{"class":631,"line":797},[629,38764,877],{"class":634},[629,38766,33894],{"class":638},[629,38768,661],{"class":634},[629,38770,38771,38773,38775],{"class":631,"line":819},[629,38772,887],{"class":634},[629,38774,8410],{"class":638},[629,38776,661],{"class":634},[629,38778,38780,38782,38785,38787,38789,38791,38793,38795,38797,38799,38801,38804,38806,38808,38810,38812,38814,38816],{"class":38779,"line":623},[631,665],[629,38781,773],{"class":634},[629,38783,38784],{"class":638},"ContactShadows",[629,38786,1931],{"class":642},[629,38788,649],{"class":634},[629,38790,652],{"class":634},[629,38792,8961],{"class":655},[629,38794,652],{"class":634},[629,38796,2681],{"class":642},[629,38798,649],{"class":634},[629,38800,652],{"class":634},[629,38802,38803],{"class":655},"#335",[629,38805,652],{"class":634},[629,38807,805],{"class":642},[629,38809,649],{"class":634},[629,38811,652],{"class":634},[629,38813,28871],{"class":655},[629,38815,652],{"class":634},[629,38817,779],{"class":634},[629,38819,38820,38822,38824],{"class":631,"line":842},[629,38821,897],{"class":634},[629,38823,753],{"class":638},[629,38825,661],{"class":634},[629,38827,38828,38830,38832],{"class":631,"line":853},[629,38829,724],{"class":634},[629,38831,742],{"class":638},[629,38833,661],{"class":634},[496,38835,914],{"id":913},[919,38837,38838,38848],{},[922,38839,38840],{},[925,38841,38842,38844,38846],{},[928,38843,930],{},[928,38845,933],{},[928,38847,936],{},[938,38849,38850,38863,38876,38890,38906,38920,38934,38948,38962,38976,38989,39006],{},[925,38851,38852,38856,38859],{},[943,38853,38854],{},[610,38855,9672],{},[943,38857,38858],{},"The opacity of the shadows.",[943,38860,38861],{},[610,38862,1866],{},[925,38864,38865,38869,38872],{},[943,38866,38867],{},[610,38868,26264],{},[943,38870,38871],{},"The blur of the shadows.",[943,38873,38874],{},[610,38875,1866],{},[925,38877,38878,38882,38885],{},[943,38879,38880],{},[610,38881,7539],{},[943,38883,38884],{},"The color of the shadows.",[943,38886,38887],{},[610,38888,38889],{},"'#000000'",[925,38891,38892,38897,38902],{},[943,38893,38894],{},[610,38895,38896],{},"tint",[943,38898,38899,38900,1138],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[610,38901,7539],{},[943,38903,38904],{},[610,38905,1171],{},[925,38907,38908,38912,38918],{},[943,38909,38910],{},[610,38911,5622],{},[943,38913,38914,38915,1138],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[610,38916,38917],{},"[x, y]",[943,38919,35579],{},[925,38921,38922,38927,38930],{},[943,38923,38924],{},[610,38925,38926],{},"width",[943,38928,38929],{},"The width of the shadow plane.",[943,38931,38932],{},[610,38933,1866],{},[925,38935,38936,38941,38944],{},[943,38937,38938],{},[610,38939,38940],{},"height",[943,38942,38943],{},"The height of the shadow plane.",[943,38945,38946],{},[610,38947,1866],{},[925,38949,38950,38955,38958],{},[943,38951,38952],{},[610,38953,38954],{},"far",[943,38956,38957],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[943,38959,38960],{},[610,38961,35579],{},[925,38963,38964,38969,38972],{},[943,38965,38966],{},[610,38967,38968],{},"smooth",[943,38970,38971],{},"Whether the shadows should be smoothed to reduce artifacts.",[943,38973,38974],{},[610,38975,953],{},[925,38977,38978,38982,38985],{},[943,38979,38980],{},[610,38981,26047],{},[943,38983,38984],{},"The resolution of the shadow textures.",[943,38986,38987],{},[610,38988,26056],{},[925,38990,38991,38995,39001],{},[943,38992,38993],{},[610,38994,37429],{},[943,38996,38997,38998,39000],{},"For performance, optionally stop updating shadows after ",[610,38999,37429],{}," frames.",[943,39002,39003],{},[610,39004,39005],{},"Math.POSITIVE_INFINITY",[925,39007,39008,39012,39015],{},[943,39009,39010],{},[610,39011,9179],{},[943,39013,39014],{},"Whether the shadows should write to the depth buffer or not.",[943,39016,39017],{},[610,39018,963],{},[1319,39020,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":39022},[39023,39024],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":345,"description":39025},"o8ix90CI6-yelSPJOMj3eTHEv1PqdpDiKiRrYUJfBHQ",{"id":39030,"title":349,"body":39031,"description":40541,"extension":583,"links":584,"meta":40542,"navigation":586,"path":350,"seo":40543,"stem":351,"__hash__":40544},"docs/2.api/7.light-shadow/lensflare.md",{"type":493,"value":39032,"toc":40525},[39033,39038,39049,39051,39184,39186,39311,39315,39321,39329,39335,39392,39396,39402,39416,39423,39427,39453,39470,39476,39481,39486,39493,39499,39591,39596,39600,39605,39618,39622,39630,39687,39697,39700,39719,39728,39735,39739,39742,39750,39762,39770,39796,39803,39836,39840,39843,39887,39901,39906,39909,39912,39935,39954,39959,39963,39966,40096,40101,40106,40294,40300,40306,40309,40312,40522],[600,39034,39035],{},[39036,39037],"light-shadow-lensflare",{},[606,39039,39040,39043,39044,1138],{},[610,39041,39042],{},"\u003CLensflare />"," wraps the ",[1132,39045,39048],{"href":39046,"rel":39047},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1136],"Three.js Lensflare",[496,39050,15],{"id":616},[618,39052,39055],{"className":620,"code":39053,"highlights":39054,"language":625,"meta":568,"style":568},"\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",[700,782],[610,39056,39057,39077,39095,39115,39123,39127,39135,39143,39151,39160,39168,39176],{"__ignoreMap":568},[629,39058,39059,39061,39063,39065,39067,39069,39071,39073,39075],{"class":631,"line":569},[629,39060,635],{"class":634},[629,39062,639],{"class":638},[629,39064,643],{"class":642},[629,39066,646],{"class":642},[629,39068,649],{"class":634},[629,39070,652],{"class":634},[629,39072,656],{"class":655},[629,39074,652],{"class":634},[629,39076,661],{"class":634},[629,39078,39079,39081,39083,39085,39087,39089,39091,39093],{"class":631,"line":570},[629,39080,669],{"class":668},[629,39082,672],{"class":634},[629,39084,707],{"class":675},[629,39086,685],{"class":634},[629,39088,688],{"class":668},[629,39090,691],{"class":634},[629,39092,716],{"class":655},[629,39094,697],{"class":634},[629,39096,39098,39100,39102,39105,39107,39109,39111,39113],{"class":39097,"line":700},[631,665],[629,39099,669],{"class":668},[629,39101,672],{"class":634},[629,39103,39104],{"class":675}," Lensflare",[629,39106,685],{"class":634},[629,39108,688],{"class":668},[629,39110,691],{"class":634},[629,39112,694],{"class":655},[629,39114,697],{"class":634},[629,39116,39117,39119,39121],{"class":631,"line":721},[629,39118,724],{"class":634},[629,39120,639],{"class":638},[629,39122,661],{"class":634},[629,39124,39125],{"class":631,"line":731},[629,39126,734],{"emptyLinePlaceholder":586},[629,39128,39129,39131,39133],{"class":631,"line":737},[629,39130,635],{"class":634},[629,39132,742],{"class":638},[629,39134,661],{"class":634},[629,39136,39137,39139,39141],{"class":631,"line":747},[629,39138,750],{"class":634},[629,39140,753],{"class":638},[629,39142,661],{"class":634},[629,39144,39145,39147,39149],{"class":631,"line":770},[629,39146,773],{"class":634},[629,39148,9428],{"class":638},[629,39150,661],{"class":634},[629,39152,39154,39156,39158],{"class":39153,"line":782},[631,665],[629,39155,845],{"class":634},[629,39157,349],{"class":638},[629,39159,779],{"class":634},[629,39161,39162,39164,39166],{"class":631,"line":792},[629,39163,887],{"class":634},[629,39165,9428],{"class":638},[629,39167,661],{"class":634},[629,39169,39170,39172,39174],{"class":631,"line":797},[629,39171,897],{"class":634},[629,39173,753],{"class":638},[629,39175,661],{"class":634},[629,39177,39178,39180,39182],{"class":631,"line":819},[629,39179,724],{"class":634},[629,39181,742],{"class":638},[629,39183,661],{"class":634},[496,39185,914],{"id":913},[919,39187,39188,39198],{},[922,39189,39190],{},[925,39191,39192,39194,39196],{},[928,39193,8081],{"align":989},[928,39195,933],{"align":989},[928,39197,936],{"align":989},[938,39199,39200,39215,39230,39247,39263,39280,39295],{},[925,39201,39202,39206,39211],{},[943,39203,39204],{"align":989},[1661,39205,5622],{},[943,39207,39208,39210],{"align":989},[610,39209,5344],{}," – multiplier for lensflare element sizes",[943,39212,39213],{"align":989},[610,39214,11723],{},[925,39216,39217,39221,39226],{},[943,39218,39219],{"align":989},[1661,39220,11583],{},[943,39222,39223,39225],{"align":989},[610,39224,5344],{}," – multiplier for element distances from flare center",[943,39227,39228],{"align":989},[610,39229,11723],{},[925,39231,39232,39237,39243],{},[943,39233,39234],{"align":989},[1661,39235,39236],{},"elements",[943,39238,39239,39242],{"align":989},[610,39240,39241],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[943,39244,39245],{"align":989},[610,39246,1171],{},[925,39248,39249,39254,39259],{},[943,39250,39251],{"align":989},[1661,39252,39253],{},"seed",[943,39255,39256,39258],{"align":989},[610,39257,5344],{}," – random seed for generating random seeded elements",[943,39260,39261],{"align":989},[610,39262,1171],{},[925,39264,39265,39270,39276],{},[943,39266,39267],{"align":989},[1661,39268,39269],{},"seedProps",[943,39271,39272,39275],{"align":989},[610,39273,39274],{},"SeedProps[]"," – specifications for generating random seeded elements",[943,39277,39278],{"align":989},[610,39279,1171],{},[925,39281,39282,39286,39291],{},[943,39283,39284],{"align":989},[1661,39285,7539],{},[943,39287,39288,39290],{"align":989},[610,39289,7554],{}," – default color of lensflare elements",[943,39292,39293],{"align":989},[610,39294,1171],{},[925,39296,39297,39301,39307],{},[943,39298,39299],{"align":989},[1661,39300,2709],{},[943,39302,39303,39306],{"align":989},[610,39304,39305],{},"Texture | string"," – default texture of lensflare elements",[943,39308,39309],{"align":989},[610,39310,1171],{},[496,39312,39313],{"id":39236},[610,39314,39236],{},[606,39316,39317,39318,39320],{},"You can specify individual lensflare element properties directly using the component's ",[610,39319,39236],{}," prop.",[606,39322,2768,39323,39325,39326,1138],{},[610,39324,39236],{}," prop expects an instance of ",[610,39327,39328],{},"(Partial\u003CLensflareElementProps>)[]",[606,39330,39331,39332,39334],{},"Every object in ",[610,39333,39236],{}," may have any (or none) of the following properties.",[919,39336,39337,39345],{},[922,39338,39339],{},[925,39340,39341,39343],{},[928,39342,8081],{"align":989},[928,39344,933],{"align":989},[938,39346,39347,39359,39370,39381],{},[925,39348,39349,39353],{},[943,39350,39351],{"align":989},[1661,39352,2709],{},[943,39354,39355,39358],{"align":989},[610,39356,39357],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[925,39360,39361,39365],{},[943,39362,39363],{"align":989},[1661,39364,7539],{},[943,39366,39367,39369],{"align":989},[610,39368,7554],{}," - color of the lensflare element",[925,39371,39372,39376],{},[943,39373,39374],{"align":989},[1661,39375,11583],{},[943,39377,39378,39380],{"align":989},[610,39379,5344],{}," - distance of the lensflare element from the lensflare center",[925,39382,39383,39387],{},[943,39384,39385],{"align":989},[1661,39386,14793],{},[943,39388,39389,39391],{"align":989},[610,39390,5344],{}," - size of the lensflare element",[496,39393,39394],{"id":39253},[610,39395,39253],{},[606,39397,39398,39399,39401],{},"Adding a ",[610,39400,39253],{}," prop to a component enables seeded random element generation.",[606,39403,2768,39404,39406,39407,39412,39413,1138],{},[610,39405,39253],{}," prop is used as the \"seed\" in a ",[1132,39408,39411],{"href":39409,"rel":39410},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1136],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[610,39414,39415],{},"SeedProps",[1997,39417,39418],{},[606,39419,39420,39421,1138],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[629,39422],{},[4043,39424,39426],{"id":39425},"example","Example",[618,39428,39430],{"className":620,"code":39429,"language":625,"meta":568,"style":568},"\u003CLensflare :seed=\"seedRef\" />\n",[610,39431,39432],{"__ignoreMap":568},[629,39433,39434,39436,39438,39440,39442,39444,39446,39449,39451],{"class":631,"line":569},[629,39435,635],{"class":634},[629,39437,349],{"class":638},[629,39439,3021],{"class":634},[629,39441,39253],{"class":642},[629,39443,649],{"class":634},[629,39445,652],{"class":634},[629,39447,39448],{"class":675},"seedRef",[629,39450,652],{"class":634},[629,39452,779],{"class":634},[606,39454,39455,39456,2242,39459,1664,39461,1664,39463,1664,39465,1664,39467,39469],{},"Below, the results of setting ",[610,39457,39458],{},"seedRef.value",[610,39460,957],{},[610,39462,1866],{},[610,39464,812],{},[610,39466,19465],{},[610,39468,8420],{},", respectively.",[606,39471,39472],{},[8227,39473],{"alt":39474,"src":39475},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[496,39477,39479],{"id":39478},"seedprops",[610,39480,39269],{},[606,39482,39398,39483,39485],{},[610,39484,39269],{}," prop to the component enables seeded random element generation.",[606,39487,2768,39488,39325,39490,39492],{},[610,39489,39269],{},[610,39491,39274],{},". It specifies rules and acceptable values for creating random lensflare elements.",[606,39494,39495,39496,39498],{},"Every element in ",[610,39497,39269],{}," has this shape.",[919,39500,39501,39511],{},[922,39502,39503],{},[925,39504,39505,39507,39509],{},[928,39506,8081],{"align":989},[928,39508,933],{"align":989},[928,39510,16657],{},[938,39512,39513,39526,39539,39552,39565,39578],{},[925,39514,39515,39519,39524],{},[943,39516,39517],{"align":989},[1661,39518,2709],{},[943,39520,39521,39523],{"align":989},[610,39522,20023],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[943,39525,32155],{},[925,39527,39528,39532,39537],{},[943,39529,39530],{"align":989},[1661,39531,7539],{},[943,39533,39534,39536],{"align":989},[610,39535,28925],{}," - array of 1 or more colors; a single color will be selected per generated element",[943,39538,32155],{},[925,39540,39541,39545,39550],{},[943,39542,39543],{"align":989},[1661,39544,11583],{},[943,39546,39547,39549],{"align":989},[610,39548,26915],{}," - minimum and maximum allowable distance from the flare center",[943,39551,32155],{},[925,39553,39554,39558,39563],{},[943,39555,39556],{"align":989},[1661,39557,14793],{},[943,39559,39560,39562],{"align":989},[610,39561,26915],{}," - minimum and maximum allowable size",[943,39564,32155],{},[925,39566,39567,39571,39576],{},[943,39568,39569],{"align":989},[1661,39570,19342],{},[943,39572,39573,39575],{"align":989},[610,39574,26915],{}," - minimum and maximum allowable number of elements to generate",[943,39577,32155],{},[925,39579,39580,39584,39589],{},[943,39581,39582],{"align":989},[1661,39583,39253],{},[943,39585,39586,39588],{"align":989},[610,39587,5344],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[943,39590,32190],{},[1997,39592,39593],{},[606,39594,39595],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[496,39597,39599],{"id":39598},"random-elements-and-non-random-properties","Random elements and non-random properties",[606,39601,39602,39604],{},[610,39603,39042],{}," 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.",[618,39606,39608],{"className":620,"code":39607,"language":625,"meta":568,"style":568},"\u003CLensflare />\n",[610,39609,39610],{"__ignoreMap":568},[629,39611,39612,39614,39616],{"class":631,"line":569},[629,39613,635],{"class":634},[629,39615,349],{"class":638},[629,39617,779],{"class":634},[4043,39619,39621],{"id":39620},"non-random-properties","Non-random properties",[606,39623,39624,39625,39320],{},"You can provide a list of lensflare element properties using the ",[1132,39626,39628],{"href":39627},"#elements",[610,39629,39236],{},[618,39631,39633],{"className":620,"code":39632,"language":625,"meta":568,"style":568},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[610,39634,39635],{"__ignoreMap":568},[629,39636,39637,39639,39641,39643,39645,39647,39649,39651,39654,39656,39658,39660,39662,39664,39667,39669,39671,39673,39675,39677,39679,39681,39683,39685],{"class":631,"line":569},[629,39638,635],{"class":634},[629,39640,349],{"class":638},[629,39642,3021],{"class":634},[629,39644,39236],{"class":642},[629,39646,649],{"class":634},[629,39648,652],{"class":634},[629,39650,19405],{"class":675},[629,39652,39653],{"class":634},"{",[629,39655,2681],{"class":638},[629,39657,1210],{"class":634},[629,39659,691],{"class":634},[629,39661,34914],{"class":655},[629,39663,2432],{"class":634},[629,39665,39666],{"class":634}," },",[629,39668,672],{"class":634},[629,39670,2681],{"class":638},[629,39672,1210],{"class":634},[629,39674,691],{"class":634},[629,39676,35031],{"class":655},[629,39678,2432],{"class":634},[629,39680,685],{"class":634},[629,39682,2506],{"class":675},[629,39684,652],{"class":634},[629,39686,779],{"class":634},[606,39688,39689,39690,1664,39692,1664,39694,39696],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[610,39691,11583],{},[610,39693,14793],{},[610,39695,2709],{}," – will be filled in by the built-in defaults in this case.",[606,39698,39699],{},"You can also provide default props which will overwrite random generated props.",[618,39701,39703],{"className":620,"code":39702,"language":625,"meta":568,"style":568},"\u003CLensflare color:\"red\" />\n",[610,39704,39705],{"__ignoreMap":568},[629,39706,39707,39709,39711,39714,39717],{"class":631,"line":569},[629,39708,635],{"class":634},[629,39710,349],{"class":638},[629,39712,39713],{"class":642}," color:",[629,39715,39716],{"class":675},"\"red\" ",[629,39718,3159],{"class":634},[606,39720,39721,39722,39724,39725,39727],{},"Since ",[610,39723,39236],{}," is not defined here, the component will generate random lensflare elements. The specified ",[610,39726,7539],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[606,39729,1130,39730,39734],{},[1132,39731,39733],{"href":39732},"#precedence","precedence"," for details about how properties are filled in.",[4043,39736,39738],{"id":39737},"random-elements","Random elements",[606,39740,39741],{},"You can let the component generate random elements ...",[606,39743,39744,39745],{},"... by not adding an ",[1132,39746,39747,39749],{"href":39627},[610,39748,39236],{}," prop",[618,39751,39752],{"className":620,"code":39607,"language":625,"meta":568,"style":568},[610,39753,39754],{"__ignoreMap":568},[629,39755,39756,39758,39760],{"class":631,"line":569},[629,39757,635],{"class":634},[629,39759,349],{"class":638},[629,39761,779],{"class":634},[606,39763,39764,39765],{},"... by adding a ",[1132,39766,39768,39749],{"href":39767},"#seed",[610,39769,39253],{},[618,39771,39773],{"className":620,"code":39772,"language":625,"meta":568,"style":568},"\u003CLensflare :seed=\"7127\" />\n",[610,39774,39775],{"__ignoreMap":568},[629,39776,39777,39779,39781,39783,39785,39787,39789,39792,39794],{"class":631,"line":569},[629,39778,635],{"class":634},[629,39780,349],{"class":638},[629,39782,3021],{"class":634},[629,39784,39253],{"class":642},[629,39786,649],{"class":634},[629,39788,652],{"class":634},[629,39790,39791],{"class":2493},"7127",[629,39793,652],{"class":634},[629,39795,779],{"class":634},[606,39797,39764,39798],{},[1132,39799,39801,39749],{"href":39800},"#seedprops",[610,39802,39269],{},[618,39804,39806],{"className":620,"code":39805,"language":625,"meta":568,"style":568},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[610,39807,39808],{"__ignoreMap":568},[629,39809,39810,39812,39814,39816,39818,39820,39822,39824,39827,39830,39832,39834],{"class":631,"line":569},[629,39811,635],{"class":634},[629,39813,349],{"class":638},[629,39815,3021],{"class":634},[629,39817,39269],{"class":642},[629,39819,649],{"class":634},[629,39821,652],{"class":634},[629,39823,19405],{"class":675},[629,39825,39826],{"class":634},"{...},",[629,39828,39829],{"class":634}," {...}",[629,39831,2506],{"class":675},[629,39833,652],{"class":634},[629,39835,779],{"class":634},[4043,39837,39839],{"id":39838},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[606,39841,39842],{},"You can mix your own properties and random elements.",[618,39844,39846],{"className":620,"code":39845,"language":625,"meta":568,"style":568},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[610,39847,39848],{"__ignoreMap":568},[629,39849,39850,39852,39854,39856,39858,39860,39862,39864,39866,39868,39870,39872,39874,39876,39878,39880,39883,39885],{"class":631,"line":569},[629,39851,635],{"class":634},[629,39853,349],{"class":638},[629,39855,3021],{"class":634},[629,39857,39236],{"class":642},[629,39859,649],{"class":634},[629,39861,652],{"class":634},[629,39863,19405],{"class":675},[629,39865,39826],{"class":634},[629,39867,39829],{"class":634},[629,39869,2506],{"class":675},[629,39871,652],{"class":634},[629,39873,3021],{"class":634},[629,39875,39253],{"class":642},[629,39877,649],{"class":634},[629,39879,652],{"class":634},[629,39881,39882],{"class":2493},"8193",[629,39884,652],{"class":634},[629,39886,779],{"class":634},[606,39888,39889,39890,3055,39892,39894,39895,39897,39898,1138],{},"Here, both ",[610,39891,39236],{},[610,39893,39253],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[610,39896,39236],{},", according to the ",[1132,39899,39900],{"href":39732},"order of precedence",[1997,39902,39903],{},[606,39904,39905],{},"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.",[4043,39907,39908],{"id":39733},"Precedence",[606,39910,39911],{},"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.",[12204,39913,39914,39918,39925,39932],{},[2208,39915,39916],{},[610,39917,39236],{},[2208,39919,39920,1664,39922,39924],{},[610,39921,7539],{},[610,39923,2709],{}," – default element properties",[2208,39926,39927,1664,39929,39931],{},[610,39928,39253],{},[610,39930,39269],{}," – generated random elements",[2208,39933,39934],{},"built-in default element properties",[1997,39936,39937],{},[606,39938,39939,3055,39941,39943,39944,39947,39948,39950,39951,39953],{},[610,39940,5622],{},[610,39942,11583],{}," are applied as ",[1661,39945,39946],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[610,39949,5622],{}," to make the entire lensflare larger or smaller, and ",[610,39952,11583],{}," to spread or compress the scattered elements.",[1997,39955,39956],{},[606,39957,39958],{},"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.",[4043,39960,39962],{"id":39961},"precedence-example","Precedence example",[606,39964,39965],{},"Here's an example of precedence. Assume this is in our vue template.",[618,39967,39969],{"className":620,"code":39968,"language":625,"meta":568,"style":568},"\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",[610,39970,39971,39978,39991,40018,40043,40050,40066,40078,40092],{"__ignoreMap":568},[629,39972,39973,39975],{"class":631,"line":569},[629,39974,635],{"class":634},[629,39976,39977],{"class":638},"Lensflare\n",[629,39979,39980,39982,39984,39986,39988],{"class":631,"line":570},[629,39981,3128],{"class":634},[629,39983,39236],{"class":642},[629,39985,649],{"class":634},[629,39987,652],{"class":634},[629,39989,39990],{"class":675},"[\n",[629,39992,39993,39996,39998,40000,40002,40004,40006,40008,40010,40013,40015],{"class":631,"line":700},[629,39994,39995],{"class":634}," {",[629,39997,14793],{"class":638},[629,39999,1210],{"class":634},[629,40001,26056],{"class":2493},[629,40003,679],{"class":634},[629,40005,18137],{"class":675},[629,40007,649],{"class":634},[629,40009,2432],{"class":634},[629,40011,40012],{"class":655},"http://example.net/circle.png",[629,40014,2432],{"class":634},[629,40016,40017],{"class":634},"},\n",[629,40019,40020,40022,40024,40026,40028,40030,40032,40034,40037,40039,40041],{"class":631,"line":721},[629,40021,39995],{"class":634},[629,40023,7539],{"class":638},[629,40025,1210],{"class":634},[629,40027,2432],{"class":634},[629,40029,35031],{"class":655},[629,40031,2432],{"class":634},[629,40033,679],{"class":634},[629,40035,40036],{"class":638}," distance",[629,40038,1210],{"class":634},[629,40040,1938],{"class":2493},[629,40042,1317],{"class":634},[629,40044,40045,40048],{"class":631,"line":731},[629,40046,40047],{"class":675}," ]",[629,40049,3123],{"class":634},[629,40051,40052,40054,40056,40058,40060,40063],{"class":631,"line":737},[629,40053,3128],{"class":634},[629,40055,2709],{"class":642},[629,40057,649],{"class":634},[629,40059,652],{"class":634},[629,40061,40062],{"class":675},"http:",[629,40064,40065],{"class":1201},"//example.net/ring.png\"\n",[629,40067,40068,40070,40072,40074,40076],{"class":631,"line":747},[629,40069,5465],{"class":675},[629,40071,649],{"class":634},[629,40073,652],{"class":634},[629,40075,34914],{"class":642},[629,40077,3123],{"class":675},[629,40079,40080,40082,40084,40086,40088,40090],{"class":631,"line":770},[629,40081,3128],{"class":634},[629,40083,39253],{"class":642},[629,40085,649],{"class":634},[629,40087,652],{"class":634},[629,40089,1866],{"class":2493},[629,40091,3123],{"class":634},[629,40093,40094],{"class":631,"line":782},[629,40095,3159],{"class":675},[606,40097,40098,40100],{},[610,40099,39253],{}," is defined, so the component will produce random elements.",[606,40102,40103,40104,1210],{},"Assume the random element generator produces this, based on ",[610,40105,39253],{},[618,40107,40111],{"className":40108,"code":40109,"language":40110,"meta":568,"style":568},"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",[610,40112,40113,40117,40121,40135,40146,40157,40173,40177,40181,40195,40205,40216,40230,40234,40238,40252,40262,40272,40286,40290],{"__ignoreMap":568},[629,40114,40115],{"class":631,"line":569},[629,40116,39990],{"class":675},[629,40118,40119],{"class":631,"line":570},[629,40120,2463],{"class":634},[629,40122,40123,40125,40127,40129,40131,40133],{"class":631,"line":700},[629,40124,22255],{"class":638},[629,40126,1210],{"class":634},[629,40128,691],{"class":634},[629,40130,2688],{"class":655},[629,40132,2432],{"class":634},[629,40134,2480],{"class":634},[629,40136,40137,40140,40142,40144],{"class":631,"line":721},[629,40138,40139],{"class":638}," distance",[629,40141,1210],{"class":634},[629,40143,2498],{"class":2493},[629,40145,2480],{"class":634},[629,40147,40148,40150,40152,40155],{"class":631,"line":731},[629,40149,2536],{"class":638},[629,40151,1210],{"class":634},[629,40153,40154],{"class":2493}," 1024",[629,40156,2480],{"class":634},[629,40158,40159,40162,40164,40166,40169,40171],{"class":631,"line":737},[629,40160,40161],{"class":638}," texture",[629,40163,1210],{"class":634},[629,40165,691],{"class":634},[629,40167,40168],{"class":655},"http://example.net/rays.png",[629,40170,2432],{"class":634},[629,40172,2480],{"class":634},[629,40174,40175],{"class":631,"line":747},[629,40176,2589],{"class":634},[629,40178,40179],{"class":631,"line":770},[629,40180,2463],{"class":634},[629,40182,40183,40185,40187,40189,40191,40193],{"class":631,"line":782},[629,40184,22255],{"class":638},[629,40186,1210],{"class":634},[629,40188,691],{"class":634},[629,40190,2688],{"class":655},[629,40192,2432],{"class":634},[629,40194,2480],{"class":634},[629,40196,40197,40199,40201,40203],{"class":631,"line":792},[629,40198,40139],{"class":638},[629,40200,1210],{"class":634},[629,40202,2553],{"class":2493},[629,40204,2480],{"class":634},[629,40206,40207,40209,40211,40214],{"class":631,"line":797},[629,40208,2536],{"class":638},[629,40210,1210],{"class":634},[629,40212,40213],{"class":2493}," 512",[629,40215,2480],{"class":634},[629,40217,40218,40220,40222,40224,40226,40228],{"class":631,"line":819},[629,40219,40161],{"class":638},[629,40221,1210],{"class":634},[629,40223,691],{"class":634},[629,40225,40012],{"class":655},[629,40227,2432],{"class":634},[629,40229,2480],{"class":634},[629,40231,40232],{"class":631,"line":623},[629,40233,2589],{"class":634},[629,40235,40236],{"class":631,"line":842},[629,40237,2463],{"class":634},[629,40239,40240,40242,40244,40246,40248,40250],{"class":631,"line":853},[629,40241,22255],{"class":638},[629,40243,1210],{"class":634},[629,40245,691],{"class":634},[629,40247,2688],{"class":655},[629,40249,2432],{"class":634},[629,40251,2480],{"class":634},[629,40253,40254,40256,40258,40260],{"class":631,"line":864},[629,40255,40139],{"class":638},[629,40257,1210],{"class":634},[629,40259,29895],{"class":2493},[629,40261,2480],{"class":634},[629,40263,40264,40266,40268,40270],{"class":631,"line":874},[629,40265,2536],{"class":638},[629,40267,1210],{"class":634},[629,40269,40213],{"class":2493},[629,40271,2480],{"class":634},[629,40273,40274,40276,40278,40280,40282,40284],{"class":631,"line":624},[629,40275,40161],{"class":638},[629,40277,1210],{"class":634},[629,40279,691],{"class":634},[629,40281,40012],{"class":655},[629,40283,2432],{"class":634},[629,40285,2480],{"class":634},[629,40287,40288],{"class":631,"line":894},[629,40289,2589],{"class":634},[629,40291,40292],{"class":631,"line":904},[629,40293,18808],{"class":675},[606,40295,40296,40297,40299],{},"When random elements are mixed with ",[610,40298,39236],{},", the final number of elements in the lensflare is determined by whichever is longer.",[606,40301,40302,40303,40305],{},"Here, ",[610,40304,39236],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[606,40307,40308],{},"Therefore, resulting lensflare will have 3 elements.",[606,40310,40311],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[618,40313,40315],{"className":40108,"code":40314,"language":40110,"meta":568,"style":568},"[\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",[610,40316,40317,40321,40325,40342,40355,40367,40383,40387,40391,40408,40420,40432,40450,40454,40458,40474,40486,40498,40514,40518],{"__ignoreMap":568},[629,40318,40319],{"class":631,"line":569},[629,40320,39990],{"class":675},[629,40322,40323],{"class":631,"line":570},[629,40324,2463],{"class":634},[629,40326,40327,40329,40331,40333,40335,40337,40339],{"class":631,"line":700},[629,40328,22255],{"class":638},[629,40330,1210],{"class":634},[629,40332,691],{"class":634},[629,40334,35031],{"class":655},[629,40336,2432],{"class":634},[629,40338,679],{"class":634},[629,40340,40341],{"class":1201}," // from `elements`\n",[629,40343,40344,40346,40348,40350,40352],{"class":631,"line":721},[629,40345,40139],{"class":638},[629,40347,1210],{"class":634},[629,40349,2498],{"class":2493},[629,40351,679],{"class":634},[629,40353,40354],{"class":1201}," // from random element generator\n",[629,40356,40357,40359,40361,40363,40365],{"class":631,"line":731},[629,40358,2536],{"class":638},[629,40360,1210],{"class":634},[629,40362,40213],{"class":2493},[629,40364,679],{"class":634},[629,40366,40341],{"class":1201},[629,40368,40369,40371,40373,40375,40377,40379,40381],{"class":631,"line":737},[629,40370,40161],{"class":638},[629,40372,1210],{"class":634},[629,40374,691],{"class":634},[629,40376,40012],{"class":655},[629,40378,2432],{"class":634},[629,40380,679],{"class":634},[629,40382,40341],{"class":1201},[629,40384,40385],{"class":631,"line":747},[629,40386,2589],{"class":634},[629,40388,40389],{"class":631,"line":770},[629,40390,2463],{"class":634},[629,40392,40393,40395,40397,40399,40401,40403,40405],{"class":631,"line":782},[629,40394,22255],{"class":638},[629,40396,1210],{"class":634},[629,40398,691],{"class":634},[629,40400,34914],{"class":655},[629,40402,2432],{"class":634},[629,40404,679],{"class":634},[629,40406,40407],{"class":1201}," // from component prop `color`\n",[629,40409,40410,40412,40414,40416,40418],{"class":631,"line":792},[629,40411,40139],{"class":638},[629,40413,1210],{"class":634},[629,40415,2503],{"class":2493},[629,40417,679],{"class":634},[629,40419,40341],{"class":1201},[629,40421,40422,40424,40426,40428,40430],{"class":631,"line":797},[629,40423,2536],{"class":638},[629,40425,1210],{"class":634},[629,40427,40213],{"class":2493},[629,40429,679],{"class":634},[629,40431,40354],{"class":1201},[629,40433,40434,40436,40438,40440,40443,40445,40447],{"class":631,"line":819},[629,40435,40161],{"class":638},[629,40437,1210],{"class":634},[629,40439,691],{"class":634},[629,40441,40442],{"class":655},"http://example.net/ring.png",[629,40444,2432],{"class":634},[629,40446,679],{"class":634},[629,40448,40449],{"class":1201}," // from component prop `texture`\n",[629,40451,40452],{"class":631,"line":623},[629,40453,2589],{"class":634},[629,40455,40456],{"class":631,"line":842},[629,40457,2463],{"class":634},[629,40459,40460,40462,40464,40466,40468,40470,40472],{"class":631,"line":853},[629,40461,22255],{"class":638},[629,40463,1210],{"class":634},[629,40465,691],{"class":634},[629,40467,34914],{"class":655},[629,40469,2432],{"class":634},[629,40471,679],{"class":634},[629,40473,40407],{"class":1201},[629,40475,40476,40478,40480,40482,40484],{"class":631,"line":864},[629,40477,40139],{"class":638},[629,40479,1210],{"class":634},[629,40481,29895],{"class":2493},[629,40483,679],{"class":634},[629,40485,40354],{"class":1201},[629,40487,40488,40490,40492,40494,40496],{"class":631,"line":874},[629,40489,2536],{"class":638},[629,40491,1210],{"class":634},[629,40493,40213],{"class":2493},[629,40495,679],{"class":634},[629,40497,40354],{"class":1201},[629,40499,40500,40502,40504,40506,40508,40510,40512],{"class":631,"line":624},[629,40501,40161],{"class":638},[629,40503,1210],{"class":634},[629,40505,691],{"class":634},[629,40507,40442],{"class":655},[629,40509,2432],{"class":634},[629,40511,679],{"class":634},[629,40513,40449],{"class":1201},[629,40515,40516],{"class":631,"line":894},[629,40517,2589],{"class":634},[629,40519,40520],{"class":631,"line":904},[629,40521,18808],{"class":675},[1319,40523,40524],{},"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":568,"searchDepth":569,"depth":570,"links":40526},[40527,40528,40529,40530,40533,40534],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":39236,"depth":570,"text":39236},{"id":39253,"depth":570,"text":39253,"children":40531},[40532],{"id":39425,"depth":700,"text":39426},{"id":39478,"depth":570,"text":39269},{"id":39598,"depth":570,"text":39599,"children":40535},[40536,40537,40538,40539,40540],{"id":39620,"depth":700,"text":39621},{"id":39737,"depth":700,"text":39738},{"id":39838,"depth":700,"text":39839},{"id":39733,"depth":700,"text":39908},{"id":39961,"depth":700,"text":39962},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":349,"description":40541},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":40546,"title":353,"body":40547,"description":41170,"extension":583,"links":584,"meta":41171,"navigation":586,"path":354,"seo":41172,"stem":355,"__hash__":41173},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":493,"value":40548,"toc":41166},[40549,40554,40561,40569,40571,40999,41001,41164],[2287,40550,40551],{},[40552,40553],"light-shadow-randomized-lights",{},[606,40555,40556,40558,40559,1138],{},[610,40557,37586],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[610,40560,37092],{},[606,40562,40563,40564,1138],{},"It is based on this ",[1132,40565,40568],{"href":40566,"rel":40567},"http://drei.docs.pmnd.rs/staging/randomized-light",[1136],"Drei component",[496,40570,15],{"id":616},[618,40572,40575],{"className":620,"code":40573,"highlights":40574,"language":625,"meta":568,"style":568},"\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",[721,864,874,624,894,904,2617,2626,2646],[610,40576,40577,40597,40617,40623,40631,40638,40645,40652,40666,40674,40678,40686,40697,40716,40724,40766,40774,40788,40802,40816,40830,40844,40858,40872,40876,40884,40894,40902,40920,40928,40959,40967,40975,40983,40991],{"__ignoreMap":568},[629,40578,40579,40581,40583,40585,40587,40589,40591,40593,40595],{"class":631,"line":569},[629,40580,635],{"class":634},[629,40582,639],{"class":638},[629,40584,643],{"class":642},[629,40586,646],{"class":642},[629,40588,649],{"class":634},[629,40590,652],{"class":634},[629,40592,656],{"class":655},[629,40594,652],{"class":634},[629,40596,661],{"class":634},[629,40598,40599,40601,40603,40605,40607,40609,40611,40613,40615],{"class":631,"line":570},[629,40600,669],{"class":668},[629,40602,672],{"class":634},[629,40604,707],{"class":675},[629,40606,685],{"class":634},[629,40608,688],{"class":668},[629,40610,8282],{"class":634},[629,40612,716],{"class":655},[629,40614,652],{"class":634},[629,40616,8289],{"class":634},[629,40618,40619,40621],{"class":631,"line":700},[629,40620,669],{"class":668},[629,40622,1196],{"class":634},[629,40624,40626,40629],{"class":40625,"line":721},[631,665],[629,40627,40628],{"class":675}," RandomizedLights",[629,40630,2480],{"class":634},[629,40632,40633,40636],{"class":631,"line":731},[629,40634,40635],{"class":675}," AccumulativeShadows",[629,40637,2480],{"class":634},[629,40639,40640,40643],{"class":631,"line":737},[629,40641,40642],{"class":675}," OrbitControls",[629,40644,2480],{"class":634},[629,40646,40647,40650],{"class":631,"line":747},[629,40648,40649],{"class":675}," Plane",[629,40651,2480],{"class":634},[629,40653,40654,40656,40658,40660,40662,40664],{"class":631,"line":770},[629,40655,2420],{"class":634},[629,40657,688],{"class":668},[629,40659,8282],{"class":634},[629,40661,694],{"class":655},[629,40663,652],{"class":634},[629,40665,8289],{"class":634},[629,40667,40668,40670,40672],{"class":631,"line":782},[629,40669,724],{"class":634},[629,40671,639],{"class":638},[629,40673,661],{"class":634},[629,40675,40676],{"class":631,"line":792},[629,40677,734],{"emptyLinePlaceholder":586},[629,40679,40680,40682,40684],{"class":631,"line":797},[629,40681,635],{"class":634},[629,40683,742],{"class":638},[629,40685,661],{"class":634},[629,40687,40688,40690,40692,40695],{"class":631,"line":819},[629,40689,750],{"class":634},[629,40691,753],{"class":638},[629,40693,40694],{"class":642}," shadows",[629,40696,661],{"class":634},[629,40698,40699,40701,40703,40705,40707,40709,40712,40714],{"class":631,"line":623},[629,40700,773],{"class":634},[629,40702,776],{"class":638},[629,40704,1477],{"class":642},[629,40706,649],{"class":634},[629,40708,652],{"class":634},[629,40710,40711],{"class":655},"[0, 3, 5]",[629,40713,652],{"class":634},[629,40715,779],{"class":634},[629,40717,40718,40720,40722],{"class":631,"line":842},[629,40719,773],{"class":634},[629,40721,787],{"class":638},[629,40723,779],{"class":634},[629,40725,40726,40728,40731,40733,40735,40737,40739,40741,40743,40745,40747,40749,40751,40754,40756,40758,40760,40762,40764],{"class":631,"line":853},[629,40727,773],{"class":634},[629,40729,40730],{"class":638},"AccumulativeShadows",[629,40732,25868],{"class":642},[629,40734,649],{"class":634},[629,40736,652],{"class":634},[629,40738,30696],{"class":655},[629,40740,652],{"class":634},[629,40742,2681],{"class":642},[629,40744,649],{"class":634},[629,40746,652],{"class":634},[629,40748,8920],{"class":655},[629,40750,652],{"class":634},[629,40752,40753],{"class":642}," once",[629,40755,1931],{"class":642},[629,40757,649],{"class":634},[629,40759,652],{"class":634},[629,40761,8961],{"class":655},[629,40763,652],{"class":634},[629,40765,661],{"class":634},[629,40767,40769,40771],{"class":40768,"line":864},[631,665],[629,40770,845],{"class":634},[629,40772,40773],{"class":638},"RandomizedLights\n",[629,40775,40777,40780,40782,40784,40786],{"class":40776,"line":874},[631,665],[629,40778,40779],{"class":642}," :ambient",[629,40781,649],{"class":634},[629,40783,652],{"class":634},[629,40785,11679],{"class":655},[629,40787,3123],{"class":634},[629,40789,40791,40794,40796,40798,40800],{"class":40790,"line":624},[631,665],[629,40792,40793],{"class":642}," :bias",[629,40795,649],{"class":634},[629,40797,652],{"class":634},[629,40799,5693],{"class":655},[629,40801,3123],{"class":634},[629,40803,40805,40808,40810,40812,40814],{"class":40804,"line":894},[631,665],[629,40806,40807],{"class":642}," :count",[629,40809,649],{"class":634},[629,40811,652],{"class":634},[629,40813,31801],{"class":655},[629,40815,3123],{"class":634},[629,40817,40819,40822,40824,40826,40828],{"class":40818,"line":904},[631,665],[629,40820,40821],{"class":642}," :intensity",[629,40823,649],{"class":634},[629,40825,652],{"class":634},[629,40827,9725],{"class":655},[629,40829,3123],{"class":634},[629,40831,40833,40836,40838,40840,40842],{"class":40832,"line":2617},[631,665],[629,40834,40835],{"class":642}," :map-size",[629,40837,649],{"class":634},[629,40839,652],{"class":634},[629,40841,37560],{"class":655},[629,40843,3123],{"class":634},[629,40845,40847,40849,40851,40853,40856],{"class":40846,"line":2626},[631,665],[629,40848,7997],{"class":642},[629,40850,649],{"class":634},[629,40852,652],{"class":634},[629,40854,40855],{"class":655},"[5, 5, -10]",[629,40857,3123],{"class":634},[629,40859,40861,40864,40866,40868,40870],{"class":40860,"line":2646},[631,665],[629,40862,40863],{"class":642}," :radius",[629,40865,649],{"class":634},[629,40867,652],{"class":634},[629,40869,812],{"class":655},[629,40871,3123],{"class":634},[629,40873,40874],{"class":631,"line":2655},[629,40875,8025],{"class":634},[629,40877,40878,40880,40882],{"class":631,"line":2664},[629,40879,887],{"class":634},[629,40881,40730],{"class":638},[629,40883,661],{"class":634},[629,40885,40886,40888,40890,40892],{"class":631,"line":2673},[629,40887,773],{"class":634},[629,40889,848],{"class":638},[629,40891,14432],{"class":642},[629,40893,661],{"class":634},[629,40895,40896,40898,40900],{"class":631,"line":2695},[629,40897,845],{"class":634},[629,40899,859],{"class":638},[629,40901,779],{"class":634},[629,40903,40904,40906,40908,40910,40912,40914,40916,40918],{"class":631,"line":2739},[629,40905,845],{"class":634},[629,40907,11380],{"class":638},[629,40909,2681],{"class":642},[629,40911,649],{"class":634},[629,40913,652],{"class":634},[629,40915,11389],{"class":655},[629,40917,652],{"class":634},[629,40919,779],{"class":634},[629,40921,40922,40924,40926],{"class":631,"line":2748},[629,40923,887],{"class":634},[629,40925,848],{"class":638},[629,40927,661],{"class":634},[629,40929,40930,40932,40934,40936,40938,40940,40942,40944,40947,40949,40951,40953,40955,40957],{"class":631,"line":2757},[629,40931,773],{"class":634},[629,40933,253],{"class":638},[629,40935,1477],{"class":642},[629,40937,649],{"class":634},[629,40939,652],{"class":634},[629,40941,38043],{"class":655},[629,40943,652],{"class":634},[629,40945,40946],{"class":642}," receive-shadow",[629,40948,1951],{"class":642},[629,40950,649],{"class":634},[629,40952,652],{"class":634},[629,40954,10023],{"class":655},[629,40956,652],{"class":634},[629,40958,661],{"class":634},[629,40960,40961,40963,40965],{"class":631,"line":3914},[629,40962,845],{"class":634},[629,40964,2678],{"class":638},[629,40966,779],{"class":634},[629,40968,40969,40971,40973],{"class":631,"line":3945},[629,40970,887],{"class":634},[629,40972,253],{"class":638},[629,40974,661],{"class":634},[629,40976,40977,40979,40981],{"class":631,"line":3966},[629,40978,773],{"class":634},[629,40980,8448],{"class":638},[629,40982,779],{"class":634},[629,40984,40985,40987,40989],{"class":631,"line":3985},[629,40986,897],{"class":634},[629,40988,753],{"class":638},[629,40990,661],{"class":634},[629,40992,40993,40995,40997],{"class":631,"line":4017},[629,40994,724],{"class":634},[629,40996,742],{"class":638},[629,40998,661],{"class":634},[496,41000,914],{"id":913},[919,41002,41003,41013],{},[922,41004,41005],{},[925,41006,41007,41009,41011],{},[928,41008,930],{},[928,41010,933],{},[928,41012,936],{},[938,41014,41015,41028,41042,41055,41069,41082,41096,41110,41123,41137,41151],{},[925,41016,41017,41021,41024],{},[943,41018,41019],{},[610,41020,10071],{},[943,41022,41023],{},"Number of lights",[943,41025,41026],{},[610,41027,31801],{},[925,41029,41030,41035,41038],{},[943,41031,41032],{},[610,41033,41034],{},"radius",[943,41036,41037],{},"Radius of the jiggle, higher values make softer light",[943,41039,41040],{},[610,41041,1866],{},[925,41043,41044,41048,41051],{},[943,41045,41046],{},[610,41047,2057],{},[943,41049,41050],{},"Light intensity",[943,41052,41053],{},[610,41054,9725],{},[925,41056,41057,41062,41065],{},[943,41058,41059],{},[610,41060,41061],{},"ambient",[943,41063,41064],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[943,41066,41067],{},[610,41068,1938],{},[925,41070,41071,41075,41078],{},[943,41072,41073],{},[610,41074,16699],{},[943,41076,41077],{},"If the lights cast shadows",[943,41079,41080],{},[610,41081,953],{},[925,41083,41084,41089,41092],{},[943,41085,41086],{},[610,41087,41088],{},"bias",[943,41090,41091],{},"Default shadow bias",[943,41093,41094],{},[610,41095,957],{},[925,41097,41098,41103,41106],{},[943,41099,41100],{},[610,41101,41102],{},"mapSize",[943,41104,41105],{},"Size of the lights' shadow map",[943,41107,41108],{},[610,41109,26056],{},[925,41111,41112,41116,41119],{},[943,41113,41114],{},[610,41115,14793],{},[943,41117,41118],{},"Size of the lights' shadow camera frustum",[943,41120,41121],{},[610,41122,35579],{},[925,41124,41125,41130,41133],{},[943,41126,41127],{},[610,41128,41129],{},"near",[943,41131,41132],{},"Lights' shadow camera near value",[943,41134,41135],{},[610,41136,1938],{},[925,41138,41139,41143,41146],{},[943,41140,41141],{},[610,41142,38954],{},[943,41144,41145],{},"Lights' shadow camera far value",[943,41147,41148],{},[610,41149,41150],{},"500",[925,41152,41153,41157,41160],{},[943,41154,41155],{},[610,41156,4122],{},[943,41158,41159],{},"Position",[943,41161,41162],{},[610,41163,40855],{},[1319,41165,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":41167},[41168,41169],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":353,"description":41170},"79Dz6CbGDB6whT9LqG15v15q-nHtJLggTb7-YTnIEEE",{"id":41175,"title":357,"body":41176,"description":41569,"extension":583,"links":584,"meta":41570,"navigation":586,"path":358,"seo":41571,"stem":359,"__hash__":41572},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":493,"value":41177,"toc":41565},[41178,41183,41186,41188,41512,41514,41563],[600,41179,41180],{},[41181,41182],"light-shadow-soft-shadows",{},[606,41184,41185],{},"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.",[496,41187,15],{"id":616},[618,41189,41192],{"className":620,"code":41190,"highlights":41191,"language":625,"meta":568,"style":568},"\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",[570,624],[610,41193,41194,41214,41249,41269,41277,41281,41289,41309,41347,41367,41385,41393,41401,41431,41439,41447,41468,41486,41496,41504],{"__ignoreMap":568},[629,41195,41196,41198,41200,41202,41204,41206,41208,41210,41212],{"class":631,"line":569},[629,41197,635],{"class":634},[629,41199,639],{"class":638},[629,41201,643],{"class":642},[629,41203,646],{"class":642},[629,41205,649],{"class":634},[629,41207,652],{"class":634},[629,41209,656],{"class":655},[629,41211,652],{"class":634},[629,41213,661],{"class":634},[629,41215,41217,41219,41221,41224,41226,41228,41230,41232,41234,41237,41239,41241,41243,41245,41247],{"class":41216,"line":570},[631,665],[629,41218,669],{"class":668},[629,41220,672],{"class":634},[629,41222,41223],{"class":675}," SoftShadows",[629,41225,679],{"class":634},[629,41227,8299],{"class":675},[629,41229,679],{"class":634},[629,41231,38626],{"class":675},[629,41233,679],{"class":634},[629,41235,41236],{"class":675}," Plane",[629,41238,685],{"class":634},[629,41240,688],{"class":668},[629,41242,8282],{"class":634},[629,41244,694],{"class":655},[629,41246,652],{"class":634},[629,41248,8289],{"class":634},[629,41250,41251,41253,41255,41257,41259,41261,41263,41265,41267],{"class":631,"line":700},[629,41252,669],{"class":668},[629,41254,672],{"class":634},[629,41256,707],{"class":675},[629,41258,685],{"class":634},[629,41260,688],{"class":668},[629,41262,8282],{"class":634},[629,41264,716],{"class":655},[629,41266,652],{"class":634},[629,41268,8289],{"class":634},[629,41270,41271,41273,41275],{"class":631,"line":721},[629,41272,724],{"class":634},[629,41274,639],{"class":638},[629,41276,661],{"class":634},[629,41278,41279],{"class":631,"line":731},[629,41280,734],{"emptyLinePlaceholder":586},[629,41282,41283,41285,41287],{"class":631,"line":737},[629,41284,635],{"class":634},[629,41286,742],{"class":638},[629,41288,661],{"class":634},[629,41290,41291,41293,41295,41297,41299,41301,41303,41305,41307],{"class":631,"line":747},[629,41292,750],{"class":634},[629,41294,753],{"class":638},[629,41296,40694],{"class":642},[629,41298,756],{"class":642},[629,41300,649],{"class":634},[629,41302,652],{"class":634},[629,41304,9852],{"class":655},[629,41306,652],{"class":634},[629,41308,661],{"class":634},[629,41310,41311,41313,41315,41317,41319,41321,41323,41325,41327,41329,41331,41333,41335,41337,41339,41341,41343,41345],{"class":631,"line":770},[629,41312,773],{"class":634},[629,41314,8410],{"class":638},[629,41316,8413],{"class":642},[629,41318,649],{"class":634},[629,41320,652],{"class":634},[629,41322,8420],{"class":655},[629,41324,652],{"class":634},[629,41326,38711],{"class":642},[629,41328,649],{"class":634},[629,41330,652],{"class":634},[629,41332,38718],{"class":655},[629,41334,652],{"class":634},[629,41336,38723],{"class":642},[629,41338,649],{"class":634},[629,41340,652],{"class":634},[629,41342,38730],{"class":655},[629,41344,652],{"class":634},[629,41346,661],{"class":634},[629,41348,41349,41351,41353,41355,41357,41359,41361,41363,41365],{"class":631,"line":782},[629,41350,845],{"class":634},[629,41352,33894],{"class":638},[629,41354,14432],{"class":642},[629,41356,805],{"class":642},[629,41358,649],{"class":634},[629,41360,652],{"class":634},[629,41362,25294],{"class":655},[629,41364,652],{"class":634},[629,41366,661],{"class":634},[629,41368,41369,41371,41373,41375,41377,41379,41381,41383],{"class":631,"line":792},[629,41370,856],{"class":634},[629,41372,2678],{"class":638},[629,41374,2681],{"class":642},[629,41376,649],{"class":634},[629,41378,652],{"class":634},[629,41380,11389],{"class":655},[629,41382,652],{"class":634},[629,41384,779],{"class":634},[629,41386,41387,41389,41391],{"class":631,"line":797},[629,41388,877],{"class":634},[629,41390,33894],{"class":638},[629,41392,661],{"class":634},[629,41394,41395,41397,41399],{"class":631,"line":819},[629,41396,887],{"class":634},[629,41398,8410],{"class":638},[629,41400,661],{"class":634},[629,41402,41403,41405,41407,41409,41411,41413,41415,41417,41419,41421,41423,41425,41427,41429],{"class":631,"line":623},[629,41404,773],{"class":634},[629,41406,253],{"class":638},[629,41408,1477],{"class":642},[629,41410,649],{"class":634},[629,41412,652],{"class":634},[629,41414,38043],{"class":655},[629,41416,652],{"class":634},[629,41418,40946],{"class":642},[629,41420,1951],{"class":642},[629,41422,649],{"class":634},[629,41424,652],{"class":634},[629,41426,10023],{"class":655},[629,41428,652],{"class":634},[629,41430,661],{"class":634},[629,41432,41433,41435,41437],{"class":631,"line":842},[629,41434,845],{"class":634},[629,41436,2678],{"class":638},[629,41438,779],{"class":634},[629,41440,41441,41443,41445],{"class":631,"line":853},[629,41442,887],{"class":634},[629,41444,253],{"class":638},[629,41446,661],{"class":634},[629,41448,41449,41451,41453,41455,41457,41459,41461,41464,41466],{"class":631,"line":864},[629,41450,773],{"class":634},[629,41452,8467],{"class":638},[629,41454,14432],{"class":642},[629,41456,1477],{"class":642},[629,41458,649],{"class":634},[629,41460,652],{"class":634},[629,41462,41463],{"class":655},"[0, 3, 0]",[629,41465,652],{"class":634},[629,41467,779],{"class":634},[629,41469,41470,41472,41474,41476,41478,41480,41482,41484],{"class":631,"line":874},[629,41471,773],{"class":634},[629,41473,8448],{"class":638},[629,41475,1859],{"class":642},[629,41477,649],{"class":634},[629,41479,652],{"class":634},[629,41481,1938],{"class":655},[629,41483,652],{"class":634},[629,41485,779],{"class":634},[629,41487,41489,41491,41494],{"class":41488,"line":624},[631,665],[629,41490,773],{"class":634},[629,41492,41493],{"class":638},"SoftShadows",[629,41495,779],{"class":634},[629,41497,41498,41500,41502],{"class":631,"line":894},[629,41499,897],{"class":634},[629,41501,753],{"class":638},[629,41503,661],{"class":634},[629,41505,41506,41508,41510],{"class":631,"line":904},[629,41507,724],{"class":634},[629,41509,742],{"class":638},[629,41511,661],{"class":634},[496,41513,914],{"id":913},[919,41515,41516,41526],{},[922,41517,41518],{},[925,41519,41520,41522,41524],{},[928,41521,8081],{"align":989},[928,41523,933],{"align":989},[928,41525,936],{},[938,41527,41528,41539,41550],{},[925,41529,41530,41532,41535],{},[943,41531,14793],{"align":989},[943,41533,41534],{"align":989},"Size of the light source (the larger the softer the light)",[943,41536,41537],{},[610,41538,30357],{},[925,41540,41541,41543,41546],{},[943,41542,27681],{"align":989},[943,41544,41545],{"align":989},"Number of samples (more samples less noise but more expensive)",[943,41547,41548],{},[610,41549,35579],{},[925,41551,41552,41555,41558],{},[943,41553,41554],{"align":989},"focus",[943,41556,41557],{"align":989},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[943,41559,41560,41562],{},[610,41561,957],{}," (the beginning)",[1319,41564,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":41566},[41567,41568],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":357,"description":41569},"WFVp3-okOdmyoKfWIXSoGlyt-AidaFEgkQYSqpSVti0",[41574,42653,43242,43497,43823,44421,45386,45777,46174,47912,48563],{"id":41575,"title":367,"body":41576,"description":42649,"extension":583,"links":584,"meta":42650,"navigation":586,"path":368,"seo":42651,"stem":369,"__hash__":42652},"docs/2.api/8.staging/1.environment.md",{"type":493,"value":41577,"toc":42636},[41578,41583,41593,41599,41601,41779,41786,41812,41817,41821,41828,42023,42027,42033,42056,42060,42078,42114,42127,42141,42158,42191,42195,42198,42283,42287,42293,42373,42378,42389,42391,42624,42627,42633],[600,41579,41580],{},[41581,41582],"staging-environment",{},[606,41584,41585,41586,41589,41590,1138],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[610,41587,41588],{},"scene.environment",", and optionally ",[610,41591,41592],{},"scene.background",[606,41594,41595,41596,41598],{},"It uses the composable ",[1132,41597,371],{"href":372}," under the hood to load the cubemap.",[496,41600,15],{"id":616},[618,41602,41604],{"className":620,"code":41603,"language":625,"meta":568,"style":568},"\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",[610,41605,41606,41626,41644,41662,41670,41674,41682,41690,41698,41704,41714,41719,41724,41729,41734,41739,41744,41751,41755,41763,41771],{"__ignoreMap":568},[629,41607,41608,41610,41612,41614,41616,41618,41620,41622,41624],{"class":631,"line":569},[629,41609,635],{"class":634},[629,41611,639],{"class":638},[629,41613,643],{"class":642},[629,41615,646],{"class":642},[629,41617,649],{"class":634},[629,41619,652],{"class":634},[629,41621,656],{"class":655},[629,41623,652],{"class":634},[629,41625,661],{"class":634},[629,41627,41628,41630,41632,41634,41636,41638,41640,41642],{"class":631,"line":570},[629,41629,669],{"class":668},[629,41631,672],{"class":634},[629,41633,707],{"class":675},[629,41635,685],{"class":634},[629,41637,688],{"class":668},[629,41639,691],{"class":634},[629,41641,716],{"class":655},[629,41643,697],{"class":634},[629,41645,41646,41648,41650,41652,41654,41656,41658,41660],{"class":631,"line":700},[629,41647,669],{"class":668},[629,41649,672],{"class":634},[629,41651,19017],{"class":675},[629,41653,685],{"class":634},[629,41655,688],{"class":668},[629,41657,691],{"class":634},[629,41659,694],{"class":655},[629,41661,697],{"class":634},[629,41663,41664,41666,41668],{"class":631,"line":721},[629,41665,724],{"class":634},[629,41667,639],{"class":638},[629,41669,661],{"class":634},[629,41671,41672],{"class":631,"line":731},[629,41673,734],{"emptyLinePlaceholder":586},[629,41675,41676,41678,41680],{"class":631,"line":737},[629,41677,635],{"class":634},[629,41679,742],{"class":638},[629,41681,661],{"class":634},[629,41683,41684,41686,41688],{"class":631,"line":747},[629,41685,750],{"class":634},[629,41687,753],{"class":638},[629,41689,661],{"class":634},[629,41691,41692,41694,41696],{"class":631,"line":770},[629,41693,773],{"class":634},[629,41695,19723],{"class":638},[629,41697,661],{"class":634},[629,41699,41700,41702],{"class":631,"line":782},[629,41701,845],{"class":634},[629,41703,23304],{"class":638},[629,41705,41706,41708,41710,41712],{"class":631,"line":792},[629,41707,23314],{"class":642},[629,41709,649],{"class":634},[629,41711,652],{"class":634},[629,41713,39990],{"class":655},[629,41715,41716],{"class":631,"line":797},[629,41717,41718],{"class":655}," '/px.jpg',\n",[629,41720,41721],{"class":631,"line":819},[629,41722,41723],{"class":655}," '/nx.jpg',\n",[629,41725,41726],{"class":631,"line":623},[629,41727,41728],{"class":655}," '/py.jpg',\n",[629,41730,41731],{"class":631,"line":842},[629,41732,41733],{"class":655}," '/ny.jpg',\n",[629,41735,41736],{"class":631,"line":853},[629,41737,41738],{"class":655}," '/pz.jpg',\n",[629,41740,41741],{"class":631,"line":864},[629,41742,41743],{"class":655}," '/nz.jpg',\n",[629,41745,41746,41749],{"class":631,"line":874},[629,41747,41748],{"class":655}," ]",[629,41750,3123],{"class":634},[629,41752,41753],{"class":631,"line":624},[629,41754,8025],{"class":634},[629,41756,41757,41759,41761],{"class":631,"line":894},[629,41758,887],{"class":634},[629,41760,19723],{"class":638},[629,41762,661],{"class":634},[629,41764,41765,41767,41769],{"class":631,"line":904},[629,41766,897],{"class":634},[629,41768,753],{"class":638},[629,41770,661],{"class":634},[629,41772,41773,41775,41777],{"class":631,"line":2617},[629,41774,724],{"class":634},[629,41776,742],{"class":638},[629,41778,661],{"class":634},[606,41780,41781,41782,41785],{},"You can also pass the ",[610,41783,41784],{},".hdr"," file directly:",[618,41787,41789],{"className":620,"code":41788,"language":625,"meta":568,"style":568},"\u003CSuspense>\n \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[610,41790,41791,41799,41804],{"__ignoreMap":568},[629,41792,41793,41795,41797],{"class":631,"line":569},[629,41794,635],{"class":634},[629,41796,19723],{"class":638},[629,41798,661],{"class":634},[629,41800,41801],{"class":631,"line":570},[629,41802,41803],{"class":675}," \u003CEnvironment files=\"/sunset.hdr\" />\n",[629,41805,41806,41808,41810],{"class":631,"line":700},[629,41807,724],{"class":634},[629,41809,19723],{"class":638},[629,41811,661],{"class":634},[606,41813,41814],{},[8227,41815],{"alt":367,"src":41816},"/cientos/envmaps.png",[496,41818,41820],{"id":41819},"texture-reference","Texture reference",[606,41822,17765,41823,1669,41825,39749],{},[610,41824,5886],{},[610,41826,41827],{},"\u003CEnvironment />",[618,41829,41832],{"className":620,"code":41830,"highlights":41831,"language":625,"meta":568,"style":568},"\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",[721,737,782,842,874],[610,41833,41834,41854,41872,41876,41890,41894,41910,41924,41930,41939,41943,41951,41970,41978,41987,42006,42014],{"__ignoreMap":568},[629,41835,41836,41838,41840,41842,41844,41846,41848,41850,41852],{"class":631,"line":569},[629,41837,635],{"class":634},[629,41839,639],{"class":638},[629,41841,643],{"class":642},[629,41843,646],{"class":642},[629,41845,649],{"class":634},[629,41847,652],{"class":634},[629,41849,656],{"class":655},[629,41851,652],{"class":634},[629,41853,661],{"class":634},[629,41855,41856,41858,41860,41862,41864,41866,41868,41870],{"class":631,"line":570},[629,41857,669],{"class":668},[629,41859,672],{"class":634},[629,41861,19017],{"class":675},[629,41863,685],{"class":634},[629,41865,688],{"class":668},[629,41867,691],{"class":634},[629,41869,694],{"class":655},[629,41871,697],{"class":634},[629,41873,41874],{"class":631,"line":700},[629,41875,734],{"emptyLinePlaceholder":586},[629,41877,41879,41881,41884,41886,41888],{"class":41878,"line":721},[631,665],[629,41880,2407],{"class":642},[629,41882,41883],{"class":675}," environmentRef ",[629,41885,649],{"class":634},[629,41887,3490],{"class":2426},[629,41889,6527],{"class":675},[629,41891,41892],{"class":631,"line":731},[629,41893,734],{"emptyLinePlaceholder":586},[629,41895,41897,41899,41902,41904,41906,41908],{"class":41896,"line":737},[631,665],[629,41898,10251],{"class":2426},[629,41900,41901],{"class":675},"(environmentRef",[629,41903,679],{"class":634},[629,41905,18137],{"class":6830},[629,41907,3669],{"class":642},[629,41909,1196],{"class":634},[629,41911,41912,41914,41916,41918,41920,41922],{"class":631,"line":747},[629,41913,6846],{"class":675},[629,41915,1138],{"class":634},[629,41917,6851],{"class":2426},[629,41919,2429],{"class":638},[629,41921,2709],{"class":675},[629,41923,2440],{"class":638},[629,41925,41926,41928],{"class":631,"line":770},[629,41927,2420],{"class":634},[629,41929,2440],{"class":675},[629,41931,41933,41935,41937],{"class":41932,"line":782},[631,665],[629,41934,724],{"class":634},[629,41936,639],{"class":638},[629,41938,661],{"class":634},[629,41940,41941],{"class":631,"line":792},[629,41942,734],{"emptyLinePlaceholder":586},[629,41944,41945,41947,41949],{"class":631,"line":797},[629,41946,635],{"class":634},[629,41948,742],{"class":638},[629,41950,661],{"class":634},[629,41952,41953,41955,41957,41959,41961,41963,41966,41968],{"class":631,"line":819},[629,41954,750],{"class":634},[629,41956,367],{"class":638},[629,41958,3864],{"class":642},[629,41960,649],{"class":634},[629,41962,652],{"class":634},[629,41964,41965],{"class":655},"environmentRef",[629,41967,652],{"class":634},[629,41969,779],{"class":634},[629,41971,41972,41974,41976],{"class":631,"line":623},[629,41973,750],{"class":634},[629,41975,848],{"class":638},[629,41977,661],{"class":634},[629,41979,41981,41983,41985],{"class":41980,"line":842},[631,665],[629,41982,773],{"class":634},[629,41984,3950],{"class":638},[629,41986,779],{"class":634},[629,41988,41989,41991,41993,41996,41998,42000,42002,42004],{"class":631,"line":853},[629,41990,773],{"class":634},[629,41992,2678],{"class":638},[629,41994,41995],{"class":642}," :env-map",[629,41997,649],{"class":634},[629,41999,652],{"class":634},[629,42001,27734],{"class":655},[629,42003,652],{"class":634},[629,42005,779],{"class":634},[629,42007,42008,42010,42012],{"class":631,"line":864},[629,42009,897],{"class":634},[629,42011,848],{"class":638},[629,42013,661],{"class":634},[629,42015,42017,42019,42021],{"class":42016,"line":874},[631,665],[629,42018,724],{"class":634},[629,42020,742],{"class":638},[629,42022,661],{"class":634},[496,42024,42026],{"id":42025},"presets","Presets",[606,42028,42029,42030,2019],{},"You can use one of the available presets by passing the ",[610,42031,42032],{},"preset",[618,42034,42036],{"className":620,"code":42035,"language":625,"meta":568,"style":568},"\u003CEnvironment preset=\"city\" />\n",[610,42037,42038],{"__ignoreMap":568},[629,42039,42040,42042,42044,42046,42048,42050,42052,42054],{"class":631,"line":569},[629,42041,635],{"class":634},[629,42043,367],{"class":638},[629,42045,19735],{"class":642},[629,42047,649],{"class":634},[629,42049,652],{"class":634},[629,42051,27165],{"class":655},[629,42053,652],{"class":634},[629,42055,779],{"class":634},[4043,42057,42059],{"id":42058},"preset-quality","Preset quality",[606,42061,42062,42063,42070,42071,42074,42075,2019],{},"Presets are served from the ",[1132,42064,42067],{"href":42065,"rel":42066},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1136],[610,42068,42069],{},"Tresjs/assets"," CDN at ",[1661,42072,42073],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[610,42076,42077],{},"quality",[618,42079,42081],{"className":620,"code":42080,"language":625,"meta":568,"style":568},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[610,42082,42083],{"__ignoreMap":568},[629,42084,42085,42087,42089,42091,42093,42095,42098,42100,42103,42105,42107,42110,42112],{"class":631,"line":569},[629,42086,635],{"class":634},[629,42088,367],{"class":638},[629,42090,19735],{"class":642},[629,42092,649],{"class":634},[629,42094,652],{"class":634},[629,42096,42097],{"class":655},"sunset",[629,42099,652],{"class":634},[629,42101,42102],{"class":642}," quality",[629,42104,649],{"class":634},[629,42106,652],{"class":634},[629,42108,42109],{"class":655},"4k",[629,42111,652],{"class":634},[629,42113,779],{"class":634},[606,42115,42116,42117,42120,42121,1664,42124,1138],{},"Available tiers: ",[610,42118,42119],{},"'1k'"," (default), ",[610,42122,42123],{},"'2k'",[610,42125,42126],{},"'4k'",[22773,42128,42129],{},[606,42130,42131,42132,42135,42136,3328,42138,42140],{},"Higher tiers are significantly larger: ",[1661,42133,42134],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[610,42137,42123],{},[610,42139,42126],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[606,42142,2768,42143,42145,42146,42148,42149,3328,42152,42154,42155,42157],{},[610,42144,42077],{}," prop only applies when ",[610,42147,42032],{}," is set — it is ignored when loading via ",[610,42150,42151],{},"files",[610,42153,16149],{},". An unsupported value falls back to ",[610,42156,42119],{}," with a console warning.",[22773,42159,42160],{},[606,42161,42162,42171,42172,42174,42175,42178,42179,42181,42182,42184,42185,42187,42188,42190],{},[1661,42163,42164,42166,42167,42170],{},[610,42165,42077],{}," has no visible effect when you pass ",[1132,42168,42169],{"href":376},"Lightformers"," (or any children)."," With children present, ",[610,42173,26222],{}," bakes the environment and background into a ",[610,42176,42177],{},"WebGLCubeRenderTarget"," sized by the ",[610,42180,26047],{}," prop (default ",[610,42183,26728],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[610,42186,42077],{},". For a sharp high-res background, either omit the children or raise ",[610,42189,26047],{}," (a cube big enough to match 4K is expensive to render each frame).",[496,42192,42194],{"id":42193},"environment-rotation","Environment Rotation",[606,42196,42197],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[618,42199,42201],{"className":620,"code":42200,"language":625,"meta":568,"style":568},"\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",[610,42202,42203,42211,42217,42230,42243,42257,42271,42275],{"__ignoreMap":568},[629,42204,42205,42207,42209],{"class":631,"line":569},[629,42206,635],{"class":634},[629,42208,742],{"class":638},[629,42210,661],{"class":634},[629,42212,42213,42215],{"class":631,"line":570},[629,42214,750],{"class":634},[629,42216,23304],{"class":638},[629,42218,42219,42222,42224,42226,42228],{"class":631,"line":700},[629,42220,42221],{"class":642}," preset",[629,42223,649],{"class":634},[629,42225,652],{"class":634},[629,42227,42097],{"class":655},[629,42229,3123],{"class":634},[629,42231,42232,42235,42237,42239,42241],{"class":631,"line":721},[629,42233,42234],{"class":642}," :background",[629,42236,649],{"class":634},[629,42238,652],{"class":634},[629,42240,953],{"class":655},[629,42242,3123],{"class":634},[629,42244,42245,42248,42250,42252,42255],{"class":631,"line":731},[629,42246,42247],{"class":642}," :background-rotation",[629,42249,649],{"class":634},[629,42251,652],{"class":634},[629,42253,42254],{"class":655},"[0, Math.PI / 2, 0]",[629,42256,3123],{"class":634},[629,42258,42259,42262,42264,42266,42269],{"class":631,"line":737},[629,42260,42261],{"class":642}," :environment-rotation",[629,42263,649],{"class":634},[629,42265,652],{"class":634},[629,42267,42268],{"class":655},"[0, Math.PI / 4, 0]",[629,42270,3123],{"class":634},[629,42272,42273],{"class":631,"line":747},[629,42274,12057],{"class":634},[629,42276,42277,42279,42281],{"class":631,"line":770},[629,42278,724],{"class":634},[629,42280,742],{"class":638},[629,42282,661],{"class":634},[4043,42284,42286],{"id":42285},"syncing-rotations","Syncing Rotations",[606,42288,42289,42290,2019],{},"You can sync the environment rotation with the background rotation using the ",[610,42291,42292],{},"syncMaterials",[618,42294,42296],{"className":620,"code":42295,"language":625,"meta":568,"style":568},"\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",[610,42297,42298,42306,42312,42324,42336,42349,42361,42365],{"__ignoreMap":568},[629,42299,42300,42302,42304],{"class":631,"line":569},[629,42301,635],{"class":634},[629,42303,742],{"class":638},[629,42305,661],{"class":634},[629,42307,42308,42310],{"class":631,"line":570},[629,42309,750],{"class":634},[629,42311,23304],{"class":638},[629,42313,42314,42316,42318,42320,42322],{"class":631,"line":700},[629,42315,42221],{"class":642},[629,42317,649],{"class":634},[629,42319,652],{"class":634},[629,42321,42097],{"class":655},[629,42323,3123],{"class":634},[629,42325,42326,42328,42330,42332,42334],{"class":631,"line":721},[629,42327,42234],{"class":642},[629,42329,649],{"class":634},[629,42331,652],{"class":634},[629,42333,953],{"class":655},[629,42335,3123],{"class":634},[629,42337,42338,42341,42343,42345,42347],{"class":631,"line":731},[629,42339,42340],{"class":642}," :sync-materials",[629,42342,649],{"class":634},[629,42344,652],{"class":634},[629,42346,953],{"class":655},[629,42348,3123],{"class":634},[629,42350,42351,42353,42355,42357,42359],{"class":631,"line":737},[629,42352,42247],{"class":642},[629,42354,649],{"class":634},[629,42356,652],{"class":634},[629,42358,42254],{"class":655},[629,42360,3123],{"class":634},[629,42362,42363],{"class":631,"line":747},[629,42364,12057],{"class":634},[629,42366,42367,42369,42371],{"class":631,"line":770},[629,42368,724],{"class":634},[629,42370,742],{"class":638},[629,42372,661],{"class":634},[606,42374,4292,42375,42377],{},[610,42376,42292],{}," is enabled:",[2205,42379,42380,42383,42386],{},[2208,42381,42382],{},"The environment rotation will automatically match the background rotation",[2208,42384,42385],{},"All materials in the scene will update to reflect the new rotation",[2208,42387,42388],{},"This ensures visual consistency between the background and environment reflections",[496,42390,914],{"id":913},[919,42392,42393,42403],{},[922,42394,42395],{},[925,42396,42397,42399,42401],{},[928,42398,930],{"align":989},[928,42400,933],{"align":989},[928,42402,936],{},[938,42404,42405,42418,42431,42451,42466,42477,42490,42515,42526,42537,42549,42560,42572,42584,42599,42613],{},[925,42406,42407,42411,42414],{},[943,42408,42409],{"align":989},[610,42410,42151],{},[943,42412,42413],{"align":989},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[943,42415,42416],{},[610,42417,1171],{},[925,42419,42420,42424,42427],{},[943,42421,42422],{"align":989},[610,42423,16149],{},[943,42425,42426],{"align":989},"Path to the environment map files",[943,42428,42429],{},[610,42430,1171],{},[925,42432,42433,42438,42441],{},[943,42434,42435],{"align":989},[610,42436,42437],{},"encoding",[943,42439,42440],{"align":989},"Encoding of the environment map",[943,42442,42443,42446,42447,42450],{},[610,42444,42445],{},"SRGBColorSpace"," for array files, ",[610,42448,42449],{},"LinearEncoding"," for single texture",[925,42452,42453,42457,42462],{},[943,42454,42455],{"align":989},[610,42456,27643],{},[943,42458,950,42459,42461],{"align":989},[610,42460,953],{},", the environment map will be used as the scene background",[943,42463,42464],{},[610,42465,963],{},[925,42467,42468,42472,42475],{},[943,42469,42470],{"align":989},[610,42471,26264],{},[943,42473,42474],{"align":989},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[943,42476,957],{},[925,42478,42479,42483,42486],{},[943,42480,42481],{"align":989},[610,42482,42032],{},[943,42484,42485],{"align":989},"Preset environment map",[943,42487,42488],{},[610,42489,1171],{},[925,42491,42492,42496,42511],{},[943,42493,42494],{"align":989},[610,42495,42077],{},[943,42497,42498,42499,12102,42502,12102,42505,42507,42508,42510],{"align":989},"Resolution variant of the preset HDR (",[610,42500,42501],{},"1k",[610,42503,42504],{},"2k",[610,42506,42109],{},"). Only applies when ",[610,42509,42032],{}," is set",[943,42512,42513],{},[610,42514,42501],{},[925,42516,42517,42521,42524],{},[943,42518,42519],{"align":989},[610,42520,26047],{},[943,42522,42523],{"align":989},"The resolution of the WebGLCubeRenderTarget",[943,42525,26728],{},[925,42527,42528,42532,42535],{},[943,42529,42530],{"align":989},[610,42531,41129],{},[943,42533,42534],{"align":989},"The near of the CubeCamera",[943,42536,1866],{},[925,42538,42539,42543,42546],{},[943,42540,42541],{"align":989},[610,42542,38954],{},[943,42544,42545],{"align":989},"The far of the CubeCamera",[943,42547,42548],{},"1000",[925,42550,42551,42555,42558],{},[943,42552,42553],{"align":989},[610,42554,37429],{},[943,42556,42557],{"align":989},"The frames of the cubeCamera.update",[943,42559,11576],{},[925,42561,42562,42567,42570],{},[943,42563,42564],{"align":989},[610,42565,42566],{},"backgroundIntensity",[943,42568,42569],{"align":989},"Intensity of the background",[943,42571,1866],{},[925,42573,42574,42579,42582],{},[943,42575,42576],{"align":989},[610,42577,42578],{},"environmentIntensity",[943,42580,42581],{"align":989},"Intensity of the environment",[943,42583,1866],{},[925,42585,42586,42591,42594],{},[943,42587,42588],{"align":989},[610,42589,42590],{},"backgroundRotation",[943,42592,42593],{"align":989},"Rotation of the background (in radians)",[943,42595,42596],{},[629,42597,42598],{},"0, 0, 0",[925,42600,42601,42606,42609],{},[943,42602,42603],{"align":989},[610,42604,42605],{},"environmentRotation",[943,42607,42608],{"align":989},"Rotation of the environment (in radians)",[943,42610,42611],{},[629,42612,42598],{},[925,42614,42615,42619,42622],{},[943,42616,42617],{"align":989},[610,42618,42292],{},[943,42620,42621],{"align":989},"If true, environment rotation will sync with background rotation",[943,42623,963],{},[4043,42625,42026],{"id":42626},"presets-1",[618,42628,42631],{"className":42629,"code":42630,"language":28401},[28399],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[610,42632,42630],{"__ignoreMap":568},[1319,42634,42635],{},"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":568,"searchDepth":569,"depth":570,"links":42637},[42638,42639,42640,42643,42646],{"id":616,"depth":570,"text":15},{"id":41819,"depth":570,"text":41820},{"id":42025,"depth":570,"text":42026,"children":42641},[42642],{"id":42058,"depth":700,"text":42059},{"id":42193,"depth":570,"text":42194,"children":42644},[42645],{"id":42285,"depth":700,"text":42286},{"id":913,"depth":570,"text":914,"children":42647},[42648],{"id":42626,"depth":700,"text":42026},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":367,"description":42649},"Jmd9cUvs-xIbV-RK7ZZXFZUkOqGMazbMRyhSpIpQ_LY",{"id":42654,"title":371,"body":42655,"description":43238,"extension":583,"links":584,"meta":43239,"navigation":586,"path":372,"seo":43240,"stem":373,"__hash__":43241},"docs/2.api/8.staging/2.use-environment.md",{"type":493,"value":42656,"toc":43234},[42657,42661,42670,42679,42681,42686,42888,42893,42926,42931,43015,43017,43232],[2287,42658,42659],{},[41581,42660],{},[606,42662,42663,42665,42666,41589,42668,1138],{},[610,42664,371],{}," composable that automatically sets up a global cubemap, which affects the default ",[610,42667,41588],{},[610,42669,41592],{},[606,42671,42672,42673,42678],{},"It uses the ",[1132,42674,42677],{"href":42675,"rel":42676},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1136],"CubeTextureLoader"," to load the cubemap",[496,42680,15],{"id":616},[3191,42682,42683],{},[606,42684,42685],{},"UseEnvironment needs to be wrapped by a Suspense component",[618,42687,42689],{"className":620,"code":42688,"language":625,"meta":568,"style":568},"\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",[610,42690,42691,42711,42730,42749,42753,42769,42778,42790,42801,42812,42823,42834,42845,42851,42863,42874,42880],{"__ignoreMap":568},[629,42692,42693,42695,42697,42699,42701,42703,42705,42707,42709],{"class":631,"line":569},[629,42694,635],{"class":634},[629,42696,639],{"class":638},[629,42698,643],{"class":642},[629,42700,646],{"class":642},[629,42702,649],{"class":634},[629,42704,652],{"class":634},[629,42706,656],{"class":655},[629,42708,652],{"class":634},[629,42710,661],{"class":634},[629,42712,42713,42715,42717,42720,42722,42724,42726,42728],{"class":631,"line":570},[629,42714,669],{"class":668},[629,42716,672],{"class":634},[629,42718,42719],{"class":675}," useEnvironment",[629,42721,685],{"class":634},[629,42723,688],{"class":668},[629,42725,691],{"class":634},[629,42727,694],{"class":655},[629,42729,697],{"class":634},[629,42731,42732,42734,42736,42739,42741,42743,42745,42747],{"class":631,"line":700},[629,42733,669],{"class":668},[629,42735,672],{"class":634},[629,42737,42738],{"class":675}," SRGBColorSpace",[629,42740,685],{"class":634},[629,42742,688],{"class":668},[629,42744,691],{"class":634},[629,42746,4618],{"class":655},[629,42748,697],{"class":634},[629,42750,42751],{"class":631,"line":721},[629,42752,734],{"emptyLinePlaceholder":586},[629,42754,42755,42757,42759,42761,42763,42765,42767],{"class":631,"line":731},[629,42756,2407],{"class":642},[629,42758,2417],{"class":675},[629,42760,649],{"class":634},[629,42762,23055],{"class":668},[629,42764,42719],{"class":2426},[629,42766,2429],{"class":675},[629,42768,3252],{"class":634},[629,42770,42771,42774,42776],{"class":631,"line":737},[629,42772,42773],{"class":638}," files",[629,42775,1210],{"class":634},[629,42777,18772],{"class":675},[629,42779,42780,42783,42786,42788],{"class":631,"line":747},[629,42781,42782],{"class":634}," '",[629,42784,42785],{"class":655},"/textures/environmentMaps/0/px.jpg",[629,42787,2432],{"class":634},[629,42789,2480],{"class":634},[629,42791,42792,42794,42797,42799],{"class":631,"line":770},[629,42793,42782],{"class":634},[629,42795,42796],{"class":655},"/textures/environmentMaps/0/nx.jpg",[629,42798,2432],{"class":634},[629,42800,2480],{"class":634},[629,42802,42803,42805,42808,42810],{"class":631,"line":782},[629,42804,42782],{"class":634},[629,42806,42807],{"class":655},"/textures/environmentMaps/0/py.jpg",[629,42809,2432],{"class":634},[629,42811,2480],{"class":634},[629,42813,42814,42816,42819,42821],{"class":631,"line":792},[629,42815,42782],{"class":634},[629,42817,42818],{"class":655},"/textures/environmentMaps/0/ny.jpg",[629,42820,2432],{"class":634},[629,42822,2480],{"class":634},[629,42824,42825,42827,42830,42832],{"class":631,"line":797},[629,42826,42782],{"class":634},[629,42828,42829],{"class":655},"/textures/environmentMaps/0/pz.jpg",[629,42831,2432],{"class":634},[629,42833,2480],{"class":634},[629,42835,42836,42838,42841,42843],{"class":631,"line":819},[629,42837,42782],{"class":634},[629,42839,42840],{"class":655},"/textures/environmentMaps/0/nz.jpg",[629,42842,2432],{"class":634},[629,42844,2480],{"class":634},[629,42846,42847,42849],{"class":631,"line":623},[629,42848,40047],{"class":675},[629,42850,2480],{"class":634},[629,42852,42853,42856,42858,42861],{"class":631,"line":842},[629,42854,42855],{"class":638}," path",[629,42857,1210],{"class":634},[629,42859,42860],{"class":634}," ''",[629,42862,2480],{"class":634},[629,42864,42865,42868,42870,42872],{"class":631,"line":853},[629,42866,42867],{"class":638}," encoding",[629,42869,1210],{"class":634},[629,42871,42738],{"class":675},[629,42873,2480],{"class":634},[629,42875,42876,42878],{"class":631,"line":864},[629,42877,2420],{"class":634},[629,42879,2440],{"class":675},[629,42881,42882,42884,42886],{"class":631,"line":874},[629,42883,724],{"class":634},[629,42885,639],{"class":638},[629,42887,661],{"class":634},[606,42889,23062,42890,42892],{},[610,42891,2709],{}," in your scene:",[618,42894,42897],{"className":620,"code":42895,"highlights":42896,"language":625,"meta":568,"style":568},"\u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[700],[610,42898,42899,42907,42912,42918],{"__ignoreMap":568},[629,42900,42901,42903,42905],{"class":631,"line":569},[629,42902,635],{"class":634},[629,42904,848],{"class":638},[629,42906,661],{"class":634},[629,42908,42909],{"class":631,"line":570},[629,42910,42911],{"class":675}," \u003CTresSphereGeometry />\n",[629,42913,42915],{"class":42914,"line":700},[631,665],[629,42916,42917],{"class":675}," \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[629,42919,42920,42922,42924],{"class":631,"line":721},[629,42921,724],{"class":634},[629,42923,848],{"class":638},[629,42925,661],{"class":634},[606,42927,41781,42928,42930],{},[610,42929,41784],{}," file directly",[618,42932,42934],{"className":1178,"code":42933,"language":656,"meta":568,"style":568},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n files: '/sunset.hdr',\n path: '',\n encoding: SRGBColorSpace,\n})\n",[610,42935,42936,42954,42958,42974,42989,42999,43009],{"__ignoreMap":568},[629,42937,42938,42940,42942,42944,42946,42948,42950,42952],{"class":631,"line":569},[629,42939,669],{"class":668},[629,42941,672],{"class":634},[629,42943,42719],{"class":675},[629,42945,685],{"class":634},[629,42947,688],{"class":668},[629,42949,691],{"class":634},[629,42951,694],{"class":655},[629,42953,697],{"class":634},[629,42955,42956],{"class":631,"line":570},[629,42957,734],{"emptyLinePlaceholder":586},[629,42959,42960,42962,42964,42966,42968,42970,42972],{"class":631,"line":700},[629,42961,2407],{"class":642},[629,42963,2417],{"class":675},[629,42965,649],{"class":634},[629,42967,23055],{"class":668},[629,42969,42719],{"class":2426},[629,42971,2429],{"class":675},[629,42973,3252],{"class":634},[629,42975,42976,42978,42980,42982,42985,42987],{"class":631,"line":721},[629,42977,42773],{"class":638},[629,42979,1210],{"class":634},[629,42981,691],{"class":634},[629,42983,42984],{"class":655},"/sunset.hdr",[629,42986,2432],{"class":634},[629,42988,2480],{"class":634},[629,42990,42991,42993,42995,42997],{"class":631,"line":731},[629,42992,42855],{"class":638},[629,42994,1210],{"class":634},[629,42996,42860],{"class":634},[629,42998,2480],{"class":634},[629,43000,43001,43003,43005,43007],{"class":631,"line":737},[629,43002,42867],{"class":638},[629,43004,1210],{"class":634},[629,43006,42738],{"class":675},[629,43008,2480],{"class":634},[629,43010,43011,43013],{"class":631,"line":747},[629,43012,2420],{"class":634},[629,43014,2440],{"class":675},[496,43016,12085],{"id":15602},[919,43018,43019,43031],{},[922,43020,43021],{},[925,43022,43023,43025,43027,43029],{},[928,43024,8081],{"align":989},[928,43026,5961],{},[928,43028,936],{},[928,43030,933],{},[938,43032,43033,43050,43067,43089,43108,43125,43142,43163,43180,43197,43215],{},[925,43034,43035,43039,43043,43047],{},[943,43036,43037],{"align":989},[1661,43038,42151],{},[943,43040,43041],{},[610,43042,23431],{},[943,43044,43045],{},[610,43046,1171],{},[943,43048,43049],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[925,43051,43052,43056,43060,43064],{},[943,43053,43054],{"align":989},[1661,43055,16149],{},[943,43057,43058],{},[610,43059,15629],{},[943,43061,43062],{},[610,43063,963],{},[943,43065,43066],{},"Path to the environment map files.",[925,43068,43069,43073,43078,43086],{},[943,43070,43071],{"align":989},[1661,43072,42437],{},[943,43074,43075],{},[610,43076,43077],{},"Encoding",[943,43079,43080,43082,43083,43085],{},[610,43081,42445],{}," for an array of files and ",[610,43084,42449],{}," for a single texture",[943,43087,43088],{},"Encoding of the environment map.",[925,43090,43091,43095,43099,43103],{},[943,43092,43093],{"align":989},[1661,43094,27643],{},[943,43096,43097],{},[610,43098,15629],{},[943,43100,43101],{},[610,43102,963],{},[943,43104,950,43105,43107],{},[610,43106,953],{}," the texture will be used as the scene background.",[925,43109,43110,43114,43118,43122],{},[943,43111,43112],{"align":989},[1661,43113,26264],{},[943,43115,43116],{},[610,43117,5344],{},[943,43119,43120],{},[610,43121,957],{},[943,43123,43124],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[925,43126,43127,43131,43135,43139],{},[943,43128,43129],{"align":989},[1661,43130,42032],{},[943,43132,43133],{},[610,43134,3564],{},[943,43136,43137],{},[610,43138,1171],{},[943,43140,43141],{},"Preset environment map.",[925,43143,43144,43148,43153,43157],{},[943,43145,43146],{"align":989},[1661,43147,42077],{},[943,43149,43150],{},[610,43151,43152],{},"'1k' | '2k' | '4k'",[943,43154,43155],{},[610,43156,42119],{},[943,43158,43159,43160,43162],{},"Resolution variant of the preset HDR. Only applies when ",[610,43161,42032],{}," is set. 4K ≈ 30–60MB.",[925,43164,43165,43169,43173,43177],{},[943,43166,43167],{"align":989},[1661,43168,42566],{},[943,43170,43171],{},[610,43172,5344],{},[943,43174,43175],{},[610,43176,1866],{},[943,43178,43179],{},"Intensity of the background.",[925,43181,43182,43186,43190,43194],{},[943,43183,43184],{"align":989},[1661,43185,42578],{},[943,43187,43188],{},[610,43189,5344],{},[943,43191,43192],{},[610,43193,1866],{},[943,43195,43196],{},"Intensity of the environment.",[925,43198,43199,43203,43208,43212],{},[943,43200,43201],{"align":989},[1661,43202,42590],{},[943,43204,43205],{},[610,43206,43207],{},"VectorFlexibleParams",[943,43209,43210],{},[610,43211,8390],{},[943,43213,43214],{},"Rotation of the background.",[925,43216,43217,43221,43225,43229],{},[943,43218,43219],{"align":989},[1661,43220,42605],{},[943,43222,43223],{},[610,43224,43207],{},[943,43226,43227],{},[610,43228,8390],{},[943,43230,43231],{},"Rotation of the environment.",[1319,43233,24443],{},{"title":568,"searchDepth":569,"depth":570,"links":43235},[43236,43237],{"id":616,"depth":570,"text":15},{"id":15602,"depth":570,"text":12085},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":371,"description":43238},"WFsmQOwv-yc23voKTzWwYBxnk1QVtMW5VaFbmbCf-8c",{"id":43243,"title":375,"body":43244,"description":43493,"extension":583,"links":584,"meta":43494,"navigation":586,"path":376,"seo":43495,"stem":377,"__hash__":43496},"docs/2.api/8.staging/3.lightformer.md",{"type":493,"value":43245,"toc":43490},[43246,43251,43257,43411,43413,43416,43488],[600,43247,43248],{},[43249,43250],"staging-lightformer",{},[606,43252,43253,43254,43256],{},"You can incorporate ",[610,43255,375],{}," into the environment just like a slot.",[618,43258,43260],{"className":620,"code":43259,"language":625,"meta":568,"style":568},"\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",[610,43261,43262,43272,43297,43305,43309,43317,43325,43354,43395,43403],{"__ignoreMap":568},[629,43263,43264,43266,43268,43270],{"class":631,"line":569},[629,43265,635],{"class":634},[629,43267,639],{"class":638},[629,43269,643],{"class":642},[629,43271,661],{"class":634},[629,43273,43274,43276,43278,43281,43283,43286,43288,43290,43292,43295],{"class":631,"line":570},[629,43275,669],{"class":668},[629,43277,672],{"class":634},[629,43279,43280],{"class":675}," Enviroment",[629,43282,679],{"class":634},[629,43284,43285],{"class":675}," LightFormer",[629,43287,685],{"class":634},[629,43289,688],{"class":668},[629,43291,691],{"class":634},[629,43293,43294],{"class":655},"@tres/cientos",[629,43296,697],{"class":634},[629,43298,43299,43301,43303],{"class":631,"line":700},[629,43300,724],{"class":634},[629,43302,639],{"class":638},[629,43304,661],{"class":634},[629,43306,43307],{"class":631,"line":721},[629,43308,734],{"emptyLinePlaceholder":586},[629,43310,43311,43313,43315],{"class":631,"line":731},[629,43312,635],{"class":634},[629,43314,742],{"class":638},[629,43316,661],{"class":634},[629,43318,43319,43321,43323],{"class":631,"line":737},[629,43320,750],{"class":634},[629,43322,367],{"class":638},[629,43324,661],{"class":634},[629,43326,43327,43329,43331,43333,43335,43337,43339,43341,43343,43345,43347,43350,43352],{"class":631,"line":747},[629,43328,773],{"class":634},[629,43330,375],{"class":638},[629,43332,1859],{"class":642},[629,43334,649],{"class":634},[629,43336,652],{"class":634},[629,43338,2543],{"class":655},[629,43340,652],{"class":634},[629,43342,1477],{"class":642},[629,43344,649],{"class":634},[629,43346,652],{"class":634},[629,43348,43349],{"class":655},"[0, 5, -9]",[629,43351,652],{"class":634},[629,43353,779],{"class":634},[629,43355,43356,43358,43360,43362,43364,43366,43369,43371,43374,43376,43378,43380,43382,43384,43386,43388,43391,43393],{"class":631,"line":770},[629,43357,773],{"class":634},[629,43359,375],{"class":638},[629,43361,688],{"class":642},[629,43363,649],{"class":634},[629,43365,652],{"class":634},[629,43367,43368],{"class":655},"ring",[629,43370,652],{"class":634},[629,43372,43373],{"class":642}," :rotation-y",[629,43375,649],{"class":634},[629,43377,652],{"class":634},[629,43379,38057],{"class":655},[629,43381,652],{"class":634},[629,43383,805],{"class":642},[629,43385,649],{"class":634},[629,43387,652],{"class":634},[629,43389,43390],{"class":655},"[10, 10, 1]",[629,43392,652],{"class":634},[629,43394,779],{"class":634},[629,43396,43397,43399,43401],{"class":631,"line":782},[629,43398,897],{"class":634},[629,43400,367],{"class":638},[629,43402,661],{"class":634},[629,43404,43405,43407,43409],{"class":631,"line":792},[629,43406,724],{"class":634},[629,43408,742],{"class":638},[629,43410,661],{"class":634},[4043,43412,914],{"id":913},[606,43414,43415],{},"Lightformer inherits from mesh, and its extension parameters include:",[919,43417,43418,43428],{},[922,43419,43420],{},[925,43421,43422,43424,43426],{},[928,43423,930],{"align":989},[928,43425,933],{"align":989},[928,43427,936],{},[938,43429,43430,43451,43462,43476],{},[925,43431,43432,43436,43447],{},[943,43433,43434],{"align":989},[610,43435,15218],{},[943,43437,43438,1664,43441,1664,43443,43446],{"align":989},[610,43439,43440],{},"circle",[610,43442,43368],{},[610,43444,43445],{},"rect",", or any other Mesh type",[943,43448,43449],{},[610,43450,43445],{},[925,43452,43453,43457,43460],{},[943,43454,43455],{"align":989},[610,43456,2057],{},[943,43458,43459],{"align":989},"The intensity of the light",[943,43461,1866],{},[925,43463,43464,43468,43471],{},[943,43465,43466],{"align":989},[610,43467,7539],{},[943,43469,43470],{"align":989},"The color of the light",[943,43472,43473],{},[610,43474,43475],{},"0xffffff",[925,43477,43478,43482,43485],{},[943,43479,43480],{"align":989},[610,43481,28428],{},[943,43483,43484],{"align":989},"The arguments of the Geometry",[943,43486,43487],{},"When using other geometries, set the corresponding arguments",[1319,43489,12439],{},{"title":568,"searchDepth":569,"depth":570,"links":43491},[43492],{"id":913,"depth":700,"text":914},"Addon for environment component that provided you custom lights.",{},{"title":375,"description":43493},"C3TURFuGqCgHegN3UPXdHHYIKEDi-0ACd5UIMvQeHcQ",{"id":43498,"title":379,"body":43499,"description":43819,"extension":583,"links":584,"meta":43820,"navigation":586,"path":380,"seo":43821,"stem":381,"__hash__":43822},"docs/2.api/8.staging/backdrop.md",{"type":493,"value":43500,"toc":43815},[43501,43506,43514,43516,43677,43680,43757,43759,43813],[600,43502,43503],{},[43504,43505],"staging-backdrop",{},[606,43507,2768,43508,8235,43510,43513],{},[610,43509,7309],{},[610,43511,43512],{},"\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.",[496,43515,15],{"id":616},[618,43517,43520],{"className":620,"code":43518,"highlights":43519,"language":625,"meta":568,"style":568},"\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",[700,782],[610,43521,43522,43542,43560,43580,43588,43592,43600,43608,43626,43635,43643,43661,43669],{"__ignoreMap":568},[629,43523,43524,43526,43528,43530,43532,43534,43536,43538,43540],{"class":631,"line":569},[629,43525,635],{"class":634},[629,43527,639],{"class":638},[629,43529,643],{"class":642},[629,43531,646],{"class":642},[629,43533,649],{"class":634},[629,43535,652],{"class":634},[629,43537,656],{"class":655},[629,43539,652],{"class":634},[629,43541,661],{"class":634},[629,43543,43544,43546,43548,43550,43552,43554,43556,43558],{"class":631,"line":570},[629,43545,669],{"class":668},[629,43547,672],{"class":634},[629,43549,707],{"class":675},[629,43551,685],{"class":634},[629,43553,688],{"class":668},[629,43555,691],{"class":634},[629,43557,716],{"class":655},[629,43559,697],{"class":634},[629,43561,43563,43565,43567,43570,43572,43574,43576,43578],{"class":43562,"line":700},[631,665],[629,43564,669],{"class":668},[629,43566,672],{"class":634},[629,43568,43569],{"class":675}," Backdrop",[629,43571,685],{"class":634},[629,43573,688],{"class":668},[629,43575,691],{"class":634},[629,43577,694],{"class":655},[629,43579,697],{"class":634},[629,43581,43582,43584,43586],{"class":631,"line":721},[629,43583,724],{"class":634},[629,43585,639],{"class":638},[629,43587,661],{"class":634},[629,43589,43590],{"class":631,"line":731},[629,43591,734],{"emptyLinePlaceholder":586},[629,43593,43594,43596,43598],{"class":631,"line":737},[629,43595,635],{"class":634},[629,43597,742],{"class":638},[629,43599,661],{"class":634},[629,43601,43602,43604,43606],{"class":631,"line":747},[629,43603,750],{"class":634},[629,43605,753],{"class":638},[629,43607,661],{"class":634},[629,43609,43610,43612,43614,43616,43618,43620,43622,43624],{"class":631,"line":770},[629,43611,773],{"class":634},[629,43613,776],{"class":638},[629,43615,1477],{"class":642},[629,43617,649],{"class":634},[629,43619,652],{"class":634},[629,43621,40711],{"class":655},[629,43623,652],{"class":634},[629,43625,779],{"class":634},[629,43627,43629,43631,43633],{"class":43628,"line":782},[631,665],[629,43630,773],{"class":634},[629,43632,379],{"class":638},[629,43634,779],{"class":634},[629,43636,43637,43639,43641],{"class":631,"line":792},[629,43638,773],{"class":634},[629,43640,8448],{"class":638},[629,43642,779],{"class":634},[629,43644,43645,43647,43649,43651,43653,43655,43657,43659],{"class":631,"line":797},[629,43646,773],{"class":634},[629,43648,8467],{"class":638},[629,43650,1477],{"class":642},[629,43652,649],{"class":634},[629,43654,652],{"class":634},[629,43656,11424],{"class":655},[629,43658,652],{"class":634},[629,43660,779],{"class":634},[629,43662,43663,43665,43667],{"class":631,"line":819},[629,43664,897],{"class":634},[629,43666,753],{"class":638},[629,43668,661],{"class":634},[629,43670,43671,43673,43675],{"class":631,"line":623},[629,43672,724],{"class":634},[629,43674,742],{"class":638},[629,43676,661],{"class":634},[606,43678,43679],{},"Or with a custom material",[618,43681,43685],{"className":43682,"code":43683,"language":43684,"meta":568,"style":568},"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",[610,43686,43687,43719,43749],{"__ignoreMap":568},[629,43688,43689,43691,43693,43696,43698,43700,43702,43704,43707,43709,43711,43713,43715,43717],{"class":631,"line":569},[629,43690,635],{"class":634},[629,43692,379],{"class":638},[629,43694,43695],{"class":642}," :floor",[629,43697,649],{"class":634},[629,43699,652],{"class":634},[629,43701,27474],{"class":655},[629,43703,652],{"class":634},[629,43705,43706],{"class":642}," :segments",[629,43708,649],{"class":634},[629,43710,652],{"class":634},[629,43712,28871],{"class":655},[629,43714,652],{"class":634},[629,43716,40946],{"class":642},[629,43718,661],{"class":634},[629,43720,43721,43723,43726,43728,43730,43732,43734,43736,43739,43741,43743,43745,43747],{"class":631,"line":570},[629,43722,750],{"class":634},[629,43724,43725],{"class":638},"TresMeshPhysicalMaterial",[629,43727,2681],{"class":642},[629,43729,649],{"class":634},[629,43731,652],{"class":634},[629,43733,11389],{"class":655},[629,43735,652],{"class":634},[629,43737,43738],{"class":642}," :roughness",[629,43740,649],{"class":634},[629,43742,652],{"class":634},[629,43744,1866],{"class":655},[629,43746,652],{"class":634},[629,43748,779],{"class":634},[629,43750,43751,43753,43755],{"class":631,"line":700},[629,43752,724],{"class":634},[629,43754,379],{"class":638},[629,43756,661],{"class":634},[496,43758,914],{"id":913},[919,43760,43761,43773],{},[922,43762,43763],{},[925,43764,43765,43767,43769,43771],{},[928,43766,8081],{"align":989},[928,43768,5961],{"align":989},[928,43770,936],{},[928,43772,16657],{},[938,43774,43775,43789,43801],{},[925,43776,43777,43780,43782,43786],{},[943,43778,43779],{"align":989},"floor",[943,43781,5344],{"align":989},[943,43783,43784],{},[610,43785,11679],{},[943,43787,43788],{},"No",[925,43790,43791,43793,43795,43799],{},[943,43792,28861],{"align":989},[943,43794,5344],{"align":989},[943,43796,43797],{},[610,43798,28871],{},[943,43800,43788],{},[925,43802,43803,43805,43807,43811],{},[943,43804,16717],{"align":989},[943,43806,15629],{"align":989},[943,43808,43809],{},[610,43810,963],{},[943,43812,43788],{},[1319,43814,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":43816},[43817,43818],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"A curved plane studio backdrop for presentational purposes.",{},{"title":379,"description":43819},"H0D0nxhSUngurmG2CpnQ3kEOUzOJchm3LVO_M0_yMnI",{"id":43824,"title":383,"body":43825,"description":44417,"extension":583,"links":584,"meta":44418,"navigation":586,"path":384,"seo":44419,"stem":385,"__hash__":44420},"docs/2.api/8.staging/ocean.md",{"type":493,"value":43826,"toc":44409},[43827,43832,43847,43852,43854,43987,43991,44000,44003,44018,44022,44025,44186,44188,44194,44407],[600,43828,43829],{},[43830,43831],"staging-ocean",{},[606,43833,43834,43837,43838,1138],{},[610,43835,43836],{},"\u003COcean />"," is a wrapper for the ",[1132,43839,43842,43843,43846],{"href":43840,"rel":43841},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1136],"Three.js ",[610,43844,43845],{},"Water"," add-on",[3191,43848,43849],{},[606,43850,43851],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[496,43853,15],{"id":616},[618,43855,43858],{"className":620,"code":43856,"highlights":43857,"language":625,"meta":568,"style":568},"\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",[700,782],[610,43859,43860,43880,43898,43918,43926,43930,43938,43946,43954,43963,43971,43979],{"__ignoreMap":568},[629,43861,43862,43864,43866,43868,43870,43872,43874,43876,43878],{"class":631,"line":569},[629,43863,635],{"class":634},[629,43865,639],{"class":638},[629,43867,643],{"class":642},[629,43869,646],{"class":642},[629,43871,649],{"class":634},[629,43873,652],{"class":634},[629,43875,656],{"class":655},[629,43877,652],{"class":634},[629,43879,661],{"class":634},[629,43881,43882,43884,43886,43888,43890,43892,43894,43896],{"class":631,"line":570},[629,43883,669],{"class":668},[629,43885,672],{"class":634},[629,43887,707],{"class":675},[629,43889,685],{"class":634},[629,43891,688],{"class":668},[629,43893,691],{"class":634},[629,43895,716],{"class":655},[629,43897,697],{"class":634},[629,43899,43901,43903,43905,43908,43910,43912,43914,43916],{"class":43900,"line":700},[631,665],[629,43902,669],{"class":668},[629,43904,672],{"class":634},[629,43906,43907],{"class":675}," Ocean",[629,43909,685],{"class":634},[629,43911,688],{"class":668},[629,43913,691],{"class":634},[629,43915,694],{"class":655},[629,43917,697],{"class":634},[629,43919,43920,43922,43924],{"class":631,"line":721},[629,43921,724],{"class":634},[629,43923,639],{"class":638},[629,43925,661],{"class":634},[629,43927,43928],{"class":631,"line":731},[629,43929,734],{"emptyLinePlaceholder":586},[629,43931,43932,43934,43936],{"class":631,"line":737},[629,43933,635],{"class":634},[629,43935,742],{"class":638},[629,43937,661],{"class":634},[629,43939,43940,43942,43944],{"class":631,"line":747},[629,43941,750],{"class":634},[629,43943,753],{"class":638},[629,43945,661],{"class":634},[629,43947,43948,43950,43952],{"class":631,"line":770},[629,43949,773],{"class":634},[629,43951,19723],{"class":638},[629,43953,661],{"class":634},[629,43955,43957,43959,43961],{"class":43956,"line":782},[631,665],[629,43958,845],{"class":634},[629,43960,383],{"class":638},[629,43962,779],{"class":634},[629,43964,43965,43967,43969],{"class":631,"line":792},[629,43966,887],{"class":634},[629,43968,19723],{"class":638},[629,43970,661],{"class":634},[629,43972,43973,43975,43977],{"class":631,"line":797},[629,43974,897],{"class":634},[629,43976,753],{"class":638},[629,43978,661],{"class":634},[629,43980,43981,43983,43985],{"class":631,"line":819},[629,43982,724],{"class":634},[629,43984,742],{"class":638},[629,43986,661],{"class":634},[4043,43988,43990],{"id":43989},"sky","SKY",[606,43992,43993,43995,43996,43999],{},[610,43994,43836],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[610,43997,43998],{},"\u003CSky />"," is not required for making this component work.)",[4043,44001,44002],{"id":38524},"Fog",[606,44004,2768,44005,44007,44008,5603,44012,44017],{},[610,44006,43836],{}," component also reacts when there's ",[1132,44009,44002],{"href":44010,"rel":44011},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1136],[1132,44013,44016],{"href":44014,"rel":44015},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1136],"FogExp2"," in your scene.",[496,44019,44021],{"id":44020},"custom-geometry","Custom Geometry",[606,44023,44024],{},"You can use custom geometry by adding it as a child.",[618,44026,44029],{"className":620,"code":44027,"highlights":44028,"language":625,"meta":568,"style":568},"\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",[700,782,792,797],[610,44030,44031,44051,44069,44088,44096,44100,44108,44116,44124,44133,44153,44162,44170,44178],{"__ignoreMap":568},[629,44032,44033,44035,44037,44039,44041,44043,44045,44047,44049],{"class":631,"line":569},[629,44034,635],{"class":634},[629,44036,639],{"class":638},[629,44038,643],{"class":642},[629,44040,646],{"class":642},[629,44042,649],{"class":634},[629,44044,652],{"class":634},[629,44046,656],{"class":655},[629,44048,652],{"class":634},[629,44050,661],{"class":634},[629,44052,44053,44055,44057,44059,44061,44063,44065,44067],{"class":631,"line":570},[629,44054,669],{"class":668},[629,44056,672],{"class":634},[629,44058,707],{"class":675},[629,44060,685],{"class":634},[629,44062,688],{"class":668},[629,44064,691],{"class":634},[629,44066,716],{"class":655},[629,44068,697],{"class":634},[629,44070,44072,44074,44076,44078,44080,44082,44084,44086],{"class":44071,"line":700},[631,665],[629,44073,669],{"class":668},[629,44075,672],{"class":634},[629,44077,43907],{"class":675},[629,44079,685],{"class":634},[629,44081,688],{"class":668},[629,44083,691],{"class":634},[629,44085,694],{"class":655},[629,44087,697],{"class":634},[629,44089,44090,44092,44094],{"class":631,"line":721},[629,44091,724],{"class":634},[629,44093,639],{"class":638},[629,44095,661],{"class":634},[629,44097,44098],{"class":631,"line":731},[629,44099,734],{"emptyLinePlaceholder":586},[629,44101,44102,44104,44106],{"class":631,"line":737},[629,44103,635],{"class":634},[629,44105,742],{"class":638},[629,44107,661],{"class":634},[629,44109,44110,44112,44114],{"class":631,"line":747},[629,44111,750],{"class":634},[629,44113,753],{"class":638},[629,44115,661],{"class":634},[629,44117,44118,44120,44122],{"class":631,"line":770},[629,44119,773],{"class":634},[629,44121,19723],{"class":638},[629,44123,661],{"class":634},[629,44125,44127,44129,44131],{"class":44126,"line":782},[631,665],[629,44128,845],{"class":634},[629,44130,383],{"class":638},[629,44132,661],{"class":634},[629,44134,44136,44138,44140,44142,44144,44146,44149,44151],{"class":44135,"line":792},[631,665],[629,44137,856],{"class":634},[629,44139,8902],{"class":638},[629,44141,1951],{"class":642},[629,44143,649],{"class":634},[629,44145,652],{"class":634},[629,44147,44148],{"class":655},"[50, 16]",[629,44150,652],{"class":634},[629,44152,779],{"class":634},[629,44154,44156,44158,44160],{"class":44155,"line":797},[631,665],[629,44157,877],{"class":634},[629,44159,383],{"class":638},[629,44161,661],{"class":634},[629,44163,44164,44166,44168],{"class":631,"line":819},[629,44165,887],{"class":634},[629,44167,19723],{"class":638},[629,44169,661],{"class":634},[629,44171,44172,44174,44176],{"class":631,"line":623},[629,44173,897],{"class":634},[629,44175,753],{"class":638},[629,44177,661],{"class":634},[629,44179,44180,44182,44184],{"class":631,"line":842},[629,44181,724],{"class":634},[629,44183,742],{"class":638},[629,44185,661],{"class":634},[496,44187,914],{"id":913},[44189,44190,44191],"prose-tip",{},[606,44192,44193],{},"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.",[919,44195,44196,44209],{},[922,44197,44198],{},[925,44199,44200,44202,44204,44206],{},[928,44201,930],{"align":989},[928,44203,933],{"align":989},[928,44205,936],{},[928,44207,44208],{"align":27308},"Reactive",[938,44210,44211,44228,44244,44263,44280,44297,44314,44330,44345,44361,44377,44392],{},[925,44212,44213,44218,44221,44225],{},[943,44214,44215],{"align":989},[1661,44216,44217],{},"textureWidth",[943,44219,44220],{"align":989},"Width of the mirror texture",[943,44222,44223],{},[610,44224,26056],{},[943,44226,44227],{"align":27308},"❌",[925,44229,44230,44235,44238,44242],{},[943,44231,44232],{"align":989},[1661,44233,44234],{},"textureHeight",[943,44236,44237],{"align":989},"Height of the mirror texture",[943,44239,44240],{},[610,44241,26056],{},[943,44243,44227],{"align":27308},[925,44245,44246,44251,44254,44261],{},[943,44247,44248],{"align":989},[1661,44249,44250],{},"waterNormals",[943,44252,44253],{"align":989},"URL of the water normal texture",[943,44255,44256],{},[1132,44257,44260],{"href":44258,"rel":44259},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1136],"Water_1_M_Normal.jpg",[943,44262,44227],{"align":27308},[925,44264,44265,44270,44273,44278],{},[943,44266,44267],{"align":989},[1661,44268,44269],{},"sunDirection",[943,44271,44272],{"align":989},"Sun direction to be reflected on the water",[943,44274,44275],{},[610,44276,44277],{},"Vector3(0,0,0)",[943,44279,44227],{"align":27308},[925,44281,44282,44287,44290,44294],{},[943,44283,44284],{"align":989},[1661,44285,44286],{},"sunColor",[943,44288,44289],{"align":989},"Sun color to be reflected on the water",[943,44291,44292],{},[610,44293,43475],{},[943,44295,44296],{"align":27308},"✅",[925,44298,44299,44304,44307,44312],{},[943,44300,44301],{"align":989},[1661,44302,44303],{},"waterColor",[943,44305,44306],{"align":989},"Water color",[943,44308,44309],{},[610,44310,44311],{},"0x001e0f",[943,44313,44296],{"align":27308},[925,44315,44316,44320,44323,44328],{},[943,44317,44318],{"align":989},[1661,44319,27426],{},[943,44321,44322],{"align":989},"Distortion scale on reflected objects",[943,44324,44325],{},[610,44326,44327],{},"3.7",[943,44329,44296],{"align":27308},[925,44331,44332,44336,44339,44343],{},[943,44333,44334],{"align":989},[1661,44335,14793],{},[943,44337,44338],{"align":989},"Size of the water normals",[943,44340,44341],{},[610,44342,1866],{},[943,44344,44296],{"align":27308},[925,44346,44347,44352,44355,44359],{},[943,44348,44349],{"align":989},[1661,44350,44351],{},"clipBias",[943,44353,44354],{"align":989},"Clip bias for the render target",[943,44356,44357],{},[610,44358,11845],{},[943,44360,44227],{"align":27308},[925,44362,44363,44368,44371,44375],{},[943,44364,44365],{"align":989},[1661,44366,44367],{},"alpha",[943,44369,44370],{"align":989},"Alpha transparency of the water",[943,44372,44373],{},[610,44374,11723],{},[943,44376,44296],{"align":27308},[925,44378,44379,44383,44386,44390],{},[943,44380,44381],{"align":989},[1661,44382,25467],{},[943,44384,44385],{"align":989},"Which side of the mesh renders the water",[943,44387,44388],{},[610,44389,25480],{},[943,44391,44227],{"align":27308},[925,44393,44394,44398,44401,44405],{},[943,44395,44396],{"align":989},[1661,44397,8548],{},[943,44399,44400],{"align":989},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[943,44402,44403],{},[610,44404,1866],{},[943,44406,44296],{"align":27308},[1319,44408,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":44410},[44411,44415,44416],{"id":616,"depth":570,"text":15,"children":44412},[44413,44414],{"id":43989,"depth":700,"text":43990},{"id":38524,"depth":700,"text":44002},{"id":44020,"depth":570,"text":44021},{"id":913,"depth":570,"text":914},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":383,"description":44417},"5q-r3e4Wze0nFZnJd16ECdI8wU7cxHU35-r6Z0qCmhU",{"id":44422,"title":387,"body":44423,"description":45382,"extension":583,"links":584,"meta":45383,"navigation":586,"path":388,"seo":45384,"stem":389,"__hash__":45385},"docs/2.api/8.staging/precipitation.md",{"type":493,"value":44424,"toc":45374},[44425,44430,44436,44438,44444,44587,44591,44594,44783,44787,44790,44975,44979,44982,45196,45199,45204,45206,45372],[600,44426,44427],{},[44428,44429],"staging-precipitation",{},[606,44431,44432,44435],{},[610,44433,44434],{},"\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.",[496,44437,15],{"id":616},[606,44439,44440,44441,44443],{},"You can use ",[610,44442,44434],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[618,44445,44448],{"className":620,"code":44446,"highlights":44447,"language":625,"meta":568,"style":568},"\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",[700,782],[610,44449,44450,44470,44488,44508,44516,44520,44528,44536,44554,44563,44571,44579],{"__ignoreMap":568},[629,44451,44452,44454,44456,44458,44460,44462,44464,44466,44468],{"class":631,"line":569},[629,44453,635],{"class":634},[629,44455,639],{"class":638},[629,44457,643],{"class":642},[629,44459,646],{"class":642},[629,44461,649],{"class":634},[629,44463,652],{"class":634},[629,44465,656],{"class":655},[629,44467,652],{"class":634},[629,44469,661],{"class":634},[629,44471,44472,44474,44476,44478,44480,44482,44484,44486],{"class":631,"line":570},[629,44473,669],{"class":668},[629,44475,672],{"class":634},[629,44477,707],{"class":675},[629,44479,685],{"class":634},[629,44481,688],{"class":668},[629,44483,691],{"class":634},[629,44485,716],{"class":655},[629,44487,697],{"class":634},[629,44489,44491,44493,44495,44498,44500,44502,44504,44506],{"class":44490,"line":700},[631,665],[629,44492,669],{"class":668},[629,44494,672],{"class":634},[629,44496,44497],{"class":675}," Precipitation",[629,44499,685],{"class":634},[629,44501,688],{"class":668},[629,44503,691],{"class":634},[629,44505,694],{"class":655},[629,44507,697],{"class":634},[629,44509,44510,44512,44514],{"class":631,"line":721},[629,44511,724],{"class":634},[629,44513,639],{"class":638},[629,44515,661],{"class":634},[629,44517,44518],{"class":631,"line":731},[629,44519,734],{"emptyLinePlaceholder":586},[629,44521,44522,44524,44526],{"class":631,"line":737},[629,44523,635],{"class":634},[629,44525,742],{"class":638},[629,44527,661],{"class":634},[629,44529,44530,44532,44534],{"class":631,"line":747},[629,44531,750],{"class":634},[629,44533,753],{"class":638},[629,44535,661],{"class":634},[629,44537,44538,44540,44542,44544,44546,44548,44550,44552],{"class":631,"line":770},[629,44539,773],{"class":634},[629,44541,776],{"class":638},[629,44543,1477],{"class":642},[629,44545,649],{"class":634},[629,44547,652],{"class":634},[629,44549,40711],{"class":655},[629,44551,652],{"class":634},[629,44553,779],{"class":634},[629,44555,44557,44559,44561],{"class":44556,"line":782},[631,665],[629,44558,773],{"class":634},[629,44560,387],{"class":638},[629,44562,779],{"class":634},[629,44564,44565,44567,44569],{"class":631,"line":792},[629,44566,773],{"class":634},[629,44568,8448],{"class":638},[629,44570,779],{"class":634},[629,44572,44573,44575,44577],{"class":631,"line":797},[629,44574,897],{"class":634},[629,44576,753],{"class":638},[629,44578,661],{"class":634},[629,44580,44581,44583,44585],{"class":631,"line":819},[629,44582,724],{"class":634},[629,44584,742],{"class":638},[629,44586,661],{"class":634},[4043,44588,44590],{"id":44589},"rain","Rain",[606,44592,44593],{},"By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.",[618,44595,44598],{"className":620,"code":44596,"highlights":44597,"language":625,"meta":568,"style":568},"\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",[700,782,792,797,819,623],[610,44599,44600,44620,44638,44657,44665,44669,44677,44685,44703,44711,44726,44740,44754,44759,44767,44775],{"__ignoreMap":568},[629,44601,44602,44604,44606,44608,44610,44612,44614,44616,44618],{"class":631,"line":569},[629,44603,635],{"class":634},[629,44605,639],{"class":638},[629,44607,643],{"class":642},[629,44609,646],{"class":642},[629,44611,649],{"class":634},[629,44613,652],{"class":634},[629,44615,656],{"class":655},[629,44617,652],{"class":634},[629,44619,661],{"class":634},[629,44621,44622,44624,44626,44628,44630,44632,44634,44636],{"class":631,"line":570},[629,44623,669],{"class":668},[629,44625,672],{"class":634},[629,44627,707],{"class":675},[629,44629,685],{"class":634},[629,44631,688],{"class":668},[629,44633,691],{"class":634},[629,44635,716],{"class":655},[629,44637,697],{"class":634},[629,44639,44641,44643,44645,44647,44649,44651,44653,44655],{"class":44640,"line":700},[631,665],[629,44642,669],{"class":668},[629,44644,672],{"class":634},[629,44646,44497],{"class":675},[629,44648,685],{"class":634},[629,44650,688],{"class":668},[629,44652,691],{"class":634},[629,44654,694],{"class":655},[629,44656,697],{"class":634},[629,44658,44659,44661,44663],{"class":631,"line":721},[629,44660,724],{"class":634},[629,44662,639],{"class":638},[629,44664,661],{"class":634},[629,44666,44667],{"class":631,"line":731},[629,44668,734],{"emptyLinePlaceholder":586},[629,44670,44671,44673,44675],{"class":631,"line":737},[629,44672,635],{"class":634},[629,44674,742],{"class":638},[629,44676,661],{"class":634},[629,44678,44679,44681,44683],{"class":631,"line":747},[629,44680,750],{"class":634},[629,44682,753],{"class":638},[629,44684,661],{"class":634},[629,44686,44687,44689,44691,44693,44695,44697,44699,44701],{"class":631,"line":770},[629,44688,773],{"class":634},[629,44690,776],{"class":638},[629,44692,1477],{"class":642},[629,44694,649],{"class":634},[629,44696,652],{"class":634},[629,44698,40711],{"class":655},[629,44700,652],{"class":634},[629,44702,779],{"class":634},[629,44704,44706,44708],{"class":44705,"line":782},[631,665],[629,44707,773],{"class":634},[629,44709,44710],{"class":638},"Precipitation\n",[629,44712,44714,44717,44719,44721,44724],{"class":44713,"line":792},[631,665],[629,44715,44716],{"class":642}," :count",[629,44718,649],{"class":634},[629,44720,652],{"class":634},[629,44722,44723],{"class":655},"2000",[629,44725,3123],{"class":634},[629,44727,44729,44732,44734,44736,44738],{"class":44728,"line":797},[631,665],[629,44730,44731],{"class":642}," :speed",[629,44733,649],{"class":634},[629,44735,652],{"class":634},[629,44737,37253],{"class":655},[629,44739,3123],{"class":634},[629,44741,44743,44746,44748,44750,44752],{"class":44742,"line":819},[631,665],[629,44744,44745],{"class":642}," :randomness",[629,44747,649],{"class":634},[629,44749,652],{"class":634},[629,44751,957],{"class":655},[629,44753,3123],{"class":634},[629,44755,44757],{"class":44756,"line":623},[631,665],[629,44758,15338],{"class":634},[629,44760,44761,44763,44765],{"class":631,"line":842},[629,44762,773],{"class":634},[629,44764,8448],{"class":638},[629,44766,779],{"class":634},[629,44768,44769,44771,44773],{"class":631,"line":853},[629,44770,897],{"class":634},[629,44772,753],{"class":638},[629,44774,661],{"class":634},[629,44776,44777,44779,44781],{"class":631,"line":864},[629,44778,724],{"class":634},[629,44780,742],{"class":638},[629,44782,661],{"class":634},[4043,44784,44786],{"id":44785},"storm","Storm",[606,44788,44789],{},"A storm effect? Easy just increase the randomness.",[618,44791,44794],{"className":620,"code":44792,"highlights":44793,"language":625,"meta":568,"style":568},"\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",[700,782,792,797,819,623],[610,44795,44796,44816,44834,44853,44861,44865,44873,44881,44899,44906,44920,44933,44946,44951,44959,44967],{"__ignoreMap":568},[629,44797,44798,44800,44802,44804,44806,44808,44810,44812,44814],{"class":631,"line":569},[629,44799,635],{"class":634},[629,44801,639],{"class":638},[629,44803,643],{"class":642},[629,44805,646],{"class":642},[629,44807,649],{"class":634},[629,44809,652],{"class":634},[629,44811,656],{"class":655},[629,44813,652],{"class":634},[629,44815,661],{"class":634},[629,44817,44818,44820,44822,44824,44826,44828,44830,44832],{"class":631,"line":570},[629,44819,669],{"class":668},[629,44821,672],{"class":634},[629,44823,707],{"class":675},[629,44825,685],{"class":634},[629,44827,688],{"class":668},[629,44829,691],{"class":634},[629,44831,716],{"class":655},[629,44833,697],{"class":634},[629,44835,44837,44839,44841,44843,44845,44847,44849,44851],{"class":44836,"line":700},[631,665],[629,44838,669],{"class":668},[629,44840,672],{"class":634},[629,44842,44497],{"class":675},[629,44844,685],{"class":634},[629,44846,688],{"class":668},[629,44848,691],{"class":634},[629,44850,694],{"class":655},[629,44852,697],{"class":634},[629,44854,44855,44857,44859],{"class":631,"line":721},[629,44856,724],{"class":634},[629,44858,639],{"class":638},[629,44860,661],{"class":634},[629,44862,44863],{"class":631,"line":731},[629,44864,734],{"emptyLinePlaceholder":586},[629,44866,44867,44869,44871],{"class":631,"line":737},[629,44868,635],{"class":634},[629,44870,742],{"class":638},[629,44872,661],{"class":634},[629,44874,44875,44877,44879],{"class":631,"line":747},[629,44876,750],{"class":634},[629,44878,753],{"class":638},[629,44880,661],{"class":634},[629,44882,44883,44885,44887,44889,44891,44893,44895,44897],{"class":631,"line":770},[629,44884,773],{"class":634},[629,44886,776],{"class":638},[629,44888,1477],{"class":642},[629,44890,649],{"class":634},[629,44892,652],{"class":634},[629,44894,40711],{"class":655},[629,44896,652],{"class":634},[629,44898,779],{"class":634},[629,44900,44902,44904],{"class":44901,"line":782},[631,665],[629,44903,773],{"class":634},[629,44905,44710],{"class":638},[629,44907,44909,44911,44913,44915,44918],{"class":44908,"line":792},[631,665],[629,44910,44716],{"class":642},[629,44912,649],{"class":634},[629,44914,652],{"class":634},[629,44916,44917],{"class":655},"3000",[629,44919,3123],{"class":634},[629,44921,44923,44925,44927,44929,44931],{"class":44922,"line":797},[631,665],[629,44924,44731],{"class":642},[629,44926,649],{"class":634},[629,44928,652],{"class":634},[629,44930,1938],{"class":655},[629,44932,3123],{"class":634},[629,44934,44936,44938,44940,44942,44944],{"class":44935,"line":819},[631,665],[629,44937,44745],{"class":642},[629,44939,649],{"class":634},[629,44941,652],{"class":634},[629,44943,27474],{"class":655},[629,44945,3123],{"class":634},[629,44947,44949],{"class":44948,"line":623},[631,665],[629,44950,15338],{"class":634},[629,44952,44953,44955,44957],{"class":631,"line":842},[629,44954,773],{"class":634},[629,44956,8448],{"class":638},[629,44958,779],{"class":634},[629,44960,44961,44963,44965],{"class":631,"line":853},[629,44962,897],{"class":634},[629,44964,753],{"class":638},[629,44966,661],{"class":634},[629,44968,44969,44971,44973],{"class":631,"line":864},[629,44970,724],{"class":634},[629,44972,742],{"class":638},[629,44974,661],{"class":634},[4043,44976,44978],{"id":44977},"beam","Beam",[606,44980,44981],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[618,44983,44986],{"className":620,"code":44984,"highlights":44985,"language":625,"meta":568,"style":568},"\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",[700,782,792,797,819,623,842,853],[610,44987,44988,45008,45026,45045,45053,45057,45065,45073,45091,45098,45113,45126,45139,45153,45167,45172,45180,45188],{"__ignoreMap":568},[629,44989,44990,44992,44994,44996,44998,45000,45002,45004,45006],{"class":631,"line":569},[629,44991,635],{"class":634},[629,44993,639],{"class":638},[629,44995,643],{"class":642},[629,44997,646],{"class":642},[629,44999,649],{"class":634},[629,45001,652],{"class":634},[629,45003,656],{"class":655},[629,45005,652],{"class":634},[629,45007,661],{"class":634},[629,45009,45010,45012,45014,45016,45018,45020,45022,45024],{"class":631,"line":570},[629,45011,669],{"class":668},[629,45013,672],{"class":634},[629,45015,707],{"class":675},[629,45017,685],{"class":634},[629,45019,688],{"class":668},[629,45021,691],{"class":634},[629,45023,716],{"class":655},[629,45025,697],{"class":634},[629,45027,45029,45031,45033,45035,45037,45039,45041,45043],{"class":45028,"line":700},[631,665],[629,45030,669],{"class":668},[629,45032,672],{"class":634},[629,45034,44497],{"class":675},[629,45036,685],{"class":634},[629,45038,688],{"class":668},[629,45040,691],{"class":634},[629,45042,694],{"class":655},[629,45044,697],{"class":634},[629,45046,45047,45049,45051],{"class":631,"line":721},[629,45048,724],{"class":634},[629,45050,639],{"class":638},[629,45052,661],{"class":634},[629,45054,45055],{"class":631,"line":731},[629,45056,734],{"emptyLinePlaceholder":586},[629,45058,45059,45061,45063],{"class":631,"line":737},[629,45060,635],{"class":634},[629,45062,742],{"class":638},[629,45064,661],{"class":634},[629,45066,45067,45069,45071],{"class":631,"line":747},[629,45068,750],{"class":634},[629,45070,753],{"class":638},[629,45072,661],{"class":634},[629,45074,45075,45077,45079,45081,45083,45085,45087,45089],{"class":631,"line":770},[629,45076,773],{"class":634},[629,45078,776],{"class":638},[629,45080,1477],{"class":642},[629,45082,649],{"class":634},[629,45084,652],{"class":634},[629,45086,40711],{"class":655},[629,45088,652],{"class":634},[629,45090,779],{"class":634},[629,45092,45094,45096],{"class":45093,"line":782},[631,665],[629,45095,773],{"class":634},[629,45097,44710],{"class":638},[629,45099,45101,45104,45106,45108,45111],{"class":45100,"line":792},[631,665],[629,45102,45103],{"class":642}," :area",[629,45105,649],{"class":634},[629,45107,652],{"class":634},[629,45109,45110],{"class":655},"[0.5, 0.5, 20]",[629,45112,3123],{"class":634},[629,45114,45116,45118,45120,45122,45124],{"class":45115,"line":797},[631,665],[629,45117,44716],{"class":642},[629,45119,649],{"class":634},[629,45121,652],{"class":634},[629,45123,42548],{"class":655},[629,45125,3123],{"class":634},[629,45127,45129,45131,45133,45135,45137],{"class":45128,"line":819},[631,665],[629,45130,44731],{"class":642},[629,45132,649],{"class":634},[629,45134,652],{"class":634},[629,45136,5721],{"class":655},[629,45138,3123],{"class":634},[629,45140,45142,45145,45147,45149,45151],{"class":45141,"line":623},[631,665],[629,45143,45144],{"class":642}," :size",[629,45146,649],{"class":634},[629,45148,652],{"class":634},[629,45150,37253],{"class":655},[629,45152,3123],{"class":634},[629,45154,45156,45158,45160,45162,45165],{"class":45155,"line":842},[631,665],[629,45157,28773],{"class":642},[629,45159,649],{"class":634},[629,45161,652],{"class":634},[629,45163,45164],{"class":655},"#00ff00",[629,45166,3123],{"class":634},[629,45168,45170],{"class":45169,"line":853},[631,665],[629,45171,15338],{"class":634},[629,45173,45174,45176,45178],{"class":631,"line":864},[629,45175,773],{"class":634},[629,45177,8448],{"class":638},[629,45179,779],{"class":634},[629,45181,45182,45184,45186],{"class":631,"line":874},[629,45183,897],{"class":634},[629,45185,753],{"class":638},[629,45187,661],{"class":634},[629,45189,45190,45192,45194],{"class":631,"line":624},[629,45191,724],{"class":634},[629,45193,742],{"class":638},[629,45195,661],{"class":634},[606,45197,45198],{},"You can create much more! ☔",[3191,45200,45201],{},[606,45202,45203],{},"Be careful with the performance this components render infinite particles in movement",[496,45205,914],{"id":913},[919,45207,45208,45218],{},[922,45209,45210],{},[925,45211,45212,45214,45216],{},[928,45213,930],{"align":989},[928,45215,933],{"align":989},[928,45217,936],{},[938,45219,45220,45231,45246,45257,45268,45280,45291,45303,45315,45326,45338,45349,45360],{},[925,45221,45222,45226,45229],{},[943,45223,45224],{"align":989},[1661,45225,14793],{},[943,45227,45228],{"align":989},"The size of the drops.",[943,45230,2155],{},[925,45232,45233,45238,45241],{},[943,45234,45235],{"align":989},[1661,45236,45237],{},"area",[943,45239,45240],{"align":989},"The size of the precipitation area.",[943,45242,45243],{},[629,45244,45245],{},"10, 10, 20",[925,45247,45248,45252,45255],{},[943,45249,45250],{"align":989},[1661,45251,7539],{},[943,45253,45254],{"align":989},"The color of the drops.",[943,45256,43475],{},[925,45258,45259,45263,45266],{},[943,45260,45261],{"align":989},[1661,45262,2973],{},[943,45264,45265],{"align":989},"Color texture of the drops.",[943,45267,3648],{},[925,45269,45270,45275,45278],{},[943,45271,45272],{"align":989},[1661,45273,45274],{},"alphaMap",[943,45276,45277],{"align":989},"Alpha texture of the Drops.",[943,45279,3648],{},[925,45281,45282,45286,45289],{},[943,45283,45284],{"align":989},[1661,45285,37511],{},[943,45287,45288],{"align":989},"Enables the WebGL to know when not to render the pixel.",[943,45290,1878],{},[925,45292,45293,45297,45300],{},[943,45294,45295],{"align":989},[1661,45296,9672],{},[943,45298,45299],{"align":989},"Set the opacity of the drops.",[943,45301,45302],{},"0.8",[925,45304,45305,45309,45312],{},[943,45306,45307],{"align":989},[1661,45308,10071],{},[943,45310,45311],{"align":989},"Number of drops.",[943,45313,45314],{},"5000",[925,45316,45317,45321,45324],{},[943,45318,45319],{"align":989},[1661,45320,8548],{},[943,45322,45323],{"align":989},"Drops speed.",[943,45325,2155],{},[925,45327,45328,45333,45336],{},[943,45329,45330],{"align":989},[1661,45331,45332],{},"randomness",[943,45334,45335],{"align":989},"Add randomness to the drops.",[943,45337,1938],{},[925,45339,45340,45344,45347],{},[943,45341,45342],{"align":989},[1661,45343,9179],{},[943,45345,45346],{"align":989},"Whether should write to the depth buffer or not. drops.",[943,45348,953],{},[925,45350,45351,45355,45358],{},[943,45352,45353],{"align":989},[1661,45354,9684],{},[943,45356,45357],{"align":989},"Transparency on the drops texture",[943,45359,963],{},[925,45361,45362,45367,45370],{},[943,45363,45364],{"align":989},[1661,45365,45366],{},"sizeAttenuation",[943,45368,45369],{"align":989},"Keep the same size regardless distance. drops.",[943,45371,953],{},[1319,45373,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":45375},[45376,45381],{"id":616,"depth":570,"text":15,"children":45377},[45378,45379,45380],{"id":44589,"depth":700,"text":44590},{"id":44785,"depth":700,"text":44786},{"id":44977,"depth":700,"text":44978},{"id":913,"depth":570,"text":914},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":387,"description":45382},"tt7i9fbwRZ4B8AUSIJO4jMNnX2vDH4IJ9qHfravYfLs",{"id":45387,"title":391,"body":45388,"description":45773,"extension":583,"links":584,"meta":45774,"navigation":586,"path":392,"seo":45775,"stem":393,"__hash__":45776},"docs/2.api/8.staging/sky.md",{"type":493,"value":45389,"toc":45769},[45390,45395,45405,45407,45585,45587,45767],[600,45391,45392],{},[45393,45394],"staging-sky",{},[606,45396,45397,43837,45399,1138],{},[610,45398,43998],{},[1132,45400,43842,45403,43846],{"href":45401,"rel":45402},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1136],[610,45404,391],{},[496,45406,15],{"id":616},[618,45408,45411],{"className":620,"code":45409,"highlights":45410,"language":625,"meta":568,"style":568},"\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",[570,782],[610,45412,45413,45433,45457,45475,45483,45487,45495,45514,45533,45542,45550,45569,45577],{"__ignoreMap":568},[629,45414,45415,45417,45419,45421,45423,45425,45427,45429,45431],{"class":631,"line":569},[629,45416,635],{"class":634},[629,45418,639],{"class":638},[629,45420,643],{"class":642},[629,45422,646],{"class":642},[629,45424,649],{"class":634},[629,45426,652],{"class":634},[629,45428,656],{"class":655},[629,45430,652],{"class":634},[629,45432,661],{"class":634},[629,45434,45436,45438,45440,45442,45444,45447,45449,45451,45453,45455],{"class":45435,"line":570},[631,665],[629,45437,669],{"class":668},[629,45439,672],{"class":634},[629,45441,682],{"class":675},[629,45443,679],{"class":634},[629,45445,45446],{"class":675}," Sky",[629,45448,685],{"class":634},[629,45450,688],{"class":668},[629,45452,691],{"class":634},[629,45454,694],{"class":655},[629,45456,697],{"class":634},[629,45458,45459,45461,45463,45465,45467,45469,45471,45473],{"class":631,"line":700},[629,45460,669],{"class":668},[629,45462,672],{"class":634},[629,45464,707],{"class":675},[629,45466,685],{"class":634},[629,45468,688],{"class":668},[629,45470,691],{"class":634},[629,45472,716],{"class":655},[629,45474,697],{"class":634},[629,45476,45477,45479,45481],{"class":631,"line":721},[629,45478,724],{"class":634},[629,45480,639],{"class":638},[629,45482,661],{"class":634},[629,45484,45485],{"class":631,"line":731},[629,45486,734],{"emptyLinePlaceholder":586},[629,45488,45489,45491,45493],{"class":631,"line":737},[629,45490,635],{"class":634},[629,45492,742],{"class":638},[629,45494,661],{"class":634},[629,45496,45497,45499,45501,45504,45506,45508,45510,45512],{"class":631,"line":747},[629,45498,750],{"class":634},[629,45500,753],{"class":638},[629,45502,45503],{"class":642}," :tone-mapping-exposure",[629,45505,649],{"class":634},[629,45507,652],{"class":634},[629,45509,11679],{"class":655},[629,45511,652],{"class":634},[629,45513,661],{"class":634},[629,45515,45516,45518,45520,45522,45524,45526,45529,45531],{"class":631,"line":770},[629,45517,773],{"class":634},[629,45519,776],{"class":638},[629,45521,1477],{"class":642},[629,45523,649],{"class":634},[629,45525,652],{"class":634},[629,45527,45528],{"class":655},"[0, 15, 200]",[629,45530,652],{"class":634},[629,45532,779],{"class":634},[629,45534,45536,45538,45540],{"class":45535,"line":782},[631,665],[629,45537,773],{"class":634},[629,45539,391],{"class":638},[629,45541,779],{"class":634},[629,45543,45544,45546,45548],{"class":631,"line":792},[629,45545,773],{"class":634},[629,45547,787],{"class":638},[629,45549,779],{"class":634},[629,45551,45552,45554,45556,45558,45560,45562,45565,45567],{"class":631,"line":797},[629,45553,773],{"class":634},[629,45555,8041],{"class":638},[629,45557,1951],{"class":642},[629,45559,649],{"class":634},[629,45561,652],{"class":634},[629,45563,45564],{"class":655},"[1000, 20]",[629,45566,652],{"class":634},[629,45568,779],{"class":634},[629,45570,45571,45573,45575],{"class":631,"line":819},[629,45572,897],{"class":634},[629,45574,753],{"class":638},[629,45576,661],{"class":634},[629,45578,45579,45581,45583],{"class":631,"line":623},[629,45580,724],{"class":634},[629,45582,742],{"class":638},[629,45584,661],{"class":634},[496,45586,914],{"id":913},[919,45588,45589,45603],{},[922,45590,45591],{},[925,45592,45593,45595,45597,45599,45601],{},[928,45594,8081],{"align":989},[928,45596,5961],{"align":989},[928,45598,933],{"align":989},[928,45600,936],{"align":989},[928,45602,16657],{"align":989},[938,45604,45605,45626,45650,45676,45700,45720,45747],{},[925,45606,45607,45612,45616,45619,45624],{},[943,45608,45609],{"align":989},[1661,45610,45611],{},"turbidity",[943,45613,45614],{"align":989},[610,45615,5344],{},[943,45617,45618],{"align":989},"Haziness",[943,45620,45621],{"align":989},[610,45622,45623],{},"3.4",[943,45625,43788],{"align":989},[925,45627,45628,45633,45637,45644,45648],{},[943,45629,45630],{"align":989},[1661,45631,45632],{},"rayleigh",[943,45634,45635],{"align":989},[610,45636,5344],{},[943,45638,45639],{"align":989},[1132,45640,45643],{"href":45641,"rel":45642},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1136],"Rayleigh scattering",[943,45645,45646],{"align":989},[610,45647,19465],{},[943,45649,43788],{"align":989},[925,45651,45652,45657,45661,45669,45674],{},[943,45653,45654],{"align":989},[1661,45655,45656],{},"mieCoefficient",[943,45658,45659],{"align":989},[610,45660,5344],{},[943,45662,45663,45668],{"align":989},[1132,45664,45667],{"href":45665,"rel":45666},"https://en.wikipedia.org/wiki/Mie_scattering",[1136],"Mie scattering"," amount",[943,45670,45671],{"align":989},[610,45672,45673],{},"0.005",[943,45675,43788],{"align":989},[925,45677,45678,45683,45687,45693,45698],{},[943,45679,45680],{"align":989},[1661,45681,45682],{},"mieDirectionalG",[943,45684,45685],{"align":989},[610,45686,5344],{},[943,45688,45689,45692],{"align":989},[1132,45690,45667],{"href":45665,"rel":45691},[1136]," direction",[943,45694,45695],{"align":989},[610,45696,45697],{},"0.7",[943,45699,43788],{"align":989},[925,45701,45702,45707,45711,45714,45718],{},[943,45703,45704],{"align":989},[1661,45705,45706],{},"elevation",[943,45708,45709],{"align":989},[610,45710,5344],{},[943,45712,45713],{"align":989},"Sun's elevation from the horizon, in degrees",[943,45715,45716],{"align":989},[610,45717,28259],{},[943,45719,43788],{"align":989},[925,45721,45722,45727,45731,45740,45745],{},[943,45723,45724],{"align":989},[1661,45725,45726],{},"azimuth",[943,45728,45729],{"align":989},[610,45730,5344],{},[943,45732,45733,45734,45739],{"align":989},"Sun's ",[1132,45735,45738],{"href":45736,"rel":45737},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1136],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[943,45741,45742],{"align":989},[610,45743,45744],{},"180",[943,45746,43788],{"align":989},[925,45748,45749,45753,45757,45760,45765],{},[943,45750,45751],{"align":989},[1661,45752,11583],{},[943,45754,45755],{"align":989},[610,45756,5344],{},[943,45758,45759],{"align":989},"Sky box scale",[943,45761,45762],{"align":989},[610,45763,45764],{},"450000",[943,45766,43788],{"align":989},[1319,45768,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":45770},[45771,45772],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":391,"description":45773},"gj-nWIhO12GxCs2jecdsUZVQa85u-DxXdL5B9nW79zk",{"id":45778,"title":395,"body":45779,"description":46170,"extension":583,"links":584,"meta":46171,"navigation":586,"path":396,"seo":46172,"stem":397,"__hash__":46173},"docs/2.api/8.staging/smoke.md",{"type":493,"value":45780,"toc":46164},[45781,45786,45792,45794,45799,45804,45960,45962,46154,46158,46162],[2287,45782,45783],{},[45784,45785],"staging-smoke",{},[606,45787,45788,45791],{},[610,45789,45790],{},"\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",[496,45793,15],{"id":616},[3191,45795,45796],{},[606,45797,45798],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[606,45800,44440,45801,45803],{},[610,45802,45790],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[618,45805,45807],{"className":620,"code":45806,"language":625,"meta":568,"style":568},"\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",[610,45808,45809,45829,45847,45866,45874,45878,45886,45894,45912,45920,45928,45936,45944,45952],{"__ignoreMap":568},[629,45810,45811,45813,45815,45817,45819,45821,45823,45825,45827],{"class":631,"line":569},[629,45812,635],{"class":634},[629,45814,639],{"class":638},[629,45816,643],{"class":642},[629,45818,646],{"class":642},[629,45820,649],{"class":634},[629,45822,652],{"class":634},[629,45824,656],{"class":655},[629,45826,652],{"class":634},[629,45828,661],{"class":634},[629,45830,45831,45833,45835,45837,45839,45841,45843,45845],{"class":631,"line":570},[629,45832,669],{"class":668},[629,45834,672],{"class":634},[629,45836,707],{"class":675},[629,45838,685],{"class":634},[629,45840,688],{"class":668},[629,45842,691],{"class":634},[629,45844,716],{"class":655},[629,45846,697],{"class":634},[629,45848,45849,45851,45853,45856,45858,45860,45862,45864],{"class":631,"line":700},[629,45850,669],{"class":668},[629,45852,672],{"class":634},[629,45854,45855],{"class":675}," Smoke",[629,45857,685],{"class":634},[629,45859,688],{"class":668},[629,45861,691],{"class":634},[629,45863,694],{"class":655},[629,45865,697],{"class":634},[629,45867,45868,45870,45872],{"class":631,"line":721},[629,45869,724],{"class":634},[629,45871,639],{"class":638},[629,45873,661],{"class":634},[629,45875,45876],{"class":631,"line":731},[629,45877,734],{"emptyLinePlaceholder":586},[629,45879,45880,45882,45884],{"class":631,"line":737},[629,45881,635],{"class":634},[629,45883,742],{"class":638},[629,45885,661],{"class":634},[629,45887,45888,45890,45892],{"class":631,"line":747},[629,45889,750],{"class":634},[629,45891,753],{"class":638},[629,45893,661],{"class":634},[629,45895,45896,45898,45900,45902,45904,45906,45908,45910],{"class":631,"line":770},[629,45897,773],{"class":634},[629,45899,776],{"class":638},[629,45901,1477],{"class":642},[629,45903,649],{"class":634},[629,45905,652],{"class":634},[629,45907,40711],{"class":655},[629,45909,652],{"class":634},[629,45911,779],{"class":634},[629,45913,45914,45916,45918],{"class":631,"line":782},[629,45915,773],{"class":634},[629,45917,19723],{"class":638},[629,45919,661],{"class":634},[629,45921,45922,45924,45926],{"class":631,"line":792},[629,45923,845],{"class":634},[629,45925,395],{"class":638},[629,45927,779],{"class":634},[629,45929,45930,45932,45934],{"class":631,"line":797},[629,45931,887],{"class":634},[629,45933,19723],{"class":638},[629,45935,661],{"class":634},[629,45937,45938,45940,45942],{"class":631,"line":819},[629,45939,773],{"class":634},[629,45941,8448],{"class":638},[629,45943,779],{"class":634},[629,45945,45946,45948,45950],{"class":631,"line":623},[629,45947,897],{"class":634},[629,45949,753],{"class":638},[629,45951,661],{"class":634},[629,45953,45954,45956,45958],{"class":631,"line":842},[629,45955,724],{"class":634},[629,45957,742],{"class":638},[629,45959,661],{"class":634},[496,45961,914],{"id":913},[919,45963,45964,45976],{},[922,45965,45966],{},[925,45967,45968,45970,45972,45974],{},[928,45969,8081],{"align":989},[928,45971,5961],{"align":989},[928,45973,933],{"align":989},[928,45975,936],{"align":989},[938,45977,45978,45996,46013,46030,46047,46064,46084,46102,46120,46138],{},[925,45979,45980,45984,45988,45991],{},[943,45981,45982],{"align":989},[1661,45983,7539],{},[943,45985,45986],{"align":989},[610,45987,7554],{},[943,45989,45990],{"align":989},"The color of the smoke.",[943,45992,45993],{"align":989},[610,45994,45995],{},"'#ffffff'",[925,45997,45998,46002,46006,46009],{},[943,45999,46000],{"align":989},[1661,46001,9672],{},[943,46003,46004],{"align":989},[610,46005,5344],{},[943,46007,46008],{"align":989},"The strength of the opacity.",[943,46010,46011],{"align":989},[610,46012,1938],{},[925,46014,46015,46019,46023,46026],{},[943,46016,46017],{"align":989},[1661,46018,8548],{},[943,46020,46021],{"align":989},[610,46022,5344],{},[943,46024,46025],{"align":989},"The rotation speed of the smoke.",[943,46027,46028],{"align":989},[610,46029,37264],{},[925,46031,46032,46036,46040,46043],{},[943,46033,46034],{"align":989},[1661,46035,11146],{},[943,46037,46038],{"align":989},[610,46039,5344],{},[943,46041,46042],{"align":989},"The base depth.",[943,46044,46045],{"align":989},[610,46046,37253],{},[925,46048,46049,46053,46057,46060],{},[943,46050,46051],{"align":989},[1661,46052,28861],{},[943,46054,46055],{"align":989},[610,46056,5344],{},[943,46058,46059],{"align":989},"The number of smoke to render.",[943,46061,46062],{"align":989},[610,46063,35579],{},[925,46065,46066,46070,46074,46077],{},[943,46067,46068],{"align":989},[1661,46069,2709],{},[943,46071,46072],{"align":989},[610,46073,3564],{},[943,46075,46076],{"align":989},"The texture of the smoke.",[943,46078,46079],{"align":989},[1132,46080,46083],{"href":46081,"rel":46082},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1136],"link",[925,46085,46086,46091,46095,46098],{},[943,46087,46088],{"align":989},[1661,46089,46090],{},"depthTest",[943,46092,46093],{"align":989},[610,46094,15629],{},[943,46096,46097],{"align":989},"The depthTest.",[943,46099,46100],{"align":989},[610,46101,963],{},[925,46103,46104,46109,46113,46116],{},[943,46105,46106],{"align":989},[1661,46107,46108],{},"spreadY",[943,46110,46111],{"align":989},[610,46112,5344],{},[943,46114,46115],{"align":989},"Spread on the Y axis.",[943,46117,46118],{"align":989},[610,46119,2155],{},[925,46121,46122,46127,46131,46134],{},[943,46123,46124],{"align":989},[1661,46125,46126],{},"spreadX",[943,46128,46129],{"align":989},[610,46130,5344],{},[943,46132,46133],{"align":989},"Spread on the X axis.",[943,46135,46136],{"align":989},[610,46137,1938],{},[925,46139,46140,46144,46148,46150],{},[943,46141,46142],{"align":989},[1661,46143,5622],{},[943,46145,46146],{"align":989},[610,46147,5344],{},[943,46149,5622],{"align":989},[943,46151,46152],{"align":989},[610,46153,1866],{},[4043,46155,46157],{"id":46156},"default-texture","Default texture",[606,46159,46160],{},[8227,46161],{"alt":46157,"src":46081},[1319,46163,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":46165},[46166,46167],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914,"children":46168},[46169],{"id":46156,"depth":700,"text":46157},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":395,"description":46170},"sbmmZ3rOQ9aBpjlOeEx_ISxnTzHqa7qssAvcFtfGBTQ",{"id":46175,"title":399,"body":46176,"description":47908,"extension":583,"links":584,"meta":47909,"navigation":586,"path":400,"seo":47910,"stem":401,"__hash__":47911},"docs/2.api/8.staging/sparkles.md",{"type":493,"value":46177,"toc":47899},[46178,46184,46186,46190,46357,46361,46364,46624,46628,46646,46673,46679,46696,46908,46912,46928,46957,46967,47259,47261,47896],[606,46179,46180,46183],{},[610,46181,46182],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[496,46185,15],{"id":616},[4043,46187,46189],{"id":46188},"basic","Basic",[618,46191,46194],{"className":620,"code":46192,"highlights":46193,"language":625,"meta":568,"style":568},"\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",[700,797],[610,46195,46196,46216,46234,46254,46262,46266,46274,46282,46300,46308,46316,46325,46333,46341,46349],{"__ignoreMap":568},[629,46197,46198,46200,46202,46204,46206,46208,46210,46212,46214],{"class":631,"line":569},[629,46199,635],{"class":634},[629,46201,639],{"class":638},[629,46203,643],{"class":642},[629,46205,646],{"class":642},[629,46207,649],{"class":634},[629,46209,652],{"class":634},[629,46211,656],{"class":655},[629,46213,652],{"class":634},[629,46215,661],{"class":634},[629,46217,46218,46220,46222,46224,46226,46228,46230,46232],{"class":631,"line":570},[629,46219,669],{"class":668},[629,46221,672],{"class":634},[629,46223,707],{"class":675},[629,46225,685],{"class":634},[629,46227,688],{"class":668},[629,46229,691],{"class":634},[629,46231,716],{"class":655},[629,46233,697],{"class":634},[629,46235,46237,46239,46241,46244,46246,46248,46250,46252],{"class":46236,"line":700},[631,665],[629,46238,669],{"class":668},[629,46240,672],{"class":634},[629,46242,46243],{"class":675}," Sparkles",[629,46245,685],{"class":634},[629,46247,688],{"class":668},[629,46249,691],{"class":634},[629,46251,694],{"class":655},[629,46253,697],{"class":634},[629,46255,46256,46258,46260],{"class":631,"line":721},[629,46257,724],{"class":634},[629,46259,639],{"class":638},[629,46261,661],{"class":634},[629,46263,46264],{"class":631,"line":731},[629,46265,734],{"emptyLinePlaceholder":586},[629,46267,46268,46270,46272],{"class":631,"line":737},[629,46269,635],{"class":634},[629,46271,742],{"class":638},[629,46273,661],{"class":634},[629,46275,46276,46278,46280],{"class":631,"line":747},[629,46277,750],{"class":634},[629,46279,753],{"class":638},[629,46281,661],{"class":634},[629,46283,46284,46286,46288,46290,46292,46294,46296,46298],{"class":631,"line":770},[629,46285,773],{"class":634},[629,46287,776],{"class":638},[629,46289,1477],{"class":642},[629,46291,649],{"class":634},[629,46293,652],{"class":634},[629,46295,40711],{"class":655},[629,46297,652],{"class":634},[629,46299,779],{"class":634},[629,46301,46302,46304,46306],{"class":631,"line":782},[629,46303,773],{"class":634},[629,46305,848],{"class":638},[629,46307,661],{"class":634},[629,46309,46310,46312,46314],{"class":631,"line":792},[629,46311,845],{"class":634},[629,46313,3950],{"class":638},[629,46315,779],{"class":634},[629,46317,46319,46321,46323],{"class":46318,"line":797},[631,665],[629,46320,845],{"class":634},[629,46322,399],{"class":638},[629,46324,779],{"class":634},[629,46326,46327,46329,46331],{"class":631,"line":819},[629,46328,887],{"class":634},[629,46330,848],{"class":638},[629,46332,661],{"class":634},[629,46334,46335,46337,46339],{"class":631,"line":623},[629,46336,773],{"class":634},[629,46338,8448],{"class":638},[629,46340,779],{"class":634},[629,46342,46343,46345,46347],{"class":631,"line":842},[629,46344,897],{"class":634},[629,46346,753],{"class":638},[629,46348,661],{"class":634},[629,46350,46351,46353,46355],{"class":631,"line":853},[629,46352,724],{"class":634},[629,46354,742],{"class":638},[629,46356,661],{"class":634},[4043,46358,46360],{"id":46359},"with-tresdirectionallight","With TresDirectionalLight",[606,46362,46363],{},"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.",[618,46365,46368],{"className":620,"code":46366,"highlights":46367,"language":625,"meta":568,"style":568},"\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",[737,842,874],[610,46369,46370,46390,46408,46426,46444,46448,46462,46470,46474,46482,46490,46508,46516,46524,46545,46553,46559,46572,46584,46596,46600,46608,46616],{"__ignoreMap":568},[629,46371,46372,46374,46376,46378,46380,46382,46384,46386,46388],{"class":631,"line":569},[629,46373,635],{"class":634},[629,46375,639],{"class":638},[629,46377,643],{"class":642},[629,46379,646],{"class":642},[629,46381,649],{"class":634},[629,46383,652],{"class":634},[629,46385,656],{"class":655},[629,46387,652],{"class":634},[629,46389,661],{"class":634},[629,46391,46392,46394,46396,46398,46400,46402,46404,46406],{"class":631,"line":570},[629,46393,669],{"class":668},[629,46395,672],{"class":634},[629,46397,707],{"class":675},[629,46399,685],{"class":634},[629,46401,688],{"class":668},[629,46403,691],{"class":634},[629,46405,716],{"class":655},[629,46407,697],{"class":634},[629,46409,46410,46412,46414,46416,46418,46420,46422,46424],{"class":631,"line":700},[629,46411,669],{"class":668},[629,46413,672],{"class":634},[629,46415,46243],{"class":675},[629,46417,685],{"class":634},[629,46419,688],{"class":668},[629,46421,691],{"class":634},[629,46423,694],{"class":655},[629,46425,697],{"class":634},[629,46427,46428,46430,46432,46434,46436,46438,46440,46442],{"class":631,"line":721},[629,46429,669],{"class":668},[629,46431,672],{"class":634},[629,46433,3490],{"class":675},[629,46435,685],{"class":634},[629,46437,688],{"class":668},[629,46439,691],{"class":634},[629,46441,625],{"class":655},[629,46443,697],{"class":634},[629,46445,46446],{"class":631,"line":731},[629,46447,734],{"emptyLinePlaceholder":586},[629,46449,46451,46453,46456,46458,46460],{"class":46450,"line":737},[631,665],[629,46452,2407],{"class":642},[629,46454,46455],{"class":675}," directionalLightRef ",[629,46457,649],{"class":634},[629,46459,3490],{"class":2426},[629,46461,6527],{"class":675},[629,46463,46464,46466,46468],{"class":631,"line":747},[629,46465,724],{"class":634},[629,46467,639],{"class":638},[629,46469,661],{"class":634},[629,46471,46472],{"class":631,"line":770},[629,46473,734],{"emptyLinePlaceholder":586},[629,46475,46476,46478,46480],{"class":631,"line":782},[629,46477,635],{"class":634},[629,46479,742],{"class":638},[629,46481,661],{"class":634},[629,46483,46484,46486,46488],{"class":631,"line":792},[629,46485,750],{"class":634},[629,46487,753],{"class":638},[629,46489,661],{"class":634},[629,46491,46492,46494,46496,46498,46500,46502,46504,46506],{"class":631,"line":797},[629,46493,773],{"class":634},[629,46495,776],{"class":638},[629,46497,1477],{"class":642},[629,46499,649],{"class":634},[629,46501,652],{"class":634},[629,46503,40711],{"class":655},[629,46505,652],{"class":634},[629,46507,779],{"class":634},[629,46509,46510,46512,46514],{"class":631,"line":819},[629,46511,773],{"class":634},[629,46513,848],{"class":638},[629,46515,661],{"class":634},[629,46517,46518,46520,46522],{"class":631,"line":623},[629,46519,845],{"class":634},[629,46521,3950],{"class":638},[629,46523,779],{"class":634},[629,46525,46527,46529,46531,46534,46536,46538,46541,46543],{"class":46526,"line":842},[631,665],[629,46528,845],{"class":634},[629,46530,399],{"class":638},[629,46532,46533],{"class":642}," :directional-light",[629,46535,649],{"class":634},[629,46537,652],{"class":634},[629,46539,46540],{"class":655},"directionalLightRef",[629,46542,652],{"class":634},[629,46544,779],{"class":634},[629,46546,46547,46549,46551],{"class":631,"line":853},[629,46548,887],{"class":634},[629,46550,848],{"class":638},[629,46552,661],{"class":634},[629,46554,46555,46557],{"class":631,"line":864},[629,46556,773],{"class":634},[629,46558,15307],{"class":638},[629,46560,46562,46564,46566,46568,46570],{"class":46561,"line":874},[631,665],[629,46563,10425],{"class":642},[629,46565,649],{"class":634},[629,46567,652],{"class":634},[629,46569,46540],{"class":655},[629,46571,3123],{"class":634},[629,46573,46574,46576,46578,46580,46582],{"class":631,"line":624},[629,46575,15325],{"class":642},[629,46577,649],{"class":634},[629,46579,652],{"class":634},[629,46581,11342],{"class":655},[629,46583,3123],{"class":634},[629,46585,46586,46588,46590,46592,46594],{"class":631,"line":894},[629,46587,15312],{"class":642},[629,46589,649],{"class":634},[629,46591,652],{"class":634},[629,46593,812],{"class":655},[629,46595,3123],{"class":634},[629,46597,46598],{"class":631,"line":904},[629,46599,15338],{"class":634},[629,46601,46602,46604,46606],{"class":631,"line":2617},[629,46603,773],{"class":634},[629,46605,8448],{"class":638},[629,46607,779],{"class":634},[629,46609,46610,46612,46614],{"class":631,"line":2626},[629,46611,897],{"class":634},[629,46613,753],{"class":638},[629,46615,661],{"class":634},[629,46617,46618,46620,46622],{"class":631,"line":2646},[629,46619,724],{"class":634},[629,46621,742],{"class":638},[629,46623,661],{"class":634},[4043,46625,46627],{"id":46626},"sequences","Sequences",[606,46629,46630,46631,46634,46635,8158,46639,46641,46642,46645],{},"All props beginning with ",[610,46632,46633],{},":sequence-"," are used to define how a particle changes as it progresses ",[1132,46636,46638],{"href":46637},"#mixes","(See also: Mixes)",[610,46640,46633],{}," props are of the type ",[610,46643,46644],{},"Gradient\u003CT>",", which can be any one of:",[2205,46647,46648,46654,46660],{},[2208,46649,46650,46653],{},[610,46651,46652],{},"T",": a single value",[2208,46655,46656,46659],{},[610,46657,46658],{},"[T, T, T, ...]",": an evenly distributed series of values",[2208,46661,46662,46665,46666,46668,46669,2242,46671,1138],{},[610,46663,46664],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[610,46667,5344],{}," is a gradient \"stop\" from ",[610,46670,957],{},[610,46672,1866],{},[606,46674,46675,46676,1210],{},"For example, all of these are acceptable values for ",[610,46677,46678],{},"Gradient\u003CTresColor>",[2205,46680,46681,46686,46691],{},[2208,46682,46683],{},[610,46684,46685],{},"'red'",[2208,46687,46688],{},[610,46689,46690],{},"['red', 'blue', 'green']",[2208,46692,46693],{},[610,46694,46695],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[618,46697,46700],{"className":620,"code":46698,"highlights":46699,"language":625,"meta":568,"style":568},"\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",[797,819,623,842],[610,46701,46702,46722,46740,46758,46766,46770,46778,46786,46804,46812,46820,46828,46842,46857,46872,46876,46884,46892,46900],{"__ignoreMap":568},[629,46703,46704,46706,46708,46710,46712,46714,46716,46718,46720],{"class":631,"line":569},[629,46705,635],{"class":634},[629,46707,639],{"class":638},[629,46709,643],{"class":642},[629,46711,646],{"class":642},[629,46713,649],{"class":634},[629,46715,652],{"class":634},[629,46717,656],{"class":655},[629,46719,652],{"class":634},[629,46721,661],{"class":634},[629,46723,46724,46726,46728,46730,46732,46734,46736,46738],{"class":631,"line":570},[629,46725,669],{"class":668},[629,46727,672],{"class":634},[629,46729,707],{"class":675},[629,46731,685],{"class":634},[629,46733,688],{"class":668},[629,46735,691],{"class":634},[629,46737,716],{"class":655},[629,46739,697],{"class":634},[629,46741,46742,46744,46746,46748,46750,46752,46754,46756],{"class":631,"line":700},[629,46743,669],{"class":668},[629,46745,672],{"class":634},[629,46747,46243],{"class":675},[629,46749,685],{"class":634},[629,46751,688],{"class":668},[629,46753,691],{"class":634},[629,46755,694],{"class":655},[629,46757,697],{"class":634},[629,46759,46760,46762,46764],{"class":631,"line":721},[629,46761,724],{"class":634},[629,46763,639],{"class":638},[629,46765,661],{"class":634},[629,46767,46768],{"class":631,"line":731},[629,46769,734],{"emptyLinePlaceholder":586},[629,46771,46772,46774,46776],{"class":631,"line":737},[629,46773,635],{"class":634},[629,46775,742],{"class":638},[629,46777,661],{"class":634},[629,46779,46780,46782,46784],{"class":631,"line":747},[629,46781,750],{"class":634},[629,46783,753],{"class":638},[629,46785,661],{"class":634},[629,46787,46788,46790,46792,46794,46796,46798,46800,46802],{"class":631,"line":770},[629,46789,773],{"class":634},[629,46791,776],{"class":638},[629,46793,1477],{"class":642},[629,46795,649],{"class":634},[629,46797,652],{"class":634},[629,46799,40711],{"class":655},[629,46801,652],{"class":634},[629,46803,779],{"class":634},[629,46805,46806,46808,46810],{"class":631,"line":782},[629,46807,773],{"class":634},[629,46809,848],{"class":638},[629,46811,661],{"class":634},[629,46813,46814,46816,46818],{"class":631,"line":792},[629,46815,845],{"class":634},[629,46817,3950],{"class":638},[629,46819,779],{"class":634},[629,46821,46823,46825],{"class":46822,"line":797},[631,665],[629,46824,845],{"class":634},[629,46826,46827],{"class":638},"Sparkles\n",[629,46829,46831,46834,46836,46838,46840],{"class":46830,"line":819},[631,665],[629,46832,46833],{"class":642}," :sequence-color",[629,46835,649],{"class":634},[629,46837,652],{"class":634},[629,46839,46690],{"class":655},[629,46841,3123],{"class":634},[629,46843,46845,46848,46850,46852,46855],{"class":46844,"line":623},[631,665],[629,46846,46847],{"class":642}," :sequence-alpha",[629,46849,649],{"class":634},[629,46851,652],{"class":634},[629,46853,46854],{"class":655},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[629,46856,3123],{"class":634},[629,46858,46860,46863,46865,46867,46870],{"class":46859,"line":842},[631,665],[629,46861,46862],{"class":642}," :sequence-size",[629,46864,649],{"class":634},[629,46866,652],{"class":634},[629,46868,46869],{"class":655},"[0.0, 1.0, 0.5]",[629,46871,3123],{"class":634},[629,46873,46874],{"class":631,"line":853},[629,46875,8025],{"class":634},[629,46877,46878,46880,46882],{"class":631,"line":864},[629,46879,887],{"class":634},[629,46881,848],{"class":638},[629,46883,661],{"class":634},[629,46885,46886,46888,46890],{"class":631,"line":874},[629,46887,773],{"class":634},[629,46889,8448],{"class":638},[629,46891,779],{"class":634},[629,46893,46894,46896,46898],{"class":631,"line":624},[629,46895,897],{"class":634},[629,46897,753],{"class":638},[629,46899,661],{"class":634},[629,46901,46902,46904,46906],{"class":631,"line":894},[629,46903,724],{"class":634},[629,46905,742],{"class":638},[629,46907,661],{"class":634},[4043,46909,46911],{"id":46910},"mixes","Mixes",[606,46913,46630,46914,46917,46918,46920,46921,46924,46925,1138],{},[610,46915,46916],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[610,46919,46633],{}," prop. E.g., ",[610,46922,46923],{},":mix-alpha"," affects ",[610,46926,46927],{},":sequence-alpha",[2205,46929,46930,46948],{},[2208,46931,46932,46933,46935,46936,46938,46939,46941,46942],{},"If the ",[610,46934,46916],{}," prop is ",[610,46937,11845],{},", 'progress' through the ",[610,46940,46633],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1132,46943,46945],{"href":46944},"#precisely",[46946,46947,1866],"sup",{},[2208,46949,46932,46950,46935,46952,46938,46954,46956],{},[610,46951,46916],{},[610,46953,11723],{},[610,46955,46633],{}," is determined entirely by the particle's lifetime.",[606,46958,46959,46962,46963,46966],{},[1132,46960],{"id":46961},"precisely"," More precisely, the value is determined by the dot product of the ",[610,46964,46965],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[618,46968,46971],{"className":620,"code":46969,"highlights":46970,"language":625,"meta":568,"style":568},"\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",[700,842,853,864,874,624],[610,46972,46973,46993,47011,47030,47048,47052,47064,47072,47076,47084,47092,47110,47118,47126,47133,47147,47161,47175,47189,47193,47201,47207,47219,47231,47235,47243,47251],{"__ignoreMap":568},[629,46974,46975,46977,46979,46981,46983,46985,46987,46989,46991],{"class":631,"line":569},[629,46976,635],{"class":634},[629,46978,639],{"class":638},[629,46980,643],{"class":642},[629,46982,646],{"class":642},[629,46984,649],{"class":634},[629,46986,652],{"class":634},[629,46988,656],{"class":655},[629,46990,652],{"class":634},[629,46992,661],{"class":634},[629,46994,46995,46997,46999,47001,47003,47005,47007,47009],{"class":631,"line":570},[629,46996,669],{"class":668},[629,46998,672],{"class":634},[629,47000,707],{"class":675},[629,47002,685],{"class":634},[629,47004,688],{"class":668},[629,47006,691],{"class":634},[629,47008,716],{"class":655},[629,47010,697],{"class":634},[629,47012,47014,47016,47018,47020,47022,47024,47026,47028],{"class":47013,"line":700},[631,665],[629,47015,669],{"class":668},[629,47017,672],{"class":634},[629,47019,46243],{"class":675},[629,47021,685],{"class":634},[629,47023,688],{"class":668},[629,47025,691],{"class":634},[629,47027,694],{"class":655},[629,47029,697],{"class":634},[629,47031,47032,47034,47036,47038,47040,47042,47044,47046],{"class":631,"line":721},[629,47033,669],{"class":668},[629,47035,672],{"class":634},[629,47037,3490],{"class":675},[629,47039,685],{"class":634},[629,47041,688],{"class":668},[629,47043,691],{"class":634},[629,47045,625],{"class":655},[629,47047,697],{"class":634},[629,47049,47050],{"class":631,"line":731},[629,47051,734],{"emptyLinePlaceholder":586},[629,47053,47054,47056,47058,47060,47062],{"class":631,"line":737},[629,47055,2407],{"class":642},[629,47057,46455],{"class":675},[629,47059,649],{"class":634},[629,47061,3490],{"class":2426},[629,47063,6527],{"class":675},[629,47065,47066,47068,47070],{"class":631,"line":747},[629,47067,724],{"class":634},[629,47069,639],{"class":638},[629,47071,661],{"class":634},[629,47073,47074],{"class":631,"line":770},[629,47075,734],{"emptyLinePlaceholder":586},[629,47077,47078,47080,47082],{"class":631,"line":782},[629,47079,635],{"class":634},[629,47081,742],{"class":638},[629,47083,661],{"class":634},[629,47085,47086,47088,47090],{"class":631,"line":792},[629,47087,750],{"class":634},[629,47089,753],{"class":638},[629,47091,661],{"class":634},[629,47093,47094,47096,47098,47100,47102,47104,47106,47108],{"class":631,"line":797},[629,47095,773],{"class":634},[629,47097,776],{"class":638},[629,47099,1477],{"class":642},[629,47101,649],{"class":634},[629,47103,652],{"class":634},[629,47105,40711],{"class":655},[629,47107,652],{"class":634},[629,47109,779],{"class":634},[629,47111,47112,47114,47116],{"class":631,"line":819},[629,47113,773],{"class":634},[629,47115,848],{"class":638},[629,47117,661],{"class":634},[629,47119,47120,47122,47124],{"class":631,"line":623},[629,47121,845],{"class":634},[629,47123,3950],{"class":638},[629,47125,779],{"class":634},[629,47127,47129,47131],{"class":47128,"line":842},[631,665],[629,47130,845],{"class":634},[629,47132,46827],{"class":638},[629,47134,47136,47139,47141,47143,47145],{"class":47135,"line":853},[631,665],[629,47137,47138],{"class":642}," :directional-light",[629,47140,649],{"class":634},[629,47142,652],{"class":634},[629,47144,46540],{"class":655},[629,47146,3123],{"class":634},[629,47148,47150,47153,47155,47157,47159],{"class":47149,"line":864},[631,665],[629,47151,47152],{"class":642}," :mix-color",[629,47154,649],{"class":634},[629,47156,652],{"class":634},[629,47158,45302],{"class":655},[629,47160,3123],{"class":634},[629,47162,47164,47167,47169,47171,47173],{"class":47163,"line":874},[631,665],[629,47165,47166],{"class":642}," :mix-alpha",[629,47168,649],{"class":634},[629,47170,652],{"class":634},[629,47172,1938],{"class":655},[629,47174,3123],{"class":634},[629,47176,47178,47181,47183,47185,47187],{"class":47177,"line":624},[631,665],[629,47179,47180],{"class":642}," :mix-size",[629,47182,649],{"class":634},[629,47184,652],{"class":634},[629,47186,5721],{"class":655},[629,47188,3123],{"class":634},[629,47190,47191],{"class":631,"line":894},[629,47192,8025],{"class":634},[629,47194,47195,47197,47199],{"class":631,"line":904},[629,47196,887],{"class":634},[629,47198,848],{"class":638},[629,47200,661],{"class":634},[629,47202,47203,47205],{"class":631,"line":2617},[629,47204,773],{"class":634},[629,47206,15307],{"class":638},[629,47208,47209,47211,47213,47215,47217],{"class":631,"line":2626},[629,47210,10425],{"class":642},[629,47212,649],{"class":634},[629,47214,652],{"class":634},[629,47216,46540],{"class":655},[629,47218,3123],{"class":634},[629,47220,47221,47223,47225,47227,47229],{"class":631,"line":2646},[629,47222,15325],{"class":642},[629,47224,649],{"class":634},[629,47226,652],{"class":634},[629,47228,11342],{"class":655},[629,47230,3123],{"class":634},[629,47232,47233],{"class":631,"line":2655},[629,47234,15338],{"class":634},[629,47236,47237,47239,47241],{"class":631,"line":2664},[629,47238,773],{"class":634},[629,47240,8448],{"class":638},[629,47242,779],{"class":634},[629,47244,47245,47247,47249],{"class":631,"line":2673},[629,47246,897],{"class":634},[629,47248,753],{"class":638},[629,47250,661],{"class":634},[629,47252,47253,47255,47257],{"class":631,"line":2695},[629,47254,724],{"class":634},[629,47256,742],{"class":638},[629,47258,661],{"class":634},[496,47260,914],{"id":913},[919,47262,47263,47271],{},[922,47264,47265],{},[925,47266,47267,47269],{},[928,47268,8081],{"align":989},[928,47270,933],{"align":989},[938,47272,47273,47295,47328,47350,47370,47390,47410,47431,47451,47471,47491,47510,47529,47548,47568,47595,47616,47638,47658,47679,47700,47734,47755,47775,47796,47816,47836,47858,47877],{},[925,47274,47275,47279],{},[943,47276,47277],{"align":989},[1661,47278,2973],{},[943,47280,47281,47282,47284,47286,47287,47290,47292,47294],{"align":989},"Type: ",[610,47283,39305],{},[7547,47285],{},"Default: ",[610,47288,47289],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[7547,47291],{},[7547,47293],{},"Texture or image path for individual sparkles",[925,47296,47297,47301],{},[943,47298,47299],{"align":989},[1661,47300,5248],{},[943,47302,47281,47303,47306,47286,47308,47310,47312,47314,47315,47317],{"align":989},[610,47304,47305],{},"Object3D | BufferGeometry",[7547,47307],{},[610,47309,1171],{},[7547,47311],{},[7547,47313],{},"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.",[7547,47316],{},[2205,47318,47319,47322,47325],{},[2208,47320,47321],{},"If provided, the component will use the passed geometry.",[2208,47323,47324],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2208,47326,47327],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[925,47329,47330,47334],{},[943,47331,47332],{"align":989},[1661,47333,46965],{},[943,47335,47281,47336,47338,47286,47340,47342,47344,47346,47347,47349],{"align":989},[610,47337,7614],{},[7547,47339],{},[610,47341,1171],{},[7547,47343],{},[7547,47345],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[610,47348,46965],{}," is provided, the default \"up\" vector will be used.",[925,47351,47352,47357],{},[943,47353,47354],{"align":989},[1661,47355,47356],{},"lifetimeSec",[943,47358,47281,47359,47361,47286,47363,47365,47367,47369],{"align":989},[610,47360,5344],{},[7547,47362],{},[610,47364,37264],{},[7547,47366],{},[7547,47368],{},"Particle lifetime in seconds",[925,47371,47372,47377],{},[943,47373,47374],{"align":989},[1661,47375,47376],{},"cooldownSec",[943,47378,47281,47379,47381,47286,47383,47385,47387,47389],{"align":989},[610,47380,5344],{},[7547,47382],{},[610,47384,11782],{},[7547,47386],{},[7547,47388],{},"Particle cooldown in seconds – time between lifetime end and respawn",[925,47391,47392,47397],{},[943,47393,47394],{"align":989},[1661,47395,47396],{},"normalThreshold",[943,47398,47281,47399,47401,47286,47403,47405,47407,47409],{"align":989},[610,47400,5344],{},[7547,47402],{},[610,47404,45697],{},[7547,47406],{},[7547,47408],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[925,47411,47412,47417],{},[943,47413,47414],{"align":989},[1661,47415,47416],{},"noiseScale",[943,47418,47281,47419,47421,47286,47423,47426,47428,47430],{"align":989},[610,47420,5344],{},[7547,47422],{},[610,47424,47425],{},"3.0",[7547,47427],{},[7547,47429],{},"Scale of the noise period (lower == more slowly cycling noise)",[925,47432,47433,47438],{},[943,47434,47435],{"align":989},[1661,47436,47437],{},"scaleNoise",[943,47439,47281,47440,47442,47286,47444,47446,47448,47450],{"align":989},[610,47441,5344],{},[7547,47443],{},[610,47445,11723],{},[7547,47447],{},[7547,47449],{},"Noise coefficient applied to particle scale",[925,47452,47453,47458],{},[943,47454,47455],{"align":989},[1661,47456,47457],{},"offsetNoise",[943,47459,47281,47460,47462,47286,47464,47466,47468,47470],{"align":989},[610,47461,5344],{},[7547,47463],{},[610,47465,2155],{},[7547,47467],{},[7547,47469],{},"Noise coefficient applied to particle offset",[925,47472,47473,47478],{},[943,47474,47475],{"align":989},[1661,47476,47477],{},"lifetimeNoise",[943,47479,47281,47480,47482,47286,47484,47486,47488,47490],{"align":989},[610,47481,5344],{},[7547,47483],{},[610,47485,11845],{},[7547,47487],{},[7547,47489],{},"Noise coefficient applied to particle lifetime",[925,47492,47493,47497],{},[943,47494,47495],{"align":989},[1661,47496,14793],{},[943,47498,47281,47499,47501,47286,47503,47505,47507,47509],{"align":989},[610,47500,5344],{},[7547,47502],{},[610,47504,11723],{},[7547,47506],{},[7547,47508],{},"Particle scale multiplier",[925,47511,47512,47516],{},[943,47513,47514],{"align":989},[1661,47515,44367],{},[943,47517,47281,47518,47520,47286,47522,47524,47526,47528],{"align":989},[610,47519,5344],{},[7547,47521],{},[610,47523,11723],{},[7547,47525],{},[7547,47527],{},"Opacity multiplier",[925,47530,47531,47535],{},[943,47532,47533],{"align":989},[1661,47534,38504],{},[943,47536,47281,47537,47539,47286,47541,47543,47545,47547],{"align":989},[610,47538,5344],{},[7547,47540],{},[610,47542,11723],{},[7547,47544],{},[7547,47546],{},"Offset multiplier",[925,47549,47550,47555],{},[943,47551,47552],{"align":989},[1661,47553,47554],{},"surfaceDistance",[943,47556,47281,47557,47559,47286,47561,47563,47565,47567],{"align":989},[610,47558,5344],{},[7547,47560],{},[610,47562,11723],{},[7547,47564],{},[7547,47566],{},"Surface distance multiplier",[925,47569,47570,47575],{},[943,47571,47572],{"align":989},[1661,47573,47574],{},"sequenceColor",[943,47576,47281,47577,47579,47286,47581,47584,47586,2432,47588,47591,47592,47594],{"align":989},[610,47578,46678],{},[7547,47580],{},[610,47582,47583],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7547,47585],{},[7547,47587],{},[1666,47589,47590],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7547,47593],{},"Color sequence as particles progress",[925,47596,47597,47602],{},[943,47598,47599],{"align":989},[1661,47600,47601],{},"sequenceAlpha",[943,47603,47281,47604,47607,47286,47609,47611,47613,47615],{"align":989},[610,47605,47606],{},"Gradient\u003Cnumber>",[7547,47608],{},[610,47610,46854],{},[7547,47612],{},[7547,47614],{},"Opacity sequence as particles progress",[925,47617,47618,47623],{},[943,47619,47620],{"align":989},[1661,47621,47622],{},"sequenceOffset",[943,47624,47281,47625,47628,47286,47630,47633,47635,47637],{"align":989},[610,47626,47627],{},"Gradient\u003C[number, number, number]>",[7547,47629],{},[610,47631,47632],{},"[0.0, 0.0, 0.0]",[7547,47634],{},[7547,47636],{},"Distance sequence as particles progress",[925,47639,47640,47645],{},[943,47641,47642],{"align":989},[1661,47643,47644],{},"sequenceNoise",[943,47646,47281,47647,47649,47286,47651,47653,47655,47657],{"align":989},[610,47648,47627],{},[7547,47650],{},[610,47652,9977],{},[7547,47654],{},[7547,47656],{},"Noise sequence as particles progress",[925,47659,47660,47665],{},[943,47661,47662],{"align":989},[1661,47663,47664],{},"sequenceSize",[943,47666,47281,47667,47669,47286,47671,47674,47676,47678],{"align":989},[610,47668,47606],{},[7547,47670],{},[610,47672,47673],{},"[0.0, 1.0]",[7547,47675],{},[7547,47677],{},"Size sequence as particles progress",[925,47680,47681,47686],{},[943,47682,47683],{"align":989},[1661,47684,47685],{},"sequenceSurfaceDistance",[943,47687,47281,47688,47690,47286,47692,47695,47697,47699],{"align":989},[610,47689,47606],{},[7547,47691],{},[610,47693,47694],{},"[0.05, 0.08, 0.1]",[7547,47696],{},[7547,47698],{},"Distance from surface (along normal) as particles progress",[925,47701,47702,47707],{},[943,47703,47704],{"align":989},[1661,47705,47706],{},"mixColor",[943,47708,47281,47709,47711,47286,47713,47715,47717,47719,47720,47722,47730,47731,47733],{"align":989},[610,47710,5344],{},[7547,47712],{},[610,47714,1938],{},[7547,47716],{},[7547,47718],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7547,47721],{},[2205,47723,47724,47727],{},[2208,47725,47726],{},"its normal \"facing\" the directionalLight",[2208,47728,47729],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7547,47732],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[925,47735,47736,47741],{},[943,47737,47738],{"align":989},[1661,47739,47740],{},"mixAlpha",[943,47742,47281,47743,47745,47286,47747,47750,47752,47754],{"align":989},[610,47744,5344],{},[7547,47746],{},[610,47748,47749],{},"1.",[7547,47751],{},[7547,47753],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[925,47756,47757,47762],{},[943,47758,47759],{"align":989},[1661,47760,47761],{},"mixOffset",[943,47763,47281,47764,47766,47286,47768,47770,47772,47774],{"align":989},[610,47765,5344],{},[7547,47767],{},[610,47769,47749],{},[7547,47771],{},[7547,47773],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[925,47776,47777,47782],{},[943,47778,47779],{"align":989},[1661,47780,47781],{},"mixSize",[943,47783,47281,47784,47786,47286,47788,47791,47793,47795],{"align":989},[610,47785,5344],{},[7547,47787],{},[610,47789,47790],{},"0.",[7547,47792],{},[7547,47794],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[925,47797,47798,47803],{},[943,47799,47800],{"align":989},[1661,47801,47802],{},"mixSurfaceDistance",[943,47804,47281,47805,47807,47286,47809,47811,47813,47815],{"align":989},[610,47806,5344],{},[7547,47808],{},[610,47810,47749],{},[7547,47812],{},[7547,47814],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[925,47817,47818,47823],{},[943,47819,47820],{"align":989},[1661,47821,47822],{},"mixNoise",[943,47824,47281,47825,47827,47286,47829,47831,47833,47835],{"align":989},[610,47826,5344],{},[7547,47828],{},[610,47830,47749],{},[7547,47832],{},[7547,47834],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[925,47837,47838,47843],{},[943,47839,47840],{"align":989},[1661,47841,47842],{},"blending",[943,47844,47281,47845,47848,47286,47850,47853,47855,47857],{"align":989},[610,47846,47847],{},"Blending",[7547,47849],{},[610,47851,47852],{},"AdditiveBlending",[7547,47854],{},[7547,47856],{},"Material blending",[925,47859,47860,47864],{},[943,47861,47862],{"align":989},[1661,47863,9684],{},[943,47865,47281,47866,47868,47286,47870,47872,47874,47876],{"align":989},[610,47867,15629],{},[7547,47869],{},[610,47871,953],{},[7547,47873],{},[7547,47875],{},"Material transparency",[925,47878,47879,47883],{},[943,47880,47881],{"align":989},[1661,47882,9179],{},[943,47884,47281,47885,47887,47286,47889,47891,47893,47895],{"align":989},[610,47886,15629],{},[7547,47888],{},[610,47890,963],{},[7547,47892],{},[7547,47894],{},"Material depth write",[1319,47897,47898],{},"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":568,"searchDepth":569,"depth":570,"links":47900},[47901,47907],{"id":616,"depth":570,"text":15,"children":47902},[47903,47904,47905,47906],{"id":46188,"depth":700,"text":46189},{"id":46359,"depth":700,"text":46360},{"id":46626,"depth":700,"text":46627},{"id":46910,"depth":700,"text":46911},{"id":913,"depth":570,"text":914},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":399,"description":47908},"HM8JeL6MyPB0GIa8xnkj-A_wEWc2xfe0JgLNTCfq1Wg",{"id":47913,"title":403,"body":47914,"description":48559,"extension":583,"links":584,"meta":48560,"navigation":586,"path":404,"seo":48561,"stem":405,"__hash__":48562},"docs/2.api/8.staging/stage.md",{"type":493,"value":47915,"toc":48553},[47916,47921,47924,47938,47957,48006,48008,48335,48337,48449,48453,48456,48538,48550],[2287,47917,47918],{},[47919,47920],"staging-stage",{},[606,47922,47923],{},"This component creates a \"stage\" for your models. It sets up:",[2205,47925,47926,47929,47932,47935],{},[2208,47927,47928],{},"model lighting",[2208,47930,47931],{},"ground shadows",[2208,47933,47934],{},"zoom to fit",[2208,47936,47937],{},"environment",[1997,47939,47940,47943],{},[606,47941,47942],{},"If you are using other camera controls, be sure to make them the 'default'.",[618,47944,47945],{"className":620,"code":2022,"language":625,"meta":568,"style":568},[610,47946,47947],{"__ignoreMap":568},[629,47948,47949,47951,47953,47955],{"class":631,"line":569},[629,47950,635],{"class":634},[629,47952,787],{"class":638},[629,47954,1843],{"class":642},[629,47956,779],{"class":634},[1997,47958,47959,47962,47977],{},[606,47960,47961],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[618,47963,47965],{"className":620,"code":47964,"language":625,"meta":568,"style":568},"\u003CTresCanvas shadows />\n",[610,47966,47967],{"__ignoreMap":568},[629,47968,47969,47971,47973,47975],{"class":631,"line":569},[629,47970,635],{"class":634},[629,47972,753],{"class":638},[629,47974,40694],{"class":642},[629,47976,779],{"class":634},[618,47978,47980],{"className":620,"code":47979,"language":625,"meta":568,"style":568},"\u003CTresMesh cast-shadow />\n ...\n\u003C/TresMesh>\n",[610,47981,47982,47992,47996],{"__ignoreMap":568},[629,47983,47984,47986,47988,47990],{"class":631,"line":569},[629,47985,635],{"class":634},[629,47987,848],{"class":638},[629,47989,14432],{"class":642},[629,47991,779],{"class":634},[629,47993,47994],{"class":631,"line":570},[629,47995,12017],{"class":675},[629,47997,47998,48000,48002,48004],{"class":631,"line":700},[629,47999,635],{"class":634},[629,48001,26204],{"class":675},[629,48003,848],{"class":638},[629,48005,661],{"class":634},[496,48007,15],{"id":616},[618,48009,48012],{"className":620,"code":48010,"highlights":48011,"language":625,"meta":568,"style":568},"\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",[700,792,797,819,623,842,853],[610,48013,48014,48034,48052,48080,48088,48092,48100,48110,48128,48138,48146,48161,48176,48190,48204,48217,48221,48231,48239,48257,48265,48295,48303,48311,48319,48327],{"__ignoreMap":568},[629,48015,48016,48018,48020,48022,48024,48026,48028,48030,48032],{"class":631,"line":569},[629,48017,635],{"class":634},[629,48019,639],{"class":638},[629,48021,643],{"class":642},[629,48023,646],{"class":642},[629,48025,649],{"class":634},[629,48027,652],{"class":634},[629,48029,656],{"class":655},[629,48031,652],{"class":634},[629,48033,661],{"class":634},[629,48035,48036,48038,48040,48042,48044,48046,48048,48050],{"class":631,"line":570},[629,48037,669],{"class":668},[629,48039,672],{"class":634},[629,48041,707],{"class":675},[629,48043,685],{"class":634},[629,48045,688],{"class":668},[629,48047,691],{"class":634},[629,48049,716],{"class":655},[629,48051,697],{"class":634},[629,48053,48055,48057,48059,48062,48064,48066,48068,48070,48072,48074,48076,48078],{"class":48054,"line":700},[631,665],[629,48056,669],{"class":668},[629,48058,672],{"class":634},[629,48060,48061],{"class":675}," Stage",[629,48063,679],{"class":634},[629,48065,682],{"class":675},[629,48067,679],{"class":634},[629,48069,41236],{"class":675},[629,48071,685],{"class":634},[629,48073,688],{"class":668},[629,48075,691],{"class":634},[629,48077,694],{"class":655},[629,48079,697],{"class":634},[629,48081,48082,48084,48086],{"class":631,"line":721},[629,48083,724],{"class":634},[629,48085,639],{"class":638},[629,48087,661],{"class":634},[629,48089,48090],{"class":631,"line":731},[629,48091,734],{"emptyLinePlaceholder":586},[629,48093,48094,48096,48098],{"class":631,"line":737},[629,48095,635],{"class":634},[629,48097,742],{"class":638},[629,48099,661],{"class":634},[629,48101,48102,48104,48106,48108],{"class":631,"line":747},[629,48103,750],{"class":634},[629,48105,753],{"class":638},[629,48107,40694],{"class":642},[629,48109,661],{"class":634},[629,48111,48112,48114,48116,48118,48120,48122,48124,48126],{"class":631,"line":770},[629,48113,773],{"class":634},[629,48115,776],{"class":638},[629,48117,1477],{"class":642},[629,48119,649],{"class":634},[629,48121,652],{"class":634},[629,48123,40711],{"class":655},[629,48125,652],{"class":634},[629,48127,779],{"class":634},[629,48129,48130,48132,48134,48136],{"class":631,"line":782},[629,48131,773],{"class":634},[629,48133,787],{"class":638},[629,48135,1843],{"class":642},[629,48137,779],{"class":634},[629,48139,48141,48143],{"class":48140,"line":792},[631,665],[629,48142,773],{"class":634},[629,48144,48145],{"class":638},"Stage\n",[629,48147,48149,48152,48154,48156,48159],{"class":48148,"line":797},[631,665],[629,48150,48151],{"class":642}," lighting",[629,48153,649],{"class":634},[629,48155,652],{"class":634},[629,48157,48158],{"class":655},"rembrandt",[629,48160,3123],{"class":634},[629,48162,48164,48167,48169,48171,48174],{"class":48163,"line":819},[631,665],[629,48165,48166],{"class":642}," shadows",[629,48168,649],{"class":634},[629,48170,652],{"class":634},[629,48172,48173],{"class":655},"contact",[629,48175,3123],{"class":634},[629,48177,48179,48182,48184,48186,48188],{"class":48178,"line":623},[631,665],[629,48180,48181],{"class":642}," :adjust-camera",[629,48183,649],{"class":634},[629,48185,652],{"class":634},[629,48187,953],{"class":655},[629,48189,3123],{"class":634},[629,48191,48193,48196,48198,48200,48202],{"class":48192,"line":842},[631,665],[629,48194,48195],{"class":642}," environment",[629,48197,649],{"class":634},[629,48199,652],{"class":634},[629,48201,27165],{"class":655},[629,48203,3123],{"class":634},[629,48205,48207,48209,48211,48213,48215],{"class":48206,"line":853},[631,665],[629,48208,15312],{"class":642},[629,48210,649],{"class":634},[629,48212,652],{"class":634},[629,48214,1938],{"class":655},[629,48216,3123],{"class":634},[629,48218,48219],{"class":631,"line":864},[629,48220,10453],{"class":634},[629,48222,48223,48225,48227,48229],{"class":631,"line":874},[629,48224,845],{"class":634},[629,48226,848],{"class":638},[629,48228,14432],{"class":642},[629,48230,661],{"class":634},[629,48232,48233,48235,48237],{"class":631,"line":624},[629,48234,856],{"class":634},[629,48236,859],{"class":638},[629,48238,779],{"class":634},[629,48240,48241,48243,48245,48247,48249,48251,48253,48255],{"class":631,"line":894},[629,48242,856],{"class":634},[629,48244,2678],{"class":638},[629,48246,2681],{"class":642},[629,48248,649],{"class":634},[629,48250,652],{"class":634},[629,48252,11389],{"class":655},[629,48254,652],{"class":634},[629,48256,779],{"class":634},[629,48258,48259,48261,48263],{"class":631,"line":904},[629,48260,877],{"class":634},[629,48262,848],{"class":638},[629,48264,661],{"class":634},[629,48266,48267,48269,48271,48273,48275,48277,48279,48281,48283,48285,48287,48289,48291,48293],{"class":631,"line":2617},[629,48268,845],{"class":634},[629,48270,253],{"class":638},[629,48272,1477],{"class":642},[629,48274,649],{"class":634},[629,48276,652],{"class":634},[629,48278,38043],{"class":655},[629,48280,652],{"class":634},[629,48282,40946],{"class":642},[629,48284,1951],{"class":642},[629,48286,649],{"class":634},[629,48288,652],{"class":634},[629,48290,38078],{"class":655},[629,48292,652],{"class":634},[629,48294,661],{"class":634},[629,48296,48297,48299,48301],{"class":631,"line":2626},[629,48298,856],{"class":634},[629,48300,2678],{"class":638},[629,48302,779],{"class":634},[629,48304,48305,48307,48309],{"class":631,"line":2646},[629,48306,877],{"class":634},[629,48308,253],{"class":638},[629,48310,661],{"class":634},[629,48312,48313,48315,48317],{"class":631,"line":2655},[629,48314,887],{"class":634},[629,48316,403],{"class":638},[629,48318,661],{"class":634},[629,48320,48321,48323,48325],{"class":631,"line":2664},[629,48322,897],{"class":634},[629,48324,753],{"class":638},[629,48326,661],{"class":634},[629,48328,48329,48331,48333],{"class":631,"line":2673},[629,48330,724],{"class":634},[629,48332,742],{"class":638},[629,48334,661],{"class":634},[496,48336,914],{"id":913},[919,48338,48339,48349],{},[922,48340,48341],{},[925,48342,48343,48345,48347],{},[928,48344,930],{"align":989},[928,48346,933],{"align":989},[928,48348,936],{"align":989},[938,48350,48351,48369,48387,48405,48419,48435],{},[925,48352,48353,48358,48364],{},[943,48354,48355],{"align":989},[1661,48356,48357],{},"lighting",[943,48359,48360,48361],{"align":989},"Lighting setup. Options: ",[610,48362,48363],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[943,48365,48366],{"align":989},[610,48367,48368],{},"'rembrandt'",[925,48370,48371,48376,48382],{},[943,48372,48373],{"align":989},[1661,48374,48375],{},"shadows",[943,48377,48378,48379],{"align":989},"Controls the ground shadows. Options: ",[610,48380,48381],{},"boolean | 'contact' | 'accumulative' | StageShadows",[943,48383,48384],{"align":989},[610,48385,48386],{},"'contact'",[925,48388,48389,48394,48401],{},[943,48390,48391],{"align":989},[1661,48392,48393],{},"adjustCamera",[943,48395,48396,48397,48400],{"align":989},"Optionally wraps and thereby centers the models using ",[610,48398,48399],{},"\u003CBounds>",", can also be a camera offset",[943,48402,48403],{"align":989},[610,48404,953],{},[925,48406,48407,48411,48414],{},[943,48408,48409],{"align":989},[1661,48410,47937],{},[943,48412,48413],{"align":989},"The default environment",[943,48415,48416],{"align":989},[610,48417,48418],{},"'city'",[925,48420,48421,48425,48431],{},[943,48422,48423],{"align":989},[1661,48424,2057],{},[943,48426,48427,48428,48430],{"align":989},"Lighting intensity, ",[610,48429,957],{}," removes lights",[943,48432,48433],{"align":989},[610,48434,1938],{},[925,48436,48437,48442,48445],{},[943,48438,48439],{"align":989},[1661,48440,48441],{},"align",[943,48443,48444],{"align":989},"To adjust alignment",[943,48446,48447],{"align":989},[610,48448,1171],{},[4043,48450,48452],{"id":48451},"stageshadows-type","StageShadows Type",[606,48454,48455],{},"When using custom shadow configuration, you can pass an object with the following properties:",[919,48457,48458,48468],{},[922,48459,48460],{},[925,48461,48462,48464,48466],{},[928,48463,930],{"align":989},[928,48465,933],{"align":989},[928,48467,936],{"align":989},[938,48469,48470,48484,48497,48511,48525],{},[925,48471,48472,48476,48482],{},[943,48473,48474],{"align":989},[1661,48475,5509],{},[943,48477,48478,48479],{"align":989},"Shadow type: ",[610,48480,48481],{},"'contact' | 'accumulative'",[943,48483,33811],{"align":989},[925,48485,48486,48490,48493],{},[943,48487,48488],{"align":989},[1661,48489,38504],{},[943,48491,48492],{"align":989},"Shadow plane offset",[943,48494,48495],{"align":989},[610,48496,957],{},[925,48498,48499,48503,48506],{},[943,48500,48501],{"align":989},[1661,48502,41088],{},[943,48504,48505],{"align":989},"Shadow bias",[943,48507,48508],{"align":989},[610,48509,48510],{},"-0.0001",[925,48512,48513,48518,48521],{},[943,48514,48515],{"align":989},[1661,48516,48517],{},"normalBias",[943,48519,48520],{"align":989},"Shadow normal bias",[943,48522,48523],{"align":989},[610,48524,957],{},[925,48526,48527,48531,48534],{},[943,48528,48529],{"align":989},[1661,48530,14793],{},[943,48532,48533],{"align":989},"Shadow map size",[943,48535,48536],{"align":989},[610,48537,37560],{},[606,48539,48540,48541,1664,48544,1680,48547,1138],{},"Additionally inherits all props from ",[610,48542,48543],{},"AccumulativeShadowsProps",[610,48545,48546],{},"RandomizedLightsProps",[610,48548,48549],{},"ContactShadowsProps",[1319,48551,48552],{},"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":568,"searchDepth":569,"depth":570,"links":48554},[48555,48556],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914,"children":48557},[48558],{"id":48451,"depth":700,"text":48452},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":403,"description":48559},"hSS8yTJaUJKvnoLWg1iE6UZbvoW8pB9UqSUcFjHv5sQ",{"id":48564,"title":407,"body":48565,"description":48838,"extension":583,"links":584,"meta":48839,"navigation":586,"path":408,"seo":48840,"stem":409,"__hash__":48841},"docs/2.api/8.staging/stars.md",{"type":493,"value":48566,"toc":48834},[48567,48572,48578,48580,48585,48728,48730,48832],[600,48568,48569],{},[48570,48571],"staging-stars",{},[606,48573,48574,48577],{},[610,48575,48576],{},"\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",[496,48579,15],{"id":616},[606,48581,44440,48582,48584],{},[610,48583,48576],{}," component without passing any props,",[618,48586,48589],{"className":620,"code":48587,"highlights":48588,"language":625,"meta":568,"style":568},"\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",[700,782],[610,48590,48591,48611,48629,48649,48657,48661,48669,48677,48695,48704,48712,48720],{"__ignoreMap":568},[629,48592,48593,48595,48597,48599,48601,48603,48605,48607,48609],{"class":631,"line":569},[629,48594,635],{"class":634},[629,48596,639],{"class":638},[629,48598,643],{"class":642},[629,48600,646],{"class":642},[629,48602,649],{"class":634},[629,48604,652],{"class":634},[629,48606,656],{"class":655},[629,48608,652],{"class":634},[629,48610,661],{"class":634},[629,48612,48613,48615,48617,48619,48621,48623,48625,48627],{"class":631,"line":570},[629,48614,669],{"class":668},[629,48616,672],{"class":634},[629,48618,707],{"class":675},[629,48620,685],{"class":634},[629,48622,688],{"class":668},[629,48624,691],{"class":634},[629,48626,716],{"class":655},[629,48628,697],{"class":634},[629,48630,48632,48634,48636,48639,48641,48643,48645,48647],{"class":48631,"line":700},[631,665],[629,48633,669],{"class":668},[629,48635,672],{"class":634},[629,48637,48638],{"class":675}," Stars",[629,48640,685],{"class":634},[629,48642,688],{"class":668},[629,48644,691],{"class":634},[629,48646,694],{"class":655},[629,48648,697],{"class":634},[629,48650,48651,48653,48655],{"class":631,"line":721},[629,48652,724],{"class":634},[629,48654,639],{"class":638},[629,48656,661],{"class":634},[629,48658,48659],{"class":631,"line":731},[629,48660,734],{"emptyLinePlaceholder":586},[629,48662,48663,48665,48667],{"class":631,"line":737},[629,48664,635],{"class":634},[629,48666,742],{"class":638},[629,48668,661],{"class":634},[629,48670,48671,48673,48675],{"class":631,"line":747},[629,48672,750],{"class":634},[629,48674,753],{"class":638},[629,48676,661],{"class":634},[629,48678,48679,48681,48683,48685,48687,48689,48691,48693],{"class":631,"line":770},[629,48680,773],{"class":634},[629,48682,776],{"class":638},[629,48684,1477],{"class":642},[629,48686,649],{"class":634},[629,48688,652],{"class":634},[629,48690,40711],{"class":655},[629,48692,652],{"class":634},[629,48694,779],{"class":634},[629,48696,48698,48700,48702],{"class":48697,"line":782},[631,665],[629,48699,773],{"class":634},[629,48701,407],{"class":638},[629,48703,779],{"class":634},[629,48705,48706,48708,48710],{"class":631,"line":792},[629,48707,773],{"class":634},[629,48709,8448],{"class":638},[629,48711,779],{"class":634},[629,48713,48714,48716,48718],{"class":631,"line":797},[629,48715,897],{"class":634},[629,48717,753],{"class":638},[629,48719,661],{"class":634},[629,48721,48722,48724,48726],{"class":631,"line":819},[629,48723,724],{"class":634},[629,48725,742],{"class":638},[629,48727,661],{"class":634},[496,48729,914],{"id":913},[919,48731,48732,48742],{},[922,48733,48734],{},[925,48735,48736,48738,48740],{},[928,48737,930],{"align":989},[928,48739,933],{"align":989},[928,48741,936],{},[938,48743,48744,48755,48766,48777,48788,48799,48810,48821],{},[925,48745,48746,48750,48753],{},[943,48747,48748],{"align":989},[1661,48749,14793],{},[943,48751,48752],{"align":989},"The size of the stars",[943,48754,2155],{},[925,48756,48757,48761,48764],{},[943,48758,48759],{"align":989},[1661,48760,45366],{},[943,48762,48763],{"align":989},"keep the same size regardless distance.",[943,48765,953],{},[925,48767,48768,48772,48775],{},[943,48769,48770],{"align":989},[1661,48771,9684],{},[943,48773,48774],{"align":989},"show transparency on the stars texture",[943,48776,953],{},[925,48778,48779,48783,48786],{},[943,48780,48781],{"align":989},[1661,48782,37511],{},[943,48784,48785],{"align":989},"enables the WebGL to know when not to render the pixeltext.",[943,48787,1878],{},[925,48789,48790,48794,48797],{},[943,48791,48792],{"align":989},[1661,48793,45274],{},[943,48795,48796],{"align":989},"texture of the stars",[943,48798,3648],{},[925,48800,48801,48805,48808],{},[943,48802,48803],{"align":989},[1661,48804,10071],{},[943,48806,48807],{"align":989},"number of stars",[943,48809,45314],{},[925,48811,48812,48816,48819],{},[943,48813,48814],{"align":989},[1661,48815,11146],{},[943,48817,48818],{"align":989},"depth of star's shape",[943,48820,9437],{},[925,48822,48823,48827,48830],{},[943,48824,48825],{"align":989},[1661,48826,41034],{},[943,48828,48829],{"align":989},"Radius of star's shape",[943,48831,30696],{},[1319,48833,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":48835},[48836,48837],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":407,"description":48838},"nf8ELCqPC9wunPJnkUB5dskxDLHX1_sPobCeok4_v9w",[48843,49783,50183,51272,51647,57187,57789,58579,59863,61036],{"id":48844,"title":417,"body":48845,"description":49779,"extension":583,"links":584,"meta":49780,"navigation":586,"path":418,"seo":49781,"stem":419,"__hash__":49782},"docs/2.api/9.objects/animated-sprite.md",{"type":493,"value":48846,"toc":49761},[48847,48852,48867,48875,48877,49067,49077,49081,49087,49101,49110,49114,49121,49140,49144,49152,49156,49181,49183,49510,49512,49580,49583,49589,49593,49596,49601,49604,49616,49631,49633,49636,49673,49676,49688,49692,49700,49710,49716,49719,49749,49752,49759],[600,48848,48849],{},[48850,48851],"objects-animated-sprite",{},[606,48853,48854,48857,48858,48863,48864,48866],{},[610,48855,48856],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1132,48859,48862],{"href":48860,"rel":48861},"https://en.wikipedia.org/wiki/Texture_atlas",[1136],"texture atlas",". A typical ",[610,48865,48856],{}," will use:",[2205,48868,48869,48872],{},[2208,48870,48871],{},"An image containing multiple sprites",[2208,48873,48874],{},"A JSON atlas containing the individual sprite coordinates in the image",[496,48876,15],{"id":616},[618,48878,48881],{"className":620,"code":48879,"highlights":48880,"language":625,"meta":568,"style":568},"\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",[570,792,797,819,623,842],[610,48882,48883,48903,48923,48927,48949,48957,48961,48969,48977,48985,48993,49008,49023,49038,49043,49051,49059],{"__ignoreMap":568},[629,48884,48885,48887,48889,48891,48893,48895,48897,48899,48901],{"class":631,"line":569},[629,48886,635],{"class":634},[629,48888,639],{"class":638},[629,48890,643],{"class":642},[629,48892,646],{"class":642},[629,48894,649],{"class":634},[629,48896,652],{"class":634},[629,48898,656],{"class":655},[629,48900,652],{"class":634},[629,48902,661],{"class":634},[629,48904,48906,48908,48910,48913,48915,48917,48919,48921],{"class":48905,"line":570},[631,665],[629,48907,669],{"class":668},[629,48909,672],{"class":634},[629,48911,48912],{"class":675}," AnimatedSprite",[629,48914,685],{"class":634},[629,48916,688],{"class":668},[629,48918,691],{"class":634},[629,48920,694],{"class":655},[629,48922,697],{"class":634},[629,48924,48925],{"class":631,"line":700},[629,48926,734],{"emptyLinePlaceholder":586},[629,48928,48929,48931,48934,48936,48938,48940,48942,48945,48947],{"class":631,"line":721},[629,48930,2407],{"class":642},[629,48932,48933],{"class":675}," currentAnimation ",[629,48935,649],{"class":634},[629,48937,3864],{"class":2426},[629,48939,2429],{"class":675},[629,48941,2432],{"class":634},[629,48943,48944],{"class":655},"cientosIdle",[629,48946,2432],{"class":634},[629,48948,2440],{"class":675},[629,48950,48951,48953,48955],{"class":631,"line":731},[629,48952,724],{"class":634},[629,48954,639],{"class":638},[629,48956,661],{"class":634},[629,48958,48959],{"class":631,"line":737},[629,48960,734],{"emptyLinePlaceholder":586},[629,48962,48963,48965,48967],{"class":631,"line":747},[629,48964,635],{"class":634},[629,48966,742],{"class":638},[629,48968,661],{"class":634},[629,48970,48971,48973,48975],{"class":631,"line":770},[629,48972,750],{"class":634},[629,48974,753],{"class":638},[629,48976,661],{"class":634},[629,48978,48979,48981,48983],{"class":631,"line":782},[629,48980,773],{"class":634},[629,48982,19723],{"class":638},[629,48984,661],{"class":634},[629,48986,48988,48990],{"class":48987,"line":792},[631,665],[629,48989,845],{"class":634},[629,48991,48992],{"class":638},"AnimatedSprite\n",[629,48994,48996,48999,49001,49003,49006],{"class":48995,"line":797},[631,665],[629,48997,48998],{"class":642}," image",[629,49000,649],{"class":634},[629,49002,652],{"class":634},[629,49004,49005],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[629,49007,3123],{"class":634},[629,49009,49011,49014,49016,49018,49021],{"class":49010,"line":819},[631,665],[629,49012,49013],{"class":642}," atlas",[629,49015,649],{"class":634},[629,49017,652],{"class":634},[629,49019,49020],{"class":655},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[629,49022,3123],{"class":634},[629,49024,49026,49029,49031,49033,49036],{"class":49025,"line":623},[631,665],[629,49027,49028],{"class":642}," :animation",[629,49030,649],{"class":634},[629,49032,652],{"class":634},[629,49034,49035],{"class":655},"currentAnimation",[629,49037,3123],{"class":634},[629,49039,49041],{"class":49040,"line":842},[631,665],[629,49042,8025],{"class":634},[629,49044,49045,49047,49049],{"class":631,"line":853},[629,49046,887],{"class":634},[629,49048,19723],{"class":638},[629,49050,661],{"class":634},[629,49052,49053,49055,49057],{"class":631,"line":864},[629,49054,897],{"class":634},[629,49056,753],{"class":638},[629,49058,661],{"class":634},[629,49060,49061,49063,49065],{"class":631,"line":874},[629,49062,724],{"class":634},[629,49064,742],{"class":638},[629,49066,661],{"class":634},[3191,49068,49069],{},[606,49070,49071,49073,49074,1138],{},[610,49072,48856],{}," loads resources asynchronously, so it must be wrapped in a ",[610,49075,49076],{},"\u003CSuspense />",[496,49078,49080],{"id":49079},"compiling-an-atlas","Compiling an atlas",[606,49082,49083,49084,49086],{},"In typical usage, ",[610,49085,48856],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2205,49088,49089,49095],{},[2208,49090,49091],{},[1132,49092,49094],{"href":49005,"rel":49093},[1136],"example compiled texture",[2208,49096,49097],{},[1132,49098,49100],{"href":49020,"rel":49099},[1136],"example JSON atlas",[606,49102,49103,49104,49109],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1132,49105,49108],{"href":49106,"rel":49107},"https://www.codeandweb.com/texturepacker",[1136],"TexturePacker"," useful.",[496,49111,49113],{"id":49112},"without-an-atlas","Without an atlas",[606,49115,49116,49117,49120],{},"There may be cases where you don't want to supply an atlas to the ",[610,49118,49119],{},"atlas"," prop. To do so:",[2205,49122,49123,49126,49129,49132],{},[2208,49124,49125],{},"Compile your source images into a single image texture.",[2208,49127,49128],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2208,49130,49131],{},"Ensure no extra padding has been added to the compiled image texture.",[2208,49133,49134,49135,49137,49138,1138],{},"Set the ",[610,49136,49119],{}," prop to number of columns, number of rows as ",[610,49139,26915],{},[496,49141,49143],{"id":49142},"spritesheets-in-the-wild","Spritesheets in the wild",[3191,49145,49146],{},[606,49147,49148,49149,49151],{},"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 ",[610,49150,48856],{},". In many cases, it's advisable to recompile the spritesheet.",[4043,49153,49155],{"id":49154},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2205,49157,49158,49161,49164,49167,49178],{},[2208,49159,49160],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2208,49162,49163],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[2208,49165,49166],{},"Export layers as individual images.",[2208,49168,49169,49170,49172,3186,49175,49177],{},"Name the individual images according to the following pattern: ",[7547,49171],{},[610,49173,49174],{},"[animation name][frame number].[extension]",[7547,49176],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2208,49179,49180],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[496,49182,914],{"id":913},[919,49184,49185,49195],{},[922,49186,49187],{},[925,49188,49189,49191,49193],{},[928,49190,8081],{"align":989},[928,49192,933],{"align":989},[928,49194,936],{"align":989},[938,49196,49197,49209,49247,49307,49321,49334,49358,49372,49386,49400,49414,49433,49456,49474,49492],{},[925,49198,49199,49202,49207],{},[943,49200,49201],{"align":989},"image",[943,49203,49204,49206],{"align":989},[610,49205,3564],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[943,49208],{"align":989},[925,49210,49211,49213,49245],{},[943,49212,49119],{"align":989},[943,49214,49215,49218,49219,49242,49244],{"align":989},[610,49216,49217],{},"string | Atlasish"," – ",[2205,49220,49221,49226,49231,49236],{},[2208,49222,950,49223,49225],{},[610,49224,3564],{},", the URL of the JSON atlas.",[2208,49227,950,49228,49230],{},[610,49229,5344],{},", the number of columns in the texture.",[2208,49232,950,49233,49235],{},[610,49234,26915],{},", the number of columns/rows in the texture.",[2208,49237,950,49238,49241],{},[610,49239,49240],{},"AtlasData",", the atlas as a JS object.",[7547,49243],{},"This prop is not reactive.",[943,49246],{"align":989},[925,49248,49249,49252,49305],{},[943,49250,49251],{"align":989},"definitions",[943,49253,49254,49257,49258,49260,49261,49263,49265,49266,49268,49270,49271],{"align":989},[610,49255,49256],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[610,49259,49251],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7547,49262],{},[7547,49264],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7547,49267],{},[7547,49269],{},"Here is how various definition strings convert to arrays of frames for playback:",[2205,49272,49273,49280,49287,49293,49299],{},[2208,49274,49275,49276,49279],{},"\"0,2,1\" - ",[629,49277,49278],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2208,49281,49282,49283,49286],{},"\"2(10)\" - ",[629,49284,49285],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2208,49288,49289,49290],{},"\"1-4\" - ",[629,49291,49292],{},"1,2,3,4",[2208,49294,49295,49296],{},"\"10-5(2)\" - ",[629,49297,49298],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2208,49300,49301,49302],{},"\"1-4(3),10(2)\" - ",[629,49303,49304],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[943,49306],{"align":989},[925,49308,49309,49312,49317],{},[943,49310,49311],{"align":989},"fps",[943,49313,49314,49316],{"align":989},[610,49315,5344],{}," – Desired frames per second of the animation.",[943,49318,49319],{"align":989},[610,49320,26506],{},[925,49322,49323,49325,49330],{},[943,49324,23996],{"align":989},[943,49326,49327,49329],{"align":989},[610,49328,15629],{}," – Whether or not the animation should loop.",[943,49331,49332],{"align":989},[610,49333,953],{},[925,49335,49336,49339,49354],{},[943,49337,49338],{"align":989},"animation",[943,49340,49341,49344,49345,49347,49348,49350,49351,49353],{"align":989},[610,49342,49343],{},"string | [number, number] | number"," – If ",[610,49346,3564],{},", name of the animation to play. If ",[610,49349,26915],{},", start and end frames of the animation. If ",[610,49352,5344],{},", frame number to display.",[943,49355,49356],{"align":989},[610,49357,957],{},[925,49359,49360,49363,49368],{},[943,49361,49362],{"align":989},"paused",[943,49364,49365,49367],{"align":989},[610,49366,15629],{}," – Whether the animation is paused.",[943,49369,49370],{"align":989},[610,49371,963],{},[925,49373,49374,49377,49382],{},[943,49375,49376],{"align":989},"reversed",[943,49378,49379,49381],{"align":989},[610,49380,15629],{}," – Whether to play the animation in reverse.",[943,49383,49384],{"align":989},[610,49385,963],{},[925,49387,49388,49391,49396],{},[943,49389,49390],{"align":989},"flipX",[943,49392,49393,49395],{"align":989},[610,49394,15629],{}," – Whether the sprite should be flipped, left to right.",[943,49397,49398],{"align":989},[610,49399,963],{},[925,49401,49402,49405,49410],{},[943,49403,49404],{"align":989},"resetOnEnd",[943,49406,49407,49409],{"align":989},[610,49408,15629],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[943,49411,49412],{"align":989},[610,49413,963],{},[925,49415,49416,49419,49429],{},[943,49417,49418],{"align":989},"asSprite",[943,49420,49421,49423,49424],{"align":989},[610,49422,15629],{}," – Whether to display the object as a THREE.Sprite. ",[1132,49425,49428],{"href":49426,"rel":49427},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1136],"See THREE.Sprite",[943,49430,49431],{"align":989},[610,49432,953],{},[925,49434,49435,49437,49451],{},[943,49436,27308],{"align":989},[943,49438,49439,49442,49443,49446,49447,49450],{"align":989},[610,49440,49441],{},"TresVector2"," – Anchor point of the object. A value of ",[629,49444,49445],{},"0.5, 0.5"," corresponds to the center. ",[629,49448,49449],{},"0, 0"," is left, bottom.",[943,49452,49453],{"align":989},[610,49454,49455],{},"[0.5, 0.5]",[925,49457,49458,49460,49470],{},[943,49459,37511],{"align":989},[943,49461,49462,49464,49465],{"align":989},[610,49463,5344],{}," – Alpha test value for the material. ",[1132,49466,49469],{"href":49467,"rel":49468},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1136],"See THREE.Material.alphaTest",[943,49471,49472],{"align":989},[610,49473,11845],{},[925,49475,49476,49478,49488],{},[943,49477,46090],{"align":989},[943,49479,49480,49482,49483],{"align":989},[610,49481,15629],{}," – Depth test value for the material. ",[1132,49484,49487],{"href":49485,"rel":49486},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1136],"See THREE.Material.depthTest",[943,49489,49490],{"align":989},[610,49491,953],{},[925,49493,49494,49496,49506],{},[943,49495,9179],{"align":989},[943,49497,49498,49500,49501],{"align":989},[610,49499,15629],{}," – Depth write value for the material. ",[1132,49502,49505],{"href":49503,"rel":49504},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1136],"See THREE.Material.depthWrite",[943,49507,49508],{"align":989},[610,49509,953],{},[496,49511,12342],{"id":12341},[919,49513,49514,49525],{},[922,49515,49516],{},[925,49517,49518,49520,49522],{},[928,49519,5751],{},[928,49521,933],{},[928,49523,49524],{},"Argument",[938,49526,49527,49542,49562],{},[925,49528,49529,49534,49537],{},[943,49530,49531],{},[610,49532,49533],{},"frame",[943,49535,49536],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[943,49538,49539,49541],{},[610,49540,3564],{}," – Name of the newly displayed frame",[925,49543,49544,49548,49557],{},[943,49545,49546],{},[610,49547,12386],{},[943,49549,49550,49551,49554,49555],{},"Emitted when the animation ends – ",[610,49552,49553],{},"props.loop"," must be set to ",[610,49556,963],{},[943,49558,49559,49561],{},[610,49560,3564],{}," – Name of the ending frame",[925,49563,49564,49568,49575],{},[943,49565,49566],{},[610,49567,23996],{},[943,49569,49570,49571,49554,49573],{},"Emitted when the animation loops – ",[610,49572,49553],{},[610,49574,953],{},[943,49576,49577,49579],{},[610,49578,3564],{}," – Name of the frame at the end of the loop",[496,49581,49582],{"id":49338},"Animation",[606,49584,2768,49585,49588],{},[610,49586,49587],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4043,49590,49592],{"id":49591},"using-named-animations-as-animation","Using named animations as animation",[606,49594,49595],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[606,49597,49598,49600],{},[610,49599,48856],{}," uses those filenames to automatically group images into animations.",[606,49602,49603],{},"Use either of the following naming conventions for your source images ...",[2205,49605,49606,49611],{},[2208,49607,49608],{},[610,49609,49610],{},"[animation name][frame number].[file_extension]",[2208,49612,49613],{},[610,49614,49615],{},"[animation name]_[frame number].[file_extension]",[606,49617,49618,49619,49621,49622,49625,49626,49628,49629,39320],{},"... then ",[610,49620,48856],{}," will automatically make all ",[610,49623,49624],{},"[animation name]"," available for playback. Just pass ",[610,49627,49624],{}," to the component's ",[610,49630,49587],{},[4043,49632,39426],{"id":39425},[606,49634,49635],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[919,49637,49638,49648],{},[922,49639,49640],{},[925,49641,49642,49645],{},[928,49643,49644],{},"Filenames",[928,49646,49647],{},"Animation name",[938,49649,49650,49657,49665],{},[925,49651,49652,49655],{},[943,49653,49654],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[943,49656,48944],{},[925,49658,49659,49662],{},[943,49660,49661],{},"cientosIdleToWalkTransition0000.png",[943,49663,49664],{},"cientosIdleToWalkTransition",[925,49666,49667,49670],{},[943,49668,49669],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[943,49671,49672],{},"cientosWalk",[496,49674,49675],{"id":49251},"Definitions",[606,49677,49678,49679,49682,49683,49687],{},"You can supply an object to the ",[610,49680,49681],{},":definitions"," prop. Any ",[1132,49684,49686],{"href":49685},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4043,49689,49691],{"id":49690},"demo","Demo",[606,49693,49694,49695,46935,49697,1138],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[610,49696,49587],{},[610,49698,49699],{},"'idle'",[606,49701,49702,49703,49705,49706,49709],{},"But below, we've added a ",[610,49704,49681],{}," prop with this value for the ",[610,49707,49708],{},"idle"," key:",[618,49711,49714],{"className":49712,"code":49713,"language":28401},[28399],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[610,49715,49713],{"__ignoreMap":568},[606,49717,49718],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2205,49720,49721,49730,49743],{},[2208,49722,49723,49726,49727,49729],{},[610,49724,49725],{},"0-5"," – Play all six images (",[610,49728,49725],{},") of the animation normally.",[2208,49731,49732,49735,49736,49739,49740,5566],{},[610,49733,49734],{},"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 (",[610,49737,49738],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[610,49741,49742],{},"3(20)",[2208,49744,49745,49748],{},[610,49746,49747],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[496,49750,49751],{"id":27308},"Center",[606,49753,49754,49755,49758],{},"In addition to being the sprite's anchor point, the ",[610,49756,49757],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1319,49760,24443],{},{"title":568,"searchDepth":569,"depth":570,"links":49762},[49763,49764,49765,49766,49769,49770,49771,49775,49778],{"id":616,"depth":570,"text":15},{"id":49079,"depth":570,"text":49080},{"id":49112,"depth":570,"text":49113},{"id":49142,"depth":570,"text":49143,"children":49767},[49768],{"id":49154,"depth":700,"text":49155},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},{"id":49338,"depth":570,"text":49582,"children":49772},[49773,49774],{"id":49591,"depth":700,"text":49592},{"id":39425,"depth":700,"text":39426},{"id":49251,"depth":570,"text":49675,"children":49776},[49777],{"id":49690,"depth":700,"text":49691},{"id":27308,"depth":570,"text":49751},"Display 2D animations defined in a texture atlas.",{},{"title":417,"description":49779},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":49784,"title":421,"body":49785,"description":50179,"extension":583,"links":584,"meta":50180,"navigation":586,"path":422,"seo":50181,"stem":423,"__hash__":50182},"docs/2.api/9.objects/cube-camera.md",{"type":493,"value":49786,"toc":50175},[49787,49792,49802,49807,49809,50076,50078,50173],[600,49788,49789],{},[49790,49791],"objects-cube-camera",{},[606,49793,49794,49797,49798,49801],{},[610,49795,49796],{},"\u003CCubeCamera />"," creates a ",[610,49799,49800],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[606,49803,49804,49806],{},[610,49805,49796],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[496,49808,15],{"id":616},[618,49810,49813],{"className":620,"code":49811,"highlights":49812,"language":625,"meta":568,"style":568},"\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",[570,792,853],[610,49814,49815,49835,49859,49867,49871,49879,49887,49905,49913,49917,49948,49956,49974,50003,50011,50020,50024,50042,50060,50068],{"__ignoreMap":568},[629,49816,49817,49819,49821,49823,49825,49827,49829,49831,49833],{"class":631,"line":569},[629,49818,635],{"class":634},[629,49820,639],{"class":638},[629,49822,643],{"class":642},[629,49824,646],{"class":642},[629,49826,649],{"class":634},[629,49828,652],{"class":634},[629,49830,656],{"class":655},[629,49832,652],{"class":634},[629,49834,661],{"class":634},[629,49836,49838,49840,49842,49845,49847,49849,49851,49853,49855,49857],{"class":49837,"line":570},[631,665],[629,49839,669],{"class":668},[629,49841,672],{"class":634},[629,49843,49844],{"class":675}," CubeCamera",[629,49846,679],{"class":634},[629,49848,682],{"class":675},[629,49850,685],{"class":634},[629,49852,688],{"class":668},[629,49854,691],{"class":634},[629,49856,694],{"class":655},[629,49858,697],{"class":634},[629,49860,49861,49863,49865],{"class":631,"line":700},[629,49862,724],{"class":634},[629,49864,639],{"class":638},[629,49866,661],{"class":634},[629,49868,49869],{"class":631,"line":721},[629,49870,734],{"emptyLinePlaceholder":586},[629,49872,49873,49875,49877],{"class":631,"line":731},[629,49874,635],{"class":634},[629,49876,742],{"class":638},[629,49878,661],{"class":634},[629,49880,49881,49883,49885],{"class":631,"line":737},[629,49882,750],{"class":634},[629,49884,753],{"class":638},[629,49886,661],{"class":634},[629,49888,49889,49891,49893,49895,49897,49899,49901,49903],{"class":631,"line":747},[629,49890,773],{"class":634},[629,49892,776],{"class":638},[629,49894,1477],{"class":642},[629,49896,649],{"class":634},[629,49898,652],{"class":634},[629,49900,7437],{"class":655},[629,49902,652],{"class":634},[629,49904,779],{"class":634},[629,49906,49907,49909,49911],{"class":631,"line":770},[629,49908,773],{"class":634},[629,49910,787],{"class":638},[629,49912,779],{"class":634},[629,49914,49915],{"class":631,"line":782},[629,49916,734],{"emptyLinePlaceholder":586},[629,49918,49920,49922,49924,49927,49929,49931,49933,49935,49938,49940,49942,49944,49946],{"class":49919,"line":792},[631,665],[629,49921,773],{"class":634},[629,49923,421],{"class":638},[629,49925,49926],{"class":642}," :resolution",[629,49928,649],{"class":634},[629,49930,652],{"class":634},[629,49932,26728],{"class":655},[629,49934,652],{"class":634},[629,49936,49937],{"class":642}," :frames",[629,49939,649],{"class":634},[629,49941,652],{"class":634},[629,49943,11576],{"class":655},[629,49945,652],{"class":634},[629,49947,661],{"class":634},[629,49949,49950,49952,49954],{"class":631,"line":797},[629,49951,845],{"class":634},[629,49953,848],{"class":638},[629,49955,661],{"class":634},[629,49957,49958,49960,49962,49964,49966,49968,49970,49972],{"class":631,"line":819},[629,49959,856],{"class":634},[629,49961,3950],{"class":638},[629,49963,1951],{"class":642},[629,49965,649],{"class":634},[629,49967,652],{"class":634},[629,49969,34895],{"class":655},[629,49971,652],{"class":634},[629,49973,779],{"class":634},[629,49975,49976,49978,49980,49983,49985,49987,49989,49991,49993,49995,49997,49999,50001],{"class":631,"line":623},[629,49977,856],{"class":634},[629,49979,2678],{"class":638},[629,49981,49982],{"class":642}," :metalness",[629,49984,649],{"class":634},[629,49986,652],{"class":634},[629,49988,1866],{"class":655},[629,49990,652],{"class":634},[629,49992,43738],{"class":642},[629,49994,649],{"class":634},[629,49996,652],{"class":634},[629,49998,957],{"class":655},[629,50000,652],{"class":634},[629,50002,779],{"class":634},[629,50004,50005,50007,50009],{"class":631,"line":842},[629,50006,877],{"class":634},[629,50008,848],{"class":638},[629,50010,661],{"class":634},[629,50012,50014,50016,50018],{"class":50013,"line":853},[631,665],[629,50015,887],{"class":634},[629,50017,421],{"class":638},[629,50019,661],{"class":634},[629,50021,50022],{"class":631,"line":864},[629,50023,734],{"emptyLinePlaceholder":586},[629,50025,50026,50028,50030,50032,50034,50036,50038,50040],{"class":631,"line":874},[629,50027,773],{"class":634},[629,50029,8448],{"class":638},[629,50031,1859],{"class":642},[629,50033,649],{"class":634},[629,50035,652],{"class":634},[629,50037,1938],{"class":655},[629,50039,652],{"class":634},[629,50041,779],{"class":634},[629,50043,50044,50046,50048,50050,50052,50054,50056,50058],{"class":631,"line":624},[629,50045,773],{"class":634},[629,50047,8467],{"class":638},[629,50049,1477],{"class":642},[629,50051,649],{"class":634},[629,50053,652],{"class":634},[629,50055,11424],{"class":655},[629,50057,652],{"class":634},[629,50059,779],{"class":634},[629,50061,50062,50064,50066],{"class":631,"line":894},[629,50063,897],{"class":634},[629,50065,753],{"class":638},[629,50067,661],{"class":634},[629,50069,50070,50072,50074],{"class":631,"line":904},[629,50071,724],{"class":634},[629,50073,742],{"class":638},[629,50075,661],{"class":634},[496,50077,914],{"id":913},[919,50079,50080,50090],{},[922,50081,50082],{},[925,50083,50084,50086,50088],{},[928,50085,930],{"align":989},[928,50087,933],{"align":989},[928,50089,936],{},[938,50091,50092,50111,50125,50138,50151,50162],{},[925,50093,50094,50098,50107],{},[943,50095,50096],{"align":989},[610,50097,37429],{},[943,50099,50100,50101,50103,50104,50106],{"align":989},"Number of frames to render. Set to ",[610,50102,1866],{}," for a static scene. ",[610,50105,11576],{}," to update continuously.",[943,50108,50109],{},[610,50110,11576],{},[925,50112,50113,50117,50120],{},[943,50114,50115],{"align":989},[610,50116,26047],{},[943,50118,50119],{"align":989},"Resolution of the FBO",[943,50121,50122],{},[610,50123,50124],{},"255",[925,50126,50127,50131,50134],{},[943,50128,50129],{"align":989},[610,50130,41129],{},[943,50132,50133],{"align":989},"Camera near",[943,50135,50136],{},[610,50137,2155],{},[925,50139,50140,50144,50147],{},[943,50141,50142],{"align":989},[610,50143,38954],{},[943,50145,50146],{"align":989},"Camera far",[943,50148,50149],{},[610,50150,42548],{},[925,50152,50153,50157,50160],{},[943,50154,50155],{"align":989},[610,50156,27734],{},[943,50158,50159],{"align":989},"Custom environment map that is temporarily set as the scene's background",[943,50161],{},[925,50163,50164,50168,50171],{},[943,50165,50166],{"align":989},[610,50167,38524],{},[943,50169,50170],{"align":989},"Custom fog that is temporarily set as the scene's fog",[943,50172],{},[1319,50174,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":50176},[50177,50178],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Render environment maps for reflective objects.",{},{"title":421,"description":50179},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":50184,"title":425,"body":50185,"description":51268,"extension":583,"links":584,"meta":51269,"navigation":586,"path":426,"seo":51270,"stem":427,"__hash__":51271},"docs/2.api/9.objects/fbo.md",{"type":493,"value":50186,"toc":51260},[50187,50192,50195,50202,50204,50797,50799,50913,50917,50919,50925,50932,50935,51171,51173,51257],[2287,50188,50189],{},[50190,50191],"objects-fbo",{},[606,50193,50194],{},"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.",[606,50196,50197,50198,50201],{},"Cientos provides an ",[610,50199,50200],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[496,50203,15],{"id":616},[618,50205,50208],{"className":620,"code":50206,"highlights":50207,"language":625,"meta":568,"style":568},"\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",[570,2646,2655,2664,2673],[610,50209,50210,50230,50254,50274,50292,50310,50314,50347,50373,50377,50401,50425,50451,50476,50480,50488,50492,50500,50530,50548,50556,50560,50578,50586,50600,50614,50629,50633,50641,50659,50663,50669,50682,50695,50699,50707,50711,50717,50729,50742,50746,50765,50773,50781,50789],{"__ignoreMap":568},[629,50211,50212,50214,50216,50218,50220,50222,50224,50226,50228],{"class":631,"line":569},[629,50213,635],{"class":634},[629,50215,639],{"class":638},[629,50217,643],{"class":642},[629,50219,646],{"class":642},[629,50221,649],{"class":634},[629,50223,652],{"class":634},[629,50225,656],{"class":655},[629,50227,652],{"class":634},[629,50229,661],{"class":634},[629,50231,50233,50235,50237,50240,50242,50244,50246,50248,50250,50252],{"class":50232,"line":570},[631,665],[629,50234,669],{"class":668},[629,50236,672],{"class":634},[629,50238,50239],{"class":675}," Fbo",[629,50241,679],{"class":634},[629,50243,682],{"class":675},[629,50245,685],{"class":634},[629,50247,688],{"class":668},[629,50249,691],{"class":634},[629,50251,694],{"class":655},[629,50253,697],{"class":634},[629,50255,50256,50258,50260,50262,50264,50266,50268,50270,50272],{"class":631,"line":700},[629,50257,669],{"class":668},[629,50259,3434],{"class":668},[629,50261,672],{"class":634},[629,50263,17806],{"class":675},[629,50265,685],{"class":634},[629,50267,688],{"class":668},[629,50269,691],{"class":634},[629,50271,716],{"class":655},[629,50273,697],{"class":634},[629,50275,50276,50278,50280,50282,50284,50286,50288,50290],{"class":631,"line":721},[629,50277,669],{"class":668},[629,50279,672],{"class":634},[629,50281,707],{"class":675},[629,50283,685],{"class":634},[629,50285,688],{"class":668},[629,50287,691],{"class":634},[629,50289,716],{"class":655},[629,50291,697],{"class":634},[629,50293,50294,50296,50298,50300,50302,50304,50306,50308],{"class":631,"line":731},[629,50295,669],{"class":668},[629,50297,672],{"class":634},[629,50299,3490],{"class":675},[629,50301,685],{"class":634},[629,50303,688],{"class":668},[629,50305,691],{"class":634},[629,50307,625],{"class":655},[629,50309,697],{"class":634},[629,50311,50312],{"class":631,"line":737},[629,50313,734],{"emptyLinePlaceholder":586},[629,50315,50316,50318,50321,50323,50325,50327,50329,50331,50333,50335,50337,50339,50341,50343,50345],{"class":631,"line":747},[629,50317,2407],{"class":642},[629,50319,50320],{"class":675}," fboRef ",[629,50322,649],{"class":634},[629,50324,3490],{"class":2426},[629,50326,635],{"class":634},[629,50328,16471],{"class":1192},[629,50330,16474],{"class":634},[629,50332,50239],{"class":675},[629,50334,3643],{"class":634},[629,50336,3637],{"class":634},[629,50338,3640],{"class":1192},[629,50340,3643],{"class":634},[629,50342,2429],{"class":675},[629,50344,3648],{"class":634},[629,50346,2440],{"class":675},[629,50348,50349,50351,50353,50355,50357,50359,50361,50363,50365,50367,50369,50371],{"class":631,"line":770},[629,50350,2407],{"class":642},[629,50352,10223],{"class":675},[629,50354,649],{"class":634},[629,50356,3490],{"class":2426},[629,50358,635],{"class":634},[629,50360,17853],{"class":1192},[629,50362,3637],{"class":634},[629,50364,3640],{"class":1192},[629,50366,3643],{"class":634},[629,50368,2429],{"class":675},[629,50370,3648],{"class":634},[629,50372,2440],{"class":675},[629,50374,50375],{"class":631,"line":782},[629,50376,734],{"emptyLinePlaceholder":586},[629,50378,50379,50381,50383,50385,50387,50389,50391,50393,50395,50397,50399],{"class":631,"line":792},[629,50380,37752],{"class":642},[629,50382,37755],{"class":2426},[629,50384,37758],{"class":634},[629,50386,37761],{"class":6830},[629,50388,37764],{"class":634},[629,50390,672],{"class":634},[629,50392,37761],{"class":638},[629,50394,1210],{"class":634},[629,50396,5349],{"class":1192},[629,50398,37775],{"class":634},[629,50400,1196],{"class":634},[629,50402,50403,50405,50407,50410,50412,50414,50416,50418,50420,50423],{"class":631,"line":797},[629,50404,19324],{"class":668},[629,50406,3066],{"class":638},[629,50408,50409],{"class":634},"!",[629,50411,10389],{"class":675},[629,50413,1138],{"class":634},[629,50415,3677],{"class":675},[629,50417,4726],{"class":638},[629,50419,39653],{"class":634},[629,50421,50422],{"class":668}," return",[629,50424,15865],{"class":634},[629,50426,50427,50430,50432,50434,50436,50438,50440,50442,50444,50446,50448],{"class":631,"line":819},[629,50428,50429],{"class":675}," torusRef",[629,50431,1138],{"class":634},[629,50433,3677],{"class":675},[629,50435,1138],{"class":634},[629,50437,5619],{"class":675},[629,50439,1138],{"class":634},[629,50441,7832],{"class":675},[629,50443,2423],{"class":634},[629,50445,37761],{"class":675},[629,50447,37819],{"class":634},[629,50449,50450],{"class":2493}," 0.745\n",[629,50452,50453,50455,50457,50459,50461,50463,50465,50467,50469,50471,50473],{"class":631,"line":623},[629,50454,50429],{"class":675},[629,50456,1138],{"class":634},[629,50458,3677],{"class":675},[629,50460,1138],{"class":634},[629,50462,5619],{"class":675},[629,50464,1138],{"class":634},[629,50466,37812],{"class":675},[629,50468,2423],{"class":634},[629,50470,37761],{"class":675},[629,50472,37819],{"class":634},[629,50474,50475],{"class":2493}," 0.361\n",[629,50477,50478],{"class":631,"line":842},[629,50479,1317],{"class":634},[629,50481,50482,50484,50486],{"class":631,"line":853},[629,50483,724],{"class":634},[629,50485,639],{"class":638},[629,50487,661],{"class":634},[629,50489,50490],{"class":631,"line":864},[629,50491,734],{"emptyLinePlaceholder":586},[629,50493,50494,50496,50498],{"class":631,"line":874},[629,50495,635],{"class":634},[629,50497,742],{"class":638},[629,50499,661],{"class":634},[629,50501,50502,50504,50506,50508,50510,50512,50515,50517,50520,50522,50524,50526,50528],{"class":631,"line":624},[629,50503,750],{"class":634},[629,50505,753],{"class":638},[629,50507,8352],{"class":642},[629,50509,649],{"class":634},[629,50511,652],{"class":634},[629,50513,50514],{"class":655},"0x222",[629,50516,652],{"class":634},[629,50518,50519],{"class":642}," @loop",[629,50521,649],{"class":634},[629,50523,652],{"class":634},[629,50525,37911],{"class":655},[629,50527,652],{"class":634},[629,50529,661],{"class":634},[629,50531,50532,50534,50536,50538,50540,50542,50544,50546],{"class":631,"line":894},[629,50533,773],{"class":634},[629,50535,776],{"class":638},[629,50537,1477],{"class":642},[629,50539,649],{"class":634},[629,50541,652],{"class":634},[629,50543,9871],{"class":655},[629,50545,652],{"class":634},[629,50547,779],{"class":634},[629,50549,50550,50552,50554],{"class":631,"line":904},[629,50551,773],{"class":634},[629,50553,787],{"class":638},[629,50555,779],{"class":634},[629,50557,50558],{"class":631,"line":2617},[629,50559,734],{"emptyLinePlaceholder":586},[629,50561,50562,50564,50566,50568,50570,50572,50574,50576],{"class":631,"line":2626},[629,50563,773],{"class":634},[629,50565,8041],{"class":638},[629,50567,1951],{"class":642},[629,50569,649],{"class":634},[629,50571,652],{"class":634},[629,50573,10023],{"class":655},[629,50575,652],{"class":634},[629,50577,779],{"class":634},[629,50579,50581,50583],{"class":50580,"line":2646},[631,665],[629,50582,773],{"class":634},[629,50584,50585],{"class":638},"Fbo\n",[629,50587,50589,50591,50593,50595,50598],{"class":50588,"line":2655},[631,665],[629,50590,10425],{"class":642},[629,50592,649],{"class":634},[629,50594,652],{"class":634},[629,50596,50597],{"class":655},"fboRef",[629,50599,3123],{"class":634},[629,50601,50603,50606,50608,50610,50612],{"class":50602,"line":2664},[631,665],[629,50604,50605],{"class":642}," :depth",[629,50607,649],{"class":634},[629,50609,652],{"class":634},[629,50611,963],{"class":655},[629,50613,3123],{"class":634},[629,50615,50617,50620,50622,50624,50627],{"class":50616,"line":2673},[631,665],[629,50618,50619],{"class":642}," :settings",[629,50621,649],{"class":634},[629,50623,652],{"class":634},[629,50625,50626],{"class":655},"{ samples: 1 }",[629,50628,3123],{"class":634},[629,50630,50631],{"class":631,"line":2695},[629,50632,15338],{"class":634},[629,50634,50635,50637,50639],{"class":631,"line":2739},[629,50636,773],{"class":634},[629,50638,848],{"class":638},[629,50640,661],{"class":634},[629,50642,50643,50645,50647,50649,50651,50653,50655,50657],{"class":631,"line":2748},[629,50644,845],{"class":634},[629,50646,859],{"class":638},[629,50648,1951],{"class":642},[629,50650,649],{"class":634},[629,50652,652],{"class":634},[629,50654,1958],{"class":655},[629,50656,652],{"class":634},[629,50658,779],{"class":634},[629,50660,50661],{"class":631,"line":2757},[629,50662,734],{"emptyLinePlaceholder":586},[629,50664,50665,50667],{"class":631,"line":3914},[629,50666,845],{"class":634},[629,50668,21287],{"class":638},[629,50670,50671,50673,50675,50677,50680],{"class":631,"line":3945},[629,50672,21305],{"class":642},[629,50674,649],{"class":634},[629,50676,652],{"class":634},[629,50678,50679],{"class":655},"0xFFFFFF",[629,50681,3123],{"class":634},[629,50683,50684,50686,50688,50690,50693],{"class":631,"line":3966},[629,50685,24366],{"class":642},[629,50687,649],{"class":634},[629,50689,652],{"class":634},[629,50691,50692],{"class":655},"fboRef?.instance?.texture ?? null",[629,50694,3123],{"class":634},[629,50696,50697],{"class":631,"line":3985},[629,50698,8025],{"class":634},[629,50700,50701,50703,50705],{"class":631,"line":4017},[629,50702,887],{"class":634},[629,50704,848],{"class":638},[629,50706,661],{"class":634},[629,50708,50709],{"class":631,"line":4026},[629,50710,734],{"emptyLinePlaceholder":586},[629,50712,50713,50715],{"class":631,"line":4035},[629,50714,773],{"class":634},[629,50716,5118],{"class":638},[629,50718,50719,50721,50723,50725,50727],{"class":631,"line":19512},[629,50720,10425],{"class":642},[629,50722,649],{"class":634},[629,50724,652],{"class":634},[629,50726,10389],{"class":655},[629,50728,3123],{"class":634},[629,50730,50731,50733,50735,50737,50740],{"class":631,"line":19527},[629,50732,15325],{"class":642},[629,50734,649],{"class":634},[629,50736,652],{"class":634},[629,50738,50739],{"class":655},"[3, 0, 0]",[629,50741,3123],{"class":634},[629,50743,50744],{"class":631,"line":19542},[629,50745,10453],{"class":634},[629,50747,50748,50750,50752,50754,50756,50758,50761,50763],{"class":631,"line":19547},[629,50749,845],{"class":634},[629,50751,9924],{"class":638},[629,50753,1951],{"class":642},[629,50755,649],{"class":634},[629,50757,652],{"class":634},[629,50759,50760],{"class":655},"[1, 0.5, 16, 100]",[629,50762,652],{"class":634},[629,50764,779],{"class":634},[629,50766,50767,50769,50771],{"class":631,"line":19554},[629,50768,845],{"class":634},[629,50770,869],{"class":638},[629,50772,779],{"class":634},[629,50774,50775,50777,50779],{"class":631,"line":19559},[629,50776,887],{"class":634},[629,50778,848],{"class":638},[629,50780,661],{"class":634},[629,50782,50783,50785,50787],{"class":631,"line":19565},[629,50784,897],{"class":634},[629,50786,753],{"class":638},[629,50788,661],{"class":634},[629,50790,50791,50793,50795],{"class":631,"line":19586},[629,50792,724],{"class":634},[629,50794,742],{"class":638},[629,50796,661],{"class":634},[496,50798,914],{"id":913},[919,50800,50801,50811],{},[922,50802,50803],{},[925,50804,50805,50807,50809],{},[928,50806,930],{"align":989},[928,50808,933],{"align":989},[928,50810,936],{},[938,50812,50813,50829,50845,50869,50895],{},[925,50814,50815,50821,50826],{},[943,50816,50817],{"align":989},[1661,50818,50819],{},[610,50820,38926],{},[943,50822,50823,50825],{"align":989},[610,50824,5344],{}," - The width of the FBO.",[943,50827,50828],{},"Width of the canvas",[925,50830,50831,50837,50842],{},[943,50832,50833],{"align":989},[1661,50834,50835],{},[610,50836,38940],{},[943,50838,50839,50841],{"align":989},[610,50840,5344],{}," - the height of the FBO",[943,50843,50844],{},"Height of the canvas",[925,50846,50847,50853,50865],{},[943,50848,50849],{"align":989},[1661,50850,50851],{},[610,50852,11146],{},[943,50854,50855,50857,50858,1138],{"align":989},[610,50856,15629],{}," - Whether or not the FBO should render the depth to a ",[1132,50859,50862],{"href":50860,"rel":50861},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1136],[610,50863,50864],{},"depthTexture",[943,50866,50867],{},[610,50868,963],{},[925,50870,50871,50878,50891],{},[943,50872,50873],{"align":989},[1661,50874,50875],{},[610,50876,50877],{},"settings",[943,50879,50880,50883,50884],{"align":989},[610,50881,50882],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1132,50885,50888,23178],{"href":50886,"rel":50887},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1136],[610,50889,50890],{},"WebGLRenderTarget",[943,50892,50893],{},[610,50894,6117],{},[925,50896,50897,50904,50909],{},[943,50898,50899],{"align":989},[1661,50900,50901],{},[610,50902,50903],{},"autoRender",[943,50905,50906,50908],{"align":989},[610,50907,15629],{}," - Whether to automatically render the FBO on the default scene.",[943,50910,50911],{},[610,50912,953],{},[496,50914,50916],{"id":50915},"usefbo","useFBO",[606,50918,50194],{},[606,50920,50921,50922,50924],{},"Cientos provides a ",[610,50923,50916],{}," composable to make it easy to use FBOs in your application.",[3191,50926,50927],{},[606,50928,2768,50929,50931],{},[610,50930,50916],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4043,50933,15],{"id":50934},"usage-1",[618,50936,50939],{"className":620,"code":50937,"highlights":50938,"language":625,"meta":568,"style":568},"\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",[570,721,731,737,747,770,782,792,797,904],[610,50940,50941,50961,50981,50985,51001,51012,51023,51034,51044,51056,51061,51068,51076,51080,51088,51096,51114,51118,51124,51137,51151,51155,51163],{"__ignoreMap":568},[629,50942,50943,50945,50947,50949,50951,50953,50955,50957,50959],{"class":631,"line":569},[629,50944,635],{"class":634},[629,50946,639],{"class":638},[629,50948,643],{"class":642},[629,50950,646],{"class":642},[629,50952,649],{"class":634},[629,50954,652],{"class":634},[629,50956,656],{"class":655},[629,50958,652],{"class":634},[629,50960,661],{"class":634},[629,50962,50964,50966,50968,50971,50973,50975,50977,50979],{"class":50963,"line":570},[631,665],[629,50965,669],{"class":668},[629,50967,672],{"class":634},[629,50969,50970],{"class":675}," useFBO",[629,50972,685],{"class":634},[629,50974,688],{"class":668},[629,50976,691],{"class":634},[629,50978,694],{"class":655},[629,50980,697],{"class":634},[629,50982,50983],{"class":631,"line":700},[629,50984,734],{"emptyLinePlaceholder":586},[629,50986,50988,50990,50993,50995,50997,50999],{"class":50987,"line":721},[631,665],[629,50989,2407],{"class":642},[629,50991,50992],{"class":675}," fboTarget ",[629,50994,649],{"class":634},[629,50996,50970],{"class":2426},[629,50998,2429],{"class":675},[629,51000,3252],{"class":634},[629,51002,51004,51006,51008,51010],{"class":51003,"line":731},[631,665],[629,51005,1251],{"class":638},[629,51007,1210],{"class":634},[629,51009,4390],{"class":4389},[629,51011,2480],{"class":634},[629,51013,51015,51017,51019,51021],{"class":51014,"line":737},[631,665],[629,51016,1232],{"class":638},[629,51018,1210],{"class":634},[629,51020,40213],{"class":2493},[629,51022,2480],{"class":634},[629,51024,51026,51028,51030,51032],{"class":51025,"line":747},[631,665],[629,51027,1242],{"class":638},[629,51029,1210],{"class":634},[629,51031,40213],{"class":2493},[629,51033,2480],{"class":634},[629,51035,51037,51040,51042],{"class":51036,"line":770},[631,665],[629,51038,51039],{"class":638}," settings",[629,51041,1210],{"class":634},[629,51043,1196],{"class":634},[629,51045,51047,51050,51052,51054],{"class":51046,"line":782},[631,665],[629,51048,51049],{"class":638}," samples",[629,51051,1210],{"class":634},[629,51053,2553],{"class":2493},[629,51055,2480],{"class":634},[629,51057,51059],{"class":51058,"line":792},[631,665],[629,51060,2589],{"class":634},[629,51062,51064,51066],{"class":51063,"line":797},[631,665],[629,51065,2420],{"class":634},[629,51067,2440],{"class":675},[629,51069,51070,51072,51074],{"class":631,"line":819},[629,51071,724],{"class":634},[629,51073,639],{"class":638},[629,51075,661],{"class":634},[629,51077,51078],{"class":631,"line":623},[629,51079,734],{"emptyLinePlaceholder":586},[629,51081,51082,51084,51086],{"class":631,"line":842},[629,51083,635],{"class":634},[629,51085,742],{"class":638},[629,51087,661],{"class":634},[629,51089,51090,51092,51094],{"class":631,"line":853},[629,51091,750],{"class":634},[629,51093,848],{"class":638},[629,51095,661],{"class":634},[629,51097,51098,51100,51102,51104,51106,51108,51110,51112],{"class":631,"line":864},[629,51099,773],{"class":634},[629,51101,859],{"class":638},[629,51103,1951],{"class":642},[629,51105,649],{"class":634},[629,51107,652],{"class":634},[629,51109,1958],{"class":655},[629,51111,652],{"class":634},[629,51113,779],{"class":634},[629,51115,51116],{"class":631,"line":874},[629,51117,734],{"emptyLinePlaceholder":586},[629,51119,51120,51122],{"class":631,"line":624},[629,51121,773],{"class":634},[629,51123,21287],{"class":638},[629,51125,51126,51129,51131,51133,51135],{"class":631,"line":894},[629,51127,51128],{"class":642}," :color",[629,51130,649],{"class":634},[629,51132,652],{"class":634},[629,51134,50679],{"class":655},[629,51136,3123],{"class":634},[629,51138,51140,51142,51144,51146,51149],{"class":51139,"line":904},[631,665],[629,51141,18893],{"class":642},[629,51143,649],{"class":634},[629,51145,652],{"class":634},[629,51147,51148],{"class":655},"fboTarget?.texture ?? null",[629,51150,3123],{"class":634},[629,51152,51153],{"class":631,"line":2617},[629,51154,15338],{"class":634},[629,51156,51157,51159,51161],{"class":631,"line":2626},[629,51158,897],{"class":634},[629,51160,848],{"class":638},[629,51162,661],{"class":634},[629,51164,51165,51167,51169],{"class":631,"line":2646},[629,51166,724],{"class":634},[629,51168,742],{"class":638},[629,51170,661],{"class":634},[4043,51172,12085],{"id":15602},[919,51174,51175,51185],{},[922,51176,51177],{},[925,51178,51179,51181,51183],{},[928,51180,930],{"align":989},[928,51182,933],{"align":989},[928,51184,936],{},[938,51186,51187,51201,51215,51236],{},[925,51188,51189,51195,51199],{},[943,51190,51191],{"align":989},[1661,51192,51193],{},[610,51194,38926],{},[943,51196,51197,50825],{"align":989},[610,51198,5344],{},[943,51200,50828],{},[925,51202,51203,51209,51213],{},[943,51204,51205],{"align":989},[1661,51206,51207],{},[610,51208,38940],{},[943,51210,51211,50841],{"align":989},[610,51212,5344],{},[943,51214,50844],{},[925,51216,51217,51223,51232],{},[943,51218,51219],{"align":989},[1661,51220,51221],{},[610,51222,11146],{},[943,51224,51225,50857,51227,1138],{"align":989},[610,51226,15629],{},[1132,51228,51230],{"href":50860,"rel":51229},[1136],[610,51231,50864],{},[943,51233,51234],{},[610,51235,963],{},[925,51237,51238,51244,51253],{},[943,51239,51240],{"align":989},[1661,51241,51242],{},[610,51243,50877],{},[943,51245,51246,50883,51248],{"align":989},[610,51247,50882],{},[1132,51249,51251,23178],{"href":50886,"rel":51250},[1136],[610,51252,50890],{},[943,51254,51255],{},[610,51256,6117],{},[1319,51258,51259],{},"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":568,"searchDepth":569,"depth":570,"links":51261},[51262,51263,51264],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":50915,"depth":570,"text":50916,"children":51265},[51266,51267],{"id":50934,"depth":700,"text":15},{"id":15602,"depth":700,"text":12085},"Render to texture using Frame Buffer Objects.",{},{"title":425,"description":51268},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":51273,"title":429,"body":51274,"description":51643,"extension":583,"links":584,"meta":51644,"navigation":586,"path":430,"seo":51645,"stem":431,"__hash__":51646},"docs/2.api/9.objects/gradient-texture.md",{"type":493,"value":51275,"toc":51639},[51276,51281,51290,51292,51493,51495,51637],[2287,51277,51278],{},[51279,51280],"objects-gradient-texture",{},[606,51282,51283,51286,51287,51289],{},[610,51284,51285],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[610,51288,2973],{}," by default.",[496,51291,15],{"id":616},[618,51293,51295],{"className":620,"code":51294,"language":625,"meta":568,"style":568},"\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",[610,51296,51297,51317,51336,51344,51348,51356,51364,51382,51386,51394,51413,51421,51428,51442,51456,51461,51469,51477,51485],{"__ignoreMap":568},[629,51298,51299,51301,51303,51305,51307,51309,51311,51313,51315],{"class":631,"line":569},[629,51300,635],{"class":634},[629,51302,639],{"class":638},[629,51304,643],{"class":642},[629,51306,646],{"class":642},[629,51308,649],{"class":634},[629,51310,652],{"class":634},[629,51312,656],{"class":655},[629,51314,652],{"class":634},[629,51316,661],{"class":634},[629,51318,51319,51321,51323,51326,51328,51330,51332,51334],{"class":631,"line":570},[629,51320,669],{"class":668},[629,51322,672],{"class":634},[629,51324,51325],{"class":675}," GradientTexture",[629,51327,685],{"class":634},[629,51329,688],{"class":668},[629,51331,691],{"class":634},[629,51333,694],{"class":655},[629,51335,697],{"class":634},[629,51337,51338,51340,51342],{"class":631,"line":700},[629,51339,724],{"class":634},[629,51341,639],{"class":638},[629,51343,661],{"class":634},[629,51345,51346],{"class":631,"line":721},[629,51347,734],{"emptyLinePlaceholder":586},[629,51349,51350,51352,51354],{"class":631,"line":731},[629,51351,635],{"class":634},[629,51353,742],{"class":638},[629,51355,661],{"class":634},[629,51357,51358,51360,51362],{"class":631,"line":737},[629,51359,750],{"class":634},[629,51361,753],{"class":638},[629,51363,661],{"class":634},[629,51365,51366,51368,51370,51372,51374,51376,51378,51380],{"class":631,"line":747},[629,51367,773],{"class":634},[629,51369,776],{"class":638},[629,51371,1477],{"class":642},[629,51373,649],{"class":634},[629,51375,652],{"class":634},[629,51377,8378],{"class":655},[629,51379,652],{"class":634},[629,51381,779],{"class":634},[629,51383,51384],{"class":631,"line":770},[629,51385,734],{"emptyLinePlaceholder":586},[629,51387,51388,51390,51392],{"class":631,"line":782},[629,51389,773],{"class":634},[629,51391,848],{"class":638},[629,51393,661],{"class":634},[629,51395,51396,51398,51400,51402,51404,51406,51409,51411],{"class":631,"line":792},[629,51397,845],{"class":634},[629,51399,25845],{"class":638},[629,51401,1951],{"class":642},[629,51403,649],{"class":634},[629,51405,652],{"class":634},[629,51407,51408],{"class":655},"[2, 2]",[629,51410,652],{"class":634},[629,51412,779],{"class":634},[629,51414,51415,51417,51419],{"class":631,"line":797},[629,51416,845],{"class":634},[629,51418,7464],{"class":638},[629,51420,661],{"class":634},[629,51422,51423,51425],{"class":631,"line":819},[629,51424,856],{"class":634},[629,51426,51427],{"class":638},"GradientTexture\n",[629,51429,51430,51433,51435,51437,51440],{"class":631,"line":623},[629,51431,51432],{"class":642}," :stops",[629,51434,649],{"class":634},[629,51436,652],{"class":634},[629,51438,51439],{"class":655},"[0, 1]",[629,51441,3123],{"class":634},[629,51443,51444,51447,51449,51451,51454],{"class":631,"line":842},[629,51445,51446],{"class":642}," :colors",[629,51448,649],{"class":634},[629,51450,652],{"class":634},[629,51452,51453],{"class":655},"['#ff0000', '#0000ff']",[629,51455,3123],{"class":634},[629,51457,51458],{"class":631,"line":853},[629,51459,51460],{"class":634}," />\n",[629,51462,51463,51465,51467],{"class":631,"line":864},[629,51464,877],{"class":634},[629,51466,7464],{"class":638},[629,51468,661],{"class":634},[629,51470,51471,51473,51475],{"class":631,"line":874},[629,51472,887],{"class":634},[629,51474,848],{"class":638},[629,51476,661],{"class":634},[629,51478,51479,51481,51483],{"class":631,"line":624},[629,51480,897],{"class":634},[629,51482,753],{"class":638},[629,51484,661],{"class":634},[629,51486,51487,51489,51491],{"class":631,"line":894},[629,51488,724],{"class":634},[629,51490,742],{"class":638},[629,51492,661],{"class":634},[496,51494,914],{"id":913},[919,51496,51497,51507],{},[922,51498,51499],{},[925,51500,51501,51503,51505],{},[928,51502,930],{"align":989},[928,51504,933],{"align":989},[928,51506,936],{},[938,51508,51509,51535,51550,51564,51577,51591,51608,51622],{},[925,51510,51511,51516,51533],{},[943,51512,51513],{"align":989},[610,51514,51515],{},"stops",[943,51517,4271,51518,51520,51521,3055,51523,51525,51526,51529,51530,1138],{"align":989},[610,51519,35121],{}," of values between ",[610,51522,957],{},[610,51524,1866],{}," representing the color positions in the gradient. ",[610,51527,51528],{},"stops.length"," should match ",[610,51531,51532],{},"color.length",[943,51534],{},[925,51536,51537,51542,51548],{},[943,51538,51539],{"align":989},[610,51540,51541],{},"colors",[943,51543,4271,51544,51547],{"align":989},[610,51545,51546],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[943,51549],{},[925,51551,51552,51556,51559],{},[943,51553,51554],{"align":989},[610,51555,26226],{},[943,51557,51558],{"align":989},"Where the component should be attached within its parent.",[943,51560,51561],{},[610,51562,51563],{},"'map'",[925,51565,51566,51570,51573],{},[943,51567,51568],{"align":989},[610,51569,38940],{},[943,51571,51572],{"align":989},"Height of the canvas used to draw the gradient.",[943,51574,51575],{},[610,51576,37560],{},[925,51578,51579,51583,51586],{},[943,51580,51581],{"align":989},[610,51582,38926],{},[943,51584,51585],{"align":989},"Width of the canvas used to draw the gradient.",[943,51587,51588],{},[610,51589,51590],{},"16",[925,51592,51593,51597,51603],{},[943,51594,51595],{"align":989},[610,51596,5509],{},[943,51598,51599,51602],{"align":989},[610,51600,51601],{},"'linear' | 'radial'"," Type of gradient to draw.",[943,51604,51605],{},[610,51606,51607],{},"'linear'",[925,51609,51610,51615,51618],{},[943,51611,51612],{"align":989},[610,51613,51614],{},"innerCircleRadius",[943,51616,51617],{"align":989},"Radius of the inner circle of a radial gradient.",[943,51619,51620],{},[610,51621,957],{},[925,51623,51624,51629,51632],{},[943,51625,51626],{"align":989},[610,51627,51628],{},"outerCircleRadius",[943,51630,51631],{"align":989},"Radius of the outer circle of a radial gradient.",[943,51633,51634],{},[610,51635,51636],{},"'auto'",[1319,51638,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":51640},[51641,51642],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Create gradient textures for materials.",{},{"title":429,"description":51643},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":51648,"title":433,"body":51649,"description":57183,"extension":583,"links":584,"meta":57184,"navigation":586,"path":434,"seo":57185,"stem":435,"__hash__":57186},"docs/2.api/9.objects/html.md",{"type":493,"value":51650,"toc":57162},[51651,51654,51667,51672,51674,52082,52086,52093,52098,52114,52122,52127,52266,52271,52275,52299,52304,52433,52437,52461,52464,52488,52505,52525,52530,52694,52698,52703,52726,52738,52743,54391,54393,54416,54436,54477,54480,54495,54506,54541,54548,54572,54589,54594,56060,56066,56072,56077,56278,56295,56297,56656,56658,56678,56682,56760,56762,56934,57138,57141,57159],[606,51652,51653],{},"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.",[606,51655,51656,51657,3055,51659,51662,51663,51666],{},"🚀 Works seamlessly with both ",[1661,51658,10892],{},[1661,51660,51661],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[610,51664,51665],{},"\u003CHtml>"," component.",[2287,51668,51669],{},[51670,51671],"objects-html",{},[496,51673,15],{"id":616},[618,51675,51678],{"className":620,"code":51676,"highlights":51677,"language":625,"meta":568,"style":568},"\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",[570,623,842,853,864,874,624],[610,51679,51680,51700,51724,51742,51750,51754,51762,51780,51799,51807,51825,51833,51841,51849,51855,51861,51875,51889,51904,51909,51938,51947,51955,51963,51971,51979,51987,51998,52006,52021,52034,52046,52058,52070,52074],{"__ignoreMap":568},[629,51681,51682,51684,51686,51688,51690,51692,51694,51696,51698],{"class":631,"line":569},[629,51683,635],{"class":634},[629,51685,639],{"class":638},[629,51687,643],{"class":642},[629,51689,646],{"class":642},[629,51691,649],{"class":634},[629,51693,652],{"class":634},[629,51695,656],{"class":655},[629,51697,652],{"class":634},[629,51699,661],{"class":634},[629,51701,51703,51705,51707,51710,51712,51714,51716,51718,51720,51722],{"class":51702,"line":570},[631,665],[629,51704,669],{"class":668},[629,51706,672],{"class":634},[629,51708,51709],{"class":675}," Html",[629,51711,679],{"class":634},[629,51713,682],{"class":675},[629,51715,685],{"class":634},[629,51717,688],{"class":668},[629,51719,691],{"class":634},[629,51721,694],{"class":655},[629,51723,697],{"class":634},[629,51725,51726,51728,51730,51732,51734,51736,51738,51740],{"class":631,"line":700},[629,51727,669],{"class":668},[629,51729,672],{"class":634},[629,51731,707],{"class":675},[629,51733,685],{"class":634},[629,51735,688],{"class":668},[629,51737,691],{"class":634},[629,51739,716],{"class":655},[629,51741,697],{"class":634},[629,51743,51744,51746,51748],{"class":631,"line":721},[629,51745,724],{"class":634},[629,51747,639],{"class":638},[629,51749,661],{"class":634},[629,51751,51752],{"class":631,"line":731},[629,51753,734],{"emptyLinePlaceholder":586},[629,51755,51756,51758,51760],{"class":631,"line":737},[629,51757,635],{"class":634},[629,51759,742],{"class":638},[629,51761,661],{"class":634},[629,51763,51764,51766,51768,51770,51772,51774,51776,51778],{"class":631,"line":747},[629,51765,750],{"class":634},[629,51767,753],{"class":638},[629,51769,756],{"class":642},[629,51771,649],{"class":634},[629,51773,652],{"class":634},[629,51775,9852],{"class":655},[629,51777,652],{"class":634},[629,51779,661],{"class":634},[629,51781,51782,51784,51786,51788,51790,51792,51795,51797],{"class":631,"line":770},[629,51783,773],{"class":634},[629,51785,776],{"class":638},[629,51787,1477],{"class":642},[629,51789,649],{"class":634},[629,51791,652],{"class":634},[629,51793,51794],{"class":655},"[2, 2, 5]",[629,51796,652],{"class":634},[629,51798,779],{"class":634},[629,51800,51801,51803,51805],{"class":631,"line":782},[629,51802,773],{"class":634},[629,51804,787],{"class":638},[629,51806,779],{"class":634},[629,51808,51809,51811,51813,51815,51817,51819,51821,51823],{"class":631,"line":792},[629,51810,773],{"class":634},[629,51812,848],{"class":638},[629,51814,1477],{"class":642},[629,51816,649],{"class":634},[629,51818,652],{"class":634},[629,51820,1958],{"class":655},[629,51822,652],{"class":634},[629,51824,661],{"class":634},[629,51826,51827,51829,51831],{"class":631,"line":797},[629,51828,845],{"class":634},[629,51830,859],{"class":638},[629,51832,779],{"class":634},[629,51834,51835,51837,51839],{"class":631,"line":819},[629,51836,845],{"class":634},[629,51838,869],{"class":638},[629,51840,779],{"class":634},[629,51842,51844,51846],{"class":51843,"line":623},[631,665],[629,51845,845],{"class":634},[629,51847,51848],{"class":638},"Html\n",[629,51850,51852],{"class":51851,"line":842},[631,665],[629,51853,51854],{"class":642}," center\n",[629,51856,51858],{"class":51857,"line":853},[631,665],[629,51859,51860],{"class":642}," transform\n",[629,51862,51864,51867,51869,51871,51873],{"class":51863,"line":864},[631,665],[629,51865,51866],{"class":642}," :distance-factor",[629,51868,649],{"class":634},[629,51870,652],{"class":634},[629,51872,8420],{"class":655},[629,51874,3123],{"class":634},[629,51876,51878,51880,51882,51884,51887],{"class":51877,"line":874},[631,665],[629,51879,7997],{"class":642},[629,51881,649],{"class":634},[629,51883,652],{"class":634},[629,51885,51886],{"class":655},"[0, 0, 0.65]",[629,51888,3123],{"class":634},[629,51890,51892,51895,51897,51899,51902],{"class":51891,"line":624},[631,665],[629,51893,51894],{"class":642}," :scale",[629,51896,649],{"class":634},[629,51898,652],{"class":634},[629,51900,51901],{"class":655},"[0.75, 0.75, 0.75]",[629,51903,3123],{"class":634},[629,51905,51906],{"class":631,"line":894},[629,51907,51908],{"class":634}," >\n",[629,51910,51911,51913,51916,51918,51920,51922,51925,51927,51929,51932,51934,51936],{"class":631,"line":904},[629,51912,856],{"class":634},[629,51914,51915],{"class":638},"h1",[629,51917,23178],{"class":642},[629,51919,649],{"class":634},[629,51921,652],{"class":634},[629,51923,51924],{"class":655},"title",[629,51926,652],{"class":634},[629,51928,3643],{"class":634},[629,51930,51931],{"class":675},"I'm a Box 📦",[629,51933,724],{"class":634},[629,51935,51915],{"class":638},[629,51937,661],{"class":634},[629,51939,51940,51942,51945],{"class":631,"line":2617},[629,51941,877],{"class":634},[629,51943,51944],{"class":638},"Html",[629,51946,661],{"class":634},[629,51948,51949,51951,51953],{"class":631,"line":2626},[629,51950,887],{"class":634},[629,51952,848],{"class":638},[629,51954,661],{"class":634},[629,51956,51957,51959,51961],{"class":631,"line":2646},[629,51958,773],{"class":634},[629,51960,8041],{"class":638},[629,51962,779],{"class":634},[629,51964,51965,51967,51969],{"class":631,"line":2655},[629,51966,773],{"class":634},[629,51968,8448],{"class":638},[629,51970,779],{"class":634},[629,51972,51973,51975,51977],{"class":631,"line":2664},[629,51974,897],{"class":634},[629,51976,753],{"class":638},[629,51978,661],{"class":634},[629,51980,51981,51983,51985],{"class":631,"line":2673},[629,51982,724],{"class":634},[629,51984,742],{"class":638},[629,51986,661],{"class":634},[629,51988,51989,51991,51993,51996],{"class":631,"line":2695},[629,51990,635],{"class":634},[629,51992,1319],{"class":638},[629,51994,51995],{"class":642}," scoped",[629,51997,661],{"class":634},[629,51999,52000,52002,52004],{"class":631,"line":2739},[629,52001,1138],{"class":634},[629,52003,51924],{"class":1192},[629,52005,1196],{"class":634},[629,52007,52008,52011,52013,52016,52019],{"class":631,"line":2748},[629,52009,52010],{"class":4121}," background-color",[629,52012,1210],{"class":634},[629,52014,52015],{"class":634}," #",[629,52017,52018],{"class":675},"1e1e1e",[629,52020,8289],{"class":634},[629,52022,52023,52025,52027,52029,52032],{"class":631,"line":2757},[629,52024,5465],{"class":4121},[629,52026,1210],{"class":634},[629,52028,52015],{"class":634},[629,52030,52031],{"class":675},"ffffff",[629,52033,8289],{"class":634},[629,52035,52036,52039,52041,52044],{"class":631,"line":3914},[629,52037,52038],{"class":4121}," font-size",[629,52040,1210],{"class":634},[629,52042,52043],{"class":2493}," 0.75rem",[629,52045,8289],{"class":634},[629,52047,52048,52051,52053,52056],{"class":631,"line":3945},[629,52049,52050],{"class":4121}," padding",[629,52052,1210],{"class":634},[629,52054,52055],{"class":2493}," 0.25rem",[629,52057,8289],{"class":634},[629,52059,52060,52063,52065,52068],{"class":631,"line":3966},[629,52061,52062],{"class":4121}," border-radius",[629,52064,1210],{"class":634},[629,52066,52067],{"class":2493}," 0.375rem",[629,52069,8289],{"class":634},[629,52071,52072],{"class":631,"line":3985},[629,52073,1317],{"class":634},[629,52075,52076,52078,52080],{"class":631,"line":4017},[629,52077,724],{"class":634},[629,52079,1319],{"class":638},[629,52081,661],{"class":634},[496,52083,52085],{"id":52084},"occlusion","Occlusion",[606,52087,52088,52089,52092],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[610,52090,52091],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[606,52094,52095,52096,39320],{},"Html can be hidden behind one or more objects in your scene using the ",[610,52097,52091],{},[618,52099,52101],{"className":620,"code":52100,"language":625,"meta":568,"style":568},"\u003CHtml occlude>\n",[610,52102,52103],{"__ignoreMap":568},[629,52104,52105,52107,52109,52112],{"class":631,"line":569},[629,52106,635],{"class":634},[629,52108,51944],{"class":638},[629,52110,52111],{"class":642}," occlude",[629,52113,661],{"class":634},[606,52115,950,52116,52118,52119,52121],{},[610,52117,52091],{},", then ",[610,52120,51665],{}," will be hidden by any objects that pass in front of its position.",[2287,52123,52124],{},[52125,52126],"objects-html-occlusion",{},[5299,52128,5301,52129,52132],{},[5303,52130,52131],{},"Demo code",[618,52133,52135],{"className":43682,"code":52134,"language":43684,"meta":568,"style":568},"\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",[610,52136,52137,52156,52164,52172,52222,52250,52258],{"__ignoreMap":568},[629,52138,52139,52141,52143,52145,52147,52149,52152,52154],{"class":631,"line":569},[629,52140,635],{"class":634},[629,52142,848],{"class":638},[629,52144,1477],{"class":642},[629,52146,649],{"class":634},[629,52148,652],{"class":634},[629,52150,52151],{"class":655},"[0, 1, -2]",[629,52153,652],{"class":634},[629,52155,661],{"class":634},[629,52157,52158,52160,52162],{"class":631,"line":570},[629,52159,750],{"class":634},[629,52161,859],{"class":638},[629,52163,779],{"class":634},[629,52165,52166,52168,52170],{"class":631,"line":700},[629,52167,750],{"class":634},[629,52169,869],{"class":638},[629,52171,779],{"class":634},[629,52173,52174,52176,52178,52181,52184,52186,52189,52191,52193,52195,52197,52199,52201,52203,52206,52208,52211,52213,52215,52218,52220],{"class":631,"line":721},[629,52175,750],{"class":634},[629,52177,43684],{"class":638},[629,52179,52180],{"class":642}," center",[629,52182,52183],{"class":642}," transform",[629,52185,52111],{"class":642},[629,52187,52188],{"class":642}," :distance-factor",[629,52190,649],{"class":634},[629,52192,652],{"class":634},[629,52194,8420],{"class":655},[629,52196,652],{"class":634},[629,52198,1477],{"class":642},[629,52200,649],{"class":634},[629,52202,652],{"class":634},[629,52204,52205],{"class":655},"[0, 0, 2]",[629,52207,652],{"class":634},[629,52209,52210],{"class":642}," :z-index-range",[629,52212,649],{"class":634},[629,52214,652],{"class":634},[629,52216,52217],{"class":655},"[28, 0]",[629,52219,652],{"class":634},[629,52221,661],{"class":634},[629,52223,52224,52226,52228,52230,52232,52234,52237,52239,52241,52244,52246,52248],{"class":631,"line":731},[629,52225,773],{"class":634},[629,52227,51915],{"class":638},[629,52229,23178],{"class":642},[629,52231,649],{"class":634},[629,52233,652],{"class":634},[629,52235,52236],{"class":655},"bg-white dark:bg-dark text-xs p-1 rounded",[629,52238,652],{"class":634},[629,52240,3643],{"class":634},[629,52242,52243],{"class":675},"Move camera",[629,52245,724],{"class":634},[629,52247,51915],{"class":638},[629,52249,661],{"class":634},[629,52251,52252,52254,52256],{"class":631,"line":737},[629,52253,897],{"class":634},[629,52255,43684],{"class":638},[629,52257,661],{"class":634},[629,52259,52260,52262,52264],{"class":631,"line":747},[629,52261,724],{"class":634},[629,52263,848],{"class":638},[629,52265,661],{"class":634},[606,52267,52268,52269,2019],{},"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 ",[610,52270,52091],{},[4043,52272,52274],{"id":52273},"single-occluder","Single occluder",[618,52276,52278],{"className":620,"code":52277,"language":625,"meta":568,"style":568},"\u003CHtml occlude=\"[mesh]\">\n",[610,52279,52280],{"__ignoreMap":568},[629,52281,52282,52284,52286,52288,52290,52292,52295,52297],{"class":631,"line":569},[629,52283,635],{"class":634},[629,52285,51944],{"class":638},[629,52287,52111],{"class":642},[629,52289,649],{"class":634},[629,52291,652],{"class":634},[629,52293,52294],{"class":655},"[mesh]",[629,52296,652],{"class":634},[629,52298,661],{"class":634},[2287,52300,52301],{},[52302,52303],"objects-html-single-occluder",{},[5299,52305,5301,52306,52308],{},[5303,52307,52131],{},[618,52309,52311],{"className":43682,"code":52310,"language":43684,"meta":568,"style":568},"\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",[610,52312,52313,52331,52339,52347,52391,52417,52425],{"__ignoreMap":568},[629,52314,52315,52317,52319,52321,52323,52325,52327,52329],{"class":631,"line":569},[629,52316,635],{"class":634},[629,52318,848],{"class":638},[629,52320,1477],{"class":642},[629,52322,649],{"class":634},[629,52324,652],{"class":634},[629,52326,23629],{"class":655},[629,52328,652],{"class":634},[629,52330,661],{"class":634},[629,52332,52333,52335,52337],{"class":631,"line":570},[629,52334,750],{"class":634},[629,52336,859],{"class":638},[629,52338,779],{"class":634},[629,52340,52341,52343,52345],{"class":631,"line":700},[629,52342,750],{"class":634},[629,52344,869],{"class":638},[629,52346,779],{"class":634},[629,52348,52349,52351,52353,52355,52357,52360,52362,52364,52367,52369,52371,52373,52375,52377,52379,52381,52383,52385,52387,52389],{"class":631,"line":721},[629,52350,750],{"class":634},[629,52352,43684],{"class":638},[629,52354,52180],{"class":642},[629,52356,52183],{"class":642},[629,52358,52359],{"class":642}," :occlude",[629,52361,649],{"class":634},[629,52363,652],{"class":634},[629,52365,52366],{"class":655},"[sphereRef]",[629,52368,652],{"class":634},[629,52370,52188],{"class":642},[629,52372,649],{"class":634},[629,52374,652],{"class":634},[629,52376,8420],{"class":655},[629,52378,652],{"class":634},[629,52380,52210],{"class":642},[629,52382,649],{"class":634},[629,52384,652],{"class":634},[629,52386,52217],{"class":655},[629,52388,652],{"class":634},[629,52390,661],{"class":634},[629,52392,52393,52395,52397,52399,52401,52403,52405,52407,52409,52411,52413,52415],{"class":631,"line":731},[629,52394,773],{"class":634},[629,52396,51915],{"class":638},[629,52398,23178],{"class":642},[629,52400,649],{"class":634},[629,52402,652],{"class":634},[629,52404,52236],{"class":655},[629,52406,652],{"class":634},[629,52408,3643],{"class":634},[629,52410,52243],{"class":675},[629,52412,724],{"class":634},[629,52414,51915],{"class":638},[629,52416,661],{"class":634},[629,52418,52419,52421,52423],{"class":631,"line":737},[629,52420,897],{"class":634},[629,52422,43684],{"class":638},[629,52424,661],{"class":634},[629,52426,52427,52429,52431],{"class":631,"line":747},[629,52428,724],{"class":634},[629,52430,848],{"class":638},[629,52432,661],{"class":634},[4043,52434,52436],{"id":52435},"multiple-occluders","Multiple occluders",[618,52438,52440],{"className":620,"code":52439,"language":625,"meta":568,"style":568},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[610,52441,52442],{"__ignoreMap":568},[629,52443,52444,52446,52448,52450,52452,52454,52457,52459],{"class":631,"line":569},[629,52445,635],{"class":634},[629,52447,51944],{"class":638},[629,52449,52111],{"class":642},[629,52451,649],{"class":634},[629,52453,652],{"class":634},[629,52455,52456],{"class":655},"[mesh1, mesh2, mesh3, ...]",[629,52458,652],{"class":634},[629,52460,779],{"class":634},[606,52462,52463],{},"OR",[618,52465,52467],{"className":620,"code":52466,"language":625,"meta":568,"style":568},"\u003CHtml occlude=\"meshesArray\" />\n",[610,52468,52469],{"__ignoreMap":568},[629,52470,52471,52473,52475,52477,52479,52481,52484,52486],{"class":631,"line":569},[629,52472,635],{"class":634},[629,52474,51944],{"class":638},[629,52476,52111],{"class":642},[629,52478,649],{"class":634},[629,52480,652],{"class":634},[629,52482,52483],{"class":655},"meshesArray",[629,52485,652],{"class":634},[629,52487,779],{"class":634},[606,52489,52490,52491,52494,52495,52499,52500,52504],{},"In the demo below, a ",[610,52492,52493],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1661,52496,52497],{},[610,52498,4284],{}," instances are collected into an array and passed to the ",[1661,52501,52502],{},[610,52503,52091],{}," prop, allowing each sphere to occlude the HTML content.",[606,52506,52507,52508,52513,52514,52517,52518,3055,52521,52524],{},"This demo also uses the ",[1661,52509,52510],{},[610,52511,52512],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1661,52515,52516],{},"reactive value"," to control element styles — for example, toggling between ",[1666,52519,52520],{},"light",[1666,52522,52523],{},"dark"," themes.",[2287,52526,52527],{},[52528,52529],"objects-html-occlude-complex-demo",{},[5299,52531,5301,52532,52534],{},[5303,52533,52131],{},[618,52535,52537],{"className":43682,"code":52536,"language":43684,"meta":568,"style":568},"\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",[610,52538,52539,52557,52565,52573,52580,52594,52608,52621,52634,52648,52652,52678,52686],{"__ignoreMap":568},[629,52540,52541,52543,52545,52547,52549,52551,52553,52555],{"class":631,"line":569},[629,52542,635],{"class":634},[629,52544,848],{"class":638},[629,52546,1477],{"class":642},[629,52548,649],{"class":634},[629,52550,652],{"class":634},[629,52552,23629],{"class":655},[629,52554,652],{"class":634},[629,52556,661],{"class":634},[629,52558,52559,52561,52563],{"class":631,"line":570},[629,52560,750],{"class":634},[629,52562,859],{"class":638},[629,52564,779],{"class":634},[629,52566,52567,52569,52571],{"class":631,"line":700},[629,52568,750],{"class":634},[629,52570,869],{"class":638},[629,52572,779],{"class":634},[629,52574,52575,52577],{"class":631,"line":721},[629,52576,750],{"class":634},[629,52578,52579],{"class":638},"html\n",[629,52581,52582,52585,52587,52589,52592],{"class":631,"line":731},[629,52583,52584],{"class":642}," v-bind",[629,52586,649],{"class":634},[629,52588,652],{"class":634},[629,52590,52591],{"class":655},"htmlProps",[629,52593,3123],{"class":634},[629,52595,52596,52599,52601,52603,52606],{"class":631,"line":737},[629,52597,52598],{"class":642}," :occlude",[629,52600,649],{"class":634},[629,52602,652],{"class":634},[629,52604,52605],{"class":655},"occluderRefs",[629,52607,3123],{"class":634},[629,52609,52610,52613,52615,52617,52619],{"class":631,"line":747},[629,52611,52612],{"class":642}," :distance-factor",[629,52614,649],{"class":634},[629,52616,652],{"class":634},[629,52618,8420],{"class":655},[629,52620,3123],{"class":634},[629,52622,52623,52626,52628,52630,52632],{"class":631,"line":770},[629,52624,52625],{"class":642}," :z-index-range",[629,52627,649],{"class":634},[629,52629,652],{"class":634},[629,52631,52217],{"class":655},[629,52633,3123],{"class":634},[629,52635,52636,52639,52641,52643,52646],{"class":631,"line":782},[629,52637,52638],{"class":642}," @on-occlude",[629,52640,649],{"class":634},[629,52642,652],{"class":634},[629,52644,52645],{"class":655},"(event: boolean) => isOccluded = event",[629,52647,3123],{"class":634},[629,52649,52650],{"class":631,"line":792},[629,52651,5165],{"class":634},[629,52653,52654,52656,52658,52660,52662,52664,52666,52668,52670,52672,52674,52676],{"class":631,"line":797},[629,52655,773],{"class":634},[629,52657,51915],{"class":638},[629,52659,23178],{"class":642},[629,52661,649],{"class":634},[629,52663,652],{"class":634},[629,52665,52236],{"class":655},[629,52667,652],{"class":634},[629,52669,3643],{"class":634},[629,52671,52243],{"class":675},[629,52673,724],{"class":634},[629,52675,51915],{"class":638},[629,52677,661],{"class":634},[629,52679,52680,52682,52684],{"class":631,"line":819},[629,52681,897],{"class":634},[629,52683,43684],{"class":638},[629,52685,661],{"class":634},[629,52687,52688,52690,52692],{"class":631,"line":623},[629,52689,724],{"class":634},[629,52691,848],{"class":638},[629,52693,661],{"class":634},[4043,52695,52697],{"id":52696},"blending-occlusion","Blending Occlusion",[606,52699,52700,52702],{},[610,52701,51665],{}," 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.",[618,52704,52706],{"className":620,"code":52705,"language":625,"meta":568,"style":568},"\u003CHtml occlude=\"blending\">\n",[610,52707,52708],{"__ignoreMap":568},[629,52709,52710,52712,52714,52716,52718,52720,52722,52724],{"class":631,"line":569},[629,52711,635],{"class":634},[629,52713,51944],{"class":638},[629,52715,52111],{"class":642},[629,52717,649],{"class":634},[629,52719,652],{"class":634},[629,52721,47842],{"class":655},[629,52723,652],{"class":634},[629,52725,661],{"class":634},[606,52727,2768,52728,3186,52731,52734,52735,1138],{},[1661,52729,52730],{},"demo below ⬇️",[1666,52732,52733],{},"(left black example)"," shows a ",[1661,52736,52737],{},"basic usage example",[2287,52739,52740],{},[52741,52742],"objects-html-occlude-blending-demo",{},[5299,52744,5301,52745,52747],{},[5303,52746,52131],{},[618,52748,52786],{"className":620,"code":52749,"highlights":52750,"language":625,"meta":568,"style":568},"\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",[570,3945,3985,4017,4026,4035,19512,19527,19801,19810,19829,19872,19914,19934,19963,19972,19981,52751,52752,19810,19829,19872,19914,19934,19963,19972,19981,52751,52752,52753,52754,52755,52756,52757,52758,52759,52760,52761,52762,52763,52764,52765,52766,52767,52768,52769,52770,52771,52772,52773,52774,52775,52776,52777,52778,52779,52780,52781,52782,52783,52784,52785],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,[610,52787,52788,52808,52835,52853,52871,52894,52898,52909,52924,52935,52946,52957,52961,52965,52982,52986,52997,53001,53016,53039,53043,53047,53061,53083,53087,53091,53105,53131,53158,53162,53166,53170,53199,53203,53225,53240,53252,53263,53275,53282,53290,53294,53302,53321,53340,53359,53367,53371,53378,53391,53404,53416,53430,53443,53457,53461,53491,53523,53531,53539,53547,53551,53558,53563,53568,53582,53596,53610,53615,53635,53647,53665,53674,53683,53688,53695,53700,53705,53718,53732,53747,53760,53765,53785,53823,53832,53841,53846,53853,53867,53872,53877,53890,53904,53919,53925,53938,53943,53967,53976,53981,53988,53993,53998,54011,54025,54038,54043,54063,54087,54108,54117,54126,54131,54138,54153,54167,54182,54196,54209,54215,54220,54225,54244,54263,54272,54281,54290,54295,54306,54316,54328,54339,54350,54363,54377,54382],{"__ignoreMap":568},[629,52789,52790,52792,52794,52796,52798,52800,52802,52804,52806],{"class":631,"line":569},[629,52791,635],{"class":634},[629,52793,639],{"class":638},[629,52795,643],{"class":642},[629,52797,646],{"class":642},[629,52799,649],{"class":634},[629,52801,652],{"class":634},[629,52803,656],{"class":655},[629,52805,652],{"class":634},[629,52807,661],{"class":634},[629,52809,52811,52813,52815,52817,52819,52821,52823,52825,52827,52829,52831,52833],{"class":52810,"line":570},[631,665],[629,52812,669],{"class":668},[629,52814,672],{"class":634},[629,52816,51709],{"class":675},[629,52818,679],{"class":634},[629,52820,8299],{"class":675},[629,52822,679],{"class":634},[629,52824,682],{"class":675},[629,52826,685],{"class":634},[629,52828,688],{"class":668},[629,52830,691],{"class":634},[629,52832,694],{"class":655},[629,52834,697],{"class":634},[629,52836,52837,52839,52841,52843,52845,52847,52849,52851],{"class":631,"line":700},[629,52838,669],{"class":668},[629,52840,672],{"class":634},[629,52842,707],{"class":675},[629,52844,685],{"class":634},[629,52846,688],{"class":668},[629,52848,691],{"class":634},[629,52850,716],{"class":655},[629,52852,697],{"class":634},[629,52854,52855,52857,52859,52861,52863,52865,52867,52869],{"class":631,"line":721},[629,52856,669],{"class":668},[629,52858,672],{"class":634},[629,52860,3490],{"class":675},[629,52862,685],{"class":634},[629,52864,688],{"class":668},[629,52866,691],{"class":634},[629,52868,625],{"class":655},[629,52870,697],{"class":634},[629,52872,52873,52875,52877,52880,52882,52884,52886,52888,52890,52892],{"class":631,"line":731},[629,52874,669],{"class":668},[629,52876,672],{"class":634},[629,52878,52879],{"class":675}," CircleGeometry",[629,52881,679],{"class":634},[629,52883,15814],{"class":675},[629,52885,685],{"class":634},[629,52887,688],{"class":668},[629,52889,691],{"class":634},[629,52891,4618],{"class":655},[629,52893,697],{"class":634},[629,52895,52896],{"class":631,"line":737},[629,52897,734],{"emptyLinePlaceholder":586},[629,52899,52900,52902,52905,52907],{"class":631,"line":747},[629,52901,2407],{"class":642},[629,52903,52904],{"class":675}," gl ",[629,52906,649],{"class":634},[629,52908,1196],{"class":634},[629,52910,52911,52914,52916,52918,52920,52922],{"class":631,"line":770},[629,52912,52913],{"class":638}," clearColor",[629,52915,1210],{"class":634},[629,52917,691],{"class":634},[629,52919,9852],{"class":655},[629,52921,2432],{"class":634},[629,52923,2480],{"class":634},[629,52925,52926,52929,52931,52933],{"class":631,"line":782},[629,52927,52928],{"class":638}," clearAlpha",[629,52930,1210],{"class":634},[629,52932,2553],{"class":2493},[629,52934,2480],{"class":634},[629,52936,52937,52940,52942,52944],{"class":631,"line":792},[629,52938,52939],{"class":638}," shadows",[629,52941,1210],{"class":634},[629,52943,4390],{"class":4389},[629,52945,2480],{"class":634},[629,52947,52948,52951,52953,52955],{"class":631,"line":797},[629,52949,52950],{"class":638}," alpha",[629,52952,1210],{"class":634},[629,52954,4390],{"class":4389},[629,52956,2480],{"class":634},[629,52958,52959],{"class":631,"line":819},[629,52960,1317],{"class":634},[629,52962,52963],{"class":631,"line":623},[629,52964,734],{"emptyLinePlaceholder":586},[629,52966,52967,52969,52972,52974,52976,52978,52980],{"class":631,"line":842},[629,52968,2407],{"class":642},[629,52970,52971],{"class":675}," targetDirectionLightRef ",[629,52973,649],{"class":634},[629,52975,3490],{"class":2426},[629,52977,2429],{"class":675},[629,52979,3648],{"class":634},[629,52981,2440],{"class":675},[629,52983,52984],{"class":631,"line":853},[629,52985,734],{"emptyLinePlaceholder":586},[629,52987,52988,52990,52993,52995],{"class":631,"line":864},[629,52989,2407],{"class":642},[629,52991,52992],{"class":675}," geometries ",[629,52994,649],{"class":634},[629,52996,18772],{"class":675},[629,52998,52999],{"class":631,"line":874},[629,53000,2463],{"class":634},[629,53002,53003,53006,53008,53010,53012,53014],{"class":631,"line":624},[629,53004,53005],{"class":638}," component",[629,53007,1210],{"class":634},[629,53009,691],{"class":634},[629,53011,859],{"class":655},[629,53013,2432],{"class":634},[629,53015,2480],{"class":634},[629,53017,53018,53021,53023,53025,53027,53029,53031,53033,53035,53037],{"class":631,"line":894},[629,53019,53020],{"class":638}," args",[629,53022,1210],{"class":634},[629,53024,2490],{"class":675},[629,53026,1866],{"class":2493},[629,53028,679],{"class":634},[629,53030,2553],{"class":2493},[629,53032,679],{"class":634},[629,53034,2553],{"class":2493},[629,53036,2506],{"class":675},[629,53038,2480],{"class":634},[629,53040,53041],{"class":631,"line":904},[629,53042,2589],{"class":634},[629,53044,53045],{"class":631,"line":2617},[629,53046,2463],{"class":634},[629,53048,53049,53051,53053,53055,53057,53059],{"class":631,"line":2626},[629,53050,53005],{"class":638},[629,53052,1210],{"class":634},[629,53054,691],{"class":634},[629,53056,3950],{"class":655},[629,53058,2432],{"class":634},[629,53060,2480],{"class":634},[629,53062,53063,53065,53067,53069,53071,53073,53075,53077,53079,53081],{"class":631,"line":2646},[629,53064,53020],{"class":638},[629,53066,1210],{"class":634},[629,53068,2490],{"class":675},[629,53070,45697],{"class":2493},[629,53072,679],{"class":634},[629,53074,29126],{"class":2493},[629,53076,679],{"class":634},[629,53078,29126],{"class":2493},[629,53080,2506],{"class":675},[629,53082,2480],{"class":634},[629,53084,53085],{"class":631,"line":2655},[629,53086,2589],{"class":634},[629,53088,53089],{"class":631,"line":2664},[629,53090,2463],{"class":634},[629,53092,53093,53095,53097,53099,53101,53103],{"class":631,"line":2673},[629,53094,53005],{"class":638},[629,53096,1210],{"class":634},[629,53098,691],{"class":634},[629,53100,9924],{"class":655},[629,53102,2432],{"class":634},[629,53104,2480],{"class":634},[629,53106,53107,53109,53111,53113,53115,53117,53119,53121,53123,53125,53127,53129],{"class":631,"line":2695},[629,53108,53020],{"class":638},[629,53110,1210],{"class":634},[629,53112,2490],{"class":675},[629,53114,1938],{"class":2493},[629,53116,679],{"class":634},[629,53118,32622],{"class":2493},[629,53120,679],{"class":634},[629,53122,32627],{"class":2493},[629,53124,679],{"class":634},[629,53126,7755],{"class":2493},[629,53128,2506],{"class":675},[629,53130,2480],{"class":634},[629,53132,53133,53136,53138,53140,53143,53145,53147,53149,53152,53154,53156],{"class":631,"line":2739},[629,53134,53135],{"class":638}," bind",[629,53137,1210],{"class":634},[629,53139,672],{"class":634},[629,53141,53142],{"class":638}," castShadow",[629,53144,1210],{"class":634},[629,53146,4390],{"class":4389},[629,53148,679],{"class":634},[629,53150,53151],{"class":638}," receiveShadow",[629,53153,1210],{"class":634},[629,53155,4390],{"class":4389},[629,53157,7081],{"class":634},[629,53159,53160],{"class":631,"line":2748},[629,53161,2589],{"class":634},[629,53163,53164],{"class":631,"line":2757},[629,53165,18808],{"class":675},[629,53167,53168],{"class":631,"line":3914},[629,53169,734],{"emptyLinePlaceholder":586},[629,53171,53173,53175,53178,53180,53182,53184,53186,53188,53190,53193,53195,53197],{"class":53172,"line":3945},[631,665],[629,53174,2407],{"class":642},[629,53176,53177],{"class":675}," customGeometry ",[629,53179,649],{"class":634},[629,53181,3490],{"class":2426},[629,53183,2429],{"class":675},[629,53185,34170],{"class":634},[629,53187,52879],{"class":2426},[629,53189,2429],{"class":675},[629,53191,53192],{"class":2493},"1.25",[629,53194,679],{"class":634},[629,53196,29126],{"class":2493},[629,53198,7181],{"class":675},[629,53200,53201],{"class":631,"line":3966},[629,53202,734],{"emptyLinePlaceholder":586},[629,53204,53206,53208,53211,53213,53215,53217,53219,53221,53223],{"class":53205,"line":3985},[631,665],[629,53207,2407],{"class":642},[629,53209,53210],{"class":675}," customMaterial ",[629,53212,649],{"class":634},[629,53214,3490],{"class":2426},[629,53216,2429],{"class":675},[629,53218,34170],{"class":634},[629,53220,15814],{"class":2426},[629,53222,2429],{"class":675},[629,53224,3252],{"class":634},[629,53226,53228,53230,53232,53234,53236,53238],{"class":53227,"line":4017},[631,665],[629,53229,5465],{"class":638},[629,53231,1210],{"class":634},[629,53233,691],{"class":634},[629,53235,34914],{"class":655},[629,53237,2432],{"class":634},[629,53239,2480],{"class":634},[629,53241,53243,53246,53248,53250],{"class":53242,"line":4026},[631,665],[629,53244,53245],{"class":638}," side",[629,53247,1210],{"class":634},[629,53249,29895],{"class":2493},[629,53251,2480],{"class":634},[629,53253,53255,53257,53259,53261],{"class":53254,"line":4035},[631,665],[629,53256,5477],{"class":638},[629,53258,1210],{"class":634},[629,53260,2553],{"class":2493},[629,53262,2480],{"class":634},[629,53264,53266,53269,53271,53273],{"class":53265,"line":19512},[631,665],[629,53267,53268],{"class":638}," transparent",[629,53270,1210],{"class":634},[629,53272,4390],{"class":4389},[629,53274,2480],{"class":634},[629,53276,53278,53280],{"class":53277,"line":19527},[631,665],[629,53279,2420],{"class":634},[629,53281,7181],{"class":675},[629,53283,53284,53286,53288],{"class":631,"line":19542},[629,53285,724],{"class":634},[629,53287,639],{"class":638},[629,53289,661],{"class":634},[629,53291,53292],{"class":631,"line":19547},[629,53293,734],{"emptyLinePlaceholder":586},[629,53295,53296,53298,53300],{"class":631,"line":19554},[629,53297,635],{"class":634},[629,53299,742],{"class":638},[629,53301,661],{"class":634},[629,53303,53304,53306,53308,53310,53312,53314,53317,53319],{"class":631,"line":19559},[629,53305,750],{"class":634},[629,53307,4111],{"class":638},[629,53309,23178],{"class":642},[629,53311,649],{"class":634},[629,53313,652],{"class":634},[629,53315,53316],{"class":655},"html-demo-wrapper aspect-video",[629,53318,652],{"class":634},[629,53320,661],{"class":634},[629,53322,53323,53325,53327,53329,53331,53333,53336,53338],{"class":631,"line":19565},[629,53324,773],{"class":634},[629,53326,753],{"class":638},[629,53328,8982],{"class":642},[629,53330,649],{"class":634},[629,53332,652],{"class":634},[629,53334,53335],{"class":655},"gl",[629,53337,652],{"class":634},[629,53339,661],{"class":634},[629,53341,53342,53344,53346,53348,53350,53352,53355,53357],{"class":631,"line":19586},[629,53343,845],{"class":634},[629,53345,776],{"class":638},[629,53347,1477],{"class":642},[629,53349,649],{"class":634},[629,53351,652],{"class":634},[629,53353,53354],{"class":655},"[0, 1.5, 7.5]",[629,53356,652],{"class":634},[629,53358,779],{"class":634},[629,53360,53361,53363,53365],{"class":631,"line":19592},[629,53362,845],{"class":634},[629,53364,787],{"class":638},[629,53366,779],{"class":634},[629,53368,53369],{"class":631,"line":19599},[629,53370,734],{"emptyLinePlaceholder":586},[629,53372,53373,53375],{"class":631,"line":19604},[629,53374,845],{"class":634},[629,53376,53377],{"class":638},"Levioso\n",[629,53379,53380,53382,53384,53386,53389],{"class":631,"line":19625},[629,53381,7969],{"class":642},[629,53383,649],{"class":634},[629,53385,652],{"class":634},[629,53387,53388],{"class":655},"(geometry, index) in geometries",[629,53390,3123],{"class":634},[629,53392,53393,53395,53397,53399,53402],{"class":631,"line":19638},[629,53394,7983],{"class":642},[629,53396,649],{"class":634},[629,53398,652],{"class":634},[629,53400,53401],{"class":655},"`html-occlude-blending-demo-${index}`",[629,53403,3123],{"class":634},[629,53405,53406,53408,53410,53412,53414],{"class":631,"line":19664},[629,53407,28238],{"class":642},[629,53409,649],{"class":634},[629,53411,652],{"class":634},[629,53413,19465],{"class":655},[629,53415,3123],{"class":634},[629,53417,53418,53421,53423,53425,53428],{"class":631,"line":19669},[629,53419,53420],{"class":642}," :float-factor",[629,53422,649],{"class":634},[629,53424,652],{"class":634},[629,53426,53427],{"class":655},"3.5",[629,53429,3123],{"class":634},[629,53431,53432,53435,53437,53439,53441],{"class":631,"line":19676},[629,53433,53434],{"class":642}," :rotation-factor",[629,53436,649],{"class":634},[629,53438,652],{"class":634},[629,53440,1866],{"class":655},[629,53442,3123],{"class":634},[629,53444,53445,53448,53450,53452,53455],{"class":631,"line":19685},[629,53446,53447],{"class":642}," :range",[629,53449,649],{"class":634},[629,53451,652],{"class":634},[629,53453,53454],{"class":655},"[-0.35, 0.35]",[629,53456,3123],{"class":634},[629,53458,53459],{"class":631,"line":19690},[629,53460,51908],{"class":634},[629,53462,53463,53465,53467,53469,53471,53473,53476,53478,53480,53482,53484,53487,53489],{"class":631,"line":19699},[629,53464,856],{"class":634},[629,53466,848],{"class":638},[629,53468,1477],{"class":642},[629,53470,649],{"class":634},[629,53472,652],{"class":634},[629,53474,53475],{"class":655},"[index * 3.5 - 3.5, 1, 0]",[629,53477,652],{"class":634},[629,53479,8982],{"class":642},[629,53481,649],{"class":634},[629,53483,652],{"class":634},[629,53485,53486],{"class":655},"geometry.bind",[629,53488,652],{"class":634},[629,53490,661],{"class":634},[629,53492,53493,53495,53498,53501,53503,53505,53508,53510,53512,53514,53516,53519,53521],{"class":631,"line":19718},[629,53494,25925],{"class":634},[629,53496,53497],{"class":638},"component",[629,53499,53500],{"class":642}," :is",[629,53502,649],{"class":634},[629,53504,652],{"class":634},[629,53506,53507],{"class":655},"geometry.component",[629,53509,652],{"class":634},[629,53511,1951],{"class":642},[629,53513,649],{"class":634},[629,53515,652],{"class":634},[629,53517,53518],{"class":655},"geometry.args",[629,53520,652],{"class":634},[629,53522,779],{"class":634},[629,53524,53525,53527,53529],{"class":631,"line":19728},[629,53526,25925],{"class":634},[629,53528,869],{"class":638},[629,53530,779],{"class":634},[629,53532,53533,53535,53537],{"class":631,"line":19763},[629,53534,25964],{"class":634},[629,53536,848],{"class":638},[629,53538,661],{"class":634},[629,53540,53541,53543,53545],{"class":631,"line":19772},[629,53542,877],{"class":634},[629,53544,8410],{"class":638},[629,53546,661],{"class":634},[629,53548,53549],{"class":631,"line":19792},[629,53550,734],{"emptyLinePlaceholder":586},[629,53552,53554,53556],{"class":53553,"line":19801},[631,665],[629,53555,845],{"class":634},[629,53557,51848],{"class":638},[629,53559,53561],{"class":53560,"line":19810},[631,665],[629,53562,51854],{"class":642},[629,53564,53566],{"class":53565,"line":19829},[631,665],[629,53567,51860],{"class":642},[629,53569,53571,53574,53576,53578,53580],{"class":53570,"line":19872},[631,665],[629,53572,53573],{"class":642}," occlude",[629,53575,649],{"class":634},[629,53577,652],{"class":634},[629,53579,47842],{"class":655},[629,53581,3123],{"class":634},[629,53583,53585,53587,53589,53591,53594],{"class":53584,"line":19914},[631,665],[629,53586,7997],{"class":642},[629,53588,649],{"class":634},[629,53590,652],{"class":634},[629,53592,53593],{"class":655},"[-4, .75, -2]",[629,53595,3123],{"class":634},[629,53597,53599,53602,53604,53606,53608],{"class":53598,"line":19934},[631,665],[629,53600,53601],{"class":642}," :z-index-range",[629,53603,649],{"class":634},[629,53605,652],{"class":634},[629,53607,52217],{"class":655},[629,53609,3123],{"class":634},[629,53611,53613],{"class":53612,"line":19963},[631,665],[629,53614,51908],{"class":634},[629,53616,53618,53620,53622,53624,53626,53628,53631,53633],{"class":53617,"line":19972},[631,665],[629,53619,856],{"class":634},[629,53621,4111],{"class":638},[629,53623,23178],{"class":642},[629,53625,649],{"class":634},[629,53627,652],{"class":634},[629,53629,53630],{"class":655},"text-center text-s p-2 bg-[#1B1C1E] text-light",[629,53632,652],{"class":634},[629,53634,661],{"class":634},[629,53636,53638,53641,53643,53645],{"class":53637,"line":19981},[631,665],[629,53639,53640],{"class":675}," BASIC 💛 ",[629,53642,635],{"class":634},[629,53644,7547],{"class":638},[629,53646,779],{"class":634},[629,53648,53650,53652,53654,53656,53659,53661,53663],{"class":53649,"line":52751},[631,665],[629,53651,25925],{"class":634},[629,53653,1666],{"class":638},[629,53655,3643],{"class":634},[629,53657,53658],{"class":675},"occlude=blending",[629,53660,724],{"class":634},[629,53662,1666],{"class":638},[629,53664,661],{"class":634},[629,53666,53668,53670,53672],{"class":53667,"line":52752},[631,665],[629,53669,25964],{"class":634},[629,53671,4111],{"class":638},[629,53673,661],{"class":634},[629,53675,53677,53679,53681],{"class":631,"line":53676},73,[629,53678,877],{"class":634},[629,53680,51944],{"class":638},[629,53682,661],{"class":634},[629,53684,53686],{"class":53685,"line":52753},[631,665],[629,53687,734],{"emptyLinePlaceholder":586},[629,53689,53691,53693],{"class":53690,"line":52754},[631,665],[629,53692,845],{"class":634},[629,53694,51848],{"class":638},[629,53696,53698],{"class":53697,"line":52755},[631,665],[629,53699,51854],{"class":642},[629,53701,53703],{"class":53702,"line":52756},[631,665],[629,53704,51860],{"class":642},[629,53706,53708,53710,53712,53714,53716],{"class":53707,"line":52757},[631,665],[629,53709,53573],{"class":642},[629,53711,649],{"class":634},[629,53713,652],{"class":634},[629,53715,47842],{"class":655},[629,53717,3123],{"class":634},[629,53719,53721,53723,53725,53727,53730],{"class":53720,"line":52758},[631,665],[629,53722,7997],{"class":642},[629,53724,649],{"class":634},[629,53726,652],{"class":634},[629,53728,53729],{"class":655},"[0, .85, -2]",[629,53731,3123],{"class":634},[629,53733,53735,53738,53740,53742,53745],{"class":53734,"line":52759},[631,665],[629,53736,53737],{"class":642}," :geometry",[629,53739,649],{"class":634},[629,53741,652],{"class":634},[629,53743,53744],{"class":655},"customGeometry",[629,53746,3123],{"class":634},[629,53748,53750,53752,53754,53756,53758],{"class":53749,"line":52760},[631,665],[629,53751,53601],{"class":642},[629,53753,649],{"class":634},[629,53755,652],{"class":634},[629,53757,52217],{"class":655},[629,53759,3123],{"class":634},[629,53761,53763],{"class":53762,"line":52761},[631,665],[629,53764,51908],{"class":634},[629,53766,53768,53770,53772,53774,53776,53778,53781,53783],{"class":53767,"line":52762},[631,665],[629,53769,856],{"class":634},[629,53771,4111],{"class":638},[629,53773,23178],{"class":642},[629,53775,649],{"class":634},[629,53777,652],{"class":634},[629,53779,53780],{"class":655},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[629,53782,652],{"class":634},[629,53784,661],{"class":634},[629,53786,53788,53791,53793,53795,53798,53801,53803,53805,53808,53810,53812,53814,53817,53819,53821],{"class":53787,"line":52763},[631,665],[629,53789,53790],{"class":675}," CUSTOM ",[629,53792,635],{"class":634},[629,53794,7547],{"class":638},[629,53796,53797],{"class":634}," />",[629,53799,53800],{"class":634}," \u003C",[629,53802,1661],{"class":638},[629,53804,3643],{"class":634},[629,53806,53807],{"class":675},"CIRCLE ",[629,53809,635],{"class":634},[629,53811,7547],{"class":638},[629,53813,53797],{"class":634},[629,53815,53816],{"class":675}," GEOMETRY",[629,53818,724],{"class":634},[629,53820,1661],{"class":638},[629,53822,661],{"class":634},[629,53824,53826,53828,53830],{"class":631,"line":53825},85,[629,53827,25964],{"class":634},[629,53829,4111],{"class":638},[629,53831,661],{"class":634},[629,53833,53835,53837,53839],{"class":53834,"line":52764},[631,665],[629,53836,877],{"class":634},[629,53838,51944],{"class":638},[629,53840,661],{"class":634},[629,53842,53844],{"class":53843,"line":52765},[631,665],[629,53845,734],{"emptyLinePlaceholder":586},[629,53847,53849,53851],{"class":53848,"line":52766},[631,665],[629,53850,845],{"class":634},[629,53852,51848],{"class":638},[629,53854,53856,53858,53860,53862,53865],{"class":53855,"line":52767},[631,665],[629,53857,24233],{"class":642},[629,53859,649],{"class":634},[629,53861,652],{"class":634},[629,53863,53864],{"class":655},"targetDirectionLightRef",[629,53866,3123],{"class":634},[629,53868,53870],{"class":53869,"line":52768},[631,665],[629,53871,51854],{"class":642},[629,53873,53875],{"class":53874,"line":52769},[631,665],[629,53876,51860],{"class":642},[629,53878,53880,53882,53884,53886,53888],{"class":53879,"line":52770},[631,665],[629,53881,53573],{"class":642},[629,53883,649],{"class":634},[629,53885,652],{"class":634},[629,53887,47842],{"class":655},[629,53889,3123],{"class":634},[629,53891,53893,53895,53897,53899,53902],{"class":53892,"line":52771},[631,665],[629,53894,7997],{"class":642},[629,53896,649],{"class":634},[629,53898,652],{"class":634},[629,53900,53901],{"class":655},"[4, .5, -2]",[629,53903,3123],{"class":634},[629,53905,53907,53910,53912,53914,53917],{"class":53906,"line":52772},[631,665],[629,53908,53909],{"class":642}," :material",[629,53911,649],{"class":634},[629,53913,652],{"class":634},[629,53915,53916],{"class":655},"customMaterial",[629,53918,3123],{"class":634},[629,53920,53922],{"class":53921,"line":52773},[631,665],[629,53923,53924],{"class":642}," receive-shadow\n",[629,53926,53928,53930,53932,53934,53936],{"class":53927,"line":52774},[631,665],[629,53929,53601],{"class":642},[629,53931,649],{"class":634},[629,53933,652],{"class":634},[629,53935,52217],{"class":655},[629,53937,3123],{"class":634},[629,53939,53941],{"class":631,"line":53940},97,[629,53942,51908],{"class":634},[629,53944,53946,53948,53950,53952,53954,53956,53959,53961,53963,53965],{"class":53945,"line":52775},[631,665],[629,53947,856],{"class":634},[629,53949,4111],{"class":638},[629,53951,4114],{"class":642},[629,53953,649],{"class":634},[629,53955,652],{"class":634},[629,53957,53958],{"class":655},"width: 100px; height: auto; aspect-ratio: 250/250;",[629,53960,652],{"class":634},[629,53962,23215],{"class":634},[629,53964,4111],{"class":638},[629,53966,661],{"class":634},[629,53968,53970,53972,53974],{"class":53969,"line":52776},[631,665],[629,53971,877],{"class":634},[629,53973,51944],{"class":638},[629,53975,661],{"class":634},[629,53977,53979],{"class":53978,"line":52777},[631,665],[629,53980,734],{"emptyLinePlaceholder":586},[629,53982,53984,53986],{"class":53983,"line":52778},[631,665],[629,53985,845],{"class":634},[629,53987,51848],{"class":638},[629,53989,53991],{"class":53990,"line":52779},[631,665],[629,53992,51854],{"class":642},[629,53994,53996],{"class":53995,"line":52780},[631,665],[629,53997,51860],{"class":642},[629,53999,54001,54003,54005,54007,54009],{"class":54000,"line":52781},[631,665],[629,54002,53573],{"class":642},[629,54004,649],{"class":634},[629,54006,652],{"class":634},[629,54008,47842],{"class":655},[629,54010,3123],{"class":634},[629,54012,54014,54016,54018,54020,54023],{"class":54013,"line":52782},[631,665],[629,54015,7997],{"class":642},[629,54017,649],{"class":634},[629,54019,652],{"class":634},[629,54021,54022],{"class":655},"[4, 2.5, -2]",[629,54024,3123],{"class":634},[629,54026,54028,54030,54032,54034,54036],{"class":54027,"line":52783},[631,665],[629,54029,53601],{"class":642},[629,54031,649],{"class":634},[629,54033,652],{"class":634},[629,54035,52217],{"class":655},[629,54037,3123],{"class":634},[629,54039,54041],{"class":54040,"line":52784},[631,665],[629,54042,51908],{"class":634},[629,54044,54046,54048,54050,54052,54054,54056,54059,54061],{"class":54045,"line":52785},[631,665],[629,54047,856],{"class":634},[629,54049,4111],{"class":638},[629,54051,23178],{"class":642},[629,54053,649],{"class":634},[629,54055,652],{"class":634},[629,54057,54058],{"class":655},"text-center text-xs p-2 text-dark bg-[#FF0000]",[629,54060,652],{"class":634},[629,54062,661],{"class":634},[629,54064,54066,54068,54070,54072,54075,54077,54079,54081,54083,54085],{"class":631,"line":54065},109,[629,54067,25925],{"class":634},[629,54069,1661],{"class":638},[629,54071,3643],{"class":634},[629,54073,54074],{"class":675},"HTML + Custom material ",[629,54076,724],{"class":634},[629,54078,1661],{"class":638},[629,54080,3643],{"class":634},[629,54082,53800],{"class":634},[629,54084,7547],{"class":638},[629,54086,779],{"class":634},[629,54088,54090,54092,54094,54096,54099,54101,54103,54105],{"class":631,"line":54089},110,[629,54091,25925],{"class":634},[629,54093,1666],{"class":638},[629,54095,3643],{"class":634},[629,54097,54098],{"class":675},"+ receive-shadow ",[629,54100,724],{"class":634},[629,54102,1666],{"class":638},[629,54104,3643],{"class":634},[629,54106,54107],{"class":675}," ⬇️\n",[629,54109,54111,54113,54115],{"class":631,"line":54110},111,[629,54112,25964],{"class":634},[629,54114,4111],{"class":638},[629,54116,661],{"class":634},[629,54118,54120,54122,54124],{"class":631,"line":54119},112,[629,54121,877],{"class":634},[629,54123,51944],{"class":638},[629,54125,661],{"class":634},[629,54127,54129],{"class":631,"line":54128},113,[629,54130,734],{"emptyLinePlaceholder":586},[629,54132,54134,54136],{"class":631,"line":54133},114,[629,54135,845],{"class":634},[629,54137,15307],{"class":638},[629,54139,54141,54144,54146,54148,54151],{"class":631,"line":54140},115,[629,54142,54143],{"class":642}," v-if",[629,54145,649],{"class":634},[629,54147,652],{"class":634},[629,54149,54150],{"class":655},"targetDirectionLightRef?.instance",[629,54152,3123],{"class":634},[629,54154,54156,54159,54161,54163,54165],{"class":631,"line":54155},116,[629,54157,54158],{"class":642}," :target",[629,54160,649],{"class":634},[629,54162,652],{"class":634},[629,54164,54150],{"class":655},[629,54166,3123],{"class":634},[629,54168,54170,54173,54175,54177,54180],{"class":631,"line":54169},117,[629,54171,54172],{"class":642}," :shadow-normalBias",[629,54174,649],{"class":634},[629,54176,652],{"class":634},[629,54178,54179],{"class":655},"0.075",[629,54181,3123],{"class":634},[629,54183,54185,54187,54189,54191,54194],{"class":631,"line":54184},118,[629,54186,7997],{"class":642},[629,54188,649],{"class":634},[629,54190,652],{"class":634},[629,54192,54193],{"class":655},"[5, 0, 5]",[629,54195,3123],{"class":634},[629,54197,54199,54201,54203,54205,54207],{"class":631,"line":54198},119,[629,54200,40821],{"class":642},[629,54202,649],{"class":634},[629,54204,652],{"class":634},[629,54206,812],{"class":655},[629,54208,3123],{"class":634},[629,54210,54212],{"class":631,"line":54211},120,[629,54213,54214],{"class":642}," cast-shadow\n",[629,54216,54218],{"class":631,"line":54217},121,[629,54219,8025],{"class":634},[629,54221,54223],{"class":631,"line":54222},122,[629,54224,734],{"emptyLinePlaceholder":586},[629,54226,54228,54230,54232,54234,54236,54238,54240,54242],{"class":631,"line":54227},123,[629,54229,845],{"class":634},[629,54231,8041],{"class":638},[629,54233,1931],{"class":642},[629,54235,649],{"class":634},[629,54237,652],{"class":634},[629,54239,8961],{"class":655},[629,54241,652],{"class":634},[629,54243,779],{"class":634},[629,54245,54247,54249,54251,54253,54255,54257,54259,54261],{"class":631,"line":54246},124,[629,54248,845],{"class":634},[629,54250,8448],{"class":638},[629,54252,1859],{"class":642},[629,54254,649],{"class":634},[629,54256,652],{"class":634},[629,54258,1866],{"class":655},[629,54260,652],{"class":634},[629,54262,779],{"class":634},[629,54264,54266,54268,54270],{"class":631,"line":54265},125,[629,54267,887],{"class":634},[629,54269,753],{"class":638},[629,54271,661],{"class":634},[629,54273,54275,54277,54279],{"class":631,"line":54274},126,[629,54276,897],{"class":634},[629,54278,4111],{"class":638},[629,54280,661],{"class":634},[629,54282,54284,54286,54288],{"class":631,"line":54283},127,[629,54285,724],{"class":634},[629,54287,742],{"class":638},[629,54289,661],{"class":634},[629,54291,54293],{"class":631,"line":54292},128,[629,54294,734],{"emptyLinePlaceholder":586},[629,54296,54298,54300,54302,54304],{"class":631,"line":54297},129,[629,54299,635],{"class":634},[629,54301,1319],{"class":638},[629,54303,51995],{"class":642},[629,54305,661],{"class":634},[629,54307,54309,54311,54314],{"class":631,"line":54308},130,[629,54310,1138],{"class":634},[629,54312,54313],{"class":1192},"html-demo-wrapper",[629,54315,1196],{"class":634},[629,54317,54319,54321,54323,54326],{"class":631,"line":54318},131,[629,54320,1232],{"class":4121},[629,54322,1210],{"class":634},[629,54324,54325],{"class":2493}," 100%",[629,54327,8289],{"class":634},[629,54329,54331,54333,54335,54337],{"class":631,"line":54330},132,[629,54332,1242],{"class":4121},[629,54334,1210],{"class":634},[629,54336,54325],{"class":2493},[629,54338,8289],{"class":634},[629,54340,54342,54344,54346,54348],{"class":631,"line":54341},133,[629,54343,5337],{"class":4121},[629,54345,1210],{"class":634},[629,54347,4127],{"class":675},[629,54349,8289],{"class":634},[629,54351,54353,54356,54358,54361],{"class":631,"line":54352},134,[629,54354,54355],{"class":4121}," overflow",[629,54357,1210],{"class":634},[629,54359,54360],{"class":675}," hidden",[629,54362,8289],{"class":634},[629,54364,54366,54368,54370,54372,54375],{"class":631,"line":54365},135,[629,54367,52010],{"class":4121},[629,54369,1210],{"class":634},[629,54371,52015],{"class":634},[629,54373,54374],{"class":675},"82dbc5",[629,54376,8289],{"class":634},[629,54378,54380],{"class":631,"line":54379},136,[629,54381,1317],{"class":634},[629,54383,54385,54387,54389],{"class":631,"line":54384},137,[629,54386,724],{"class":634},[629,54388,1319],{"class":638},[629,54390,661],{"class":634},[496,54392,44021],{"id":44020},[606,54394,54395,54396,54399,54400,54403,54404,54406,54407,54410,54411,54415],{},"By default, when using ",[610,54397,54398],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1661,54401,54402],{},"rectangular HTML elements"," (using a ",[610,54405,31700],{},").\nFor ",[1666,54408,54409],{},"non-rectangular content",", you can use the ",[1661,54412,54413],{},[610,54414,5248],{}," prop to provide a matching custom geometry.",[606,54417,54418,54419,3186,54422,54425,54426,54432,54433,1138],{},"In the ",[1661,54420,54421],{},"demo above ⬆️",[1666,54423,54424],{},"(middle yellow example)",", a ",[1132,54427,54430],{"href":54428,"rel":54429},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1136],[610,54431,29084],{}," is used as a ",[1661,54434,54435],{},"custom geometry",[54437,54438,54439],"prose-list",{},[2205,54440,54441,54450],{},[2208,54442,2768,54443,54445,54446,54449],{},[610,54444,5248],{}," prop only defines the ",[1661,54447,54448],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2208,54451,54452,54453,54460,54461,54464,54465,54468,54469,54476],{},"You can provide any ",[1132,54454,54457],{"href":54455,"rel":54456},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1136],[610,54458,54459],{},"BufferGeometry",", for example to simulate ",[1661,54462,54463],{},"CSS-like styles"," such as ",[610,54466,54467],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1132,54470,54473],{"href":54471,"rel":54472},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1136],[610,54474,54475],{},"RoundedRectangle / Squircle geometry"," for example).",[4043,54478,54479],{"id":2977},"Custom Material",[606,54481,54482,54483,54485,54486,3186,54488,54425,54491,54494],{},"You can also assign material properties to the HTML content using the ",[610,54484,5192],{}," prop.\nIn the ",[1661,54487,54421],{},[1666,54489,54490],{},"(right red example)",[1661,54492,54493],{},"custom material"," is used with shadow.",[1997,54496,54497],{},[606,54498,2768,54499,54501,54502,5875,54504,1138],{},[610,54500,5192],{}," prop is only available when ",[610,54503,54398],{},[1661,54505,14722],{},[1997,54507,54508],{},[606,54509,54510,54511,3055,54515,54519,54520,54523,54524,54526,54527,54529,54530,5603,54534,8158,54539],{},"Enable shadows using the ",[1661,54512,54513],{},[610,54514,16699],{},[1661,54516,54517],{},[610,54518,16717],{}," props.\nShadows are supported ",[1661,54521,54522],{},"only"," when using a ",[1661,54525,54493],{},". By default, shadows do ",[1661,54528,6333],{}," work with ",[1666,54531,54532],{},[610,54533,2983],{},[1666,54535,54536],{},[610,54537,54538],{},"ShaderMaterial",[7547,54540],{},[496,54542,54544,54545],{"id":54543},"using-transition","Using ",[610,54546,54547],{},"\u003CTransition>",[606,54549,54550,54551,54557,54558,54560,54561,54564,54565,3055,54568,54571],{},"The native Vue ",[1132,54552,54555],{"href":54553,"rel":54554},"https://vuejs.org/guide/built-ins/transition",[1136],[610,54556,54547],{}," component works seamlessly with ",[610,54559,51665],{},".\nThis means you can ",[1661,54562,54563],{},"animate"," how your projected HTML content ",[1666,54566,54567],{},"enters",[1666,54569,54570],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[1997,54573,54574],{},[606,54575,28034,54576,54579,54580,1664,54583,1680,54585,54588],{},[1661,54577,54578],{},"standard interactions"," are supported just like on a regular HTML element — ",[1661,54581,54582],{},"hover effects",[1661,54584,12341],{},[1666,54586,54587],{},"any kind of DOM interaction"," are fully possible.",[600,54590,54591],{},[54592,54593],"objects-html-transition-demo",{},[5299,54595,5301,54596,54598],{},[5303,54597,52131],{},[618,54599,54602],{"className":620,"code":54600,"highlights":54601,"language":625,"meta":568,"style":568},"\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",[570,53676,52753,52754,52755,52756,52757,52758,52759,52760,52761,52762,52763,53825,52764,52765,52766,52767,52768,52769,52770],[610,54603,54604,54624,54651,54669,54687,54691,54701,54715,54725,54735,54745,54756,54760,54764,54784,54788,54810,54814,54824,54828,54842,54864,54868,54872,54886,54908,54912,54916,54930,54956,54960,54964,54979,55002,55006,55010,55014,55032,55105,55142,55163,55167,55171,55186,55202,55206,55214,55218,55226,55255,55284,55302,55321,55325,55331,55343,55355,55367,55379,55391,55404,55408,55427,55455,55463,55471,55479,55483,55489,55493,55497,55509,55522,55536,55549,55554,55574,55582,55597,55612,55627,55642,55648,55672,55690,55700,55709,55718,55723,55743,55762,55771,55780,55788,55792,55802,55810,55820,55830,55840,55850,55862,55866,55870,55884,55902,55906,55910,55919,55928,55938,55954,55958,55962,55971,55980,55998,56002,56006,56015,56024,56034,56048,56052],{"__ignoreMap":568},[629,54605,54606,54608,54610,54612,54614,54616,54618,54620,54622],{"class":631,"line":569},[629,54607,635],{"class":634},[629,54609,639],{"class":638},[629,54611,643],{"class":642},[629,54613,646],{"class":642},[629,54615,649],{"class":634},[629,54617,652],{"class":634},[629,54619,656],{"class":655},[629,54621,652],{"class":634},[629,54623,661],{"class":634},[629,54625,54627,54629,54631,54633,54635,54637,54639,54641,54643,54645,54647,54649],{"class":54626,"line":570},[631,665],[629,54628,669],{"class":668},[629,54630,672],{"class":634},[629,54632,51709],{"class":675},[629,54634,679],{"class":634},[629,54636,8299],{"class":675},[629,54638,679],{"class":634},[629,54640,682],{"class":675},[629,54642,685],{"class":634},[629,54644,688],{"class":668},[629,54646,691],{"class":634},[629,54648,694],{"class":655},[629,54650,697],{"class":634},[629,54652,54653,54655,54657,54659,54661,54663,54665,54667],{"class":631,"line":700},[629,54654,669],{"class":668},[629,54656,672],{"class":634},[629,54658,707],{"class":675},[629,54660,685],{"class":634},[629,54662,688],{"class":668},[629,54664,691],{"class":634},[629,54666,716],{"class":655},[629,54668,697],{"class":634},[629,54670,54671,54673,54675,54677,54679,54681,54683,54685],{"class":631,"line":721},[629,54672,669],{"class":668},[629,54674,672],{"class":634},[629,54676,3864],{"class":675},[629,54678,685],{"class":634},[629,54680,688],{"class":668},[629,54682,691],{"class":634},[629,54684,625],{"class":655},[629,54686,697],{"class":634},[629,54688,54689],{"class":631,"line":731},[629,54690,734],{"emptyLinePlaceholder":586},[629,54692,54693,54695,54697,54699],{"class":631,"line":737},[629,54694,2407],{"class":642},[629,54696,52904],{"class":675},[629,54698,649],{"class":634},[629,54700,1196],{"class":634},[629,54702,54703,54705,54707,54709,54711,54713],{"class":631,"line":747},[629,54704,52913],{"class":638},[629,54706,1210],{"class":634},[629,54708,691],{"class":634},[629,54710,9852],{"class":655},[629,54712,2432],{"class":634},[629,54714,2480],{"class":634},[629,54716,54717,54719,54721,54723],{"class":631,"line":770},[629,54718,52928],{"class":638},[629,54720,1210],{"class":634},[629,54722,2498],{"class":2493},[629,54724,2480],{"class":634},[629,54726,54727,54729,54731,54733],{"class":631,"line":782},[629,54728,52939],{"class":638},[629,54730,1210],{"class":634},[629,54732,4390],{"class":4389},[629,54734,2480],{"class":634},[629,54736,54737,54739,54741,54743],{"class":631,"line":792},[629,54738,52950],{"class":638},[629,54740,1210],{"class":634},[629,54742,4390],{"class":4389},[629,54744,2480],{"class":634},[629,54746,54747,54750,54752,54754],{"class":631,"line":797},[629,54748,54749],{"class":638}," antialias",[629,54751,1210],{"class":634},[629,54753,4390],{"class":4389},[629,54755,2480],{"class":634},[629,54757,54758],{"class":631,"line":819},[629,54759,1317],{"class":634},[629,54761,54762],{"class":631,"line":623},[629,54763,734],{"emptyLinePlaceholder":586},[629,54765,54766,54768,54771,54773,54775,54777,54780,54782],{"class":631,"line":842},[629,54767,2407],{"class":642},[629,54769,54770],{"class":675}," rootRef ",[629,54772,649],{"class":634},[629,54774,3864],{"class":2426},[629,54776,635],{"class":634},[629,54778,54779],{"class":1192},"HTMLElement",[629,54781,3643],{"class":634},[629,54783,6527],{"class":675},[629,54785,54786],{"class":631,"line":853},[629,54787,734],{"emptyLinePlaceholder":586},[629,54789,54790,54792,54795,54797,54799,54801,54803,54806,54808],{"class":631,"line":864},[629,54791,2407],{"class":642},[629,54793,54794],{"class":675}," bgColor ",[629,54796,649],{"class":634},[629,54798,3864],{"class":2426},[629,54800,2429],{"class":675},[629,54802,2432],{"class":634},[629,54804,54805],{"class":655},"#F6B03B",[629,54807,2432],{"class":634},[629,54809,2440],{"class":675},[629,54811,54812],{"class":631,"line":874},[629,54813,734],{"emptyLinePlaceholder":586},[629,54815,54816,54818,54820,54822],{"class":631,"line":624},[629,54817,2407],{"class":642},[629,54819,52992],{"class":675},[629,54821,649],{"class":634},[629,54823,18772],{"class":675},[629,54825,54826],{"class":631,"line":894},[629,54827,2463],{"class":634},[629,54829,54830,54832,54834,54836,54838,54840],{"class":631,"line":904},[629,54831,53005],{"class":638},[629,54833,1210],{"class":634},[629,54835,691],{"class":634},[629,54837,859],{"class":655},[629,54839,2432],{"class":634},[629,54841,2480],{"class":634},[629,54843,54844,54846,54848,54850,54852,54854,54856,54858,54860,54862],{"class":631,"line":2617},[629,54845,53020],{"class":638},[629,54847,1210],{"class":634},[629,54849,2490],{"class":675},[629,54851,1866],{"class":2493},[629,54853,679],{"class":634},[629,54855,2553],{"class":2493},[629,54857,679],{"class":634},[629,54859,2553],{"class":2493},[629,54861,2506],{"class":675},[629,54863,2480],{"class":634},[629,54865,54866],{"class":631,"line":2626},[629,54867,2589],{"class":634},[629,54869,54870],{"class":631,"line":2646},[629,54871,2463],{"class":634},[629,54873,54874,54876,54878,54880,54882,54884],{"class":631,"line":2655},[629,54875,53005],{"class":638},[629,54877,1210],{"class":634},[629,54879,691],{"class":634},[629,54881,3950],{"class":655},[629,54883,2432],{"class":634},[629,54885,2480],{"class":634},[629,54887,54888,54890,54892,54894,54896,54898,54900,54902,54904,54906],{"class":631,"line":2664},[629,54889,53020],{"class":638},[629,54891,1210],{"class":634},[629,54893,2490],{"class":675},[629,54895,45697],{"class":2493},[629,54897,679],{"class":634},[629,54899,29126],{"class":2493},[629,54901,679],{"class":634},[629,54903,29126],{"class":2493},[629,54905,2506],{"class":675},[629,54907,2480],{"class":634},[629,54909,54910],{"class":631,"line":2673},[629,54911,2589],{"class":634},[629,54913,54914],{"class":631,"line":2695},[629,54915,2463],{"class":634},[629,54917,54918,54920,54922,54924,54926,54928],{"class":631,"line":2739},[629,54919,53005],{"class":638},[629,54921,1210],{"class":634},[629,54923,691],{"class":634},[629,54925,9924],{"class":655},[629,54927,2432],{"class":634},[629,54929,2480],{"class":634},[629,54931,54932,54934,54936,54938,54940,54942,54944,54946,54948,54950,54952,54954],{"class":631,"line":2748},[629,54933,53020],{"class":638},[629,54935,1210],{"class":634},[629,54937,2490],{"class":675},[629,54939,1938],{"class":2493},[629,54941,679],{"class":634},[629,54943,32622],{"class":2493},[629,54945,679],{"class":634},[629,54947,32627],{"class":2493},[629,54949,679],{"class":634},[629,54951,7755],{"class":2493},[629,54953,2506],{"class":675},[629,54955,2480],{"class":634},[629,54957,54958],{"class":631,"line":2757},[629,54959,2589],{"class":634},[629,54961,54962],{"class":631,"line":3914},[629,54963,2463],{"class":634},[629,54965,54966,54968,54970,54972,54975,54977],{"class":631,"line":3945},[629,54967,53005],{"class":638},[629,54969,1210],{"class":634},[629,54971,691],{"class":634},[629,54973,54974],{"class":655},"TresConeGeometry",[629,54976,2432],{"class":634},[629,54978,2480],{"class":634},[629,54980,54981,54983,54985,54987,54989,54991,54994,54996,54998,55000],{"class":631,"line":3966},[629,54982,53020],{"class":638},[629,54984,1210],{"class":634},[629,54986,2490],{"class":675},[629,54988,45697],{"class":2493},[629,54990,679],{"class":634},[629,54992,54993],{"class":2493}," 1.4",[629,54995,679],{"class":634},[629,54997,29126],{"class":2493},[629,54999,2506],{"class":675},[629,55001,2480],{"class":634},[629,55003,55004],{"class":631,"line":3985},[629,55005,2589],{"class":634},[629,55007,55008],{"class":631,"line":4017},[629,55009,18808],{"class":675},[629,55011,55012],{"class":631,"line":4026},[629,55013,734],{"emptyLinePlaceholder":586},[629,55015,55016,55018,55021,55023,55026,55028,55030],{"class":631,"line":4035},[629,55017,2407],{"class":642},[629,55019,55020],{"class":675}," getRandomBackgroundColor ",[629,55022,649],{"class":634},[629,55024,55025],{"class":634}," ():",[629,55027,5329],{"class":1192},[629,55029,3669],{"class":642},[629,55031,1196],{"class":634},[629,55033,55034,55037,55040,55042,55044,55046,55048,55050,55052,55054,55056,55058,55060,55062,55065,55067,55069,55071,55074,55076,55078,55080,55083,55085,55087,55089,55092,55094,55096,55098,55101,55103],{"class":631,"line":19512},[629,55035,55036],{"class":642}," const",[629,55038,55039],{"class":675}," colors",[629,55041,2423],{"class":634},[629,55043,2490],{"class":638},[629,55045,2432],{"class":634},[629,55047,54805],{"class":655},[629,55049,2432],{"class":634},[629,55051,679],{"class":634},[629,55053,691],{"class":634},[629,55055,9852],{"class":655},[629,55057,2432],{"class":634},[629,55059,679],{"class":634},[629,55061,691],{"class":634},[629,55063,55064],{"class":655},"#FF5733",[629,55066,2432],{"class":634},[629,55068,679],{"class":634},[629,55070,691],{"class":634},[629,55072,55073],{"class":655},"#33FF57",[629,55075,2432],{"class":634},[629,55077,679],{"class":634},[629,55079,691],{"class":634},[629,55081,55082],{"class":655},"#3357FF",[629,55084,2432],{"class":634},[629,55086,679],{"class":634},[629,55088,691],{"class":634},[629,55090,55091],{"class":655},"#F333FF",[629,55093,2432],{"class":634},[629,55095,679],{"class":634},[629,55097,691],{"class":634},[629,55099,55100],{"class":655},"#33FFF5",[629,55102,2432],{"class":634},[629,55104,18808],{"class":638},[629,55106,55107,55109,55112,55114,55116,55118,55120,55122,55125,55127,55130,55132,55134,55136,55138,55140],{"class":631,"line":19527},[629,55108,55036],{"class":642},[629,55110,55111],{"class":675}," idx",[629,55113,2423],{"class":634},[629,55115,29885],{"class":675},[629,55117,1138],{"class":634},[629,55119,43779],{"class":2426},[629,55121,2429],{"class":638},[629,55123,55124],{"class":675},"Math",[629,55126,1138],{"class":634},[629,55128,55129],{"class":2426},"random",[629,55131,6976],{"class":638},[629,55133,21192],{"class":634},[629,55135,55039],{"class":675},[629,55137,1138],{"class":634},[629,55139,19342],{"class":675},[629,55141,2440],{"class":638},[629,55143,55144,55146,55148,55150,55153,55155,55157,55159,55161],{"class":631,"line":19542},[629,55145,21158],{"class":668},[629,55147,55039],{"class":675},[629,55149,19405],{"class":638},[629,55151,55152],{"class":675},"idx",[629,55154,5356],{"class":638},[629,55156,3686],{"class":634},[629,55158,691],{"class":634},[629,55160,54805],{"class":655},[629,55162,697],{"class":634},[629,55164,55165],{"class":631,"line":19547},[629,55166,1317],{"class":634},[629,55168,55169],{"class":631,"line":19554},[629,55170,734],{"emptyLinePlaceholder":586},[629,55172,55173,55175,55178,55180,55182,55184],{"class":631,"line":19559},[629,55174,2407],{"class":642},[629,55176,55177],{"class":675}," updateBackgroundColor ",[629,55179,649],{"class":634},[629,55181,7072],{"class":634},[629,55183,3669],{"class":642},[629,55185,1196],{"class":634},[629,55187,55188,55191,55193,55195,55197,55200],{"class":631,"line":19565},[629,55189,55190],{"class":675}," bgColor",[629,55192,1138],{"class":634},[629,55194,3677],{"class":675},[629,55196,2423],{"class":634},[629,55198,55199],{"class":2426}," getRandomBackgroundColor",[629,55201,6527],{"class":638},[629,55203,55204],{"class":631,"line":19586},[629,55205,1317],{"class":634},[629,55207,55208,55210,55212],{"class":631,"line":19592},[629,55209,724],{"class":634},[629,55211,639],{"class":638},[629,55213,661],{"class":634},[629,55215,55216],{"class":631,"line":19599},[629,55217,734],{"emptyLinePlaceholder":586},[629,55219,55220,55222,55224],{"class":631,"line":19604},[629,55221,635],{"class":634},[629,55223,742],{"class":638},[629,55225,661],{"class":634},[629,55227,55228,55230,55232,55234,55236,55238,55241,55243,55245,55247,55249,55251,55253],{"class":631,"line":19625},[629,55229,750],{"class":634},[629,55231,4111],{"class":638},[629,55233,3864],{"class":642},[629,55235,649],{"class":634},[629,55237,652],{"class":634},[629,55239,55240],{"class":655},"rootRef",[629,55242,652],{"class":634},[629,55244,23178],{"class":642},[629,55246,649],{"class":634},[629,55248,652],{"class":634},[629,55250,54313],{"class":655},[629,55252,652],{"class":634},[629,55254,661],{"class":634},[629,55256,55257,55259,55261,55263,55265,55267,55269,55271,55273,55275,55277,55280,55282],{"class":631,"line":19638},[629,55258,773],{"class":634},[629,55260,753],{"class":638},[629,55262,8982],{"class":642},[629,55264,649],{"class":634},[629,55266,652],{"class":634},[629,55268,53335],{"class":655},[629,55270,652],{"class":634},[629,55272,23178],{"class":642},[629,55274,649],{"class":634},[629,55276,652],{"class":634},[629,55278,55279],{"class":655},"!pointer-events-none",[629,55281,652],{"class":634},[629,55283,661],{"class":634},[629,55285,55286,55288,55290,55292,55294,55296,55298,55300],{"class":631,"line":19664},[629,55287,845],{"class":634},[629,55289,776],{"class":638},[629,55291,1477],{"class":642},[629,55293,649],{"class":634},[629,55295,652],{"class":634},[629,55297,53354],{"class":655},[629,55299,652],{"class":634},[629,55301,779],{"class":634},[629,55303,55304,55306,55308,55311,55313,55315,55317,55319],{"class":631,"line":19669},[629,55305,845],{"class":634},[629,55307,787],{"class":638},[629,55309,55310],{"class":642}," :dom-element",[629,55312,649],{"class":634},[629,55314,652],{"class":634},[629,55316,55240],{"class":655},[629,55318,652],{"class":634},[629,55320,779],{"class":634},[629,55322,55323],{"class":631,"line":19676},[629,55324,734],{"emptyLinePlaceholder":586},[629,55326,55327,55329],{"class":631,"line":19685},[629,55328,845],{"class":634},[629,55330,53377],{"class":638},[629,55332,55333,55335,55337,55339,55341],{"class":631,"line":19690},[629,55334,7969],{"class":642},[629,55336,649],{"class":634},[629,55338,652],{"class":634},[629,55340,53388],{"class":655},[629,55342,3123],{"class":634},[629,55344,55345,55347,55349,55351,55353],{"class":631,"line":19699},[629,55346,7983],{"class":642},[629,55348,649],{"class":634},[629,55350,652],{"class":634},[629,55352,53401],{"class":655},[629,55354,3123],{"class":634},[629,55356,55357,55359,55361,55363,55365],{"class":631,"line":19718},[629,55358,28238],{"class":642},[629,55360,649],{"class":634},[629,55362,652],{"class":634},[629,55364,19465],{"class":655},[629,55366,3123],{"class":634},[629,55368,55369,55371,55373,55375,55377],{"class":631,"line":19728},[629,55370,53420],{"class":642},[629,55372,649],{"class":634},[629,55374,652],{"class":634},[629,55376,53427],{"class":655},[629,55378,3123],{"class":634},[629,55380,55381,55383,55385,55387,55389],{"class":631,"line":19763},[629,55382,53434],{"class":642},[629,55384,649],{"class":634},[629,55386,652],{"class":634},[629,55388,1866],{"class":655},[629,55390,3123],{"class":634},[629,55392,55393,55395,55397,55399,55402],{"class":631,"line":19772},[629,55394,53447],{"class":642},[629,55396,649],{"class":634},[629,55398,652],{"class":634},[629,55400,55401],{"class":655},"[-0.4, 0.4]",[629,55403,3123],{"class":634},[629,55405,55406],{"class":631,"line":19792},[629,55407,51908],{"class":634},[629,55409,55410,55412,55414,55416,55418,55420,55423,55425],{"class":631,"line":19801},[629,55411,856],{"class":634},[629,55413,848],{"class":638},[629,55415,1477],{"class":642},[629,55417,649],{"class":634},[629,55419,652],{"class":634},[629,55421,55422],{"class":655},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[629,55424,652],{"class":634},[629,55426,661],{"class":634},[629,55428,55429,55431,55433,55435,55437,55439,55441,55443,55445,55447,55449,55451,55453],{"class":631,"line":19810},[629,55430,25925],{"class":634},[629,55432,53497],{"class":638},[629,55434,53500],{"class":642},[629,55436,649],{"class":634},[629,55438,652],{"class":634},[629,55440,53507],{"class":655},[629,55442,652],{"class":634},[629,55444,1951],{"class":642},[629,55446,649],{"class":634},[629,55448,652],{"class":634},[629,55450,53518],{"class":655},[629,55452,652],{"class":634},[629,55454,779],{"class":634},[629,55456,55457,55459,55461],{"class":631,"line":19829},[629,55458,25925],{"class":634},[629,55460,869],{"class":638},[629,55462,779],{"class":634},[629,55464,55465,55467,55469],{"class":631,"line":19872},[629,55466,25964],{"class":634},[629,55468,848],{"class":638},[629,55470,661],{"class":634},[629,55472,55473,55475,55477],{"class":631,"line":19914},[629,55474,877],{"class":634},[629,55476,8410],{"class":638},[629,55478,661],{"class":634},[629,55480,55481],{"class":631,"line":19934},[629,55482,734],{"emptyLinePlaceholder":586},[629,55484,55485,55487],{"class":631,"line":19963},[629,55486,845],{"class":634},[629,55488,51848],{"class":638},[629,55490,55491],{"class":631,"line":19972},[629,55492,51854],{"class":642},[629,55494,55495],{"class":631,"line":19981},[629,55496,51860],{"class":642},[629,55498,55499,55501,55503,55505,55507],{"class":631,"line":52751},[629,55500,53573],{"class":642},[629,55502,649],{"class":634},[629,55504,652],{"class":634},[629,55506,47842],{"class":655},[629,55508,3123],{"class":634},[629,55510,55511,55513,55515,55517,55520],{"class":631,"line":52752},[629,55512,7997],{"class":642},[629,55514,649],{"class":634},[629,55516,652],{"class":634},[629,55518,55519],{"class":655},"[0, .75, -2]",[629,55521,3123],{"class":634},[629,55523,55525,55527,55529,55531,55534],{"class":55524,"line":53676},[631,665],[629,55526,51894],{"class":642},[629,55528,649],{"class":634},[629,55530,652],{"class":634},[629,55532,55533],{"class":655},"1.15",[629,55535,3123],{"class":634},[629,55537,55539,55541,55543,55545,55547],{"class":55538,"line":52753},[631,665],[629,55540,53601],{"class":642},[629,55542,649],{"class":634},[629,55544,652],{"class":634},[629,55546,52217],{"class":655},[629,55548,3123],{"class":634},[629,55550,55552],{"class":55551,"line":52754},[631,665],[629,55553,51908],{"class":634},[629,55555,55557,55559,55561,55563,55565,55567,55570,55572],{"class":55556,"line":52755},[631,665],[629,55558,856],{"class":634},[629,55560,23242],{"class":638},[629,55562,3807],{"class":642},[629,55564,649],{"class":634},[629,55566,652],{"class":634},[629,55568,55569],{"class":655},"transition-basic",[629,55571,652],{"class":634},[629,55573,661],{"class":634},[629,55575,55577,55579],{"class":55576,"line":52756},[631,665],[629,55578,25925],{"class":634},[629,55580,55581],{"class":638},"h1\n",[629,55583,55585,55588,55590,55592,55595],{"class":55584,"line":52757},[631,665],[629,55586,55587],{"class":642}," v-if",[629,55589,649],{"class":634},[629,55591,652],{"class":634},[629,55593,55594],{"class":655},"showTransition",[629,55596,3123],{"class":634},[629,55598,55600,55603,55605,55607,55610],{"class":55599,"line":52758},[631,665],[629,55601,55602],{"class":642}," :style",[629,55604,649],{"class":634},[629,55606,652],{"class":634},[629,55608,55609],{"class":655},"{ backgroundColor: bgColor }",[629,55611,3123],{"class":634},[629,55613,55615,55618,55620,55622,55625],{"class":55614,"line":52759},[631,665],[629,55616,55617],{"class":642}," class",[629,55619,649],{"class":634},[629,55621,652],{"class":634},[629,55623,55624],{"class":655},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[629,55626,3123],{"class":634},[629,55628,55630,55633,55635,55637,55640],{"class":55629,"line":52760},[631,665],[629,55631,55632],{"class":642}," @click",[629,55634,649],{"class":634},[629,55636,652],{"class":634},[629,55638,55639],{"class":655},"updateBackgroundColor",[629,55641,3123],{"class":634},[629,55643,55645],{"class":55644,"line":52761},[631,665],[629,55646,55647],{"class":634}," >\n",[629,55649,55651,55654,55656,55658,55661,55663,55665,55668,55670],{"class":55650,"line":52762},[631,665],[629,55652,55653],{"class":634}," \u003C",[629,55655,1661],{"class":638},[629,55657,3643],{"class":634},[629,55659,55660],{"class":675},"TRANSITION + ",[629,55662,724],{"class":634},[629,55664,1661],{"class":638},[629,55666,55667],{"class":634},">\u003C",[629,55669,7547],{"class":638},[629,55671,779],{"class":634},[629,55673,55675,55677,55679,55681,55684,55686,55688],{"class":55674,"line":52763},[631,665],[629,55676,55653],{"class":634},[629,55678,1666],{"class":638},[629,55680,3643],{"class":634},[629,55682,55683],{"class":675},"occlude=blending 💛",[629,55685,724],{"class":634},[629,55687,1666],{"class":638},[629,55689,661],{"class":634},[629,55691,55693,55696,55698],{"class":55692,"line":53825},[631,665],[629,55694,55695],{"class":634}," \u003C/",[629,55697,51915],{"class":638},[629,55699,661],{"class":634},[629,55701,55703,55705,55707],{"class":55702,"line":52764},[631,665],[629,55704,25964],{"class":634},[629,55706,23242],{"class":638},[629,55708,661],{"class":634},[629,55710,55712,55714,55716],{"class":55711,"line":52765},[631,665],[629,55713,877],{"class":634},[629,55715,51944],{"class":638},[629,55717,661],{"class":634},[629,55719,55721],{"class":55720,"line":52766},[631,665],[629,55722,734],{"emptyLinePlaceholder":586},[629,55724,55726,55728,55730,55732,55734,55736,55739,55741],{"class":55725,"line":52767},[631,665],[629,55727,845],{"class":634},[629,55729,8041],{"class":638},[629,55731,1931],{"class":642},[629,55733,649],{"class":634},[629,55735,652],{"class":634},[629,55737,55738],{"class":655},"-1.25",[629,55740,652],{"class":634},[629,55742,779],{"class":634},[629,55744,55746,55748,55750,55752,55754,55756,55758,55760],{"class":55745,"line":52768},[631,665],[629,55747,845],{"class":634},[629,55749,8448],{"class":638},[629,55751,1859],{"class":642},[629,55753,649],{"class":634},[629,55755,652],{"class":634},[629,55757,1866],{"class":655},[629,55759,652],{"class":634},[629,55761,779],{"class":634},[629,55763,55765,55767,55769],{"class":55764,"line":52769},[631,665],[629,55766,887],{"class":634},[629,55768,753],{"class":638},[629,55770,661],{"class":634},[629,55772,55774,55776,55778],{"class":55773,"line":52770},[631,665],[629,55775,897],{"class":634},[629,55777,4111],{"class":638},[629,55779,661],{"class":634},[629,55781,55782,55784,55786],{"class":631,"line":52771},[629,55783,724],{"class":634},[629,55785,742],{"class":638},[629,55787,661],{"class":634},[629,55789,55790],{"class":631,"line":52772},[629,55791,734],{"emptyLinePlaceholder":586},[629,55793,55794,55796,55798,55800],{"class":631,"line":52773},[629,55795,635],{"class":634},[629,55797,1319],{"class":638},[629,55799,51995],{"class":642},[629,55801,661],{"class":634},[629,55803,55804,55806,55808],{"class":631,"line":52774},[629,55805,1138],{"class":634},[629,55807,54313],{"class":1192},[629,55809,1196],{"class":634},[629,55811,55812,55814,55816,55818],{"class":631,"line":53940},[629,55813,1232],{"class":4121},[629,55815,1210],{"class":634},[629,55817,54325],{"class":2493},[629,55819,8289],{"class":634},[629,55821,55822,55824,55826,55828],{"class":631,"line":52775},[629,55823,1242],{"class":4121},[629,55825,1210],{"class":634},[629,55827,54325],{"class":2493},[629,55829,8289],{"class":634},[629,55831,55832,55834,55836,55838],{"class":631,"line":52776},[629,55833,5337],{"class":4121},[629,55835,1210],{"class":634},[629,55837,4127],{"class":675},[629,55839,8289],{"class":634},[629,55841,55842,55844,55846,55848],{"class":631,"line":52777},[629,55843,54355],{"class":4121},[629,55845,1210],{"class":634},[629,55847,54360],{"class":675},[629,55849,8289],{"class":634},[629,55851,55852,55854,55856,55858,55860],{"class":631,"line":52778},[629,55853,52010],{"class":4121},[629,55855,1210],{"class":634},[629,55857,52015],{"class":634},[629,55859,54374],{"class":675},[629,55861,8289],{"class":634},[629,55863,55864],{"class":631,"line":52779},[629,55865,1317],{"class":634},[629,55867,55868],{"class":631,"line":52780},[629,55869,734],{"emptyLinePlaceholder":586},[629,55871,55872,55874,55877,55879,55882],{"class":631,"line":52781},[629,55873,1138],{"class":634},[629,55875,55876],{"class":1192},"html-demo-transition-heading",[629,55878,1210],{"class":634},[629,55880,55881],{"class":642},"hover",[629,55883,1196],{"class":634},[629,55885,55886,55889,55891,55894,55896,55899],{"class":631,"line":52782},[629,55887,55888],{"class":4121}," transform",[629,55890,1210],{"class":634},[629,55892,55893],{"class":2426}," scale",[629,55895,2429],{"class":634},[629,55897,55898],{"class":2493},"1.05",[629,55900,55901],{"class":634},");\n",[629,55903,55904],{"class":631,"line":52783},[629,55905,1317],{"class":634},[629,55907,55908],{"class":631,"line":52784},[629,55909,734],{"emptyLinePlaceholder":586},[629,55911,55912,55914,55917],{"class":631,"line":52785},[629,55913,1138],{"class":634},[629,55915,55916],{"class":1192},"transition-basic-enter-from",[629,55918,2480],{"class":634},[629,55920,55921,55923,55926],{"class":631,"line":54065},[629,55922,1138],{"class":634},[629,55924,55925],{"class":1192},"transition-basic-leave-to",[629,55927,1196],{"class":634},[629,55929,55930,55932,55934,55936],{"class":631,"line":54089},[629,55931,5477],{"class":4121},[629,55933,1210],{"class":634},[629,55935,2498],{"class":2493},[629,55937,8289],{"class":634},[629,55939,55940,55942,55944,55947,55949,55952],{"class":631,"line":54110},[629,55941,55888],{"class":4121},[629,55943,1210],{"class":634},[629,55945,55946],{"class":2426}," translateY",[629,55948,2429],{"class":634},[629,55950,55951],{"class":2493},"-20px",[629,55953,55901],{"class":634},[629,55955,55956],{"class":631,"line":54119},[629,55957,1317],{"class":634},[629,55959,55960],{"class":631,"line":54128},[629,55961,734],{"emptyLinePlaceholder":586},[629,55963,55964,55966,55969],{"class":631,"line":54133},[629,55965,1138],{"class":634},[629,55967,55968],{"class":1192},"transition-basic-enter-active",[629,55970,2480],{"class":634},[629,55972,55973,55975,55978],{"class":631,"line":54140},[629,55974,1138],{"class":634},[629,55976,55977],{"class":1192},"transition-basic-leave-active",[629,55979,1196],{"class":634},[629,55981,55982,55985,55987,55990,55993,55996],{"class":631,"line":54155},[629,55983,55984],{"class":4121}," transition",[629,55986,1210],{"class":634},[629,55988,55989],{"class":675}," all ",[629,55991,55992],{"class":2493},"0.5s",[629,55994,55995],{"class":675}," ease",[629,55997,8289],{"class":634},[629,55999,56000],{"class":631,"line":54169},[629,56001,1317],{"class":634},[629,56003,56004],{"class":631,"line":54184},[629,56005,734],{"emptyLinePlaceholder":586},[629,56007,56008,56010,56013],{"class":631,"line":54198},[629,56009,1138],{"class":634},[629,56011,56012],{"class":1192},"transition-basic-enter-to",[629,56014,2480],{"class":634},[629,56016,56017,56019,56022],{"class":631,"line":54211},[629,56018,1138],{"class":634},[629,56020,56021],{"class":1192},"transition-basic-leave-from",[629,56023,1196],{"class":634},[629,56025,56026,56028,56030,56032],{"class":631,"line":54217},[629,56027,5477],{"class":4121},[629,56029,1210],{"class":634},[629,56031,2553],{"class":2493},[629,56033,8289],{"class":634},[629,56035,56036,56038,56040,56042,56044,56046],{"class":631,"line":54222},[629,56037,55888],{"class":4121},[629,56039,1210],{"class":634},[629,56041,55946],{"class":2426},[629,56043,2429],{"class":634},[629,56045,957],{"class":2493},[629,56047,55901],{"class":634},[629,56049,56050],{"class":631,"line":54227},[629,56051,1317],{"class":634},[629,56053,56054,56056,56058],{"class":631,"line":54246},[629,56055,724],{"class":634},[629,56057,1319],{"class":638},[629,56059,661],{"class":634},[4043,56061,54544,56063],{"id":56062},"using-iframes",[610,56064,56065],{},"iframes",[606,56067,56068,56069,56071],{},"You can achieve pretty cool results with the ",[610,56070,51944],{}," 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.",[2287,56073,56074],{},[56075,56076],"objects-html-iframe-demo",{},[5299,56078,5301,56079,56081],{},[5303,56080,52131],{},[618,56082,56084],{"className":43682,"code":56083,"language":43684,"meta":568,"style":568},"\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",[610,56085,56086,56092,56097,56102,56115,56128,56141,56154,56168,56182,56196,56200,56270],{"__ignoreMap":568},[629,56087,56088,56090],{"class":631,"line":569},[629,56089,635],{"class":634},[629,56091,52579],{"class":638},[629,56093,56094],{"class":631,"line":570},[629,56095,56096],{"class":642}," transform\n",[629,56098,56099],{"class":631,"line":700},[629,56100,56101],{"class":642}," center\n",[629,56103,56104,56107,56109,56111,56113],{"class":631,"line":721},[629,56105,56106],{"class":642}," :cast-shadow",[629,56108,649],{"class":634},[629,56110,652],{"class":634},[629,56112,953],{"class":655},[629,56114,3123],{"class":634},[629,56116,56117,56120,56122,56124,56126],{"class":631,"line":731},[629,56118,56119],{"class":642}," :receive-shadow",[629,56121,649],{"class":634},[629,56123,652],{"class":634},[629,56125,953],{"class":655},[629,56127,3123],{"class":634},[629,56129,56130,56133,56135,56137,56139],{"class":631,"line":737},[629,56131,56132],{"class":642}," occlude",[629,56134,649],{"class":634},[629,56136,652],{"class":634},[629,56138,47842],{"class":655},[629,56140,3123],{"class":634},[629,56142,56143,56146,56148,56150,56152],{"class":631,"line":747},[629,56144,56145],{"class":642}," :z-index-range",[629,56147,649],{"class":634},[629,56149,652],{"class":634},[629,56151,52217],{"class":655},[629,56153,3123],{"class":634},[629,56155,56156,56159,56161,56163,56166],{"class":631,"line":770},[629,56157,56158],{"class":642}," :position-y",[629,56160,649],{"class":634},[629,56162,652],{"class":634},[629,56164,56165],{"class":655},"2.5",[629,56167,3123],{"class":634},[629,56169,56170,56173,56175,56177,56180],{"class":631,"line":782},[629,56171,56172],{"class":642}," :portal",[629,56174,649],{"class":634},[629,56176,652],{"class":634},[629,56178,56179],{"class":655},"portalRef",[629,56181,3123],{"class":634},[629,56183,56184,56187,56189,56191,56194],{"class":631,"line":792},[629,56185,56186],{"class":642}," :style",[629,56188,649],{"class":634},[629,56190,652],{"class":634},[629,56192,56193],{"class":655},"{ userSelect: 'none' }",[629,56195,3123],{"class":634},[629,56197,56198],{"class":631,"line":797},[629,56199,661],{"class":634},[629,56201,56202,56204,56207,56209,56211,56213,56216,56218,56221,56223,56225,56228,56230,56233,56235,56237,56239,56241,56244,56246,56248,56251,56253,56256,56258,56260,56262,56264,56266,56268],{"class":631,"line":819},[629,56203,750],{"class":634},[629,56205,56206],{"class":638},"iframe",[629,56208,23178],{"class":642},[629,56210,649],{"class":634},[629,56212,652],{"class":634},[629,56214,56215],{"class":655},"w-[700px] h-[500px]",[629,56217,652],{"class":634},[629,56219,56220],{"class":642}," src",[629,56222,649],{"class":634},[629,56224,652],{"class":634},[629,56226,56227],{"class":655},"https://tresjs.org",[629,56229,652],{"class":634},[629,56231,56232],{"class":642}," frameborder",[629,56234,649],{"class":634},[629,56236,652],{"class":634},[629,56238,957],{"class":655},[629,56240,652],{"class":634},[629,56242,56243],{"class":642}," :width",[629,56245,649],{"class":634},[629,56247,652],{"class":634},[629,56249,56250],{"class":655},"700",[629,56252,652],{"class":634},[629,56254,56255],{"class":642}," :height",[629,56257,649],{"class":634},[629,56259,652],{"class":634},[629,56261,41150],{"class":655},[629,56263,652],{"class":634},[629,56265,23215],{"class":634},[629,56267,56206],{"class":638},[629,56269,661],{"class":634},[629,56271,56272,56274,56276],{"class":631,"line":623},[629,56273,724],{"class":634},[629,56275,43684],{"class":638},[629,56277,661],{"class":634},[56279,56280,56281],"info",{},[606,56282,56283,56284,56287,56288,56291,56292],{},"The demos use ",[610,56285,56286],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[610,56289,56290],{},"z-index: 30",").\n",[1661,56293,56294],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[496,56296,914],{"id":913},[919,56298,56299,56309],{},[922,56300,56301],{},[925,56302,56303,56305,56307],{},[928,56304,930],{},[928,56306,933],{},[928,56308,936],{},[938,56310,56311,56328,56343,56361,56385,56405,56422,56440,56451,56470,56493,56533,56571,56591,56624],{},[925,56312,56313,56317,56323],{},[943,56314,56315],{},[1661,56316,4729],{},[943,56318,56319,56320,1138],{},"Wrapping ",[1666,56321,56322],{},"HTML element",[943,56324,56325],{},[610,56326,56327],{},"'div'",[925,56329,56330,56335,56341],{},[943,56331,56332],{},[1661,56333,56334],{},"wrapperClass",[943,56336,2768,56337,56340],{},[610,56338,56339],{},"className"," of the wrapping element. element.",[943,56342],{},[925,56344,56345,56350,56357],{},[943,56346,56347],{},[1661,56348,56349],{},"prepend",[943,56351,56352,56353,56356],{},"Projects content ",[1666,56354,56355],{},"behind"," the canvas.",[943,56358,56359],{},[610,56360,963],{},[925,56362,56363,56367,56381],{},[943,56364,56365],{},[1661,56366,27308],{},[943,56368,1342,56369,8158,56372,56374,56375],{},[610,56370,56371],{},"transform: translate(-50%, -50%)",[7547,56373],{},"➡️ ",[1666,56376,56377,56378,56380],{},"Ignored in ",[1661,56379,10104],{}," mode.",[943,56382,56383],{},[610,56384,963],{},[925,56386,56387,56392,56401],{},[943,56388,56389],{},[1661,56390,56391],{},"fullscreen",[943,56393,56394,56395,56374,56397],{},"Aligns to the upper-left corner and fills the screen. ",[7547,56396],{},[1666,56398,56377,56399,56380],{},[1661,56400,10104],{},[943,56402,56403],{},[610,56404,963],{},[925,56406,56407,56412,56420],{},[943,56408,56409],{},[1661,56410,56411],{},"distanceFactor",[943,56413,56414,56415,56417,56418,1138],{},"Children are scaled by this factor and also by distance to a ",[610,56416,10892],{},", or zoom when using an ",[610,56419,51661],{},[943,56421],{},[925,56423,56424,56429,56435],{},[943,56425,56426],{},[1661,56427,56428],{},"zIndexRange",[943,56430,56431,56432,1138],{},"Defines the ",[1666,56433,56434],{},"Z-order range",[943,56436,56437],{},[610,56438,56439],{},"[16777271, 0]",[925,56441,56442,56446,56449],{},[943,56443,56444],{},[1661,56445,26108],{},[943,56447,56448],{},"Reference to a target container (for rendering into a different DOM node). container.",[943,56450],{},[925,56452,56453,56457,56466],{},[943,56454,56455],{},[1661,56456,10104],{},[943,56458,950,56459,56461,56462,56465],{},[610,56460,953],{},", applies ",[610,56463,56464],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[943,56467,56468],{},[610,56469,963],{},[925,56471,56472,56477,56489],{},[943,56473,56474],{},[1661,56475,56476],{},"sprite",[943,56478,56479,56480,8158,56482,56374,56484],{},"Renders as a ",[1666,56481,56476],{},[7547,56483],{},[1666,56485,56486,56487,56380],{},"Only in ",[1661,56488,10104],{},[943,56490,56491],{},[610,56492,963],{},[925,56494,56495,56500,56524],{},[943,56496,56497],{},[1661,56498,56499],{},"calculatePosition",[943,56501,56502,56503,56505,3186,56508,3186,56511,56513,56514,56517,56518,56374,56520],{},"Callback function to override the default positioning logic. ",[7547,56504],{},[1661,56506,56507],{},"Type:",[610,56509,56510],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7547,56512],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[610,56515,56516],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7547,56519],{},[1666,56521,56377,56522,56380],{},[1661,56523,10104],{},[943,56525,56526],{},[1132,56527,56530,56531],{"href":56528,"rel":56529},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1136],"Default ",[610,56532,56499],{},[925,56534,56535,56539,56569],{},[943,56536,56537],{},[1661,56538,52091],{},[943,56540,56541,56542,56544,56545,56547,56548,56551,56552,56554,56555,56558,56559,56544,56561,56564,56565,56568],{},"Enables occlusion. Possible values: ",[7547,56543],{},"- ",[610,56546,953],{}," → Occlusion against ",[1666,56549,56550],{},"all"," scene objects ",[7547,56553],{}," - ",[610,56556,56557],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7547,56560],{},[610,56562,56563],{},"'blending'"," → Uses a ",[1666,56566,56567],{},"blending-based"," occlusion method (CSS-like depth blending).",[943,56570],{},[925,56572,56573,56577,56583],{},[943,56574,56575],{},[1661,56576,5248],{},[943,56578,56579,56580,56582],{},"Custom ",[610,56581,5248],{}," to be used.",[943,56584,56585],{},[1132,56586,56589],{"href":56587,"rel":56588},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1136],[610,56590,31700],{},[925,56592,56593,56597,56622],{},[943,56594,56595],{},[1661,56596,5192],{},[943,56598,56599,3186,56605,3186,56607,56613,56614,3186,56616],{},[1661,56600,56601,56602,56604],{},"Custom shader ",[1666,56603,5192],{}," used for the occlusion mesh.",[7547,56606],{},[1661,56608,56609,56610,56612],{},"Only applies when ",[610,56611,54398],{}," is enabled"," (an occlusion mesh is created). ",[7547,56615],{},[1666,56617,56618,56619,56621],{},"Ignored in raycast occlusion modes (",[610,56620,953],{},", object refs).",[943,56623],{},[925,56625,56626,56631,56652],{},[943,56627,56628],{},[1661,56629,56630],{},"transparentMaterial",[943,56632,56633,3186,56639,3186,56641,3186,56646,3186,56648],{},[1661,56634,56635,56636,56638],{},"Enables ",[1666,56637,9684],{}," rendering for the occlusion material.",[7547,56640],{},[1661,56642,56609,56643,56645],{},[610,56644,54398],{}," creates an occlusion mesh.",[7547,56647],{},[1666,56649,56618,56650,56621],{},[610,56651,953],{},[943,56653,56654],{},[610,56655,963],{},[496,56657,12342],{"id":12341},[919,56659,56660,56668],{},[922,56661,56662],{},[925,56663,56664,56666],{},[928,56665,5751],{},[928,56667,933],{},[938,56669,56670],{},[925,56671,56672,56675],{},[943,56673,56674],{},"onOcclude",[943,56676,56677],{},"Called when the occlusion state changes.",[496,56679,56681],{"id":56680},"exposed-properties","Exposed properties",[919,56683,56684,56694],{},[922,56685,56686],{},[925,56687,56688,56690,56692],{},[928,56689,5958],{},[928,56691,5961],{},[928,56693,933],{},[938,56695,56696,56717,56737],{},[925,56697,56698,56702,56707],{},[943,56699,56700],{},[1661,56701,16385],{},[943,56703,56704],{},[610,56705,56706],{},"Ref\u003CTresObject3D | null>",[943,56708,56709,56710,56714,56715,1138],{},"Reference to the root ",[1661,56711,56712],{},[610,56713,5613],{}," used by ",[610,56716,51665],{},[925,56718,56719,56724,56728],{},[943,56720,56721],{},[1661,56722,56723],{},"isVisible",[943,56725,56726],{},[610,56727,15536],{},[943,56729,56730,56731,5603,56734,1138],{},"Reactive value that indicates whether the HTML content is ",[1661,56732,56733],{},"currently visible",[1661,56735,56736],{},"occluded",[925,56738,56739,56744,56748],{},[943,56740,56741],{},[1661,56742,56743],{},"occlusionMesh",[943,56745,56746],{},[610,56747,56706],{},[943,56749,56750,56751,56754,56755,5875,56757,56759],{},"Reference to the ",[1661,56752,56753],{},"occlusion mesh"," created when ",[610,56756,54398],{},[1661,56758,14722],{},". Used internally for geometry-based occlusion.",[496,56761,6251],{"id":6250},[2205,56763,56764,56797,56814,56869,56887],{},[2208,56765,56766,56767,56772,56773,56775,56776,5603,56779,56782,56783,56785,56786,56789,56790,56793,56794,56796],{},"✨ When using ",[1661,56768,56769],{},[610,56770,56771],{},"\u003CHtml occlude>",", if the ",[610,56774,51665],{}," component is ",[1661,56777,56778],{},"overlapping",[1661,56780,56781],{},"inside a 3D object",", it will be considered ",[1661,56784,56736],{}," and therefore ",[1661,56787,56788],{},"hidden",". To avoid this, ",[1661,56791,56792],{},"adjust the position"," of the ",[610,56795,51665],{}," component in your scene.",[2208,56798,56799,56800,56805,56806,56809,56810,56813],{},"🎨 When using ",[1661,56801,56802],{},[610,56803,56804],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1661,56807,56808],{},"selectable"," because it is rendered ",[1661,56811,56812],{},"behind the canvas",". This is required to achieve the blending effect.",[2208,56815,56816,56817,56819,56820,56822,56823],{},"⚙️ When using a ",[1661,56818,54493],{}," with occlusion in ",[610,56821,47842],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5299,56824,5301,56825,56828],{},[5303,56826,56827],{},"See more information",[12204,56829,56830,56841,56849,56856],{},[2208,56831,56832,56833,3066,56835,56837,56838,1138],{},"If you provide your own material, it must be ",[1661,56834,9684],{},[610,56836,3054],{},") with an ",[1661,56839,56840],{},"opacity \u003C 1",[2208,56842,56843,56844,56848],{},"If you are not providing a custom material, enable ",[1661,56845,56846],{},[610,56847,56630],{}," so the internal shader becomes transparent.",[2208,56850,56851,56852,56855],{},"The occlusion mesh requires a ",[1661,56853,56854],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2208,56857,56858,56859,14511,56862,1664,56864,56866,56867,1138],{},"To compensate for the transparent canvas, you may ",[1661,56860,56861],{},"reapply your previous clear-color as a CSS background",[610,56863,43684],{},[610,56865,4829],{},", or a wrapper ",[610,56868,4111],{},[2208,56870,56871,56872,56876,56877,56879,56880,56882,56883,56886],{},"🔶 When using ",[1661,56873,56874],{},[610,56875,56630],{},", overlapping ",[610,56878,51665],{}," elements (especially multiple ",[610,56881,54398],{}," instances) may cause ",[1661,56884,56885],{},"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.",[2208,56888,56889,56890,56892,56893,56895,56896],{},"🔵 To avoid thin border artifacts when using ",[610,56891,54398],{},", make sure your ",[610,56894,3189],{}," is fully transparent:",[618,56897,56899],{"className":620,"code":56898,"language":625,"meta":568,"style":568},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[610,56900,56901],{"__ignoreMap":568},[629,56902,56903,56905,56907,56909,56911,56913,56915,56917,56919,56921,56924,56926,56928,56930,56932],{"class":631,"line":569},[629,56904,635],{"class":634},[629,56906,753],{"class":638},[629,56908,3021],{"class":634},[629,56910,44367],{"class":642},[629,56912,649],{"class":634},[629,56914,652],{"class":634},[629,56916,953],{"class":4389},[629,56918,652],{"class":634},[629,56920,3021],{"class":634},[629,56922,56923],{"class":642},"clearAlpha",[629,56925,649],{"class":634},[629,56927,652],{"class":634},[629,56929,957],{"class":2493},[629,56931,652],{"class":634},[629,56933,779],{"class":634},[919,56935,56936,56946],{},[922,56937,56938],{},[925,56939,56940,56942,56944],{},[928,56941,930],{},[928,56943,933],{},[928,56945,936],{},[938,56947,56948,56961,56972,56985,57001,57016,57027,57040,57051,57064,57077,57090,57111,57126],{},[925,56949,56950,56954,56957],{},[943,56951,56952],{},[1661,56953,4729],{},[943,56955,56956],{},"Wrapping html element.",[943,56958,56959],{},[610,56960,56327],{},[925,56962,56963,56967,56970],{},[943,56964,56965],{},[1661,56966,56334],{},[943,56968,56969],{},"The className of the wrapping element.",[943,56971],{},[925,56973,56974,56978,56981],{},[943,56975,56976],{},[1661,56977,56349],{},[943,56979,56980],{},"Project content behind the canvas.",[943,56982,56983],{},[610,56984,963],{},[925,56986,56987,56991,56997],{},[943,56988,56989],{},[1661,56990,27308],{},[943,56992,56993,56994],{},"Adds a -50%/-50% CSS transform. ",[629,56995,56996],{},"Ignored in transform mode",[943,56998,56999],{},[610,57000,963],{},[925,57002,57003,57007,57012],{},[943,57004,57005],{},[1661,57006,56391],{},[943,57008,57009,57010],{},"Aligns to the upper-left corner, fills the screen. ",[629,57011,56996],{},[943,57013,57014],{},[610,57015,963],{},[925,57017,57018,57022,57025],{},[943,57019,57020],{},[1661,57021,56411],{},[943,57023,57024],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[943,57026],{},[925,57028,57029,57033,57036],{},[943,57030,57031],{},[1661,57032,56428],{},[943,57034,57035],{},"Z-order range.",[943,57037,57038],{},[610,57039,56439],{},[925,57041,57042,57046,57049],{},[943,57043,57044],{},[1661,57045,26108],{},[943,57047,57048],{},"Reference to target container.",[943,57050],{},[925,57052,57053,57057,57060],{},[943,57054,57055],{},[1661,57056,10104],{},[943,57058,57059],{},"If true, applies matrix3d transformations.",[943,57061,57062],{},[610,57063,963],{},[925,57065,57066,57070,57073],{},[943,57067,57068],{},[1661,57069,56476],{},[943,57071,57072],{},"Renders as sprite, but only in transform mode.",[943,57074,57075],{},[610,57076,963],{},[925,57078,57079,57083,57088],{},[943,57080,57081],{},[1661,57082,56499],{},[943,57084,57085,57086],{},"Override default positioning function. ",[629,57087,56996],{},[943,57089],{},[925,57091,57092,57096,57109],{},[943,57093,57094],{},[1661,57095,52091],{},[943,57097,57098,57099,1664,57101,1664,57103,1694,57106,57108],{},"Can be ",[610,57100,953],{},[610,57102,56557],{},[610,57104,57105],{},"'raycast'",[610,57107,56563],{},". True occludes the entire scene.",[943,57110],{},[925,57112,57113,57117,57122],{},[943,57114,57115],{},[1661,57116,5248],{},[943,57118,56579,57119,57121],{},[610,57120,5248],{}," to be use",[943,57123,57124],{},[610,57125,31700],{},[925,57127,57128,57132,57136],{},[943,57129,57130],{},[1661,57131,5192],{},[943,57133,56601,57134,57121],{},[610,57135,5192],{},[943,57137],{},[496,57139,12342],{"id":57140},"events-1",[919,57142,57143,57151],{},[922,57144,57145],{},[925,57146,57147,57149],{},[928,57148,5751],{},[928,57150,933],{},[938,57152,57153],{},[925,57154,57155,57157],{},[943,57156,56674],{},[943,57158,56677],{},[1319,57160,57161],{},"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":568,"searchDepth":569,"depth":570,"links":57163},[57164,57165,57170,57173,57178,57179,57180,57181,57182],{"id":616,"depth":570,"text":15},{"id":52084,"depth":570,"text":52085,"children":57166},[57167,57168,57169],{"id":52273,"depth":700,"text":52274},{"id":52435,"depth":700,"text":52436},{"id":52696,"depth":700,"text":52697},{"id":44020,"depth":570,"text":44021,"children":57171},[57172],{"id":2977,"depth":700,"text":54479},{"id":54543,"depth":570,"text":57174,"children":57175},"Using \u003CTransition>",[57176],{"id":56062,"depth":700,"text":57177},"Using iframes",{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},{"id":56680,"depth":570,"text":56681},{"id":6250,"depth":570,"text":6251},{"id":57140,"depth":570,"text":12342},"Allows you put DOM elements in your Tres.js scene.",{},{"title":433,"description":57183},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":57188,"title":437,"body":57189,"description":57785,"extension":583,"links":584,"meta":57786,"navigation":586,"path":438,"seo":57787,"stem":439,"__hash__":57788},"docs/2.api/9.objects/image.md",{"type":493,"value":57190,"toc":57780},[57191,57196,57202,57204,57375,57377,57384,57592,57594,57617,57778],[600,57192,57193],{},[57194,57195],"objects-image",{},[606,57197,57198,57201],{},[610,57199,57200],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[496,57203,15],{"id":616},[618,57205,57208],{"className":620,"code":57206,"highlights":57207,"language":625,"meta":568,"style":568},"\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",[700,792,797,819],[610,57209,57210,57230,57248,57268,57276,57280,57288,57296,57314,57318,57326,57341,57355,57359,57367],{"__ignoreMap":568},[629,57211,57212,57214,57216,57218,57220,57222,57224,57226,57228],{"class":631,"line":569},[629,57213,635],{"class":634},[629,57215,639],{"class":638},[629,57217,643],{"class":642},[629,57219,646],{"class":642},[629,57221,649],{"class":634},[629,57223,652],{"class":634},[629,57225,656],{"class":655},[629,57227,652],{"class":634},[629,57229,661],{"class":634},[629,57231,57232,57234,57236,57238,57240,57242,57244,57246],{"class":631,"line":570},[629,57233,669],{"class":668},[629,57235,672],{"class":634},[629,57237,707],{"class":675},[629,57239,685],{"class":634},[629,57241,688],{"class":668},[629,57243,691],{"class":634},[629,57245,716],{"class":655},[629,57247,697],{"class":634},[629,57249,57251,57253,57255,57258,57260,57262,57264,57266],{"class":57250,"line":700},[631,665],[629,57252,669],{"class":668},[629,57254,672],{"class":634},[629,57256,57257],{"class":675}," Image",[629,57259,685],{"class":634},[629,57261,688],{"class":668},[629,57263,691],{"class":634},[629,57265,694],{"class":655},[629,57267,697],{"class":634},[629,57269,57270,57272,57274],{"class":631,"line":721},[629,57271,724],{"class":634},[629,57273,639],{"class":638},[629,57275,661],{"class":634},[629,57277,57278],{"class":631,"line":731},[629,57279,734],{"emptyLinePlaceholder":586},[629,57281,57282,57284,57286],{"class":631,"line":737},[629,57283,635],{"class":634},[629,57285,742],{"class":638},[629,57287,661],{"class":634},[629,57289,57290,57292,57294],{"class":631,"line":747},[629,57291,750],{"class":634},[629,57293,753],{"class":638},[629,57295,661],{"class":634},[629,57297,57298,57300,57302,57304,57306,57308,57310,57312],{"class":631,"line":770},[629,57299,773],{"class":634},[629,57301,776],{"class":638},[629,57303,1477],{"class":642},[629,57305,649],{"class":634},[629,57307,652],{"class":634},[629,57309,8378],{"class":655},[629,57311,652],{"class":634},[629,57313,779],{"class":634},[629,57315,57316],{"class":631,"line":782},[629,57317,734],{"emptyLinePlaceholder":586},[629,57319,57321,57323],{"class":57320,"line":792},[631,665],[629,57322,773],{"class":634},[629,57324,57325],{"class":638},"Image\n",[629,57327,57329,57332,57334,57336,57339],{"class":57328,"line":797},[631,665],[629,57330,57331],{"class":642}," url",[629,57333,649],{"class":634},[629,57335,652],{"class":634},[629,57337,57338],{"class":655},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[629,57340,3123],{"class":634},[629,57342,57344,57347,57349,57351,57353],{"class":57343,"line":819},[631,665],[629,57345,57346],{"class":642}," :scale",[629,57348,649],{"class":634},[629,57350,652],{"class":634},[629,57352,51408],{"class":655},[629,57354,3123],{"class":634},[629,57356,57357],{"class":631,"line":623},[629,57358,15338],{"class":634},[629,57360,57361,57363,57365],{"class":631,"line":842},[629,57362,897],{"class":634},[629,57364,753],{"class":638},[629,57366,661],{"class":634},[629,57368,57369,57371,57373],{"class":631,"line":853},[629,57370,724],{"class":634},[629,57372,742],{"class":638},[629,57374,661],{"class":634},[496,57376,914],{"id":913},[3191,57378,57379],{},[606,57380,57381,57383],{},[610,57382,57200],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[919,57385,57386,57396],{},[922,57387,57388],{},[925,57389,57390,57392,57394],{},[928,57391,930],{"align":989},[928,57393,933],{"align":989},[928,57395,936],{},[938,57397,57398,57411,57427,57440,57454,57470,57484,57502,57520,57535,57551,57569,57580],{},[925,57399,57400,57404,57407],{},[943,57401,57402],{"align":989},[610,57403,28861],{},[943,57405,57406],{"align":989},"Number of divisions in the default geometry.",[943,57408,57409],{},[610,57410,1866],{},[925,57412,57413,57417,57423],{},[943,57414,57415],{"align":989},[610,57416,5622],{},[943,57418,57419,57420],{"align":989},"Scale of the geometry. ",[610,57421,57422],{},"number | [number, number]",[943,57424,57425],{},[610,57426,1866],{},[925,57428,57429,57433,57436],{},[943,57430,57431],{"align":989},[610,57432,7539],{},[943,57434,57435],{"align":989},"Color multiplied into the image texture.",[943,57437,57438],{},[610,57439,28944],{},[925,57441,57442,57447,57450],{},[943,57443,57444],{"align":989},[610,57445,57446],{},"zoom",[943,57448,57449],{"align":989},"Shrinks or enlarges the image texture.",[943,57451,57452],{},[610,57453,1866],{},[925,57455,57456,57460,57466],{},[943,57457,57458],{"align":989},[610,57459,41034],{},[943,57461,57462,57463,57465],{"align":989},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[610,57464,9684],{},".)",[943,57467,57468],{},[610,57469,957],{},[925,57471,57472,57477,57480],{},[943,57473,57474],{"align":989},[610,57475,57476],{},"grayscale",[943,57478,57479],{"align":989},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[943,57481,57482],{},[610,57483,957],{},[925,57485,57486,57490,57498],{},[943,57487,57488],{"align":989},[610,57489,37567],{},[943,57491,57492,57493],{"align":989},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1132,57494,57497],{"href":57495,"rel":57496},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1136],"See THREE.material.tonemapped",[943,57499,57500],{},[610,57501,957],{},[925,57503,57504,57508,57516],{},[943,57505,57506],{"align":989},[610,57507,9684],{},[943,57509,57510,57511],{"align":989},"Whether the image material should be transparent. ",[1132,57512,57515],{"href":57513,"rel":57514},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1136],"See THREE.material.transparent",[943,57517,57518],{},[610,57519,963],{},[925,57521,57522,57526,57531],{},[943,57523,57524],{"align":989},[610,57525,9684],{},[943,57527,57510,57528],{"align":989},[1132,57529,57515],{"href":57513,"rel":57530},[1136],[943,57532,57533],{},[610,57534,963],{},[925,57536,57537,57541,57547],{},[943,57538,57539],{"align":989},[610,57540,9672],{},[943,57542,57543,57544],{"align":989},"Opacity of the image material. ",[1132,57545,57515],{"href":57513,"rel":57546},[1136],[943,57548,57549],{},[610,57550,1866],{},[925,57552,57553,57557,57565],{},[943,57554,57555],{"align":989},[610,57556,25467],{},[943,57558,57559,57560],{"align":989},"THREE.Side of the image material. ",[1132,57561,57564],{"href":57562,"rel":57563},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1136],"See THREE.material.side",[943,57566,57567],{},[610,57568,25480],{},[925,57570,57571,57575,57578],{},[943,57572,57573],{"align":989},[610,57574,2709],{},[943,57576,57577],{"align":989},"Image texture to display on the geometry.",[943,57579],{},[925,57581,57582,57587,57590],{},[943,57583,57584],{"align":989},[610,57585,57586],{},"url",[943,57588,57589],{"align":989},"Image URL to load and display on the geometry.",[943,57591],{},[496,57593,6251],{"id":6250},[606,57595,57596,57597,57599,57600,57603,57604,57606,57607,57610,57611,5603,57614,5566],{},"By default, images loaded via the ",[610,57598,57586],{}," prop use the renderer’s output color space. For advanced control, pass a ",[610,57601,57602],{},"THREE.Texture"," via the ",[610,57605,2709],{}," prop and set its ",[610,57608,57609],{},"colorSpace"," (e.g., ",[610,57612,57613],{},"THREE.SRGBColorSpace",[610,57615,57616],{},"THREE.LinearSRGBColorSpace",[618,57618,57620],{"className":620,"code":57619,"language":625,"meta":568,"style":568},"\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",[610,57621,57622,57632,57650,57668,57672,57690,57709,57725,57731,57739,57743,57751,57770],{"__ignoreMap":568},[629,57623,57624,57626,57628,57630],{"class":631,"line":569},[629,57625,635],{"class":634},[629,57627,639],{"class":638},[629,57629,643],{"class":642},[629,57631,661],{"class":634},[629,57633,57634,57636,57638,57640,57642,57644,57646,57648],{"class":631,"line":570},[629,57635,669],{"class":668},[629,57637,672],{"class":634},[629,57639,2351],{"class":675},[629,57641,685],{"class":634},[629,57643,688],{"class":668},[629,57645,691],{"class":634},[629,57647,694],{"class":655},[629,57649,697],{"class":634},[629,57651,57652,57654,57656,57658,57660,57662,57664,57666],{"class":631,"line":700},[629,57653,669],{"class":668},[629,57655,672],{"class":634},[629,57657,42738],{"class":675},[629,57659,685],{"class":634},[629,57661,688],{"class":668},[629,57663,691],{"class":634},[629,57665,4618],{"class":655},[629,57667,697],{"class":634},[629,57669,57670],{"class":631,"line":721},[629,57671,734],{"emptyLinePlaceholder":586},[629,57673,57674,57676,57678,57681,57683,57685,57687],{"class":631,"line":731},[629,57675,2407],{"class":642},[629,57677,672],{"class":634},[629,57679,57680],{"class":675}," state ",[629,57682,2420],{"class":634},[629,57684,2423],{"class":634},[629,57686,2351],{"class":2426},[629,57688,57689],{"class":675},"(URL)\n",[629,57691,57692,57694,57697,57699,57701,57703,57705,57707],{"class":631,"line":737},[629,57693,10251],{"class":2426},[629,57695,57696],{"class":675},"(state",[629,57698,679],{"class":634},[629,57700,3066],{"class":634},[629,57702,2709],{"class":6830},[629,57704,3332],{"class":634},[629,57706,3669],{"class":642},[629,57708,1196],{"class":634},[629,57710,57711,57714,57716,57718,57720,57722],{"class":631,"line":747},[629,57712,57713],{"class":675}," texture",[629,57715,1138],{"class":634},[629,57717,57609],{"class":675},[629,57719,2423],{"class":634},[629,57721,42738],{"class":675},[629,57723,57724],{"class":1201}," // assign a custom color space\n",[629,57726,57727,57729],{"class":631,"line":770},[629,57728,2420],{"class":634},[629,57730,2440],{"class":675},[629,57732,57733,57735,57737],{"class":631,"line":782},[629,57734,724],{"class":634},[629,57736,639],{"class":638},[629,57738,661],{"class":634},[629,57740,57741],{"class":631,"line":792},[629,57742,734],{"emptyLinePlaceholder":586},[629,57744,57745,57747,57749],{"class":631,"line":797},[629,57746,635],{"class":634},[629,57748,742],{"class":638},[629,57750,661],{"class":634},[629,57752,57753,57755,57757,57760,57762,57764,57766,57768],{"class":631,"line":819},[629,57754,750],{"class":634},[629,57756,437],{"class":638},[629,57758,57759],{"class":642}," :texture",[629,57761,649],{"class":634},[629,57763,652],{"class":634},[629,57765,2709],{"class":655},[629,57767,652],{"class":634},[629,57769,779],{"class":634},[629,57771,57772,57774,57776],{"class":631,"line":623},[629,57773,724],{"class":634},[629,57775,742],{"class":638},[629,57777,661],{"class":634},[1319,57779,25036],{},{"title":568,"searchDepth":569,"depth":570,"links":57781},[57782,57783,57784],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":6250,"depth":570,"text":6251},"Display image textures with shader-based effects.",{},{"title":437,"description":57785},"X-ToNyUMXQZlkTHUsm9OM76zK6fPjZKmSgrWtCQht4g",{"id":57790,"title":441,"body":57791,"description":58575,"extension":583,"links":584,"meta":58576,"navigation":586,"path":442,"seo":58577,"stem":443,"__hash__":58578},"docs/2.api/9.objects/marching-cubes.md",{"type":493,"value":57792,"toc":58569},[57793,57798,57809,57812,57837,57839,58381,58383,58454,58458,58503,58507,58566],[600,57794,57795],{},[57796,57797],"objects-marching-cubes",{},[606,57799,57800,57803,57804,1138],{},[610,57801,57802],{},"\u003CMarchingCubes />"," is a wrapper around ",[1132,57805,57808],{"href":57806,"rel":57807},"https://threejs.org/examples/#webgl_marchingcubes",[1136],"THREE's Marching Cubes",[606,57810,57811],{},"It includes 3 components:",[2205,57813,57814,57827,57832],{},[2208,57815,57816,57818,57819,57822,57823,57826],{},[610,57817,57802],{}," – container element for ",[610,57820,57821],{},"\u003CMarchingCube />","s and ",[610,57824,57825],{},"\u003CMarchingPlane />","s",[2208,57828,57829,57831],{},[610,57830,57821],{}," - an individual metaball",[2208,57833,57834,57836],{},[610,57835,57825],{}," – optional bounding plane that interacts with the metaballs",[496,57838,15],{"id":616},[618,57840,57843],{"className":620,"code":57841,"highlights":57842,"language":625,"meta":568,"style":568},"\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",[570,853,864,874,624,894,904,2617,2626,2646],[610,57844,57845,57865,57899,57917,57940,57944,57977,58036,58044,58048,58056,58086,58094,58102,58106,58137,58158,58166,58180,58193,58206,58211,58265,58274,58278,58286,58326,58365,58373],{"__ignoreMap":568},[629,57846,57847,57849,57851,57853,57855,57857,57859,57861,57863],{"class":631,"line":569},[629,57848,635],{"class":634},[629,57850,639],{"class":638},[629,57852,643],{"class":642},[629,57854,646],{"class":642},[629,57856,649],{"class":634},[629,57858,652],{"class":634},[629,57860,656],{"class":655},[629,57862,652],{"class":634},[629,57864,661],{"class":634},[629,57866,57868,57870,57872,57875,57877,57880,57882,57885,57887,57889,57891,57893,57895,57897],{"class":57867,"line":570},[631,665],[629,57869,669],{"class":668},[629,57871,672],{"class":634},[629,57873,57874],{"class":675}," MarchingCube",[629,57876,679],{"class":634},[629,57878,57879],{"class":675}," MarchingCubes",[629,57881,679],{"class":634},[629,57883,57884],{"class":675}," MarchingPlane",[629,57886,679],{"class":634},[629,57888,682],{"class":675},[629,57890,685],{"class":634},[629,57892,688],{"class":668},[629,57894,691],{"class":634},[629,57896,694],{"class":655},[629,57898,697],{"class":634},[629,57900,57901,57903,57905,57907,57909,57911,57913,57915],{"class":631,"line":700},[629,57902,669],{"class":668},[629,57904,672],{"class":634},[629,57906,707],{"class":675},[629,57908,685],{"class":634},[629,57910,688],{"class":668},[629,57912,691],{"class":634},[629,57914,716],{"class":655},[629,57916,697],{"class":634},[629,57918,57919,57921,57923,57926,57928,57930,57932,57934,57936,57938],{"class":631,"line":721},[629,57920,669],{"class":668},[629,57922,672],{"class":634},[629,57924,57925],{"class":675}," NoToneMapping",[629,57927,679],{"class":634},[629,57929,28674],{"class":675},[629,57931,685],{"class":634},[629,57933,688],{"class":668},[629,57935,691],{"class":634},[629,57937,4618],{"class":655},[629,57939,697],{"class":634},[629,57941,57942],{"class":631,"line":731},[629,57943,734],{"emptyLinePlaceholder":586},[629,57945,57946,57948,57951,57953,57955,57957,57960,57962,57964,57966,57968,57970,57972,57974],{"class":631,"line":737},[629,57947,2407],{"class":642},[629,57949,57950],{"class":675}," rand ",[629,57952,649],{"class":634},[629,57954,7072],{"class":634},[629,57956,3669],{"class":642},[629,57958,57959],{"class":675}," (Math",[629,57961,1138],{"class":634},[629,57963,55129],{"class":2426},[629,57965,6976],{"class":675},[629,57967,33811],{"class":634},[629,57969,2503],{"class":2493},[629,57971,4726],{"class":675},[629,57973,21192],{"class":634},[629,57975,57976],{"class":2493}," 1.25\n",[629,57978,57979,57981,57984,57986,57989,57991,57993,57995,57997,58000,58002,58005,58007,58009,58011,58013,58015,58017,58020,58022,58024,58027,58029,58031,58033],{"class":631,"line":747},[629,57980,2407],{"class":642},[629,57982,57983],{"class":675}," positions ",[629,57985,649],{"class":634},[629,57987,57988],{"class":675}," Array",[629,57990,1138],{"class":634},[629,57992,15218],{"class":2426},[629,57994,2429],{"class":675},[629,57996,39653],{"class":634},[629,57998,57999],{"class":638}," length",[629,58001,1210],{"class":634},[629,58003,58004],{"class":2493}," 40",[629,58006,39666],{"class":634},[629,58008,7072],{"class":634},[629,58010,3669],{"class":642},[629,58012,7865],{"class":634},[629,58014,28674],{"class":2426},[629,58016,2429],{"class":675},[629,58018,58019],{"class":2426},"rand",[629,58021,3666],{"class":675},[629,58023,679],{"class":634},[629,58025,58026],{"class":2426}," rand",[629,58028,3666],{"class":675},[629,58030,679],{"class":634},[629,58032,58026],{"class":2426},[629,58034,58035],{"class":675},"()))\n",[629,58037,58038,58040,58042],{"class":631,"line":770},[629,58039,724],{"class":634},[629,58041,639],{"class":638},[629,58043,661],{"class":634},[629,58045,58046],{"class":631,"line":782},[629,58047,734],{"emptyLinePlaceholder":586},[629,58049,58050,58052,58054],{"class":631,"line":792},[629,58051,635],{"class":634},[629,58053,742],{"class":638},[629,58055,661],{"class":634},[629,58057,58058,58060,58062,58064,58066,58068,58070,58072,58075,58077,58079,58082,58084],{"class":631,"line":797},[629,58059,750],{"class":634},[629,58061,753],{"class":638},[629,58063,756],{"class":642},[629,58065,649],{"class":634},[629,58067,652],{"class":634},[629,58069,763],{"class":655},[629,58071,652],{"class":634},[629,58073,58074],{"class":642}," :tone-mapping",[629,58076,649],{"class":634},[629,58078,652],{"class":634},[629,58080,58081],{"class":655},"NoToneMapping",[629,58083,652],{"class":634},[629,58085,661],{"class":634},[629,58087,58088,58090,58092],{"class":631,"line":819},[629,58089,773],{"class":634},[629,58091,776],{"class":638},[629,58093,779],{"class":634},[629,58095,58096,58098,58100],{"class":631,"line":623},[629,58097,773],{"class":634},[629,58099,787],{"class":638},[629,58101,779],{"class":634},[629,58103,58104],{"class":631,"line":842},[629,58105,734],{"emptyLinePlaceholder":586},[629,58107,58109,58111,58113,58115,58117,58119,58121,58123,58126,58128,58130,58133,58135],{"class":58108,"line":853},[631,665],[629,58110,773],{"class":634},[629,58112,441],{"class":638},[629,58114,49926],{"class":642},[629,58116,649],{"class":634},[629,58118,652],{"class":634},[629,58120,36493],{"class":655},[629,58122,652],{"class":634},[629,58124,58125],{"class":642}," :max-poly-count",[629,58127,649],{"class":634},[629,58129,652],{"class":634},[629,58131,58132],{"class":655},"40000",[629,58134,652],{"class":634},[629,58136,661],{"class":634},[629,58138,58140,58142,58145,58148,58150,58152,58154,58156],{"class":58139,"line":864},[631,665],[629,58141,845],{"class":634},[629,58143,58144],{"class":638},"MarchingPlane",[629,58146,58147],{"class":642}," plane-type",[629,58149,649],{"class":634},[629,58151,652],{"class":634},[629,58153,37812],{"class":655},[629,58155,652],{"class":634},[629,58157,779],{"class":634},[629,58159,58161,58163],{"class":58160,"line":874},[631,665],[629,58162,845],{"class":634},[629,58164,58165],{"class":638},"MarchingCube\n",[629,58167,58169,58171,58173,58175,58178],{"class":58168,"line":624},[631,665],[629,58170,7969],{"class":642},[629,58172,649],{"class":634},[629,58174,652],{"class":634},[629,58176,58177],{"class":655},"position, i of positions",[629,58179,3123],{"class":634},[629,58181,58183,58185,58187,58189,58191],{"class":58182,"line":894},[631,665],[629,58184,7983],{"class":642},[629,58186,649],{"class":634},[629,58188,652],{"class":634},[629,58190,23201],{"class":655},[629,58192,3123],{"class":634},[629,58194,58196,58198,58200,58202,58204],{"class":58195,"line":904},[631,665],[629,58197,7997],{"class":642},[629,58199,649],{"class":634},[629,58201,652],{"class":634},[629,58203,4122],{"class":655},[629,58205,3123],{"class":634},[629,58207,58209],{"class":58208,"line":2617},[631,665],[629,58210,8025],{"class":634},[629,58212,58214,58216,58218,58221,58223,58225,58228,58230,58233,58235,58237,58239,58241,58243,58245,58247,58250,58252,58255,58257,58259,58261,58263],{"class":58213,"line":2626},[631,665],[629,58215,845],{"class":634},[629,58217,9487],{"class":638},[629,58219,58220],{"class":642}," specular",[629,58222,649],{"class":634},[629,58224,652],{"class":634},[629,58226,58227],{"class":655},"#111111",[629,58229,652],{"class":634},[629,58231,58232],{"class":642}," :shininess",[629,58234,649],{"class":634},[629,58236,652],{"class":634},[629,58238,26506],{"class":655},[629,58240,652],{"class":634},[629,58242,2681],{"class":642},[629,58244,649],{"class":634},[629,58246,652],{"class":634},[629,58248,58249],{"class":655},"#049ef4",[629,58251,652],{"class":634},[629,58253,58254],{"class":642}," :reflectivity",[629,58256,649],{"class":634},[629,58258,652],{"class":634},[629,58260,1866],{"class":655},[629,58262,652],{"class":634},[629,58264,779],{"class":634},[629,58266,58268,58270,58272],{"class":58267,"line":2646},[631,665],[629,58269,887],{"class":634},[629,58271,441],{"class":638},[629,58273,661],{"class":634},[629,58275,58276],{"class":631,"line":2655},[629,58277,734],{"emptyLinePlaceholder":586},[629,58279,58280,58282,58284],{"class":631,"line":2664},[629,58281,773],{"class":634},[629,58283,802],{"class":638},[629,58285,779],{"class":634},[629,58287,58288,58290,58292,58294,58296,58298,58301,58303,58305,58307,58309,58311,58313,58315,58317,58319,58322,58324],{"class":631,"line":2673},[629,58289,773],{"class":634},[629,58291,8467],{"class":638},[629,58293,2681],{"class":642},[629,58295,649],{"class":634},[629,58297,652],{"class":634},[629,58299,58300],{"class":655},"#ffffff",[629,58302,652],{"class":634},[629,58304,1859],{"class":642},[629,58306,649],{"class":634},[629,58308,652],{"class":634},[629,58310,19465],{"class":655},[629,58312,652],{"class":634},[629,58314,1477],{"class":642},[629,58316,649],{"class":634},[629,58318,652],{"class":634},[629,58320,58321],{"class":655},"[0, 200, 0]",[629,58323,652],{"class":634},[629,58325,779],{"class":634},[629,58327,58328,58330,58332,58334,58336,58338,58340,58342,58344,58346,58348,58350,58352,58354,58356,58358,58361,58363],{"class":631,"line":2695},[629,58329,773],{"class":634},[629,58331,8467],{"class":638},[629,58333,2681],{"class":642},[629,58335,649],{"class":634},[629,58337,652],{"class":634},[629,58339,58300],{"class":655},[629,58341,652],{"class":634},[629,58343,1859],{"class":642},[629,58345,649],{"class":634},[629,58347,652],{"class":634},[629,58349,19465],{"class":655},[629,58351,652],{"class":634},[629,58353,1477],{"class":642},[629,58355,649],{"class":634},[629,58357,652],{"class":634},[629,58359,58360],{"class":655},"[100, 200, 100]",[629,58362,652],{"class":634},[629,58364,779],{"class":634},[629,58366,58367,58369,58371],{"class":631,"line":2739},[629,58368,897],{"class":634},[629,58370,753],{"class":638},[629,58372,661],{"class":634},[629,58374,58375,58377,58379],{"class":631,"line":2748},[629,58376,724],{"class":634},[629,58378,742],{"class":638},[629,58380,661],{"class":634},[496,58382,914],{"id":913},[919,58384,58385,58395],{},[922,58386,58387],{},[925,58388,58389,58391,58393],{},[928,58390,930],{"align":989},[928,58392,933],{"align":989},[928,58394,936],{},[938,58396,58397,58411,58426,58440],{},[925,58398,58399,58403,58406],{},[943,58400,58401],{"align":989},[610,58402,26047],{},[943,58404,58405],{"align":989},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[943,58407,58408],{},[610,58409,58410],{},"28",[925,58412,58413,58418,58421],{},[943,58414,58415],{"align":989},[610,58416,58417],{},"maxPolyCount",[943,58419,58420],{"align":989},"Maximum number of polygons to generate.",[943,58422,58423],{},[610,58424,58425],{},"10000",[925,58427,58428,58433,58436],{},[943,58429,58430],{"align":989},[610,58431,58432],{},"enableUvs",[943,58434,58435],{"align":989},"Whether UVs are enabled.",[943,58437,58438],{},[610,58439,963],{},[925,58441,58442,58447,58450],{},[943,58443,58444],{"align":989},[610,58445,58446],{},"enableColors",[943,58448,58449],{"align":989},"Whether vertex colors are enabled.",[943,58451,58452],{},[610,58453,963],{},[496,58455,58457],{"id":58456},"marchingcube-props","MarchingCube Props",[919,58459,58460,58470],{},[922,58461,58462],{},[925,58463,58464,58466,58468],{},[928,58465,930],{"align":989},[928,58467,933],{"align":989},[928,58469,936],{},[938,58471,58472,58486],{},[925,58473,58474,58479,58482],{},[943,58475,58476],{"align":989},[610,58477,58478],{},"strength",[943,58480,58481],{"align":989},"How strongly this cube affects the marching cube field.",[943,58483,58484],{},[610,58485,1938],{},[925,58487,58488,58493,58499],{},[943,58489,58490],{"align":989},[610,58491,58492],{},"subtract",[943,58494,58495,58496,58498],{"align":989},"How quickly strength moves to ",[610,58497,957],{}," over distance.",[943,58500,58501],{},[610,58502,30517],{},[496,58504,58506],{"id":58505},"marchingplane-props","MarchingPlane Props",[919,58508,58509,58519],{},[922,58510,58511],{},[925,58512,58513,58515,58517],{},[928,58514,930],{"align":989},[928,58516,933],{"align":989},[928,58518,936],{},[938,58520,58521,58539,58552],{},[925,58522,58523,58528,58534],{},[943,58524,58525],{"align":989},[610,58526,58527],{},"planeType",[943,58529,58530,58531],{"align":989},"Which axis the plane appears on. ",[610,58532,58533],{},"'x' | 'y' | 'z'",[943,58535,58536],{},[610,58537,58538],{},"'x'",[925,58540,58541,58545,58548],{},[943,58542,58543],{"align":989},[610,58544,58478],{},[943,58546,58547],{"align":989},"How strongly this plane affects the marching cube field.",[943,58549,58550],{},[610,58551,1938],{},[925,58553,58554,58558,58562],{},[943,58555,58556],{"align":989},[610,58557,58492],{},[943,58559,58495,58560,58498],{"align":989},[610,58561,957],{},[943,58563,58564],{},[610,58565,30517],{},[1319,58567,58568],{},"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":568,"searchDepth":569,"depth":570,"links":58570},[58571,58572,58573,58574],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":58456,"depth":570,"text":58457},{"id":58505,"depth":570,"text":58506},"Create organic blob-like shapes using metaballs.",{},{"title":441,"description":58575},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":58580,"title":445,"body":58581,"description":59859,"extension":583,"links":584,"meta":59860,"navigation":586,"path":446,"seo":59861,"stem":447,"__hash__":59862},"docs/2.api/9.objects/reflector.md",{"type":493,"value":58582,"toc":59852},[58583,58588,58602,58604,58822,58824,58907,58915,58919,58930,59533,59536,59539,59543,59849],[600,58584,58585],{},[58586,58587],"objects-reflector",{},[606,58589,2768,58590,58592,58593,58598,58599,58601],{},[610,58591,7309],{}," package provides an abstraction of the ",[1132,58594,58597],{"href":58595,"rel":58596},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1136],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[610,58600,4284],{}," so all the default props can be passed as well:",[496,58603,15],{"id":616},[618,58605,58607],{"className":620,"code":58606,"language":625,"meta":568,"style":568},"\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",[610,58608,58609,58629,58648,58656,58660,58668,58681,58700,58708,58712,58720,58727,58741,58755,58768,58772,58790,58798,58806,58814],{"__ignoreMap":568},[629,58610,58611,58613,58615,58617,58619,58621,58623,58625,58627],{"class":631,"line":569},[629,58612,635],{"class":634},[629,58614,639],{"class":638},[629,58616,643],{"class":642},[629,58618,646],{"class":642},[629,58620,649],{"class":634},[629,58622,652],{"class":634},[629,58624,656],{"class":655},[629,58626,652],{"class":634},[629,58628,661],{"class":634},[629,58630,58631,58633,58635,58638,58640,58642,58644,58646],{"class":631,"line":570},[629,58632,669],{"class":668},[629,58634,672],{"class":634},[629,58636,58637],{"class":675}," Reflector",[629,58639,685],{"class":634},[629,58641,688],{"class":668},[629,58643,691],{"class":634},[629,58645,694],{"class":655},[629,58647,697],{"class":634},[629,58649,58650,58652,58654],{"class":631,"line":700},[629,58651,724],{"class":634},[629,58653,639],{"class":638},[629,58655,661],{"class":634},[629,58657,58658],{"class":631,"line":721},[629,58659,734],{"emptyLinePlaceholder":586},[629,58661,58662,58664,58666],{"class":631,"line":731},[629,58663,635],{"class":634},[629,58665,742],{"class":638},[629,58667,661],{"class":634},[629,58669,58670,58672,58674,58676,58679],{"class":631,"line":737},[629,58671,750],{"class":634},[629,58673,753],{"class":638},[629,58675,40694],{"class":642},[629,58677,58678],{"class":642}," alpha",[629,58680,661],{"class":634},[629,58682,58683,58685,58687,58689,58691,58693,58696,58698],{"class":631,"line":747},[629,58684,773],{"class":634},[629,58686,776],{"class":638},[629,58688,1477],{"class":642},[629,58690,649],{"class":634},[629,58692,652],{"class":634},[629,58694,58695],{"class":655},"[0, 0, 3]",[629,58697,652],{"class":634},[629,58699,779],{"class":634},[629,58701,58702,58704,58706],{"class":631,"line":770},[629,58703,773],{"class":634},[629,58705,787],{"class":638},[629,58707,779],{"class":634},[629,58709,58710],{"class":631,"line":782},[629,58711,734],{"emptyLinePlaceholder":586},[629,58713,58714,58716,58718],{"class":631,"line":792},[629,58715,773],{"class":634},[629,58717,19723],{"class":638},[629,58719,661],{"class":634},[629,58721,58722,58724],{"class":631,"line":797},[629,58723,845],{"class":634},[629,58725,58726],{"class":638},"Reflector\n",[629,58728,58729,58732,58734,58736,58739],{"class":631,"line":819},[629,58730,58731],{"class":642}," :rotation",[629,58733,649],{"class":634},[629,58735,652],{"class":634},[629,58737,58738],{"class":655},"[-Math.PI * 0.5, 0, 0]",[629,58740,3123],{"class":634},[629,58742,58743,58746,58748,58750,58753],{"class":631,"line":623},[629,58744,58745],{"class":642}," :position-y",[629,58747,649],{"class":634},[629,58749,652],{"class":634},[629,58751,58752],{"class":655},"-2",[629,58754,3123],{"class":634},[629,58756,58757,58759,58761,58763,58766],{"class":631,"line":842},[629,58758,26541],{"class":642},[629,58760,649],{"class":634},[629,58762,652],{"class":634},[629,58764,58765],{"class":655},"#fff",[629,58767,3123],{"class":634},[629,58769,58770],{"class":631,"line":853},[629,58771,51908],{"class":634},[629,58773,58774,58776,58778,58780,58782,58784,58786,58788],{"class":631,"line":864},[629,58775,856],{"class":634},[629,58777,8902],{"class":638},[629,58779,1951],{"class":642},[629,58781,649],{"class":634},[629,58783,652],{"class":634},[629,58785,10023],{"class":655},[629,58787,652],{"class":634},[629,58789,779],{"class":634},[629,58791,58792,58794,58796],{"class":631,"line":874},[629,58793,877],{"class":634},[629,58795,445],{"class":638},[629,58797,661],{"class":634},[629,58799,58800,58802,58804],{"class":631,"line":624},[629,58801,887],{"class":634},[629,58803,19723],{"class":638},[629,58805,661],{"class":634},[629,58807,58808,58810,58812],{"class":631,"line":894},[629,58809,897],{"class":634},[629,58811,753],{"class":638},[629,58813,661],{"class":634},[629,58815,58816,58818,58820],{"class":631,"line":904},[629,58817,724],{"class":634},[629,58819,742],{"class":638},[629,58821,661],{"class":634},[496,58823,914],{"id":913},[919,58825,58826,58836],{},[922,58827,58828],{},[925,58829,58830,58832,58834],{},[928,58831,930],{"align":989},[928,58833,933],{"align":989},[928,58835,936],{},[938,58837,58838,58850,58861,58872,58883,58895],{},[925,58839,58840,58844,58847],{},[943,58841,58842],{"align":989},[1661,58843,7539],{},[943,58845,58846],{"align":989},"The base color that's combine with the mirror effect",[943,58848,58849],{},"'#333'",[925,58851,58852,58856,58859],{},[943,58853,58854],{"align":989},[1661,58855,44217],{},[943,58857,58858],{"align":989},"the width of the texture to render on the mirror",[943,58860,26056],{},[925,58862,58863,58867,58870],{},[943,58864,58865],{"align":989},[1661,58866,44234],{},[943,58868,58869],{"align":989},"the height of the texture to render on the mirror",[943,58871,26056],{},[925,58873,58874,58878,58881],{},[943,58875,58876],{"align":989},[1661,58877,44351],{},[943,58879,58880],{"align":989},"to use the clipBias property",[943,58882,957],{},[925,58884,58885,58890,58893],{},[943,58886,58887],{"align":989},[1661,58888,58889],{},"multisample",[943,58891,58892],{"align":989},"how many samplers will be render",[943,58894,8420],{},[925,58896,58897,58902,58904],{},[943,58898,58899],{"align":989},[1661,58900,58901],{},"shader",[943,58903,46076],{"align":989},[943,58905,58906],{},"Reflector.ReflectorShader",[3191,58908,58909],{},[606,58910,58911,58912,58914],{},"All the props except the ",[610,58913,7539],{},", are not reactive",[496,58916,58918],{"id":58917},"custom-mirror-effect","Custom mirror effect",[606,58920,58921,58922,1664,58925,1680,58927,58929],{},"You can provide your own shader by passing a full shader object with ",[610,58923,58924],{},"uniforms",[610,58926,24255],{},[610,58928,24270],{},". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[618,58931,58933],{"className":620,"code":58932,"language":625,"meta":568,"style":568},"\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",[610,58934,58935,58955,58973,58992,59010,59014,59027,59031,59042,59051,59067,59084,59101,59118,59122,59134,59139,59144,59149,59154,59159,59164,59169,59179,59190,59195,59200,59205,59209,59213,59218,59223,59228,59233,59238,59242,59246,59251,59256,59261,59266,59271,59276,59281,59286,59294,59298,59302,59319,59336,59365,59398,59404,59412,59416,59424,59430,59443,59456,59469,59481,59495,59499,59517,59525],{"__ignoreMap":568},[629,58936,58937,58939,58941,58943,58945,58947,58949,58951,58953],{"class":631,"line":569},[629,58938,635],{"class":634},[629,58940,639],{"class":638},[629,58942,643],{"class":642},[629,58944,646],{"class":642},[629,58946,649],{"class":634},[629,58948,652],{"class":634},[629,58950,656],{"class":655},[629,58952,652],{"class":634},[629,58954,661],{"class":634},[629,58956,58957,58959,58961,58963,58965,58967,58969,58971],{"class":631,"line":570},[629,58958,669],{"class":668},[629,58960,672],{"class":634},[629,58962,58637],{"class":675},[629,58964,685],{"class":634},[629,58966,688],{"class":668},[629,58968,691],{"class":634},[629,58970,694],{"class":655},[629,58972,697],{"class":634},[629,58974,58975,58977,58979,58982,58984,58986,58988,58990],{"class":631,"line":700},[629,58976,669],{"class":668},[629,58978,672],{"class":634},[629,58980,58981],{"class":675}," useLoop",[629,58983,685],{"class":634},[629,58985,688],{"class":668},[629,58987,691],{"class":634},[629,58989,716],{"class":655},[629,58991,697],{"class":634},[629,58993,58994,58996,58998,59000,59002,59004,59006,59008],{"class":631,"line":721},[629,58995,669],{"class":668},[629,58997,672],{"class":634},[629,58999,3490],{"class":675},[629,59001,685],{"class":634},[629,59003,688],{"class":668},[629,59005,691],{"class":634},[629,59007,625],{"class":655},[629,59009,697],{"class":634},[629,59011,59012],{"class":631,"line":731},[629,59013,734],{"emptyLinePlaceholder":586},[629,59015,59016,59018,59021,59023,59025],{"class":631,"line":737},[629,59017,2407],{"class":642},[629,59019,59020],{"class":675}," reflectorRef ",[629,59022,649],{"class":634},[629,59024,3490],{"class":2426},[629,59026,6527],{"class":675},[629,59028,59029],{"class":631,"line":747},[629,59030,734],{"emptyLinePlaceholder":586},[629,59032,59033,59035,59038,59040],{"class":631,"line":770},[629,59034,2407],{"class":642},[629,59036,59037],{"class":675}," customShader ",[629,59039,649],{"class":634},[629,59041,1196],{"class":634},[629,59043,59044,59047,59049],{"class":631,"line":782},[629,59045,59046],{"class":638}," uniforms",[629,59048,1210],{"class":634},[629,59050,1196],{"class":634},[629,59052,59053,59055,59057,59059,59061,59063,59065],{"class":631,"line":792},[629,59054,22255],{"class":638},[629,59056,1210],{"class":634},[629,59058,672],{"class":634},[629,59060,24828],{"class":638},[629,59062,1210],{"class":634},[629,59064,3640],{"class":634},[629,59066,7081],{"class":634},[629,59068,59069,59072,59074,59076,59078,59080,59082],{"class":631,"line":797},[629,59070,59071],{"class":638}," tDiffuse",[629,59073,1210],{"class":634},[629,59075,672],{"class":634},[629,59077,24828],{"class":638},[629,59079,1210],{"class":634},[629,59081,3640],{"class":634},[629,59083,7081],{"class":634},[629,59085,59086,59089,59091,59093,59095,59097,59099],{"class":631,"line":819},[629,59087,59088],{"class":638}," textureMatrix",[629,59090,1210],{"class":634},[629,59092,672],{"class":634},[629,59094,24828],{"class":638},[629,59096,1210],{"class":634},[629,59098,3640],{"class":634},[629,59100,7081],{"class":634},[629,59102,59103,59106,59108,59110,59112,59114,59116],{"class":631,"line":623},[629,59104,59105],{"class":638}," time",[629,59107,1210],{"class":634},[629,59109,672],{"class":634},[629,59111,24828],{"class":638},[629,59113,1210],{"class":634},[629,59115,2498],{"class":2493},[629,59117,7081],{"class":634},[629,59119,59120],{"class":631,"line":842},[629,59121,2589],{"class":634},[629,59123,59124,59127,59129,59132],{"class":631,"line":853},[629,59125,59126],{"class":638}," vertexShader",[629,59128,1210],{"class":634},[629,59130,59131],{"class":1201}," /* glsl */",[629,59133,20767],{"class":634},[629,59135,59136],{"class":631,"line":864},[629,59137,59138],{"class":655}," uniform mat4 textureMatrix;\n",[629,59140,59141],{"class":631,"line":874},[629,59142,59143],{"class":655}," varying vec4 vUv;\n",[629,59145,59146],{"class":631,"line":624},[629,59147,59148],{"class":655}," varying vec2 vPos;\n",[629,59150,59151],{"class":631,"line":894},[629,59152,59153],{"class":655}," void main() {\n",[629,59155,59156],{"class":631,"line":904},[629,59157,59158],{"class":655}," vUv = textureMatrix * vec4(position, 1.0);\n",[629,59160,59161],{"class":631,"line":2617},[629,59162,59163],{"class":655}," vPos = position.xy;\n",[629,59165,59166],{"class":631,"line":2626},[629,59167,59168],{"class":655}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[629,59170,59171,59174,59177],{"class":631,"line":2646},[629,59172,59173],{"class":655}," }",[629,59175,59176],{"class":634},"`",[629,59178,2480],{"class":634},[629,59180,59181,59184,59186,59188],{"class":631,"line":2655},[629,59182,59183],{"class":638}," fragmentShader",[629,59185,1210],{"class":634},[629,59187,59131],{"class":1201},[629,59189,20767],{"class":634},[629,59191,59192],{"class":631,"line":2664},[629,59193,59194],{"class":655}," uniform vec3 color;\n",[629,59196,59197],{"class":631,"line":2673},[629,59198,59199],{"class":655}," uniform sampler2D tDiffuse;\n",[629,59201,59202],{"class":631,"line":2695},[629,59203,59204],{"class":655}," uniform float time;\n",[629,59206,59207],{"class":631,"line":2739},[629,59208,59143],{"class":655},[629,59210,59211],{"class":631,"line":2748},[629,59212,59148],{"class":655},[629,59214,59215],{"class":631,"line":2757},[629,59216,59217],{"class":655}," float blendOverlay(float base, float blend) {\n",[629,59219,59220],{"class":631,"line":3914},[629,59221,59222],{"class":655}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[629,59224,59225],{"class":631,"line":3945},[629,59226,59227],{"class":655}," }\n",[629,59229,59230],{"class":631,"line":3966},[629,59231,59232],{"class":655}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[629,59234,59235],{"class":631,"line":3985},[629,59236,59237],{"class":655}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[629,59239,59240],{"class":631,"line":4017},[629,59241,59227],{"class":655},[629,59243,59244],{"class":631,"line":4026},[629,59245,59153],{"class":655},[629,59247,59248],{"class":631,"line":4035},[629,59249,59250],{"class":655}," float dist = length(vPos);\n",[629,59252,59253],{"class":631,"line":19512},[629,59254,59255],{"class":655}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[629,59257,59258],{"class":631,"line":19527},[629,59259,59260],{"class":655}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[629,59262,59263],{"class":631,"line":19542},[629,59264,59265],{"class":655}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[629,59267,59268],{"class":631,"line":19547},[629,59269,59270],{"class":655}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[629,59272,59273],{"class":631,"line":19554},[629,59274,59275],{"class":655}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[629,59277,59278],{"class":631,"line":19559},[629,59279,59280],{"class":655}," #include \u003Ctonemapping_fragment>\n",[629,59282,59283],{"class":631,"line":19565},[629,59284,59285],{"class":655}," #include \u003Ccolorspace_fragment>\n",[629,59287,59288,59290,59292],{"class":631,"line":19586},[629,59289,59173],{"class":655},[629,59291,59176],{"class":634},[629,59293,2480],{"class":634},[629,59295,59296],{"class":631,"line":19592},[629,59297,1317],{"class":634},[629,59299,59300],{"class":631,"line":19599},[629,59301,734],{"emptyLinePlaceholder":586},[629,59303,59304,59306,59308,59311,59313,59315,59317],{"class":631,"line":19604},[629,59305,2407],{"class":642},[629,59307,672],{"class":634},[629,59309,59310],{"class":675}," onBeforeRender ",[629,59312,2420],{"class":634},[629,59314,2423],{"class":634},[629,59316,58981],{"class":2426},[629,59318,6527],{"class":675},[629,59320,59321,59324,59326,59328,59330,59332,59334],{"class":631,"line":19625},[629,59322,59323],{"class":2426},"onBeforeRender",[629,59325,2429],{"class":675},[629,59327,37758],{"class":634},[629,59329,37761],{"class":6830},[629,59331,37775],{"class":634},[629,59333,3669],{"class":642},[629,59335,1196],{"class":634},[629,59337,59338,59340,59343,59345,59348,59350,59352,59354,59356,59358,59360,59362],{"class":631,"line":19638},[629,59339,55036],{"class":642},[629,59341,59342],{"class":675}," uniforms",[629,59344,2423],{"class":634},[629,59346,59347],{"class":675}," reflectorRef",[629,59349,1138],{"class":634},[629,59351,3677],{"class":675},[629,59353,3680],{"class":634},[629,59355,16385],{"class":675},[629,59357,3680],{"class":634},[629,59359,5192],{"class":675},[629,59361,3680],{"class":634},[629,59363,59364],{"class":675},"uniforms\n",[629,59366,59367,59369,59371,59373,59375,59378,59380,59382,59384,59386,59388,59390,59392,59394,59396],{"class":631,"line":19664},[629,59368,19324],{"class":668},[629,59370,3066],{"class":638},[629,59372,58924],{"class":675},[629,59374,3680],{"class":634},[629,59376,59377],{"class":675},"time",[629,59379,4726],{"class":638},[629,59381,39653],{"class":634},[629,59383,59342],{"class":675},[629,59385,1138],{"class":634},[629,59387,59377],{"class":675},[629,59389,1138],{"class":634},[629,59391,3677],{"class":675},[629,59393,2423],{"class":634},[629,59395,37761],{"class":675},[629,59397,15865],{"class":634},[629,59399,59400,59402],{"class":631,"line":19669},[629,59401,2420],{"class":634},[629,59403,2440],{"class":675},[629,59405,59406,59408,59410],{"class":631,"line":19676},[629,59407,724],{"class":634},[629,59409,639],{"class":638},[629,59411,661],{"class":634},[629,59413,59414],{"class":631,"line":19685},[629,59415,734],{"emptyLinePlaceholder":586},[629,59417,59418,59420,59422],{"class":631,"line":19690},[629,59419,635],{"class":634},[629,59421,742],{"class":638},[629,59423,661],{"class":634},[629,59425,59426,59428],{"class":631,"line":19699},[629,59427,750],{"class":634},[629,59429,58726],{"class":638},[629,59431,59432,59434,59436,59438,59441],{"class":631,"line":19718},[629,59433,16594],{"class":642},[629,59435,649],{"class":634},[629,59437,652],{"class":634},[629,59439,59440],{"class":655},"reflectorRef",[629,59442,3123],{"class":634},[629,59444,59445,59448,59450,59452,59454],{"class":631,"line":19728},[629,59446,59447],{"class":642}," :rotation",[629,59449,649],{"class":634},[629,59451,652],{"class":634},[629,59453,58738],{"class":655},[629,59455,3123],{"class":634},[629,59457,59458,59461,59463,59465,59467],{"class":631,"line":19763},[629,59459,59460],{"class":642}," :position-y",[629,59462,649],{"class":634},[629,59464,652],{"class":634},[629,59466,58752],{"class":655},[629,59468,3123],{"class":634},[629,59470,59471,59473,59475,59477,59479],{"class":631,"line":19772},[629,59472,22255],{"class":642},[629,59474,649],{"class":634},[629,59476,652],{"class":634},[629,59478,58765],{"class":655},[629,59480,3123],{"class":634},[629,59482,59483,59486,59488,59490,59493],{"class":631,"line":19792},[629,59484,59485],{"class":642}," :shader",[629,59487,649],{"class":634},[629,59489,652],{"class":634},[629,59491,59492],{"class":655},"customShader",[629,59494,3123],{"class":634},[629,59496,59497],{"class":631,"line":19801},[629,59498,5165],{"class":634},[629,59500,59501,59503,59505,59507,59509,59511,59513,59515],{"class":631,"line":19810},[629,59502,773],{"class":634},[629,59504,8902],{"class":638},[629,59506,1951],{"class":642},[629,59508,649],{"class":634},[629,59510,652],{"class":634},[629,59512,10023],{"class":655},[629,59514,652],{"class":634},[629,59516,779],{"class":634},[629,59518,59519,59521,59523],{"class":631,"line":19829},[629,59520,897],{"class":634},[629,59522,445],{"class":638},[629,59524,661],{"class":634},[629,59526,59527,59529,59531],{"class":631,"line":19872},[629,59528,724],{"class":634},[629,59530,742],{"class":638},[629,59532,661],{"class":634},[606,59534,59535],{},"The Reflector shader use the following configuration by default:",[606,59537,59538],{},"You can extend, modify or just play with them",[4043,59540,59542],{"id":59541},"default-shader","Default shader",[618,59544,59546],{"className":40108,"code":59545,"language":40110,"meta":568,"style":568},"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",[610,59547,59548,59559,59575,59583,59591,59601,59606,59614,59622,59626,59634,59642,59646,59650,59660,59665,59670,59674,59679,59684,59688,59693,59698,59703,59707,59712,59716,59725,59735,59740,59745,59749,59753,59758,59762,59767,59772,59776,59780,59785,59790,59794,59798,59802,59807,59811,59816,59821,59825,59830,59835,59841,59845],{"__ignoreMap":568},[629,59549,59550,59552,59555,59557],{"class":631,"line":569},[629,59551,2407],{"class":642},[629,59553,59554],{"class":675}," shader ",[629,59556,649],{"class":634},[629,59558,1196],{"class":634},[629,59560,59561,59564,59566,59568,59571,59573],{"class":631,"line":570},[629,59562,59563],{"class":638}," name",[629,59565,1210],{"class":634},[629,59567,691],{"class":634},[629,59569,59570],{"class":655},"ReflectorShader",[629,59572,2432],{"class":634},[629,59574,2480],{"class":634},[629,59576,59577,59579,59581],{"class":631,"line":700},[629,59578,59046],{"class":638},[629,59580,1210],{"class":634},[629,59582,1196],{"class":634},[629,59584,59585,59587,59589],{"class":631,"line":721},[629,59586,22255],{"class":638},[629,59588,1210],{"class":634},[629,59590,1196],{"class":634},[629,59592,59593,59596,59598],{"class":631,"line":731},[629,59594,59595],{"class":638}," value",[629,59597,1210],{"class":634},[629,59599,59600],{"class":634}," null\n",[629,59602,59603],{"class":631,"line":737},[629,59604,59605],{"class":634}," },\n",[629,59607,59608,59610,59612],{"class":631,"line":747},[629,59609,59071],{"class":638},[629,59611,1210],{"class":634},[629,59613,1196],{"class":634},[629,59615,59616,59618,59620],{"class":631,"line":770},[629,59617,59595],{"class":638},[629,59619,1210],{"class":634},[629,59621,59600],{"class":634},[629,59623,59624],{"class":631,"line":782},[629,59625,59605],{"class":634},[629,59627,59628,59630,59632],{"class":631,"line":792},[629,59629,59088],{"class":638},[629,59631,1210],{"class":634},[629,59633,1196],{"class":634},[629,59635,59636,59638,59640],{"class":631,"line":797},[629,59637,59595],{"class":638},[629,59639,1210],{"class":634},[629,59641,59600],{"class":634},[629,59643,59644],{"class":631,"line":819},[629,59645,59227],{"class":634},[629,59647,59648],{"class":631,"line":623},[629,59649,2589],{"class":634},[629,59651,59652,59654,59656,59658],{"class":631,"line":842},[629,59653,59126],{"class":638},[629,59655,1210],{"class":634},[629,59657,59131],{"class":1201},[629,59659,20767],{"class":634},[629,59661,59662],{"class":631,"line":853},[629,59663,59664],{"class":655}," uniform mat4 textureMatrix;\n",[629,59666,59667],{"class":631,"line":864},[629,59668,59669],{"class":655}," varying vec4 vUv;\n",[629,59671,59672],{"class":631,"line":874},[629,59673,734],{"emptyLinePlaceholder":586},[629,59675,59676],{"class":631,"line":624},[629,59677,59678],{"class":655}," #include \u003Ccommon>\n",[629,59680,59681],{"class":631,"line":894},[629,59682,59683],{"class":655}," #include \u003Clogdepthbuf_pars_vertex>\n",[629,59685,59686],{"class":631,"line":904},[629,59687,734],{"emptyLinePlaceholder":586},[629,59689,59690],{"class":631,"line":2617},[629,59691,59692],{"class":655}," void main() {\n",[629,59694,59695],{"class":631,"line":2626},[629,59696,59697],{"class":655}," vUv = textureMatrix * vec4( position, 1.0 );\n",[629,59699,59700],{"class":631,"line":2646},[629,59701,59702],{"class":655}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[629,59704,59705],{"class":631,"line":2655},[629,59706,734],{"emptyLinePlaceholder":586},[629,59708,59709],{"class":631,"line":2664},[629,59710,59711],{"class":655}," #include \u003Clogdepthbuf_vertex>\n",[629,59713,59714],{"class":631,"line":2673},[629,59715,734],{"emptyLinePlaceholder":586},[629,59717,59718,59721,59723],{"class":631,"line":2695},[629,59719,59720],{"class":655}," }",[629,59722,59176],{"class":634},[629,59724,2480],{"class":634},[629,59726,59727,59729,59731,59733],{"class":631,"line":2739},[629,59728,59183],{"class":638},[629,59730,1210],{"class":634},[629,59732,59131],{"class":1201},[629,59734,20767],{"class":634},[629,59736,59737],{"class":631,"line":2748},[629,59738,59739],{"class":655}," uniform vec3 color;\n",[629,59741,59742],{"class":631,"line":2757},[629,59743,59744],{"class":655}," uniform sampler2D tDiffuse;\n",[629,59746,59747],{"class":631,"line":3914},[629,59748,59669],{"class":655},[629,59750,59751],{"class":631,"line":3945},[629,59752,734],{"emptyLinePlaceholder":586},[629,59754,59755],{"class":631,"line":3966},[629,59756,59757],{"class":655}," #include \u003Clogdepthbuf_pars_fragment>\n",[629,59759,59760],{"class":631,"line":3985},[629,59761,734],{"emptyLinePlaceholder":586},[629,59763,59764],{"class":631,"line":4017},[629,59765,59766],{"class":655}," float blendOverlay( float base, float blend ) {\n",[629,59768,59769],{"class":631,"line":4026},[629,59770,59771],{"class":655}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[629,59773,59774],{"class":631,"line":4035},[629,59775,7849],{"class":655},[629,59777,59778],{"class":631,"line":19512},[629,59779,734],{"emptyLinePlaceholder":586},[629,59781,59782],{"class":631,"line":19527},[629,59783,59784],{"class":655}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[629,59786,59787],{"class":631,"line":19542},[629,59788,59789],{"class":655}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[629,59791,59792],{"class":631,"line":19547},[629,59793,7849],{"class":655},[629,59795,59796],{"class":631,"line":19554},[629,59797,734],{"emptyLinePlaceholder":586},[629,59799,59800],{"class":631,"line":19559},[629,59801,59692],{"class":655},[629,59803,59804],{"class":631,"line":19565},[629,59805,59806],{"class":655}," #include \u003Clogdepthbuf_fragment>\n",[629,59808,59809],{"class":631,"line":19586},[629,59810,734],{"emptyLinePlaceholder":586},[629,59812,59813],{"class":631,"line":19592},[629,59814,59815],{"class":655}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[629,59817,59818],{"class":631,"line":19599},[629,59819,59820],{"class":655}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[629,59822,59823],{"class":631,"line":19604},[629,59824,734],{"emptyLinePlaceholder":586},[629,59826,59827],{"class":631,"line":19625},[629,59828,59829],{"class":655}," #include \u003Ctonemapping_fragment>\n",[629,59831,59832],{"class":631,"line":19638},[629,59833,59834],{"class":655}," #include \u003Ccolorspace_fragment>\n",[629,59836,59837,59839],{"class":631,"line":19664},[629,59838,59720],{"class":655},[629,59840,20767],{"class":634},[629,59842,59843],{"class":631,"line":19669},[629,59844,734],{"emptyLinePlaceholder":586},[629,59846,59847],{"class":631,"line":19676},[629,59848,1317],{"class":634},[1319,59850,59851],{},"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":568,"searchDepth":569,"depth":570,"links":59853},[59854,59855,59856],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":58917,"depth":570,"text":58918,"children":59857},[59858],{"id":59541,"depth":700,"text":59542},"Create real-time reflections of your scene.",{},{"title":445,"description":59859},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",{"id":59864,"title":449,"body":59865,"description":61032,"extension":583,"links":584,"meta":61033,"navigation":586,"path":450,"seo":61034,"stem":451,"__hash__":61035},"docs/2.api/9.objects/refractor.md",{"type":493,"value":59866,"toc":61025},[59867,59872,59885,59887,60135,60137,60231,60239,60243,60251,60788,60791,60793,61022],[600,59868,59869],{},[59870,59871],"objects-refractor",{},[606,59873,2768,59874,58592,59876,59881,59882,59884],{},[610,59875,7309],{},[1132,59877,59880],{"href":59878,"rel":59879},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[1136],"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 ",[610,59883,4284],{}," so all the default props can be passed as well.",[496,59886,15],{"id":616},[618,59888,59890],{"className":620,"code":59889,"language":625,"meta":568,"style":568},"\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",[610,59891,59892,59912,59931,59939,59943,59951,59963,59982,59990,59994,59999,60018,60026,60045,60053,60057,60065,60084,60103,60111,60119,60127],{"__ignoreMap":568},[629,59893,59894,59896,59898,59900,59902,59904,59906,59908,59910],{"class":631,"line":569},[629,59895,635],{"class":634},[629,59897,639],{"class":638},[629,59899,643],{"class":642},[629,59901,646],{"class":642},[629,59903,649],{"class":634},[629,59905,652],{"class":634},[629,59907,656],{"class":655},[629,59909,652],{"class":634},[629,59911,661],{"class":634},[629,59913,59914,59916,59918,59921,59923,59925,59927,59929],{"class":631,"line":570},[629,59915,669],{"class":668},[629,59917,672],{"class":634},[629,59919,59920],{"class":675}," Refractor",[629,59922,685],{"class":634},[629,59924,688],{"class":668},[629,59926,691],{"class":634},[629,59928,694],{"class":655},[629,59930,697],{"class":634},[629,59932,59933,59935,59937],{"class":631,"line":700},[629,59934,724],{"class":634},[629,59936,639],{"class":638},[629,59938,661],{"class":634},[629,59940,59941],{"class":631,"line":721},[629,59942,734],{"emptyLinePlaceholder":586},[629,59944,59945,59947,59949],{"class":631,"line":731},[629,59946,635],{"class":634},[629,59948,742],{"class":638},[629,59950,661],{"class":634},[629,59952,59953,59955,59957,59959,59961],{"class":631,"line":737},[629,59954,750],{"class":634},[629,59956,753],{"class":638},[629,59958,40694],{"class":642},[629,59960,58678],{"class":642},[629,59962,661],{"class":634},[629,59964,59965,59967,59969,59971,59973,59975,59978,59980],{"class":631,"line":747},[629,59966,773],{"class":634},[629,59968,776],{"class":638},[629,59970,1477],{"class":642},[629,59972,649],{"class":634},[629,59974,652],{"class":634},[629,59976,59977],{"class":655},"[0, 2, 8]",[629,59979,652],{"class":634},[629,59981,779],{"class":634},[629,59983,59984,59986,59988],{"class":631,"line":770},[629,59985,773],{"class":634},[629,59987,787],{"class":638},[629,59989,779],{"class":634},[629,59991,59992],{"class":631,"line":782},[629,59993,734],{"emptyLinePlaceholder":586},[629,59995,59996],{"class":631,"line":792},[629,59997,59998],{"class":1201}," \u003C!-- Place objects behind the refracting plane -->\n",[629,60000,60001,60003,60005,60007,60009,60011,60014,60016],{"class":631,"line":797},[629,60002,773],{"class":634},[629,60004,848],{"class":638},[629,60006,1477],{"class":642},[629,60008,649],{"class":634},[629,60010,652],{"class":634},[629,60012,60013],{"class":655},"[-2, 0, -2]",[629,60015,652],{"class":634},[629,60017,661],{"class":634},[629,60019,60020,60022,60024],{"class":631,"line":819},[629,60021,845],{"class":634},[629,60023,25928],{"class":638},[629,60025,779],{"class":634},[629,60027,60028,60030,60032,60034,60036,60038,60041,60043],{"class":631,"line":623},[629,60029,845],{"class":634},[629,60031,2678],{"class":638},[629,60033,2681],{"class":642},[629,60035,649],{"class":634},[629,60037,652],{"class":634},[629,60039,60040],{"class":655},"hotpink",[629,60042,652],{"class":634},[629,60044,779],{"class":634},[629,60046,60047,60049,60051],{"class":631,"line":842},[629,60048,887],{"class":634},[629,60050,848],{"class":638},[629,60052,661],{"class":634},[629,60054,60055],{"class":631,"line":853},[629,60056,734],{"emptyLinePlaceholder":586},[629,60058,60059,60061,60063],{"class":631,"line":864},[629,60060,773],{"class":634},[629,60062,19723],{"class":638},[629,60064,661],{"class":634},[629,60066,60067,60069,60071,60073,60075,60077,60080,60082],{"class":631,"line":874},[629,60068,845],{"class":634},[629,60070,449],{"class":638},[629,60072,2681],{"class":642},[629,60074,649],{"class":634},[629,60076,652],{"class":634},[629,60078,60079],{"class":655},"#9ec8d4",[629,60081,652],{"class":634},[629,60083,661],{"class":634},[629,60085,60086,60088,60090,60092,60094,60096,60099,60101],{"class":631,"line":624},[629,60087,856],{"class":634},[629,60089,25845],{"class":638},[629,60091,1951],{"class":642},[629,60093,649],{"class":634},[629,60095,652],{"class":634},[629,60097,60098],{"class":655},"[8, 5]",[629,60100,652],{"class":634},[629,60102,779],{"class":634},[629,60104,60105,60107,60109],{"class":631,"line":894},[629,60106,877],{"class":634},[629,60108,449],{"class":638},[629,60110,661],{"class":634},[629,60112,60113,60115,60117],{"class":631,"line":904},[629,60114,887],{"class":634},[629,60116,19723],{"class":638},[629,60118,661],{"class":634},[629,60120,60121,60123,60125],{"class":631,"line":2617},[629,60122,897],{"class":634},[629,60124,753],{"class":638},[629,60126,661],{"class":634},[629,60128,60129,60131,60133],{"class":631,"line":2626},[629,60130,724],{"class":634},[629,60132,742],{"class":638},[629,60134,661],{"class":634},[496,60136,914],{"id":913},[919,60138,60139,60149],{},[922,60140,60141],{},[925,60142,60143,60145,60147],{},[928,60144,930],{"align":989},[928,60146,933],{"align":989},[928,60148,936],{},[938,60150,60151,60165,60178,60191,60204,60217],{},[925,60152,60153,60157,60160],{},[943,60154,60155],{"align":989},[1661,60156,7539],{},[943,60158,60159],{"align":989},"Color tint blended with the refracted image",[943,60161,60162],{},[610,60163,60164],{},"'#7f7f7f'",[925,60166,60167,60171,60174],{},[943,60168,60169],{"align":989},[1661,60170,44217],{},[943,60172,60173],{"align":989},"Width of the internal render target texture",[943,60175,60176],{},[610,60177,26056],{},[925,60179,60180,60184,60187],{},[943,60181,60182],{"align":989},[1661,60183,44234],{},[943,60185,60186],{"align":989},"Height of the internal render target texture",[943,60188,60189],{},[610,60190,26056],{},[925,60192,60193,60197,60200],{},[943,60194,60195],{"align":989},[1661,60196,44351],{},[943,60198,60199],{"align":989},"Clip bias for the virtual camera projection",[943,60201,60202],{},[610,60203,957],{},[925,60205,60206,60210,60213],{},[943,60207,60208],{"align":989},[1661,60209,58889],{},[943,60211,60212],{"align":989},"Number of MSAA samples for the render target",[943,60214,60215],{},[610,60216,8420],{},[925,60218,60219,60223,60226],{},[943,60220,60221],{"align":989},[1661,60222,58901],{},[943,60224,60225],{"align":989},"Custom shader object to override the built-in shader",[943,60227,60228],{},[610,60229,60230],{},"Refractor.RefractorShader",[3191,60232,60233],{},[606,60234,60235,60236,60238],{},"All the props except ",[610,60237,7539],{}," are not reactive",[496,60240,60242],{"id":60241},"custom-refraction-effect","Custom refraction effect",[606,60244,58921,60245,1664,60247,1680,60249,58929],{},[610,60246,58924],{},[610,60248,24255],{},[610,60250,24270],{},[618,60252,60254],{"className":620,"code":60253,"language":625,"meta":568,"style":568},"\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",[610,60255,60256,60276,60294,60312,60330,60334,60347,60351,60361,60369,60385,60401,60417,60433,60437,60447,60451,60455,60459,60463,60467,60471,60475,60483,60493,60497,60501,60505,60509,60513,60517,60521,60525,60529,60533,60537,60541,60545,60549,60553,60557,60561,60565,60569,60573,60581,60585,60589,60605,60621,60648,60680,60686,60694,60698,60706,60713,60726,60738,60750,60754,60772,60780],{"__ignoreMap":568},[629,60257,60258,60260,60262,60264,60266,60268,60270,60272,60274],{"class":631,"line":569},[629,60259,635],{"class":634},[629,60261,639],{"class":638},[629,60263,643],{"class":642},[629,60265,646],{"class":642},[629,60267,649],{"class":634},[629,60269,652],{"class":634},[629,60271,656],{"class":655},[629,60273,652],{"class":634},[629,60275,661],{"class":634},[629,60277,60278,60280,60282,60284,60286,60288,60290,60292],{"class":631,"line":570},[629,60279,669],{"class":668},[629,60281,672],{"class":634},[629,60283,59920],{"class":675},[629,60285,685],{"class":634},[629,60287,688],{"class":668},[629,60289,691],{"class":634},[629,60291,694],{"class":655},[629,60293,697],{"class":634},[629,60295,60296,60298,60300,60302,60304,60306,60308,60310],{"class":631,"line":700},[629,60297,669],{"class":668},[629,60299,672],{"class":634},[629,60301,58981],{"class":675},[629,60303,685],{"class":634},[629,60305,688],{"class":668},[629,60307,691],{"class":634},[629,60309,716],{"class":655},[629,60311,697],{"class":634},[629,60313,60314,60316,60318,60320,60322,60324,60326,60328],{"class":631,"line":721},[629,60315,669],{"class":668},[629,60317,672],{"class":634},[629,60319,3490],{"class":675},[629,60321,685],{"class":634},[629,60323,688],{"class":668},[629,60325,691],{"class":634},[629,60327,625],{"class":655},[629,60329,697],{"class":634},[629,60331,60332],{"class":631,"line":731},[629,60333,734],{"emptyLinePlaceholder":586},[629,60335,60336,60338,60341,60343,60345],{"class":631,"line":737},[629,60337,2407],{"class":642},[629,60339,60340],{"class":675}," refractorRef ",[629,60342,649],{"class":634},[629,60344,3490],{"class":2426},[629,60346,6527],{"class":675},[629,60348,60349],{"class":631,"line":747},[629,60350,734],{"emptyLinePlaceholder":586},[629,60352,60353,60355,60357,60359],{"class":631,"line":770},[629,60354,2407],{"class":642},[629,60356,59037],{"class":675},[629,60358,649],{"class":634},[629,60360,1196],{"class":634},[629,60362,60363,60365,60367],{"class":631,"line":782},[629,60364,59046],{"class":638},[629,60366,1210],{"class":634},[629,60368,1196],{"class":634},[629,60370,60371,60373,60375,60377,60379,60381,60383],{"class":631,"line":792},[629,60372,22255],{"class":638},[629,60374,1210],{"class":634},[629,60376,672],{"class":634},[629,60378,24828],{"class":638},[629,60380,1210],{"class":634},[629,60382,3640],{"class":634},[629,60384,7081],{"class":634},[629,60386,60387,60389,60391,60393,60395,60397,60399],{"class":631,"line":797},[629,60388,59071],{"class":638},[629,60390,1210],{"class":634},[629,60392,672],{"class":634},[629,60394,24828],{"class":638},[629,60396,1210],{"class":634},[629,60398,3640],{"class":634},[629,60400,7081],{"class":634},[629,60402,60403,60405,60407,60409,60411,60413,60415],{"class":631,"line":819},[629,60404,59088],{"class":638},[629,60406,1210],{"class":634},[629,60408,672],{"class":634},[629,60410,24828],{"class":638},[629,60412,1210],{"class":634},[629,60414,3640],{"class":634},[629,60416,7081],{"class":634},[629,60418,60419,60421,60423,60425,60427,60429,60431],{"class":631,"line":623},[629,60420,59105],{"class":638},[629,60422,1210],{"class":634},[629,60424,672],{"class":634},[629,60426,24828],{"class":638},[629,60428,1210],{"class":634},[629,60430,2498],{"class":2493},[629,60432,7081],{"class":634},[629,60434,60435],{"class":631,"line":842},[629,60436,2589],{"class":634},[629,60438,60439,60441,60443,60445],{"class":631,"line":853},[629,60440,59126],{"class":638},[629,60442,1210],{"class":634},[629,60444,59131],{"class":1201},[629,60446,20767],{"class":634},[629,60448,60449],{"class":631,"line":864},[629,60450,59138],{"class":655},[629,60452,60453],{"class":631,"line":874},[629,60454,59143],{"class":655},[629,60456,60457],{"class":631,"line":624},[629,60458,59148],{"class":655},[629,60460,60461],{"class":631,"line":894},[629,60462,59153],{"class":655},[629,60464,60465],{"class":631,"line":904},[629,60466,59158],{"class":655},[629,60468,60469],{"class":631,"line":2617},[629,60470,59163],{"class":655},[629,60472,60473],{"class":631,"line":2626},[629,60474,59168],{"class":655},[629,60476,60477,60479,60481],{"class":631,"line":2646},[629,60478,59173],{"class":655},[629,60480,59176],{"class":634},[629,60482,2480],{"class":634},[629,60484,60485,60487,60489,60491],{"class":631,"line":2655},[629,60486,59183],{"class":638},[629,60488,1210],{"class":634},[629,60490,59131],{"class":1201},[629,60492,20767],{"class":634},[629,60494,60495],{"class":631,"line":2664},[629,60496,59194],{"class":655},[629,60498,60499],{"class":631,"line":2673},[629,60500,59199],{"class":655},[629,60502,60503],{"class":631,"line":2695},[629,60504,59204],{"class":655},[629,60506,60507],{"class":631,"line":2739},[629,60508,59143],{"class":655},[629,60510,60511],{"class":631,"line":2748},[629,60512,59148],{"class":655},[629,60514,60515],{"class":631,"line":2757},[629,60516,59217],{"class":655},[629,60518,60519],{"class":631,"line":3914},[629,60520,59222],{"class":655},[629,60522,60523],{"class":631,"line":3945},[629,60524,59227],{"class":655},[629,60526,60527],{"class":631,"line":3966},[629,60528,59232],{"class":655},[629,60530,60531],{"class":631,"line":3985},[629,60532,59237],{"class":655},[629,60534,60535],{"class":631,"line":4017},[629,60536,59227],{"class":655},[629,60538,60539],{"class":631,"line":4026},[629,60540,59153],{"class":655},[629,60542,60543],{"class":631,"line":4035},[629,60544,59250],{"class":655},[629,60546,60547],{"class":631,"line":19512},[629,60548,59255],{"class":655},[629,60550,60551],{"class":631,"line":19527},[629,60552,59260],{"class":655},[629,60554,60555],{"class":631,"line":19542},[629,60556,59265],{"class":655},[629,60558,60559],{"class":631,"line":19547},[629,60560,59270],{"class":655},[629,60562,60563],{"class":631,"line":19554},[629,60564,59275],{"class":655},[629,60566,60567],{"class":631,"line":19559},[629,60568,59280],{"class":655},[629,60570,60571],{"class":631,"line":19565},[629,60572,59285],{"class":655},[629,60574,60575,60577,60579],{"class":631,"line":19586},[629,60576,59173],{"class":655},[629,60578,59176],{"class":634},[629,60580,2480],{"class":634},[629,60582,60583],{"class":631,"line":19592},[629,60584,1317],{"class":634},[629,60586,60587],{"class":631,"line":19599},[629,60588,734],{"emptyLinePlaceholder":586},[629,60590,60591,60593,60595,60597,60599,60601,60603],{"class":631,"line":19604},[629,60592,2407],{"class":642},[629,60594,672],{"class":634},[629,60596,59310],{"class":675},[629,60598,2420],{"class":634},[629,60600,2423],{"class":634},[629,60602,58981],{"class":2426},[629,60604,6527],{"class":675},[629,60606,60607,60609,60611,60613,60615,60617,60619],{"class":631,"line":19625},[629,60608,59323],{"class":2426},[629,60610,2429],{"class":675},[629,60612,37758],{"class":634},[629,60614,37761],{"class":6830},[629,60616,37775],{"class":634},[629,60618,3669],{"class":642},[629,60620,1196],{"class":634},[629,60622,60623,60625,60627,60629,60632,60634,60636,60638,60640,60642,60644,60646],{"class":631,"line":19638},[629,60624,55036],{"class":642},[629,60626,59342],{"class":675},[629,60628,2423],{"class":634},[629,60630,60631],{"class":675}," refractorRef",[629,60633,1138],{"class":634},[629,60635,3677],{"class":675},[629,60637,3680],{"class":634},[629,60639,16385],{"class":675},[629,60641,3680],{"class":634},[629,60643,5192],{"class":675},[629,60645,3680],{"class":634},[629,60647,59364],{"class":675},[629,60649,60650,60652,60654,60656,60658,60660,60662,60664,60666,60668,60670,60672,60674,60676,60678],{"class":631,"line":19664},[629,60651,19324],{"class":668},[629,60653,3066],{"class":638},[629,60655,58924],{"class":675},[629,60657,3680],{"class":634},[629,60659,59377],{"class":675},[629,60661,4726],{"class":638},[629,60663,39653],{"class":634},[629,60665,59342],{"class":675},[629,60667,1138],{"class":634},[629,60669,59377],{"class":675},[629,60671,1138],{"class":634},[629,60673,3677],{"class":675},[629,60675,2423],{"class":634},[629,60677,37761],{"class":675},[629,60679,15865],{"class":634},[629,60681,60682,60684],{"class":631,"line":19669},[629,60683,2420],{"class":634},[629,60685,2440],{"class":675},[629,60687,60688,60690,60692],{"class":631,"line":19676},[629,60689,724],{"class":634},[629,60691,639],{"class":638},[629,60693,661],{"class":634},[629,60695,60696],{"class":631,"line":19685},[629,60697,734],{"emptyLinePlaceholder":586},[629,60699,60700,60702,60704],{"class":631,"line":19690},[629,60701,635],{"class":634},[629,60703,742],{"class":638},[629,60705,661],{"class":634},[629,60707,60708,60710],{"class":631,"line":19699},[629,60709,750],{"class":634},[629,60711,60712],{"class":638},"Refractor\n",[629,60714,60715,60717,60719,60721,60724],{"class":631,"line":19718},[629,60716,16594],{"class":642},[629,60718,649],{"class":634},[629,60720,652],{"class":634},[629,60722,60723],{"class":655},"refractorRef",[629,60725,3123],{"class":634},[629,60727,60728,60730,60732,60734,60736],{"class":631,"line":19728},[629,60729,22255],{"class":642},[629,60731,649],{"class":634},[629,60733,652],{"class":634},[629,60735,60079],{"class":655},[629,60737,3123],{"class":634},[629,60739,60740,60742,60744,60746,60748],{"class":631,"line":19763},[629,60741,59485],{"class":642},[629,60743,649],{"class":634},[629,60745,652],{"class":634},[629,60747,59492],{"class":655},[629,60749,3123],{"class":634},[629,60751,60752],{"class":631,"line":19772},[629,60753,5165],{"class":634},[629,60755,60756,60758,60760,60762,60764,60766,60768,60770],{"class":631,"line":19792},[629,60757,773],{"class":634},[629,60759,25845],{"class":638},[629,60761,1951],{"class":642},[629,60763,649],{"class":634},[629,60765,652],{"class":634},[629,60767,60098],{"class":655},[629,60769,652],{"class":634},[629,60771,779],{"class":634},[629,60773,60774,60776,60778],{"class":631,"line":19801},[629,60775,897],{"class":634},[629,60777,449],{"class":638},[629,60779,661],{"class":634},[629,60781,60782,60784,60786],{"class":631,"line":19810},[629,60783,724],{"class":634},[629,60785,742],{"class":638},[629,60787,661],{"class":634},[606,60789,60790],{},"The Refractor shader uses the following configuration by default:",[4043,60792,59542],{"id":59541},[618,60794,60796],{"className":40108,"code":60795,"language":40110,"meta":568,"style":568},"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",[610,60797,60798,60808,60816,60824,60832,60836,60844,60852,60856,60864,60872,60876,60880,60890,60894,60898,60902,60906,60911,60916,60924,60934,60938,60942,60946,60950,60955,60960,60964,60968,60973,60978,60982,60986,60990,60995,61000,61004,61008,61012,61018],{"__ignoreMap":568},[629,60799,60800,60802,60804,60806],{"class":631,"line":569},[629,60801,2407],{"class":642},[629,60803,59554],{"class":675},[629,60805,649],{"class":634},[629,60807,1196],{"class":634},[629,60809,60810,60812,60814],{"class":631,"line":570},[629,60811,59046],{"class":638},[629,60813,1210],{"class":634},[629,60815,1196],{"class":634},[629,60817,60818,60820,60822],{"class":631,"line":700},[629,60819,22255],{"class":638},[629,60821,1210],{"class":634},[629,60823,1196],{"class":634},[629,60825,60826,60828,60830],{"class":631,"line":721},[629,60827,59595],{"class":638},[629,60829,1210],{"class":634},[629,60831,59600],{"class":634},[629,60833,60834],{"class":631,"line":731},[629,60835,59605],{"class":634},[629,60837,60838,60840,60842],{"class":631,"line":737},[629,60839,59071],{"class":638},[629,60841,1210],{"class":634},[629,60843,1196],{"class":634},[629,60845,60846,60848,60850],{"class":631,"line":747},[629,60847,59595],{"class":638},[629,60849,1210],{"class":634},[629,60851,59600],{"class":634},[629,60853,60854],{"class":631,"line":770},[629,60855,59605],{"class":634},[629,60857,60858,60860,60862],{"class":631,"line":782},[629,60859,59088],{"class":638},[629,60861,1210],{"class":634},[629,60863,1196],{"class":634},[629,60865,60866,60868,60870],{"class":631,"line":792},[629,60867,59595],{"class":638},[629,60869,1210],{"class":634},[629,60871,59600],{"class":634},[629,60873,60874],{"class":631,"line":797},[629,60875,59227],{"class":634},[629,60877,60878],{"class":631,"line":819},[629,60879,2589],{"class":634},[629,60881,60882,60884,60886,60888],{"class":631,"line":623},[629,60883,59126],{"class":638},[629,60885,1210],{"class":634},[629,60887,59131],{"class":1201},[629,60889,20767],{"class":634},[629,60891,60892],{"class":631,"line":842},[629,60893,59138],{"class":655},[629,60895,60896],{"class":631,"line":853},[629,60897,59143],{"class":655},[629,60899,60900],{"class":631,"line":864},[629,60901,734],{"emptyLinePlaceholder":586},[629,60903,60904],{"class":631,"line":874},[629,60905,59153],{"class":655},[629,60907,60908],{"class":631,"line":624},[629,60909,60910],{"class":655}," vUv = textureMatrix * vec4( position, 1.0 );\n",[629,60912,60913],{"class":631,"line":894},[629,60914,60915],{"class":655}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[629,60917,60918,60920,60922],{"class":631,"line":904},[629,60919,59173],{"class":655},[629,60921,59176],{"class":634},[629,60923,2480],{"class":634},[629,60925,60926,60928,60930,60932],{"class":631,"line":2617},[629,60927,59183],{"class":638},[629,60929,1210],{"class":634},[629,60931,59131],{"class":1201},[629,60933,20767],{"class":634},[629,60935,60936],{"class":631,"line":2626},[629,60937,59194],{"class":655},[629,60939,60940],{"class":631,"line":2646},[629,60941,59199],{"class":655},[629,60943,60944],{"class":631,"line":2655},[629,60945,59143],{"class":655},[629,60947,60948],{"class":631,"line":2664},[629,60949,734],{"emptyLinePlaceholder":586},[629,60951,60952],{"class":631,"line":2673},[629,60953,60954],{"class":655}," float blendOverlay( float base, float blend ) {\n",[629,60956,60957],{"class":631,"line":2695},[629,60958,60959],{"class":655}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[629,60961,60962],{"class":631,"line":2739},[629,60963,59227],{"class":655},[629,60965,60966],{"class":631,"line":2748},[629,60967,734],{"emptyLinePlaceholder":586},[629,60969,60970],{"class":631,"line":2757},[629,60971,60972],{"class":655}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[629,60974,60975],{"class":631,"line":3914},[629,60976,60977],{"class":655}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[629,60979,60980],{"class":631,"line":3945},[629,60981,59227],{"class":655},[629,60983,60984],{"class":631,"line":3966},[629,60985,734],{"emptyLinePlaceholder":586},[629,60987,60988],{"class":631,"line":3985},[629,60989,59153],{"class":655},[629,60991,60992],{"class":631,"line":4017},[629,60993,60994],{"class":655}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[629,60996,60997],{"class":631,"line":4026},[629,60998,60999],{"class":655}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[629,61001,61002],{"class":631,"line":4035},[629,61003,734],{"emptyLinePlaceholder":586},[629,61005,61006],{"class":631,"line":19512},[629,61007,59280],{"class":655},[629,61009,61010],{"class":631,"line":19527},[629,61011,59285],{"class":655},[629,61013,61014,61016],{"class":631,"line":19542},[629,61015,59173],{"class":655},[629,61017,20767],{"class":634},[629,61019,61020],{"class":631,"line":19547},[629,61021,1317],{"class":634},[1319,61023,61024],{},"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":568,"searchDepth":569,"depth":570,"links":61026},[61027,61028,61029],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":60241,"depth":570,"text":60242,"children":61030},[61031],{"id":59541,"depth":700,"text":59542},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":449,"description":61032},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",{"id":61037,"title":453,"body":61038,"description":61575,"extension":583,"links":584,"meta":61576,"navigation":586,"path":454,"seo":61577,"stem":455,"__hash__":61578},"docs/2.api/9.objects/text-3d.md",{"type":493,"value":61039,"toc":61571},[61040,61045,61056,61058,61077,61184,61199,61292,61295,61412,61414,61568],[600,61041,61042],{},[61043,61044],"objects-text",{},[606,61046,61047,61050,61051,34737],{},[610,61048,61049],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1132,61052,61055],{"href":61053,"rel":61054},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1136],"TextGeometry",[496,61057,15],{"id":616},[606,61059,61060,61061,61063,61064,61067,61068,61071,61072],{},"To use the ",[610,61062,61049],{}," component you need to pass the ",[610,61065,61066],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[610,61069,61070],{},"typeface",".json generated fonts, you can generate yours ",[1132,61073,61076],{"href":61074,"rel":61075},"http://gero3.github.io/facetype.js/",[1136],"here",[618,61078,61080],{"className":620,"code":61079,"language":625,"meta":568,"style":568},"\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",[610,61081,61082,61090,61098,61106,61113,61126,61140,61144,61152,61160,61168,61176],{"__ignoreMap":568},[629,61083,61084,61086,61088],{"class":631,"line":569},[629,61085,635],{"class":634},[629,61087,742],{"class":638},[629,61089,661],{"class":634},[629,61091,61092,61094,61096],{"class":631,"line":570},[629,61093,750],{"class":634},[629,61095,753],{"class":638},[629,61097,661],{"class":634},[629,61099,61100,61102,61104],{"class":631,"line":700},[629,61101,773],{"class":634},[629,61103,19723],{"class":638},[629,61105,661],{"class":634},[629,61107,61108,61110],{"class":631,"line":721},[629,61109,845],{"class":634},[629,61111,61112],{"class":638},"Text3D\n",[629,61114,61115,61118,61120,61122,61124],{"class":631,"line":731},[629,61116,61117],{"class":642}," text",[629,61119,649],{"class":634},[629,61121,652],{"class":634},[629,61123,14989],{"class":655},[629,61125,3123],{"class":634},[629,61127,61128,61131,61133,61135,61138],{"class":631,"line":737},[629,61129,61130],{"class":642}," font",[629,61132,649],{"class":634},[629,61134,652],{"class":634},[629,61136,61137],{"class":655},"/fonts/FiraCodeRegular.json",[629,61139,3123],{"class":634},[629,61141,61142],{"class":631,"line":747},[629,61143,51908],{"class":634},[629,61145,61146,61148,61150],{"class":631,"line":770},[629,61147,856],{"class":634},[629,61149,869],{"class":638},[629,61151,779],{"class":634},[629,61153,61154,61156,61158],{"class":631,"line":782},[629,61155,877],{"class":634},[629,61157,453],{"class":638},[629,61159,661],{"class":634},[629,61161,61162,61164,61166],{"class":631,"line":792},[629,61163,887],{"class":634},[629,61165,19723],{"class":638},[629,61167,661],{"class":634},[629,61169,61170,61172,61174],{"class":631,"line":797},[629,61171,897],{"class":634},[629,61173,753],{"class":638},[629,61175,661],{"class":634},[629,61177,61178,61180,61182],{"class":631,"line":819},[629,61179,724],{"class":634},[629,61181,742],{"class":638},[629,61183,661],{"class":634},[606,61185,61186,61187,61190,61191,61193,61194,4296,61196,61198],{},"Notice that you need to pass the ",[610,61188,61189],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[610,61192,61049],{}," component. This is because ",[610,61195,61049],{},[610,61197,4284],{}," 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:",[618,61200,61202],{"className":620,"code":61201,"language":625,"meta":568,"style":568},"\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",[610,61203,61204,61212,61220,61228,61247,61252,61260,61268,61276,61284],{"__ignoreMap":568},[629,61205,61206,61208,61210],{"class":631,"line":569},[629,61207,635],{"class":634},[629,61209,742],{"class":638},[629,61211,661],{"class":634},[629,61213,61214,61216,61218],{"class":631,"line":570},[629,61215,750],{"class":634},[629,61217,753],{"class":638},[629,61219,661],{"class":634},[629,61221,61222,61224,61226],{"class":631,"line":700},[629,61223,773],{"class":634},[629,61225,19723],{"class":638},[629,61227,661],{"class":634},[629,61229,61230,61232,61234,61237,61239,61241,61243,61245],{"class":631,"line":721},[629,61231,845],{"class":634},[629,61233,453],{"class":638},[629,61235,61236],{"class":642}," font",[629,61238,649],{"class":634},[629,61240,652],{"class":634},[629,61242,61137],{"class":655},[629,61244,652],{"class":634},[629,61246,661],{"class":634},[629,61248,61249],{"class":631,"line":731},[629,61250,61251],{"class":675}," TresJS\n",[629,61253,61254,61256,61258],{"class":631,"line":737},[629,61255,856],{"class":634},[629,61257,869],{"class":638},[629,61259,779],{"class":634},[629,61261,61262,61264,61266],{"class":631,"line":747},[629,61263,877],{"class":634},[629,61265,453],{"class":638},[629,61267,661],{"class":634},[629,61269,61270,61272,61274],{"class":631,"line":770},[629,61271,887],{"class":634},[629,61273,19723],{"class":638},[629,61275,661],{"class":634},[629,61277,61278,61280,61282],{"class":631,"line":782},[629,61279,897],{"class":634},[629,61281,753],{"class":638},[629,61283,661],{"class":634},[629,61285,61286,61288,61290],{"class":631,"line":792},[629,61287,724],{"class":634},[629,61289,742],{"class":638},[629,61291,661],{"class":634},[606,61293,61294],{},"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",[618,61296,61298],{"className":620,"code":61297,"language":625,"meta":568,"style":568},"\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",[610,61299,61300,61308,61328,61336,61344,61350,61363,61375,61379,61384,61388,61396,61404],{"__ignoreMap":568},[629,61301,61302,61304,61306],{"class":631,"line":569},[629,61303,635],{"class":634},[629,61305,742],{"class":638},[629,61307,661],{"class":634},[629,61309,61310,61312,61315,61317,61319,61321,61324,61326],{"class":631,"line":570},[629,61311,750],{"class":634},[629,61313,61314],{"class":638},"input",[629,61316,3005],{"class":642},[629,61318,649],{"class":634},[629,61320,652],{"class":634},[629,61322,61323],{"class":655},"myReactiveText",[629,61325,652],{"class":634},[629,61327,779],{"class":634},[629,61329,61330,61332,61334],{"class":631,"line":700},[629,61331,750],{"class":634},[629,61333,753],{"class":638},[629,61335,661],{"class":634},[629,61337,61338,61340,61342],{"class":631,"line":721},[629,61339,773],{"class":634},[629,61341,19723],{"class":638},[629,61343,661],{"class":634},[629,61345,61346,61348],{"class":631,"line":731},[629,61347,845],{"class":634},[629,61349,61112],{"class":638},[629,61351,61352,61355,61357,61359,61361],{"class":631,"line":737},[629,61353,61354],{"class":642}," :text",[629,61356,649],{"class":634},[629,61358,652],{"class":634},[629,61360,61323],{"class":655},[629,61362,3123],{"class":634},[629,61364,61365,61367,61369,61371,61373],{"class":631,"line":747},[629,61366,61130],{"class":642},[629,61368,649],{"class":634},[629,61370,652],{"class":634},[629,61372,61137],{"class":655},[629,61374,3123],{"class":634},[629,61376,61377],{"class":631,"line":770},[629,61378,51854],{"class":642},[629,61380,61381],{"class":631,"line":782},[629,61382,61383],{"class":642}," need-updates\n",[629,61385,61386],{"class":631,"line":792},[629,61387,8025],{"class":634},[629,61389,61390,61392,61394],{"class":631,"line":797},[629,61391,887],{"class":634},[629,61393,19723],{"class":638},[629,61395,661],{"class":634},[629,61397,61398,61400,61402],{"class":631,"line":819},[629,61399,897],{"class":634},[629,61401,753],{"class":638},[629,61403,661],{"class":634},[629,61405,61406,61408,61410],{"class":631,"line":623},[629,61407,724],{"class":634},[629,61409,742],{"class":638},[629,61411,661],{"class":634},[496,61413,914],{"id":913},[919,61415,61416,61426],{},[922,61417,61418],{},[925,61419,61420,61422,61424],{},[928,61421,930],{"align":989},[928,61423,933],{"align":989},[928,61425,936],{},[938,61427,61428,61439,61450,61461,61472,61484,61496,61508,61521,61533,61545,61556],{},[925,61429,61430,61434,61437],{},[943,61431,61432],{"align":989},[1661,61433,61066],{},[943,61435,61436],{"align":989},"The font data or font name to use for the text.",[943,61438],{},[925,61440,61441,61445,61448],{},[943,61442,61443],{"align":989},[1661,61444,28401],{},[943,61446,61447],{"align":989},"The text to display.",[943,61449],{},[925,61451,61452,61456,61459],{},[943,61453,61454],{"align":989},[1661,61455,14793],{},[943,61457,61458],{"align":989},"The size of the text.",[943,61460,1938],{},[925,61462,61463,61467,61470],{},[943,61464,61465],{"align":989},[1661,61466,38940],{},[943,61468,61469],{"align":989},"The height of the text.",[943,61471,5721],{},[925,61473,61474,61479,61482],{},[943,61475,61476],{"align":989},[1661,61477,61478],{},"curveSegments",[943,61480,61481],{"align":989},"The number of curve segments to use when generating the text geometry.",[943,61483,10771],{},[925,61485,61486,61491,61494],{},[943,61487,61488],{"align":989},[1661,61489,61490],{},"bevelEnabled",[943,61492,61493],{"align":989},"A flag indicating whether beveling should be enabled for the text.",[943,61495,953],{},[925,61497,61498,61503,61506],{},[943,61499,61500],{"align":989},[1661,61501,61502],{},"bevelThickness",[943,61504,61505],{"align":989},"The thickness of the beveled edge on the text.",[943,61507,9704],{},[925,61509,61510,61515,61518],{},[943,61511,61512],{"align":989},[1661,61513,61514],{},"bevelSize",[943,61516,61517],{"align":989},"The size of the beveled edge on the text.",[943,61519,61520],{},"0.02",[925,61522,61523,61528,61531],{},[943,61524,61525],{"align":989},[1661,61526,61527],{},"bevelOffset",[943,61529,61530],{"align":989},"The offset of the beveled edge on the text.",[943,61532,957],{},[925,61534,61535,61540,61543],{},[943,61536,61537],{"align":989},[1661,61538,61539],{},"bevelSegments",[943,61541,61542],{"align":989},"The number of bevel segments to use when generating the text geometry.",[943,61544,8420],{},[925,61546,61547,61551,61554],{},[943,61548,61549],{"align":989},[1661,61550,27308],{},[943,61552,61553],{"align":989},"To center the text",[943,61555,963],{},[925,61557,61558,61563,61566],{},[943,61559,61560],{"align":989},[1661,61561,61562],{},"needUpdates",[943,61564,61565],{"align":989},"This props add reactivity",[943,61567,963],{},[1319,61569,61570],{},"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":568,"searchDepth":569,"depth":570,"links":61572},[61573,61574],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Render text in 3D using TextGeometry.",{},{"title":453,"description":61575},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",[61580,62125,62420,62789,63847,64481,65082],{"id":61581,"title":463,"body":61582,"description":62121,"extension":583,"links":584,"meta":62122,"navigation":586,"path":464,"seo":62123,"stem":465,"__hash__":62124},"docs/2.api/miscellaneous/bounds.md",{"type":493,"value":61583,"toc":62114},[61584,61589,61596,61614,61616,61955,61957,62084,62087,62101,62105,62111],[2287,61585,61586],{},[61587,61588],"miscellaneous-bounds",{},[606,61590,61591,61592,61595],{},"Calculates a boundary box and centers the camera accordingly. Its ",[610,61593,61594],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[1997,61597,61598,61600],{},[606,61599,47942],{},[618,61601,61602],{"className":620,"code":2022,"language":625,"meta":568,"style":568},[610,61603,61604],{"__ignoreMap":568},[629,61605,61606,61608,61610,61612],{"class":631,"line":569},[629,61607,635],{"class":634},[629,61609,787],{"class":638},[629,61611,1843],{"class":642},[629,61613,779],{"class":634},[496,61615,15],{"id":616},[618,61617,61620],{"className":620,"code":61618,"highlights":61619,"language":625,"meta":568,"style":568},"\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",[700,737,747,782,792,797,624,2646],[610,61621,61622,61642,61660,61684,61702,61706,61720,61734,61738,61750,61779,61784,61792,61796,61804,61812,61830,61840,61877,61906,61914,61922,61930,61939,61947],{"__ignoreMap":568},[629,61623,61624,61626,61628,61630,61632,61634,61636,61638,61640],{"class":631,"line":569},[629,61625,635],{"class":634},[629,61627,639],{"class":638},[629,61629,643],{"class":642},[629,61631,646],{"class":642},[629,61633,649],{"class":634},[629,61635,652],{"class":634},[629,61637,656],{"class":655},[629,61639,652],{"class":634},[629,61641,661],{"class":634},[629,61643,61644,61646,61648,61650,61652,61654,61656,61658],{"class":631,"line":570},[629,61645,669],{"class":668},[629,61647,672],{"class":634},[629,61649,707],{"class":675},[629,61651,685],{"class":634},[629,61653,688],{"class":668},[629,61655,691],{"class":634},[629,61657,716],{"class":655},[629,61659,697],{"class":634},[629,61661,61663,61665,61667,61670,61672,61674,61676,61678,61680,61682],{"class":61662,"line":700},[631,665],[629,61664,669],{"class":668},[629,61666,672],{"class":634},[629,61668,61669],{"class":675}," Bounds",[629,61671,679],{"class":634},[629,61673,682],{"class":675},[629,61675,685],{"class":634},[629,61677,688],{"class":668},[629,61679,691],{"class":634},[629,61681,694],{"class":655},[629,61683,697],{"class":634},[629,61685,61686,61688,61690,61692,61694,61696,61698,61700],{"class":631,"line":721},[629,61687,669],{"class":668},[629,61689,672],{"class":634},[629,61691,3490],{"class":675},[629,61693,685],{"class":634},[629,61695,688],{"class":668},[629,61697,691],{"class":634},[629,61699,625],{"class":655},[629,61701,697],{"class":634},[629,61703,61704],{"class":631,"line":731},[629,61705,734],{"emptyLinePlaceholder":586},[629,61707,61709,61711,61714,61716,61718],{"class":61708,"line":737},[631,665],[629,61710,2407],{"class":642},[629,61712,61713],{"class":675}," boundsRef ",[629,61715,649],{"class":634},[629,61717,3490],{"class":2426},[629,61719,6527],{"class":675},[629,61721,61723,61725,61728,61730,61732],{"class":61722,"line":747},[631,665],[629,61724,2407],{"class":642},[629,61726,61727],{"class":675}," objectRef ",[629,61729,649],{"class":634},[629,61731,3490],{"class":2426},[629,61733,6527],{"class":675},[629,61735,61736],{"class":631,"line":770},[629,61737,734],{"emptyLinePlaceholder":586},[629,61739,61741,61743,61746,61748],{"class":61740,"line":782},[631,665],[629,61742,37752],{"class":642},[629,61744,61745],{"class":2426}," focusObject",[629,61747,3666],{"class":634},[629,61749,1196],{"class":634},[629,61751,61753,61756,61758,61760,61762,61764,61766,61768,61770,61773,61775,61777],{"class":61752,"line":792},[631,665],[629,61754,61755],{"class":675}," boundsRef",[629,61757,1138],{"class":634},[629,61759,3677],{"class":675},[629,61761,3680],{"class":634},[629,61763,16385],{"class":675},[629,61765,1138],{"class":634},[629,61767,61594],{"class":2426},[629,61769,2429],{"class":638},[629,61771,61772],{"class":675},"objectRef",[629,61774,1138],{"class":634},[629,61776,3677],{"class":675},[629,61778,2440],{"class":638},[629,61780,61782],{"class":61781,"line":797},[631,665],[629,61783,1317],{"class":634},[629,61785,61786,61788,61790],{"class":631,"line":819},[629,61787,724],{"class":634},[629,61789,639],{"class":638},[629,61791,661],{"class":634},[629,61793,61794],{"class":631,"line":623},[629,61795,734],{"emptyLinePlaceholder":586},[629,61797,61798,61800,61802],{"class":631,"line":842},[629,61799,635],{"class":634},[629,61801,742],{"class":638},[629,61803,661],{"class":634},[629,61805,61806,61808,61810],{"class":631,"line":853},[629,61807,750],{"class":634},[629,61809,753],{"class":638},[629,61811,661],{"class":634},[629,61813,61814,61816,61818,61820,61822,61824,61826,61828],{"class":631,"line":864},[629,61815,773],{"class":634},[629,61817,776],{"class":638},[629,61819,1477],{"class":642},[629,61821,649],{"class":634},[629,61823,652],{"class":634},[629,61825,7437],{"class":655},[629,61827,652],{"class":634},[629,61829,779],{"class":634},[629,61831,61832,61834,61836,61838],{"class":631,"line":874},[629,61833,773],{"class":634},[629,61835,787],{"class":638},[629,61837,1843],{"class":642},[629,61839,779],{"class":634},[629,61841,61843,61845,61847,61849,61851,61853,61856,61858,61861,61864,61867,61869,61871,61873,61875],{"class":61842,"line":624},[631,665],[629,61844,773],{"class":634},[629,61846,463],{"class":638},[629,61848,3864],{"class":642},[629,61850,649],{"class":634},[629,61852,652],{"class":634},[629,61854,61855],{"class":655},"boundsRef",[629,61857,652],{"class":634},[629,61859,61860],{"class":642}," clip",[629,61862,61863],{"class":642}," use-mounted",[629,61865,61866],{"class":642}," :offset",[629,61868,649],{"class":634},[629,61870,652],{"class":634},[629,61872,2543],{"class":655},[629,61874,652],{"class":634},[629,61876,661],{"class":634},[629,61878,61879,61881,61883,61885,61887,61889,61891,61893,61895,61897,61899,61902,61904],{"class":631,"line":894},[629,61880,845],{"class":634},[629,61882,848],{"class":638},[629,61884,3864],{"class":642},[629,61886,649],{"class":634},[629,61888,652],{"class":634},[629,61890,61772],{"class":655},[629,61892,652],{"class":634},[629,61894,36269],{"class":642},[629,61896,649],{"class":634},[629,61898,652],{"class":634},[629,61900,61901],{"class":655},"(e) => focusObject()",[629,61903,652],{"class":634},[629,61905,661],{"class":634},[629,61907,61908,61910,61912],{"class":631,"line":904},[629,61909,856],{"class":634},[629,61911,859],{"class":638},[629,61913,779],{"class":634},[629,61915,61916,61918,61920],{"class":631,"line":2617},[629,61917,856],{"class":634},[629,61919,869],{"class":638},[629,61921,779],{"class":634},[629,61923,61924,61926,61928],{"class":631,"line":2626},[629,61925,877],{"class":634},[629,61927,848],{"class":638},[629,61929,661],{"class":634},[629,61931,61933,61935,61937],{"class":61932,"line":2646},[631,665],[629,61934,887],{"class":634},[629,61936,463],{"class":638},[629,61938,661],{"class":634},[629,61940,61941,61943,61945],{"class":631,"line":2655},[629,61942,897],{"class":634},[629,61944,753],{"class":638},[629,61946,661],{"class":634},[629,61948,61949,61951,61953],{"class":631,"line":2664},[629,61950,724],{"class":634},[629,61952,742],{"class":638},[629,61954,661],{"class":634},[496,61956,914],{"id":913},[919,61958,61959,61969],{},[922,61960,61961],{},[925,61962,61963,61965,61967],{},[928,61964,8081],{"align":989},[928,61966,933],{"align":989},[928,61968,936],{},[938,61970,61971,61988,62007,62024,62044,62065],{},[925,61972,61973,61978,61984],{},[943,61974,61975],{"align":989},[610,61976,61977],{},"duration",[943,61979,61980,61981,61983],{"align":989},"Duration of the ",[610,61982,61594],{}," animation in seconds",[943,61985,61986],{},[610,61987,11723],{},[925,61989,61990,61994,62003],{},[943,61991,61992],{"align":989},[610,61993,38504],{},[943,61995,61996,61997,16738,61999,5603,62001],{"align":989},"Additional distance from the target when using ",[610,61998,61594],{},[610,62000,7610],{},[610,62002,7614],{},[943,62004,62005],{},[610,62006,5721],{},[925,62008,62009,62014,62020],{},[943,62010,62011],{"align":989},[610,62012,62013],{},"useResize",[943,62015,62016,62017,62019],{"align":989},"Whether to re",[610,62018,61594],{}," the last target when the screen is resized",[943,62021,62022],{},[610,62023,963],{},[925,62025,62026,62031,62040],{},[943,62027,62028],{"align":989},[610,62029,62030],{},"useMounted",[943,62032,62033,62034,62036,62037,62039],{"align":989},"Whether to ",[610,62035,61594],{}," the ",[610,62038,463],{}," object when the component is mounts",[943,62041,62042],{},[610,62043,963],{},[925,62045,62046,62051,62061],{},[943,62047,62048],{"align":989},[610,62049,62050],{},"clip",[943,62052,62053,62054,3055,62056,62058,62059],{"align":989},"Whether to adjust the camera's ",[610,62055,41129],{},[610,62057,38954],{}," settings when using ",[610,62060,61594],{},[943,62062,62063],{},[610,62064,963],{},[925,62066,62067,62072,62081],{},[943,62068,62069],{"align":989},[610,62070,62071],{},"easing",[943,62073,62074,62075,62078,62079],{"align":989},"Animation's easing function. ",[610,62076,62077],{},"t"," and the returned value should be in the interval ",[610,62080,51439],{},[943,62082,62083],{},"Cubic ease out",[496,62085,61594],{"id":62086},"lookat",[606,62088,62089,3186,62092,62094,62095,1664,62097,5603,62099,1138],{},[610,62090,62091],{},"\u003CBounds />",[610,62093,61594],{}," points the camera at its first argument: an ",[610,62096,7614],{},[610,62098,7610],{},[610,62100,8132],{},[4043,62102,62104],{"id":62103},"method-signatures","Method Signatures",[618,62106,62109],{"className":62107,"code":62108,"language":28401},[28399],"/**\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",[610,62110,62108],{"__ignoreMap":568},[1319,62112,62113],{},"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":568,"searchDepth":569,"depth":570,"links":62115},[62116,62117,62118],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":62086,"depth":570,"text":61594,"children":62119},[62120],{"id":62103,"depth":700,"text":62104},"Calculate boundary box and center camera accordingly.",{},{"title":463,"description":62121},"hHyluEwt8akq_4Cca4tkdoVEZlteuogJu8G43SPaETs",{"id":62126,"title":467,"body":62127,"description":62416,"extension":583,"links":584,"meta":62417,"navigation":586,"path":468,"seo":62418,"stem":469,"__hash__":62419},"docs/2.api/miscellaneous/global-audio.md",{"type":493,"value":62128,"toc":62411},[62129,62137,62144,62146,62284,62290,62292,62385,62387,62409],[606,62130,2768,62131,8235,62133,62136],{},[610,62132,7309],{},[610,62134,62135],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[606,62138,28406,62139],{},[1132,62140,62143],{"href":62141,"rel":62142},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1136],"Audio",[496,62145,15],{"id":616},[618,62147,62150],{"className":620,"code":62148,"highlights":62149,"language":625,"meta":568,"style":568},"\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",[700,782],[610,62151,62152,62162,62180,62200,62208,62212,62220,62228,62247,62268,62276],{"__ignoreMap":568},[629,62153,62154,62156,62158,62160],{"class":631,"line":569},[629,62155,635],{"class":634},[629,62157,639],{"class":638},[629,62159,643],{"class":642},[629,62161,661],{"class":634},[629,62163,62164,62166,62168,62170,62172,62174,62176,62178],{"class":631,"line":570},[629,62165,669],{"class":668},[629,62167,672],{"class":634},[629,62169,707],{"class":675},[629,62171,685],{"class":634},[629,62173,688],{"class":668},[629,62175,691],{"class":634},[629,62177,716],{"class":655},[629,62179,697],{"class":634},[629,62181,62183,62185,62187,62190,62192,62194,62196,62198],{"class":62182,"line":700},[631,665],[629,62184,669],{"class":668},[629,62186,672],{"class":634},[629,62188,62189],{"class":675}," GlobalAudio",[629,62191,685],{"class":634},[629,62193,688],{"class":668},[629,62195,691],{"class":634},[629,62197,694],{"class":655},[629,62199,697],{"class":634},[629,62201,62202,62204,62206],{"class":631,"line":721},[629,62203,724],{"class":634},[629,62205,639],{"class":638},[629,62207,661],{"class":634},[629,62209,62210],{"class":631,"line":731},[629,62211,734],{"emptyLinePlaceholder":586},[629,62213,62214,62216,62218],{"class":631,"line":737},[629,62215,635],{"class":634},[629,62217,742],{"class":638},[629,62219,661],{"class":634},[629,62221,62222,62224,62226],{"class":631,"line":747},[629,62223,750],{"class":634},[629,62225,753],{"class":638},[629,62227,661],{"class":634},[629,62229,62230,62232,62234,62236,62238,62240,62243,62245],{"class":631,"line":770},[629,62231,773],{"class":634},[629,62233,776],{"class":638},[629,62235,1477],{"class":642},[629,62237,649],{"class":634},[629,62239,652],{"class":634},[629,62241,62242],{"class":655},"[0, 0, 7.5]",[629,62244,652],{"class":634},[629,62246,779],{"class":634},[629,62248,62250,62252,62254,62257,62259,62261,62264,62266],{"class":62249,"line":782},[631,665],[629,62251,773],{"class":634},[629,62253,467],{"class":638},[629,62255,62256],{"class":642}," :src",[629,62258,649],{"class":634},[629,62260,652],{"class":634},[629,62262,62263],{"class":655},"exampleAudio",[629,62265,652],{"class":634},[629,62267,779],{"class":634},[629,62269,62270,62272,62274],{"class":631,"line":792},[629,62271,897],{"class":634},[629,62273,753],{"class":638},[629,62275,661],{"class":634},[629,62277,62278,62280,62282],{"class":631,"line":797},[629,62279,724],{"class":634},[629,62281,742],{"class":638},[629,62283,661],{"class":634},[606,62285,62286,62287,62289],{},"*The ",[610,62288,22622],{}," prop is required",[496,62291,914],{"id":913},[919,62293,62294,62304],{},[922,62295,62296],{},[925,62297,62298,62300,62302],{},[928,62299,930],{"align":989},[928,62301,933],{"align":989},[928,62303,936],{},[938,62305,62306,62317,62332,62344,62357,62371],{},[925,62307,62308,62312,62315],{},[943,62309,62310],{"align":989},[610,62311,22622],{},[943,62313,62314],{"align":989},"Path to your audio file",[943,62316],{},[925,62318,62319,62324,62327],{},[943,62320,62321],{"align":989},[610,62322,62323],{},"playTrigger",[943,62325,62326],{"align":989},"Id of the DOM element that triggers the play/pause state",[943,62328,62329],{},[610,62330,62331],{},"renderer.domElement",[925,62333,62334,62339,62342],{},[943,62335,62336],{"align":989},[610,62337,62338],{},"stopTrigger",[943,62340,62341],{"align":989},"Id of the DOM element that triggers the stop state",[943,62343],{},[925,62345,62346,62350,62353],{},[943,62347,62348],{"align":989},[610,62349,23996],{},[943,62351,62352],{"align":989},"If the audio must be replayed when ends",[943,62354,62355],{},[610,62356,963],{},[925,62358,62359,62364,62367],{},[943,62360,62361],{"align":989},[610,62362,62363],{},"volume",[943,62365,62366],{"align":989},"Volume of the audio",[943,62368,62369],{},[610,62370,1938],{},[925,62372,62373,62378,62381],{},[943,62374,62375],{"align":989},[610,62376,62377],{},"playbackRate",[943,62379,62380],{"align":989},"PlaybackRate of the audio",[943,62382,62383],{},[610,62384,1866],{},[496,62386,12342],{"id":12341},[919,62388,62389,62397],{},[922,62390,62391],{},[925,62392,62393,62395],{},[928,62394,5751],{"align":989},[928,62396,933],{"align":989},[938,62398,62399],{},[925,62400,62401,62406],{},[943,62402,62403],{"align":989},[610,62404,62405],{},"isPlaying",[943,62407,62408],{"align":989},"Dispatched when the Audio change its state (play, pause or stop)",[1319,62410,12439],{},{"title":568,"searchDepth":569,"depth":570,"links":62412},[62413,62414,62415],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},{"id":12341,"depth":570,"text":12342},"Add global sound to your scene.",{},{"title":467,"description":62416},"3JUUNGnzyd_UYSpUOzquhfgUDt2njg-AUZ8wXPFhXKM",{"id":62421,"title":471,"body":62422,"description":62785,"extension":583,"links":584,"meta":62786,"navigation":586,"path":472,"seo":62787,"stem":473,"__hash__":62788},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":493,"value":62423,"toc":62781},[62424,62429,62441,62443,62449,62457,62466,62471,62718,62720,62779],[600,62425,62426],{},[62427,62428],"miscellaneous-mouse-parallax",{},[606,62430,62431,62434,62435,62440],{},[610,62432,62433],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1132,62436,62439],{"href":62437,"rel":62438},"https://en.wikipedia.org/wiki/Parallax",[1136],"parallax"," effect. The camera will update automatically according to the mouse position.",[496,62442,15],{"id":616},[606,62444,62445,62446,62448],{},"You only need to import and add it to your template as ",[610,62447,62433],{},". Additionally, you can pass the following props:",[606,62450,62451,62453,62454,1138],{},[610,62452,28352],{}," 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: ",[610,62455,62456],{},":factor=[x,y]",[606,62458,62459,62462,62463,1138],{},[610,62460,62461],{},"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: ",[610,62464,62465],{},":ease=[x,y]",[606,62467,62468,62470],{},[610,62469,14779],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[618,62472,62475],{"className":620,"code":62473,"highlights":62474,"language":625,"meta":568,"style":568},"\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",[570,819],[610,62476,62477,62497,62523,62543,62551,62555,62563,62581,62610,62618,62636,62644,62676,62684,62702,62710],{"__ignoreMap":568},[629,62478,62479,62481,62483,62485,62487,62489,62491,62493,62495],{"class":631,"line":569},[629,62480,635],{"class":634},[629,62482,639],{"class":638},[629,62484,643],{"class":642},[629,62486,646],{"class":642},[629,62488,649],{"class":634},[629,62490,652],{"class":634},[629,62492,656],{"class":655},[629,62494,652],{"class":634},[629,62496,661],{"class":634},[629,62498,62500,62502,62504,62507,62509,62511,62513,62515,62517,62519,62521],{"class":62499,"line":570},[631,665],[629,62501,669],{"class":668},[629,62503,672],{"class":634},[629,62505,62506],{"class":675}," MouseParallax",[629,62508,679],{"class":634},[629,62510,38626],{"class":675},[629,62512,685],{"class":634},[629,62514,688],{"class":668},[629,62516,8282],{"class":634},[629,62518,694],{"class":655},[629,62520,652],{"class":634},[629,62522,8289],{"class":634},[629,62524,62525,62527,62529,62531,62533,62535,62537,62539,62541],{"class":631,"line":700},[629,62526,669],{"class":668},[629,62528,672],{"class":634},[629,62530,707],{"class":675},[629,62532,685],{"class":634},[629,62534,688],{"class":668},[629,62536,8282],{"class":634},[629,62538,716],{"class":655},[629,62540,652],{"class":634},[629,62542,8289],{"class":634},[629,62544,62545,62547,62549],{"class":631,"line":721},[629,62546,724],{"class":634},[629,62548,639],{"class":638},[629,62550,661],{"class":634},[629,62552,62553],{"class":631,"line":731},[629,62554,734],{"emptyLinePlaceholder":586},[629,62556,62557,62559,62561],{"class":631,"line":737},[629,62558,635],{"class":634},[629,62560,742],{"class":638},[629,62562,661],{"class":634},[629,62564,62565,62567,62569,62571,62573,62575,62577,62579],{"class":631,"line":747},[629,62566,750],{"class":634},[629,62568,753],{"class":638},[629,62570,756],{"class":642},[629,62572,649],{"class":634},[629,62574,652],{"class":634},[629,62576,9852],{"class":655},[629,62578,652],{"class":634},[629,62580,661],{"class":634},[629,62582,62583,62585,62587,62589,62591,62593,62595,62597,62599,62601,62603,62606,62608],{"class":631,"line":770},[629,62584,773],{"class":634},[629,62586,776],{"class":638},[629,62588,1477],{"class":642},[629,62590,649],{"class":634},[629,62592,652],{"class":634},[629,62594,62242],{"class":655},[629,62596,652],{"class":634},[629,62598,30350],{"class":642},[629,62600,649],{"class":634},[629,62602,652],{"class":634},[629,62604,62605],{"class":655},"75",[629,62607,652],{"class":634},[629,62609,779],{"class":634},[629,62611,62612,62614,62616],{"class":631,"line":782},[629,62613,773],{"class":634},[629,62615,33894],{"class":638},[629,62617,661],{"class":634},[629,62619,62620,62622,62624,62626,62628,62630,62632,62634],{"class":631,"line":792},[629,62621,845],{"class":634},[629,62623,11380],{"class":638},[629,62625,2681],{"class":642},[629,62627,649],{"class":634},[629,62629,652],{"class":634},[629,62631,11389],{"class":655},[629,62633,652],{"class":634},[629,62635,779],{"class":634},[629,62637,62638,62640,62642],{"class":631,"line":797},[629,62639,887],{"class":634},[629,62641,33894],{"class":638},[629,62643,661],{"class":634},[629,62645,62647,62649,62651,62654,62656,62658,62660,62662,62665,62667,62669,62672,62674],{"class":62646,"line":819},[631,665],[629,62648,773],{"class":634},[629,62650,471],{"class":638},[629,62652,62653],{"class":642}," :factor",[629,62655,649],{"class":634},[629,62657,652],{"class":634},[629,62659,10771],{"class":655},[629,62661,652],{"class":634},[629,62663,62664],{"class":642}," :ease",[629,62666,649],{"class":634},[629,62668,652],{"class":634},[629,62670,62671],{"class":655},"[3, 0.1]",[629,62673,652],{"class":634},[629,62675,779],{"class":634},[629,62677,62678,62680,62682],{"class":631,"line":623},[629,62679,773],{"class":634},[629,62681,8448],{"class":638},[629,62683,779],{"class":634},[629,62685,62686,62688,62690,62692,62694,62696,62698,62700],{"class":631,"line":842},[629,62687,773],{"class":634},[629,62689,8467],{"class":638},[629,62691,1477],{"class":642},[629,62693,649],{"class":634},[629,62695,652],{"class":634},[629,62697,11424],{"class":655},[629,62699,652],{"class":634},[629,62701,779],{"class":634},[629,62703,62704,62706,62708],{"class":631,"line":853},[629,62705,897],{"class":634},[629,62707,753],{"class":638},[629,62709,661],{"class":634},[629,62711,62712,62714,62716],{"class":631,"line":864},[629,62713,724],{"class":634},[629,62715,742],{"class":638},[629,62717,661],{"class":634},[496,62719,914],{"id":913},[919,62721,62722,62732],{},[922,62723,62724],{},[925,62725,62726,62728,62730],{},[928,62727,930],{"align":989},[928,62729,933],{"align":989},[928,62731,936],{},[938,62733,62734,62746,62757,62768],{},[925,62735,62736,62741,62744],{},[943,62737,62738],{"align":989},[1661,62739,62740],{},"disabled",[943,62742,62743],{"align":989},"Enable or disable the effect",[943,62745,963],{},[925,62747,62748,62752,62755],{},[943,62749,62750],{"align":989},[1661,62751,28352],{},[943,62753,62754],{"align":989},"Increase the range of the parallax",[943,62756,56165],{},[925,62758,62759,62763,62766],{},[943,62760,62761],{"align":989},[1661,62762,62461],{},[943,62764,62765],{"align":989},"Increase the camera movement speed",[943,62767,2155],{},[925,62769,62770,62774,62777],{},[943,62771,62772],{"align":989},[1661,62773,14779],{},[943,62775,62776],{"align":989},"Whether the mouse coordinates are calculated from the element or the window",[943,62778,963],{},[1319,62780,1636],{},{"title":568,"searchDepth":569,"depth":570,"links":62782},[62783,62784],{"id":616,"depth":570,"text":15},{"id":913,"depth":570,"text":914},"Create parallax effects based on mouse movement.",{},{"title":471,"description":62785},"DlWi-PCiTKTosw5xB5jxhs3p0vmhFRnKBmSiLiGYpy8",{"id":62790,"title":475,"body":62791,"description":63843,"extension":583,"links":584,"meta":63844,"navigation":586,"path":476,"seo":63845,"stem":477,"__hash__":63846},"docs/2.api/miscellaneous/positional-audio.md",{"type":493,"value":62792,"toc":63836},[62793,62798,62811,62821,62823,62838,63104,63132,63136,63142,63144,63338,63340,63412,63642,63804,63806,63833],[600,62794,62795],{},[62796,62797],"miscellaneous-positional-audio",{},[606,62799,2768,62800,58592,62802,62806,62807,62810],{},[610,62801,7309],{},[1132,62803,475],{"href":62804,"rel":62805},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1136],".\n",[610,62808,62809],{},"\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.",[606,62812,62813,62815,62816,34737],{},[610,62814,62809],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1132,62817,62820],{"href":62818,"rel":62819},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1136],"PositionalAudioHelper",[496,62822,15],{"id":616},[606,62824,2768,62825,62827,62828,62830,62831,62833,62834,62837],{},[610,62826,62809],{}," 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 ",[610,62829,62809],{}," component and set the ",[610,62832,57586],{},". It must be wrapped around the ",[610,62835,62836],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[618,62839,62842],{"className":620,"code":62840,"highlights":62841,"language":625,"meta":568,"style":568},"\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",[570,874,624,894],[610,62843,62844,62864,62888,62910,62914,62931,62935,62947,62962,62968,62976,62980,62988,62996,63014,63022,63030,63038,63053,63068,63072,63080,63088,63096],{"__ignoreMap":568},[629,62845,62846,62848,62850,62852,62854,62856,62858,62860,62862],{"class":631,"line":569},[629,62847,635],{"class":634},[629,62849,639],{"class":638},[629,62851,643],{"class":642},[629,62853,646],{"class":642},[629,62855,649],{"class":634},[629,62857,652],{"class":634},[629,62859,656],{"class":655},[629,62861,652],{"class":634},[629,62863,661],{"class":634},[629,62865,62867,62869,62871,62873,62875,62878,62880,62882,62884,62886],{"class":62866,"line":570},[631,665],[629,62868,669],{"class":668},[629,62870,672],{"class":634},[629,62872,1389],{"class":675},[629,62874,679],{"class":634},[629,62876,62877],{"class":675}," PositionalAudio",[629,62879,685],{"class":634},[629,62881,688],{"class":668},[629,62883,691],{"class":634},[629,62885,694],{"class":655},[629,62887,697],{"class":634},[629,62889,62890,62892,62894,62896,62898,62900,62902,62904,62906,62908],{"class":631,"line":700},[629,62891,669],{"class":668},[629,62893,672],{"class":634},[629,62895,21722],{"class":675},[629,62897,679],{"class":634},[629,62899,3490],{"class":675},[629,62901,685],{"class":634},[629,62903,688],{"class":668},[629,62905,691],{"class":634},[629,62907,625],{"class":655},[629,62909,697],{"class":634},[629,62911,62912],{"class":631,"line":721},[629,62913,734],{"emptyLinePlaceholder":586},[629,62915,62916,62918,62921,62923,62925,62927,62929],{"class":631,"line":731},[629,62917,2407],{"class":642},[629,62919,62920],{"class":675}," positionalAudioRef ",[629,62922,649],{"class":634},[629,62924,3490],{"class":2426},[629,62926,2429],{"class":675},[629,62928,3648],{"class":634},[629,62930,2440],{"class":675},[629,62932,62933],{"class":631,"line":737},[629,62934,734],{"emptyLinePlaceholder":586},[629,62936,62937,62939,62941,62943,62945],{"class":631,"line":747},[629,62938,21769],{"class":2426},[629,62940,2429],{"class":675},[629,62942,3666],{"class":634},[629,62944,3669],{"class":642},[629,62946,1196],{"class":634},[629,62948,62949,62952,62954,62956,62958,62960],{"class":631,"line":770},[629,62950,62951],{"class":675}," positionalAudioRef",[629,62953,3680],{"class":634},[629,62955,3677],{"class":675},[629,62957,3680],{"class":634},[629,62959,20849],{"class":2426},[629,62961,6527],{"class":638},[629,62963,62964,62966],{"class":631,"line":782},[629,62965,2420],{"class":634},[629,62967,2440],{"class":675},[629,62969,62970,62972,62974],{"class":631,"line":792},[629,62971,724],{"class":634},[629,62973,639],{"class":638},[629,62975,661],{"class":634},[629,62977,62978],{"class":631,"line":797},[629,62979,734],{"emptyLinePlaceholder":586},[629,62981,62982,62984,62986],{"class":631,"line":819},[629,62983,635],{"class":634},[629,62985,742],{"class":638},[629,62987,661],{"class":634},[629,62989,62990,62992,62994],{"class":631,"line":623},[629,62991,750],{"class":634},[629,62993,753],{"class":638},[629,62995,661],{"class":634},[629,62997,62998,63000,63002,63004,63006,63008,63010,63012],{"class":631,"line":842},[629,62999,773],{"class":634},[629,63001,209],{"class":638},[629,63003,1951],{"class":642},[629,63005,649],{"class":634},[629,63007,652],{"class":634},[629,63009,1958],{"class":655},[629,63011,652],{"class":634},[629,63013,661],{"class":634},[629,63015,63016,63018,63020],{"class":631,"line":853},[629,63017,845],{"class":634},[629,63019,869],{"class":638},[629,63021,779],{"class":634},[629,63023,63024,63026,63028],{"class":631,"line":864},[629,63025,845],{"class":634},[629,63027,19723],{"class":638},[629,63029,661],{"class":634},[629,63031,63033,63035],{"class":63032,"line":874},[631,665],[629,63034,856],{"class":634},[629,63036,63037],{"class":638},"PositionalAudio\n",[629,63039,63041,63044,63046,63048,63051],{"class":63040,"line":624},[631,665],[629,63042,63043],{"class":642}," ref",[629,63045,649],{"class":634},[629,63047,652],{"class":634},[629,63049,63050],{"class":655},"positionalAudioRef",[629,63052,3123],{"class":634},[629,63054,63056,63059,63061,63063,63066],{"class":63055,"line":894},[631,665],[629,63057,63058],{"class":642}," url",[629,63060,649],{"class":634},[629,63062,652],{"class":634},[629,63064,63065],{"class":655},"your-sound.mp3",[629,63067,3123],{"class":634},[629,63069,63070],{"class":631,"line":904},[629,63071,51460],{"class":634},[629,63073,63074,63076,63078],{"class":631,"line":2617},[629,63075,877],{"class":634},[629,63077,19723],{"class":638},[629,63079,661],{"class":634},[629,63081,63082,63084,63086],{"class":631,"line":2626},[629,63083,887],{"class":634},[629,63085,209],{"class":638},[629,63087,661],{"class":634},[629,63089,63090,63092,63094],{"class":631,"line":2646},[629,63091,897],{"class":634},[629,63093,753],{"class":638},[629,63095,661],{"class":634},[629,63097,63098,63100,63102],{"class":631,"line":2655},[629,63099,724],{"class":634},[629,63101,742],{"class":638},[629,63103,661],{"class":634},[3191,63105,63106],{},[606,63107,63108,63109,63112,63113,63120,63121,63124,63125,3055,63128,63131],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[610,63110,63111],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1132,63114,63117],{"href":63115,"rel":63116},"https://goo.gl/7K7WLu",[1136],[610,63118,63119],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[610,63122,63123],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[610,63126,63127],{},":ready=\"true\"",[610,63129,63130],{},"autoplay=\"true\""," for a direct launch.",[496,63133,63135],{"id":63134},"how-does-it-work","How does it work?",[8227,63137],{"className":63138,"src":63140,"alt":63141},[63139],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[496,63143,914],{"id":913},[919,63145,63146,63156],{},[922,63147,63148],{},[925,63149,63150,63152,63154],{},[928,63151,930],{"align":989},[928,63153,933],{"align":989},[928,63155,936],{},[938,63157,63158,63174,63195,63215,63248,63266,63281,63298,63317],{},[925,63159,63160,63164,63172],{},[943,63161,63162],{"align":989},[1661,63163,57586],{},[943,63165,63166,56554,63168,63171],{"align":989},[610,63167,3564],{},[1661,63169,63170],{},"required"," — The path or URL to the file.",[943,63173],{},[925,63175,63176,63181,63191],{},[943,63177,63178],{"align":989},[1661,63179,63180],{},"helper",[943,63182,63183,63185,63186,3186,63188],{"align":989},[610,63184,15629],{}," — Selects whether helper mode is enabled. ",[7547,63187],{},[1666,63189,63190],{},"(Useful for visualising the angle of sound propagation)",[943,63192,63193],{},[610,63194,963],{},[925,63196,63197,63201,63211],{},[943,63198,63199],{"align":989},[1661,63200,11583],{},[943,63202,63203,63205,63206],{"align":989},[610,63204,5344],{}," — The distance at which the volume reduction starts taking effect. ",[1666,63207,63208],{},[1661,63209,63210],{},"A non-negative number.",[943,63212,63213],{},[610,63214,1866],{},[925,63216,63217,63222,63244],{},[943,63218,63219],{"align":989},[1661,63220,63221],{},"ready",[943,63223,63224,63226,63227,63229,63230,63233,63234,63237,63238,63241,63242],{"align":989},[610,63225,15629],{}," — Tells ",[610,63228,62809],{}," that ",[610,63231,63232],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[610,63235,63236],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1132,63239,63115],{"href":63115,"rel":63240},[1136],"). ",[7547,63243],{},[943,63245,63246],{},[610,63247,963],{},[925,63249,63250,63254,63262],{},[943,63251,63252],{"align":989},[1661,63253,63236],{},[943,63255,63256,63258,63259,63261],{"align":989},[610,63257,15629],{}," — Selects whether the audio is launched automatically. Please refer to the ",[610,63260,63221],{}," prop for a better understanding of how to use autoplay.",[943,63263,63264],{},[610,63265,963],{},[925,63267,63268,63272,63277],{},[943,63269,63270],{"align":989},[1661,63271,23996],{},[943,63273,63274,63276],{"align":989},[610,63275,15629],{}," — Specifies whether the audio should loop.",[943,63278,63279],{},[610,63280,963],{},[925,63282,63283,63288,63293],{},[943,63284,63285],{"align":989},[1661,63286,63287],{},"innerAngle",[943,63289,63290,63292],{"align":989},[610,63291,5344],{}," — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[943,63294,63295],{},[610,63296,63297],{},"360",[925,63299,63300,63305,63313],{},[943,63301,63302],{"align":989},[1661,63303,63304],{},"outerAngle",[943,63306,63307,63309,63310,39320],{"align":989},[610,63308,5344],{}," — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[610,63311,63312],{},"outerGain",[943,63314,63315],{},[610,63316,957],{},[925,63318,63319,63323,63334],{},[943,63320,63321],{"align":989},[1661,63322,63312],{},[943,63324,63325,63327,63328,63330,63331,63333],{"align":989},[610,63326,5344],{}," — A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[610,63329,63304],{}," prop. When the value is ",[610,63332,957],{}," no sound can be heard.",[943,63335,63336],{},[610,63337,957],{},[496,63339,56681],{"id":56680},[919,63341,63342,63350],{},[922,63343,63344],{},[925,63345,63346,63348],{},[928,63347,5751],{"align":989},[928,63349,933],{"align":989},[938,63351,63352,63364,63377,63390,63403],{},[925,63353,63354,63358],{},[943,63355,63356],{"align":989},[610,63357,16385],{},[943,63359,63360,63361,1138],{"align":989},"Instance reference — Inheritance of ",[1132,63362,475],{"href":62804,"rel":63363},[1136],[925,63365,63366,63371],{},[943,63367,63368],{"align":989},[610,63369,63370],{},"play()",[943,63372,63373,63374],{"align":989},"Play audio — ",[1666,63375,63376],{},"Cannot be fired if audio is already running.",[925,63378,63379,63384],{},[943,63380,63381],{"align":989},[610,63382,63383],{},"pause()",[943,63385,63386,63387],{"align":989},"Pause audio — ",[1666,63388,63389],{},"Cannot be fired if audio is already paused.",[925,63391,63392,63397],{},[943,63393,63394],{"align":989},[610,63395,63396],{},"stop()",[943,63398,63399,63400],{"align":989},"Stop audio — ",[1666,63401,63402],{},"Cannot be fired if audio is already stopped.",[925,63404,63405,63409],{},[943,63406,63407],{"align":989},[610,63408,22885],{},[943,63410,63411],{"align":989},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[618,63413,63417],{"className":63414,"code":63415,"language":63416,"meta":568,"style":568},"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",[610,63418,63419,63435,63439,63463,63467,63491,63513,63517,63547,63551,63578,63609,63638],{"__ignoreMap":568},[629,63420,63421,63423,63425,63427,63429,63431,63433],{"class":631,"line":569},[629,63422,2407],{"class":642},[629,63424,62920],{"class":675},[629,63426,649],{"class":634},[629,63428,3490],{"class":2426},[629,63430,2429],{"class":675},[629,63432,3648],{"class":634},[629,63434,2440],{"class":675},[629,63436,63437],{"class":631,"line":570},[629,63438,734],{"emptyLinePlaceholder":586},[629,63440,63441,63444,63446,63448,63451,63453,63455,63457,63460],{"class":631,"line":700},[629,63442,63443],{"class":675},"console",[629,63445,1138],{"class":634},[629,63447,6851],{"class":2426},[629,63449,63450],{"class":675},"(positionalAudioRef",[629,63452,1138],{"class":634},[629,63454,3677],{"class":675},[629,63456,1138],{"class":634},[629,63458,63459],{"class":675},"instance) ",[629,63461,63462],{"class":1201},"// instance properties\n",[629,63464,63465],{"class":631,"line":721},[629,63466,734],{"emptyLinePlaceholder":586},[629,63468,63469,63471,63474,63476,63478,63481,63483,63485,63487,63489],{"class":631,"line":731},[629,63470,2407],{"class":642},[629,63472,63473],{"class":675}," handlerAudio ",[629,63475,649],{"class":634},[629,63477,3066],{"class":634},[629,63479,63480],{"class":6830},"action",[629,63482,1210],{"class":634},[629,63484,5329],{"class":1192},[629,63486,3332],{"class":634},[629,63488,3669],{"class":642},[629,63490,1196],{"class":634},[629,63492,63493,63495,63497,63499,63501,63503,63505,63507,63509,63511],{"class":631,"line":737},[629,63494,19324],{"class":668},[629,63496,3066],{"class":638},[629,63498,50409],{"class":634},[629,63500,63050],{"class":675},[629,63502,1138],{"class":634},[629,63504,3677],{"class":675},[629,63506,4726],{"class":638},[629,63508,39653],{"class":634},[629,63510,50422],{"class":668},[629,63512,15865],{"class":634},[629,63514,63515],{"class":631,"line":747},[629,63516,734],{"emptyLinePlaceholder":586},[629,63518,63519,63521,63523,63526,63528,63531,63533,63536,63538,63540,63543,63545],{"class":631,"line":770},[629,63520,55036],{"class":642},[629,63522,672],{"class":634},[629,63524,63525],{"class":675}," play",[629,63527,679],{"class":634},[629,63529,63530],{"class":675}," pause",[629,63532,679],{"class":634},[629,63534,63535],{"class":675}," stop",[629,63537,685],{"class":634},[629,63539,2423],{"class":634},[629,63541,63542],{"class":675}," positionalAudioRef",[629,63544,1138],{"class":634},[629,63546,21945],{"class":675},[629,63548,63549],{"class":631,"line":782},[629,63550,734],{"emptyLinePlaceholder":586},[629,63552,63553,63555,63557,63559,63561,63563,63566,63568,63570,63572,63574,63576],{"class":631,"line":792},[629,63554,19324],{"class":668},[629,63556,3066],{"class":638},[629,63558,63480],{"class":675},[629,63560,19345],{"class":634},[629,63562,691],{"class":634},[629,63564,63565],{"class":655},"play",[629,63567,2432],{"class":634},[629,63569,4726],{"class":638},[629,63571,39653],{"class":634},[629,63573,63525],{"class":2426},[629,63575,6976],{"class":638},[629,63577,1317],{"class":634},[629,63579,63580,63583,63586,63588,63590,63592,63594,63597,63599,63601,63603,63605,63607],{"class":631,"line":797},[629,63581,63582],{"class":668}," else",[629,63584,63585],{"class":668}," if",[629,63587,3066],{"class":638},[629,63589,63480],{"class":675},[629,63591,19345],{"class":634},[629,63593,691],{"class":634},[629,63595,63596],{"class":655},"pause",[629,63598,2432],{"class":634},[629,63600,4726],{"class":638},[629,63602,39653],{"class":634},[629,63604,63530],{"class":2426},[629,63606,6976],{"class":638},[629,63608,1317],{"class":634},[629,63610,63611,63613,63615,63617,63619,63621,63623,63626,63628,63630,63632,63634,63636],{"class":631,"line":819},[629,63612,63582],{"class":668},[629,63614,63585],{"class":668},[629,63616,3066],{"class":638},[629,63618,63480],{"class":675},[629,63620,19345],{"class":634},[629,63622,691],{"class":634},[629,63624,63625],{"class":655},"stop",[629,63627,2432],{"class":634},[629,63629,4726],{"class":638},[629,63631,39653],{"class":634},[629,63633,63535],{"class":2426},[629,63635,6976],{"class":638},[629,63637,1317],{"class":634},[629,63639,63640],{"class":631,"line":623},[629,63641,1317],{"class":634},[618,63643,63645],{"className":620,"code":63644,"language":625,"meta":568,"style":568},"\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",[610,63646,63647,63655,63682,63709,63736,63740,63748,63756,63764,63772,63780,63788,63796],{"__ignoreMap":568},[629,63648,63649,63651,63653],{"class":631,"line":569},[629,63650,635],{"class":634},[629,63652,742],{"class":638},[629,63654,661],{"class":634},[629,63656,63657,63659,63661,63663,63665,63667,63670,63672,63674,63676,63678,63680],{"class":631,"line":570},[629,63658,750],{"class":634},[629,63660,36266],{"class":638},[629,63662,36269],{"class":642},[629,63664,649],{"class":634},[629,63666,652],{"class":634},[629,63668,63669],{"class":655},"handlerAudio('play')",[629,63671,652],{"class":634},[629,63673,3643],{"class":634},[629,63675,63565],{"class":675},[629,63677,724],{"class":634},[629,63679,36266],{"class":638},[629,63681,661],{"class":634},[629,63683,63684,63686,63688,63690,63692,63694,63697,63699,63701,63703,63705,63707],{"class":631,"line":700},[629,63685,750],{"class":634},[629,63687,36266],{"class":638},[629,63689,36269],{"class":642},[629,63691,649],{"class":634},[629,63693,652],{"class":634},[629,63695,63696],{"class":655},"handlerAudio('pause')",[629,63698,652],{"class":634},[629,63700,3643],{"class":634},[629,63702,63596],{"class":675},[629,63704,724],{"class":634},[629,63706,36266],{"class":638},[629,63708,661],{"class":634},[629,63710,63711,63713,63715,63717,63719,63721,63724,63726,63728,63730,63732,63734],{"class":631,"line":721},[629,63712,750],{"class":634},[629,63714,36266],{"class":638},[629,63716,36269],{"class":642},[629,63718,649],{"class":634},[629,63720,652],{"class":634},[629,63722,63723],{"class":655},"handlerAudio('stop')",[629,63725,652],{"class":634},[629,63727,3643],{"class":634},[629,63729,63625],{"class":675},[629,63731,724],{"class":634},[629,63733,36266],{"class":638},[629,63735,661],{"class":634},[629,63737,63738],{"class":631,"line":731},[629,63739,734],{"emptyLinePlaceholder":586},[629,63741,63742,63744,63746],{"class":631,"line":737},[629,63743,750],{"class":634},[629,63745,753],{"class":638},[629,63747,661],{"class":634},[629,63749,63750,63752,63754],{"class":631,"line":747},[629,63751,773],{"class":634},[629,63753,277],{"class":638},[629,63755,661],{"class":634},[629,63757,63758,63760,63762],{"class":631,"line":770},[629,63759,845],{"class":634},[629,63761,19723],{"class":638},[629,63763,661],{"class":634},[629,63765,63766,63768,63770],{"class":631,"line":782},[629,63767,856],{"class":634},[629,63769,475],{"class":638},[629,63771,779],{"class":634},[629,63773,63774,63776,63778],{"class":631,"line":792},[629,63775,877],{"class":634},[629,63777,19723],{"class":638},[629,63779,661],{"class":634},[629,63781,63782,63784,63786],{"class":631,"line":797},[629,63783,887],{"class":634},[629,63785,277],{"class":638},[629,63787,661],{"class":634},[629,63789,63790,63792,63794],{"class":631,"line":819},[629,63791,897],{"class":634},[629,63793,753],{"class":638},[629,63795,661],{"class":634},[629,63797,63798,63800,63802],{"class":631,"line":623},[629,63799,724],{"class":634},[629,63801,742],{"class":638},[629,63803,661],{"class":634},[496,63805,12342],{"id":12341},[919,63807,63808,63816],{},[922,63809,63810],{},[925,63811,63812,63814],{},[928,63813,5751],{"align":989},[928,63815,933],{"align":989},[938,63817,63818],{},[925,63819,63820,63825],{},[943,63821,63822],{"align":989},[610,63823,63824],{},"is-playing",[943,63826,63827,63828,3186,63830],{"align":989},"Triggered when the audio changes its state (play, pause, or stop) ",[7547,63829],{},[610,63831,63832],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1319,63834,63835],{},"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":568,"searchDepth":569,"depth":570,"links":63837},[63838,63839,63840,63841,63842],{"id":616,"depth":570,"text":15},{"id":63134,"depth":570,"text":63135},{"id":913,"depth":570,"text":914},{"id":56680,"depth":570,"text":56681},{"id":12341,"depth":570,"text":12342},"Spatially positioned audio in 3D space.",{},{"title":475,"description":63843},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",{"id":63848,"title":479,"body":63849,"description":64477,"extension":583,"links":584,"meta":64478,"navigation":586,"path":480,"seo":64479,"stem":481,"__hash__":64480},"docs/2.api/miscellaneous/use-animations.md",{"type":493,"value":63850,"toc":64470},[63851,63865,63867,63871,63881,64108,64112,64119,64447,64449,64467],[606,63852,63853,63855,63856,63859,63860,34737],{},[610,63854,479],{}," is a composable that returns a ",[610,63857,63858],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1132,63861,63864],{"href":63862,"rel":63863},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1136],"AnimationMixer",[496,63866,15],{"id":616},[4043,63868,63870],{"id":63869},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[606,63872,63873,63874,63876,63877,63880],{},"By default, ",[610,63875,479],{}," automatically updates the animation mixer on each frame using the ",[610,63878,63879],{},"useLoop"," composable:",[618,63882,63885],{"className":1178,"code":63883,"highlights":63884,"language":656,"meta":568,"style":568},"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",[569,747],[610,63886,63887,63911,63915,63940,63944,63978,64004,64028,64032,64045,64049,64069,64088,64102],{"__ignoreMap":568},[629,63888,63890,63892,63894,63897,63899,63901,63903,63905,63907,63909],{"class":63889,"line":569},[631,665],[629,63891,669],{"class":668},[629,63893,672],{"class":634},[629,63895,63896],{"class":675}," useAnimations",[629,63898,679],{"class":634},[629,63900,4339],{"class":675},[629,63902,685],{"class":634},[629,63904,688],{"class":668},[629,63906,691],{"class":634},[629,63908,694],{"class":655},[629,63910,697],{"class":634},[629,63912,63913],{"class":631,"line":570},[629,63914,734],{"emptyLinePlaceholder":586},[629,63916,63917,63919,63921,63923,63925,63927,63929,63931,63933,63936,63938],{"class":631,"line":700},[629,63918,2407],{"class":642},[629,63920,672],{"class":634},[629,63922,57680],{"class":675},[629,63924,2420],{"class":634},[629,63926,2423],{"class":634},[629,63928,4339],{"class":2426},[629,63930,2429],{"class":675},[629,63932,2432],{"class":634},[629,63934,63935],{"class":655},"/models/ugly-naked-bunny.gltf",[629,63937,2432],{"class":634},[629,63939,2440],{"class":675},[629,63941,63942],{"class":631,"line":721},[629,63943,734],{"emptyLinePlaceholder":586},[629,63945,63946,63948,63951,63953,63955,63957,63959,63961,63963,63965,63967,63969,63972,63975],{"class":631,"line":731},[629,63947,2407],{"class":642},[629,63949,63950],{"class":675}," animations ",[629,63952,649],{"class":634},[629,63954,3481],{"class":2426},[629,63956,2429],{"class":675},[629,63958,3666],{"class":634},[629,63960,3669],{"class":642},[629,63962,2412],{"class":675},[629,63964,1138],{"class":634},[629,63966,3677],{"class":675},[629,63968,3680],{"class":634},[629,63970,63971],{"class":675},"animations ",[629,63973,63974],{"class":634},"||",[629,63976,63977],{"class":675}," [])\n",[629,63979,63980,63982,63984,63986,63988,63990,63992,63994,63996,63998,64000,64002],{"class":631,"line":737},[629,63981,2407],{"class":642},[629,63983,5001],{"class":675},[629,63985,649],{"class":634},[629,63987,3481],{"class":2426},[629,63989,2429],{"class":675},[629,63991,3666],{"class":634},[629,63993,3669],{"class":642},[629,63995,2412],{"class":675},[629,63997,3680],{"class":634},[629,63999,3677],{"class":675},[629,64001,3680],{"class":634},[629,64003,5049],{"class":675},[629,64005,64007,64009,64011,64014,64016,64018,64020,64023,64025],{"class":64006,"line":747},[631,665],[629,64008,2407],{"class":642},[629,64010,672],{"class":634},[629,64012,64013],{"class":675}," actions ",[629,64015,2420],{"class":634},[629,64017,2423],{"class":634},[629,64019,63896],{"class":2426},[629,64021,64022],{"class":675},"(animations",[629,64024,679],{"class":634},[629,64026,64027],{"class":675}," model)\n",[629,64029,64030],{"class":631,"line":770},[629,64031,734],{"emptyLinePlaceholder":586},[629,64033,64034,64036,64039,64041,64043],{"class":631,"line":782},[629,64035,2407],{"class":642},[629,64037,64038],{"class":675}," currentAction ",[629,64040,649],{"class":634},[629,64042,3864],{"class":2426},[629,64044,6527],{"class":675},[629,64046,64047],{"class":631,"line":792},[629,64048,734],{"emptyLinePlaceholder":586},[629,64050,64051,64053,64056,64058,64060,64063,64065,64067],{"class":631,"line":797},[629,64052,10251],{"class":2426},[629,64054,64055],{"class":675},"(actions",[629,64057,679],{"class":634},[629,64059,3066],{"class":634},[629,64061,64062],{"class":6830},"newActions",[629,64064,3332],{"class":634},[629,64066,3669],{"class":642},[629,64068,1196],{"class":634},[629,64070,64071,64074,64076,64078,64080,64083,64085],{"class":631,"line":819},[629,64072,64073],{"class":675}," currentAction",[629,64075,1138],{"class":634},[629,64077,3677],{"class":675},[629,64079,2423],{"class":634},[629,64081,64082],{"class":675}," newActions",[629,64084,1138],{"class":634},[629,64086,64087],{"class":675},"Greeting\n",[629,64089,64090,64092,64094,64096,64098,64100],{"class":631,"line":623},[629,64091,64073],{"class":675},[629,64093,1138],{"class":634},[629,64095,3677],{"class":675},[629,64097,1138],{"class":634},[629,64099,63565],{"class":2426},[629,64101,6527],{"class":638},[629,64103,64104,64106],{"class":631,"line":842},[629,64105,2420],{"class":634},[629,64107,2440],{"class":675},[4043,64109,64111],{"id":64110},"manual-updates","Manual Updates",[606,64113,64114,64115,64118],{},"To gain finer control over animation mixer updates, enable ",[610,64116,64117],{},"manualUpdate: true"," and manage the update cycle manually.",[618,64120,64123],{"className":1178,"code":64121,"highlights":64122,"language":656,"meta":568,"style":568},"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",[569,770,782,792,853],[610,64124,64125,64148,64166,64170,64194,64198,64228,64254,64285,64297,64304,64308,64313,64329,64346,64367,64373,64377,64389,64393,64411,64427,64441],{"__ignoreMap":568},[629,64126,64128,64130,64132,64134,64136,64138,64140,64142,64144,64146],{"class":64127,"line":569},[631,665],[629,64129,669],{"class":668},[629,64131,672],{"class":634},[629,64133,63896],{"class":675},[629,64135,679],{"class":634},[629,64137,4339],{"class":675},[629,64139,685],{"class":634},[629,64141,688],{"class":668},[629,64143,691],{"class":634},[629,64145,694],{"class":655},[629,64147,697],{"class":634},[629,64149,64150,64152,64154,64156,64158,64160,64162,64164],{"class":631,"line":570},[629,64151,669],{"class":668},[629,64153,672],{"class":634},[629,64155,58981],{"class":675},[629,64157,685],{"class":634},[629,64159,688],{"class":668},[629,64161,691],{"class":634},[629,64163,716],{"class":655},[629,64165,697],{"class":634},[629,64167,64168],{"class":631,"line":700},[629,64169,734],{"emptyLinePlaceholder":586},[629,64171,64172,64174,64176,64178,64180,64182,64184,64186,64188,64190,64192],{"class":631,"line":721},[629,64173,2407],{"class":642},[629,64175,672],{"class":634},[629,64177,57680],{"class":675},[629,64179,2420],{"class":634},[629,64181,2423],{"class":634},[629,64183,4339],{"class":2426},[629,64185,2429],{"class":675},[629,64187,2432],{"class":634},[629,64189,63935],{"class":655},[629,64191,2432],{"class":634},[629,64193,2440],{"class":675},[629,64195,64196],{"class":631,"line":731},[629,64197,734],{"emptyLinePlaceholder":586},[629,64199,64200,64202,64204,64206,64208,64210,64212,64214,64216,64218,64220,64222,64224,64226],{"class":631,"line":737},[629,64201,2407],{"class":642},[629,64203,63950],{"class":675},[629,64205,649],{"class":634},[629,64207,3481],{"class":2426},[629,64209,2429],{"class":675},[629,64211,3666],{"class":634},[629,64213,3669],{"class":642},[629,64215,2412],{"class":675},[629,64217,1138],{"class":634},[629,64219,3677],{"class":675},[629,64221,3680],{"class":634},[629,64223,63971],{"class":675},[629,64225,63974],{"class":634},[629,64227,63977],{"class":675},[629,64229,64230,64232,64234,64236,64238,64240,64242,64244,64246,64248,64250,64252],{"class":631,"line":747},[629,64231,2407],{"class":642},[629,64233,5001],{"class":675},[629,64235,649],{"class":634},[629,64237,3481],{"class":2426},[629,64239,2429],{"class":675},[629,64241,3666],{"class":634},[629,64243,3669],{"class":642},[629,64245,2412],{"class":675},[629,64247,3680],{"class":634},[629,64249,3677],{"class":675},[629,64251,3680],{"class":634},[629,64253,5049],{"class":675},[629,64255,64257,64259,64261,64264,64266,64269,64271,64273,64275,64277,64279,64281,64283],{"class":64256,"line":770},[631,665],[629,64258,2407],{"class":642},[629,64260,672],{"class":634},[629,64262,64263],{"class":675}," actions",[629,64265,679],{"class":634},[629,64267,64268],{"class":675}," mixer ",[629,64270,2420],{"class":634},[629,64272,2423],{"class":634},[629,64274,63896],{"class":2426},[629,64276,64022],{"class":675},[629,64278,679],{"class":634},[629,64280,5040],{"class":675},[629,64282,679],{"class":634},[629,64284,1196],{"class":634},[629,64286,64288,64291,64293,64295],{"class":64287,"line":782},[631,665],[629,64289,64290],{"class":638}," manualUpdate",[629,64292,1210],{"class":634},[629,64294,4390],{"class":4389},[629,64296,2480],{"class":634},[629,64298,64300,64302],{"class":64299,"line":792},[631,665],[629,64301,2420],{"class":634},[629,64303,2440],{"class":675},[629,64305,64306],{"class":631,"line":797},[629,64307,734],{"emptyLinePlaceholder":586},[629,64309,64310],{"class":631,"line":819},[629,64311,64312],{"class":1201},"// Handle updates manually\n",[629,64314,64315,64317,64319,64321,64323,64325,64327],{"class":631,"line":623},[629,64316,2407],{"class":642},[629,64318,672],{"class":634},[629,64320,59310],{"class":675},[629,64322,2420],{"class":634},[629,64324,2423],{"class":634},[629,64326,58981],{"class":2426},[629,64328,6527],{"class":675},[629,64330,64331,64333,64335,64337,64340,64342,64344],{"class":631,"line":842},[629,64332,59323],{"class":2426},[629,64334,2429],{"class":675},[629,64336,37758],{"class":634},[629,64338,64339],{"class":6830}," delta",[629,64341,37775],{"class":634},[629,64343,3669],{"class":642},[629,64345,1196],{"class":634},[629,64347,64349,64352,64354,64356,64358,64360,64362,64365],{"class":64348,"line":853},[631,665],[629,64350,64351],{"class":675}," mixer",[629,64353,1138],{"class":634},[629,64355,3677],{"class":675},[629,64357,1138],{"class":634},[629,64359,5795],{"class":2426},[629,64361,2429],{"class":638},[629,64363,64364],{"class":675},"delta",[629,64366,2440],{"class":638},[629,64368,64369,64371],{"class":631,"line":864},[629,64370,2420],{"class":634},[629,64372,2440],{"class":675},[629,64374,64375],{"class":631,"line":874},[629,64376,734],{"emptyLinePlaceholder":586},[629,64378,64379,64381,64383,64385,64387],{"class":631,"line":624},[629,64380,2407],{"class":642},[629,64382,64038],{"class":675},[629,64384,649],{"class":634},[629,64386,3864],{"class":2426},[629,64388,6527],{"class":675},[629,64390,64391],{"class":631,"line":894},[629,64392,734],{"emptyLinePlaceholder":586},[629,64394,64395,64397,64399,64401,64403,64405,64407,64409],{"class":631,"line":904},[629,64396,10251],{"class":2426},[629,64398,64055],{"class":675},[629,64400,679],{"class":634},[629,64402,3066],{"class":634},[629,64404,64062],{"class":6830},[629,64406,3332],{"class":634},[629,64408,3669],{"class":642},[629,64410,1196],{"class":634},[629,64412,64413,64415,64417,64419,64421,64423,64425],{"class":631,"line":2617},[629,64414,64073],{"class":675},[629,64416,1138],{"class":634},[629,64418,3677],{"class":675},[629,64420,2423],{"class":634},[629,64422,64082],{"class":675},[629,64424,1138],{"class":634},[629,64426,64087],{"class":675},[629,64428,64429,64431,64433,64435,64437,64439],{"class":631,"line":2626},[629,64430,64073],{"class":675},[629,64432,1138],{"class":634},[629,64434,3677],{"class":675},[629,64436,1138],{"class":634},[629,64438,63565],{"class":2426},[629,64440,6527],{"class":638},[629,64442,64443,64445],{"class":631,"line":2646},[629,64444,2420],{"class":634},[629,64446,2440],{"class":675},[496,64448,12085],{"id":15602},[2205,64450,64451],{},[2208,64452,64453,64456,64457,64459,64460,64462,64463,64466],{},[610,64454,64455],{},"manualUpdate"," (optional): Default is ",[610,64458,963],{},". If set to ",[610,64461,953],{},", disables automatic animation mixer updates. You'll need to call ",[610,64464,64465],{},"mixer.value.update(delta)"," manually.",[1319,64468,64469],{},"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":568,"searchDepth":569,"depth":570,"links":64471},[64472,64476],{"id":616,"depth":570,"text":15,"children":64473},[64474,64475],{"id":63869,"depth":700,"text":63870},{"id":64110,"depth":700,"text":64111},{"id":15602,"depth":570,"text":12085},"Composable for managing model animations with AnimationMixer.",{},{"title":479,"description":64477},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":64482,"title":483,"body":64483,"description":65078,"extension":583,"links":584,"meta":65079,"navigation":586,"path":484,"seo":65080,"stem":485,"__hash__":65081},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":493,"value":64484,"toc":65072},[64485,64502,64504,64869,64873,64922,64924,65069],[606,64486,64487,64492,64493,64498,64499,64501],{},[1132,64488,64491],{"href":64489,"rel":64490},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1136],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1132,64494,64497],{"href":64495,"rel":64496},"https://www.khronos.org/gltf",[1136],"GLTF"," format. ",[1661,64500,14989],{}," provides a composable that simplifies this process with just a few lines of code.",[496,64503,35185],{"id":35184},[618,64505,64508],{"className":620,"code":64506,"highlights":64507,"language":625,"meta":568,"style":568},"\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",[700,792],[610,64509,64510,64530,64548,64568,64586,64590,64602,64606,64611,64626,64668,64672,64680,64688,64710,64728,64734,64746,64759,64771,64785,64789,64807,64826,64834,64853,64861],{"__ignoreMap":568},[629,64511,64512,64514,64516,64518,64520,64522,64524,64526,64528],{"class":631,"line":569},[629,64513,635],{"class":634},[629,64515,639],{"class":638},[629,64517,643],{"class":642},[629,64519,646],{"class":642},[629,64521,649],{"class":634},[629,64523,652],{"class":634},[629,64525,656],{"class":655},[629,64527,652],{"class":634},[629,64529,661],{"class":634},[629,64531,64532,64534,64536,64538,64540,64542,64544,64546],{"class":631,"line":570},[629,64533,669],{"class":668},[629,64535,672],{"class":634},[629,64537,707],{"class":675},[629,64539,685],{"class":634},[629,64541,688],{"class":668},[629,64543,691],{"class":634},[629,64545,716],{"class":655},[629,64547,697],{"class":634},[629,64549,64551,64553,64555,64558,64560,64562,64564,64566],{"class":64550,"line":700},[631,665],[629,64552,669],{"class":668},[629,64554,672],{"class":634},[629,64556,64557],{"class":675}," useGLTFExporter",[629,64559,685],{"class":634},[629,64561,688],{"class":668},[629,64563,691],{"class":634},[629,64565,694],{"class":655},[629,64567,697],{"class":634},[629,64569,64570,64572,64574,64576,64578,64580,64582,64584],{"class":631,"line":721},[629,64571,669],{"class":668},[629,64573,672],{"class":634},[629,64575,3490],{"class":675},[629,64577,685],{"class":634},[629,64579,688],{"class":668},[629,64581,691],{"class":634},[629,64583,625],{"class":655},[629,64585,697],{"class":634},[629,64587,64588],{"class":631,"line":731},[629,64589,734],{"emptyLinePlaceholder":586},[629,64591,64592,64594,64596,64598,64600],{"class":631,"line":737},[629,64593,2407],{"class":642},[629,64595,14322],{"class":675},[629,64597,649],{"class":634},[629,64599,3490],{"class":2426},[629,64601,6527],{"class":675},[629,64603,64604],{"class":631,"line":747},[629,64605,734],{"emptyLinePlaceholder":586},[629,64607,64608],{"class":631,"line":770},[629,64609,64610],{"class":1201},"// the second argument – options – is not required\n",[629,64612,64613,64615,64618,64620,64622,64624],{"class":631,"line":782},[629,64614,2407],{"class":642},[629,64616,64617],{"class":675}," downloadBox ",[629,64619,649],{"class":634},[629,64621,7072],{"class":634},[629,64623,3669],{"class":642},[629,64625,1196],{"class":634},[629,64627,64629,64632,64634,64636,64638,64640,64642,64644,64647,64649,64651,64653,64655,64657,64660,64662,64664,64666],{"class":64628,"line":792},[631,665],[629,64630,64631],{"class":2426}," useGLTFExporter",[629,64633,2429],{"class":638},[629,64635,14398],{"class":675},[629,64637,1138],{"class":634},[629,64639,3677],{"class":675},[629,64641,679],{"class":634},[629,64643,672],{"class":634},[629,64645,64646],{"class":638}," fileName",[629,64648,1210],{"class":634},[629,64650,691],{"class":634},[629,64652,3814],{"class":655},[629,64654,2432],{"class":634},[629,64656,679],{"class":634},[629,64658,64659],{"class":638}," binary",[629,64661,1210],{"class":634},[629,64663,4390],{"class":4389},[629,64665,685],{"class":634},[629,64667,2440],{"class":638},[629,64669,64670],{"class":631,"line":797},[629,64671,1317],{"class":634},[629,64673,64674,64676,64678],{"class":631,"line":819},[629,64675,724],{"class":634},[629,64677,639],{"class":638},[629,64679,661],{"class":634},[629,64681,64682,64684,64686],{"class":631,"line":623},[629,64683,635],{"class":634},[629,64685,742],{"class":638},[629,64687,661],{"class":634},[629,64689,64690,64692,64694,64696,64698,64700,64702,64704,64707],{"class":631,"line":842},[629,64691,750],{"class":634},[629,64693,753],{"class":638},[629,64695,756],{"class":642},[629,64697,649],{"class":634},[629,64699,652],{"class":634},[629,64701,9852],{"class":655},[629,64703,652],{"class":634},[629,64705,64706],{"class":642}," window-size",[629,64708,64709],{"class":634}," >\n",[629,64711,64712,64714,64716,64718,64720,64722,64724,64726],{"class":631,"line":853},[629,64713,773],{"class":634},[629,64715,776],{"class":638},[629,64717,1477],{"class":642},[629,64719,649],{"class":634},[629,64721,652],{"class":634},[629,64723,7437],{"class":655},[629,64725,652],{"class":634},[629,64727,779],{"class":634},[629,64729,64730,64732],{"class":631,"line":864},[629,64731,773],{"class":634},[629,64733,5118],{"class":638},[629,64735,64736,64738,64740,64742,64744],{"class":631,"line":874},[629,64737,10425],{"class":642},[629,64739,649],{"class":634},[629,64741,652],{"class":634},[629,64743,14398],{"class":655},[629,64745,3123],{"class":634},[629,64747,64748,64751,64753,64755,64757],{"class":631,"line":624},[629,64749,64750],{"class":642}," :position-z",[629,64752,649],{"class":634},[629,64754,652],{"class":634},[629,64756,26506],{"class":655},[629,64758,3123],{"class":634},[629,64760,64761,64763,64765,64767,64769],{"class":631,"line":894},[629,64762,57346],{"class":642},[629,64764,649],{"class":634},[629,64766,652],{"class":634},[629,64768,35579],{"class":655},[629,64770,3123],{"class":634},[629,64772,64773,64776,64778,64780,64783],{"class":631,"line":904},[629,64774,64775],{"class":642}," @click",[629,64777,649],{"class":634},[629,64779,652],{"class":634},[629,64781,64782],{"class":655},"downloadBox",[629,64784,3123],{"class":634},[629,64786,64787],{"class":631,"line":2617},[629,64788,10453],{"class":634},[629,64790,64791,64793,64795,64797,64799,64801,64803,64805],{"class":631,"line":2626},[629,64792,845],{"class":634},[629,64794,859],{"class":638},[629,64796,1951],{"class":642},[629,64798,649],{"class":634},[629,64800,652],{"class":634},[629,64802,1958],{"class":655},[629,64804,652],{"class":634},[629,64806,779],{"class":634},[629,64808,64809,64811,64813,64815,64817,64819,64822,64824],{"class":631,"line":2646},[629,64810,845],{"class":634},[629,64812,2678],{"class":638},[629,64814,38091],{"class":642},[629,64816,649],{"class":634},[629,64818,652],{"class":634},[629,64820,64821],{"class":655},"0x00ff00",[629,64823,652],{"class":634},[629,64825,779],{"class":634},[629,64827,64828,64830,64832],{"class":631,"line":2655},[629,64829,887],{"class":634},[629,64831,848],{"class":638},[629,64833,661],{"class":634},[629,64835,64836,64838,64840,64842,64844,64846,64849,64851],{"class":631,"line":2664},[629,64837,773],{"class":634},[629,64839,8467],{"class":638},[629,64841,1477],{"class":642},[629,64843,649],{"class":634},[629,64845,652],{"class":634},[629,64847,64848],{"class":655},"[0, 10, 10]",[629,64850,652],{"class":634},[629,64852,779],{"class":634},[629,64854,64855,64857,64859],{"class":631,"line":2673},[629,64856,897],{"class":634},[629,64858,753],{"class":638},[629,64860,661],{"class":634},[629,64862,64863,64865,64867],{"class":631,"line":2695},[629,64864,724],{"class":634},[629,64866,742],{"class":638},[629,64868,661],{"class":634},[496,64870,64872],{"id":64871},"arguments","Arguments",[919,64874,64875,64887],{},[922,64876,64877],{},[925,64878,64879,64881,64883,64885],{},[928,64880,8081],{"align":989},[928,64882,5961],{},[928,64884,936],{},[928,64886,933],{},[938,64888,64889,64905],{},[925,64890,64891,64896,64900,64902],{},[943,64892,64893],{"align":989},[1661,64894,64895],{},"Selector",[943,64897,64898],{},[610,64899,7614],{},[943,64901,16657],{},[943,64903,64904],{},"The object to download. Could be an array of objects",[925,64906,64907,64911,64915,64919],{},[943,64908,64909],{"align":989},[1661,64910,12085],{},[943,64912,64913],{},[610,64914,12085],{},[943,64916,64917],{},[610,64918,1171],{},[943,64920,64921],{},"Description below",[4043,64923,12085],{"id":15602},[919,64925,64926,64938],{},[922,64927,64928],{},[925,64929,64930,64932,64934,64936],{},[928,64931,8081],{"align":989},[928,64933,5961],{"align":989},[928,64935,936],{"align":989},[928,64937,933],{"align":989},[938,64939,64940,64959,64977,64995,65013,65032,65050],{},[925,64941,64942,64947,64952,64956],{},[943,64943,64944],{"align":989},[1661,64945,64946],{},"trs",[943,64948,64949],{"align":989},[610,64950,64951],{},"bool",[943,64953,64954],{"align":989},[610,64955,963],{},[943,64957,64958],{"align":989},"Export position, rotation and scale instead of matrix per node",[925,64960,64961,64966,64970,64974],{},[943,64962,64963],{"align":989},[1661,64964,64965],{},"onlyVisible",[943,64967,64968],{"align":989},[610,64969,64951],{},[943,64971,64972],{"align":989},[610,64973,953],{},[943,64975,64976],{"align":989},"Export only visible objects",[925,64978,64979,64984,64988,64992],{},[943,64980,64981],{"align":989},[1661,64982,64983],{},"binary",[943,64985,64986],{"align":989},[610,64987,64951],{},[943,64989,64990],{"align":989},[610,64991,963],{},[943,64993,64994],{"align":989},"Export in binary (.glb) format, returning an ArrayBuffer",[925,64996,64997,65002,65006,65010],{},[943,64998,64999],{"align":989},[1661,65000,65001],{},"maxTextureSize",[943,65003,65004],{"align":989},[610,65005,5344],{},[943,65007,65008],{"align":989},[610,65009,11576],{},[943,65011,65012],{"align":989},"Restricts the image maximum size (both width and height) to the given value",[925,65014,65015,65020,65025,65029],{},[943,65016,65017],{"align":989},[1661,65018,65019],{},"animations",[943,65021,65022],{"align":989},[610,65023,65024],{},"Array\u003CAnimationClip>",[943,65026,65027],{"align":989},[610,65028,1171],{},[943,65030,65031],{"align":989},"List of animations to be included in the export",[925,65033,65034,65039,65043,65047],{},[943,65035,65036],{"align":989},[1661,65037,65038],{},"includeCustomExtensions",[943,65040,65041],{"align":989},[610,65042,64951],{},[943,65044,65045],{"align":989},[610,65046,963],{},[943,65048,65049],{"align":989},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[925,65051,65052,65057,65061,65066],{},[943,65053,65054],{"align":989},[1661,65055,65056],{},"fileName",[943,65058,65059],{"align":989},[610,65060,3564],{},[943,65062,65063],{"align":989},[610,65064,65065],{},"Object name",[943,65067,65068],{"align":989},"Name of the generated file",[1319,65070,65071],{},"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":568,"searchDepth":569,"depth":570,"links":65073},[65074,65075],{"id":35184,"depth":570,"text":35185},{"id":64871,"depth":570,"text":64872,"children":65076},[65077],{"id":15602,"depth":700,"text":12085},"Export 3D objects to GLTF format.",{},{"title":483,"description":65078},"ls7xbos-wdqomwboeVd0l1d29JncmAz9XxdqK17moKs",{"id":65083,"title":487,"body":65084,"description":65372,"extension":583,"links":584,"meta":65373,"navigation":586,"path":488,"seo":65374,"stem":489,"__hash__":65375},"docs/2.api/miscellaneous/use-intersect.md",{"type":493,"value":65085,"toc":65367},[65086,65103,65105,65121,65264,65266,65294,65298,65365],[606,65087,65088,65090,65091,54425,65094,65096,65097,65102],{},[610,65089,487],{}," is a function that returns ",[610,65092,65093],{},"intersect",[610,65095,15536],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1132,65098,65101],{"href":65099,"rel":65100},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1136],"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.",[496,65104,15],{"id":616},[3191,65106,65107],{},[606,65108,65109,65111,65112,65114,65115,65117,65118,1138],{},[610,65110,487],{}," requires a ",[610,65113,753],{}," context, so it is only available in ",[610,65116,753],{}," descendant components' ",[610,65119,65120],{},"\u003Cscript setup>",[618,65122,65125],{"className":620,"code":65123,"highlights":65124,"language":625,"meta":568,"style":568},"\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",[570,721],[610,65126,65127,65147,65172,65176,65202,65210,65214,65222,65240,65248,65256],{"__ignoreMap":568},[629,65128,65129,65131,65133,65135,65137,65139,65141,65143,65145],{"class":631,"line":569},[629,65130,635],{"class":634},[629,65132,639],{"class":638},[629,65134,643],{"class":642},[629,65136,646],{"class":642},[629,65138,649],{"class":634},[629,65140,652],{"class":634},[629,65142,656],{"class":655},[629,65144,652],{"class":634},[629,65146,661],{"class":634},[629,65148,65150,65152,65154,65157,65159,65162,65164,65166,65168,65170],{"class":65149,"line":570},[631,665],[629,65151,669],{"class":668},[629,65153,672],{"class":634},[629,65155,65156],{"class":675}," Torus",[629,65158,679],{"class":634},[629,65160,65161],{"class":675}," useIntersect",[629,65163,685],{"class":634},[629,65165,688],{"class":668},[629,65167,691],{"class":634},[629,65169,694],{"class":655},[629,65171,697],{"class":634},[629,65173,65174],{"class":631,"line":700},[629,65175,734],{"emptyLinePlaceholder":586},[629,65177,65179,65181,65183,65185,65187,65190,65192,65194,65196,65198,65200],{"class":65178,"line":721},[631,665],[629,65180,2407],{"class":642},[629,65182,672],{"class":634},[629,65184,3864],{"class":675},[629,65186,679],{"class":634},[629,65188,65189],{"class":675}," intersect",[629,65191,679],{"class":634},[629,65193,6813],{"class":675},[629,65195,2420],{"class":634},[629,65197,2423],{"class":634},[629,65199,65161],{"class":2426},[629,65201,6527],{"class":675},[629,65203,65204,65206,65208],{"class":631,"line":731},[629,65205,724],{"class":634},[629,65207,639],{"class":638},[629,65209,661],{"class":634},[629,65211,65212],{"class":631,"line":737},[629,65213,734],{"emptyLinePlaceholder":586},[629,65215,65216,65218,65220],{"class":631,"line":747},[629,65217,635],{"class":634},[629,65219,742],{"class":638},[629,65221,661],{"class":634},[629,65223,65224,65226,65228,65230,65232,65234,65236,65238],{"class":631,"line":770},[629,65225,750],{"class":634},[629,65227,289],{"class":638},[629,65229,3864],{"class":642},[629,65231,649],{"class":634},[629,65233,652],{"class":634},[629,65235,5886],{"class":655},[629,65237,652],{"class":634},[629,65239,661],{"class":634},[629,65241,65242,65244,65246],{"class":631,"line":782},[629,65243,773],{"class":634},[629,65245,869],{"class":638},[629,65247,779],{"class":634},[629,65249,65250,65252,65254],{"class":631,"line":792},[629,65251,897],{"class":634},[629,65253,289],{"class":638},[629,65255,661],{"class":634},[629,65257,65258,65260,65262],{"class":631,"line":797},[629,65259,724],{"class":634},[629,65261,742],{"class":638},[629,65263,661],{"class":634},[496,65265,64872],{"id":64871},[919,65267,65268,65278],{},[922,65269,65270],{},[925,65271,65272,65274,65276],{},[928,65273,8081],{"align":989},[928,65275,933],{},[928,65277,5961],{},[938,65279,65280],{},[925,65281,65282,65286,65289],{},[943,65283,65284],{"align":989},[1661,65285,12365],{},[943,65287,65288],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[943,65290,65291],{},[610,65292,65293],{},"(isIntersected: boolean) => void",[496,65295,65297],{"id":65296},"return","Return",[919,65299,65300,65310],{},[922,65301,65302],{},[925,65303,65304,65306,65308],{},[928,65305,8081],{"align":989},[928,65307,933],{},[928,65309,5961],{},[938,65311,65312,65330,65345],{},[925,65313,65314,65318,65325],{},[943,65315,65316],{"align":989},[1661,65317,5886],{},[943,65319,65320,65321,65324],{},"Vue ",[610,65322,65323],{},"ShallowRef"," to pass to the object to be observed.",[943,65326,65327],{},[610,65328,65329],{},"ShallowRef\u003CObject3D>",[925,65331,65332,65337,65340],{},[943,65333,65334],{"align":989},[1661,65335,65336],{},"intersects",[943,65338,65339],{},"Updates when the observed object's intersect status changes.",[943,65341,65342],{},[610,65343,65344],{},"ShallowRef\u003Cboolean>",[925,65346,65347,65352,65361],{},[943,65348,65349],{"align":989},[1661,65350,65351],{},"off",[943,65353,65354,65355,65357,65358,65360],{},"Calling this function stops ",[610,65356,487],{}," until ",[610,65359,5886],{}," changes.",[943,65362,65363],{},[610,65364,6013],{},[1319,65366,24443],{},{"title":568,"searchDepth":569,"depth":570,"links":65368},[65369,65370,65371],{"id":616,"depth":570,"text":15},{"id":64871,"depth":570,"text":64872},{"id":65296,"depth":570,"text":65297},"Detect when objects enter or leave the screen.",{},{"title":487,"description":65372},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1785417268500]