[{"data":1,"prerenderedAt":67228},["ShallowReactive",2],{"navigation":3,"/api":498,"/api-surround":597,"abstraction-list":602,"controls-list":13187,"loaders-list":16930,"materials-list":25988,"shapes-list":30314,"debug-list":36355,"light-list":39013,"staging-list":43510,"objects-list":50714,"misc-list":63433},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":32,"body":500,"description":590,"extension":591,"links":592,"meta":593,"navigation":594,"path":28,"seo":595,"stem":33,"__hash__":596},"docs/2.api/index.md",{"type":501,"value":502,"toc":575},"minimark",[503,508,512,516,519,523,526,530,533,537,540,544,547,551,554,558,561,565,568,572],[504,505,507],"h2",{"id":506},"abstraction","📦 Abstraction",[509,510],"api-list",{"list-name":511,"path":36},"abstraction-list",[504,513,515],{"id":514},"controls","🎮 Controls",[509,517],{"list-name":518,"path":98},"controls-list",[504,520,522],{"id":521},"loaders","📂 Loaders",[509,524],{"list-name":525,"path":128},"loaders-list",[504,527,529],{"id":528},"materials","🎨 Materials",[509,531],{"list-name":532,"path":170},"materials-list",[504,534,536],{"id":535},"shapes","🔷 Shapes",[509,538],{"list-name":539,"path":212},"shapes-list",[504,541,543],{"id":542},"debug-performance","📊 Debug & Performance",[509,545],{"list-name":546,"path":310},"debug-list",[504,548,550],{"id":549},"light-shadow","💡 Light & Shadow",[509,552],{"list-name":553,"path":336},"light-list",[504,555,557],{"id":556},"staging","🎭 Staging",[509,559],{"list-name":560,"path":370},"staging-list",[504,562,564],{"id":563},"objects","🎬 Objects",[509,566],{"list-name":567,"path":420},"objects-list",[504,569,571],{"id":570},"️-miscellaneous","🛠️ Miscellaneous",[509,573],{"list-name":574,"path":466},"misc-list",{"title":576,"searchDepth":577,"depth":578,"links":579},"",1,2,[580,581,582,583,584,585,586,587,588,589],{"id":506,"depth":578,"text":507},{"id":514,"depth":578,"text":515},{"id":521,"depth":578,"text":522},{"id":528,"depth":578,"text":529},{"id":535,"depth":578,"text":536},{"id":542,"depth":578,"text":543},{"id":549,"depth":578,"text":550},{"id":556,"depth":578,"text":557},{"id":563,"depth":578,"text":564},{"id":570,"depth":578,"text":571},"Explore the complete API reference","md",null,{},true,{"title":32,"description":590},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[598,600],{"title":23,"path":24,"stem":25,"description":599,"children":-1},"Migration guide for cientos",{"title":35,"path":36,"stem":37,"description":601,"children":-1},"UI components reference",[603,1362,1676,2225,7325,7619,8244,9469,9863,10513,11219,11696,12498,12811],{"id":604,"title":41,"body":605,"description":1358,"extension":591,"links":592,"meta":1359,"navigation":594,"path":42,"seo":1360,"stem":43,"__hash__":1361},"docs/2.api/1.abstractions/align.md",{"type":501,"value":606,"toc":1352},[607,613,622,625,919,923,926,1168,1172,1203,1206,1348],[608,609,610],"scene-controls-wrapper",{},[611,612],"abstractions-align",{},[614,615,616,617,621],"p",{},"Calculates a bounding box around its children and aligns them as a group within their parent. The component measures its contents and realigns on every frame unless ",[618,619,620],"code",{},"cacheKey"," is set.",[504,623,15],{"id":624},"usage",[626,627,634],"pre",{"className":628,"code":629,"highlights":630,"language":633,"meta":576,"style":576},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Align, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n\n \u003CTresAxesHelper :scale=\"2\" />\n\n \u003CAlign top right back>\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/Align>\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,631,632],13,18,"vue",[618,635,636,670,706,727,737,743,753,776,788,798,803,825,830,848,859,870,880,890,900,910],{"__ignoreMap":576},[637,638,640,644,648,652,655,658,661,665,667],"span",{"class":639,"line":577},"line",[637,641,643],{"class":642},"sMK4o","\u003C",[637,645,647],{"class":646},"swJcz","script",[637,649,651],{"class":650},"spNyl"," setup",[637,653,654],{"class":650}," lang",[637,656,657],{"class":642},"=",[637,659,660],{"class":642},"\"",[637,662,664],{"class":663},"sfazB","ts",[637,666,660],{"class":642},[637,668,669],{"class":642},">\n",[637,671,674,678,681,685,688,691,694,697,700,703],{"class":672,"line":578},[639,673],"highlight",[637,675,677],{"class":676},"s7zQu","import",[637,679,680],{"class":642}," {",[637,682,684],{"class":683},"sTEyZ"," Align",[637,686,687],{"class":642},",",[637,689,690],{"class":683}," OrbitControls",[637,692,693],{"class":642}," }",[637,695,696],{"class":676}," from",[637,698,699],{"class":642}," '",[637,701,702],{"class":663},"@tresjs/cientos",[637,704,705],{"class":642},"'\n",[637,707,709,711,713,716,718,720,722,725],{"class":639,"line":708},3,[637,710,677],{"class":676},[637,712,680],{"class":642},[637,714,715],{"class":683}," TresCanvas",[637,717,693],{"class":642},[637,719,696],{"class":676},[637,721,699],{"class":642},[637,723,724],{"class":663},"@tresjs/core",[637,726,705],{"class":642},[637,728,730,733,735],{"class":639,"line":729},4,[637,731,732],{"class":642},"\u003C/",[637,734,647],{"class":646},[637,736,669],{"class":642},[637,738,740],{"class":639,"line":739},5,[637,741,742],{"emptyLinePlaceholder":594},"\n",[637,744,746,748,751],{"class":639,"line":745},6,[637,747,643],{"class":642},[637,749,750],{"class":646},"template",[637,752,669],{"class":642},[637,754,756,759,762,765,767,769,772,774],{"class":639,"line":755},7,[637,757,758],{"class":642}," \u003C",[637,760,761],{"class":646},"TresCanvas",[637,763,764],{"class":650}," clear-color",[637,766,657],{"class":642},[637,768,660],{"class":642},[637,770,771],{"class":663},"#222",[637,773,660],{"class":642},[637,775,669],{"class":642},[637,777,779,782,785],{"class":639,"line":778},8,[637,780,781],{"class":642}," \u003C",[637,783,784],{"class":646},"TresPerspectiveCamera",[637,786,787],{"class":642}," />\n",[637,789,791,793,796],{"class":639,"line":790},9,[637,792,781],{"class":642},[637,794,795],{"class":646},"OrbitControls",[637,797,787],{"class":642},[637,799,801],{"class":639,"line":800},10,[637,802,742],{"emptyLinePlaceholder":594},[637,804,806,808,811,814,816,818,821,823],{"class":639,"line":805},11,[637,807,781],{"class":642},[637,809,810],{"class":646},"TresAxesHelper",[637,812,813],{"class":650}," :scale",[637,815,657],{"class":642},[637,817,660],{"class":642},[637,819,820],{"class":663},"2",[637,822,660],{"class":642},[637,824,787],{"class":642},[637,826,828],{"class":639,"line":827},12,[637,829,742],{"emptyLinePlaceholder":594},[637,831,833,835,837,840,843,846],{"class":832,"line":631},[639,673],[637,834,781],{"class":642},[637,836,41],{"class":646},[637,838,839],{"class":650}," top",[637,841,842],{"class":650}," right",[637,844,845],{"class":650}," back",[637,847,669],{"class":642},[637,849,851,854,857],{"class":639,"line":850},14,[637,852,853],{"class":642}," \u003C",[637,855,856],{"class":646},"TresMesh",[637,858,669],{"class":642},[637,860,862,865,868],{"class":639,"line":861},15,[637,863,864],{"class":642}," \u003C",[637,866,867],{"class":646},"TresBoxGeometry",[637,869,787],{"class":642},[637,871,873,875,878],{"class":639,"line":872},16,[637,874,864],{"class":642},[637,876,877],{"class":646},"TresMeshNormalMaterial",[637,879,787],{"class":642},[637,881,883,886,888],{"class":639,"line":882},17,[637,884,885],{"class":642}," \u003C/",[637,887,856],{"class":646},[637,889,669],{"class":642},[637,891,893,896,898],{"class":892,"line":632},[639,673],[637,894,895],{"class":642}," \u003C/",[637,897,41],{"class":646},[637,899,669],{"class":642},[637,901,903,906,908],{"class":639,"line":902},19,[637,904,905],{"class":642}," \u003C/",[637,907,761],{"class":646},[637,909,669],{"class":642},[637,911,913,915,917],{"class":639,"line":912},20,[637,914,732],{"class":642},[637,916,750],{"class":646},[637,918,669],{"class":642},[504,920,922],{"id":921},"props","Props",[614,924,925],{},"All props are optional.",[927,928,929,945],"table",{},[930,931,932],"thead",{},[933,934,935,939,942],"tr",{},[936,937,938],"th",{},"Prop",[936,940,941],{},"Description",[936,943,944],{},"Default",[946,947,948,972,991,1010,1028,1047,1065,1081,1097,1113,1129,1151],"tbody",{},[933,949,950,956,967],{},[951,952,953],"td",{},[618,954,955],{},"top",[951,957,958,959,962,963,966],{},"If ",[618,960,961],{},"true",", aligns bounding box bottom to ",[618,964,965],{},"0"," on the y-axis",[951,968,969],{},[618,970,971],{},"false",[933,973,974,979,987],{},[951,975,976],{},[618,977,978],{},"bottom",[951,980,958,981,983,984,986],{},[618,982,961],{},", aligns bounding box top to ",[618,985,965],{}," on the y-axis.",[951,988,989],{},[618,990,971],{},[933,992,993,998,1006],{},[951,994,995],{},[618,996,997],{},"left",[951,999,958,1000,1002,1003,1005],{},[618,1001,961],{},", aligns bounding box right to ",[618,1004,965],{}," on the x-axis.",[951,1007,1008],{},[618,1009,971],{},[933,1011,1012,1017,1024],{},[951,1013,1014],{},[618,1015,1016],{},"right",[951,1018,958,1019,1021,1022,1005],{},[618,1020,961],{},", aligns bounding box left to ",[618,1023,965],{},[951,1025,1026],{},[618,1027,971],{},[933,1029,1030,1035,1043],{},[951,1031,1032],{},[618,1033,1034],{},"front",[951,1036,958,1037,1039,1040,1042],{},[618,1038,961],{},", aligns bounding box back to ",[618,1041,965],{}," on the z-axis.",[951,1044,1045],{},[618,1046,971],{},[933,1048,1049,1054,1061],{},[951,1050,1051],{},[618,1052,1053],{},"back",[951,1055,958,1056,1058,1059,1042],{},[618,1057,961],{},", aligns bounding box front to ",[618,1060,965],{},[951,1062,1063],{},[618,1064,971],{},[933,1066,1067,1072,1077],{},[951,1068,1069],{},[618,1070,1071],{},"disable",[951,1073,958,1074,1076],{},[618,1075,961],{},", disables alignment on all axes.",[951,1078,1079],{},[618,1080,971],{},[933,1082,1083,1088,1093],{},[951,1084,1085],{},[618,1086,1087],{},"disableX",[951,1089,958,1090,1092],{},[618,1091,961],{},", disables alignment on the x-axis.",[951,1094,1095],{},[618,1096,971],{},[933,1098,1099,1104,1109],{},[951,1100,1101],{},[618,1102,1103],{},"disableY",[951,1105,958,1106,1108],{},[618,1107,961],{},", disables alignment on the y-axis.",[951,1110,1111],{},[618,1112,971],{},[933,1114,1115,1120,1125],{},[951,1116,1117],{},[618,1118,1119],{},"disableZ",[951,1121,958,1122,1124],{},[618,1123,961],{},", disables alignment on the z-axis.",[951,1126,1127],{},[618,1128,971],{},[933,1130,1131,1136,1147],{},[951,1132,1133],{},[618,1134,1135],{},"precise",[951,1137,1138,1139,1146],{},"See ",[1140,1141,1145],"a",{"href":1142,"rel":1143},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1144],"nofollow","Box3.setFromObject",".",[951,1148,1149],{},[618,1150,961],{},[933,1152,1153,1157,1163],{},[951,1154,1155],{},[618,1156,620],{},[951,1158,1159,1160,1162],{},"If set, component will only update when ",[618,1161,620],{},"'s value changes. If unset, component will update every frame.",[951,1164,1165],{},[618,1166,1167],{},"undefined",[504,1169,1171],{"id":1170},"events","Events",[927,1173,1174,1186],{},[930,1175,1176],{},[933,1177,1178,1181,1184],{},[936,1179,1180],{},"Event",[936,1182,1183],{},"Payload",[936,1185,941],{},[946,1187,1188],{},[933,1189,1190,1195,1200],{},[951,1191,1192],{},[618,1193,1194],{},"change",[951,1196,1197],{},[618,1198,1199],{},"AlignCallbackOptions",[951,1201,1202],{},"Fires after measurement, whenever the aligned bounding box or position changes.",[504,1204,1199],{"id":1205},"aligncallbackoptions",[626,1207,1210],{"className":1208,"code":1209,"language":664,"meta":576,"style":576},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface AlignCallbackOptions {\n /** The next parent above \u003CAlign /> */\n parent: Object3D\n /** The outmost container group of the \u003CAlign/> component */\n container: Object3D\n width: number\n height: number\n depth: number\n boundingBox: Box3\n boundingSphere: Sphere\n center: Vector3\n verticalAlignment: number\n horizontalAlignment: number\n depthAlignment: number\n}\n",[618,1211,1212,1227,1233,1244,1249,1258,1268,1277,1286,1296,1306,1316,1325,1334,1343],{"__ignoreMap":576},[637,1213,1214,1217,1220,1224],{"class":639,"line":577},[637,1215,1216],{"class":676},"export",[637,1218,1219],{"class":650}," interface",[637,1221,1223],{"class":1222},"sBMFI"," AlignCallbackOptions",[637,1225,1226],{"class":642}," {\n",[637,1228,1229],{"class":639,"line":578},[637,1230,1232],{"class":1231},"sHwdD"," /** The next parent above \u003CAlign /> */\n",[637,1234,1235,1238,1241],{"class":639,"line":708},[637,1236,1237],{"class":646}," parent",[637,1239,1240],{"class":642},":",[637,1242,1243],{"class":1222}," Object3D\n",[637,1245,1246],{"class":639,"line":729},[637,1247,1248],{"class":1231}," /** The outmost container group of the \u003CAlign/> component */\n",[637,1250,1251,1254,1256],{"class":639,"line":739},[637,1252,1253],{"class":646}," container",[637,1255,1240],{"class":642},[637,1257,1243],{"class":1222},[637,1259,1260,1263,1265],{"class":639,"line":745},[637,1261,1262],{"class":646}," width",[637,1264,1240],{"class":642},[637,1266,1267],{"class":1222}," number\n",[637,1269,1270,1273,1275],{"class":639,"line":755},[637,1271,1272],{"class":646}," height",[637,1274,1240],{"class":642},[637,1276,1267],{"class":1222},[637,1278,1279,1282,1284],{"class":639,"line":778},[637,1280,1281],{"class":646}," depth",[637,1283,1240],{"class":642},[637,1285,1267],{"class":1222},[637,1287,1288,1291,1293],{"class":639,"line":790},[637,1289,1290],{"class":646}," boundingBox",[637,1292,1240],{"class":642},[637,1294,1295],{"class":1222}," Box3\n",[637,1297,1298,1301,1303],{"class":639,"line":800},[637,1299,1300],{"class":646}," boundingSphere",[637,1302,1240],{"class":642},[637,1304,1305],{"class":1222}," Sphere\n",[637,1307,1308,1311,1313],{"class":639,"line":805},[637,1309,1310],{"class":646}," center",[637,1312,1240],{"class":642},[637,1314,1315],{"class":1222}," Vector3\n",[637,1317,1318,1321,1323],{"class":639,"line":827},[637,1319,1320],{"class":646}," verticalAlignment",[637,1322,1240],{"class":642},[637,1324,1267],{"class":1222},[637,1326,1327,1330,1332],{"class":639,"line":631},[637,1328,1329],{"class":646}," horizontalAlignment",[637,1331,1240],{"class":642},[637,1333,1267],{"class":1222},[637,1335,1336,1339,1341],{"class":639,"line":850},[637,1337,1338],{"class":646}," depthAlignment",[637,1340,1240],{"class":642},[637,1342,1267],{"class":1222},[637,1344,1345],{"class":639,"line":861},[637,1346,1347],{"class":642},"}\n",[1349,1350,1351],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":1353},[1354,1355,1356,1357],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},{"id":1205,"depth":578,"text":1199},"Calculate and align children within their parent using bounding boxes.",{},{"title":41,"description":1358},"3E8m6ve9BmzyQV2uJm6C_7PXljUwt0sOz94l3FSCjpI",{"id":1363,"title":45,"body":1364,"description":1672,"extension":591,"links":592,"meta":1673,"navigation":594,"path":46,"seo":1674,"stem":47,"__hash__":1675},"docs/2.api/1.abstractions/billboard.md",{"type":501,"value":1365,"toc":1668},[1366,1371,1378,1380,1589,1591,1665],[608,1367,1368],{},[1369,1370],"abstractions-billboard",{},[614,1372,1373,1374,1377],{},"Adds a ",[618,1375,1376],{},"THREE.Group"," that always faces the camera.",[504,1379,15],{"id":624},[626,1381,1384],{"className":628,"code":1382,"highlights":1383,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Billboard, Box, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333333\">\n \u003COrbitControls />\n \u003CTresPerspectiveCamera :position=\"[0, 0, 10]\" />\n \u003CBillboard>\n \u003CBox :scale=\"[0.5, 0.5, 0.001]\">\n \u003CTresMeshNormalMaterial />\n \u003C/Box>\n \u003C/Billboard>\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,800,850],[618,1385,1386,1406,1435,1453,1461,1465,1473,1492,1500,1520,1529,1548,1556,1564,1573,1581],{"__ignoreMap":576},[637,1387,1388,1390,1392,1394,1396,1398,1400,1402,1404],{"class":639,"line":577},[637,1389,643],{"class":642},[637,1391,647],{"class":646},[637,1393,651],{"class":650},[637,1395,654],{"class":650},[637,1397,657],{"class":642},[637,1399,660],{"class":642},[637,1401,664],{"class":663},[637,1403,660],{"class":642},[637,1405,669],{"class":642},[637,1407,1409,1411,1413,1416,1418,1421,1423,1425,1427,1429,1431,1433],{"class":1408,"line":578},[639,673],[637,1410,677],{"class":676},[637,1412,680],{"class":642},[637,1414,1415],{"class":683}," Billboard",[637,1417,687],{"class":642},[637,1419,1420],{"class":683}," Box",[637,1422,687],{"class":642},[637,1424,690],{"class":683},[637,1426,693],{"class":642},[637,1428,696],{"class":676},[637,1430,699],{"class":642},[637,1432,702],{"class":663},[637,1434,705],{"class":642},[637,1436,1437,1439,1441,1443,1445,1447,1449,1451],{"class":639,"line":708},[637,1438,677],{"class":676},[637,1440,680],{"class":642},[637,1442,715],{"class":683},[637,1444,693],{"class":642},[637,1446,696],{"class":676},[637,1448,699],{"class":642},[637,1450,724],{"class":663},[637,1452,705],{"class":642},[637,1454,1455,1457,1459],{"class":639,"line":729},[637,1456,732],{"class":642},[637,1458,647],{"class":646},[637,1460,669],{"class":642},[637,1462,1463],{"class":639,"line":739},[637,1464,742],{"emptyLinePlaceholder":594},[637,1466,1467,1469,1471],{"class":639,"line":745},[637,1468,643],{"class":642},[637,1470,750],{"class":646},[637,1472,669],{"class":642},[637,1474,1475,1477,1479,1481,1483,1485,1488,1490],{"class":639,"line":755},[637,1476,758],{"class":642},[637,1478,761],{"class":646},[637,1480,764],{"class":650},[637,1482,657],{"class":642},[637,1484,660],{"class":642},[637,1486,1487],{"class":663},"#333333",[637,1489,660],{"class":642},[637,1491,669],{"class":642},[637,1493,1494,1496,1498],{"class":639,"line":778},[637,1495,781],{"class":642},[637,1497,795],{"class":646},[637,1499,787],{"class":642},[637,1501,1502,1504,1506,1509,1511,1513,1516,1518],{"class":639,"line":790},[637,1503,781],{"class":642},[637,1505,784],{"class":646},[637,1507,1508],{"class":650}," :position",[637,1510,657],{"class":642},[637,1512,660],{"class":642},[637,1514,1515],{"class":663},"[0, 0, 10]",[637,1517,660],{"class":642},[637,1519,787],{"class":642},[637,1521,1523,1525,1527],{"class":1522,"line":800},[639,673],[637,1524,781],{"class":642},[637,1526,45],{"class":646},[637,1528,669],{"class":642},[637,1530,1531,1533,1535,1537,1539,1541,1544,1546],{"class":639,"line":805},[637,1532,853],{"class":642},[637,1534,217],{"class":646},[637,1536,813],{"class":650},[637,1538,657],{"class":642},[637,1540,660],{"class":642},[637,1542,1543],{"class":663},"[0.5, 0.5, 0.001]",[637,1545,660],{"class":642},[637,1547,669],{"class":642},[637,1549,1550,1552,1554],{"class":639,"line":827},[637,1551,864],{"class":642},[637,1553,877],{"class":646},[637,1555,787],{"class":642},[637,1557,1558,1560,1562],{"class":639,"line":631},[637,1559,885],{"class":642},[637,1561,217],{"class":646},[637,1563,669],{"class":642},[637,1565,1567,1569,1571],{"class":1566,"line":850},[639,673],[637,1568,895],{"class":642},[637,1570,45],{"class":646},[637,1572,669],{"class":642},[637,1574,1575,1577,1579],{"class":639,"line":861},[637,1576,905],{"class":642},[637,1578,761],{"class":646},[637,1580,669],{"class":642},[637,1582,1583,1585,1587],{"class":639,"line":872},[637,1584,732],{"class":642},[637,1586,750],{"class":646},[637,1588,669],{"class":642},[504,1590,922],{"id":921},[927,1592,1593,1603],{},[930,1594,1595],{},[933,1596,1597,1599,1601],{},[936,1598,938],{"align":997},[936,1600,941],{"align":997},[936,1602,944],{},[946,1604,1605,1623,1637,1651],{},[933,1606,1607,1612,1619],{},[951,1608,1609],{"align":997},[618,1610,1611],{},"autoUpdate",[951,1613,1614,1615,1618],{"align":997},"Whether the ",[618,1616,1617],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[951,1620,1621],{},[618,1622,961],{},[933,1624,1625,1630,1633],{},[951,1626,1627],{"align":997},[618,1628,1629],{},"lockX",[951,1631,1632],{"align":997},"Whether to lock the x-axis.",[951,1634,1635],{},[618,1636,971],{},[933,1638,1639,1644,1647],{},[951,1640,1641],{"align":997},[618,1642,1643],{},"lockY",[951,1645,1646],{"align":997},"Whether to lock the y-axis.",[951,1648,1649],{},[618,1650,971],{},[933,1652,1653,1658,1661],{},[951,1654,1655],{"align":997},[618,1656,1657],{},"lockZ",[951,1659,1660],{"align":997},"Whether to lock the z-axis.",[951,1662,1663],{},[618,1664,971],{},[1349,1666,1667],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":1669},[1670,1671],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Make objects always face the camera automatically.",{},{"title":45,"description":1672},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1677,"title":49,"body":1678,"description":2221,"extension":591,"links":592,"meta":2222,"navigation":594,"path":50,"seo":2223,"stem":51,"__hash__":2224},"docs/2.api/1.abstractions/camera-shake.md",{"type":501,"value":1679,"toc":2217},[1680,1685,1739,1741,2027,2066,2068,2215],[608,1681,1682],{},[1683,1684],"abstractions-camera-shake",{},[614,1686,1687,1690,1691,1695,1696,1700,1701,1704,1705,1695,1708,1711,1712,1715,1716,1695,1719,1695,1722,1725,1726,1729,1730,1146],{},[618,1688,1689],{},"\u003CCameraShake />"," is a component that adds ",[1692,1693,1694],"strong",{},"natural",", ",[1697,1698,1699],"em",{},"noise-driven motion"," to the ",[1692,1702,1703],{},"active camera",".\nIt offers ",[1692,1706,1707],{},"per-axis control",[1692,1709,1710],{},"adjustable intensity",", and ",[1697,1713,1714],{},"optional decay"," — perfect for ",[1697,1717,1718],{},"handheld feel",[1697,1720,1721],{},"footsteps",[1697,1723,1724],{},"impacts",", or ",[1697,1727,1728],{},"engine rumble"," — and is based on the ",[1140,1731,1734,1735,1738],{"href":1732,"rel":1733},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1144],"Drei ",[618,1736,1737],{},"CameraShake"," component",[504,1740,15],{"id":624},[626,1742,1745],{"className":628,"code":1743,"highlights":1744,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CameraShake, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera :position=\"[0, 2, 6]\" />\n \u003COrbitControls make-default />\n\n \u003CCameraShake :intensity=\"1\" :max-yaw=\"0.01\" :max-pitch=\"0.01\" :max-roll=\"0.01\" />\n \u003CTresAxesHelper :scale=\"2\" />\n \u003CTresMesh :position-y=\"0.5\">\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[578,805,872],[618,1746,1747,1767,1791,1809,1817,1821,1829,1847,1866,1877,1881,1936,1954,1974,1994,2002,2011,2019],{"__ignoreMap":576},[637,1748,1749,1751,1753,1755,1757,1759,1761,1763,1765],{"class":639,"line":577},[637,1750,643],{"class":642},[637,1752,647],{"class":646},[637,1754,651],{"class":650},[637,1756,654],{"class":650},[637,1758,657],{"class":642},[637,1760,660],{"class":642},[637,1762,664],{"class":663},[637,1764,660],{"class":642},[637,1766,669],{"class":642},[637,1768,1770,1772,1774,1777,1779,1781,1783,1785,1787,1789],{"class":1769,"line":578},[639,673],[637,1771,677],{"class":676},[637,1773,680],{"class":642},[637,1775,1776],{"class":683}," CameraShake",[637,1778,687],{"class":642},[637,1780,690],{"class":683},[637,1782,693],{"class":642},[637,1784,696],{"class":676},[637,1786,699],{"class":642},[637,1788,702],{"class":663},[637,1790,705],{"class":642},[637,1792,1793,1795,1797,1799,1801,1803,1805,1807],{"class":639,"line":708},[637,1794,677],{"class":676},[637,1796,680],{"class":642},[637,1798,715],{"class":683},[637,1800,693],{"class":642},[637,1802,696],{"class":676},[637,1804,699],{"class":642},[637,1806,724],{"class":663},[637,1808,705],{"class":642},[637,1810,1811,1813,1815],{"class":639,"line":729},[637,1812,732],{"class":642},[637,1814,647],{"class":646},[637,1816,669],{"class":642},[637,1818,1819],{"class":639,"line":739},[637,1820,742],{"emptyLinePlaceholder":594},[637,1822,1823,1825,1827],{"class":639,"line":745},[637,1824,643],{"class":642},[637,1826,750],{"class":646},[637,1828,669],{"class":642},[637,1830,1831,1833,1835,1837,1839,1841,1843,1845],{"class":639,"line":755},[637,1832,758],{"class":642},[637,1834,761],{"class":646},[637,1836,764],{"class":650},[637,1838,657],{"class":642},[637,1840,660],{"class":642},[637,1842,771],{"class":663},[637,1844,660],{"class":642},[637,1846,669],{"class":642},[637,1848,1849,1851,1853,1855,1857,1859,1862,1864],{"class":639,"line":778},[637,1850,781],{"class":642},[637,1852,784],{"class":646},[637,1854,1508],{"class":650},[637,1856,657],{"class":642},[637,1858,660],{"class":642},[637,1860,1861],{"class":663},"[0, 2, 6]",[637,1863,660],{"class":642},[637,1865,787],{"class":642},[637,1867,1868,1870,1872,1875],{"class":639,"line":790},[637,1869,781],{"class":642},[637,1871,795],{"class":646},[637,1873,1874],{"class":650}," make-default",[637,1876,787],{"class":642},[637,1878,1879],{"class":639,"line":800},[637,1880,742],{"emptyLinePlaceholder":594},[637,1882,1884,1886,1888,1891,1893,1895,1898,1900,1903,1905,1907,1910,1912,1915,1917,1919,1921,1923,1926,1928,1930,1932,1934],{"class":1883,"line":805},[639,673],[637,1885,781],{"class":642},[637,1887,1737],{"class":646},[637,1889,1890],{"class":650}," :intensity",[637,1892,657],{"class":642},[637,1894,660],{"class":642},[637,1896,1897],{"class":663},"1",[637,1899,660],{"class":642},[637,1901,1902],{"class":650}," :max-yaw",[637,1904,657],{"class":642},[637,1906,660],{"class":642},[637,1908,1909],{"class":663},"0.01",[637,1911,660],{"class":642},[637,1913,1914],{"class":650}," :max-pitch",[637,1916,657],{"class":642},[637,1918,660],{"class":642},[637,1920,1909],{"class":663},[637,1922,660],{"class":642},[637,1924,1925],{"class":650}," :max-roll",[637,1927,657],{"class":642},[637,1929,660],{"class":642},[637,1931,1909],{"class":663},[637,1933,660],{"class":642},[637,1935,787],{"class":642},[637,1937,1938,1940,1942,1944,1946,1948,1950,1952],{"class":639,"line":827},[637,1939,853],{"class":642},[637,1941,810],{"class":646},[637,1943,813],{"class":650},[637,1945,657],{"class":642},[637,1947,660],{"class":642},[637,1949,820],{"class":663},[637,1951,660],{"class":642},[637,1953,787],{"class":642},[637,1955,1956,1958,1960,1963,1965,1967,1970,1972],{"class":639,"line":631},[637,1957,853],{"class":642},[637,1959,856],{"class":646},[637,1961,1962],{"class":650}," :position-y",[637,1964,657],{"class":642},[637,1966,660],{"class":642},[637,1968,1969],{"class":663},"0.5",[637,1971,660],{"class":642},[637,1973,669],{"class":642},[637,1975,1976,1978,1980,1983,1985,1987,1990,1992],{"class":639,"line":850},[637,1977,864],{"class":642},[637,1979,867],{"class":646},[637,1981,1982],{"class":650}," :args",[637,1984,657],{"class":642},[637,1986,660],{"class":642},[637,1988,1989],{"class":663},"[1, 1, 1]",[637,1991,660],{"class":642},[637,1993,787],{"class":642},[637,1995,1996,1998,2000],{"class":639,"line":861},[637,1997,864],{"class":642},[637,1999,877],{"class":646},[637,2001,787],{"class":642},[637,2003,2005,2007,2009],{"class":2004,"line":872},[639,673],[637,2006,885],{"class":642},[637,2008,856],{"class":646},[637,2010,669],{"class":642},[637,2012,2013,2015,2017],{"class":639,"line":882},[637,2014,905],{"class":642},[637,2016,761],{"class":646},[637,2018,669],{"class":642},[637,2020,2021,2023,2025],{"class":639,"line":632},[637,2022,732],{"class":642},[637,2024,750],{"class":646},[637,2026,669],{"class":642},[2028,2029,2030,2051],"prose-note",{},[614,2031,2032,2034,2035,2040,2041,2044,2045,2050],{},[618,2033,1689],{}," is fully compatible with ",[1692,2036,2037],{},[618,2038,2039],{},"\u003COrbitControls />",".\nTo ensure it works ",[1697,2042,2043],{},"as expected",", make sure to add the ",[1692,2046,2047],{},[618,2048,2049],{},"make-default"," prop:",[626,2052,2054],{"className":628,"code":2053,"language":633,"meta":576,"style":576},"\u003COrbitControls make-default />\n",[618,2055,2056],{"__ignoreMap":576},[637,2057,2058,2060,2062,2064],{"class":639,"line":577},[637,2059,643],{"class":642},[637,2061,795],{"class":646},[637,2063,1874],{"class":650},[637,2065,787],{"class":642},[504,2067,922],{"id":921},[927,2069,2070,2080],{},[930,2071,2072],{},[933,2073,2074,2076,2078],{},[936,2075,938],{},[936,2077,941],{},[936,2079,944],{},[946,2081,2082,2096,2112,2130,2144,2158,2172,2187,2201],{},[933,2083,2084,2089,2092],{},[951,2085,2086],{},[618,2087,2088],{},"intensity",[951,2090,2091],{},"The intensity of the shake (0–1).",[951,2093,2094],{},[618,2095,1897],{},[933,2097,2098,2103,2108],{},[951,2099,2100],{},[618,2101,2102],{},"decay",[951,2104,958,2105,2107],{},[618,2106,961],{},", intensity decays over time.",[951,2109,2110],{},[618,2111,971],{},[933,2113,2114,2119,2125],{},[951,2115,2116],{},[618,2117,2118],{},"decayRate",[951,2120,2121,2122,2124],{},"How fast intensity changes when ",[618,2123,2102],{}," is enabled.",[951,2126,2127],{},[618,2128,2129],{},"0.65",[933,2131,2132,2137,2140],{},[951,2133,2134],{},[618,2135,2136],{},"maxYaw",[951,2138,2139],{},"Maximum yaw angle in radians.",[951,2141,2142],{},[618,2143,1909],{},[933,2145,2146,2151,2154],{},[951,2147,2148],{},[618,2149,2150],{},"maxPitch",[951,2152,2153],{},"Maximum pitch angle in radians.",[951,2155,2156],{},[618,2157,1909],{},[933,2159,2160,2165,2168],{},[951,2161,2162],{},[618,2163,2164],{},"maxRoll",[951,2166,2167],{},"Maximum roll angle in radians.",[951,2169,2170],{},[618,2171,1909],{},[933,2173,2174,2179,2182],{},[951,2175,2176],{},[618,2177,2178],{},"yawFrequency",[951,2180,2181],{},"Frequency of yaw oscillation.",[951,2183,2184],{},[618,2185,2186],{},"0.1",[933,2188,2189,2194,2197],{},[951,2190,2191],{},[618,2192,2193],{},"pitchFrequency",[951,2195,2196],{},"Frequency of pitch oscillation.",[951,2198,2199],{},[618,2200,2186],{},[933,2202,2203,2208,2211],{},[951,2204,2205],{},[618,2206,2207],{},"rollFrequency",[951,2209,2210],{},"Frequency of roll oscillation.",[951,2212,2213],{},[618,2214,2186],{},[1349,2216,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":2218},[2219,2220],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2221},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2226,"title":53,"body":2227,"description":7321,"extension":591,"links":592,"meta":7322,"navigation":594,"path":54,"seo":7323,"stem":55,"__hash__":7324},"docs/2.api/1.abstractions/decal.md",{"type":501,"value":2228,"toc":7286},[2229,2235,2317,2323,2325,2340,2795,2811,2815,2826,2989,3006,3009,3023,3078,3103,3107,3120,3125,3191,3198,3204,3221,3309,3314,3328,3403,4073,4078,4118,4131,4194,4197,4207,4293,4300,4320,4330,4333,4530,4542,4550,4565,4883,4887,4911,5274,5289,5309,5313,5329,5566,5572,5768,5774,5907,5916,5923,5979,6080,6085,6231,6236,6277,6281,6337,6341,6412,6416,6494,6501,6516,6557,6606,7283],[614,2230,2231,2234],{},[618,2232,2233],{},"\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.",[2236,2237,2238,2250,2263,2277,2284,2295,2307],"ul",{},[2239,2240,2241,2242,2245,2246,2249],"li",{},"🎨 Drop-in ",[1692,2243,2244],{},"editor UI"," via ",[618,2247,2248],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2239,2251,2252,2253,2245,2256,2262],{},"🛠 ",[1692,2254,2255],{},"Programmatic API",[1140,2257,2259],{"href":2258},"#programmatic-api-usedecaleditor",[618,2260,2261],{},"useDecalEditor()"," for custom panels and automation.",[2239,2264,2265,2266,2269,2270,2273,2274,1146],{},"🖼️ ",[1692,2267,2268],{},"Texture palette"," — pass an array of ",[618,2271,2272],{},"Texture"," to ",[618,2275,2276],{},":map",[2239,2278,2279,2280,2283],{},"🧩 ",[1692,2281,2282],{},"Custom material"," — override the default via the slot.",[2239,2285,2286,2287,2290,2291,2294],{},"💾 ",[1692,2288,2289],{},"Lossless JSON"," — ",[618,2292,2293],{},"v-model:data"," round-trips to plain JSON.",[2239,2296,2297,2298,2301,2302,2306],{},"⚡ ",[1692,2299,2300],{},"BVH-accelerated"," — auto-detected via ",[1140,2303,2304],{"href":332},[618,2305,331],{},"; 10–100× faster on dense meshes.",[2239,2308,2309,2310,2290,2313,2316],{},"📚 ",[1692,2311,2312],{},"Per-mesh stacking",[618,2314,2315],{},"zIndex"," with automatic polygon-offset.",[2318,2319,2320],"scene-wrapper",{},[2321,2322],"abstractions-decal",{},[504,2324,15],{"id":624},[614,2326,2327,2328,2330,2331,2334,2335,2337,2338,1146],{},"The minimal setup is a ",[618,2329,2233],{}," placed as a child of any ",[618,2332,2333],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[618,2336,2293],{}," and one or\nmore textures via ",[618,2339,2276],{},[626,2341,2343],{"className":628,"code":2342,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, OrbitControls, useTexture } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { reactive } from 'vue'\n\nconst { state: texture } = useTexture('/textures/logo.png')\n\nconst decals = reactive([\n {\n id: 'logo-1',\n position: [0, 0, 0.5],\n orientation: [0, 0, 0],\n size: [0.75, 0.17, 1],\n zIndex: 0,\n map: 'logo.png',\n },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 3]\" />\n \u003COrbitControls />\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal v-if=\"texture\" v-model:data=\"decals\" :map=\"texture\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,2344,2345,2365,2393,2411,2430,2434,2472,2476,2490,2495,2512,2540,2563,2589,2600,2616,2621,2626,2634,2638,2646,2655,2675,2684,2693,2702,2724,2768,2777,2786],{"__ignoreMap":576},[637,2346,2347,2349,2351,2353,2355,2357,2359,2361,2363],{"class":639,"line":577},[637,2348,643],{"class":642},[637,2350,647],{"class":646},[637,2352,651],{"class":650},[637,2354,654],{"class":650},[637,2356,657],{"class":642},[637,2358,660],{"class":642},[637,2360,664],{"class":663},[637,2362,660],{"class":642},[637,2364,669],{"class":642},[637,2366,2367,2369,2371,2374,2376,2378,2380,2383,2385,2387,2389,2391],{"class":639,"line":578},[637,2368,677],{"class":676},[637,2370,680],{"class":642},[637,2372,2373],{"class":683}," Decal",[637,2375,687],{"class":642},[637,2377,690],{"class":683},[637,2379,687],{"class":642},[637,2381,2382],{"class":683}," useTexture",[637,2384,693],{"class":642},[637,2386,696],{"class":676},[637,2388,699],{"class":642},[637,2390,702],{"class":663},[637,2392,705],{"class":642},[637,2394,2395,2397,2399,2401,2403,2405,2407,2409],{"class":639,"line":708},[637,2396,677],{"class":676},[637,2398,680],{"class":642},[637,2400,715],{"class":683},[637,2402,693],{"class":642},[637,2404,696],{"class":676},[637,2406,699],{"class":642},[637,2408,724],{"class":663},[637,2410,705],{"class":642},[637,2412,2413,2415,2417,2420,2422,2424,2426,2428],{"class":639,"line":729},[637,2414,677],{"class":676},[637,2416,680],{"class":642},[637,2418,2419],{"class":683}," reactive",[637,2421,693],{"class":642},[637,2423,696],{"class":676},[637,2425,699],{"class":642},[637,2427,633],{"class":663},[637,2429,705],{"class":642},[637,2431,2432],{"class":639,"line":739},[637,2433,742],{"emptyLinePlaceholder":594},[637,2435,2436,2439,2441,2444,2446,2449,2452,2455,2458,2461,2464,2467,2469],{"class":639,"line":745},[637,2437,2438],{"class":650},"const",[637,2440,680],{"class":642},[637,2442,2443],{"class":646}," state",[637,2445,1240],{"class":642},[637,2447,2448],{"class":683}," texture ",[637,2450,2451],{"class":642},"}",[637,2453,2454],{"class":642}," =",[637,2456,2382],{"class":2457},"s2Zo4",[637,2459,2460],{"class":683},"(",[637,2462,2463],{"class":642},"'",[637,2465,2466],{"class":663},"/textures/logo.png",[637,2468,2463],{"class":642},[637,2470,2471],{"class":683},")\n",[637,2473,2474],{"class":639,"line":755},[637,2475,742],{"emptyLinePlaceholder":594},[637,2477,2478,2480,2483,2485,2487],{"class":639,"line":778},[637,2479,2438],{"class":650},[637,2481,2482],{"class":683}," decals ",[637,2484,657],{"class":642},[637,2486,2419],{"class":2457},[637,2488,2489],{"class":683},"([\n",[637,2491,2492],{"class":639,"line":790},[637,2493,2494],{"class":642}," {\n",[637,2496,2497,2500,2502,2504,2507,2509],{"class":639,"line":800},[637,2498,2499],{"class":646}," id",[637,2501,1240],{"class":642},[637,2503,699],{"class":642},[637,2505,2506],{"class":663},"logo-1",[637,2508,2463],{"class":642},[637,2510,2511],{"class":642},",\n",[637,2513,2514,2517,2519,2522,2525,2527,2530,2532,2535,2538],{"class":639,"line":805},[637,2515,2516],{"class":646}," position",[637,2518,1240],{"class":642},[637,2520,2521],{"class":683}," [",[637,2523,965],{"class":2524},"sbssI",[637,2526,687],{"class":642},[637,2528,2529],{"class":2524}," 0",[637,2531,687],{"class":642},[637,2533,2534],{"class":2524}," 0.5",[637,2536,2537],{"class":683},"]",[637,2539,2511],{"class":642},[637,2541,2542,2545,2547,2549,2551,2553,2555,2557,2559,2561],{"class":639,"line":827},[637,2543,2544],{"class":646}," orientation",[637,2546,1240],{"class":642},[637,2548,2521],{"class":683},[637,2550,965],{"class":2524},[637,2552,687],{"class":642},[637,2554,2529],{"class":2524},[637,2556,687],{"class":642},[637,2558,2529],{"class":2524},[637,2560,2537],{"class":683},[637,2562,2511],{"class":642},[637,2564,2565,2568,2570,2572,2575,2577,2580,2582,2585,2587],{"class":639,"line":631},[637,2566,2567],{"class":646}," size",[637,2569,1240],{"class":642},[637,2571,2521],{"class":683},[637,2573,2574],{"class":2524},"0.75",[637,2576,687],{"class":642},[637,2578,2579],{"class":2524}," 0.17",[637,2581,687],{"class":642},[637,2583,2584],{"class":2524}," 1",[637,2586,2537],{"class":683},[637,2588,2511],{"class":642},[637,2590,2591,2594,2596,2598],{"class":639,"line":850},[637,2592,2593],{"class":646}," zIndex",[637,2595,1240],{"class":642},[637,2597,2529],{"class":2524},[637,2599,2511],{"class":642},[637,2601,2602,2605,2607,2609,2612,2614],{"class":639,"line":861},[637,2603,2604],{"class":646}," map",[637,2606,1240],{"class":642},[637,2608,699],{"class":642},[637,2610,2611],{"class":663},"logo.png",[637,2613,2463],{"class":642},[637,2615,2511],{"class":642},[637,2617,2618],{"class":639,"line":872},[637,2619,2620],{"class":642}," },\n",[637,2622,2623],{"class":639,"line":882},[637,2624,2625],{"class":683},"])\n",[637,2627,2628,2630,2632],{"class":639,"line":632},[637,2629,732],{"class":642},[637,2631,647],{"class":646},[637,2633,669],{"class":642},[637,2635,2636],{"class":639,"line":902},[637,2637,742],{"emptyLinePlaceholder":594},[637,2639,2640,2642,2644],{"class":639,"line":912},[637,2641,643],{"class":642},[637,2643,750],{"class":646},[637,2645,669],{"class":642},[637,2647,2649,2651,2653],{"class":639,"line":2648},21,[637,2650,758],{"class":642},[637,2652,761],{"class":646},[637,2654,669],{"class":642},[637,2656,2658,2660,2662,2664,2666,2668,2671,2673],{"class":639,"line":2657},22,[637,2659,781],{"class":642},[637,2661,784],{"class":646},[637,2663,1508],{"class":650},[637,2665,657],{"class":642},[637,2667,660],{"class":642},[637,2669,2670],{"class":663},"[2, 2, 3]",[637,2672,660],{"class":642},[637,2674,787],{"class":642},[637,2676,2678,2680,2682],{"class":639,"line":2677},23,[637,2679,781],{"class":642},[637,2681,795],{"class":646},[637,2683,787],{"class":642},[637,2685,2687,2689,2691],{"class":639,"line":2686},24,[637,2688,781],{"class":642},[637,2690,856],{"class":646},[637,2692,669],{"class":642},[637,2694,2696,2698,2700],{"class":639,"line":2695},25,[637,2697,853],{"class":642},[637,2699,867],{"class":646},[637,2701,787],{"class":642},[637,2703,2705,2707,2710,2713,2715,2717,2720,2722],{"class":639,"line":2704},26,[637,2706,853],{"class":642},[637,2708,2709],{"class":646},"TresMeshStandardMaterial",[637,2711,2712],{"class":650}," color",[637,2714,657],{"class":642},[637,2716,660],{"class":642},[637,2718,2719],{"class":663},"white",[637,2721,660],{"class":642},[637,2723,787],{"class":642},[637,2725,2727,2729,2731,2734,2736,2738,2741,2743,2746,2748,2750,2753,2755,2758,2760,2762,2764,2766],{"class":639,"line":2726},27,[637,2728,853],{"class":642},[637,2730,53],{"class":646},[637,2732,2733],{"class":650}," v-if",[637,2735,657],{"class":642},[637,2737,660],{"class":642},[637,2739,2740],{"class":663},"texture",[637,2742,660],{"class":642},[637,2744,2745],{"class":650}," v-model:data",[637,2747,657],{"class":642},[637,2749,660],{"class":642},[637,2751,2752],{"class":663},"decals",[637,2754,660],{"class":642},[637,2756,2757],{"class":650}," :map",[637,2759,657],{"class":642},[637,2761,660],{"class":642},[637,2763,2740],{"class":663},[637,2765,660],{"class":642},[637,2767,787],{"class":642},[637,2769,2771,2773,2775],{"class":639,"line":2770},28,[637,2772,895],{"class":642},[637,2774,856],{"class":646},[637,2776,669],{"class":642},[637,2778,2780,2782,2784],{"class":639,"line":2779},29,[637,2781,905],{"class":642},[637,2783,761],{"class":646},[637,2785,669],{"class":642},[637,2787,2789,2791,2793],{"class":639,"line":2788},30,[637,2790,732],{"class":642},[637,2792,750],{"class":646},[637,2794,669],{"class":642},[2028,2796,2797],{},[614,2798,2799,2800,2802,2803,2806,2807,2810],{},"The ",[618,2801,2293],{}," array is the ",[1692,2804,2805],{},"single source of truth"," — every\ndecal you can see lives in it. It serializes to plain JSON so you can\nsave / load it from a backend, localStorage, or a ",[618,2808,2809],{},".json"," file.",[504,2812,2814],{"id":2813},"multiple-textures-palette","Multiple textures (palette)",[614,2816,2817,2818,2820,2821,2825],{},"Pass an array to ",[618,2819,2276],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1140,2822,2823],{"href":154},[618,2824,153],{},"\nplugs in directly:",[626,2827,2829],{"className":628,"code":2828,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useTextures } from '@tresjs/cientos'\n\nconst { textures } = useTextures([\n '/textures/logo.png',\n '/textures/badge.png',\n '/textures/sticker.png',\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDecal v-model:data=\"decals\" :map=\"textures\" />\n\u003C/template>\n",[618,2830,2831,2851,2874,2878,2895,2906,2917,2928,2932,2940,2944,2952,2981],{"__ignoreMap":576},[637,2832,2833,2835,2837,2839,2841,2843,2845,2847,2849],{"class":639,"line":577},[637,2834,643],{"class":642},[637,2836,647],{"class":646},[637,2838,651],{"class":650},[637,2840,654],{"class":650},[637,2842,657],{"class":642},[637,2844,660],{"class":642},[637,2846,664],{"class":663},[637,2848,660],{"class":642},[637,2850,669],{"class":642},[637,2852,2853,2855,2857,2859,2861,2864,2866,2868,2870,2872],{"class":639,"line":578},[637,2854,677],{"class":676},[637,2856,680],{"class":642},[637,2858,2373],{"class":683},[637,2860,687],{"class":642},[637,2862,2863],{"class":683}," useTextures",[637,2865,693],{"class":642},[637,2867,696],{"class":676},[637,2869,699],{"class":642},[637,2871,702],{"class":663},[637,2873,705],{"class":642},[637,2875,2876],{"class":639,"line":708},[637,2877,742],{"emptyLinePlaceholder":594},[637,2879,2880,2882,2884,2887,2889,2891,2893],{"class":639,"line":729},[637,2881,2438],{"class":650},[637,2883,680],{"class":642},[637,2885,2886],{"class":683}," textures ",[637,2888,2451],{"class":642},[637,2890,2454],{"class":642},[637,2892,2863],{"class":2457},[637,2894,2489],{"class":683},[637,2896,2897,2900,2902,2904],{"class":639,"line":739},[637,2898,2899],{"class":642}," '",[637,2901,2466],{"class":663},[637,2903,2463],{"class":642},[637,2905,2511],{"class":642},[637,2907,2908,2910,2913,2915],{"class":639,"line":745},[637,2909,2899],{"class":642},[637,2911,2912],{"class":663},"/textures/badge.png",[637,2914,2463],{"class":642},[637,2916,2511],{"class":642},[637,2918,2919,2921,2924,2926],{"class":639,"line":755},[637,2920,2899],{"class":642},[637,2922,2923],{"class":663},"/textures/sticker.png",[637,2925,2463],{"class":642},[637,2927,2511],{"class":642},[637,2929,2930],{"class":639,"line":778},[637,2931,2625],{"class":683},[637,2933,2934,2936,2938],{"class":639,"line":790},[637,2935,732],{"class":642},[637,2937,647],{"class":646},[637,2939,669],{"class":642},[637,2941,2942],{"class":639,"line":800},[637,2943,742],{"emptyLinePlaceholder":594},[637,2945,2946,2948,2950],{"class":639,"line":805},[637,2947,643],{"class":642},[637,2949,750],{"class":646},[637,2951,669],{"class":642},[637,2953,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2977,2979],{"class":639,"line":827},[637,2955,758],{"class":642},[637,2957,53],{"class":646},[637,2959,2745],{"class":650},[637,2961,657],{"class":642},[637,2963,660],{"class":642},[637,2965,2752],{"class":663},[637,2967,660],{"class":642},[637,2969,2757],{"class":650},[637,2971,657],{"class":642},[637,2973,660],{"class":642},[637,2975,2976],{"class":663},"textures",[637,2978,660],{"class":642},[637,2980,787],{"class":642},[637,2982,2983,2985,2987],{"class":639,"line":631},[637,2984,732],{"class":642},[637,2986,750],{"class":646},[637,2988,669],{"class":642},[614,2990,2991,2992,2290,2995,2997,2998,3001,3002,3005],{},"Each entry references its texture by ",[618,2993,2994],{},"name",[618,2996,2233],{}," auto-fills\n",[618,2999,3000],{},"texture.name"," from the URL filename when missing, so JSON ",[618,3003,3004],{},"map","\nfields round-trip cleanly.",[504,3007,2282],{"id":3008},"custom-material",[614,3010,3011,3012,3015,3016,2511,3019,3022],{},"The default material is ",[618,3013,3014],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[618,3017,3018],{},"MeshStandardMaterial",[618,3020,3021],{},"MeshPhysicalMaterial",", or a custom shader.",[626,3024,3026],{"className":628,"code":3025,"language":633,"meta":576,"style":576},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[618,3027,3028,3065,3070],{"__ignoreMap":576},[637,3029,3030,3032,3034,3037,3039,3042,3044,3046,3048,3050,3053,3055,3057,3059,3061,3063],{"class":639,"line":577},[637,3031,643],{"class":642},[637,3033,53],{"class":646},[637,3035,3036],{"class":650}," v-model",[637,3038,1240],{"class":642},[637,3040,3041],{"class":650},"data",[637,3043,657],{"class":642},[637,3045,660],{"class":642},[637,3047,2752],{"class":683},[637,3049,660],{"class":642},[637,3051,3052],{"class":642}," :",[637,3054,3004],{"class":650},[637,3056,657],{"class":642},[637,3058,660],{"class":642},[637,3060,2740],{"class":683},[637,3062,660],{"class":642},[637,3064,669],{"class":642},[637,3066,3067],{"class":639,"line":578},[637,3068,3069],{"class":683}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[637,3071,3072,3074,3076],{"class":639,"line":708},[637,3073,732],{"class":642},[637,3075,53],{"class":646},[637,3077,669],{"class":642},[2028,3079,3080],{},[614,3081,3082,3083,3086,3087,3090,3091,3086,3094,3097,3098,2511,3100,3102],{},"Keep ",[618,3084,3085],{},"transparent: true"," and ",[618,3088,3089],{},"polygonOffset: true"," on any custom\nmaterial, otherwise stacking and alpha handling won't work as expected.\nColor / opacity tint from the editor only applies to materials\nexposing ",[618,3092,3093],{},".color",[618,3095,3096],{},".opacity"," (",[618,3099,3014],{},[618,3101,3018],{},", …) — bespoke shader materials are skipped\nsilently.",[504,3104,3106],{"id":3105},"stacking-decals-z-layering","Stacking decals (z-layering)",[614,3108,3109,3110,3112,3113,3116,3117,1146],{},"Each decal has a ",[618,3111,2315],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[618,3114,3115],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[618,3118,3119],{},"layerGap",[2318,3121,3122],{},[3123,3124],"abstractions-decal-stacking",{},[626,3126,3128],{"className":628,"code":3127,"language":633,"meta":576,"style":576},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n/>\n",[618,3129,3130,3137,3155,3170,3186],{"__ignoreMap":576},[637,3131,3132,3134],{"class":639,"line":577},[637,3133,643],{"class":642},[637,3135,3136],{"class":646},"Decal\n",[637,3138,3139,3142,3144,3146,3148,3150,3152],{"class":639,"line":578},[637,3140,3141],{"class":650}," v-model",[637,3143,1240],{"class":642},[637,3145,3041],{"class":650},[637,3147,657],{"class":642},[637,3149,660],{"class":642},[637,3151,2752],{"class":683},[637,3153,3154],{"class":642},"\"\n",[637,3156,3157,3160,3162,3164,3166,3168],{"class":639,"line":708},[637,3158,3159],{"class":642}," :",[637,3161,3004],{"class":650},[637,3163,657],{"class":642},[637,3165,660],{"class":642},[637,3167,2976],{"class":683},[637,3169,3154],{"class":642},[637,3171,3172,3174,3177,3179,3181,3184],{"class":639,"line":729},[637,3173,3159],{"class":642},[637,3175,3176],{"class":650},"layer-gap",[637,3178,657],{"class":642},[637,3180,660],{"class":642},[637,3182,3183],{"class":2524},"0.002",[637,3185,3154],{"class":642},[637,3187,3188],{"class":639,"line":739},[637,3189,3190],{"class":683},"/>\n",[614,3192,3193,3194,3197],{},"zIndex stacks are ",[1692,3195,3196],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[504,3199,3201,3202],{"id":3200},"editable-mode-decaldebugui","Editable mode + ",[618,3203,2248],{},[614,3205,3206,3207,3210,3211,3213,3214,3217,3218,1146],{},"Add the ",[618,3208,3209],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[618,3212,2248],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1692,3215,3216],{},"outside"," ",[618,3219,3220],{},"\u003CTresCanvas>",[3222,3223,3224,3238,3259],"prose-warning",{},[614,3225,3226,3228,3229,3232,3233,3235,3236,1146],{},[618,3227,2248],{}," needs its stylesheet — import it ",[1692,3230,3231],{},"once"," at your app\nentry. ",[618,3234,2233],{}," itself is style-less, so this is only needed when you\nmount ",[618,3237,2248],{},[626,3239,3241],{"className":1208,"code":3240,"language":664,"meta":576,"style":576},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[618,3242,3243,3248],{"__ignoreMap":576},[637,3244,3245],{"class":639,"line":577},[637,3246,3247],{"class":1231},"// Vite / Vue — in main.ts\n",[637,3249,3250,3252,3254,3257],{"class":639,"line":578},[637,3251,677],{"class":676},[637,3253,699],{"class":642},[637,3255,3256],{"class":663},"@tresjs/cientos/styles.css",[637,3258,705],{"class":642},[626,3260,3262],{"className":1208,"code":3261,"language":664,"meta":576,"style":576},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs/cientos/styles.css'],\n})\n",[618,3263,3264,3269,3284,3303],{"__ignoreMap":576},[637,3265,3266],{"class":639,"line":577},[637,3267,3268],{"class":1231},"// Nuxt — in nuxt.config.ts\n",[637,3270,3271,3273,3276,3279,3281],{"class":639,"line":578},[637,3272,1216],{"class":676},[637,3274,3275],{"class":676}," default",[637,3277,3278],{"class":2457}," defineNuxtConfig",[637,3280,2460],{"class":683},[637,3282,3283],{"class":642},"{\n",[637,3285,3286,3289,3291,3293,3295,3297,3299,3301],{"class":639,"line":708},[637,3287,3288],{"class":646}," css",[637,3290,1240],{"class":642},[637,3292,2521],{"class":683},[637,3294,2463],{"class":642},[637,3296,3256],{"class":663},[637,3298,2463],{"class":642},[637,3300,2537],{"class":683},[637,3302,2511],{"class":642},[637,3304,3305,3307],{"class":639,"line":729},[637,3306,2451],{"class":642},[637,3308,2471],{"class":683},[2318,3310,3311],{},[3312,3313],"abstractions-decal-editable",{},[614,3315,3316,3317,3320,3321,3324,3325,1146],{},"Three panels: a floating ",[1692,3318,3319],{},"handle"," anchored to the editing decal, a\nbottom ",[1692,3322,3323],{},"dock"," (texture picker + edit tools), a right-side ",[1692,3326,3327],{},"layer\npanel",[2236,3329,3330,3340,3345,3351,3364,3369,3374,3380,3386,3392,3398],{},[2239,3331,3332,3335,3336,3339],{},[1692,3333,3334],{},"Floating handle"," (rotate + scale + snap + live ",[618,3337,3338],{},"scale% · rotation° · L\u003Cn>"," badge)",[2239,3341,3342],{},[1692,3343,3344],{},"Color tint & opacity",[2239,3346,3347,3350],{},[1692,3348,3349],{},"Mirror"," (flip X / flip Y)",[2239,3352,3353,3097,3356,3359,3360,3363],{},[1692,3354,3355],{},"Layer controls",[618,3357,3358],{},"L+"," / ",[618,3361,3362],{},"L-",")",[2239,3365,3366],{},[1692,3367,3368],{},"Visibility toggle",[2239,3370,3371],{},[1692,3372,3373],{},"Per-row remove",[2239,3375,3376,3379],{},[1692,3377,3378],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2239,3381,3382,3385],{},[1692,3383,3384],{},"Texture picker"," (drag or click-to-arm)",[2239,3387,3388,3391],{},[1692,3389,3390],{},"Mode badge"," (placing / editing status)",[2239,3393,3394,3397],{},[1692,3395,3396],{},"Undo / Redo"," buttons",[2239,3399,3400,3397],{},[1692,3401,3402],{},"Import / Export",[626,3404,3406],{"className":628,"code":3405,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, DecalDebugUI, OrbitControls, useTextures } from '@tresjs/cientos'\nimport type { DecalEditorSession, DecalJsonEntry } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { computed, reactive, shallowRef } from 'vue'\n\nconst { textures } = useTextures(['/textures/a.png', '/textures/b.png'])\n\nconst layout = reactive\u003CRecord\u003Cstring, DecalJsonEntry[]>>({\n cube: [],\n sphere: [],\n})\n\nconst decalRef = shallowRef\u003C{ editor: DecalEditorSession } | null>(null)\nconst session = computed(() => decalRef.value?.editor ?? null)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDecalDebugUI :session=\"session\" :textures=\"textures ?? []\" :data=\"layout\" />\n\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 4]\" />\n \u003COrbitControls />\n\n \u003CTresMesh name=\"cube\" :position=\"[-1.2, 0, 0]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal ref=\"decalRef\" v-model:data=\"layout.cube\" :map=\"textures\" editable />\n \u003C/TresMesh>\n\n \u003CTresMesh name=\"sphere\" :position=\"[1.2, 0, 0]\">\n \u003CTresSphereGeometry :args=\"[0.7]\" />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal v-model:data=\"layout.sphere\" :map=\"textures\" editable />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,3407,3408,3428,3459,3486,3504,3532,3536,3571,3575,3610,3622,3633,3639,3643,3682,3722,3730,3734,3742,3787,3791,3799,3818,3826,3830,3861,3869,3887,3931,3939,3943,3974,3995,4014,4046,4055,4064],{"__ignoreMap":576},[637,3409,3410,3412,3414,3416,3418,3420,3422,3424,3426],{"class":639,"line":577},[637,3411,643],{"class":642},[637,3413,647],{"class":646},[637,3415,651],{"class":650},[637,3417,654],{"class":650},[637,3419,657],{"class":642},[637,3421,660],{"class":642},[637,3423,664],{"class":663},[637,3425,660],{"class":642},[637,3427,669],{"class":642},[637,3429,3430,3432,3434,3436,3438,3441,3443,3445,3447,3449,3451,3453,3455,3457],{"class":639,"line":578},[637,3431,677],{"class":676},[637,3433,680],{"class":642},[637,3435,2373],{"class":683},[637,3437,687],{"class":642},[637,3439,3440],{"class":683}," DecalDebugUI",[637,3442,687],{"class":642},[637,3444,690],{"class":683},[637,3446,687],{"class":642},[637,3448,2863],{"class":683},[637,3450,693],{"class":642},[637,3452,696],{"class":676},[637,3454,699],{"class":642},[637,3456,702],{"class":663},[637,3458,705],{"class":642},[637,3460,3461,3463,3466,3468,3471,3473,3476,3478,3480,3482,3484],{"class":639,"line":708},[637,3462,677],{"class":676},[637,3464,3465],{"class":676}," type",[637,3467,680],{"class":642},[637,3469,3470],{"class":683}," DecalEditorSession",[637,3472,687],{"class":642},[637,3474,3475],{"class":683}," DecalJsonEntry",[637,3477,693],{"class":642},[637,3479,696],{"class":676},[637,3481,699],{"class":642},[637,3483,702],{"class":663},[637,3485,705],{"class":642},[637,3487,3488,3490,3492,3494,3496,3498,3500,3502],{"class":639,"line":729},[637,3489,677],{"class":676},[637,3491,680],{"class":642},[637,3493,715],{"class":683},[637,3495,693],{"class":642},[637,3497,696],{"class":676},[637,3499,699],{"class":642},[637,3501,724],{"class":663},[637,3503,705],{"class":642},[637,3505,3506,3508,3510,3513,3515,3517,3519,3522,3524,3526,3528,3530],{"class":639,"line":739},[637,3507,677],{"class":676},[637,3509,680],{"class":642},[637,3511,3512],{"class":683}," computed",[637,3514,687],{"class":642},[637,3516,2419],{"class":683},[637,3518,687],{"class":642},[637,3520,3521],{"class":683}," shallowRef",[637,3523,693],{"class":642},[637,3525,696],{"class":676},[637,3527,699],{"class":642},[637,3529,633],{"class":663},[637,3531,705],{"class":642},[637,3533,3534],{"class":639,"line":745},[637,3535,742],{"emptyLinePlaceholder":594},[637,3537,3538,3540,3542,3544,3546,3548,3550,3553,3555,3558,3560,3562,3564,3567,3569],{"class":639,"line":755},[637,3539,2438],{"class":650},[637,3541,680],{"class":642},[637,3543,2886],{"class":683},[637,3545,2451],{"class":642},[637,3547,2454],{"class":642},[637,3549,2863],{"class":2457},[637,3551,3552],{"class":683},"([",[637,3554,2463],{"class":642},[637,3556,3557],{"class":663},"/textures/a.png",[637,3559,2463],{"class":642},[637,3561,687],{"class":642},[637,3563,699],{"class":642},[637,3565,3566],{"class":663},"/textures/b.png",[637,3568,2463],{"class":642},[637,3570,2625],{"class":683},[637,3572,3573],{"class":639,"line":778},[637,3574,742],{"emptyLinePlaceholder":594},[637,3576,3577,3579,3582,3584,3586,3588,3591,3593,3596,3598,3600,3603,3606,3608],{"class":639,"line":790},[637,3578,2438],{"class":650},[637,3580,3581],{"class":683}," layout ",[637,3583,657],{"class":642},[637,3585,2419],{"class":2457},[637,3587,643],{"class":642},[637,3589,3590],{"class":1222},"Record",[637,3592,643],{"class":642},[637,3594,3595],{"class":1222},"string",[637,3597,687],{"class":642},[637,3599,3475],{"class":1222},[637,3601,3602],{"class":683},"[]",[637,3604,3605],{"class":642},">>",[637,3607,2460],{"class":683},[637,3609,3283],{"class":642},[637,3611,3612,3615,3617,3620],{"class":639,"line":800},[637,3613,3614],{"class":646}," cube",[637,3616,1240],{"class":642},[637,3618,3619],{"class":683}," []",[637,3621,2511],{"class":642},[637,3623,3624,3627,3629,3631],{"class":639,"line":805},[637,3625,3626],{"class":646}," sphere",[637,3628,1240],{"class":642},[637,3630,3619],{"class":683},[637,3632,2511],{"class":642},[637,3634,3635,3637],{"class":639,"line":827},[637,3636,2451],{"class":642},[637,3638,2471],{"class":683},[637,3640,3641],{"class":639,"line":631},[637,3642,742],{"emptyLinePlaceholder":594},[637,3644,3645,3647,3650,3652,3654,3657,3660,3662,3664,3666,3669,3672,3675,3677,3680],{"class":639,"line":850},[637,3646,2438],{"class":650},[637,3648,3649],{"class":683}," decalRef ",[637,3651,657],{"class":642},[637,3653,3521],{"class":2457},[637,3655,3656],{"class":642},"\u003C{",[637,3658,3659],{"class":646}," editor",[637,3661,1240],{"class":642},[637,3663,3470],{"class":1222},[637,3665,693],{"class":642},[637,3667,3668],{"class":642}," |",[637,3670,3671],{"class":1222}," null",[637,3673,3674],{"class":642},">",[637,3676,2460],{"class":683},[637,3678,3679],{"class":642},"null",[637,3681,2471],{"class":683},[637,3683,3684,3686,3689,3691,3693,3695,3698,3701,3704,3706,3709,3712,3715,3718,3720],{"class":639,"line":861},[637,3685,2438],{"class":650},[637,3687,3688],{"class":683}," session ",[637,3690,657],{"class":642},[637,3692,3512],{"class":2457},[637,3694,2460],{"class":683},[637,3696,3697],{"class":642},"()",[637,3699,3700],{"class":650}," =>",[637,3702,3703],{"class":683}," decalRef",[637,3705,1146],{"class":642},[637,3707,3708],{"class":683},"value",[637,3710,3711],{"class":642},"?.",[637,3713,3714],{"class":683},"editor ",[637,3716,3717],{"class":642},"??",[637,3719,3671],{"class":642},[637,3721,2471],{"class":683},[637,3723,3724,3726,3728],{"class":639,"line":872},[637,3725,732],{"class":642},[637,3727,647],{"class":646},[637,3729,669],{"class":642},[637,3731,3732],{"class":639,"line":882},[637,3733,742],{"emptyLinePlaceholder":594},[637,3735,3736,3738,3740],{"class":639,"line":632},[637,3737,643],{"class":642},[637,3739,750],{"class":646},[637,3741,669],{"class":642},[637,3743,3744,3746,3749,3752,3754,3756,3759,3761,3764,3766,3768,3771,3773,3776,3778,3780,3783,3785],{"class":639,"line":902},[637,3745,758],{"class":642},[637,3747,3748],{"class":646},"DecalDebugUI",[637,3750,3751],{"class":650}," :session",[637,3753,657],{"class":642},[637,3755,660],{"class":642},[637,3757,3758],{"class":663},"session",[637,3760,660],{"class":642},[637,3762,3763],{"class":650}," :textures",[637,3765,657],{"class":642},[637,3767,660],{"class":642},[637,3769,3770],{"class":663},"textures ?? []",[637,3772,660],{"class":642},[637,3774,3775],{"class":650}," :data",[637,3777,657],{"class":642},[637,3779,660],{"class":642},[637,3781,3782],{"class":663},"layout",[637,3784,660],{"class":642},[637,3786,787],{"class":642},[637,3788,3789],{"class":639,"line":912},[637,3790,742],{"emptyLinePlaceholder":594},[637,3792,3793,3795,3797],{"class":639,"line":2648},[637,3794,758],{"class":642},[637,3796,761],{"class":646},[637,3798,669],{"class":642},[637,3800,3801,3803,3805,3807,3809,3811,3814,3816],{"class":639,"line":2657},[637,3802,781],{"class":642},[637,3804,784],{"class":646},[637,3806,1508],{"class":650},[637,3808,657],{"class":642},[637,3810,660],{"class":642},[637,3812,3813],{"class":663},"[2, 2, 4]",[637,3815,660],{"class":642},[637,3817,787],{"class":642},[637,3819,3820,3822,3824],{"class":639,"line":2677},[637,3821,781],{"class":642},[637,3823,795],{"class":646},[637,3825,787],{"class":642},[637,3827,3828],{"class":639,"line":2686},[637,3829,742],{"emptyLinePlaceholder":594},[637,3831,3832,3834,3836,3839,3841,3843,3846,3848,3850,3852,3854,3857,3859],{"class":639,"line":2695},[637,3833,781],{"class":642},[637,3835,856],{"class":646},[637,3837,3838],{"class":650}," name",[637,3840,657],{"class":642},[637,3842,660],{"class":642},[637,3844,3845],{"class":663},"cube",[637,3847,660],{"class":642},[637,3849,1508],{"class":650},[637,3851,657],{"class":642},[637,3853,660],{"class":642},[637,3855,3856],{"class":663},"[-1.2, 0, 0]",[637,3858,660],{"class":642},[637,3860,669],{"class":642},[637,3862,3863,3865,3867],{"class":639,"line":2704},[637,3864,853],{"class":642},[637,3866,867],{"class":646},[637,3868,787],{"class":642},[637,3870,3871,3873,3875,3877,3879,3881,3883,3885],{"class":639,"line":2726},[637,3872,853],{"class":642},[637,3874,2709],{"class":646},[637,3876,2712],{"class":650},[637,3878,657],{"class":642},[637,3880,660],{"class":642},[637,3882,2719],{"class":663},[637,3884,660],{"class":642},[637,3886,787],{"class":642},[637,3888,3889,3891,3893,3896,3898,3900,3903,3905,3907,3909,3911,3914,3916,3918,3920,3922,3924,3926,3929],{"class":639,"line":2770},[637,3890,853],{"class":642},[637,3892,53],{"class":646},[637,3894,3895],{"class":650}," ref",[637,3897,657],{"class":642},[637,3899,660],{"class":642},[637,3901,3902],{"class":663},"decalRef",[637,3904,660],{"class":642},[637,3906,2745],{"class":650},[637,3908,657],{"class":642},[637,3910,660],{"class":642},[637,3912,3913],{"class":663},"layout.cube",[637,3915,660],{"class":642},[637,3917,2757],{"class":650},[637,3919,657],{"class":642},[637,3921,660],{"class":642},[637,3923,2976],{"class":663},[637,3925,660],{"class":642},[637,3927,3928],{"class":650}," editable",[637,3930,787],{"class":642},[637,3932,3933,3935,3937],{"class":639,"line":2779},[637,3934,895],{"class":642},[637,3936,856],{"class":646},[637,3938,669],{"class":642},[637,3940,3941],{"class":639,"line":2788},[637,3942,742],{"emptyLinePlaceholder":594},[637,3944,3946,3948,3950,3952,3954,3956,3959,3961,3963,3965,3967,3970,3972],{"class":639,"line":3945},31,[637,3947,781],{"class":642},[637,3949,856],{"class":646},[637,3951,3838],{"class":650},[637,3953,657],{"class":642},[637,3955,660],{"class":642},[637,3957,3958],{"class":663},"sphere",[637,3960,660],{"class":642},[637,3962,1508],{"class":650},[637,3964,657],{"class":642},[637,3966,660],{"class":642},[637,3968,3969],{"class":663},"[1.2, 0, 0]",[637,3971,660],{"class":642},[637,3973,669],{"class":642},[637,3975,3977,3979,3982,3984,3986,3988,3991,3993],{"class":639,"line":3976},32,[637,3978,853],{"class":642},[637,3980,3981],{"class":646},"TresSphereGeometry",[637,3983,1982],{"class":650},[637,3985,657],{"class":642},[637,3987,660],{"class":642},[637,3989,3990],{"class":663},"[0.7]",[637,3992,660],{"class":642},[637,3994,787],{"class":642},[637,3996,3998,4000,4002,4004,4006,4008,4010,4012],{"class":639,"line":3997},33,[637,3999,853],{"class":642},[637,4001,2709],{"class":646},[637,4003,2712],{"class":650},[637,4005,657],{"class":642},[637,4007,660],{"class":642},[637,4009,2719],{"class":663},[637,4011,660],{"class":642},[637,4013,787],{"class":642},[637,4015,4017,4019,4021,4023,4025,4027,4030,4032,4034,4036,4038,4040,4042,4044],{"class":639,"line":4016},34,[637,4018,853],{"class":642},[637,4020,53],{"class":646},[637,4022,2745],{"class":650},[637,4024,657],{"class":642},[637,4026,660],{"class":642},[637,4028,4029],{"class":663},"layout.sphere",[637,4031,660],{"class":642},[637,4033,2757],{"class":650},[637,4035,657],{"class":642},[637,4037,660],{"class":642},[637,4039,2976],{"class":663},[637,4041,660],{"class":642},[637,4043,3928],{"class":650},[637,4045,787],{"class":642},[637,4047,4049,4051,4053],{"class":639,"line":4048},35,[637,4050,895],{"class":642},[637,4052,856],{"class":646},[637,4054,669],{"class":642},[637,4056,4058,4060,4062],{"class":639,"line":4057},36,[637,4059,905],{"class":642},[637,4061,761],{"class":646},[637,4063,669],{"class":642},[637,4065,4067,4069,4071],{"class":639,"line":4066},37,[637,4068,732],{"class":642},[637,4070,750],{"class":646},[637,4072,669],{"class":642},[4074,4075,4077],"h3",{"id":4076},"how-the-wiring-works","How the wiring works",[2236,4079,4080,4091,4100,4109],{},[2239,4081,4082,4085,4086,4088,4089,1146],{},[618,4083,4084],{},"v-model:data=\"layout.cube\""," — each ",[618,4087,2233],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[618,4090,2994],{},[2239,4092,4093,4096,4097,4099],{},[618,4094,4095],{},"ref=\"decalRef\""," — grab a reference to any ",[618,4098,2233],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2239,4101,4102,4105,4106,4108],{},[618,4103,4104],{},"session = decalRef.value?.editor"," — the editor session powers\n",[618,4107,2248],{},". Pass it through.",[2239,4110,4111,4114,4115,4117],{},[618,4112,4113],{},":data=\"layout\""," on ",[618,4116,2248],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[2028,4119,4120],{},[614,4121,4122,4123,4126,4127,4130],{},"The overlay is full-viewport (",[618,4124,4125],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[618,4128,4129],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[626,4132,4134],{"className":628,"code":4133,"language":633,"meta":576,"style":576},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... />\n \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[618,4135,4136,4176,4181,4186],{"__ignoreMap":576},[637,4137,4138,4140,4143,4146,4148,4150,4154,4156,4159,4162,4165,4167,4170,4172,4174],{"class":639,"line":577},[637,4139,643],{"class":642},[637,4141,4142],{"class":646},"div",[637,4144,4145],{"class":650}," style",[637,4147,657],{"class":642},[637,4149,660],{"class":642},[637,4151,4153],{"class":4152},"sqsOY","position",[637,4155,1240],{"class":642},[637,4157,4158],{"class":683}," relative",[637,4160,4161],{"class":642},";",[637,4163,4164],{"class":4152}," height",[637,4166,1240],{"class":642},[637,4168,4169],{"class":2524}," 500px",[637,4171,4161],{"class":642},[637,4173,660],{"class":642},[637,4175,669],{"class":642},[637,4177,4178],{"class":639,"line":578},[637,4179,4180],{"class":683}," \u003CDecalDebugUI contained ... />\n",[637,4182,4183],{"class":639,"line":708},[637,4184,4185],{"class":683}," \u003CTresCanvas>...\u003C/TresCanvas>\n",[637,4187,4188,4190,4192],{"class":639,"line":729},[637,4189,732],{"class":642},[637,4191,4142],{"class":646},[637,4193,669],{"class":642},[504,4195,3402],{"id":4196},"import-export",[614,4198,4199,4200,4203,4204,4206],{},"The Export button in the dock auto-downloads the current layout as\n",[618,4201,4202],{},"decal-layout-YYYY-MM-DD.json",". The Import button opens a file picker;\nthe loaded JSON is sanitised (unknown mesh keys and unknown texture\nnames are dropped with a warning) and routed back through each\n",[618,4205,2233],{}," automatically — no extra host code needed.",[626,4208,4210],{"className":628,"code":4209,"language":633,"meta":576,"style":576},"\u003C!-- Custom filename -->\n\u003CDecalDebugUI :export-filename=\"`${sceneName}.json`\" ... />\n\n\u003C!-- Disable the built-in download — handle export yourself -->\n\u003CDecalDebugUI :export-filename=\"null\" @export=\"postToBackend\" ... />\n",[618,4211,4212,4217,4248,4252,4257],{"__ignoreMap":576},[637,4213,4214],{"class":639,"line":577},[637,4215,4216],{"class":1231},"\u003C!-- Custom filename -->\n",[637,4218,4219,4221,4223,4225,4228,4230,4233,4236,4238,4240,4243,4246],{"class":639,"line":578},[637,4220,643],{"class":642},[637,4222,3748],{"class":646},[637,4224,3052],{"class":642},[637,4226,4227],{"class":650},"export-filename",[637,4229,657],{"class":642},[637,4231,4232],{"class":642},"\"`${",[637,4234,4235],{"class":683},"sceneName",[637,4237,2451],{"class":642},[637,4239,2809],{"class":663},[637,4241,4242],{"class":642},"`\"",[637,4244,4245],{"class":642}," ...",[637,4247,787],{"class":642},[637,4249,4250],{"class":639,"line":708},[637,4251,742],{"emptyLinePlaceholder":594},[637,4253,4254],{"class":639,"line":729},[637,4255,4256],{"class":1231},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[637,4258,4259,4261,4263,4265,4267,4269,4271,4273,4275,4278,4280,4282,4284,4287,4289,4291],{"class":639,"line":739},[637,4260,643],{"class":642},[637,4262,3748],{"class":646},[637,4264,3052],{"class":642},[637,4266,4227],{"class":650},[637,4268,657],{"class":642},[637,4270,660],{"class":642},[637,4272,3679],{"class":642},[637,4274,660],{"class":642},[637,4276,4277],{"class":642}," @",[637,4279,1216],{"class":650},[637,4281,657],{"class":642},[637,4283,660],{"class":642},[637,4285,4286],{"class":683},"postToBackend",[637,4288,660],{"class":642},[637,4290,4245],{"class":642},[637,4292,787],{"class":642},[504,4294,4296,4297,3363],{"id":4295},"targeting-a-loaded-model-glb","Targeting a loaded model (",[618,4298,4299],{},".glb",[614,4301,4302,4303,4305,4306,4312,4313,4316,4317,4319],{},"A ",[618,4304,2233],{}," can be a ",[1692,4307,4308,4309],{},"direct child of ",[618,4310,4311],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[618,4314,4315],{},"Mesh"," — so the\nbehaviour depends on what the ",[618,4318,4311],{}," wraps.",[4074,4321,4323,4324,4327,4328],{"id":4322},"when-object-is-a-mesh","When ",[618,4325,4326],{},":object"," is a ",[618,4329,4315],{},[614,4331,4332],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[626,4334,4336],{"className":628,"code":4335,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\n\nconst { nodes } = useGLTF('/models/helmet.glb', { draco: true })\n// nodes.Helmet is a Mesh in this asset.\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Helmet\" :object=\"nodes.Helmet\">\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n \u003C/primitive>\n\u003C/template>\n",[618,4337,4338,4358,4381,4385,4426,4431,4439,4443,4451,4483,4514,4522],{"__ignoreMap":576},[637,4339,4340,4342,4344,4346,4348,4350,4352,4354,4356],{"class":639,"line":577},[637,4341,643],{"class":642},[637,4343,647],{"class":646},[637,4345,651],{"class":650},[637,4347,654],{"class":650},[637,4349,657],{"class":642},[637,4351,660],{"class":642},[637,4353,664],{"class":663},[637,4355,660],{"class":642},[637,4357,669],{"class":642},[637,4359,4360,4362,4364,4366,4368,4371,4373,4375,4377,4379],{"class":639,"line":578},[637,4361,677],{"class":676},[637,4363,680],{"class":642},[637,4365,2373],{"class":683},[637,4367,687],{"class":642},[637,4369,4370],{"class":683}," useGLTF",[637,4372,693],{"class":642},[637,4374,696],{"class":676},[637,4376,699],{"class":642},[637,4378,702],{"class":663},[637,4380,705],{"class":642},[637,4382,4383],{"class":639,"line":708},[637,4384,742],{"emptyLinePlaceholder":594},[637,4386,4387,4389,4391,4394,4396,4398,4400,4402,4404,4407,4409,4411,4413,4416,4418,4422,4424],{"class":639,"line":729},[637,4388,2438],{"class":650},[637,4390,680],{"class":642},[637,4392,4393],{"class":683}," nodes ",[637,4395,2451],{"class":642},[637,4397,2454],{"class":642},[637,4399,4370],{"class":2457},[637,4401,2460],{"class":683},[637,4403,2463],{"class":642},[637,4405,4406],{"class":663},"/models/helmet.glb",[637,4408,2463],{"class":642},[637,4410,687],{"class":642},[637,4412,680],{"class":642},[637,4414,4415],{"class":646}," draco",[637,4417,1240],{"class":642},[637,4419,4421],{"class":4420},"sfNiH"," true",[637,4423,693],{"class":642},[637,4425,2471],{"class":683},[637,4427,4428],{"class":639,"line":739},[637,4429,4430],{"class":1231},"// nodes.Helmet is a Mesh in this asset.\n",[637,4432,4433,4435,4437],{"class":639,"line":745},[637,4434,732],{"class":642},[637,4436,647],{"class":646},[637,4438,669],{"class":642},[637,4440,4441],{"class":639,"line":755},[637,4442,742],{"emptyLinePlaceholder":594},[637,4444,4445,4447,4449],{"class":639,"line":778},[637,4446,643],{"class":642},[637,4448,750],{"class":646},[637,4450,669],{"class":642},[637,4452,4453,4455,4458,4460,4462,4464,4467,4469,4472,4474,4476,4479,4481],{"class":639,"line":790},[637,4454,758],{"class":642},[637,4456,4457],{"class":646},"primitive",[637,4459,2733],{"class":650},[637,4461,657],{"class":642},[637,4463,660],{"class":642},[637,4465,4466],{"class":663},"nodes?.Helmet",[637,4468,660],{"class":642},[637,4470,4471],{"class":650}," :object",[637,4473,657],{"class":642},[637,4475,660],{"class":642},[637,4477,4478],{"class":663},"nodes.Helmet",[637,4480,660],{"class":642},[637,4482,669],{"class":642},[637,4484,4485,4487,4489,4491,4493,4495,4498,4500,4502,4504,4506,4508,4510,4512],{"class":639,"line":800},[637,4486,781],{"class":642},[637,4488,53],{"class":646},[637,4490,2745],{"class":650},[637,4492,657],{"class":642},[637,4494,660],{"class":642},[637,4496,4497],{"class":663},"layout.helmet",[637,4499,660],{"class":642},[637,4501,2757],{"class":650},[637,4503,657],{"class":642},[637,4505,660],{"class":642},[637,4507,2976],{"class":663},[637,4509,660],{"class":642},[637,4511,3928],{"class":650},[637,4513,787],{"class":642},[637,4515,4516,4518,4520],{"class":639,"line":805},[637,4517,905],{"class":642},[637,4519,4457],{"class":646},[637,4521,669],{"class":642},[637,4523,4524,4526,4528],{"class":639,"line":827},[637,4525,732],{"class":642},[637,4527,750],{"class":646},[637,4529,669],{"class":642},[2028,4531,4532],{},[614,4533,4534,4535,4537,4538,4541],{},"The resolved parent is the ",[618,4536,4311],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[618,4539,4540],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4074,4543,4323,4545,4327,4547],{"id":4544},"when-object-is-a-group",[618,4546,4326],{},[618,4548,4549],{},"Group",[614,4551,4552,4553,4555,4556,4558,4559,4561,4562,1240],{},"A named node in a ",[618,4554,4299],{}," is often a ",[618,4557,4549],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[618,4560,3679],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[618,4563,4564],{},":mesh",[626,4566,4568],{"className":628,"code":4567,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\nimport { computed } from 'vue'\nimport type { Mesh } from 'three'\n\nconst { nodes } = useGLTF('/models/mug.glb', { draco: true })\n// nodes.Mug is a Group — pick the child you want to decal.\nconst body = computed\u003CMesh | null>(\n () => (nodes.value?.Mug?.getObjectByName('Body') as Mesh) ?? null,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Mug\" :object=\"nodes.Mug\">\n \u003CDecal v-model:data=\"layout.mug\" :map=\"textures\" :mesh=\"body\" editable />\n \u003C/primitive>\n\u003C/template>\n",[618,4569,4570,4590,4612,4630,4652,4656,4693,4698,4722,4770,4774,4782,4786,4794,4824,4867,4875],{"__ignoreMap":576},[637,4571,4572,4574,4576,4578,4580,4582,4584,4586,4588],{"class":639,"line":577},[637,4573,643],{"class":642},[637,4575,647],{"class":646},[637,4577,651],{"class":650},[637,4579,654],{"class":650},[637,4581,657],{"class":642},[637,4583,660],{"class":642},[637,4585,664],{"class":663},[637,4587,660],{"class":642},[637,4589,669],{"class":642},[637,4591,4592,4594,4596,4598,4600,4602,4604,4606,4608,4610],{"class":639,"line":578},[637,4593,677],{"class":676},[637,4595,680],{"class":642},[637,4597,2373],{"class":683},[637,4599,687],{"class":642},[637,4601,4370],{"class":683},[637,4603,693],{"class":642},[637,4605,696],{"class":676},[637,4607,699],{"class":642},[637,4609,702],{"class":663},[637,4611,705],{"class":642},[637,4613,4614,4616,4618,4620,4622,4624,4626,4628],{"class":639,"line":708},[637,4615,677],{"class":676},[637,4617,680],{"class":642},[637,4619,3512],{"class":683},[637,4621,693],{"class":642},[637,4623,696],{"class":676},[637,4625,699],{"class":642},[637,4627,633],{"class":663},[637,4629,705],{"class":642},[637,4631,4632,4634,4636,4638,4641,4643,4645,4647,4650],{"class":639,"line":729},[637,4633,677],{"class":676},[637,4635,3465],{"class":676},[637,4637,680],{"class":642},[637,4639,4640],{"class":683}," Mesh",[637,4642,693],{"class":642},[637,4644,696],{"class":676},[637,4646,699],{"class":642},[637,4648,4649],{"class":663},"three",[637,4651,705],{"class":642},[637,4653,4654],{"class":639,"line":739},[637,4655,742],{"emptyLinePlaceholder":594},[637,4657,4658,4660,4662,4664,4666,4668,4670,4672,4674,4677,4679,4681,4683,4685,4687,4689,4691],{"class":639,"line":745},[637,4659,2438],{"class":650},[637,4661,680],{"class":642},[637,4663,4393],{"class":683},[637,4665,2451],{"class":642},[637,4667,2454],{"class":642},[637,4669,4370],{"class":2457},[637,4671,2460],{"class":683},[637,4673,2463],{"class":642},[637,4675,4676],{"class":663},"/models/mug.glb",[637,4678,2463],{"class":642},[637,4680,687],{"class":642},[637,4682,680],{"class":642},[637,4684,4415],{"class":646},[637,4686,1240],{"class":642},[637,4688,4421],{"class":4420},[637,4690,693],{"class":642},[637,4692,2471],{"class":683},[637,4694,4695],{"class":639,"line":755},[637,4696,4697],{"class":1231},"// nodes.Mug is a Group — pick the child you want to decal.\n",[637,4699,4700,4702,4705,4707,4709,4711,4713,4715,4717,4719],{"class":639,"line":778},[637,4701,2438],{"class":650},[637,4703,4704],{"class":683}," body ",[637,4706,657],{"class":642},[637,4708,3512],{"class":2457},[637,4710,643],{"class":642},[637,4712,4315],{"class":1222},[637,4714,3668],{"class":642},[637,4716,3671],{"class":1222},[637,4718,3674],{"class":642},[637,4720,4721],{"class":683},"(\n",[637,4723,4724,4727,4729,4732,4734,4736,4738,4741,4743,4746,4748,4750,4753,4755,4758,4761,4763,4765,4767],{"class":639,"line":790},[637,4725,4726],{"class":642}," ()",[637,4728,3700],{"class":650},[637,4730,4731],{"class":683}," (nodes",[637,4733,1146],{"class":642},[637,4735,3708],{"class":683},[637,4737,3711],{"class":642},[637,4739,4740],{"class":683},"Mug",[637,4742,3711],{"class":642},[637,4744,4745],{"class":2457},"getObjectByName",[637,4747,2460],{"class":683},[637,4749,2463],{"class":642},[637,4751,4752],{"class":663},"Body",[637,4754,2463],{"class":642},[637,4756,4757],{"class":683},") ",[637,4759,4760],{"class":676},"as",[637,4762,4640],{"class":1222},[637,4764,4757],{"class":683},[637,4766,3717],{"class":642},[637,4768,4769],{"class":642}," null,\n",[637,4771,4772],{"class":639,"line":800},[637,4773,2471],{"class":683},[637,4775,4776,4778,4780],{"class":639,"line":805},[637,4777,732],{"class":642},[637,4779,647],{"class":646},[637,4781,669],{"class":642},[637,4783,4784],{"class":639,"line":827},[637,4785,742],{"emptyLinePlaceholder":594},[637,4787,4788,4790,4792],{"class":639,"line":631},[637,4789,643],{"class":642},[637,4791,750],{"class":646},[637,4793,669],{"class":642},[637,4795,4796,4798,4800,4802,4804,4806,4809,4811,4813,4815,4817,4820,4822],{"class":639,"line":850},[637,4797,758],{"class":642},[637,4799,4457],{"class":646},[637,4801,2733],{"class":650},[637,4803,657],{"class":642},[637,4805,660],{"class":642},[637,4807,4808],{"class":663},"nodes?.Mug",[637,4810,660],{"class":642},[637,4812,4471],{"class":650},[637,4814,657],{"class":642},[637,4816,660],{"class":642},[637,4818,4819],{"class":663},"nodes.Mug",[637,4821,660],{"class":642},[637,4823,669],{"class":642},[637,4825,4826,4828,4830,4832,4834,4836,4839,4841,4843,4845,4847,4849,4851,4854,4856,4858,4861,4863,4865],{"class":639,"line":861},[637,4827,781],{"class":642},[637,4829,53],{"class":646},[637,4831,2745],{"class":650},[637,4833,657],{"class":642},[637,4835,660],{"class":642},[637,4837,4838],{"class":663},"layout.mug",[637,4840,660],{"class":642},[637,4842,2757],{"class":650},[637,4844,657],{"class":642},[637,4846,660],{"class":642},[637,4848,2976],{"class":663},[637,4850,660],{"class":642},[637,4852,4853],{"class":650}," :mesh",[637,4855,657],{"class":642},[637,4857,660],{"class":642},[637,4859,4860],{"class":663},"body",[637,4862,660],{"class":642},[637,4864,3928],{"class":650},[637,4866,787],{"class":642},[637,4868,4869,4871,4873],{"class":639,"line":872},[637,4870,905],{"class":642},[637,4872,4457],{"class":646},[637,4874,669],{"class":642},[637,4876,4877,4879,4881],{"class":639,"line":882},[637,4878,732],{"class":642},[637,4880,750],{"class":646},[637,4882,669],{"class":642},[4074,4884,4886],{"id":4885},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[614,4888,4889,4890,4896,4897,4904,4905,4907,4908,1240],{},"Alternatively, ",[1692,4891,4892,4893,4895],{},"wrap a ",[618,4894,2333],{}," around an extracted sub-mesh",". Reach\nfor this when you need to target one named sub-mesh of a larger model (and\nkeep its material): use\n",[1140,4898,4901],{"href":4899,"rel":4900},"https://docs.tresjs.org/api/composables.html#usegraph",[1144],[618,4902,4903],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[618,4906,2333],{}," around its\n",[618,4909,4910],{},":geometry",[626,4912,4914],{"className":628,"code":4913,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs/core'\nimport { Decal } from '@tresjs/cientos'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { computed } from 'vue'\n\nconst { state: model } = useLoader(GLTFLoader, '/models/helmet.glb')\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\nconst nodes = computed(() => graph.value?.nodes)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh\n v-if=\"nodes?.Helmet.geometry\"\n name=\"helmet\"\n :geometry=\"nodes.Helmet.geometry\"\n >\n \u003Cprimitive :object=\"nodes.Helmet.material\" attach=\"material\" />\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n \u003C/TresMesh>\n\u003C/template>\n",[618,4915,4916,4936,4960,4978,4998,5016,5020,5052,5081,5095,5123,5131,5135,5143,5150,5164,5178,5192,5197,5228,5258,5266],{"__ignoreMap":576},[637,4917,4918,4920,4922,4924,4926,4928,4930,4932,4934],{"class":639,"line":577},[637,4919,643],{"class":642},[637,4921,647],{"class":646},[637,4923,651],{"class":650},[637,4925,654],{"class":650},[637,4927,657],{"class":642},[637,4929,660],{"class":642},[637,4931,664],{"class":663},[637,4933,660],{"class":642},[637,4935,669],{"class":642},[637,4937,4938,4940,4942,4945,4947,4950,4952,4954,4956,4958],{"class":639,"line":578},[637,4939,677],{"class":676},[637,4941,680],{"class":642},[637,4943,4944],{"class":683}," useGraph",[637,4946,687],{"class":642},[637,4948,4949],{"class":683}," useLoader",[637,4951,693],{"class":642},[637,4953,696],{"class":676},[637,4955,699],{"class":642},[637,4957,724],{"class":663},[637,4959,705],{"class":642},[637,4961,4962,4964,4966,4968,4970,4972,4974,4976],{"class":639,"line":708},[637,4963,677],{"class":676},[637,4965,680],{"class":642},[637,4967,2373],{"class":683},[637,4969,693],{"class":642},[637,4971,696],{"class":676},[637,4973,699],{"class":642},[637,4975,702],{"class":663},[637,4977,705],{"class":642},[637,4979,4980,4982,4984,4987,4989,4991,4993,4996],{"class":639,"line":729},[637,4981,677],{"class":676},[637,4983,680],{"class":642},[637,4985,4986],{"class":683}," GLTFLoader",[637,4988,693],{"class":642},[637,4990,696],{"class":676},[637,4992,699],{"class":642},[637,4994,4995],{"class":663},"three/examples/jsm/loaders/GLTFLoader.js",[637,4997,705],{"class":642},[637,4999,5000,5002,5004,5006,5008,5010,5012,5014],{"class":639,"line":739},[637,5001,677],{"class":676},[637,5003,680],{"class":642},[637,5005,3512],{"class":683},[637,5007,693],{"class":642},[637,5009,696],{"class":676},[637,5011,699],{"class":642},[637,5013,633],{"class":663},[637,5015,705],{"class":642},[637,5017,5018],{"class":639,"line":745},[637,5019,742],{"emptyLinePlaceholder":594},[637,5021,5022,5024,5026,5028,5030,5033,5035,5037,5039,5042,5044,5046,5048,5050],{"class":639,"line":755},[637,5023,2438],{"class":650},[637,5025,680],{"class":642},[637,5027,2443],{"class":646},[637,5029,1240],{"class":642},[637,5031,5032],{"class":683}," model ",[637,5034,2451],{"class":642},[637,5036,2454],{"class":642},[637,5038,4949],{"class":2457},[637,5040,5041],{"class":683},"(GLTFLoader",[637,5043,687],{"class":642},[637,5045,699],{"class":642},[637,5047,4406],{"class":663},[637,5049,2463],{"class":642},[637,5051,2471],{"class":683},[637,5053,5054,5056,5059,5061,5063,5065,5067,5069,5072,5074,5076,5078],{"class":639,"line":778},[637,5055,2438],{"class":650},[637,5057,5058],{"class":683}," scene ",[637,5060,657],{"class":642},[637,5062,3512],{"class":2457},[637,5064,2460],{"class":683},[637,5066,3697],{"class":642},[637,5068,3700],{"class":650},[637,5070,5071],{"class":683}," model",[637,5073,1146],{"class":642},[637,5075,3708],{"class":683},[637,5077,3711],{"class":642},[637,5079,5080],{"class":683},"scene)\n",[637,5082,5083,5085,5088,5090,5092],{"class":639,"line":790},[637,5084,2438],{"class":650},[637,5086,5087],{"class":683}," graph ",[637,5089,657],{"class":642},[637,5091,4944],{"class":2457},[637,5093,5094],{"class":683},"(scene)\n",[637,5096,5097,5099,5101,5103,5105,5107,5109,5111,5114,5116,5118,5120],{"class":639,"line":800},[637,5098,2438],{"class":650},[637,5100,4393],{"class":683},[637,5102,657],{"class":642},[637,5104,3512],{"class":2457},[637,5106,2460],{"class":683},[637,5108,3697],{"class":642},[637,5110,3700],{"class":650},[637,5112,5113],{"class":683}," graph",[637,5115,1146],{"class":642},[637,5117,3708],{"class":683},[637,5119,3711],{"class":642},[637,5121,5122],{"class":683},"nodes)\n",[637,5124,5125,5127,5129],{"class":639,"line":805},[637,5126,732],{"class":642},[637,5128,647],{"class":646},[637,5130,669],{"class":642},[637,5132,5133],{"class":639,"line":827},[637,5134,742],{"emptyLinePlaceholder":594},[637,5136,5137,5139,5141],{"class":639,"line":631},[637,5138,643],{"class":642},[637,5140,750],{"class":646},[637,5142,669],{"class":642},[637,5144,5145,5147],{"class":639,"line":850},[637,5146,758],{"class":642},[637,5148,5149],{"class":646},"TresMesh\n",[637,5151,5152,5155,5157,5159,5162],{"class":639,"line":861},[637,5153,5154],{"class":650}," v-if",[637,5156,657],{"class":642},[637,5158,660],{"class":642},[637,5160,5161],{"class":663},"nodes?.Helmet.geometry",[637,5163,3154],{"class":642},[637,5165,5166,5169,5171,5173,5176],{"class":639,"line":872},[637,5167,5168],{"class":650}," name",[637,5170,657],{"class":642},[637,5172,660],{"class":642},[637,5174,5175],{"class":663},"helmet",[637,5177,3154],{"class":642},[637,5179,5180,5183,5185,5187,5190],{"class":639,"line":882},[637,5181,5182],{"class":650}," :geometry",[637,5184,657],{"class":642},[637,5186,660],{"class":642},[637,5188,5189],{"class":663},"nodes.Helmet.geometry",[637,5191,3154],{"class":642},[637,5193,5194],{"class":639,"line":632},[637,5195,5196],{"class":642}," >\n",[637,5198,5199,5201,5203,5205,5207,5209,5212,5214,5217,5219,5221,5224,5226],{"class":639,"line":902},[637,5200,781],{"class":642},[637,5202,4457],{"class":646},[637,5204,4471],{"class":650},[637,5206,657],{"class":642},[637,5208,660],{"class":642},[637,5210,5211],{"class":663},"nodes.Helmet.material",[637,5213,660],{"class":642},[637,5215,5216],{"class":650}," attach",[637,5218,657],{"class":642},[637,5220,660],{"class":642},[637,5222,5223],{"class":663},"material",[637,5225,660],{"class":642},[637,5227,787],{"class":642},[637,5229,5230,5232,5234,5236,5238,5240,5242,5244,5246,5248,5250,5252,5254,5256],{"class":639,"line":912},[637,5231,781],{"class":642},[637,5233,53],{"class":646},[637,5235,2745],{"class":650},[637,5237,657],{"class":642},[637,5239,660],{"class":642},[637,5241,4497],{"class":663},[637,5243,660],{"class":642},[637,5245,2757],{"class":650},[637,5247,657],{"class":642},[637,5249,660],{"class":642},[637,5251,2976],{"class":663},[637,5253,660],{"class":642},[637,5255,3928],{"class":650},[637,5257,787],{"class":642},[637,5259,5260,5262,5264],{"class":639,"line":2648},[637,5261,905],{"class":642},[637,5263,856],{"class":646},[637,5265,669],{"class":642},[637,5267,5268,5270,5272],{"class":639,"line":2657},[637,5269,732],{"class":642},[637,5271,750],{"class":646},[637,5273,669],{"class":642},[614,5275,5276,5277,3086,5280,5282,5283,5285,5286,5288],{},"The mesh's ",[618,5278,5279],{},"geometry",[618,5281,5223],{}," come from the loaded model; the\n",[618,5284,2233],{}," lives inside a regular ",[618,5287,2333],{}," with a clean scene-graph\nparent.",[3222,5290,5291],{},[614,5292,5293,5294,5296,5297,5300,5301,5304,5305,5308],{},"A saved decal's ",[618,5295,4153],{}," is stored in ",[1692,5298,5299],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1692,5302,5303],{},"at load\ntime",". A persisted layout therefore only round-trips if the parent sits\nat the same transform it had when the decal was authored. Parents under a\ncontinuously- or randomly-animated wrapper (e.g. ",[618,5306,5307],{},"\u003CLevioso>",", which starts\nat a random phase each reload) move out from under the saved point, so the\nprojection clips to nothing and the decal vanishes. Author and persist\ndecals on parents whose transform is deterministic at load time, or apply\nthe animation only after the layout has mounted.",[504,5310,5312],{"id":5311},"json-schema","JSON schema",[614,5314,5315,5316,5318,5319,5322,5323,5325,5326,1146],{},"Each entry in the ",[618,5317,3041],{}," array follows the ",[618,5320,5321],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[618,5324,2248],{}," groups these by mesh name as\n",[618,5327,5328],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5330,5331,5332,5333,5337],"details",{},"\n ",[5334,5335,5336],"summary",{},"Full schema",[626,5338,5340],{"className":1208,"code":5339,"language":664,"meta":576,"style":576},"interface DecalJsonEntry {\n id: string // stable UUID\n position: [number, number, number] // target-mesh local space (raycast hit, baked into the parent's frame)\n orientation: [number, number, number] // Euler XYZ\n size: [number, number, number] // extents along X/Y; Z = projection depth\n zIndex: number // per-mesh layer order, ≥ 0\n map: string | null // matches a texture's .name\n flipX?: boolean // omitted when false\n flipY?: boolean // omitted when false\n color?: string // hex (e.g. '#ff6b35'), omitted when no tint\n opacity?: number // 0..1, omitted when 1\n visible?: boolean // omitted when true; false hides the decal\n}\n\ntype DecalLayout = Record\u003Cstring, DecalJsonEntry[]>\n// { sphere: [...], cube: [...] }\n",[618,5341,5342,5351,5364,5391,5415,5439,5451,5467,5481,5492,5504,5516,5528,5532,5536,5561],{"__ignoreMap":576},[637,5343,5344,5347,5349],{"class":639,"line":577},[637,5345,5346],{"class":650},"interface",[637,5348,3475],{"class":1222},[637,5350,1226],{"class":642},[637,5352,5353,5356,5358,5361],{"class":639,"line":578},[637,5354,5355],{"class":646}," id",[637,5357,1240],{"class":642},[637,5359,5360],{"class":1222}," string",[637,5362,5363],{"class":1231}," // stable UUID\n",[637,5365,5366,5369,5371,5373,5376,5378,5381,5383,5385,5388],{"class":639,"line":708},[637,5367,5368],{"class":646}," position",[637,5370,1240],{"class":642},[637,5372,2521],{"class":683},[637,5374,5375],{"class":1222},"number",[637,5377,687],{"class":642},[637,5379,5380],{"class":1222}," number",[637,5382,687],{"class":642},[637,5384,5380],{"class":1222},[637,5386,5387],{"class":683},"] ",[637,5389,5390],{"class":1231},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[637,5392,5393,5396,5398,5400,5402,5404,5406,5408,5410,5412],{"class":639,"line":729},[637,5394,5395],{"class":646}," orientation",[637,5397,1240],{"class":642},[637,5399,2521],{"class":683},[637,5401,5375],{"class":1222},[637,5403,687],{"class":642},[637,5405,5380],{"class":1222},[637,5407,687],{"class":642},[637,5409,5380],{"class":1222},[637,5411,5387],{"class":683},[637,5413,5414],{"class":1231},"// Euler XYZ\n",[637,5416,5417,5420,5422,5424,5426,5428,5430,5432,5434,5436],{"class":639,"line":739},[637,5418,5419],{"class":646}," size",[637,5421,1240],{"class":642},[637,5423,2521],{"class":683},[637,5425,5375],{"class":1222},[637,5427,687],{"class":642},[637,5429,5380],{"class":1222},[637,5431,687],{"class":642},[637,5433,5380],{"class":1222},[637,5435,5387],{"class":683},[637,5437,5438],{"class":1231},"// extents along X/Y; Z = projection depth\n",[637,5440,5441,5444,5446,5448],{"class":639,"line":745},[637,5442,5443],{"class":646}," zIndex",[637,5445,1240],{"class":642},[637,5447,5380],{"class":1222},[637,5449,5450],{"class":1231}," // per-mesh layer order, ≥ 0\n",[637,5452,5453,5456,5458,5460,5462,5464],{"class":639,"line":755},[637,5454,5455],{"class":646}," map",[637,5457,1240],{"class":642},[637,5459,5360],{"class":1222},[637,5461,3668],{"class":642},[637,5463,3671],{"class":1222},[637,5465,5466],{"class":1231}," // matches a texture's .name\n",[637,5468,5469,5472,5475,5478],{"class":639,"line":778},[637,5470,5471],{"class":646}," flipX",[637,5473,5474],{"class":642},"?:",[637,5476,5477],{"class":1222}," boolean",[637,5479,5480],{"class":1231}," // omitted when false\n",[637,5482,5483,5486,5488,5490],{"class":639,"line":790},[637,5484,5485],{"class":646}," flipY",[637,5487,5474],{"class":642},[637,5489,5477],{"class":1222},[637,5491,5480],{"class":1231},[637,5493,5494,5497,5499,5501],{"class":639,"line":800},[637,5495,5496],{"class":646}," color",[637,5498,5474],{"class":642},[637,5500,5360],{"class":1222},[637,5502,5503],{"class":1231}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[637,5505,5506,5509,5511,5513],{"class":639,"line":805},[637,5507,5508],{"class":646}," opacity",[637,5510,5474],{"class":642},[637,5512,5380],{"class":1222},[637,5514,5515],{"class":1231}," // 0..1, omitted when 1\n",[637,5517,5518,5521,5523,5525],{"class":639,"line":827},[637,5519,5520],{"class":646}," visible",[637,5522,5474],{"class":642},[637,5524,5477],{"class":1222},[637,5526,5527],{"class":1231}," // omitted when true; false hides the decal\n",[637,5529,5530],{"class":639,"line":631},[637,5531,1347],{"class":642},[637,5533,5534],{"class":639,"line":850},[637,5535,742],{"emptyLinePlaceholder":594},[637,5537,5538,5541,5544,5546,5549,5551,5553,5555,5557,5559],{"class":639,"line":861},[637,5539,5540],{"class":650},"type",[637,5542,5543],{"class":1222}," DecalLayout",[637,5545,2454],{"class":642},[637,5547,5548],{"class":1222}," Record",[637,5550,643],{"class":642},[637,5552,3595],{"class":1222},[637,5554,687],{"class":642},[637,5556,3475],{"class":1222},[637,5558,3602],{"class":683},[637,5560,669],{"class":642},[637,5562,5563],{"class":639,"line":872},[637,5564,5565],{"class":1231},"// { sphere: [...], cube: [...] }\n",[504,5567,5569,5571],{"id":5568},"decal-props",[618,5570,2233],{}," props",[927,5573,5574,5584],{},[930,5575,5576],{},[933,5577,5578,5580,5582],{},[936,5579,938],{},[936,5581,941],{},[936,5583,944],{},[946,5585,5586,5602,5622,5659,5677,5691,5705,5725,5753],{},[933,5587,5588,5592,5598],{},[951,5589,5590],{},[1692,5591,3041],{},[951,5593,5594,5595,5597],{},"Two-way list of stamped decals (use with ",[618,5596,2293],{},").",[951,5599,5600],{},[618,5601,3602],{},[933,5603,5604,5608,5618],{},[951,5605,5606],{},[1692,5607,3004],{},[951,5609,5610,5611,5613,5614,5617],{},"A single ",[618,5612,2272],{}," or array of ",[618,5615,5616],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[951,5619,5620],{},[618,5621,3679],{},[933,5623,5624,5629,5655],{},[951,5625,5626],{},[1692,5627,5628],{},"mesh",[951,5630,5631,5632,5634,5635,5638,5639,5641,5642,5645,5646,3359,5648,3359,5651,5654],{},"Optional explicit target mesh (",[618,5633,4315],{}," or ",[618,5636,5637],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[618,5640,2233],{}," is auto-resolved via a hidden anchor ",[618,5643,5644],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[618,5647,4153],{},[618,5649,5650],{},"rotation",[618,5652,5653],{},"scale"," via the scene-graph hierarchy.",[951,5656,5657],{},[618,5658,3679],{},[933,5660,5661,5665,5673],{},[951,5662,5663],{},[1692,5664,3209],{},[951,5666,4323,5667,5669,5670,5672],{},[618,5668,961],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[618,5671,2248],{}," interactions to work on this Decal.",[951,5674,5675],{},[618,5676,971],{},[933,5678,5679,5684,5687],{},[951,5680,5681],{},[1692,5682,5683],{},"baseSize",[951,5685,5686],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[951,5688,5689],{},[618,5690,1897],{},[933,5692,5693,5698,5701],{},[951,5694,5695],{},[1692,5696,5697],{},"baseOffset",[951,5699,5700],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[951,5702,5703],{},[618,5704,1909],{},[933,5706,5707,5711,5720],{},[951,5708,5709],{},[1692,5710,3119],{},[951,5712,5713,5714,5716,5717,5719],{},"Extra offset added per ",[618,5715,2315],{}," step on top of ",[618,5718,5697],{},". Increase if stacked decals still flicker.",[951,5721,5722],{},[618,5723,5724],{},"0.001",[933,5726,5727,5732,5748],{},[951,5728,5729],{},[1692,5730,5731],{},"cullThreshold",[951,5733,5734,5735,5738,5739,5744,5745,5747],{},"Drops projected triangles whose face normal makes an angle steeper than ",[618,5736,5737],{},"acos(threshold)"," with the projector. Mitigates ",[1140,5740,5743],{"href":5741,"rel":5742},"https://github.com/mrdoob/three.js/issues/21187",[1144],"#21187",". Pass ",[618,5746,965],{}," to disable.",[951,5749,5750],{},[618,5751,5752],{},"0.2",[933,5754,5755,5760,5763],{},[951,5756,5757],{},[1692,5758,5759],{},"edgeColor",[951,5761,5762],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[951,5764,5765],{},[618,5766,5767],{},"#0000ff",[504,5769,5771,5773],{"id":5770},"decal-events",[618,5772,2233],{}," events",[927,5775,5776,5786],{},[930,5777,5778],{},[933,5779,5780,5782,5784],{},[936,5781,1180],{},[936,5783,1183],{},[936,5785,941],{},[946,5787,5788,5803,5818,5832,5852,5870,5887],{},[933,5789,5790,5795,5800],{},[951,5791,5792],{},[618,5793,5794],{},"update:data",[951,5796,5797],{},[618,5798,5799],{},"DecalJsonEntry[]",[951,5801,5802],{},"v-model partner — fires whenever the JSON list changes.",[933,5804,5805,5810,5815],{},[951,5806,5807],{},[618,5808,5809],{},"add",[951,5811,5812],{},[618,5813,5814],{},"DecalEntry",[951,5816,5817],{},"A new decal has been committed (create mode → confirm).",[933,5819,5820,5825,5829],{},[951,5821,5822],{},[618,5823,5824],{},"update",[951,5826,5827],{},[618,5828,5814],{},[951,5830,5831],{},"An existing decal has been committed (update mode → confirm).",[933,5833,5834,5839,5843],{},[951,5835,5836],{},[618,5837,5838],{},"delete",[951,5840,5841],{},[618,5842,5814],{},[951,5844,5845,5846,3359,5849,5597],{},"A decal has been removed (delete button or ",[618,5847,5848],{},"Del",[618,5850,5851],{},"Backspace",[933,5853,5854,5859,5863],{},[951,5855,5856],{},[618,5857,5858],{},"select",[951,5860,5861],{},[618,5862,5814],{},[951,5864,5865,5866,5869],{},"Edition began on ",[618,5867,5868],{},"entry"," (panel click, 3D click, or programmatic).",[933,5871,5872,5877,5880],{},[951,5873,5874],{},[618,5875,5876],{},"cancel",[951,5878,5879],{},"—",[951,5881,5882,5883,5886],{},"Edition was aborted without commit (",[618,5884,5885],{},"Esc",", click-outside in create mode).",[933,5888,5889,5894,5899],{},[951,5890,5891],{},[618,5892,5893],{},"decalClick",[951,5895,5896],{},[618,5897,5898],{},"{ entry: DecalEntry, event: MouseEvent }",[951,5900,5901,5902,5904,5905,1146],{},"Fires on click of any stamped decal, even when ",[618,5903,3209],{}," is ",[618,5906,971],{},[504,5908,5910,5912,5913,3363],{"id":5909},"decal-exposed-via-ref",[618,5911,2233],{}," exposed (via ",[618,5914,5915],{},"ref",[614,5917,5918,5919,5922],{},"The template ref resolves to ",[618,5920,5921],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[626,5924,5926],{"className":1208,"code":5925,"language":664,"meta":576,"style":576},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[618,5927,5928,5949,5953],{"__ignoreMap":576},[637,5929,5930,5932,5934,5936,5939,5941,5943,5945,5947],{"class":639,"line":577},[637,5931,677],{"class":676},[637,5933,3465],{"class":676},[637,5935,680],{"class":642},[637,5937,5938],{"class":683}," DecalImperativeApi",[637,5940,693],{"class":642},[637,5942,696],{"class":676},[637,5944,699],{"class":642},[637,5946,702],{"class":663},[637,5948,705],{"class":642},[637,5950,5951],{"class":639,"line":578},[637,5952,742],{"emptyLinePlaceholder":594},[637,5954,5955,5957,5959,5961,5963,5965,5967,5969,5971,5973,5975,5977],{"class":639,"line":708},[637,5956,2438],{"class":650},[637,5958,3649],{"class":683},[637,5960,657],{"class":642},[637,5962,3895],{"class":2457},[637,5964,643],{"class":642},[637,5966,5921],{"class":1222},[637,5968,3668],{"class":642},[637,5970,3671],{"class":1222},[637,5972,3674],{"class":642},[637,5974,2460],{"class":683},[637,5976,3679],{"class":642},[637,5978,2471],{"class":683},[927,5980,5981,5993],{},[930,5982,5983],{},[933,5984,5985,5988,5991],{},[936,5986,5987],{},"Property",[936,5989,5990],{},"Type",[936,5992,941],{},[946,5994,5995,6013,6031,6049,6064],{},[933,5996,5997,6002,6007],{},[951,5998,5999],{},[618,6000,6001],{},"editor",[951,6003,6004],{},[618,6005,6006],{},"DecalEditorSession",[951,6008,6009,6010,1146],{},"The canvas-shared editor session. Pass it to ",[618,6011,6012],{},"\u003CDecalDebugUI :session>",[933,6014,6015,6020,6025],{},[951,6016,6017],{},[618,6018,6019],{},"beginEditById",[951,6021,6022],{},[618,6023,6024],{},"(id: string) => boolean",[951,6026,6027,6028,6030],{},"Programmatically start editing a specific decal. Returns ",[618,6029,971],{}," if the id is unknown.",[933,6032,6033,6038,6043],{},[951,6034,6035],{},[618,6036,6037],{},"commit",[951,6039,6040],{},[618,6041,6042],{},"() => void",[951,6044,6045,6046,5597],{},"Commit the in-flight edit (same as ",[618,6047,6048],{},"Enter",[933,6050,6051,6055,6059],{},[951,6052,6053],{},[618,6054,5876],{},[951,6056,6057],{},[618,6058,6042],{},[951,6060,6061,6062,5597],{},"Abort the in-flight edit (same as ",[618,6063,5885],{},[933,6065,6066,6071,6075],{},[951,6067,6068],{},[618,6069,6070],{},"remove",[951,6072,6073],{},[618,6074,6042],{},[951,6076,6077,6078,5597],{},"Delete the currently edited decal (same as ",[618,6079,5848],{},[504,6081,6083,5571],{"id":6082},"decaldebugui-props",[618,6084,2248],{},[927,6086,6087,6097],{},[930,6088,6089],{},[933,6090,6091,6093,6095],{},[936,6092,938],{},[936,6094,941],{},[936,6096,944],{},[946,6098,6099,6122,6147,6160,6180,6195,6218],{},[933,6100,6101,6105,6118],{},[951,6102,6103],{},[1692,6104,3758],{},[951,6106,6107,6110,6111,6113,6114,6117],{},[618,6108,6109],{},"DecalEditorSession | null"," — obtained from any ",[618,6112,2233],{}," ref via ",[618,6115,6116],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[951,6119,6120],{},[618,6121,3679],{},[933,6123,6124,6128,6142],{},[951,6125,6126],{},[1692,6127,3041],{},[951,6129,6130,6131,6134,6135,6138,6139,6141],{},"Mesh-name-keyed map of decal slices — ",[618,6132,6133],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[618,6136,6137],{},"\u003CTresMesh name=\"...\">"," whose child ",[618,6140,2233],{}," owns the slice.",[951,6143,6144],{},[618,6145,6146],{},"{}",[933,6148,6149,6153,6156],{},[951,6150,6151],{},[1692,6152,2976],{},[951,6154,6155],{},"The full texture palette shown in the dock's picker.",[951,6157,6158],{},[618,6159,3602],{},[933,6161,6162,6167,6176],{},[951,6163,6164],{},[1692,6165,6166],{},"theme",[951,6168,6169,5634,6172,6175],{},[618,6170,6171],{},"'light'",[618,6173,6174],{},"'dark'"," — overlay theme tokens.",[951,6177,6178],{},[618,6179,6171],{},[933,6181,6182,6187,6190],{},[951,6183,6184],{},[1692,6185,6186],{},"snapAngle",[951,6188,6189],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[951,6191,6192],{},[618,6193,6194],{},"15",[933,6196,6197,6202,6214],{},[951,6198,6199],{},[1692,6200,6201],{},"exportFilename",[951,6203,6204,6205,5744,6207,6209,6210,6213],{},"Filename for the built-in JSON download. When omitted, defaults to ",[618,6206,4202],{},[618,6208,3679],{}," to skip the auto-download (the ",[618,6211,6212],{},"@export"," event still fires).",[951,6215,6216],{},[618,6217,4202],{},[933,6219,6220,6224,6227],{},[951,6221,6222],{},[1692,6223,4129],{},[951,6225,6226],{},"Scope the overlay to the nearest positioned ancestor instead of pinning it to the viewport. Useful for embedding the editor inside a docs page or a bounded host stage.",[951,6228,6229],{},[618,6230,971],{},[504,6232,6234,5773],{"id":6233},"decaldebugui-events",[618,6235,2248],{},[927,6237,6238,6248],{},[930,6239,6240],{},[933,6241,6242,6244,6246],{},[936,6243,1180],{},[936,6245,1183],{},[936,6247,941],{},[946,6249,6250,6264],{},[933,6251,6252,6256,6261],{},[951,6253,6254],{},[618,6255,1216],{},[951,6257,6258],{},[618,6259,6260],{},"DecalLayout",[951,6262,6263],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[933,6265,6266,6270,6274],{},[951,6267,6268],{},[618,6269,677],{},[951,6271,6272],{},[618,6273,6260],{},[951,6275,6276],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[504,6278,6280],{"id":6279},"caveats","Caveats",[2236,6282,6283,6298,6315,6331],{},[2239,6284,6285,6286,6289,6290,6293,6294,6297],{},"✨ The overlay sits at ",[618,6287,6288],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1692,6291,6292],{},"above"," the canvas by default\n(",[618,6295,6296],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2239,6299,6300,6301,6303,6304,6307,6308,1695,6311,6314],{},"🎨 ",[618,6302,2248],{}," ships its own theme in a global stylesheet under the\n",[618,6305,6306],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[618,6309,6310],{},"--accent",[618,6312,6313],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2239,6316,6317,6318,6321,6322,6324,6325,6327,6328,6330],{},"🔶 Decals are ",[1692,6319,6320],{},"per-canvas"," — if you have multiple ",[618,6323,3220],{}," in your\napp, each one has its own independent session. Pair each ",[618,6326,2248],{},"\nwith the right ",[618,6329,3758],{}," (from one of the Decals inside that canvas).",[2239,6332,6333,6334,1146],{},"🧩 The parent mesh resolution defaults to the scene-graph parent. If your\nsetup needs a different target (e.g. a mesh referenced from outside the\nDecal's parent slot), pass ",[618,6335,6336],{},":mesh=\"meshRef\"",[504,6338,6340],{"id":6339},"limitations","Limitations",[2028,6342,6343,6357,6364,6407],{},[614,6344,6345,6346,6349,6350,3359,6352,3359,6354,6356],{},"Decal vertices are baked into the ",[1692,6347,6348],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[618,6351,4153],{},[618,6353,5650],{},[618,6355,5653],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[614,6358,6359,6360,6363],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1692,6361,6362],{},"not"," followed:",[2236,6365,6366,6379,6387,6394],{},[2239,6367,6368,6373,6374,1146],{},[1692,6369,6370],{},[618,6371,6372],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1140,6375,6378],{"href":6376,"rel":6377},"https://github.com/mrdoob/three.js/issues/7926",[1144],"three.js#7926",[2239,6380,6381,6386],{},[1692,6382,6383],{},[618,6384,6385],{},"morphAttributes"," on the parent are ignored.",[2239,6388,6389,6390,6393],{},"Direct mutations of the parent's ",[618,6391,6392],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2239,6395,6396,6397,6401,6402,6404,6405,1146],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1140,6398,6400],{"href":5741,"rel":6399},[1144],"three.js#21187",") —\nmitigated by the ",[618,6403,5731],{}," prop, default ",[618,6406,5752],{},[614,6408,6409,6411],{},[618,6410,2233],{}," warns once per parent mesh when it detects these conditions.",[504,6413,6415],{"id":6414},"keyboard-shortcuts","Keyboard shortcuts",[927,6417,6418,6428],{},[930,6419,6420],{},[933,6421,6422,6425],{},[936,6423,6424],{},"Shortcut",[936,6426,6427],{},"Action",[946,6429,6430,6439,6448,6460,6473,6486],{},[933,6431,6432,6436],{},[951,6433,6434],{},[618,6435,6048],{},[951,6437,6438],{},"Confirm the in-flight edit",[933,6440,6441,6445],{},[951,6442,6443],{},[618,6444,5885],{},[951,6446,6447],{},"Cancel (revert updates, drop pending placements)",[933,6449,6450,6457],{},[951,6451,6452,3359,6454],{},[618,6453,5848],{},[618,6455,6456],{},"⌫",[951,6458,6459],{},"Delete the edited decal (or cancel a create)",[933,6461,6462,6470],{},[951,6463,6464,3359,6467],{},[618,6465,6466],{},"⌘Z",[618,6468,6469],{},"Ctrl+Z",[951,6471,6472],{},"Undo",[933,6474,6475,6483],{},[951,6476,6477,3359,6480],{},[618,6478,6479],{},"⇧⌘Z",[618,6481,6482],{},"Ctrl+⇧Z",[951,6484,6485],{},"Redo",[933,6487,6488,6491],{},[951,6489,6490],{},"Click outside",[951,6492,6493],{},"Auto-commit an in-flight update; cancel a create",[504,6495,6497,6498,3363],{"id":6496},"programmatic-api-usedecaleditor","Programmatic API (",[618,6499,6500],{},"useDecalEditor",[614,6502,6503,6504,6506,6507,6509,6510,6512,6513,6515],{},"Skip ",[618,6505,2248],{}," entirely or augment it with custom panels —\n",[618,6508,2261],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[618,6511,3220],{}," (after at\nleast one ",[618,6514,2233],{}," has mounted).",[626,6517,6519],{"className":1208,"code":6518,"language":664,"meta":576,"style":576},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[618,6520,6521,6540,6544],{"__ignoreMap":576},[637,6522,6523,6525,6527,6530,6532,6534,6536,6538],{"class":639,"line":577},[637,6524,677],{"class":676},[637,6526,680],{"class":642},[637,6528,6529],{"class":683}," useDecalEditor",[637,6531,693],{"class":642},[637,6533,696],{"class":676},[637,6535,699],{"class":642},[637,6537,702],{"class":663},[637,6539,705],{"class":642},[637,6541,6542],{"class":639,"line":578},[637,6543,742],{"emptyLinePlaceholder":594},[637,6545,6546,6548,6550,6552,6554],{"class":639,"line":708},[637,6547,2438],{"class":650},[637,6549,3688],{"class":683},[637,6551,657],{"class":642},[637,6553,6529],{"class":2457},[637,6555,6556],{"class":683},"()\n",[614,6558,6559,6560,1695,6563,2511,6566,1695,6569,6572,6573,2511,6575,1695,6578,1695,6581,6584,6585,6588,6589,6592,6593,1695,6596,1695,6599,2511,6602,6605],{},"The session exposes reactive state (",[618,6561,6562],{},"editingEntry",[618,6564,6565],{},"editingMode",[618,6567,6568],{},"canUndo",[618,6570,6571],{},"canRedo",", …), by-id mutators (",[618,6574,6019],{},[618,6576,6577],{},"setZIndexById",[618,6579,6580],{},"setVisibilityById",[618,6582,6583],{},"removeById","), batched updates\n(",[618,6586,6587],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[618,6590,6591],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[618,6594,6595],{},"ensureTextureNames",[618,6597,6598],{},"getTextureName",[618,6600,6601],{},"getTextureAspect",[618,6603,6604],{},"invalidateDecalGeometry",") are exported alongside.",[5330,6607,5332,6608,6611,6615,6690,6694,6765,6781,6785,6821,6827,6831,6970,6974,7020,7023,7027,7041,7211,7215],{},[5334,6609,6610],{},"Full API reference",[4074,6612,6614],{"id":6613},"reactive-state","Reactive state",[626,6616,6618],{"className":1208,"code":6617,"language":664,"meta":576,"style":576},"session.editingEntry // ShallowRef\u003CDecalEntry | null>\nsession.editingMode // Ref\u003C'create' | 'update' | null>\nsession.lockedMeshUuid // Ref\u003Cstring | null>\nsession.hoveredEntry // ShallowRef\u003CDecalEntry | null>\nsession.canUndo // Ref\u003Cboolean>\nsession.canRedo // Ref\u003Cboolean>\n",[618,6619,6620,6632,6644,6656,6667,6679],{"__ignoreMap":576},[637,6621,6622,6624,6626,6629],{"class":639,"line":577},[637,6623,3758],{"class":683},[637,6625,1146],{"class":642},[637,6627,6628],{"class":683},"editingEntry ",[637,6630,6631],{"class":1231},"// ShallowRef\u003CDecalEntry | null>\n",[637,6633,6634,6636,6638,6641],{"class":639,"line":578},[637,6635,3758],{"class":683},[637,6637,1146],{"class":642},[637,6639,6640],{"class":683},"editingMode ",[637,6642,6643],{"class":1231},"// Ref\u003C'create' | 'update' | null>\n",[637,6645,6646,6648,6650,6653],{"class":639,"line":708},[637,6647,3758],{"class":683},[637,6649,1146],{"class":642},[637,6651,6652],{"class":683},"lockedMeshUuid ",[637,6654,6655],{"class":1231},"// Ref\u003Cstring | null>\n",[637,6657,6658,6660,6662,6665],{"class":639,"line":729},[637,6659,3758],{"class":683},[637,6661,1146],{"class":642},[637,6663,6664],{"class":683},"hoveredEntry ",[637,6666,6631],{"class":1231},[637,6668,6669,6671,6673,6676],{"class":639,"line":739},[637,6670,3758],{"class":683},[637,6672,1146],{"class":642},[637,6674,6675],{"class":683},"canUndo ",[637,6677,6678],{"class":1231},"// Ref\u003Cboolean>\n",[637,6680,6681,6683,6685,6688],{"class":639,"line":745},[637,6682,3758],{"class":683},[637,6684,1146],{"class":642},[637,6686,6687],{"class":683},"canRedo ",[637,6689,6678],{"class":1231},[4074,6691,6693],{"id":6692},"mutating-decals-by-id","Mutating decals by id",[626,6695,6697],{"className":1208,"code":6696,"language":664,"meta":576,"style":576},"session.beginEditById(id) // start editing a placed decal\nsession.setZIndexById(id, newZ) // reorder one decal\nsession.setVisibilityById(id, false) // hide / show\nsession.removeById(id) // delete\n",[618,6698,6699,6713,6732,6752],{"__ignoreMap":576},[637,6700,6701,6703,6705,6707,6710],{"class":639,"line":577},[637,6702,3758],{"class":683},[637,6704,1146],{"class":642},[637,6706,6019],{"class":2457},[637,6708,6709],{"class":683},"(id) ",[637,6711,6712],{"class":1231},"// start editing a placed decal\n",[637,6714,6715,6717,6719,6721,6724,6726,6729],{"class":639,"line":578},[637,6716,3758],{"class":683},[637,6718,1146],{"class":642},[637,6720,6577],{"class":2457},[637,6722,6723],{"class":683},"(id",[637,6725,687],{"class":642},[637,6727,6728],{"class":683}," newZ) ",[637,6730,6731],{"class":1231},"// reorder one decal\n",[637,6733,6734,6736,6738,6740,6742,6744,6747,6749],{"class":639,"line":708},[637,6735,3758],{"class":683},[637,6737,1146],{"class":642},[637,6739,6580],{"class":2457},[637,6741,6723],{"class":683},[637,6743,687],{"class":642},[637,6745,6746],{"class":4420}," false",[637,6748,4757],{"class":683},[637,6750,6751],{"class":1231},"// hide / show\n",[637,6753,6754,6756,6758,6760,6762],{"class":639,"line":729},[637,6755,3758],{"class":683},[637,6757,1146],{"class":642},[637,6759,6583],{"class":2457},[637,6761,6709],{"class":683},[637,6763,6764],{"class":1231},"// delete\n",[614,6766,6767,6768,6771,6772,6774,6775,6777,6778,6780],{},"When the targeted id matches the ",[1692,6769,6770],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[618,6773,6048],{},", reverted on ",[618,6776,5885],{},").\nOtherwise they update ",[618,6779,3041],{}," immediately and record history.",[4074,6782,6784],{"id":6783},"batched-mesh-updates","Batched mesh updates",[626,6786,6788],{"className":1208,"code":6787,"language":664,"meta":576,"style":576},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[618,6789,6790],{"__ignoreMap":576},[637,6791,6792,6794,6796,6798,6801,6803,6806,6808,6810,6813,6815,6817,6819],{"class":639,"line":577},[637,6793,3758],{"class":683},[637,6795,1146],{"class":642},[637,6797,6587],{"class":2457},[637,6799,6800],{"class":683},"(meshName",[637,6802,687],{"class":642},[637,6804,6805],{"class":683}," nextEntries",[637,6807,687],{"class":642},[637,6809,680],{"class":642},[637,6811,6812],{"class":646}," recordHistory",[637,6814,1240],{"class":642},[637,6816,4421],{"class":4420},[637,6818,693],{"class":642},[637,6820,2471],{"class":683},[614,6822,6823,6824,6826],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[618,6825,6577],{}," calls in the same tick.",[4074,6828,6830],{"id":6829},"listening-to-commits","Listening to commits",[626,6832,6834],{"className":1208,"code":6833,"language":664,"meta":576,"style":576},"const off = session.onCommit((entry, mode) => {\n console.log(mode, entry) // mode: 'create' | 'update'\n})\nsession.onDelete((entry) => { /* … */ })\nsession.onCancel(() => { /* … */ })\n\n// All return an unsubscribe function:\nonBeforeUnmount(off)\n",[618,6835,6836,6871,6896,6902,6930,6953,6957,6962],{"__ignoreMap":576},[637,6837,6838,6840,6843,6845,6848,6850,6853,6855,6857,6860,6862,6865,6867,6869],{"class":639,"line":577},[637,6839,2438],{"class":650},[637,6841,6842],{"class":683}," off ",[637,6844,657],{"class":642},[637,6846,6847],{"class":683}," session",[637,6849,1146],{"class":642},[637,6851,6852],{"class":2457},"onCommit",[637,6854,2460],{"class":683},[637,6856,2460],{"class":642},[637,6858,5868],{"class":6859},"sHdIc",[637,6861,687],{"class":642},[637,6863,6864],{"class":6859}," mode",[637,6866,3363],{"class":642},[637,6868,3700],{"class":650},[637,6870,1226],{"class":642},[637,6872,6873,6876,6878,6881,6883,6886,6888,6891,6893],{"class":639,"line":578},[637,6874,6875],{"class":683}," console",[637,6877,1146],{"class":642},[637,6879,6880],{"class":2457},"log",[637,6882,2460],{"class":646},[637,6884,6885],{"class":683},"mode",[637,6887,687],{"class":642},[637,6889,6890],{"class":683}," entry",[637,6892,4757],{"class":646},[637,6894,6895],{"class":1231},"// mode: 'create' | 'update'\n",[637,6897,6898,6900],{"class":639,"line":708},[637,6899,2451],{"class":642},[637,6901,2471],{"class":683},[637,6903,6904,6906,6908,6911,6913,6915,6917,6919,6921,6923,6926,6928],{"class":639,"line":729},[637,6905,3758],{"class":683},[637,6907,1146],{"class":642},[637,6909,6910],{"class":2457},"onDelete",[637,6912,2460],{"class":683},[637,6914,2460],{"class":642},[637,6916,5868],{"class":6859},[637,6918,3363],{"class":642},[637,6920,3700],{"class":650},[637,6922,680],{"class":642},[637,6924,6925],{"class":1231}," /* … */",[637,6927,693],{"class":642},[637,6929,2471],{"class":683},[637,6931,6932,6934,6936,6939,6941,6943,6945,6947,6949,6951],{"class":639,"line":739},[637,6933,3758],{"class":683},[637,6935,1146],{"class":642},[637,6937,6938],{"class":2457},"onCancel",[637,6940,2460],{"class":683},[637,6942,3697],{"class":642},[637,6944,3700],{"class":650},[637,6946,680],{"class":642},[637,6948,6925],{"class":1231},[637,6950,693],{"class":642},[637,6952,2471],{"class":683},[637,6954,6955],{"class":639,"line":745},[637,6956,742],{"emptyLinePlaceholder":594},[637,6958,6959],{"class":639,"line":755},[637,6960,6961],{"class":1231},"// All return an unsubscribe function:\n",[637,6963,6964,6967],{"class":639,"line":778},[637,6965,6966],{"class":2457},"onBeforeUnmount",[637,6968,6969],{"class":683},"(off)\n",[4074,6971,6973],{"id":6972},"undo-redo","Undo / redo",[626,6975,6977],{"className":1208,"code":6976,"language":664,"meta":576,"style":576},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[618,6978,6979,6994,7009],{"__ignoreMap":576},[637,6980,6981,6983,6985,6987,6989,6992],{"class":639,"line":577},[637,6982,3758],{"class":683},[637,6984,1146],{"class":642},[637,6986,6568],{"class":683},[637,6988,1146],{"class":642},[637,6990,6991],{"class":683},"value ",[637,6993,6678],{"class":1231},[637,6995,6996,6998,7000,7003,7006],{"class":639,"line":578},[637,6997,3758],{"class":683},[637,6999,1146],{"class":642},[637,7001,7002],{"class":2457},"undo",[637,7004,7005],{"class":683},"() ",[637,7007,7008],{"class":1231},"// returns true if something was undone\n",[637,7010,7011,7013,7015,7018],{"class":639,"line":708},[637,7012,3758],{"class":683},[637,7014,1146],{"class":642},[637,7016,7017],{"class":2457},"redo",[637,7019,6556],{"class":683},[614,7021,7022],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4074,7024,7026],{"id":7025},"power-user-external-entries","Power user — external entries",[614,7028,7029,7030,7032,7033,7036,7037,7040],{},"Plug a decal-like object that lives outside a ",[618,7031,2233],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[618,7034,7035],{},"DecalEntryActions"," bundle so the ",[618,7038,7039],{},"*ById"," session methods route to it:",[626,7042,7044],{"className":1208,"code":7043,"language":664,"meta":576,"style":576},"import type { DecalEntryActions } from '@tresjs/cientos'\n\nsession.registerDecalEntry('decal-7', {\n beginEdit: () => { /* … */ },\n setZIndex: (newZ) => { /* … */ },\n setVisibility: (visible) => { /* … */ },\n remove: () => { /* … */ },\n} satisfies DecalEntryActions)\nonBeforeUnmount(() => session.unregisterDecalEntry('decal-7'))\n",[618,7045,7046,7067,7071,7092,7111,7133,7155,7172,7183],{"__ignoreMap":576},[637,7047,7048,7050,7052,7054,7057,7059,7061,7063,7065],{"class":639,"line":577},[637,7049,677],{"class":676},[637,7051,3465],{"class":676},[637,7053,680],{"class":642},[637,7055,7056],{"class":683}," DecalEntryActions",[637,7058,693],{"class":642},[637,7060,696],{"class":676},[637,7062,699],{"class":642},[637,7064,702],{"class":663},[637,7066,705],{"class":642},[637,7068,7069],{"class":639,"line":578},[637,7070,742],{"emptyLinePlaceholder":594},[637,7072,7073,7075,7077,7079,7081,7083,7086,7088,7090],{"class":639,"line":708},[637,7074,3758],{"class":683},[637,7076,1146],{"class":642},[637,7078,6591],{"class":2457},[637,7080,2460],{"class":683},[637,7082,2463],{"class":642},[637,7084,7085],{"class":663},"decal-7",[637,7087,2463],{"class":642},[637,7089,687],{"class":642},[637,7091,1226],{"class":642},[637,7093,7094,7097,7099,7102,7104,7106,7108],{"class":639,"line":729},[637,7095,7096],{"class":2457}," beginEdit",[637,7098,1240],{"class":642},[637,7100,7101],{"class":642}," ()",[637,7103,3700],{"class":650},[637,7105,680],{"class":642},[637,7107,6925],{"class":1231},[637,7109,7110],{"class":642}," },\n",[637,7112,7113,7116,7118,7120,7123,7125,7127,7129,7131],{"class":639,"line":739},[637,7114,7115],{"class":2457}," setZIndex",[637,7117,1240],{"class":642},[637,7119,3097],{"class":642},[637,7121,7122],{"class":6859},"newZ",[637,7124,3363],{"class":642},[637,7126,3700],{"class":650},[637,7128,680],{"class":642},[637,7130,6925],{"class":1231},[637,7132,7110],{"class":642},[637,7134,7135,7138,7140,7142,7145,7147,7149,7151,7153],{"class":639,"line":745},[637,7136,7137],{"class":2457}," setVisibility",[637,7139,1240],{"class":642},[637,7141,3097],{"class":642},[637,7143,7144],{"class":6859},"visible",[637,7146,3363],{"class":642},[637,7148,3700],{"class":650},[637,7150,680],{"class":642},[637,7152,6925],{"class":1231},[637,7154,7110],{"class":642},[637,7156,7157,7160,7162,7164,7166,7168,7170],{"class":639,"line":755},[637,7158,7159],{"class":2457}," remove",[637,7161,1240],{"class":642},[637,7163,7101],{"class":642},[637,7165,3700],{"class":650},[637,7167,680],{"class":642},[637,7169,6925],{"class":1231},[637,7171,7110],{"class":642},[637,7173,7174,7176,7179,7181],{"class":639,"line":778},[637,7175,2451],{"class":642},[637,7177,7178],{"class":676}," satisfies",[637,7180,7056],{"class":1222},[637,7182,2471],{"class":683},[637,7184,7185,7187,7189,7191,7193,7195,7197,7200,7202,7204,7206,7208],{"class":639,"line":790},[637,7186,6966],{"class":2457},[637,7188,2460],{"class":683},[637,7190,3697],{"class":642},[637,7192,3700],{"class":650},[637,7194,6847],{"class":683},[637,7196,1146],{"class":642},[637,7198,7199],{"class":2457},"unregisterDecalEntry",[637,7201,2460],{"class":683},[637,7203,2463],{"class":642},[637,7205,7085],{"class":663},[637,7207,2463],{"class":642},[637,7209,7210],{"class":683},"))\n",[4074,7212,7214],{"id":7213},"helper-utilities","Helper utilities",[927,7216,7217,7226],{},[930,7218,7219],{},[933,7220,7221,7223],{},[936,7222,315],{},[936,7224,7225],{},"Use",[946,7227,7228,7248,7260,7273],{},[933,7229,7230,7235],{},[951,7231,7232],{},[618,7233,7234],{},"ensureTextureNames(textures)",[951,7236,7237,7238,7240,7241,7244,7245,1146],{},"Back-fills ",[618,7239,3000],{}," from ",[618,7242,7243],{},"userData.name"," or the filename in ",[618,7246,7247],{},"image.src",[933,7249,7250,7255],{},[951,7251,7252],{},[618,7253,7254],{},"getTextureName(texture)",[951,7256,7257,7258,1146],{},"Single-texture variant — returns a stable name or ",[618,7259,3679],{},[933,7261,7262,7267],{},[951,7263,7264],{},[618,7265,7266],{},"getTextureAspect(texture)",[951,7268,7269,7272],{},[618,7270,7271],{},"{ x, y }"," aspect ratio for custom-sized decals.",[933,7274,7275,7280],{},[951,7276,7277],{},[618,7278,7279],{},"invalidateDecalGeometry(mesh)",[951,7281,7282],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1349,7284,7285],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":7287},[7288,7289,7290,7291,7292,7296,7297,7305,7306,7308,7310,7312,7314,7316,7317,7318,7319],{"id":624,"depth":578,"text":15},{"id":2813,"depth":578,"text":2814},{"id":3008,"depth":578,"text":2282},{"id":3105,"depth":578,"text":3106},{"id":3200,"depth":578,"text":7293,"children":7294},"Editable mode + \u003CDecalDebugUI>",[7295],{"id":4076,"depth":708,"text":4077},{"id":4196,"depth":578,"text":3402},{"id":4295,"depth":578,"text":7298,"children":7299},"Targeting a loaded model (.glb)",[7300,7302,7304],{"id":4322,"depth":708,"text":7301},"When :object is a Mesh",{"id":4544,"depth":708,"text":7303},"When :object is a Group",{"id":4885,"depth":708,"text":4886},{"id":5311,"depth":578,"text":5312},{"id":5568,"depth":578,"text":7307},"\u003CDecal> props",{"id":5770,"depth":578,"text":7309},"\u003CDecal> events",{"id":5909,"depth":578,"text":7311},"\u003CDecal> exposed (via ref)",{"id":6082,"depth":578,"text":7313},"\u003CDecalDebugUI> props",{"id":6233,"depth":578,"text":7315},"\u003CDecalDebugUI> events",{"id":6279,"depth":578,"text":6280},{"id":6339,"depth":578,"text":6340},{"id":6414,"depth":578,"text":6415},{"id":6496,"depth":578,"text":7320},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7321},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7326,"title":57,"body":7327,"description":7615,"extension":591,"links":592,"meta":7616,"navigation":594,"path":58,"seo":7617,"stem":59,"__hash__":7618},"docs/2.api/1.abstractions/edges.md",{"type":501,"value":7328,"toc":7611},[7329,7334,7350,7352,7529,7531,7548,7609],[608,7330,7331],{},[7332,7333],"abstractions-edges",{},[614,7335,2799,7336,7339,7340,7345,7346,7349],{},[618,7337,7338],{},"cientos"," package provides an abstraction of ",[1140,7341,7344],{"href":7342,"rel":7343},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1144],"EdgesGeometry"," from Three.js, ",[618,7347,7348],{},"\u003CEdges>"," is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations.",[504,7351,15],{"id":624},[626,7353,7356],{"className":628,"code":7354,"highlights":7355,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Box, Edges, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n \u003COrbitControls />\n \u003CBox>\n \u003CTresMeshBasicMaterial />\n \u003CEdges />\n \u003C/Box>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,827],[618,7357,7358,7378,7396,7424,7432,7436,7444,7452,7471,7479,7487,7496,7505,7513,7521],{"__ignoreMap":576},[637,7359,7360,7362,7364,7366,7368,7370,7372,7374,7376],{"class":639,"line":577},[637,7361,643],{"class":642},[637,7363,647],{"class":646},[637,7365,651],{"class":650},[637,7367,654],{"class":650},[637,7369,657],{"class":642},[637,7371,660],{"class":642},[637,7373,664],{"class":663},[637,7375,660],{"class":642},[637,7377,669],{"class":642},[637,7379,7380,7382,7384,7386,7388,7390,7392,7394],{"class":639,"line":578},[637,7381,677],{"class":676},[637,7383,680],{"class":642},[637,7385,715],{"class":683},[637,7387,693],{"class":642},[637,7389,696],{"class":676},[637,7391,699],{"class":642},[637,7393,724],{"class":663},[637,7395,705],{"class":642},[637,7397,7399,7401,7403,7405,7407,7410,7412,7414,7416,7418,7420,7422],{"class":7398,"line":708},[639,673],[637,7400,677],{"class":676},[637,7402,680],{"class":642},[637,7404,1420],{"class":683},[637,7406,687],{"class":642},[637,7408,7409],{"class":683}," Edges",[637,7411,687],{"class":642},[637,7413,690],{"class":683},[637,7415,693],{"class":642},[637,7417,696],{"class":676},[637,7419,699],{"class":642},[637,7421,702],{"class":663},[637,7423,705],{"class":642},[637,7425,7426,7428,7430],{"class":639,"line":729},[637,7427,732],{"class":642},[637,7429,647],{"class":646},[637,7431,669],{"class":642},[637,7433,7434],{"class":639,"line":739},[637,7435,742],{"emptyLinePlaceholder":594},[637,7437,7438,7440,7442],{"class":639,"line":745},[637,7439,643],{"class":642},[637,7441,750],{"class":646},[637,7443,669],{"class":642},[637,7445,7446,7448,7450],{"class":639,"line":755},[637,7447,758],{"class":642},[637,7449,761],{"class":646},[637,7451,669],{"class":642},[637,7453,7454,7456,7458,7460,7462,7464,7467,7469],{"class":639,"line":778},[637,7455,781],{"class":642},[637,7457,784],{"class":646},[637,7459,1508],{"class":650},[637,7461,657],{"class":642},[637,7463,660],{"class":642},[637,7465,7466],{"class":663},"[0, 2, 5]",[637,7468,660],{"class":642},[637,7470,787],{"class":642},[637,7472,7473,7475,7477],{"class":639,"line":790},[637,7474,781],{"class":642},[637,7476,795],{"class":646},[637,7478,787],{"class":642},[637,7480,7481,7483,7485],{"class":639,"line":800},[637,7482,781],{"class":642},[637,7484,217],{"class":646},[637,7486,669],{"class":642},[637,7488,7489,7491,7494],{"class":639,"line":805},[637,7490,853],{"class":642},[637,7492,7493],{"class":646},"TresMeshBasicMaterial",[637,7495,787],{"class":642},[637,7497,7499,7501,7503],{"class":7498,"line":827},[639,673],[637,7500,853],{"class":642},[637,7502,57],{"class":646},[637,7504,787],{"class":642},[637,7506,7507,7509,7511],{"class":639,"line":631},[637,7508,895],{"class":642},[637,7510,217],{"class":646},[637,7512,669],{"class":642},[637,7514,7515,7517,7519],{"class":639,"line":850},[637,7516,905],{"class":642},[637,7518,761],{"class":646},[637,7520,669],{"class":642},[637,7522,7523,7525,7527],{"class":639,"line":861},[637,7524,732],{"class":642},[637,7526,750],{"class":646},[637,7528,669],{"class":642},[504,7530,922],{"id":921},[614,7532,7533,7535,7536,7541,7542,7547],{},[618,7534,7348],{}," is based on ",[1140,7537,7540],{"href":7538,"rel":7539},"https://threejs.org/docs/#api/en/objects/LineSegments",[1144],"LineSegments"," & ",[1140,7543,7546],{"href":7544,"rel":7545},"https://threejs.org/docs/#api/en/objects/Line",[1144],"Line"," and supports all of its props.",[927,7549,7550,7560],{},[930,7551,7552],{},[933,7553,7554,7556,7558],{},[936,7555,938],{"align":997},[936,7557,941],{"align":997},[936,7559,944],{},[946,7561,7562,7593],{},[933,7563,7564,7569,7588],{},[951,7565,7566],{"align":997},[1692,7567,7568],{},"color",[951,7570,7571,7574,7575,7578,7579,2290,7584],{"align":997},[618,7572,7573],{},"THREE.Color"," — Color of the edges. ",[7576,7577],"br",{}," More informations : ",[1140,7580,7583],{"href":7581,"rel":7582},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1144],"TresColor",[1140,7585,7573],{"href":7586,"rel":7587},"https://threejs.org/docs/#api/en/math/Color",[1144],[951,7589,7590],{},[618,7591,7592],{},"#ff0000",[933,7594,7595,7600,7605],{},[951,7596,7597],{"align":997},[1692,7598,7599],{},"threshold",[951,7601,7602,7604],{"align":997},[618,7603,5375],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[951,7606,7607],{},[618,7608,1897],{},[1349,7610,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":7612},[7613,7614],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7615},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7620,"title":61,"body":7621,"description":8240,"extension":591,"links":592,"meta":8241,"navigation":594,"path":62,"seo":8242,"stem":63,"__hash__":8243},"docs/2.api/1.abstractions/fit.md",{"type":501,"value":7622,"toc":8236},[7623,7628,7634,7644,7650,7652,8100,8102,8233],[2318,7624,7625],{},[7626,7627],"abstractions-fit",{},[614,7629,7630,7633],{},[618,7631,7632],{},"\u003CFit />"," uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.",[614,7635,7636,7637,7640,7641,1146],{},"Alternatively, the children can be fit into a ",[618,7638,7639],{},"Box3"," or an ",[618,7642,7643],{},"Object3D",[614,7645,7646,7647,7649],{},"Or the children can simply be resized. With ",[618,7648,7632],{}," the children are scaled relative to the center of their calculated bounding box.",[504,7651,15],{"id":624},[626,7653,7656],{"className":628,"code":7654,"highlights":7655,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fit, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { BoxGeometry, MeshNormalMaterial } from 'three'\n\nconst positions: number[][] = []\nfor (let y = 100; y \u003C= 120; y += 10) {\n for (let x = 100; x \u003C= 120; x += 10) {\n positions.push([x, y, 9999])\n }\n}\nconst geom = new BoxGeometry()\nconst mat = new MeshNormalMaterial()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4F4F4F\">\n \u003CTresPerspectiveCamera :position=\"[1, 1, 1]\" />\n \u003COrbitControls />\n \u003CFit>\n \u003CTresMesh\n v-for=\"(pos, index) in positions\"\n :key=\"index\"\n :position=\"pos\"\n :args=\"[geom, mat]\"\n />\n \u003C/Fit>\n \u003CTresGridHelper :args=\"[1, 1]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,912,2726],[618,7657,7658,7678,7702,7720,7744,7748,7767,7809,7847,7874,7879,7883,7899,7914,7922,7926,7934,7953,7971,7979,7988,7994,8008,8022,8036,8050,8055,8064,8084,8092],{"__ignoreMap":576},[637,7659,7660,7662,7664,7666,7668,7670,7672,7674,7676],{"class":639,"line":577},[637,7661,643],{"class":642},[637,7663,647],{"class":646},[637,7665,651],{"class":650},[637,7667,654],{"class":650},[637,7669,657],{"class":642},[637,7671,660],{"class":642},[637,7673,664],{"class":663},[637,7675,660],{"class":642},[637,7677,669],{"class":642},[637,7679,7681,7683,7685,7688,7690,7692,7694,7696,7698,7700],{"class":7680,"line":578},[639,673],[637,7682,677],{"class":676},[637,7684,680],{"class":642},[637,7686,7687],{"class":683}," Fit",[637,7689,687],{"class":642},[637,7691,690],{"class":683},[637,7693,693],{"class":642},[637,7695,696],{"class":676},[637,7697,699],{"class":642},[637,7699,702],{"class":663},[637,7701,705],{"class":642},[637,7703,7704,7706,7708,7710,7712,7714,7716,7718],{"class":639,"line":708},[637,7705,677],{"class":676},[637,7707,680],{"class":642},[637,7709,715],{"class":683},[637,7711,693],{"class":642},[637,7713,696],{"class":676},[637,7715,699],{"class":642},[637,7717,724],{"class":663},[637,7719,705],{"class":642},[637,7721,7722,7724,7726,7729,7731,7734,7736,7738,7740,7742],{"class":639,"line":729},[637,7723,677],{"class":676},[637,7725,680],{"class":642},[637,7727,7728],{"class":683}," BoxGeometry",[637,7730,687],{"class":642},[637,7732,7733],{"class":683}," MeshNormalMaterial",[637,7735,693],{"class":642},[637,7737,696],{"class":676},[637,7739,699],{"class":642},[637,7741,4649],{"class":663},[637,7743,705],{"class":642},[637,7745,7746],{"class":639,"line":739},[637,7747,742],{"emptyLinePlaceholder":594},[637,7749,7750,7752,7755,7757,7759,7762,7764],{"class":639,"line":745},[637,7751,2438],{"class":650},[637,7753,7754],{"class":683}," positions",[637,7756,1240],{"class":642},[637,7758,5380],{"class":1222},[637,7760,7761],{"class":683},"[][] ",[637,7763,657],{"class":642},[637,7765,7766],{"class":683}," []\n",[637,7768,7769,7772,7774,7777,7780,7782,7785,7787,7789,7792,7795,7797,7799,7802,7805,7807],{"class":639,"line":755},[637,7770,7771],{"class":676},"for",[637,7773,3097],{"class":683},[637,7775,7776],{"class":650},"let",[637,7778,7779],{"class":683}," y ",[637,7781,657],{"class":642},[637,7783,7784],{"class":2524}," 100",[637,7786,4161],{"class":642},[637,7788,7779],{"class":683},[637,7790,7791],{"class":642},"\u003C=",[637,7793,7794],{"class":2524}," 120",[637,7796,4161],{"class":642},[637,7798,7779],{"class":683},[637,7800,7801],{"class":642},"+=",[637,7803,7804],{"class":2524}," 10",[637,7806,4757],{"class":683},[637,7808,3283],{"class":642},[637,7810,7811,7814,7816,7818,7821,7823,7825,7827,7829,7832,7834,7836,7838,7841,7843,7845],{"class":639,"line":778},[637,7812,7813],{"class":676}," for",[637,7815,3097],{"class":646},[637,7817,7776],{"class":650},[637,7819,7820],{"class":683}," x",[637,7822,2454],{"class":642},[637,7824,7784],{"class":2524},[637,7826,4161],{"class":642},[637,7828,7820],{"class":683},[637,7830,7831],{"class":642}," \u003C=",[637,7833,7794],{"class":2524},[637,7835,4161],{"class":642},[637,7837,7820],{"class":683},[637,7839,7840],{"class":642}," +=",[637,7842,7804],{"class":2524},[637,7844,4757],{"class":646},[637,7846,3283],{"class":642},[637,7848,7849,7852,7854,7857,7859,7862,7864,7867,7869,7872],{"class":639,"line":790},[637,7850,7851],{"class":683}," positions",[637,7853,1146],{"class":642},[637,7855,7856],{"class":2457},"push",[637,7858,3552],{"class":646},[637,7860,7861],{"class":683},"x",[637,7863,687],{"class":642},[637,7865,7866],{"class":683}," y",[637,7868,687],{"class":642},[637,7870,7871],{"class":2524}," 9999",[637,7873,2625],{"class":646},[637,7875,7876],{"class":639,"line":800},[637,7877,7878],{"class":642}," }\n",[637,7880,7881],{"class":639,"line":805},[637,7882,1347],{"class":642},[637,7884,7885,7887,7890,7892,7895,7897],{"class":639,"line":827},[637,7886,2438],{"class":650},[637,7888,7889],{"class":683}," geom ",[637,7891,657],{"class":642},[637,7893,7894],{"class":642}," new",[637,7896,7728],{"class":2457},[637,7898,6556],{"class":683},[637,7900,7901,7903,7906,7908,7910,7912],{"class":639,"line":631},[637,7902,2438],{"class":650},[637,7904,7905],{"class":683}," mat ",[637,7907,657],{"class":642},[637,7909,7894],{"class":642},[637,7911,7733],{"class":2457},[637,7913,6556],{"class":683},[637,7915,7916,7918,7920],{"class":639,"line":850},[637,7917,732],{"class":642},[637,7919,647],{"class":646},[637,7921,669],{"class":642},[637,7923,7924],{"class":639,"line":861},[637,7925,742],{"emptyLinePlaceholder":594},[637,7927,7928,7930,7932],{"class":639,"line":872},[637,7929,643],{"class":642},[637,7931,750],{"class":646},[637,7933,669],{"class":642},[637,7935,7936,7938,7940,7942,7944,7946,7949,7951],{"class":639,"line":882},[637,7937,758],{"class":642},[637,7939,761],{"class":646},[637,7941,764],{"class":650},[637,7943,657],{"class":642},[637,7945,660],{"class":642},[637,7947,7948],{"class":663},"#4F4F4F",[637,7950,660],{"class":642},[637,7952,669],{"class":642},[637,7954,7955,7957,7959,7961,7963,7965,7967,7969],{"class":639,"line":632},[637,7956,781],{"class":642},[637,7958,784],{"class":646},[637,7960,1508],{"class":650},[637,7962,657],{"class":642},[637,7964,660],{"class":642},[637,7966,1989],{"class":663},[637,7968,660],{"class":642},[637,7970,787],{"class":642},[637,7972,7973,7975,7977],{"class":639,"line":902},[637,7974,781],{"class":642},[637,7976,795],{"class":646},[637,7978,787],{"class":642},[637,7980,7982,7984,7986],{"class":7981,"line":912},[639,673],[637,7983,781],{"class":642},[637,7985,61],{"class":646},[637,7987,669],{"class":642},[637,7989,7990,7992],{"class":639,"line":2648},[637,7991,853],{"class":642},[637,7993,5149],{"class":646},[637,7995,7996,7999,8001,8003,8006],{"class":639,"line":2657},[637,7997,7998],{"class":650}," v-for",[637,8000,657],{"class":642},[637,8002,660],{"class":642},[637,8004,8005],{"class":663},"(pos, index) in positions",[637,8007,3154],{"class":642},[637,8009,8010,8013,8015,8017,8020],{"class":639,"line":2677},[637,8011,8012],{"class":650}," :key",[637,8014,657],{"class":642},[637,8016,660],{"class":642},[637,8018,8019],{"class":663},"index",[637,8021,3154],{"class":642},[637,8023,8024,8027,8029,8031,8034],{"class":639,"line":2686},[637,8025,8026],{"class":650}," :position",[637,8028,657],{"class":642},[637,8030,660],{"class":642},[637,8032,8033],{"class":663},"pos",[637,8035,3154],{"class":642},[637,8037,8038,8041,8043,8045,8048],{"class":639,"line":2695},[637,8039,8040],{"class":650}," :args",[637,8042,657],{"class":642},[637,8044,660],{"class":642},[637,8046,8047],{"class":663},"[geom, mat]",[637,8049,3154],{"class":642},[637,8051,8052],{"class":639,"line":2704},[637,8053,8054],{"class":642}," />\n",[637,8056,8058,8060,8062],{"class":8057,"line":2726},[639,673],[637,8059,895],{"class":642},[637,8061,61],{"class":646},[637,8063,669],{"class":642},[637,8065,8066,8068,8071,8073,8075,8077,8080,8082],{"class":639,"line":2770},[637,8067,781],{"class":642},[637,8069,8070],{"class":646},"TresGridHelper",[637,8072,1982],{"class":650},[637,8074,657],{"class":642},[637,8076,660],{"class":642},[637,8078,8079],{"class":663},"[1, 1]",[637,8081,660],{"class":642},[637,8083,787],{"class":642},[637,8085,8086,8088,8090],{"class":639,"line":2779},[637,8087,905],{"class":642},[637,8089,761],{"class":646},[637,8091,669],{"class":642},[637,8093,8094,8096,8098],{"class":639,"line":2788},[637,8095,732],{"class":642},[637,8097,750],{"class":646},[637,8099,669],{"class":642},[504,8101,922],{"id":921},[927,8103,8104,8113],{},[930,8105,8106],{},[933,8107,8108,8111],{},[936,8109,8110],{"align":997},"Name",[936,8112,941],{"align":997},[946,8114,8115,8209],{},[933,8116,8117,8122],{},[951,8118,8119],{"align":997},[1692,8120,8121],{},"into",[951,8123,958,8124,8126,8127,8201,8203,8204,8206],{"align":997},[618,8125,8121],{}," is:",[2236,8128,8129,8138,8146,8154,8162,8173,8180],{},[2239,8130,8131,8132,8134,8135,8137],{},"omitted or explicitly ",[618,8133,1167],{},": position/scale children to fit into a 1 × 1 × 1 ",[618,8136,7639],{}," at world origin.",[2239,8139,8140,8142,8143,8145],{},[618,8141,3679],{},": turn off ",[618,8144,7632],{},"; reset scale/position of children.",[2239,8147,8148,8150,8151,1146],{},[618,8149,5375],{},": convert argument to ",[618,8152,8153],{},"Vector3(number, number, number)",[2239,8155,8156,8150,8159,1146],{},[618,8157,8158],{},"[number, number, number]",[618,8160,8161],{},"Vector3",[2239,8163,8164,8166,8167,8169,8170,8172],{},[618,8165,8161],{},": position/scale children to fit inside a ",[618,8168,7639],{}," of size ",[618,8171,8161],{}," at target objects' cumulative center.",[2239,8174,8175,8177,8178,1146],{},[618,8176,7639],{},": position/scale children to fit inside ",[618,8179,7639],{},[2239,8181,8182,8184,8185,8187,8188,8187,8195,8197,8198,8200],{},[618,8183,7643],{},": position/scale children to fit inside calculated ",[618,8186,7639],{},". ",[1140,8189,1138,8192],{"href":8190,"rel":8191},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1144],[618,8193,8194],{},"THREE.Box3.setFromObject",[618,8196,7632],{}," must not contain the ",[618,8199,7643],{}," and vice-versa.",[7576,8202],{},"default:",[7576,8205],{},[618,8207,8208],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[933,8210,8211,8215],{},[951,8212,8213],{"align":997},[1692,8214,1135],{},[951,8216,8217,8225,8227,8203,8229,8231],{"align":997},[1140,8218,1138,8220,8222,8223],{"href":1142,"rel":8219},[1144],[618,8221,1135],{}," argument in ",[618,8224,8194],{},[7576,8226],{},[7576,8228],{},[7576,8230],{},[618,8232,971],{},[1349,8234,8235],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":8237},[8238,8239],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8240},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8245,"title":65,"body":8246,"description":9465,"extension":591,"links":592,"meta":9466,"navigation":594,"path":66,"seo":9467,"stem":67,"__hash__":9468},"docs/2.api/1.abstractions/instances.md",{"type":501,"value":8247,"toc":9451},[8248,8253,8275,8292,8294,8702,8714,8718,8730,8799,8803,8806,8863,8867,8870,8883,8886,8890,8893,8968,8972,8987,9057,9085,9092,9096,9105,9155,9158,9162,9165,9183,9189,9192,9232,9248,9250,9253,9339,9348,9350,9429,9439,9448],[608,8249,8250],{},[8251,8252],"abstractions-instances",{},[614,8254,8255,8256,8259,8260,3086,8263,8266,8267,8270,8271,8274],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[618,8257,8258],{},"\u003CInstances />"," owns a single ",[618,8261,8262],{},"THREE.InstancedMesh",[618,8264,8265],{},"\u003CInstance />"," is a\nplaceholder that registers itself with it, so a ",[618,8268,8269],{},"v-for"," of a thousand nodes costs ",[1692,8272,8273],{},"one"," drawcall.",[614,8276,8277,8278,8280,8281,8283,8284,8287,8288,8291],{},"An ",[618,8279,8265],{}," behaves like any other node in the graph: give it ",[618,8282,4153],{},", nest it under a\ngroup, animate that group, toggle it with ",[618,8285,8286],{},"v-if",", listen for ",[618,8289,8290],{},"@click"," on one of them.",[504,8293,15],{"id":624},[626,8295,8298],{"className":628,"code":8296,"highlights":8297,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Instance, Instances } from '@tresjs/cientos'\nimport { BoxGeometry, MeshStandardMaterial } from 'three'\n\nconst geometry = new BoxGeometry(0.35, 0.35, 0.35)\nconst material = new MeshStandardMaterial()\n\nconst cubes = Array.from({ length: 900 }, (_, i) => [i % 30 - 15, 0, Math.floor(i / 30) - 15])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[14, 10, 14]\" />\n \u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003CInstance\n v-for=\"(position, i) in cubes\"\n :key=\"i\"\n :position=\"position\"\n color=\"#38bdf8\"\n />\n \u003C/Instances>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,850,872,882,632,902,912,2648],[618,8299,8300,8320,8338,8363,8386,8390,8419,8434,8438,8531,8539,8543,8551,8559,8579,8609,8617,8631,8645,8658,8673,8678,8686,8694],{"__ignoreMap":576},[637,8301,8302,8304,8306,8308,8310,8312,8314,8316,8318],{"class":639,"line":577},[637,8303,643],{"class":642},[637,8305,647],{"class":646},[637,8307,651],{"class":650},[637,8309,654],{"class":650},[637,8311,657],{"class":642},[637,8313,660],{"class":642},[637,8315,664],{"class":663},[637,8317,660],{"class":642},[637,8319,669],{"class":642},[637,8321,8322,8324,8326,8328,8330,8332,8334,8336],{"class":639,"line":578},[637,8323,677],{"class":676},[637,8325,680],{"class":642},[637,8327,715],{"class":683},[637,8329,693],{"class":642},[637,8331,696],{"class":676},[637,8333,699],{"class":642},[637,8335,724],{"class":663},[637,8337,705],{"class":642},[637,8339,8341,8343,8345,8348,8350,8353,8355,8357,8359,8361],{"class":8340,"line":708},[639,673],[637,8342,677],{"class":676},[637,8344,680],{"class":642},[637,8346,8347],{"class":683}," Instance",[637,8349,687],{"class":642},[637,8351,8352],{"class":683}," Instances",[637,8354,693],{"class":642},[637,8356,696],{"class":676},[637,8358,699],{"class":642},[637,8360,702],{"class":663},[637,8362,705],{"class":642},[637,8364,8365,8367,8369,8371,8373,8376,8378,8380,8382,8384],{"class":639,"line":729},[637,8366,677],{"class":676},[637,8368,680],{"class":642},[637,8370,7728],{"class":683},[637,8372,687],{"class":642},[637,8374,8375],{"class":683}," MeshStandardMaterial",[637,8377,693],{"class":642},[637,8379,696],{"class":676},[637,8381,699],{"class":642},[637,8383,4649],{"class":663},[637,8385,705],{"class":642},[637,8387,8388],{"class":639,"line":739},[637,8389,742],{"emptyLinePlaceholder":594},[637,8391,8392,8394,8397,8399,8401,8403,8405,8408,8410,8413,8415,8417],{"class":639,"line":745},[637,8393,2438],{"class":650},[637,8395,8396],{"class":683}," geometry ",[637,8398,657],{"class":642},[637,8400,7894],{"class":642},[637,8402,7728],{"class":2457},[637,8404,2460],{"class":683},[637,8406,8407],{"class":2524},"0.35",[637,8409,687],{"class":642},[637,8411,8412],{"class":2524}," 0.35",[637,8414,687],{"class":642},[637,8416,8412],{"class":2524},[637,8418,2471],{"class":683},[637,8420,8421,8423,8426,8428,8430,8432],{"class":639,"line":755},[637,8422,2438],{"class":650},[637,8424,8425],{"class":683}," material ",[637,8427,657],{"class":642},[637,8429,7894],{"class":642},[637,8431,8375],{"class":2457},[637,8433,6556],{"class":683},[637,8435,8436],{"class":639,"line":778},[637,8437,742],{"emptyLinePlaceholder":594},[637,8439,8440,8442,8445,8447,8450,8452,8455,8457,8460,8463,8465,8468,8471,8473,8476,8478,8481,8483,8485,8488,8491,8494,8497,8500,8502,8504,8506,8509,8511,8514,8517,8520,8522,8524,8527,8529],{"class":639,"line":790},[637,8441,2438],{"class":650},[637,8443,8444],{"class":683}," cubes ",[637,8446,657],{"class":642},[637,8448,8449],{"class":683}," Array",[637,8451,1146],{"class":642},[637,8453,8454],{"class":2457},"from",[637,8456,2460],{"class":683},[637,8458,8459],{"class":642},"{",[637,8461,8462],{"class":646}," length",[637,8464,1240],{"class":642},[637,8466,8467],{"class":2524}," 900",[637,8469,8470],{"class":642}," },",[637,8472,3097],{"class":642},[637,8474,8475],{"class":6859},"_",[637,8477,687],{"class":642},[637,8479,8480],{"class":6859}," i",[637,8482,3363],{"class":642},[637,8484,3700],{"class":650},[637,8486,8487],{"class":683}," [i ",[637,8489,8490],{"class":642},"%",[637,8492,8493],{"class":2524}," 30",[637,8495,8496],{"class":642}," -",[637,8498,8499],{"class":2524}," 15",[637,8501,687],{"class":642},[637,8503,2529],{"class":2524},[637,8505,687],{"class":642},[637,8507,8508],{"class":683}," Math",[637,8510,1146],{"class":642},[637,8512,8513],{"class":2457},"floor",[637,8515,8516],{"class":683},"(i ",[637,8518,8519],{"class":642},"/",[637,8521,8493],{"class":2524},[637,8523,4757],{"class":683},[637,8525,8526],{"class":642},"-",[637,8528,8499],{"class":2524},[637,8530,2625],{"class":683},[637,8532,8533,8535,8537],{"class":639,"line":800},[637,8534,732],{"class":642},[637,8536,647],{"class":646},[637,8538,669],{"class":642},[637,8540,8541],{"class":639,"line":805},[637,8542,742],{"emptyLinePlaceholder":594},[637,8544,8545,8547,8549],{"class":639,"line":827},[637,8546,643],{"class":642},[637,8548,750],{"class":646},[637,8550,669],{"class":642},[637,8552,8553,8555,8557],{"class":639,"line":631},[637,8554,758],{"class":642},[637,8556,761],{"class":646},[637,8558,669],{"class":642},[637,8560,8562,8564,8566,8568,8570,8572,8575,8577],{"class":8561,"line":850},[639,673],[637,8563,781],{"class":642},[637,8565,784],{"class":646},[637,8567,1508],{"class":650},[637,8569,657],{"class":642},[637,8571,660],{"class":642},[637,8573,8574],{"class":663},"[14, 10, 14]",[637,8576,660],{"class":642},[637,8578,787],{"class":642},[637,8580,8581,8583,8585,8588,8590,8592,8594,8596,8599,8601,8603,8605,8607],{"class":639,"line":861},[637,8582,781],{"class":642},[637,8584,65],{"class":646},[637,8586,8587],{"class":650}," :geometry",[637,8589,657],{"class":642},[637,8591,660],{"class":642},[637,8593,5279],{"class":663},[637,8595,660],{"class":642},[637,8597,8598],{"class":650}," :material",[637,8600,657],{"class":642},[637,8602,660],{"class":642},[637,8604,5223],{"class":663},[637,8606,660],{"class":642},[637,8608,669],{"class":642},[637,8610,8612,8614],{"class":8611,"line":872},[639,673],[637,8613,853],{"class":642},[637,8615,8616],{"class":646},"Instance\n",[637,8618,8620,8622,8624,8626,8629],{"class":8619,"line":882},[639,673],[637,8621,7998],{"class":650},[637,8623,657],{"class":642},[637,8625,660],{"class":642},[637,8627,8628],{"class":663},"(position, i) in cubes",[637,8630,3154],{"class":642},[637,8632,8634,8636,8638,8640,8643],{"class":8633,"line":632},[639,673],[637,8635,8012],{"class":650},[637,8637,657],{"class":642},[637,8639,660],{"class":642},[637,8641,8642],{"class":663},"i",[637,8644,3154],{"class":642},[637,8646,8648,8650,8652,8654,8656],{"class":8647,"line":902},[639,673],[637,8649,8026],{"class":650},[637,8651,657],{"class":642},[637,8653,660],{"class":642},[637,8655,4153],{"class":663},[637,8657,3154],{"class":642},[637,8659,8661,8664,8666,8668,8671],{"class":8660,"line":912},[639,673],[637,8662,8663],{"class":650}," color",[637,8665,657],{"class":642},[637,8667,660],{"class":642},[637,8669,8670],{"class":663},"#38bdf8",[637,8672,3154],{"class":642},[637,8674,8676],{"class":8675,"line":2648},[639,673],[637,8677,8054],{"class":642},[637,8679,8680,8682,8684],{"class":639,"line":2657},[637,8681,895],{"class":642},[637,8683,65],{"class":646},[637,8685,669],{"class":642},[637,8687,8688,8690,8692],{"class":639,"line":2677},[637,8689,905],{"class":642},[637,8691,761],{"class":646},[637,8693,669],{"class":642},[637,8695,8696,8698,8700],{"class":639,"line":2686},[637,8697,732],{"class":642},[637,8699,750],{"class":646},[637,8701,669],{"class":642},[2028,8703,8704],{},[614,8705,2799,8706,3086,8708,8710,8711,8713],{},[618,8707,5279],{},[618,8709,5223],{}," are yours: ",[618,8712,8258],{}," never disposes them.",[504,8715,8717],{"id":8716},"per-instance-color","Per-instance color",[614,8719,8720,8722,8723,8725,8726,8729],{},[618,8721,8265],{}," takes a ",[618,8724,7568],{}," prop, written into the batch's ",[618,8727,8728],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[626,8731,8733],{"className":628,"code":8732,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" />\n",[618,8734,8735],{"__ignoreMap":576},[637,8736,8737,8739,8742,8744,8746,8748,8750,8753,8755,8757,8759,8761,8763,8765,8767,8769,8771,8773,8775,8778,8781,8783,8786,8788,8790,8792,8794,8797],{"class":639,"line":577},[637,8738,643],{"class":642},[637,8740,8741],{"class":646},"Instance",[637,8743,3052],{"class":642},[637,8745,4153],{"class":650},[637,8747,657],{"class":642},[637,8749,660],{"class":642},[637,8751,8752],{"class":683},"[",[637,8754,965],{"class":2524},[637,8756,687],{"class":642},[637,8758,2529],{"class":2524},[637,8760,687],{"class":642},[637,8762,2529],{"class":2524},[637,8764,2537],{"class":683},[637,8766,660],{"class":642},[637,8768,3052],{"class":642},[637,8770,7568],{"class":650},[637,8772,657],{"class":642},[637,8774,660],{"class":642},[637,8776,8777],{"class":683},"isSelected ",[637,8779,8780],{"class":642},"?",[637,8782,699],{"class":642},[637,8784,8785],{"class":663},"#f97316",[637,8787,2463],{"class":642},[637,8789,3052],{"class":642},[637,8791,699],{"class":642},[637,8793,8670],{"class":663},[637,8795,8796],{"class":642},"'\"",[637,8798,787],{"class":642},[504,8800,8802],{"id":8801},"pointer-events","Pointer events",[614,8804,8805],{},"Each placeholder raycasts against the batch's geometry at its own transform, so pointer events land\non the single instance you clicked, not on the whole batch.",[626,8807,8809],{"className":628,"code":8808,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" />\n",[618,8810,8811],{"__ignoreMap":576},[637,8812,8813,8815,8817,8819,8821,8823,8825,8827,8829,8831,8834,8836,8838,8840,8843,8845,8847,8850,8852,8854,8857,8859,8861],{"class":639,"line":577},[637,8814,643],{"class":642},[637,8816,8741],{"class":646},[637,8818,3052],{"class":642},[637,8820,4153],{"class":650},[637,8822,657],{"class":642},[637,8824,660],{"class":642},[637,8826,4153],{"class":683},[637,8828,660],{"class":642},[637,8830,4277],{"class":642},[637,8832,8833],{"class":650},"click",[637,8835,657],{"class":642},[637,8837,660],{"class":642},[637,8839,5858],{"class":2457},[637,8841,8842],{"class":683},"(id)",[637,8844,660],{"class":642},[637,8846,4277],{"class":642},[637,8848,8849],{"class":650},"pointer-enter",[637,8851,657],{"class":642},[637,8853,660],{"class":642},[637,8855,8856],{"class":2457},"hover",[637,8858,8842],{"class":683},[637,8860,660],{"class":642},[637,8862,787],{"class":642},[504,8864,8866],{"id":8865},"hiding-instances","Hiding instances",[614,8868,8869],{},"Two ways, and they differ in what they cost:",[2236,8871,8872,8878],{},[2239,8873,8874,8877],{},[618,8875,8876],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2239,8879,8880,8882],{},[618,8881,8286],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[614,8884,8885],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[504,8887,8889],{"id":8888},"nesting-and-transforms","Nesting and transforms",[614,8891,8892],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[626,8894,8896],{"className":628,"code":8895,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003CLevioso>\n \u003CTresGroup :position=\"[0, 3, 0]\">\n \u003C!-- floats with the group, still the same drawcall -->\n \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n \u003C/TresGroup>\n \u003C/Levioso>\n\u003C/Instances>\n",[618,8897,8898,8930,8935,8940,8945,8950,8955,8960],{"__ignoreMap":576},[637,8899,8900,8902,8904,8906,8908,8910,8912,8914,8916,8918,8920,8922,8924,8926,8928],{"class":639,"line":577},[637,8901,643],{"class":642},[637,8903,65],{"class":646},[637,8905,3052],{"class":642},[637,8907,5279],{"class":650},[637,8909,657],{"class":642},[637,8911,660],{"class":642},[637,8913,5279],{"class":683},[637,8915,660],{"class":642},[637,8917,3052],{"class":642},[637,8919,5223],{"class":650},[637,8921,657],{"class":642},[637,8923,660],{"class":642},[637,8925,5223],{"class":683},[637,8927,660],{"class":642},[637,8929,669],{"class":642},[637,8931,8932],{"class":639,"line":578},[637,8933,8934],{"class":683}," \u003CLevioso>\n",[637,8936,8937],{"class":639,"line":708},[637,8938,8939],{"class":683}," \u003CTresGroup :position=\"[0, 3, 0]\">\n",[637,8941,8942],{"class":639,"line":729},[637,8943,8944],{"class":683}," \u003C!-- floats with the group, still the same drawcall -->\n",[637,8946,8947],{"class":639,"line":739},[637,8948,8949],{"class":683}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[637,8951,8952],{"class":639,"line":745},[637,8953,8954],{"class":683}," \u003C/TresGroup>\n",[637,8956,8957],{"class":639,"line":755},[637,8958,8959],{"class":683}," \u003C/Levioso>\n",[637,8961,8962,8964,8966],{"class":639,"line":778},[637,8963,732],{"class":642},[637,8965,65],{"class":646},[637,8967,669],{"class":642},[504,8969,8971],{"id":8970},"animating-instances","Animating instances",[614,8973,8974,8975,8978,8979,8981,8982,8722,8984,8986],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[618,8976,8977],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[618,8980,7643],{},"\nname, and an ",[618,8983,8265],{},[618,8985,2994],{}," like any other node, so a clip can drive one directly.",[626,8988,8990],{"className":628,"code":8989,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n \u003CTresGroup name=\"Rotor\">\n \u003CInstance name=\"Blade\" />\n \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n \u003C/TresGroup>\n\u003C/Instances>\n",[618,8991,8992,9024,9029,9034,9039,9044,9049],{"__ignoreMap":576},[637,8993,8994,8996,8998,9000,9002,9004,9006,9008,9010,9012,9014,9016,9018,9020,9022],{"class":639,"line":577},[637,8995,643],{"class":642},[637,8997,65],{"class":646},[637,8999,3052],{"class":642},[637,9001,5279],{"class":650},[637,9003,657],{"class":642},[637,9005,660],{"class":642},[637,9007,5279],{"class":683},[637,9009,660],{"class":642},[637,9011,3052],{"class":642},[637,9013,5223],{"class":650},[637,9015,657],{"class":642},[637,9017,660],{"class":642},[637,9019,5223],{"class":683},[637,9021,660],{"class":642},[637,9023,669],{"class":642},[637,9025,9026],{"class":639,"line":578},[637,9027,9028],{"class":683}," \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[637,9030,9031],{"class":639,"line":708},[637,9032,9033],{"class":683}," \u003CTresGroup name=\"Rotor\">\n",[637,9035,9036],{"class":639,"line":729},[637,9037,9038],{"class":683}," \u003CInstance name=\"Blade\" />\n",[637,9040,9041],{"class":639,"line":739},[637,9042,9043],{"class":683}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[637,9045,9046],{"class":639,"line":745},[637,9047,9048],{"class":683}," \u003C/TresGroup>\n",[637,9050,9051,9053,9055],{"class":639,"line":755},[637,9052,732],{"class":642},[637,9054,65],{"class":646},[637,9056,669],{"class":642},[2028,9058,9059],{},[614,9060,9061,9062,1695,9065,3086,9067,9070,9071,9073,9074,9077,9078,9080,9081,9084],{},"Inside a ",[618,9063,9064],{},"\u003CMerged />",[618,9066,2994],{},[618,9068,9069],{},"batch"," are different things: ",[618,9072,9069],{}," picks which\n",[618,9075,9076],{},"InstancedMesh"," to join, ",[618,9079,2994],{}," is what this node is called. ",[618,9082,9083],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[614,9086,9087,9088,9091],{},"A track that finds no node is not silent: three logs\n",[618,9089,9090],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[504,9093,9095],{"id":9094},"limit-and-growth","Limit and growth",[614,9097,9098,9101,9102,9104],{},[618,9099,9100],{},"limit"," is the initial buffer allocation, not a cap. If more instances register than it allows, the\nbatch reallocates its buffers (doubling), keeps every instance, and warns once in dev telling you\nwhich ",[618,9103,9100],{}," would have avoided the reallocation.",[626,9106,9108],{"className":628,"code":9107,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[618,9109,9110],{"__ignoreMap":576},[637,9111,9112,9114,9116,9118,9120,9122,9124,9126,9128,9130,9132,9134,9136,9138,9140,9142,9144,9146,9148,9151,9153],{"class":639,"line":577},[637,9113,643],{"class":642},[637,9115,65],{"class":646},[637,9117,3052],{"class":642},[637,9119,5279],{"class":650},[637,9121,657],{"class":642},[637,9123,660],{"class":642},[637,9125,5279],{"class":683},[637,9127,660],{"class":642},[637,9129,3052],{"class":642},[637,9131,5223],{"class":650},[637,9133,657],{"class":642},[637,9135,660],{"class":642},[637,9137,5223],{"class":683},[637,9139,660],{"class":642},[637,9141,3052],{"class":642},[637,9143,9100],{"class":650},[637,9145,657],{"class":642},[637,9147,660],{"class":642},[637,9149,9150],{"class":2524},"5000",[637,9152,660],{"class":642},[637,9154,669],{"class":642},[614,9156,9157],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[504,9159,9161],{"id":9160},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[614,9163,9164],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[614,9166,9167,9168,9170,9171,9173,9174,9176,9177,9179,9180,9182],{},"Each ",[618,9169,8265],{}," is a real ",[618,9172,7643],{}," in the graph. That is precisely what buys you the ergonomics:\n",[618,9175,4153],{}," is just a transform, nesting under a group works because the group is its parent, ",[618,9178,8286],{},"\nworks because unmounting a node unregisters it, and ",[618,9181,8290],{}," works because there is a node to hit.\nThe batch reads each node's world matrix every frame and packs it into the instance buffer.",[614,9184,9185,9186,9188],{},"What those nodes do ",[1692,9187,6362],{}," do is render. They carry no geometry and never enter the render list, so\n500 of them still cost one drawcall. What you are seeing in the graph is bookkeeping, not draw work.",[614,9190,9191],{},"The costs that are real:",[927,9193,9194,9203],{},[930,9195,9196],{},[933,9197,9198,9200],{},[936,9199],{"align":997},[936,9201,9202],{"align":997},"Cost",[946,9204,9205,9213,9221],{},[933,9206,9207,9210],{},[951,9208,9209],{"align":997},"Per frame",[951,9211,9212],{"align":997},"One world-matrix update and one matrix multiply per instance.",[933,9214,9215,9218],{},[951,9216,9217],{"align":997},"On pointer move",[951,9219,9220],{"align":997},"A raycast per instance, but only for instances that have a pointer handler (or inherit one from an ancestor). A scatter with no handlers costs nothing.",[933,9222,9223,9226],{},[951,9224,9225],{"align":997},"Memory",[951,9227,9228,9229,9231],{"align":997},"One bare ",[618,9230,7643],{}," per instance.",[2028,9233,9234],{},[614,9235,9236,9237,9240,9241,9244,9245,9247],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[618,9238,9239],{},"TresInstancedMesh"," whose ",[618,9242,9243],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[618,9246,8258],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[504,9249,922],{"id":921},[4074,9251,65],{"id":9252},"instances",[927,9254,9255,9265],{},[930,9256,9257],{},[933,9258,9259,9261,9263],{},[936,9260,938],{"align":997},[936,9262,941],{"align":997},[936,9264,944],{},[946,9266,9267,9281,9294,9308,9323],{},[933,9268,9269,9273,9276],{},[951,9270,9271],{"align":997},[618,9272,5279],{},[951,9274,9275],{"align":997},"Geometry shared by every instance. Not disposed by the component.",[951,9277,9278],{},[1697,9279,9280],{},"required",[933,9282,9283,9287,9290],{},[951,9284,9285],{"align":997},[618,9286,5223],{},[951,9288,9289],{"align":997},"Material shared by every instance. Not disposed by the component.",[951,9291,9292],{},[1697,9293,9280],{},[933,9295,9296,9300,9303],{},[951,9297,9298],{"align":997},[618,9299,9100],{},[951,9301,9302],{"align":997},"Initial buffer allocation. Grows automatically when exceeded.",[951,9304,9305],{},[618,9306,9307],{},"1000",[933,9309,9310,9314,9319],{},[951,9311,9312],{"align":997},[618,9313,9069],{},[951,9315,9316,9317,1146],{"align":997},"Key this batch registers under with an ancestor ",[618,9318,9064],{},[951,9320,9321],{},[618,9322,1167],{},[933,9324,9325,9329,9335],{},[951,9326,9327],{"align":997},[618,9328,2994],{},[951,9330,9331,9332,9334],{"align":997},"Name for the ",[618,9333,9076],{}," itself.",[951,9336,9337],{},[618,9338,1167],{},[614,9340,9341,9342,9344,9345,1146],{},"Exposes the underlying ",[618,9343,8262],{}," through ",[618,9346,9347],{},"instance",[4074,9349,8741],{"id":9347},[927,9351,9352,9362],{},[930,9353,9354],{},[933,9355,9356,9358,9360],{},[936,9357,938],{"align":997},[936,9359,941],{"align":997},[936,9361,944],{},[946,9363,9364,9383,9399,9414],{},[933,9365,9366,9370,9379],{},[951,9367,9368],{"align":997},[618,9369,9069],{},[951,9371,9372,9373,9376,9377,1146],{"align":997},"Batch to join, by its key in ",[618,9374,9375],{},"\u003CMerged :meshes />",". Omit for the nearest ",[618,9378,8258],{},[951,9380,9381],{},[618,9382,1167],{},[933,9384,9385,9389,9395],{},[951,9386,9387],{"align":997},[618,9388,2994],{},[951,9390,9391,9392,9394],{"align":997},"Name for this instance's node, so a mixer or ",[618,9393,4745],{}," can find it.",[951,9396,9397],{},[618,9398,1167],{},[933,9400,9401,9405,9410],{},[951,9402,9403],{"align":997},[618,9404,7568],{},[951,9406,9407,9408,1146],{"align":997},"Per-instance color, written into ",[618,9409,8728],{},[951,9411,9412],{},[618,9413,1167],{},[933,9415,9416,9420,9425],{},[951,9417,9418],{"align":997},[618,9419,7144],{},[951,9421,9422,9424],{"align":997},[618,9423,971],{}," drops the instance from the batch without unregistering it.",[951,9426,9427],{},[618,9428,961],{},[614,9430,9431,9432,1695,9434,1695,9436,9438],{},"Transform props (",[618,9433,4153],{},[618,9435,5650],{},[618,9437,5653],{},", …) and pointer events behave like any other node.",[9440,9441,9442],"read-more",{"to":78},[614,9443,9444,9445,9447],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[618,9446,9064],{}," is for.",[1349,9449,9450],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":9452},[9453,9454,9455,9456,9457,9458,9459,9460,9461],{"id":624,"depth":578,"text":15},{"id":8716,"depth":578,"text":8717},{"id":8801,"depth":578,"text":8802},{"id":8865,"depth":578,"text":8866},{"id":8888,"depth":578,"text":8889},{"id":8970,"depth":578,"text":8971},{"id":9094,"depth":578,"text":9095},{"id":9160,"depth":578,"text":9161},{"id":921,"depth":578,"text":922,"children":9462},[9463,9464],{"id":9252,"depth":708,"text":65},{"id":9347,"depth":708,"text":8741},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9465},"8vKhux_ZHYFi--jFcKf3FugQpxaRNQANDCDzZT-Htl8",{"id":9470,"title":69,"body":9471,"description":9859,"extension":591,"links":592,"meta":9860,"navigation":594,"path":70,"seo":9861,"stem":71,"__hash__":9862},"docs/2.api/1.abstractions/levioso.md",{"type":501,"value":9472,"toc":9855},[9473,9478,9485,9494,9496,9780,9782,9853],[608,9474,9475],{},[9476,9477],"abstractions-levioso",{},[614,9479,9480],{},[9481,9482],"img",{"alt":9483,"src":9484},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[614,9486,2799,9487,9489,9490,9493],{},[618,9488,7338],{}," package provides a ",[618,9491,9492],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[504,9495,15],{"id":624},[626,9497,9500],{"className":628,"code":9498,"highlights":9499,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport { Levioso, OrbitControls, Box } from \"@tresjs/cientos\";\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x82dbc5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" :look-at=\"[0, 0, 0]\" />\n \u003COrbitControls />\n \u003CLevioso :speed=\"4\">\n \u003CBox />\n \u003C/Levioso>\n \u003CTresAmbientLight :intensity=\"1\" />\n \u003CTresDirectionalLight :intensity=\"1\" :position=\"[2, 2, 2]\" />\n \u003CTresGridHelper :position=\"[0, -1, 0]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[708,805,631],[618,9501,9502,9522,9544,9574,9578,9586,9590,9598,9618,9649,9657,9679,9687,9696,9715,9745,9764,9772],{"__ignoreMap":576},[637,9503,9504,9506,9508,9510,9512,9514,9516,9518,9520],{"class":639,"line":577},[637,9505,643],{"class":642},[637,9507,647],{"class":646},[637,9509,651],{"class":650},[637,9511,654],{"class":650},[637,9513,657],{"class":642},[637,9515,660],{"class":642},[637,9517,664],{"class":663},[637,9519,660],{"class":642},[637,9521,669],{"class":642},[637,9523,9524,9526,9528,9530,9532,9534,9537,9539,9541],{"class":639,"line":578},[637,9525,677],{"class":676},[637,9527,680],{"class":642},[637,9529,715],{"class":683},[637,9531,693],{"class":642},[637,9533,696],{"class":676},[637,9535,9536],{"class":642}," \"",[637,9538,724],{"class":663},[637,9540,660],{"class":642},[637,9542,9543],{"class":642},";\n",[637,9545,9547,9549,9551,9554,9556,9558,9560,9562,9564,9566,9568,9570,9572],{"class":9546,"line":708},[639,673],[637,9548,677],{"class":676},[637,9550,680],{"class":642},[637,9552,9553],{"class":683}," Levioso",[637,9555,687],{"class":642},[637,9557,690],{"class":683},[637,9559,687],{"class":642},[637,9561,1420],{"class":683},[637,9563,693],{"class":642},[637,9565,696],{"class":676},[637,9567,9536],{"class":642},[637,9569,702],{"class":663},[637,9571,660],{"class":642},[637,9573,9543],{"class":642},[637,9575,9576],{"class":639,"line":729},[637,9577,742],{"emptyLinePlaceholder":594},[637,9579,9580,9582,9584],{"class":639,"line":739},[637,9581,732],{"class":642},[637,9583,647],{"class":646},[637,9585,669],{"class":642},[637,9587,9588],{"class":639,"line":745},[637,9589,742],{"emptyLinePlaceholder":594},[637,9591,9592,9594,9596],{"class":639,"line":755},[637,9593,643],{"class":642},[637,9595,750],{"class":646},[637,9597,669],{"class":642},[637,9599,9600,9602,9604,9607,9609,9611,9614,9616],{"class":639,"line":778},[637,9601,758],{"class":642},[637,9603,761],{"class":646},[637,9605,9606],{"class":650}," :clear-color",[637,9608,657],{"class":642},[637,9610,660],{"class":642},[637,9612,9613],{"class":663},"0x82dbc5",[637,9615,660],{"class":642},[637,9617,669],{"class":642},[637,9619,9620,9622,9624,9626,9628,9630,9633,9635,9638,9640,9642,9645,9647],{"class":639,"line":790},[637,9621,781],{"class":642},[637,9623,784],{"class":646},[637,9625,1508],{"class":650},[637,9627,657],{"class":642},[637,9629,660],{"class":642},[637,9631,9632],{"class":663},"[0, 0, 5]",[637,9634,660],{"class":642},[637,9636,9637],{"class":650}," :look-at",[637,9639,657],{"class":642},[637,9641,660],{"class":642},[637,9643,9644],{"class":663},"[0, 0, 0]",[637,9646,660],{"class":642},[637,9648,787],{"class":642},[637,9650,9651,9653,9655],{"class":639,"line":800},[637,9652,781],{"class":642},[637,9654,795],{"class":646},[637,9656,787],{"class":642},[637,9658,9660,9662,9665,9668,9670,9672,9675,9677],{"class":9659,"line":805},[639,673],[637,9661,781],{"class":642},[637,9663,9664],{"class":646},"Levioso",[637,9666,9667],{"class":650}," :speed",[637,9669,657],{"class":642},[637,9671,660],{"class":642},[637,9673,9674],{"class":663},"4",[637,9676,660],{"class":642},[637,9678,669],{"class":642},[637,9680,9681,9683,9685],{"class":639,"line":827},[637,9682,853],{"class":642},[637,9684,217],{"class":646},[637,9686,787],{"class":642},[637,9688,9690,9692,9694],{"class":9689,"line":631},[639,673],[637,9691,895],{"class":642},[637,9693,9664],{"class":646},[637,9695,669],{"class":642},[637,9697,9698,9700,9703,9705,9707,9709,9711,9713],{"class":639,"line":850},[637,9699,781],{"class":642},[637,9701,9702],{"class":646},"TresAmbientLight",[637,9704,1890],{"class":650},[637,9706,657],{"class":642},[637,9708,660],{"class":642},[637,9710,1897],{"class":663},[637,9712,660],{"class":642},[637,9714,787],{"class":642},[637,9716,9717,9719,9722,9724,9726,9728,9730,9732,9734,9736,9738,9741,9743],{"class":639,"line":861},[637,9718,781],{"class":642},[637,9720,9721],{"class":646},"TresDirectionalLight",[637,9723,1890],{"class":650},[637,9725,657],{"class":642},[637,9727,660],{"class":642},[637,9729,1897],{"class":663},[637,9731,660],{"class":642},[637,9733,1508],{"class":650},[637,9735,657],{"class":642},[637,9737,660],{"class":642},[637,9739,9740],{"class":663},"[2, 2, 2]",[637,9742,660],{"class":642},[637,9744,787],{"class":642},[637,9746,9747,9749,9751,9753,9755,9757,9760,9762],{"class":639,"line":872},[637,9748,781],{"class":642},[637,9750,8070],{"class":646},[637,9752,1508],{"class":650},[637,9754,657],{"class":642},[637,9756,660],{"class":642},[637,9758,9759],{"class":663},"[0, -1, 0]",[637,9761,660],{"class":642},[637,9763,787],{"class":642},[637,9765,9766,9768,9770],{"class":639,"line":882},[637,9767,905],{"class":642},[637,9769,761],{"class":646},[637,9771,669],{"class":642},[637,9773,9774,9776,9778],{"class":639,"line":632},[637,9775,732],{"class":642},[637,9777,750],{"class":646},[637,9779,669],{"class":642},[504,9781,922],{"id":921},[927,9783,9784,9794],{},[930,9785,9786],{},[933,9787,9788,9790,9792],{},[936,9789,938],{"align":997},[936,9791,941],{"align":997},[936,9793,944],{},[946,9795,9796,9810,9824,9838],{},[933,9797,9798,9803,9806],{},[951,9799,9800],{"align":997},[618,9801,9802],{},"speed",[951,9804,9805],{"align":997},"Floating speed, higher it rocks more 🤘.",[951,9807,9808],{},[618,9809,1897],{},[933,9811,9812,9817,9820],{},[951,9813,9814],{"align":997},[618,9815,9816],{},"rotationFactor",[951,9818,9819],{"align":997},"Factor for Euler rotation.",[951,9821,9822],{},[618,9823,1897],{},[933,9825,9826,9831,9834],{},[951,9827,9828],{"align":997},[618,9829,9830],{},"floatFactor",[951,9832,9833],{"align":997},"Factor for Up/down movement.",[951,9835,9836],{},[618,9837,1897],{},[933,9839,9840,9845,9848],{},[951,9841,9842],{"align":997},[618,9843,9844],{},"range",[951,9846,9847],{"align":997},"Range of y-axis values the object will float within.",[951,9849,9850],{},[618,9851,9852],{},"[-0.1, 0.1]",[1349,9854,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":9856},[9857,9858],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Make content float like magic with smooth animations.",{},{"title":69,"description":9859},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":9864,"title":73,"body":9865,"description":10509,"extension":591,"links":592,"meta":10510,"navigation":594,"path":74,"seo":10511,"stem":75,"__hash__":10512},"docs/2.api/1.abstractions/mask.md",{"type":501,"value":9866,"toc":10504},[9867,9872,9878,9911,9913,10376,10378,10441,10445,10452,10457,10472,10501],[608,9868,9869],{},[9870,9871],"abstractions-mask",{},[614,9873,9874,9877],{},[618,9875,9876],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3222,9879,9880,9898],{},[614,9881,9882,9883,9886,9887,9890,9891,9894,9895,1146],{},"To use ",[618,9884,9885],{},"\u003CMask />"," you ",[1697,9888,9889],{},"must"," add ",[618,9892,9893],{},":stencil=\"true\""," to your ",[618,9896,9897],{},"\u003CTresCanvas />",[614,9899,9900,9902,9903,9910],{},[618,9901,9885],{}," relies on the ",[1140,9904,9907],{"href":9905,"rel":9906},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1144],[618,9908,9909],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[504,9912,15],{"id":624},[626,9914,9917],{"className":628,"code":9915,"highlights":9916,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n\n \u003CTresGroup :scale=\"2\">\n \u003CTresMesh>\n \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" />\n \u003CTresMeshBasicMaterial color=\"white\" />\n \u003C/TresMesh>\n \u003CMask :id=\"1\">\n \u003CTresCircleGeometry />\n \u003CTresMeshBasicMaterial color=\"#fbb03b\" />\n \u003C/Mask>\n \u003C/TresGroup>\n\n \u003CTresMesh :position-z=\"-1\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n \u003C/TresMesh>\n\n \u003CTresMesh :position-z=\"-3\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n \u003C/TresMesh>\n\n \u003CTresMesh :position-z=\"-5\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,872,882,632,902],[618,9918,9919,9939,9968,9986,9994,9998,10006,10036,10044,10052,10056,10075,10083,10103,10121,10129,10149,10159,10179,10188,10196,10200,10220,10228,10248,10256,10260,10279,10287,10305,10313,10317,10336,10344,10352,10360,10368],{"__ignoreMap":576},[637,9920,9921,9923,9925,9927,9929,9931,9933,9935,9937],{"class":639,"line":577},[637,9922,643],{"class":642},[637,9924,647],{"class":646},[637,9926,651],{"class":650},[637,9928,654],{"class":650},[637,9930,657],{"class":642},[637,9932,660],{"class":642},[637,9934,664],{"class":663},[637,9936,660],{"class":642},[637,9938,669],{"class":642},[637,9940,9942,9944,9946,9949,9951,9953,9955,9958,9960,9962,9964,9966],{"class":9941,"line":578},[639,673],[637,9943,677],{"class":676},[637,9945,680],{"class":642},[637,9947,9948],{"class":683}," Mask",[637,9950,687],{"class":642},[637,9952,690],{"class":683},[637,9954,687],{"class":642},[637,9956,9957],{"class":683}," useMask",[637,9959,693],{"class":642},[637,9961,696],{"class":676},[637,9963,699],{"class":642},[637,9965,702],{"class":663},[637,9967,705],{"class":642},[637,9969,9970,9972,9974,9976,9978,9980,9982,9984],{"class":639,"line":708},[637,9971,677],{"class":676},[637,9973,680],{"class":642},[637,9975,715],{"class":683},[637,9977,693],{"class":642},[637,9979,696],{"class":676},[637,9981,699],{"class":642},[637,9983,724],{"class":663},[637,9985,705],{"class":642},[637,9987,9988,9990,9992],{"class":639,"line":729},[637,9989,732],{"class":642},[637,9991,647],{"class":646},[637,9993,669],{"class":642},[637,9995,9996],{"class":639,"line":739},[637,9997,742],{"emptyLinePlaceholder":594},[637,9999,10000,10002,10004],{"class":639,"line":745},[637,10001,643],{"class":642},[637,10003,750],{"class":646},[637,10005,669],{"class":642},[637,10007,10008,10010,10012,10015,10017,10019,10021,10023,10025,10027,10029,10032,10034],{"class":639,"line":755},[637,10009,758],{"class":642},[637,10011,761],{"class":646},[637,10013,10014],{"class":650}," :stencil",[637,10016,657],{"class":642},[637,10018,660],{"class":642},[637,10020,961],{"class":663},[637,10022,660],{"class":642},[637,10024,764],{"class":650},[637,10026,657],{"class":642},[637,10028,660],{"class":642},[637,10030,10031],{"class":663},"#4f4f4f",[637,10033,660],{"class":642},[637,10035,669],{"class":642},[637,10037,10038,10040,10042],{"class":639,"line":778},[637,10039,781],{"class":642},[637,10041,784],{"class":646},[637,10043,787],{"class":642},[637,10045,10046,10048,10050],{"class":639,"line":790},[637,10047,781],{"class":642},[637,10049,795],{"class":646},[637,10051,787],{"class":642},[637,10053,10054],{"class":639,"line":800},[637,10055,742],{"emptyLinePlaceholder":594},[637,10057,10058,10060,10063,10065,10067,10069,10071,10073],{"class":639,"line":805},[637,10059,781],{"class":642},[637,10061,10062],{"class":646},"TresGroup",[637,10064,813],{"class":650},[637,10066,657],{"class":642},[637,10068,660],{"class":642},[637,10070,820],{"class":663},[637,10072,660],{"class":642},[637,10074,669],{"class":642},[637,10076,10077,10079,10081],{"class":639,"line":827},[637,10078,853],{"class":642},[637,10080,856],{"class":646},[637,10082,669],{"class":642},[637,10084,10085,10087,10090,10092,10094,10096,10099,10101],{"class":639,"line":631},[637,10086,864],{"class":642},[637,10088,10089],{"class":646},"TresRingGeometry",[637,10091,1982],{"class":650},[637,10093,657],{"class":642},[637,10095,660],{"class":642},[637,10097,10098],{"class":663},"[0.95, 1, 64]",[637,10100,660],{"class":642},[637,10102,787],{"class":642},[637,10104,10105,10107,10109,10111,10113,10115,10117,10119],{"class":639,"line":850},[637,10106,864],{"class":642},[637,10108,7493],{"class":646},[637,10110,2712],{"class":650},[637,10112,657],{"class":642},[637,10114,660],{"class":642},[637,10116,2719],{"class":663},[637,10118,660],{"class":642},[637,10120,787],{"class":642},[637,10122,10123,10125,10127],{"class":639,"line":861},[637,10124,885],{"class":642},[637,10126,856],{"class":646},[637,10128,669],{"class":642},[637,10130,10132,10134,10136,10139,10141,10143,10145,10147],{"class":10131,"line":872},[639,673],[637,10133,853],{"class":642},[637,10135,73],{"class":646},[637,10137,10138],{"class":650}," :id",[637,10140,657],{"class":642},[637,10142,660],{"class":642},[637,10144,1897],{"class":663},[637,10146,660],{"class":642},[637,10148,669],{"class":642},[637,10150,10152,10154,10157],{"class":10151,"line":882},[639,673],[637,10153,864],{"class":642},[637,10155,10156],{"class":646},"TresCircleGeometry",[637,10158,787],{"class":642},[637,10160,10162,10164,10166,10168,10170,10172,10175,10177],{"class":10161,"line":632},[639,673],[637,10163,864],{"class":642},[637,10165,7493],{"class":646},[637,10167,2712],{"class":650},[637,10169,657],{"class":642},[637,10171,660],{"class":642},[637,10173,10174],{"class":663},"#fbb03b",[637,10176,660],{"class":642},[637,10178,787],{"class":642},[637,10180,10182,10184,10186],{"class":10181,"line":902},[639,673],[637,10183,885],{"class":642},[637,10185,73],{"class":646},[637,10187,669],{"class":642},[637,10189,10190,10192,10194],{"class":639,"line":912},[637,10191,895],{"class":642},[637,10193,10062],{"class":646},[637,10195,669],{"class":642},[637,10197,10198],{"class":639,"line":2648},[637,10199,742],{"emptyLinePlaceholder":594},[637,10201,10202,10204,10206,10209,10211,10213,10216,10218],{"class":639,"line":2657},[637,10203,781],{"class":642},[637,10205,856],{"class":646},[637,10207,10208],{"class":650}," :position-z",[637,10210,657],{"class":642},[637,10212,660],{"class":642},[637,10214,10215],{"class":663},"-1",[637,10217,660],{"class":642},[637,10219,669],{"class":642},[637,10221,10222,10224,10226],{"class":639,"line":2677},[637,10223,853],{"class":642},[637,10225,867],{"class":646},[637,10227,787],{"class":642},[637,10229,10230,10232,10234,10237,10239,10241,10244,10246],{"class":639,"line":2686},[637,10231,853],{"class":642},[637,10233,877],{"class":646},[637,10235,10236],{"class":650}," v-bind",[637,10238,657],{"class":642},[637,10240,660],{"class":642},[637,10242,10243],{"class":663},"useMask(1)",[637,10245,660],{"class":642},[637,10247,787],{"class":642},[637,10249,10250,10252,10254],{"class":639,"line":2695},[637,10251,895],{"class":642},[637,10253,856],{"class":646},[637,10255,669],{"class":642},[637,10257,10258],{"class":639,"line":2704},[637,10259,742],{"emptyLinePlaceholder":594},[637,10261,10262,10264,10266,10268,10270,10272,10275,10277],{"class":639,"line":2726},[637,10263,781],{"class":642},[637,10265,856],{"class":646},[637,10267,10208],{"class":650},[637,10269,657],{"class":642},[637,10271,660],{"class":642},[637,10273,10274],{"class":663},"-3",[637,10276,660],{"class":642},[637,10278,669],{"class":642},[637,10280,10281,10283,10285],{"class":639,"line":2770},[637,10282,853],{"class":642},[637,10284,867],{"class":646},[637,10286,787],{"class":642},[637,10288,10289,10291,10293,10295,10297,10299,10301,10303],{"class":639,"line":2779},[637,10290,853],{"class":642},[637,10292,877],{"class":646},[637,10294,10236],{"class":650},[637,10296,657],{"class":642},[637,10298,660],{"class":642},[637,10300,10243],{"class":663},[637,10302,660],{"class":642},[637,10304,787],{"class":642},[637,10306,10307,10309,10311],{"class":639,"line":2788},[637,10308,895],{"class":642},[637,10310,856],{"class":646},[637,10312,669],{"class":642},[637,10314,10315],{"class":639,"line":3945},[637,10316,742],{"emptyLinePlaceholder":594},[637,10318,10319,10321,10323,10325,10327,10329,10332,10334],{"class":639,"line":3976},[637,10320,781],{"class":642},[637,10322,856],{"class":646},[637,10324,10208],{"class":650},[637,10326,657],{"class":642},[637,10328,660],{"class":642},[637,10330,10331],{"class":663},"-5",[637,10333,660],{"class":642},[637,10335,669],{"class":642},[637,10337,10338,10340,10342],{"class":639,"line":3997},[637,10339,853],{"class":642},[637,10341,867],{"class":646},[637,10343,787],{"class":642},[637,10345,10346,10348,10350],{"class":639,"line":4016},[637,10347,853],{"class":642},[637,10349,877],{"class":646},[637,10351,787],{"class":642},[637,10353,10354,10356,10358],{"class":639,"line":4048},[637,10355,895],{"class":642},[637,10357,856],{"class":646},[637,10359,669],{"class":642},[637,10361,10362,10364,10366],{"class":639,"line":4057},[637,10363,905],{"class":642},[637,10365,761],{"class":646},[637,10367,669],{"class":642},[637,10369,10370,10372,10374],{"class":639,"line":4066},[637,10371,732],{"class":642},[637,10373,750],{"class":646},[637,10375,669],{"class":642},[504,10377,922],{"id":921},[927,10379,10380,10390],{},[930,10381,10382],{},[933,10383,10384,10386,10388],{},[936,10385,938],{"align":997},[936,10387,941],{"align":997},[936,10389,944],{},[946,10391,10392,10409,10425],{},[933,10393,10394,10401,10407],{},[951,10395,10396],{"align":997},[1692,10397,10398],{},[618,10399,10400],{},"id",[951,10402,10403,10404,10406],{"align":997},"Id of the stencil buffer to use. Each mask must have a ",[618,10405,5375],{}," id. Multiple masks can refer to the same id.",[951,10408],{},[933,10410,10411,10418,10421],{},[951,10412,10413],{"align":997},[1692,10414,10415],{},[618,10416,10417],{},"colorWrite",[951,10419,10420],{"align":997},"Whether the colors of the mask's own material will leak through.",[951,10422,10423],{},[618,10424,971],{},[933,10426,10427,10434,10437],{},[951,10428,10429],{"align":997},[1692,10430,10431],{},[618,10432,10433],{},"depthWrite",[951,10435,10436],{"align":997},"Whether the depth of the mask's own material will leak through.",[951,10438,10439],{},[618,10440,971],{},[504,10442,10444],{"id":10443},"usemask","useMask",[614,10446,10447,10448,10451],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[618,10449,10450],{},"v-bind"," on materials that should be affected by the mask.",[614,10453,10454],{},[1692,10455,10456],{},"Parameters:",[2236,10458,10459,10464],{},[2239,10460,10461,10463],{},[618,10462,10400],{}," - The mask id to use (number or Ref)",[2239,10465,10466,10469,10470],{},[618,10467,10468],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[618,10471,971],{},[626,10473,10475],{"className":628,"code":10474,"language":633,"meta":576,"style":576},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[618,10476,10477],{"__ignoreMap":576},[637,10478,10479,10481,10483,10485,10487,10489,10491,10493,10495,10497,10499],{"class":639,"line":577},[637,10480,643],{"class":642},[637,10482,877],{"class":646},[637,10484,10236],{"class":650},[637,10486,657],{"class":642},[637,10488,660],{"class":642},[637,10490,10444],{"class":2457},[637,10492,2460],{"class":683},[637,10494,1897],{"class":2524},[637,10496,3363],{"class":683},[637,10498,660],{"class":642},[637,10500,787],{"class":642},[1349,10502,10503],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":10505},[10506,10507,10508],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":10443,"depth":578,"text":10444},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10509},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":10514,"title":77,"body":10515,"description":11215,"extension":591,"links":592,"meta":11216,"navigation":594,"path":78,"seo":11217,"stem":79,"__hash__":11218},"docs/2.api/1.abstractions/merged.md",{"type":501,"value":10516,"toc":11209},[10517,10522,10533,10540,10542,10545,10762,10765,11032,11040,11044,11053,11121,11124,11128,11140,11142,11191,11196,11206],[608,10518,10519],{},[10520,10521],"abstractions-merged",{},[614,10523,10524,8722,10526,10529,10530,1146],{},[618,10525,9064],{},[618,10527,10528],{},"{ name: mesh }"," map and builds one instanced batch per entry. Any descendant,\nat any depth and in any component, joins one by key with ",[618,10531,10532],{},"\u003CInstance batch=\"...\" />",[614,10534,10535,10536,10539],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1692,10537,10538],{},"two"," drawcalls, not 98.",[504,10541,15],{"id":624},[614,10543,10544],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[626,10546,10549],{"className":628,"code":10547,"filename":10548,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Instance } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CInstance batch=\"Body\" :position=\"[0, 0.6, 0]\" />\n \u003CInstance batch=\"Body\" :position=\"[0, 1.6, 0]\" :scale=\"0.6\" />\n \u003CInstance batch=\"Eye\" :position=\"[-0.18, 1.7, 0.32]\" />\n \u003CInstance batch=\"Eye\" :position=\"[0.18, 1.7, 0.32]\" />\n \u003C/TresGroup>\n\u003C/template>\n","Robot.vue",[618,10550,10551,10571,10589,10597,10601,10609,10617,10647,10687,10717,10746,10754],{"__ignoreMap":576},[637,10552,10553,10555,10557,10559,10561,10563,10565,10567,10569],{"class":639,"line":577},[637,10554,643],{"class":642},[637,10556,647],{"class":646},[637,10558,651],{"class":650},[637,10560,654],{"class":650},[637,10562,657],{"class":642},[637,10564,660],{"class":642},[637,10566,664],{"class":663},[637,10568,660],{"class":642},[637,10570,669],{"class":642},[637,10572,10573,10575,10577,10579,10581,10583,10585,10587],{"class":639,"line":578},[637,10574,677],{"class":676},[637,10576,680],{"class":642},[637,10578,8347],{"class":683},[637,10580,693],{"class":642},[637,10582,696],{"class":676},[637,10584,699],{"class":642},[637,10586,702],{"class":663},[637,10588,705],{"class":642},[637,10590,10591,10593,10595],{"class":639,"line":708},[637,10592,732],{"class":642},[637,10594,647],{"class":646},[637,10596,669],{"class":642},[637,10598,10599],{"class":639,"line":729},[637,10600,742],{"emptyLinePlaceholder":594},[637,10602,10603,10605,10607],{"class":639,"line":739},[637,10604,643],{"class":642},[637,10606,750],{"class":646},[637,10608,669],{"class":642},[637,10610,10611,10613,10615],{"class":639,"line":745},[637,10612,758],{"class":642},[637,10614,10062],{"class":646},[637,10616,669],{"class":642},[637,10618,10619,10621,10623,10626,10628,10630,10632,10634,10636,10638,10640,10643,10645],{"class":639,"line":755},[637,10620,781],{"class":642},[637,10622,8741],{"class":646},[637,10624,10625],{"class":650}," batch",[637,10627,657],{"class":642},[637,10629,660],{"class":642},[637,10631,4752],{"class":663},[637,10633,660],{"class":642},[637,10635,1508],{"class":650},[637,10637,657],{"class":642},[637,10639,660],{"class":642},[637,10641,10642],{"class":663},"[0, 0.6, 0]",[637,10644,660],{"class":642},[637,10646,787],{"class":642},[637,10648,10649,10651,10653,10655,10657,10659,10661,10663,10665,10667,10669,10672,10674,10676,10678,10680,10683,10685],{"class":639,"line":778},[637,10650,781],{"class":642},[637,10652,8741],{"class":646},[637,10654,10625],{"class":650},[637,10656,657],{"class":642},[637,10658,660],{"class":642},[637,10660,4752],{"class":663},[637,10662,660],{"class":642},[637,10664,1508],{"class":650},[637,10666,657],{"class":642},[637,10668,660],{"class":642},[637,10670,10671],{"class":663},"[0, 1.6, 0]",[637,10673,660],{"class":642},[637,10675,813],{"class":650},[637,10677,657],{"class":642},[637,10679,660],{"class":642},[637,10681,10682],{"class":663},"0.6",[637,10684,660],{"class":642},[637,10686,787],{"class":642},[637,10688,10689,10691,10693,10695,10697,10699,10702,10704,10706,10708,10710,10713,10715],{"class":639,"line":790},[637,10690,781],{"class":642},[637,10692,8741],{"class":646},[637,10694,10625],{"class":650},[637,10696,657],{"class":642},[637,10698,660],{"class":642},[637,10700,10701],{"class":663},"Eye",[637,10703,660],{"class":642},[637,10705,1508],{"class":650},[637,10707,657],{"class":642},[637,10709,660],{"class":642},[637,10711,10712],{"class":663},"[-0.18, 1.7, 0.32]",[637,10714,660],{"class":642},[637,10716,787],{"class":642},[637,10718,10719,10721,10723,10725,10727,10729,10731,10733,10735,10737,10739,10742,10744],{"class":639,"line":800},[637,10720,781],{"class":642},[637,10722,8741],{"class":646},[637,10724,10625],{"class":650},[637,10726,657],{"class":642},[637,10728,660],{"class":642},[637,10730,10701],{"class":663},[637,10732,660],{"class":642},[637,10734,1508],{"class":650},[637,10736,657],{"class":642},[637,10738,660],{"class":642},[637,10740,10741],{"class":663},"[0.18, 1.7, 0.32]",[637,10743,660],{"class":642},[637,10745,787],{"class":642},[637,10747,10748,10750,10752],{"class":639,"line":805},[637,10749,905],{"class":642},[637,10751,10062],{"class":646},[637,10753,669],{"class":642},[637,10755,10756,10758,10760],{"class":639,"line":827},[637,10757,732],{"class":642},[637,10759,750],{"class":646},[637,10761,669],{"class":642},[614,10763,10764],{},"The provider hands over the meshes and renders as many copies as it likes:",[626,10766,10769],{"className":628,"code":10767,"highlights":10768,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Merged, useGLTF } from '@tresjs/cientos'\nimport Robot from './Robot.vue'\n\nconst { nodes } = useGLTF('/robot.glb')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[12, 9, 12]\" />\n \u003CMerged :meshes=\"{ Body: nodes.Body, Eye: nodes.Eye }\">\n \u003CRobot :position=\"[-2, 0, 0]\" />\n \u003CRobot :position=\"[0, 0, 0]\" />\n \u003CRobot :position=\"[2, 0, 0]\" />\n \u003C/Merged>\n \u003C/TresCanvas>\n\u003C/template>\n",[827,631,850,861,872,882,632],[618,10770,10771,10791,10809,10832,10848,10852,10877,10885,10889,10897,10905,10924,10945,10966,10985,11005,11014,11023],{"__ignoreMap":576},[637,10772,10773,10775,10777,10779,10781,10783,10785,10787,10789],{"class":639,"line":577},[637,10774,643],{"class":642},[637,10776,647],{"class":646},[637,10778,651],{"class":650},[637,10780,654],{"class":650},[637,10782,657],{"class":642},[637,10784,660],{"class":642},[637,10786,664],{"class":663},[637,10788,660],{"class":642},[637,10790,669],{"class":642},[637,10792,10793,10795,10797,10799,10801,10803,10805,10807],{"class":639,"line":578},[637,10794,677],{"class":676},[637,10796,680],{"class":642},[637,10798,715],{"class":683},[637,10800,693],{"class":642},[637,10802,696],{"class":676},[637,10804,699],{"class":642},[637,10806,724],{"class":663},[637,10808,705],{"class":642},[637,10810,10811,10813,10815,10818,10820,10822,10824,10826,10828,10830],{"class":639,"line":708},[637,10812,677],{"class":676},[637,10814,680],{"class":642},[637,10816,10817],{"class":683}," Merged",[637,10819,687],{"class":642},[637,10821,4370],{"class":683},[637,10823,693],{"class":642},[637,10825,696],{"class":676},[637,10827,699],{"class":642},[637,10829,702],{"class":663},[637,10831,705],{"class":642},[637,10833,10834,10836,10839,10841,10843,10846],{"class":639,"line":729},[637,10835,677],{"class":676},[637,10837,10838],{"class":683}," Robot ",[637,10840,8454],{"class":676},[637,10842,699],{"class":642},[637,10844,10845],{"class":663},"./Robot.vue",[637,10847,705],{"class":642},[637,10849,10850],{"class":639,"line":739},[637,10851,742],{"emptyLinePlaceholder":594},[637,10853,10854,10856,10858,10860,10862,10864,10866,10868,10870,10873,10875],{"class":639,"line":745},[637,10855,2438],{"class":650},[637,10857,680],{"class":642},[637,10859,4393],{"class":683},[637,10861,2451],{"class":642},[637,10863,2454],{"class":642},[637,10865,4370],{"class":2457},[637,10867,2460],{"class":683},[637,10869,2463],{"class":642},[637,10871,10872],{"class":663},"/robot.glb",[637,10874,2463],{"class":642},[637,10876,2471],{"class":683},[637,10878,10879,10881,10883],{"class":639,"line":755},[637,10880,732],{"class":642},[637,10882,647],{"class":646},[637,10884,669],{"class":642},[637,10886,10887],{"class":639,"line":778},[637,10888,742],{"emptyLinePlaceholder":594},[637,10890,10891,10893,10895],{"class":639,"line":790},[637,10892,643],{"class":642},[637,10894,750],{"class":646},[637,10896,669],{"class":642},[637,10898,10899,10901,10903],{"class":639,"line":800},[637,10900,758],{"class":642},[637,10902,761],{"class":646},[637,10904,669],{"class":642},[637,10906,10907,10909,10911,10913,10915,10917,10920,10922],{"class":639,"line":805},[637,10908,781],{"class":642},[637,10910,784],{"class":646},[637,10912,1508],{"class":650},[637,10914,657],{"class":642},[637,10916,660],{"class":642},[637,10918,10919],{"class":663},"[12, 9, 12]",[637,10921,660],{"class":642},[637,10923,787],{"class":642},[637,10925,10927,10929,10931,10934,10936,10938,10941,10943],{"class":10926,"line":827},[639,673],[637,10928,781],{"class":642},[637,10930,77],{"class":646},[637,10932,10933],{"class":650}," :meshes",[637,10935,657],{"class":642},[637,10937,660],{"class":642},[637,10939,10940],{"class":663},"{ Body: nodes.Body, Eye: nodes.Eye }",[637,10942,660],{"class":642},[637,10944,669],{"class":642},[637,10946,10948,10950,10953,10955,10957,10959,10962,10964],{"class":10947,"line":631},[639,673],[637,10949,853],{"class":642},[637,10951,10952],{"class":646},"Robot",[637,10954,1508],{"class":650},[637,10956,657],{"class":642},[637,10958,660],{"class":642},[637,10960,10961],{"class":663},"[-2, 0, 0]",[637,10963,660],{"class":642},[637,10965,787],{"class":642},[637,10967,10969,10971,10973,10975,10977,10979,10981,10983],{"class":10968,"line":850},[639,673],[637,10970,853],{"class":642},[637,10972,10952],{"class":646},[637,10974,1508],{"class":650},[637,10976,657],{"class":642},[637,10978,660],{"class":642},[637,10980,9644],{"class":663},[637,10982,660],{"class":642},[637,10984,787],{"class":642},[637,10986,10988,10990,10992,10994,10996,10998,11001,11003],{"class":10987,"line":861},[639,673],[637,10989,853],{"class":642},[637,10991,10952],{"class":646},[637,10993,1508],{"class":650},[637,10995,657],{"class":642},[637,10997,660],{"class":642},[637,10999,11000],{"class":663},"[2, 0, 0]",[637,11002,660],{"class":642},[637,11004,787],{"class":642},[637,11006,11008,11010,11012],{"class":11007,"line":872},[639,673],[637,11009,895],{"class":642},[637,11011,77],{"class":646},[637,11013,669],{"class":642},[637,11015,11017,11019,11021],{"class":11016,"line":882},[639,673],[637,11018,905],{"class":642},[637,11020,761],{"class":646},[637,11022,669],{"class":642},[637,11024,11026,11028,11030],{"class":11025,"line":632},[639,673],[637,11027,732],{"class":642},[637,11029,750],{"class":646},[637,11031,669],{"class":642},[2028,11033,11034],{},[614,11035,11036,11037,11039],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[618,11038,8265],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[504,11041,11043],{"id":11042},"instancing-a-whole-gltf","Instancing a whole glTF",[614,11045,11046,11048,11049,11052],{},[618,11047,133],{}," gives you ",[618,11050,11051],{},"nodes",", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[626,11054,11056],{"className":628,"code":11055,"language":633,"meta":576,"style":576},"\u003CMerged :meshes=\"{ Screw: nodes.Screw, Bolt: nodes.Bolt }\">\n \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n\u003C/Merged>\n",[618,11057,11058,11108,11113],{"__ignoreMap":576},[637,11059,11060,11062,11064,11066,11069,11071,11073,11075,11078,11080,11083,11085,11088,11090,11093,11095,11097,11099,11102,11104,11106],{"class":639,"line":577},[637,11061,643],{"class":642},[637,11063,77],{"class":646},[637,11065,3052],{"class":642},[637,11067,11068],{"class":650},"meshes",[637,11070,657],{"class":642},[637,11072,660],{"class":642},[637,11074,8459],{"class":642},[637,11076,11077],{"class":646}," Screw",[637,11079,1240],{"class":642},[637,11081,11082],{"class":683}," nodes",[637,11084,1146],{"class":642},[637,11086,11087],{"class":683},"Screw",[637,11089,687],{"class":642},[637,11091,11092],{"class":646}," Bolt",[637,11094,1240],{"class":642},[637,11096,11082],{"class":683},[637,11098,1146],{"class":642},[637,11100,11101],{"class":683},"Bolt ",[637,11103,2451],{"class":642},[637,11105,660],{"class":642},[637,11107,669],{"class":642},[637,11109,11110],{"class":639,"line":578},[637,11111,11112],{"class":683}," \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n",[637,11114,11115,11117,11119],{"class":639,"line":708},[637,11116,732],{"class":642},[637,11118,77],{"class":646},[637,11120,669],{"class":642},[614,11122,11123],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[504,11125,11127],{"id":11126},"opting-a-node-out","Opting a node out",[614,11129,8277,11130,11132,11133,11136,11137,11139],{},[618,11131,8265],{}," is all-or-nothing per node: it uses the batch's geometry and material. When one\nnode needs its own material, a different geometry, or its own shader, render a normal ",[618,11134,11135],{},"\u003CTresMesh />","\ninstead of an ",[618,11138,8265],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[504,11141,922],{"id":921},[927,11143,11144,11154],{},[930,11145,11146],{},[933,11147,11148,11150,11152],{},[936,11149,938],{"align":997},[936,11151,941],{"align":997},[936,11153,944],{},[946,11155,11156,11172],{},[933,11157,11158,11162,11168],{},[951,11159,11160],{"align":997},[618,11161,11068],{},[951,11163,11164,11165,11167],{"align":997},"One batch per entry, keyed by what ",[618,11166,10532],{}," joins.",[951,11169,11170],{},[1697,11171,9280],{},[933,11173,11174,11178,11186],{},[951,11175,11176],{"align":997},[618,11177,9100],{},[951,11179,11180,11181,11183,11184,1146],{"align":997},"Initial buffer allocation per batch. One batch per entry in ",[618,11182,11068],{},", so it defaults lower than ",[618,11185,8258],{},[951,11187,11188],{},[618,11189,11190],{},"100",[614,11192,11193,11194,1146],{},"Exposes the named batch registry through ",[618,11195,9252],{},[9440,11197,11198],{"to":66},[614,11199,11200,11201,11203,11204,1146],{},"Per-instance colors, pointer events, visibility and the ",[618,11202,9100],{}," growth behaviour are documented on ",[618,11205,8258],{},[1349,11207,11208],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":11210},[11211,11212,11213,11214],{"id":624,"depth":578,"text":15},{"id":11042,"depth":578,"text":11043},{"id":11126,"depth":578,"text":11127},{"id":921,"depth":578,"text":922},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11215},"C2ZYlA8AWc0pX47Tdp8yJPJh6JofaryewUtJVMvgXZw",{"id":11220,"title":81,"body":11221,"description":11692,"extension":591,"links":592,"meta":11693,"navigation":594,"path":82,"seo":11694,"stem":83,"__hash__":11695},"docs/2.api/1.abstractions/outline.md",{"type":501,"value":11222,"toc":11688},[11223,11228,11239,11241,11588,11590,11686],[608,11224,11225],{},[11226,11227],"abstractions-outline",{},[614,11229,11230,11233,11234,3086,11236,1146],{},[618,11231,11232],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[618,11235,2333],{},[618,11237,11238],{},"\u003CTresSkinnedMesh>",[504,11240,15],{"id":624},[626,11242,11245],{"className":628,"code":11243,"highlights":11244,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, Outline } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n \u003CTresAmbientLight :intensity=\"3.14\" />\n \u003CTresPointLight :intensity=\"50\" :position=\"[2, 2, 0]\" />\n \u003CTresMesh :position-x=\"-0.75\">\n \u003CTresBoxGeometry />\n \u003CTresMeshPhongMaterial />\n \u003COutline :thickness=\"7.5\" color=\"#82dbc5\" />\n \u003C/TresMesh>\n \u003CTresMesh :position-x=\"0.75\">\n \u003CTresSphereGeometry :args=\"[0.5]\" />\n \u003CTresMeshPhongMaterial />\n \u003COutline :thickness=\"7.5\" color=\"#fbb03b\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n\n",[708,861,912],[618,11246,11247,11267,11285,11309,11317,11321,11329,11347,11355,11363,11382,11413,11433,11441,11450,11482,11490,11508,11527,11535,11564,11572,11580],{"__ignoreMap":576},[637,11248,11249,11251,11253,11255,11257,11259,11261,11263,11265],{"class":639,"line":577},[637,11250,643],{"class":642},[637,11252,647],{"class":646},[637,11254,651],{"class":650},[637,11256,654],{"class":650},[637,11258,657],{"class":642},[637,11260,660],{"class":642},[637,11262,664],{"class":663},[637,11264,660],{"class":642},[637,11266,669],{"class":642},[637,11268,11269,11271,11273,11275,11277,11279,11281,11283],{"class":639,"line":578},[637,11270,677],{"class":676},[637,11272,680],{"class":642},[637,11274,715],{"class":683},[637,11276,693],{"class":642},[637,11278,696],{"class":676},[637,11280,699],{"class":642},[637,11282,724],{"class":663},[637,11284,705],{"class":642},[637,11286,11288,11290,11292,11294,11296,11299,11301,11303,11305,11307],{"class":11287,"line":708},[639,673],[637,11289,677],{"class":676},[637,11291,680],{"class":642},[637,11293,690],{"class":683},[637,11295,687],{"class":642},[637,11297,11298],{"class":683}," Outline",[637,11300,693],{"class":642},[637,11302,696],{"class":676},[637,11304,699],{"class":642},[637,11306,702],{"class":663},[637,11308,705],{"class":642},[637,11310,11311,11313,11315],{"class":639,"line":729},[637,11312,732],{"class":642},[637,11314,647],{"class":646},[637,11316,669],{"class":642},[637,11318,11319],{"class":639,"line":739},[637,11320,742],{"emptyLinePlaceholder":594},[637,11322,11323,11325,11327],{"class":639,"line":745},[637,11324,643],{"class":642},[637,11326,750],{"class":646},[637,11328,669],{"class":642},[637,11330,11331,11333,11335,11337,11339,11341,11343,11345],{"class":639,"line":755},[637,11332,758],{"class":642},[637,11334,761],{"class":646},[637,11336,764],{"class":650},[637,11338,657],{"class":642},[637,11340,660],{"class":642},[637,11342,10031],{"class":663},[637,11344,660],{"class":642},[637,11346,669],{"class":642},[637,11348,11349,11351,11353],{"class":639,"line":778},[637,11350,781],{"class":642},[637,11352,784],{"class":646},[637,11354,787],{"class":642},[637,11356,11357,11359,11361],{"class":639,"line":790},[637,11358,781],{"class":642},[637,11360,795],{"class":646},[637,11362,787],{"class":642},[637,11364,11365,11367,11369,11371,11373,11375,11378,11380],{"class":639,"line":800},[637,11366,781],{"class":642},[637,11368,9702],{"class":646},[637,11370,1890],{"class":650},[637,11372,657],{"class":642},[637,11374,660],{"class":642},[637,11376,11377],{"class":663},"3.14",[637,11379,660],{"class":642},[637,11381,787],{"class":642},[637,11383,11384,11386,11389,11391,11393,11395,11398,11400,11402,11404,11406,11409,11411],{"class":639,"line":805},[637,11385,781],{"class":642},[637,11387,11388],{"class":646},"TresPointLight",[637,11390,1890],{"class":650},[637,11392,657],{"class":642},[637,11394,660],{"class":642},[637,11396,11397],{"class":663},"50",[637,11399,660],{"class":642},[637,11401,1508],{"class":650},[637,11403,657],{"class":642},[637,11405,660],{"class":642},[637,11407,11408],{"class":663},"[2, 2, 0]",[637,11410,660],{"class":642},[637,11412,787],{"class":642},[637,11414,11415,11417,11419,11422,11424,11426,11429,11431],{"class":639,"line":827},[637,11416,781],{"class":642},[637,11418,856],{"class":646},[637,11420,11421],{"class":650}," :position-x",[637,11423,657],{"class":642},[637,11425,660],{"class":642},[637,11427,11428],{"class":663},"-0.75",[637,11430,660],{"class":642},[637,11432,669],{"class":642},[637,11434,11435,11437,11439],{"class":639,"line":631},[637,11436,853],{"class":642},[637,11438,867],{"class":646},[637,11440,787],{"class":642},[637,11442,11443,11445,11448],{"class":639,"line":850},[637,11444,853],{"class":642},[637,11446,11447],{"class":646},"TresMeshPhongMaterial",[637,11449,787],{"class":642},[637,11451,11453,11455,11457,11460,11462,11464,11467,11469,11471,11473,11475,11478,11480],{"class":11452,"line":861},[639,673],[637,11454,853],{"class":642},[637,11456,81],{"class":646},[637,11458,11459],{"class":650}," :thickness",[637,11461,657],{"class":642},[637,11463,660],{"class":642},[637,11465,11466],{"class":663},"7.5",[637,11468,660],{"class":642},[637,11470,2712],{"class":650},[637,11472,657],{"class":642},[637,11474,660],{"class":642},[637,11476,11477],{"class":663},"#82dbc5",[637,11479,660],{"class":642},[637,11481,787],{"class":642},[637,11483,11484,11486,11488],{"class":639,"line":872},[637,11485,895],{"class":642},[637,11487,856],{"class":646},[637,11489,669],{"class":642},[637,11491,11492,11494,11496,11498,11500,11502,11504,11506],{"class":639,"line":882},[637,11493,781],{"class":642},[637,11495,856],{"class":646},[637,11497,11421],{"class":650},[637,11499,657],{"class":642},[637,11501,660],{"class":642},[637,11503,2574],{"class":663},[637,11505,660],{"class":642},[637,11507,669],{"class":642},[637,11509,11510,11512,11514,11516,11518,11520,11523,11525],{"class":639,"line":632},[637,11511,853],{"class":642},[637,11513,3981],{"class":646},[637,11515,1982],{"class":650},[637,11517,657],{"class":642},[637,11519,660],{"class":642},[637,11521,11522],{"class":663},"[0.5]",[637,11524,660],{"class":642},[637,11526,787],{"class":642},[637,11528,11529,11531,11533],{"class":639,"line":902},[637,11530,853],{"class":642},[637,11532,11447],{"class":646},[637,11534,787],{"class":642},[637,11536,11538,11540,11542,11544,11546,11548,11550,11552,11554,11556,11558,11560,11562],{"class":11537,"line":912},[639,673],[637,11539,853],{"class":642},[637,11541,81],{"class":646},[637,11543,11459],{"class":650},[637,11545,657],{"class":642},[637,11547,660],{"class":642},[637,11549,11466],{"class":663},[637,11551,660],{"class":642},[637,11553,2712],{"class":650},[637,11555,657],{"class":642},[637,11557,660],{"class":642},[637,11559,10174],{"class":663},[637,11561,660],{"class":642},[637,11563,787],{"class":642},[637,11565,11566,11568,11570],{"class":639,"line":2648},[637,11567,895],{"class":642},[637,11569,856],{"class":646},[637,11571,669],{"class":642},[637,11573,11574,11576,11578],{"class":639,"line":2657},[637,11575,905],{"class":642},[637,11577,761],{"class":646},[637,11579,669],{"class":642},[637,11581,11582,11584,11586],{"class":639,"line":2677},[637,11583,732],{"class":642},[637,11585,750],{"class":646},[637,11587,669],{"class":642},[504,11589,922],{"id":921},[927,11591,11592,11602],{},[930,11593,11594],{},[933,11595,11596,11598,11600],{},[936,11597,922],{},[936,11599,941],{},[936,11601,944],{},[946,11603,11604,11616,11628,11640,11652,11665],{},[933,11605,11606,11608,11611],{},[951,11607,7568],{},[951,11609,11610],{},"Outline color",[951,11612,11613],{},[618,11614,11615],{},"'black'",[933,11617,11618,11621,11624],{},[951,11619,11620],{},"screenspace",[951,11622,11623],{},"Whether line thickness is independent of zoom",[951,11625,11626],{},[618,11627,971],{},[933,11629,11630,11633,11636],{},[951,11631,11632],{},"opacity",[951,11634,11635],{},"Outline opacity",[951,11637,11638],{},[618,11639,1897],{},[933,11641,11642,11645,11648],{},[951,11643,11644],{},"transparent",[951,11646,11647],{},"Outline transparency",[951,11649,11650],{},[618,11651,971],{},[933,11653,11654,11657,11660],{},[951,11655,11656],{},"thickness",[951,11658,11659],{},"Outline thickness",[951,11661,11662],{},[618,11663,11664],{},"0.05",[933,11666,11667,11670,11681],{},[951,11668,11669],{},"angle",[951,11671,11672,11673,11675,11676],{},"Geometry crease angle (",[618,11674,965],{}," is no crease). See ",[1140,11677,11680],{"href":11678,"rel":11679},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1144],"BufferGeometryUtils.toCreasedNormals",[951,11682,11683],{},[618,11684,11685],{},"Math.PI",[1349,11687,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":11689},[11690,11691],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":11692},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":11697,"title":85,"body":11698,"description":12494,"extension":591,"links":592,"meta":12495,"navigation":594,"path":86,"seo":12496,"stem":87,"__hash__":12497},"docs/2.api/1.abstractions/sampler.md",{"type":501,"value":11699,"toc":12489},[11700,11705,11708,11710,12003,12005,12070,12074,12081,12486],[608,11701,11702],{},[11703,11704],"abstractions-sampler",{},[614,11706,11707],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[504,11709,15],{"id":624},[626,11711,11714],{"className":628,"code":11712,"highlights":11713,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n \u003COrbitControls />\n\n \u003CSampler :count=\"50\">\n \u003CTresMesh>\n \u003CTresTorusGeometry />\n \u003C/TresMesh>\n\n \u003CTresInstancedMesh :args=\"[null!, null!, 1000]\">\n \u003CTresBoxGeometry :args=\"[0.1, 0.1, 0.1]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresInstancedMesh>\n \u003C/Sampler>\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,805,827,631,850,861,872,882,632,902,912],[618,11715,11716,11736,11760,11778,11786,11790,11798,11817,11836,11844,11848,11868,11877,11887,11896,11901,11921,11941,11950,11959,11968,11987,11995],{"__ignoreMap":576},[637,11717,11718,11720,11722,11724,11726,11728,11730,11732,11734],{"class":639,"line":577},[637,11719,643],{"class":642},[637,11721,647],{"class":646},[637,11723,651],{"class":650},[637,11725,654],{"class":650},[637,11727,657],{"class":642},[637,11729,660],{"class":642},[637,11731,664],{"class":663},[637,11733,660],{"class":642},[637,11735,669],{"class":642},[637,11737,11739,11741,11743,11745,11747,11750,11752,11754,11756,11758],{"class":11738,"line":578},[639,673],[637,11740,677],{"class":676},[637,11742,680],{"class":642},[637,11744,690],{"class":683},[637,11746,687],{"class":642},[637,11748,11749],{"class":683}," Sampler",[637,11751,693],{"class":642},[637,11753,696],{"class":676},[637,11755,699],{"class":642},[637,11757,702],{"class":663},[637,11759,705],{"class":642},[637,11761,11762,11764,11766,11768,11770,11772,11774,11776],{"class":639,"line":708},[637,11763,677],{"class":676},[637,11765,680],{"class":642},[637,11767,715],{"class":683},[637,11769,693],{"class":642},[637,11771,696],{"class":676},[637,11773,699],{"class":642},[637,11775,724],{"class":663},[637,11777,705],{"class":642},[637,11779,11780,11782,11784],{"class":639,"line":729},[637,11781,732],{"class":642},[637,11783,647],{"class":646},[637,11785,669],{"class":642},[637,11787,11788],{"class":639,"line":739},[637,11789,742],{"emptyLinePlaceholder":594},[637,11791,11792,11794,11796],{"class":639,"line":745},[637,11793,643],{"class":642},[637,11795,750],{"class":646},[637,11797,669],{"class":642},[637,11799,11800,11802,11804,11806,11808,11810,11813,11815],{"class":639,"line":755},[637,11801,758],{"class":642},[637,11803,761],{"class":646},[637,11805,764],{"class":650},[637,11807,657],{"class":642},[637,11809,660],{"class":642},[637,11811,11812],{"class":663},"#82DBC5",[637,11814,660],{"class":642},[637,11816,669],{"class":642},[637,11818,11819,11821,11823,11825,11827,11829,11832,11834],{"class":639,"line":778},[637,11820,781],{"class":642},[637,11822,784],{"class":646},[637,11824,1508],{"class":650},[637,11826,657],{"class":642},[637,11828,660],{"class":642},[637,11830,11831],{"class":663},"[0, 0.5, 5]",[637,11833,660],{"class":642},[637,11835,787],{"class":642},[637,11837,11838,11840,11842],{"class":639,"line":790},[637,11839,781],{"class":642},[637,11841,795],{"class":646},[637,11843,787],{"class":642},[637,11845,11846],{"class":639,"line":800},[637,11847,742],{"emptyLinePlaceholder":594},[637,11849,11851,11853,11855,11858,11860,11862,11864,11866],{"class":11850,"line":805},[639,673],[637,11852,781],{"class":642},[637,11854,85],{"class":646},[637,11856,11857],{"class":650}," :count",[637,11859,657],{"class":642},[637,11861,660],{"class":642},[637,11863,11397],{"class":663},[637,11865,660],{"class":642},[637,11867,669],{"class":642},[637,11869,11871,11873,11875],{"class":11870,"line":827},[639,673],[637,11872,853],{"class":642},[637,11874,856],{"class":646},[637,11876,669],{"class":642},[637,11878,11880,11882,11885],{"class":11879,"line":631},[639,673],[637,11881,864],{"class":642},[637,11883,11884],{"class":646},"TresTorusGeometry",[637,11886,787],{"class":642},[637,11888,11890,11892,11894],{"class":11889,"line":850},[639,673],[637,11891,885],{"class":642},[637,11893,856],{"class":646},[637,11895,669],{"class":642},[637,11897,11899],{"class":11898,"line":861},[639,673],[637,11900,742],{"emptyLinePlaceholder":594},[637,11902,11904,11906,11908,11910,11912,11914,11917,11919],{"class":11903,"line":872},[639,673],[637,11905,853],{"class":642},[637,11907,9239],{"class":646},[637,11909,1982],{"class":650},[637,11911,657],{"class":642},[637,11913,660],{"class":642},[637,11915,11916],{"class":663},"[null!, null!, 1000]",[637,11918,660],{"class":642},[637,11920,669],{"class":642},[637,11922,11924,11926,11928,11930,11932,11934,11937,11939],{"class":11923,"line":882},[639,673],[637,11925,864],{"class":642},[637,11927,867],{"class":646},[637,11929,1982],{"class":650},[637,11931,657],{"class":642},[637,11933,660],{"class":642},[637,11935,11936],{"class":663},"[0.1, 0.1, 0.1]",[637,11938,660],{"class":642},[637,11940,787],{"class":642},[637,11942,11944,11946,11948],{"class":11943,"line":632},[639,673],[637,11945,864],{"class":642},[637,11947,877],{"class":646},[637,11949,787],{"class":642},[637,11951,11953,11955,11957],{"class":11952,"line":902},[639,673],[637,11954,885],{"class":642},[637,11956,9239],{"class":646},[637,11958,669],{"class":642},[637,11960,11962,11964,11966],{"class":11961,"line":912},[639,673],[637,11963,895],{"class":642},[637,11965,85],{"class":646},[637,11967,669],{"class":642},[637,11969,11970,11972,11974,11976,11978,11980,11983,11985],{"class":639,"line":2648},[637,11971,781],{"class":642},[637,11973,8070],{"class":646},[637,11975,1982],{"class":650},[637,11977,657],{"class":642},[637,11979,660],{"class":642},[637,11981,11982],{"class":663},"[10, 10]",[637,11984,660],{"class":642},[637,11986,787],{"class":642},[637,11988,11989,11991,11993],{"class":639,"line":2657},[637,11990,905],{"class":642},[637,11992,761],{"class":646},[637,11994,669],{"class":642},[637,11996,11997,11999,12001],{"class":639,"line":2677},[637,11998,732],{"class":642},[637,12000,750],{"class":646},[637,12002,669],{"class":642},[504,12004,922],{"id":921},[927,12006,12007,12015],{},[930,12008,12009],{},[933,12010,12011,12013],{},[936,12012,922],{},[936,12014,941],{},[946,12016,12017,12026,12037,12048,12059],{},[933,12018,12019,12021],{},[951,12020,5628],{},[951,12022,12023,12025],{},[1692,12024,4315],{}," Surface mesh from which to sample",[933,12027,12028,12031],{},[951,12029,12030],{},"count",[951,12032,12033,12036],{},[1692,12034,12035],{},"Number"," Number of samples",[933,12038,12039,12042],{},[951,12040,12041],{},"instanceMesh",[951,12043,12044,12047],{},[1692,12045,12046],{},"InstanceMesh"," InstanceMesh to scatter",[933,12049,12050,12053],{},[951,12051,12052],{},"weight",[951,12054,12055,12058],{},[1692,12056,12057],{},"String"," A vertex attribute to be used as a weight when sampling",[933,12060,12061,12064],{},[951,12062,12063],{},"transform",[951,12065,12066,12069],{},[1692,12067,12068],{},"Function"," A function that can be used as a custom sampling",[504,12071,12073],{"id":12072},"usesurfacesampler","useSurfaceSampler",[614,12075,12076,12077],{},"A hook to obtain the result of the ",[12078,12079,12080],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[626,12082,12085],{"className":628,"code":12083,"highlights":12084,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, useSurfaceSampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref, watch } from 'vue'\n\nconst torusRef = ref()\nconst instancesRef = ref()\n\nwatch(torusRef, (value) => {\n useSurfaceSampler(value, 50, instancesRef.value, 'color')\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n \u003COrbitControls />\n\n \u003CTresMesh ref=\"torusRef\">\n \u003CTresTorusGeometry />\n \u003C/TresMesh>\n\n \u003CTresInstancedMesh\n ref=\"instancesRef\"\n :args=\"[null!, null!, 1_000]\"\n >\n \u003CTresSphereGeometry :args=\"[0.1, 32, 32]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresInstancedMesh>\n\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,800],[618,12086,12087,12107,12131,12149,12172,12176,12189,12202,12206,12226,12260,12266,12274,12278,12286,12304,12322,12330,12334,12353,12361,12369,12373,12380,12394,12408,12413,12432,12440,12448,12452,12470,12478],{"__ignoreMap":576},[637,12088,12089,12091,12093,12095,12097,12099,12101,12103,12105],{"class":639,"line":577},[637,12090,643],{"class":642},[637,12092,647],{"class":646},[637,12094,651],{"class":650},[637,12096,654],{"class":650},[637,12098,657],{"class":642},[637,12100,660],{"class":642},[637,12102,664],{"class":663},[637,12104,660],{"class":642},[637,12106,669],{"class":642},[637,12108,12110,12112,12114,12116,12118,12121,12123,12125,12127,12129],{"class":12109,"line":578},[639,673],[637,12111,677],{"class":676},[637,12113,680],{"class":642},[637,12115,690],{"class":683},[637,12117,687],{"class":642},[637,12119,12120],{"class":683}," useSurfaceSampler",[637,12122,693],{"class":642},[637,12124,696],{"class":676},[637,12126,699],{"class":642},[637,12128,702],{"class":663},[637,12130,705],{"class":642},[637,12132,12133,12135,12137,12139,12141,12143,12145,12147],{"class":639,"line":708},[637,12134,677],{"class":676},[637,12136,680],{"class":642},[637,12138,715],{"class":683},[637,12140,693],{"class":642},[637,12142,696],{"class":676},[637,12144,699],{"class":642},[637,12146,724],{"class":663},[637,12148,705],{"class":642},[637,12150,12151,12153,12155,12157,12159,12162,12164,12166,12168,12170],{"class":639,"line":729},[637,12152,677],{"class":676},[637,12154,680],{"class":642},[637,12156,3895],{"class":683},[637,12158,687],{"class":642},[637,12160,12161],{"class":683}," watch",[637,12163,693],{"class":642},[637,12165,696],{"class":676},[637,12167,699],{"class":642},[637,12169,633],{"class":663},[637,12171,705],{"class":642},[637,12173,12174],{"class":639,"line":739},[637,12175,742],{"emptyLinePlaceholder":594},[637,12177,12178,12180,12183,12185,12187],{"class":639,"line":745},[637,12179,2438],{"class":650},[637,12181,12182],{"class":683}," torusRef ",[637,12184,657],{"class":642},[637,12186,3895],{"class":2457},[637,12188,6556],{"class":683},[637,12190,12191,12193,12196,12198,12200],{"class":639,"line":755},[637,12192,2438],{"class":650},[637,12194,12195],{"class":683}," instancesRef ",[637,12197,657],{"class":642},[637,12199,3895],{"class":2457},[637,12201,6556],{"class":683},[637,12203,12204],{"class":639,"line":778},[637,12205,742],{"emptyLinePlaceholder":594},[637,12207,12208,12211,12214,12216,12218,12220,12222,12224],{"class":639,"line":790},[637,12209,12210],{"class":2457},"watch",[637,12212,12213],{"class":683},"(torusRef",[637,12215,687],{"class":642},[637,12217,3097],{"class":642},[637,12219,3708],{"class":6859},[637,12221,3363],{"class":642},[637,12223,3700],{"class":650},[637,12225,1226],{"class":642},[637,12227,12229,12232,12234,12236,12238,12241,12243,12246,12248,12250,12252,12254,12256,12258],{"class":12228,"line":800},[639,673],[637,12230,12231],{"class":2457}," useSurfaceSampler",[637,12233,2460],{"class":646},[637,12235,3708],{"class":683},[637,12237,687],{"class":642},[637,12239,12240],{"class":2524}," 50",[637,12242,687],{"class":642},[637,12244,12245],{"class":683}," instancesRef",[637,12247,1146],{"class":642},[637,12249,3708],{"class":683},[637,12251,687],{"class":642},[637,12253,699],{"class":642},[637,12255,7568],{"class":663},[637,12257,2463],{"class":642},[637,12259,2471],{"class":646},[637,12261,12262,12264],{"class":639,"line":805},[637,12263,2451],{"class":642},[637,12265,2471],{"class":683},[637,12267,12268,12270,12272],{"class":639,"line":827},[637,12269,732],{"class":642},[637,12271,647],{"class":646},[637,12273,669],{"class":642},[637,12275,12276],{"class":639,"line":631},[637,12277,742],{"emptyLinePlaceholder":594},[637,12279,12280,12282,12284],{"class":639,"line":850},[637,12281,643],{"class":642},[637,12283,750],{"class":646},[637,12285,669],{"class":642},[637,12287,12288,12290,12292,12294,12296,12298,12300,12302],{"class":639,"line":861},[637,12289,758],{"class":642},[637,12291,761],{"class":646},[637,12293,764],{"class":650},[637,12295,657],{"class":642},[637,12297,660],{"class":642},[637,12299,11812],{"class":663},[637,12301,660],{"class":642},[637,12303,669],{"class":642},[637,12305,12306,12308,12310,12312,12314,12316,12318,12320],{"class":639,"line":872},[637,12307,781],{"class":642},[637,12309,784],{"class":646},[637,12311,1508],{"class":650},[637,12313,657],{"class":642},[637,12315,660],{"class":642},[637,12317,11831],{"class":663},[637,12319,660],{"class":642},[637,12321,787],{"class":642},[637,12323,12324,12326,12328],{"class":639,"line":882},[637,12325,781],{"class":642},[637,12327,795],{"class":646},[637,12329,787],{"class":642},[637,12331,12332],{"class":639,"line":632},[637,12333,742],{"emptyLinePlaceholder":594},[637,12335,12336,12338,12340,12342,12344,12346,12349,12351],{"class":639,"line":902},[637,12337,781],{"class":642},[637,12339,856],{"class":646},[637,12341,3895],{"class":650},[637,12343,657],{"class":642},[637,12345,660],{"class":642},[637,12347,12348],{"class":663},"torusRef",[637,12350,660],{"class":642},[637,12352,669],{"class":642},[637,12354,12355,12357,12359],{"class":639,"line":912},[637,12356,853],{"class":642},[637,12358,11884],{"class":646},[637,12360,787],{"class":642},[637,12362,12363,12365,12367],{"class":639,"line":2648},[637,12364,895],{"class":642},[637,12366,856],{"class":646},[637,12368,669],{"class":642},[637,12370,12371],{"class":639,"line":2657},[637,12372,742],{"emptyLinePlaceholder":594},[637,12374,12375,12377],{"class":639,"line":2677},[637,12376,781],{"class":642},[637,12378,12379],{"class":646},"TresInstancedMesh\n",[637,12381,12382,12385,12387,12389,12392],{"class":639,"line":2686},[637,12383,12384],{"class":650}," ref",[637,12386,657],{"class":642},[637,12388,660],{"class":642},[637,12390,12391],{"class":663},"instancesRef",[637,12393,3154],{"class":642},[637,12395,12396,12399,12401,12403,12406],{"class":639,"line":2695},[637,12397,12398],{"class":650}," :args",[637,12400,657],{"class":642},[637,12402,660],{"class":642},[637,12404,12405],{"class":663},"[null!, null!, 1_000]",[637,12407,3154],{"class":642},[637,12409,12410],{"class":639,"line":2704},[637,12411,12412],{"class":642}," >\n",[637,12414,12415,12417,12419,12421,12423,12425,12428,12430],{"class":639,"line":2726},[637,12416,853],{"class":642},[637,12418,3981],{"class":646},[637,12420,1982],{"class":650},[637,12422,657],{"class":642},[637,12424,660],{"class":642},[637,12426,12427],{"class":663},"[0.1, 32, 32]",[637,12429,660],{"class":642},[637,12431,787],{"class":642},[637,12433,12434,12436,12438],{"class":639,"line":2770},[637,12435,853],{"class":642},[637,12437,877],{"class":646},[637,12439,787],{"class":642},[637,12441,12442,12444,12446],{"class":639,"line":2779},[637,12443,895],{"class":642},[637,12445,9239],{"class":646},[637,12447,669],{"class":642},[637,12449,12450],{"class":639,"line":2788},[637,12451,742],{"emptyLinePlaceholder":594},[637,12453,12454,12456,12458,12460,12462,12464,12466,12468],{"class":639,"line":3945},[637,12455,781],{"class":642},[637,12457,8070],{"class":646},[637,12459,1982],{"class":650},[637,12461,657],{"class":642},[637,12463,660],{"class":642},[637,12465,11982],{"class":663},[637,12467,660],{"class":642},[637,12469,787],{"class":642},[637,12471,12472,12474,12476],{"class":639,"line":3976},[637,12473,905],{"class":642},[637,12475,761],{"class":646},[637,12477,669],{"class":642},[637,12479,12480,12482,12484],{"class":639,"line":3997},[637,12481,732],{"class":642},[637,12483,750],{"class":646},[637,12485,669],{"class":642},[1349,12487,12488],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":12490},[12491,12492,12493],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":12072,"depth":578,"text":12073},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":12494},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":12499,"title":89,"body":12500,"description":12807,"extension":591,"links":592,"meta":12808,"navigation":594,"path":90,"seo":12809,"stem":91,"__hash__":12810},"docs/2.api/1.abstractions/screen-sizer.md",{"type":501,"value":12501,"toc":12803},[12502,12507,12516,12519,12521,12793,12795,12801],[2318,12503,12504],{},[12505,12506],"abstractions-screen-sizer",{},[614,12508,1373,12509,12512,12513,12515],{},[618,12510,12511],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[618,12514,1897],{}," THREE world unit will be translated to 1 screen pixel.",[614,12517,12518],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[504,12520,15],{"id":624},[626,12522,12525],{"className":628,"code":12523,"highlights":12524,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, ScreenSizer } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#3f3f3f\">\n \u003CTresPerspectiveCamera :position=\"[10, 10, 10]\" />\n \u003COrbitControls />\n \u003CScreenSizer>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[100, 100, 100]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/ScreenSizer>\n \u003CTresMesh :position-x=\"5\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800,861],[618,12526,12527,12547,12565,12589,12597,12601,12609,12628,12647,12655,12664,12672,12691,12699,12707,12716,12735,12743,12751,12759,12777,12785],{"__ignoreMap":576},[637,12528,12529,12531,12533,12535,12537,12539,12541,12543,12545],{"class":639,"line":577},[637,12530,643],{"class":642},[637,12532,647],{"class":646},[637,12534,651],{"class":650},[637,12536,654],{"class":650},[637,12538,657],{"class":642},[637,12540,660],{"class":642},[637,12542,664],{"class":663},[637,12544,660],{"class":642},[637,12546,669],{"class":642},[637,12548,12549,12551,12553,12555,12557,12559,12561,12563],{"class":639,"line":578},[637,12550,677],{"class":676},[637,12552,680],{"class":642},[637,12554,715],{"class":683},[637,12556,693],{"class":642},[637,12558,696],{"class":676},[637,12560,699],{"class":642},[637,12562,724],{"class":663},[637,12564,705],{"class":642},[637,12566,12568,12570,12572,12574,12576,12579,12581,12583,12585,12587],{"class":12567,"line":708},[639,673],[637,12569,677],{"class":676},[637,12571,680],{"class":642},[637,12573,690],{"class":683},[637,12575,687],{"class":642},[637,12577,12578],{"class":683}," ScreenSizer",[637,12580,693],{"class":642},[637,12582,696],{"class":676},[637,12584,699],{"class":642},[637,12586,702],{"class":663},[637,12588,705],{"class":642},[637,12590,12591,12593,12595],{"class":639,"line":729},[637,12592,732],{"class":642},[637,12594,647],{"class":646},[637,12596,669],{"class":642},[637,12598,12599],{"class":639,"line":739},[637,12600,742],{"emptyLinePlaceholder":594},[637,12602,12603,12605,12607],{"class":639,"line":745},[637,12604,643],{"class":642},[637,12606,750],{"class":646},[637,12608,669],{"class":642},[637,12610,12611,12613,12615,12617,12619,12621,12624,12626],{"class":639,"line":755},[637,12612,758],{"class":642},[637,12614,761],{"class":646},[637,12616,764],{"class":650},[637,12618,657],{"class":642},[637,12620,660],{"class":642},[637,12622,12623],{"class":663},"#3f3f3f",[637,12625,660],{"class":642},[637,12627,669],{"class":642},[637,12629,12630,12632,12634,12636,12638,12640,12643,12645],{"class":639,"line":778},[637,12631,781],{"class":642},[637,12633,784],{"class":646},[637,12635,1508],{"class":650},[637,12637,657],{"class":642},[637,12639,660],{"class":642},[637,12641,12642],{"class":663},"[10, 10, 10]",[637,12644,660],{"class":642},[637,12646,787],{"class":642},[637,12648,12649,12651,12653],{"class":639,"line":790},[637,12650,781],{"class":642},[637,12652,795],{"class":646},[637,12654,787],{"class":642},[637,12656,12658,12660,12662],{"class":12657,"line":800},[639,673],[637,12659,781],{"class":642},[637,12661,89],{"class":646},[637,12663,669],{"class":642},[637,12665,12666,12668,12670],{"class":639,"line":805},[637,12667,853],{"class":642},[637,12669,856],{"class":646},[637,12671,669],{"class":642},[637,12673,12674,12676,12678,12680,12682,12684,12687,12689],{"class":639,"line":827},[637,12675,864],{"class":642},[637,12677,867],{"class":646},[637,12679,1982],{"class":650},[637,12681,657],{"class":642},[637,12683,660],{"class":642},[637,12685,12686],{"class":663},"[100, 100, 100]",[637,12688,660],{"class":642},[637,12690,787],{"class":642},[637,12692,12693,12695,12697],{"class":639,"line":631},[637,12694,864],{"class":642},[637,12696,877],{"class":646},[637,12698,787],{"class":642},[637,12700,12701,12703,12705],{"class":639,"line":850},[637,12702,885],{"class":642},[637,12704,856],{"class":646},[637,12706,669],{"class":642},[637,12708,12710,12712,12714],{"class":12709,"line":861},[639,673],[637,12711,895],{"class":642},[637,12713,89],{"class":646},[637,12715,669],{"class":642},[637,12717,12718,12720,12722,12724,12726,12728,12731,12733],{"class":639,"line":872},[637,12719,781],{"class":642},[637,12721,856],{"class":646},[637,12723,11421],{"class":650},[637,12725,657],{"class":642},[637,12727,660],{"class":642},[637,12729,12730],{"class":663},"5",[637,12732,660],{"class":642},[637,12734,669],{"class":642},[637,12736,12737,12739,12741],{"class":639,"line":882},[637,12738,853],{"class":642},[637,12740,867],{"class":646},[637,12742,787],{"class":642},[637,12744,12745,12747,12749],{"class":639,"line":632},[637,12746,853],{"class":642},[637,12748,877],{"class":646},[637,12750,787],{"class":642},[637,12752,12753,12755,12757],{"class":639,"line":902},[637,12754,895],{"class":642},[637,12756,856],{"class":646},[637,12758,669],{"class":642},[637,12760,12761,12763,12765,12767,12769,12771,12773,12775],{"class":639,"line":912},[637,12762,781],{"class":642},[637,12764,8070],{"class":646},[637,12766,1982],{"class":650},[637,12768,657],{"class":642},[637,12770,660],{"class":642},[637,12772,11982],{"class":663},[637,12774,660],{"class":642},[637,12776,787],{"class":642},[637,12778,12779,12781,12783],{"class":639,"line":2648},[637,12780,905],{"class":642},[637,12782,761],{"class":646},[637,12784,669],{"class":642},[637,12786,12787,12789,12791],{"class":639,"line":2657},[637,12788,732],{"class":642},[637,12790,750],{"class":646},[637,12792,669],{"class":642},[504,12794,922],{"id":921},[614,12796,12797,12798,1146],{},"Inherits all props from ",[618,12799,12800],{},"THREE.Object3D",[1349,12802,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":12804},[12805,12806],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":89,"description":12807},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":12812,"title":93,"body":12813,"description":13183,"extension":591,"links":592,"meta":13184,"navigation":594,"path":94,"seo":13185,"stem":95,"__hash__":13186},"docs/2.api/1.abstractions/screen-space.md",{"type":501,"value":12814,"toc":13179},[12815,12820,12833,12855,12857,13083,13085,13177],[608,12816,12817],{},[12818,12819],"abstractions-screen-space",{},[614,12821,12822,12825,12826,12829,12830,1146],{},[618,12823,12824],{},"\u003CScreenSpace />"," wraps its children in a ",[618,12827,12828],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[618,12831,12832],{},":depth",[614,12834,12835,12836,1695,12838,1695,12840,1695,12842,12844,12845,12848,12849,7640,12852,1146],{},"Additionally, the ",[618,12837,955],{},[618,12839,978],{},[618,12841,997],{},[618,12843,1016],{}," props can be used to position them similarly to CSS ",[618,12846,12847],{},"position: absolute"," property when using a ",[618,12850,12851],{},"PerspectiveCamera",[618,12853,12854],{},"OrtographicCamera",[504,12856,15],{"id":624},[626,12858,12861],{"className":628,"code":12859,"highlights":12860,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, ScreenSpace } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n\n \u003CScreenSpace :depth=\"5\">\n \u003CTresMesh>\n \u003CTresTorusGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/ScreenSpace>\n\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,805,872],[618,12862,12863,12883,12907,12925,12933,12937,12945,12964,12972,12980,12984,13004,13012,13020,13028,13036,13045,13049,13067,13075],{"__ignoreMap":576},[637,12864,12865,12867,12869,12871,12873,12875,12877,12879,12881],{"class":639,"line":577},[637,12866,643],{"class":642},[637,12868,647],{"class":646},[637,12870,651],{"class":650},[637,12872,654],{"class":650},[637,12874,657],{"class":642},[637,12876,660],{"class":642},[637,12878,664],{"class":663},[637,12880,660],{"class":642},[637,12882,669],{"class":642},[637,12884,12886,12888,12890,12892,12894,12897,12899,12901,12903,12905],{"class":12885,"line":578},[639,673],[637,12887,677],{"class":676},[637,12889,680],{"class":642},[637,12891,690],{"class":683},[637,12893,687],{"class":642},[637,12895,12896],{"class":683}," ScreenSpace",[637,12898,693],{"class":642},[637,12900,696],{"class":676},[637,12902,699],{"class":642},[637,12904,702],{"class":663},[637,12906,705],{"class":642},[637,12908,12909,12911,12913,12915,12917,12919,12921,12923],{"class":639,"line":708},[637,12910,677],{"class":676},[637,12912,680],{"class":642},[637,12914,715],{"class":683},[637,12916,693],{"class":642},[637,12918,696],{"class":676},[637,12920,699],{"class":642},[637,12922,724],{"class":663},[637,12924,705],{"class":642},[637,12926,12927,12929,12931],{"class":639,"line":729},[637,12928,732],{"class":642},[637,12930,647],{"class":646},[637,12932,669],{"class":642},[637,12934,12935],{"class":639,"line":739},[637,12936,742],{"emptyLinePlaceholder":594},[637,12938,12939,12941,12943],{"class":639,"line":745},[637,12940,643],{"class":642},[637,12942,750],{"class":646},[637,12944,669],{"class":642},[637,12946,12947,12949,12951,12953,12955,12957,12960,12962],{"class":639,"line":755},[637,12948,758],{"class":642},[637,12950,761],{"class":646},[637,12952,764],{"class":650},[637,12954,657],{"class":642},[637,12956,660],{"class":642},[637,12958,12959],{"class":663},"#333",[637,12961,660],{"class":642},[637,12963,669],{"class":642},[637,12965,12966,12968,12970],{"class":639,"line":778},[637,12967,781],{"class":642},[637,12969,784],{"class":646},[637,12971,787],{"class":642},[637,12973,12974,12976,12978],{"class":639,"line":790},[637,12975,781],{"class":642},[637,12977,795],{"class":646},[637,12979,787],{"class":642},[637,12981,12982],{"class":639,"line":800},[637,12983,742],{"emptyLinePlaceholder":594},[637,12985,12987,12989,12991,12994,12996,12998,13000,13002],{"class":12986,"line":805},[639,673],[637,12988,781],{"class":642},[637,12990,93],{"class":646},[637,12992,12993],{"class":650}," :depth",[637,12995,657],{"class":642},[637,12997,660],{"class":642},[637,12999,12730],{"class":663},[637,13001,660],{"class":642},[637,13003,669],{"class":642},[637,13005,13006,13008,13010],{"class":639,"line":827},[637,13007,853],{"class":642},[637,13009,856],{"class":646},[637,13011,669],{"class":642},[637,13013,13014,13016,13018],{"class":639,"line":631},[637,13015,864],{"class":642},[637,13017,11884],{"class":646},[637,13019,787],{"class":642},[637,13021,13022,13024,13026],{"class":639,"line":850},[637,13023,864],{"class":642},[637,13025,877],{"class":646},[637,13027,787],{"class":642},[637,13029,13030,13032,13034],{"class":639,"line":861},[637,13031,885],{"class":642},[637,13033,856],{"class":646},[637,13035,669],{"class":642},[637,13037,13039,13041,13043],{"class":13038,"line":872},[639,673],[637,13040,895],{"class":642},[637,13042,93],{"class":646},[637,13044,669],{"class":642},[637,13046,13047],{"class":639,"line":882},[637,13048,742],{"emptyLinePlaceholder":594},[637,13050,13051,13053,13055,13057,13059,13061,13063,13065],{"class":639,"line":632},[637,13052,781],{"class":642},[637,13054,8070],{"class":646},[637,13056,1982],{"class":650},[637,13058,657],{"class":642},[637,13060,660],{"class":642},[637,13062,11982],{"class":663},[637,13064,660],{"class":642},[637,13066,787],{"class":642},[637,13068,13069,13071,13073],{"class":639,"line":902},[637,13070,905],{"class":642},[637,13072,761],{"class":646},[637,13074,669],{"class":642},[637,13076,13077,13079,13081],{"class":639,"line":912},[637,13078,732],{"class":642},[637,13080,750],{"class":646},[637,13082,669],{"class":642},[504,13084,922],{"id":921},[927,13086,13087,13097],{},[930,13088,13089],{},[933,13090,13091,13093,13095],{},[936,13092,938],{"align":997},[936,13094,941],{"align":997},[936,13096,944],{},[946,13098,13099,13113,13132,13146,13163],{},[933,13100,13101,13106,13109],{},[951,13102,13103],{"align":997},[618,13104,13105],{},"depth",[951,13107,13108],{"align":997},"Distance from the camera",[951,13110,13111],{},[618,13112,10215],{},[933,13114,13115,13119,13127],{},[951,13116,13117],{"align":997},[618,13118,955],{},[951,13120,13121,13122,13124,13125],{"align":997},"Similar to CSS ",[618,13123,955],{}," property. Cannot be used with ",[618,13126,978],{},[951,13128,13129,13131],{},[618,13130,1969],{}," (vertical center of the screen)",[933,13133,13134,13138,13144],{},[951,13135,13136],{"align":997},[618,13137,978],{},[951,13139,13121,13140,13124,13142],{"align":997},[618,13141,978],{},[618,13143,955],{},[951,13145],{},[933,13147,13148,13152,13158],{},[951,13149,13150],{"align":997},[618,13151,997],{},[951,13153,13121,13154,13124,13156],{"align":997},[618,13155,997],{},[618,13157,1016],{},[951,13159,13160,13162],{},[618,13161,1969],{}," (horizontal center of the screen)",[933,13164,13165,13169,13175],{},[951,13166,13167],{"align":997},[618,13168,1016],{},[951,13170,13121,13171,13124,13173],{"align":997},[618,13172,1016],{},[618,13174,997],{},[951,13176],{},[1349,13178,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":13180},[13181,13182],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Position objects in front of the camera with CSS-like positioning.",{},{"title":93,"description":13183},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",[13188,14409,14868,15169,15871,16227],{"id":13189,"title":103,"body":13190,"description":14405,"extension":591,"links":592,"meta":14406,"navigation":594,"path":104,"seo":14407,"stem":105,"__hash__":14408},"docs/2.api/2.controls/camera-controls.md",{"type":501,"value":13191,"toc":14396},[13192,13197,13208,13216,13218,13412,13417,13419,13422,13872,13875,13904,14029,14033,14162,14171,14174,14298,14300,14354,14393],[608,13193,13194],{},[13195,13196],"controls-camera-controls",{},[614,13198,13199,13204,13205,13207],{},[1140,13200,13203],{"href":13201,"rel":13202},"https://github.com/yomotsu/camera-controls",[1144],"CameraControls"," is a camera controller similar to ",[1140,13206,795],{"href":116}," yet supports smooth transitions and more features.",[614,13209,13210,13211,1146],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1140,13212,13215],{"href":13213,"rel":13214},"https://www.npmjs.com/package/camera-controls",[1144],"npm",[504,13217,15],{"id":624},[626,13219,13222],{"className":628,"code":13220,"highlights":13221,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { CameraControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CCameraControls />\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/Box>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003CTresGridHelper />\n \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,13223,13224,13234,13253,13261,13269,13287,13306,13315,13333,13353,13361,13369,13388,13396,13404],{"__ignoreMap":576},[637,13225,13226,13228,13230,13232],{"class":639,"line":577},[637,13227,643],{"class":642},[637,13229,647],{"class":646},[637,13231,651],{"class":650},[637,13233,669],{"class":642},[637,13235,13236,13238,13240,13243,13245,13247,13249,13251],{"class":639,"line":578},[637,13237,677],{"class":676},[637,13239,680],{"class":642},[637,13241,13242],{"class":683}," CameraControls",[637,13244,693],{"class":642},[637,13246,696],{"class":676},[637,13248,9536],{"class":642},[637,13250,702],{"class":663},[637,13252,3154],{"class":642},[637,13254,13255,13257,13259],{"class":639,"line":708},[637,13256,732],{"class":642},[637,13258,647],{"class":646},[637,13260,669],{"class":642},[637,13262,13263,13265,13267],{"class":639,"line":729},[637,13264,643],{"class":642},[637,13266,750],{"class":646},[637,13268,669],{"class":642},[637,13270,13271,13273,13275,13277,13279,13281,13283,13285],{"class":639,"line":739},[637,13272,758],{"class":642},[637,13274,761],{"class":646},[637,13276,764],{"class":650},[637,13278,657],{"class":642},[637,13280,660],{"class":642},[637,13282,11812],{"class":663},[637,13284,660],{"class":642},[637,13286,669],{"class":642},[637,13288,13289,13291,13293,13295,13297,13299,13302,13304],{"class":639,"line":745},[637,13290,781],{"class":642},[637,13292,784],{"class":646},[637,13294,1508],{"class":650},[637,13296,657],{"class":642},[637,13298,660],{"class":642},[637,13300,13301],{"class":663},"[3, 3, 3]",[637,13303,660],{"class":642},[637,13305,787],{"class":642},[637,13307,13309,13311,13313],{"class":13308,"line":755},[639,673],[637,13310,781],{"class":642},[637,13312,13203],{"class":646},[637,13314,787],{"class":642},[637,13316,13317,13319,13321,13323,13325,13327,13329,13331],{"class":639,"line":778},[637,13318,781],{"class":642},[637,13320,217],{"class":646},[637,13322,813],{"class":650},[637,13324,657],{"class":642},[637,13326,660],{"class":642},[637,13328,820],{"class":663},[637,13330,660],{"class":642},[637,13332,669],{"class":642},[637,13334,13335,13337,13340,13342,13344,13346,13349,13351],{"class":639,"line":790},[637,13336,853],{"class":642},[637,13338,13339],{"class":646},"TresMeshToonMaterial",[637,13341,2712],{"class":650},[637,13343,657],{"class":642},[637,13345,660],{"class":642},[637,13347,13348],{"class":663},"orange",[637,13350,660],{"class":642},[637,13352,787],{"class":642},[637,13354,13355,13357,13359],{"class":639,"line":800},[637,13356,895],{"class":642},[637,13358,217],{"class":646},[637,13360,669],{"class":642},[637,13362,13363,13365,13367],{"class":639,"line":805},[637,13364,781],{"class":642},[637,13366,9702],{"class":646},[637,13368,787],{"class":642},[637,13370,13371,13373,13375,13377,13379,13381,13384,13386],{"class":639,"line":827},[637,13372,781],{"class":642},[637,13374,9721],{"class":646},[637,13376,1508],{"class":650},[637,13378,657],{"class":642},[637,13380,660],{"class":642},[637,13382,13383],{"class":663},"[0, 2, 4]",[637,13385,660],{"class":642},[637,13387,787],{"class":642},[637,13389,13390,13392,13394],{"class":639,"line":631},[637,13391,781],{"class":642},[637,13393,8070],{"class":646},[637,13395,787],{"class":642},[637,13397,13398,13400,13402],{"class":639,"line":850},[637,13399,905],{"class":642},[637,13401,761],{"class":646},[637,13403,669],{"class":642},[637,13405,13406,13408,13410],{"class":639,"line":861},[637,13407,732],{"class":642},[637,13409,750],{"class":646},[637,13411,669],{"class":642},[3222,13413,13414],{},[614,13415,13416],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[504,13418,922],{"id":921},[614,13420,13421],{},"Certainly! Here's the properties of the object in raw markdown table format:",[927,13423,13424,13434],{},[930,13425,13426],{},[933,13427,13428,13430,13432],{},[936,13429,938],{"align":997},[936,13431,941],{"align":997},[936,13433,944],{},[946,13435,13436,13450,13464,13478,13492,13506,13521,13536,13551,13566,13580,13596,13610,13624,13639,13654,13668,13683,13697,13711,13727,13742,13758,13772,13790,13805,13823,13837,13856],{},[933,13437,13438,13443,13446],{},[951,13439,13440],{"align":997},[1692,13441,13442],{},"makeDefault",[951,13444,13445],{"align":997},"Whether to make this the default controls.",[951,13447,13448],{},[618,13449,971],{},[933,13451,13452,13457,13460],{},[951,13453,13454],{"align":997},[1692,13455,13456],{},"camera",[951,13458,13459],{"align":997},"The camera to control.",[951,13461,13462],{},[618,13463,1167],{},[933,13465,13466,13471,13474],{},[951,13467,13468],{"align":997},[1692,13469,13470],{},"domElement",[951,13472,13473],{"align":997},"The DOM element to listen to.",[951,13475,13476],{},[618,13477,1167],{},[933,13479,13480,13485,13488],{},[951,13481,13482],{"align":997},[1692,13483,13484],{},"minPolarAngle",[951,13486,13487],{"align":997},"Minimum vertical angle in radians.",[951,13489,13490],{},[618,13491,965],{},[933,13493,13494,13499,13502],{},[951,13495,13496],{"align":997},[1692,13497,13498],{},"maxPolarAngle",[951,13500,13501],{"align":997},"Maximum vertical angle in radians.",[951,13503,13504],{},[618,13505,11685],{},[933,13507,13508,13513,13516],{},[951,13509,13510],{"align":997},[1692,13511,13512],{},"minAzimuthAngle",[951,13514,13515],{"align":997},"Minimum horizontal angle in radians.",[951,13517,13518],{},[618,13519,13520],{},"-Infinity",[933,13522,13523,13528,13531],{},[951,13524,13525],{"align":997},[1692,13526,13527],{},"maxAzimuthAngle",[951,13529,13530],{"align":997},"Maximum horizontal angle in radians.",[951,13532,13533],{},[618,13534,13535],{},"Infinity",[933,13537,13538,13543,13546],{},[951,13539,13540],{"align":997},[1692,13541,13542],{},"distance",[951,13544,13545],{"align":997},"Current distance.",[951,13547,13548],{},[618,13549,13550],{},"camera.position.z",[933,13552,13553,13558,13561],{},[951,13554,13555],{"align":997},[1692,13556,13557],{},"minDistance",[951,13559,13560],{"align":997},"Minimum distance for dolly. PerspectiveCamera only.",[951,13562,13563],{},[618,13564,13565],{},"Number.EPSILON",[933,13567,13568,13573,13576],{},[951,13569,13570],{"align":997},[1692,13571,13572],{},"maxDistance",[951,13574,13575],{"align":997},"Maximum distance for dolly. PerspectiveCamera only.",[951,13577,13578],{},[618,13579,13535],{},[933,13581,13582,13587,13592],{},[951,13583,13584],{"align":997},[1692,13585,13586],{},"infinityDolly",[951,13588,13589,13591],{"align":997},[618,13590,961],{}," to enable Infinity Dolly for wheel and pinch.",[951,13593,13594],{},[618,13595,971],{},[933,13597,13598,13603,13606],{},[951,13599,13600],{"align":997},[1692,13601,13602],{},"minZoom",[951,13604,13605],{"align":997},"Minimum camera zoom.",[951,13607,13608],{},[618,13609,1909],{},[933,13611,13612,13617,13620],{},[951,13613,13614],{"align":997},[1692,13615,13616],{},"maxZoom",[951,13618,13619],{"align":997},"Maximum camera zoom.",[951,13621,13622],{},[618,13623,13535],{},[933,13625,13626,13631,13634],{},[951,13627,13628],{"align":997},[1692,13629,13630],{},"smoothTime",[951,13632,13633],{"align":997},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[951,13635,13636],{},[618,13637,13638],{},"0.25",[933,13640,13641,13646,13649],{},[951,13642,13643],{"align":997},[1692,13644,13645],{},"draggingSmoothTime",[951,13647,13648],{"align":997},"The smoothTime while dragging.",[951,13650,13651],{},[618,13652,13653],{},"0.125",[933,13655,13656,13661,13664],{},[951,13657,13658],{"align":997},[1692,13659,13660],{},"maxSpeed",[951,13662,13663],{"align":997},"Max transition speed in units per second.",[951,13665,13666],{},[618,13667,13535],{},[933,13669,13670,13675,13678],{},[951,13671,13672],{"align":997},[1692,13673,13674],{},"azimuthRotateSpeed",[951,13676,13677],{"align":997},"Speed of azimuth (horizontal) rotation.",[951,13679,13680],{},[618,13681,13682],{},"1.0",[933,13684,13685,13690,13693],{},[951,13686,13687],{"align":997},[1692,13688,13689],{},"polarRotateSpeed",[951,13691,13692],{"align":997},"Speed of polar (vertical) rotation.",[951,13694,13695],{},[618,13696,13682],{},[933,13698,13699,13704,13707],{},[951,13700,13701],{"align":997},[1692,13702,13703],{},"dollySpeed",[951,13705,13706],{"align":997},"Speed of mouse-wheel dollying.",[951,13708,13709],{},[618,13710,13682],{},[933,13712,13713,13718,13723],{},[951,13714,13715],{"align":997},[1692,13716,13717],{},"dollyDragInverted",[951,13719,13720,13722],{"align":997},[618,13721,961],{}," to invert direction when dollying or zooming via drag.",[951,13724,13725],{},[618,13726,971],{},[933,13728,13729,13734,13737],{},[951,13730,13731],{"align":997},[1692,13732,13733],{},"truckSpeed",[951,13735,13736],{"align":997},"Speed of drag for truck and pedestal.",[951,13738,13739],{},[618,13740,13741],{},"2.0",[933,13743,13744,13749,13754],{},[951,13745,13746],{"align":997},[1692,13747,13748],{},"dollyToCursor",[951,13750,13751,13753],{"align":997},[618,13752,961],{}," to enable Dolly-in to the mouse cursor coords.",[951,13755,13756],{},[618,13757,971],{},[933,13759,13760,13765,13768],{},[951,13761,13762],{"align":997},[1692,13763,13764],{},"dragToOffset",[951,13766,13767],{"align":997},"Whether to drag to offset.",[951,13769,13770],{},[618,13771,971],{},[933,13773,13774,13779,13786],{},[951,13775,13776],{"align":997},[1692,13777,13778],{},"verticalDragToForward",[951,13780,13781,13782,13785],{"align":997},"The same as ",[618,13783,13784],{},".screenSpacePanning"," in Three.js's OrbitControls.",[951,13787,13788],{},[618,13789,971],{},[933,13791,13792,13797,13800],{},[951,13793,13794],{"align":997},[1692,13795,13796],{},"boundaryFriction",[951,13798,13799],{"align":997},"Friction ratio of the boundary.",[951,13801,13802],{},[618,13803,13804],{},"0.0",[933,13806,13807,13812,13819],{},[951,13808,13809],{"align":997},[1692,13810,13811],{},"restThreshold",[951,13813,13814,13815,13818],{"align":997},"Controls how soon the ",[618,13816,13817],{},"rest"," event fires as the camera slows.",[951,13820,13821],{},[618,13822,1909],{},[933,13824,13825,13830,13833],{},[951,13826,13827],{"align":997},[1692,13828,13829],{},"colliderMeshes",[951,13831,13832],{"align":997},"An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.",[951,13834,13835],{},[618,13836,3602],{},[933,13838,13839,13844,13847],{},[951,13840,13841],{"align":997},[1692,13842,13843],{},"mouseButtons",[951,13845,13846],{"align":997},"Configuration of actions on mouse input.",[951,13848,1138,13849,13855],{},[1140,13850,13852],{"href":13851},"#user-input-config",[618,13853,13854],{},"User input config"," for details",[933,13857,13858,13863,13866],{},[951,13859,13860],{"align":997},[1692,13861,13862],{},"touches",[951,13864,13865],{"align":997},"Configuration of actions on touch.",[951,13867,1138,13868,13855],{},[1140,13869,13870],{"href":13851},[618,13871,13854],{},[504,13873,13854],{"id":13874},"user-input-config",[614,13876,13877,13878,13880,13881,13883,13884,13892,13893,13895,13896,13899,13900,13903],{},"You can easily override the default user input config by defining ",[618,13879,13843],{}," and/or ",[618,13882,13862],{}," props that correspond to ",[1140,13885,13888,13891],{"href":13886,"rel":13887},"https://github.com/yomotsu/camera-controls?#user-input-config",[1144],[618,13889,13890],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[618,13894,13203],{}," class as ",[618,13897,13898],{},"BaseCameraControls"," which gives you access to the ",[618,13901,13902],{},"ACTION"," enum.",[626,13905,13907],{"className":628,"code":13906,"language":633,"meta":576,"style":576},"\u003Cscript lang=\"ts\" setup>\nimport { BaseCameraControls, CameraControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n ...\n \u003CCameraControls\n :mouse-buttons=\"{ left: BaseCameraControls.ACTION.DOLLY }\"\n :touches=\"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }\"\n />\n ...\n\u003C/template>\n",[618,13908,13909,13929,13952,13960,13964,13972,13977,13984,13998,14012,14017,14021],{"__ignoreMap":576},[637,13910,13911,13913,13915,13917,13919,13921,13923,13925,13927],{"class":639,"line":577},[637,13912,643],{"class":642},[637,13914,647],{"class":646},[637,13916,654],{"class":650},[637,13918,657],{"class":642},[637,13920,660],{"class":642},[637,13922,664],{"class":663},[637,13924,660],{"class":642},[637,13926,651],{"class":650},[637,13928,669],{"class":642},[637,13930,13931,13933,13935,13938,13940,13942,13944,13946,13948,13950],{"class":639,"line":578},[637,13932,677],{"class":676},[637,13934,680],{"class":642},[637,13936,13937],{"class":683}," BaseCameraControls",[637,13939,687],{"class":642},[637,13941,13242],{"class":683},[637,13943,693],{"class":642},[637,13945,696],{"class":676},[637,13947,699],{"class":642},[637,13949,702],{"class":663},[637,13951,705],{"class":642},[637,13953,13954,13956,13958],{"class":639,"line":708},[637,13955,732],{"class":642},[637,13957,647],{"class":646},[637,13959,669],{"class":642},[637,13961,13962],{"class":639,"line":729},[637,13963,742],{"emptyLinePlaceholder":594},[637,13965,13966,13968,13970],{"class":639,"line":739},[637,13967,643],{"class":642},[637,13969,750],{"class":646},[637,13971,669],{"class":642},[637,13973,13974],{"class":639,"line":745},[637,13975,13976],{"class":683}," ...\n",[637,13978,13979,13981],{"class":639,"line":755},[637,13980,758],{"class":642},[637,13982,13983],{"class":646},"CameraControls\n",[637,13985,13986,13989,13991,13993,13996],{"class":639,"line":778},[637,13987,13988],{"class":650}," :mouse-buttons",[637,13990,657],{"class":642},[637,13992,660],{"class":642},[637,13994,13995],{"class":663},"{ left: BaseCameraControls.ACTION.DOLLY }",[637,13997,3154],{"class":642},[637,13999,14000,14003,14005,14007,14010],{"class":639,"line":790},[637,14001,14002],{"class":650}," :touches",[637,14004,657],{"class":642},[637,14006,660],{"class":642},[637,14008,14009],{"class":663},"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }",[637,14011,3154],{"class":642},[637,14013,14014],{"class":639,"line":800},[637,14015,14016],{"class":642}," />\n",[637,14018,14019],{"class":639,"line":805},[637,14020,13976],{"class":683},[637,14022,14023,14025,14027],{"class":639,"line":827},[637,14024,732],{"class":642},[637,14026,750],{"class":646},[637,14028,669],{"class":642},[4074,14030,14032],{"id":14031},"mouse-buttons","Mouse buttons",[927,14034,14035,14047],{},[930,14036,14037],{},[933,14038,14039,14042,14045],{},[936,14040,14041],{},"Button to assign",[936,14043,14044],{},"Options",[936,14046,944],{},[946,14048,14049,14081,14106,14136],{},[933,14050,14051,14056,14077],{},[951,14052,14053],{},[618,14054,14055],{},"mouseButtons.left",[951,14057,14058,14061,14062,14061,14065,14061,14068,14061,14071,14061,14074],{},[618,14059,14060],{},"ROTATE"," | ",[618,14063,14064],{},"TRUCK",[618,14066,14067],{},"OFFSET",[618,14069,14070],{},"DOLLY",[618,14072,14073],{},"ZOOM",[618,14075,14076],{},"NONE",[951,14078,14079],{},[618,14080,14060],{},[933,14082,14083,14088,14102],{},[951,14084,14085],{},[618,14086,14087],{},"mouseButtons.right",[951,14089,14090,14061,14092,14061,14094,14061,14096,14061,14098,14061,14100],{},[618,14091,14060],{},[618,14093,14064],{},[618,14095,14067],{},[618,14097,14070],{},[618,14099,14073],{},[618,14101,14076],{},[951,14103,14104],{},[618,14105,14064],{},[933,14107,14108,14114,14128],{},[951,14109,14110,14113],{},[618,14111,14112],{},"mouseButtons.wheel"," ¹",[951,14115,14116,14061,14118,14061,14120,14061,14122,14061,14124,14061,14126],{},[618,14117,14060],{},[618,14119,14064],{},[618,14121,14067],{},[618,14123,14070],{},[618,14125,14073],{},[618,14127,14076],{},[951,14129,14130,14132,14133,14135],{},[618,14131,14070],{}," for Perspective camera, ",[618,14134,14073],{}," for Orthographic camera.",[933,14137,14138,14144,14158],{},[951,14139,14140,14143],{},[618,14141,14142],{},"mouseButtons.middle"," ²",[951,14145,14146,14061,14148,14061,14150,14061,14152,14061,14154,14061,14156],{},[618,14147,14060],{},[618,14149,14064],{},[618,14151,14067],{},[618,14153,14070],{},[618,14155,14073],{},[618,14157,14076],{},[951,14159,14160],{},[618,14161,14070],{},[14163,14164,14165,14168],"ol",{},[2239,14166,14167],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[2239,14169,14170],{},"Mouse wheel \"button\" click event.",[4074,14172,14173],{"id":13862},"Touches",[927,14175,14176,14187],{},[930,14177,14178],{},[933,14179,14180,14183,14185],{},[936,14181,14182],{},"Fingers to assign",[936,14184,14044],{},[936,14186,944],{},[946,14188,14189,14217,14265],{},[933,14190,14191,14196,14213],{},[951,14192,14193],{},[618,14194,14195],{},"touches.one",[951,14197,14198,14061,14201,14061,14204,14061,14207,14061,14209,14061,14211],{},[618,14199,14200],{},"TOUCH_ROTATE",[618,14202,14203],{},"TOUCH_TRUCK",[618,14205,14206],{},"TOUCH_OFFSET",[618,14208,14070],{},[618,14210,14073],{},[618,14212,14076],{},[951,14214,14215],{},[618,14216,14200],{},[933,14218,14219,14224,14258],{},[951,14220,14221],{},[618,14222,14223],{},"touches.two",[951,14225,14226,14061,14229,14061,14232,14061,14235,14061,14238,14061,14241,14061,14244,14061,14247,14061,14250,14061,14252,14061,14254,14061,14256],{},[618,14227,14228],{},"TOUCH_DOLLY_TRUCK",[618,14230,14231],{},"TOUCH_DOLLY_OFFSET",[618,14233,14234],{},"TOUCH_DOLLY_ROTATE",[618,14236,14237],{},"TOUCH_ZOOM_TRUCK",[618,14239,14240],{},"TOUCH_ZOOM_OFFSET",[618,14242,14243],{},"TOUCH_ZOOM_ROTATE",[618,14245,14246],{},"TOUCH_DOLLY",[618,14248,14249],{},"TOUCH_ZOOM",[618,14251,14200],{},[618,14253,14203],{},[618,14255,14206],{},[618,14257,14076],{},[951,14259,14260,14132,14262,14264],{},[618,14261,14228],{},[618,14263,14237],{}," for Othographic camera.",[933,14266,14267,14272,14294],{},[951,14268,14269],{},[618,14270,14271],{},"touches.three",[951,14273,14274,14061,14276,14061,14278,14061,14280,14061,14282,14061,14284,14061,14286,14061,14288,14061,14290,14061,14292],{},[618,14275,14228],{},[618,14277,14231],{},[618,14279,14234],{},[618,14281,14237],{},[618,14283,14240],{},[618,14285,14243],{},[618,14287,14200],{},[618,14289,14203],{},[618,14291,14206],{},[618,14293,14076],{},[951,14295,14296],{},[618,14297,14203],{},[504,14299,1171],{"id":1170},[626,14301,14303],{"className":628,"code":14302,"language":633,"meta":576,"style":576},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[618,14304,14305],{"__ignoreMap":576},[637,14306,14307,14309,14311,14313,14315,14317,14319,14322,14324,14326,14329,14331,14333,14336,14338,14340,14343,14345,14347,14350,14352],{"class":639,"line":577},[637,14308,643],{"class":642},[637,14310,13203],{"class":646},[637,14312,4277],{"class":642},[637,14314,1194],{"class":650},[637,14316,657],{"class":642},[637,14318,660],{"class":642},[637,14320,14321],{"class":683},"onChange",[637,14323,660],{"class":642},[637,14325,4277],{"class":642},[637,14327,14328],{"class":650},"start",[637,14330,657],{"class":642},[637,14332,660],{"class":642},[637,14334,14335],{"class":683},"onStart",[637,14337,660],{"class":642},[637,14339,4277],{"class":642},[637,14341,14342],{"class":650},"end",[637,14344,657],{"class":642},[637,14346,660],{"class":642},[637,14348,14349],{"class":683},"onEnd",[637,14351,660],{"class":642},[637,14353,787],{"class":642},[927,14355,14356,14364],{},[930,14357,14358],{},[933,14359,14360,14362],{},[936,14361,1180],{"align":997},[936,14363,941],{"align":997},[946,14365,14366,14375,14384],{},[933,14367,14368,14372],{},[951,14369,14370],{"align":997},[1692,14371,14328],{},[951,14373,14374],{"align":997},"Dispatched when the control starts to change.",[933,14376,14377,14381],{},[951,14378,14379],{"align":997},[1692,14380,1194],{},[951,14382,14383],{"align":997},"Dispatched when the control changes.",[933,14385,14386,14390],{},[951,14387,14388],{"align":997},[1692,14389,14342],{},[951,14391,14392],{"align":997},"Dispatched when the control ends to change.",[1349,14394,14395],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":14397},[14398,14399,14400,14404],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":13874,"depth":578,"text":13854,"children":14401},[14402,14403],{"id":14031,"depth":708,"text":14032},{"id":13862,"depth":708,"text":14173},{"id":1170,"depth":578,"text":1171},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":103,"description":14405},"2hfwAcOw9kCB60pKAgItRmaKk8A71rNBCTtreEGn7EI",{"id":14410,"title":107,"body":14411,"description":14864,"extension":591,"links":592,"meta":14865,"navigation":594,"path":108,"seo":14866,"stem":109,"__hash__":14867},"docs/2.api/2.controls/keyboard-controls.md",{"type":501,"value":14412,"toc":14859},[14413,14418,14424,14509,14525,14527,14682,14686,14688,14767,14769,14820,14856],[608,14414,14415],{},[14416,14417],"controls-keyboard-controls",{},[614,14419,14420,14423],{},[618,14421,14422],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[927,14425,14426,14435],{},[930,14427,14428],{},[933,14429,14430,14433],{},[936,14431,14432],{"align":997},"Keyboard",[936,14434,6427],{"align":997},[946,14436,14437,14450,14463,14476,14489,14499],{},[933,14438,14439,14447],{},[951,14440,14441,3359,14444],{"align":997},[618,14442,14443],{},"W",[618,14445,14446],{},"↑",[951,14448,14449],{"align":997},"Move forward",[933,14451,14452,14460],{},[951,14453,14454,3359,14457],{"align":997},[618,14455,14456],{},"S",[618,14458,14459],{},"↓",[951,14461,14462],{"align":997},"Move backward",[933,14464,14465,14473],{},[951,14466,14467,3359,14470],{"align":997},[618,14468,14469],{},"A",[618,14471,14472],{},"←",[951,14474,14475],{"align":997},"Move left",[933,14477,14478,14486],{},[951,14479,14480,3359,14483],{"align":997},[618,14481,14482],{},"D",[618,14484,14485],{},"→",[951,14487,14488],{"align":997},"Move right",[933,14490,14491,14496],{},[951,14492,14493],{"align":997},[618,14494,14495],{},"E",[951,14497,14498],{"align":997},"Move up",[933,14500,14501,14506],{},[951,14502,14503],{"align":997},[618,14504,14505],{},"Q",[951,14507,14508],{"align":997},"Move down",[2028,14510,14511],{},[614,14512,14513,14516,14517,14520,14521,1146],{},[618,14514,14515],{},"KeyboardControls"," uses ",[618,14518,14519],{},"PointerLockControls"," under the hood. You can use ",[1140,14522,14524],{"href":14523},"pointer-lock-controls#props","PointerLockControls props and events",[504,14526,15],{"id":624},[626,14528,14531],{"className":628,"code":14529,"highlights":14530,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { KeyboardControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera />\n \u003CBox :position-y=\"0.5\" />\n \u003CKeyboardControls />\n \u003CTresGridHelper />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,14532,14533,14553,14571,14595,14603,14607,14615,14623,14631,14649,14658,14666,14674],{"__ignoreMap":576},[637,14534,14535,14537,14539,14541,14543,14545,14547,14549,14551],{"class":639,"line":577},[637,14536,643],{"class":642},[637,14538,647],{"class":646},[637,14540,651],{"class":650},[637,14542,654],{"class":650},[637,14544,657],{"class":642},[637,14546,660],{"class":642},[637,14548,664],{"class":663},[637,14550,660],{"class":642},[637,14552,669],{"class":642},[637,14554,14555,14557,14559,14561,14563,14565,14567,14569],{"class":639,"line":578},[637,14556,677],{"class":676},[637,14558,680],{"class":642},[637,14560,715],{"class":683},[637,14562,693],{"class":642},[637,14564,696],{"class":676},[637,14566,699],{"class":642},[637,14568,724],{"class":663},[637,14570,705],{"class":642},[637,14572,14574,14576,14578,14581,14583,14585,14587,14589,14591,14593],{"class":14573,"line":708},[639,673],[637,14575,677],{"class":676},[637,14577,680],{"class":642},[637,14579,14580],{"class":683}," KeyboardControls",[637,14582,687],{"class":642},[637,14584,1420],{"class":683},[637,14586,693],{"class":642},[637,14588,696],{"class":676},[637,14590,699],{"class":642},[637,14592,702],{"class":663},[637,14594,705],{"class":642},[637,14596,14597,14599,14601],{"class":639,"line":729},[637,14598,732],{"class":642},[637,14600,647],{"class":646},[637,14602,669],{"class":642},[637,14604,14605],{"class":639,"line":739},[637,14606,742],{"emptyLinePlaceholder":594},[637,14608,14609,14611,14613],{"class":639,"line":745},[637,14610,643],{"class":642},[637,14612,750],{"class":646},[637,14614,669],{"class":642},[637,14616,14617,14619,14621],{"class":639,"line":755},[637,14618,758],{"class":642},[637,14620,761],{"class":646},[637,14622,669],{"class":642},[637,14624,14625,14627,14629],{"class":639,"line":778},[637,14626,781],{"class":642},[637,14628,784],{"class":646},[637,14630,787],{"class":642},[637,14632,14633,14635,14637,14639,14641,14643,14645,14647],{"class":639,"line":790},[637,14634,781],{"class":642},[637,14636,217],{"class":646},[637,14638,1962],{"class":650},[637,14640,657],{"class":642},[637,14642,660],{"class":642},[637,14644,1969],{"class":663},[637,14646,660],{"class":642},[637,14648,787],{"class":642},[637,14650,14652,14654,14656],{"class":14651,"line":800},[639,673],[637,14653,781],{"class":642},[637,14655,14515],{"class":646},[637,14657,787],{"class":642},[637,14659,14660,14662,14664],{"class":639,"line":805},[637,14661,781],{"class":642},[637,14663,8070],{"class":646},[637,14665,787],{"class":642},[637,14667,14668,14670,14672],{"class":639,"line":827},[637,14669,905],{"class":642},[637,14671,761],{"class":646},[637,14673,669],{"class":642},[637,14675,14676,14678,14680],{"class":639,"line":631},[637,14677,732],{"class":642},[637,14679,750],{"class":646},[637,14681,669],{"class":642},[3222,14683,14684],{},[614,14685,13416],{},[504,14687,922],{"id":921},[927,14689,14690,14700],{},[930,14691,14692],{},[933,14693,14694,14696,14698],{},[936,14695,938],{"align":997},[936,14697,941],{"align":997},[936,14699,944],{},[946,14701,14702,14714,14729,14741,14753],{},[933,14703,14704,14709,14712],{},[951,14705,14706],{"align":997},[1692,14707,14708],{},"moveSpeed",[951,14710,14711],{"align":997},"Speed movement.",[951,14713,5752],{},[933,14715,14716,14720,14725],{},[951,14717,14718],{"align":997},[1692,14719,13442],{},[951,14721,958,14722,14724],{"align":997},[618,14723,961],{},", the controls will be set as the default controls for the scene.",[951,14726,14727],{},[618,14728,961],{},[933,14730,14731,14735,14737],{},[951,14732,14733],{"align":997},[1692,14734,13456],{},[951,14736,13459],{"align":997},[951,14738,14739],{},[618,14740,1167],{},[933,14742,14743,14747,14749],{},[951,14744,14745],{"align":997},[1692,14746,13470],{},[951,14748,13473],{"align":997},[951,14750,14751],{},[618,14752,1167],{},[933,14754,14755,14760,14763],{},[951,14756,14757],{"align":997},[1692,14758,14759],{},"selector",[951,14761,14762],{"align":997},"Accept an id element as string. If set, the new element will be used as the trigger",[951,14764,14765],{},[618,14766,1167],{},[504,14768,1171],{"id":1170},[626,14770,14772],{"className":628,"code":14771,"language":633,"meta":576,"style":576},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[618,14773,14774],{"__ignoreMap":576},[637,14775,14776,14778,14780,14782,14784,14786,14788,14790,14792,14794,14797,14799,14801,14803,14806,14808,14810,14813,14816,14818],{"class":639,"line":577},[637,14777,643],{"class":642},[637,14779,14515],{"class":646},[637,14781,4277],{"class":642},[637,14783,1194],{"class":650},[637,14785,657],{"class":642},[637,14787,660],{"class":642},[637,14789,14321],{"class":683},[637,14791,660],{"class":642},[637,14793,4277],{"class":642},[637,14795,14796],{"class":650},"is-lock",[637,14798,657],{"class":642},[637,14800,660],{"class":642},[637,14802,2460],{"class":642},[637,14804,14805],{"class":6859},"state",[637,14807,3363],{"class":642},[637,14809,3700],{"class":650},[637,14811,14812],{"class":2457}," isActive",[637,14814,14815],{"class":683},"(state)",[637,14817,660],{"class":642},[637,14819,787],{"class":683},[927,14821,14822,14830],{},[930,14823,14824],{},[933,14825,14826,14828],{},[936,14827,1180],{"align":997},[936,14829,941],{"align":997},[946,14831,14832,14848],{},[933,14833,14834,14839],{},[951,14835,14836],{"align":997},[1692,14837,14838],{},"isLock",[951,14840,14841,14842,14844,14845,14847],{"align":997},"Return ",[618,14843,961],{}," if \"lock\", ",[618,14846,971],{}," if \"unlock\" events are triggered.",[933,14849,14850,14854],{},[951,14851,14852],{"align":997},[1692,14853,1194],{},[951,14855,14383],{"align":997},[1349,14857,14858],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":14860},[14861,14862,14863],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",{},{"title":107,"description":14864},"AiV8qE1JDgLILe5KGuJAaEvSAzQi0kQx9m-mrBt-6b0",{"id":14869,"title":111,"body":14870,"description":15165,"extension":591,"links":592,"meta":15166,"navigation":594,"path":112,"seo":15167,"stem":113,"__hash__":15168},"docs/2.api/2.controls/map-controls.md",{"type":501,"value":14871,"toc":15161},[14872,14877,14885,14887,15077,15082,15084,15154,15159],[608,14873,14874],{},[14875,14876],"controls-map-controls",{},[614,14878,14879,14884],{},[1140,14880,14883],{"href":14881,"rel":14882},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1144],"MapControls"," similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.",[504,14886,15],{"id":624},[626,14888,14891],{"className":628,"code":14889,"highlights":14890,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { MapControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CMapControls />\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/Box>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003CTresGridHelper />\n \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,14892,14893,14903,14922,14930,14938,14956,14974,14983,15001,15019,15027,15035,15053,15061,15069],{"__ignoreMap":576},[637,14894,14895,14897,14899,14901],{"class":639,"line":577},[637,14896,643],{"class":642},[637,14898,647],{"class":646},[637,14900,651],{"class":650},[637,14902,669],{"class":642},[637,14904,14905,14907,14909,14912,14914,14916,14918,14920],{"class":639,"line":578},[637,14906,677],{"class":676},[637,14908,680],{"class":642},[637,14910,14911],{"class":683}," MapControls",[637,14913,693],{"class":642},[637,14915,696],{"class":676},[637,14917,9536],{"class":642},[637,14919,702],{"class":663},[637,14921,3154],{"class":642},[637,14923,14924,14926,14928],{"class":639,"line":708},[637,14925,732],{"class":642},[637,14927,647],{"class":646},[637,14929,669],{"class":642},[637,14931,14932,14934,14936],{"class":639,"line":729},[637,14933,643],{"class":642},[637,14935,750],{"class":646},[637,14937,669],{"class":642},[637,14939,14940,14942,14944,14946,14948,14950,14952,14954],{"class":639,"line":739},[637,14941,758],{"class":642},[637,14943,761],{"class":646},[637,14945,764],{"class":650},[637,14947,657],{"class":642},[637,14949,660],{"class":642},[637,14951,11812],{"class":663},[637,14953,660],{"class":642},[637,14955,669],{"class":642},[637,14957,14958,14960,14962,14964,14966,14968,14970,14972],{"class":639,"line":745},[637,14959,781],{"class":642},[637,14961,784],{"class":646},[637,14963,1508],{"class":650},[637,14965,657],{"class":642},[637,14967,660],{"class":642},[637,14969,13301],{"class":663},[637,14971,660],{"class":642},[637,14973,787],{"class":642},[637,14975,14977,14979,14981],{"class":14976,"line":755},[639,673],[637,14978,781],{"class":642},[637,14980,14883],{"class":646},[637,14982,787],{"class":642},[637,14984,14985,14987,14989,14991,14993,14995,14997,14999],{"class":639,"line":778},[637,14986,781],{"class":642},[637,14988,217],{"class":646},[637,14990,813],{"class":650},[637,14992,657],{"class":642},[637,14994,660],{"class":642},[637,14996,820],{"class":663},[637,14998,660],{"class":642},[637,15000,669],{"class":642},[637,15002,15003,15005,15007,15009,15011,15013,15015,15017],{"class":639,"line":790},[637,15004,853],{"class":642},[637,15006,13339],{"class":646},[637,15008,2712],{"class":650},[637,15010,657],{"class":642},[637,15012,660],{"class":642},[637,15014,13348],{"class":663},[637,15016,660],{"class":642},[637,15018,787],{"class":642},[637,15020,15021,15023,15025],{"class":639,"line":800},[637,15022,895],{"class":642},[637,15024,217],{"class":646},[637,15026,669],{"class":642},[637,15028,15029,15031,15033],{"class":639,"line":805},[637,15030,781],{"class":642},[637,15032,9702],{"class":646},[637,15034,787],{"class":642},[637,15036,15037,15039,15041,15043,15045,15047,15049,15051],{"class":639,"line":827},[637,15038,781],{"class":642},[637,15040,9721],{"class":646},[637,15042,1508],{"class":650},[637,15044,657],{"class":642},[637,15046,660],{"class":642},[637,15048,13383],{"class":663},[637,15050,660],{"class":642},[637,15052,787],{"class":642},[637,15054,15055,15057,15059],{"class":639,"line":631},[637,15056,781],{"class":642},[637,15058,8070],{"class":646},[637,15060,787],{"class":642},[637,15062,15063,15065,15067],{"class":639,"line":850},[637,15064,905],{"class":642},[637,15066,761],{"class":646},[637,15068,669],{"class":642},[637,15070,15071,15073,15075],{"class":639,"line":861},[637,15072,732],{"class":642},[637,15074,750],{"class":646},[637,15076,669],{"class":642},[3222,15078,15079],{},[614,15080,15081],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[504,15083,922],{"id":921},[927,15085,15086,15096],{},[930,15087,15088],{},[933,15089,15090,15092,15094],{},[936,15091,938],{"align":997},[936,15093,941],{"align":997},[936,15095,944],{},[946,15097,15098,15112,15124,15137],{},[933,15099,15100,15104,15108],{},[951,15101,15102],{"align":997},[1692,15103,13442],{},[951,15105,958,15106,14724],{"align":997},[618,15107,961],{},[951,15109,15110],{},[618,15111,971],{},[933,15113,15114,15118,15120],{},[951,15115,15116],{"align":997},[1692,15117,13456],{},[951,15119,13459],{"align":997},[951,15121,15122],{},[618,15123,1167],{},[933,15125,15126,15130,15133],{},[951,15127,15128],{"align":997},[1692,15129,13470],{},[951,15131,15132],{"align":997},"The dom element to listen to.",[951,15134,15135],{},[618,15136,1167],{},[933,15138,15139,15144,15150],{},[951,15140,15141],{"align":997},[1692,15142,15143],{},"screenSpacePanning",[951,15145,15146,15147,15149],{"align":997},"Defines how the camera's position is translated when panning. If ",[618,15148,961],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[951,15151,15152],{},[618,15153,971],{},[2028,15155,15156],{},[614,15157,15158],{},"All the props of the orbit controls component apply here too.",[1349,15160,14395],{},{"title":576,"searchDepth":577,"depth":578,"links":15162},[15163,15164],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"similar to OrbitControls but for map views",{},{"title":111,"description":15165},"kfzpqZnb7itAV_eVKFqO6wVSm6EFixFWw9fpJO8O0ac",{"id":15170,"title":115,"body":15171,"description":15867,"extension":591,"links":592,"meta":15868,"navigation":594,"path":116,"seo":15869,"stem":117,"__hash__":15870},"docs/2.api/2.controls/orbit-controls.md",{"type":501,"value":15172,"toc":15862},[15173,15178,15185,15187,15376,15380,15382,15773,15775,15824,15860],[608,15174,15175],{},[15176,15177],"controls-orbit-controls",{},[614,15179,15180,15184],{},[1140,15181,795],{"href":15182,"rel":15183},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1144]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[504,15186,15],{"id":624},[626,15188,15191],{"className":628,"code":15189,"highlights":15190,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { OrbitControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003COrbitControls />\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/Box>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003CTresGridHelper />\n \u003C/TresCanvas>\n\u003C/template>\n",[755],[618,15192,15193,15203,15221,15229,15237,15255,15273,15282,15300,15318,15326,15334,15352,15360,15368],{"__ignoreMap":576},[637,15194,15195,15197,15199,15201],{"class":639,"line":577},[637,15196,643],{"class":642},[637,15198,647],{"class":646},[637,15200,651],{"class":650},[637,15202,669],{"class":642},[637,15204,15205,15207,15209,15211,15213,15215,15217,15219],{"class":639,"line":578},[637,15206,677],{"class":676},[637,15208,680],{"class":642},[637,15210,690],{"class":683},[637,15212,693],{"class":642},[637,15214,696],{"class":676},[637,15216,9536],{"class":642},[637,15218,702],{"class":663},[637,15220,3154],{"class":642},[637,15222,15223,15225,15227],{"class":639,"line":708},[637,15224,732],{"class":642},[637,15226,647],{"class":646},[637,15228,669],{"class":642},[637,15230,15231,15233,15235],{"class":639,"line":729},[637,15232,643],{"class":642},[637,15234,750],{"class":646},[637,15236,669],{"class":642},[637,15238,15239,15241,15243,15245,15247,15249,15251,15253],{"class":639,"line":739},[637,15240,758],{"class":642},[637,15242,761],{"class":646},[637,15244,764],{"class":650},[637,15246,657],{"class":642},[637,15248,660],{"class":642},[637,15250,11812],{"class":663},[637,15252,660],{"class":642},[637,15254,669],{"class":642},[637,15256,15257,15259,15261,15263,15265,15267,15269,15271],{"class":639,"line":745},[637,15258,781],{"class":642},[637,15260,784],{"class":646},[637,15262,1508],{"class":650},[637,15264,657],{"class":642},[637,15266,660],{"class":642},[637,15268,13301],{"class":663},[637,15270,660],{"class":642},[637,15272,787],{"class":642},[637,15274,15276,15278,15280],{"class":15275,"line":755},[639,673],[637,15277,781],{"class":642},[637,15279,795],{"class":646},[637,15281,787],{"class":642},[637,15283,15284,15286,15288,15290,15292,15294,15296,15298],{"class":639,"line":778},[637,15285,781],{"class":642},[637,15287,217],{"class":646},[637,15289,813],{"class":650},[637,15291,657],{"class":642},[637,15293,660],{"class":642},[637,15295,820],{"class":663},[637,15297,660],{"class":642},[637,15299,669],{"class":642},[637,15301,15302,15304,15306,15308,15310,15312,15314,15316],{"class":639,"line":790},[637,15303,853],{"class":642},[637,15305,13339],{"class":646},[637,15307,2712],{"class":650},[637,15309,657],{"class":642},[637,15311,660],{"class":642},[637,15313,13348],{"class":663},[637,15315,660],{"class":642},[637,15317,787],{"class":642},[637,15319,15320,15322,15324],{"class":639,"line":800},[637,15321,895],{"class":642},[637,15323,217],{"class":646},[637,15325,669],{"class":642},[637,15327,15328,15330,15332],{"class":639,"line":805},[637,15329,781],{"class":642},[637,15331,9702],{"class":646},[637,15333,787],{"class":642},[637,15335,15336,15338,15340,15342,15344,15346,15348,15350],{"class":639,"line":827},[637,15337,781],{"class":642},[637,15339,9721],{"class":646},[637,15341,1508],{"class":650},[637,15343,657],{"class":642},[637,15345,660],{"class":642},[637,15347,13383],{"class":663},[637,15349,660],{"class":642},[637,15351,787],{"class":642},[637,15353,15354,15356,15358],{"class":639,"line":631},[637,15355,781],{"class":642},[637,15357,8070],{"class":646},[637,15359,787],{"class":642},[637,15361,15362,15364,15366],{"class":639,"line":850},[637,15363,905],{"class":642},[637,15365,761],{"class":646},[637,15367,669],{"class":642},[637,15369,15370,15372,15374],{"class":639,"line":861},[637,15371,732],{"class":642},[637,15373,750],{"class":646},[637,15375,669],{"class":642},[3222,15377,15378],{},[614,15379,13416],{},[504,15381,922],{"id":921},[927,15383,15384,15394],{},[930,15385,15386],{},[933,15387,15388,15390,15392],{},[936,15389,938],{"align":997},[936,15391,941],{"align":997},[936,15393,944],{},[946,15395,15396,15410,15422,15434,15448,15464,15482,15496,15514,15528,15543,15558,15579,15597,15610,15623,15636,15649,15662,15675,15689,15703,15717,15731,15745,15759],{},[933,15397,15398,15402,15406],{},[951,15399,15400],{"align":997},[1692,15401,13442],{},[951,15403,958,15404,14724],{"align":997},[618,15405,961],{},[951,15407,15408],{},[618,15409,971],{},[933,15411,15412,15416,15418],{},[951,15413,15414],{"align":997},[1692,15415,13456],{},[951,15417,13459],{"align":997},[951,15419,15420],{},[618,15421,1167],{},[933,15423,15424,15428,15430],{},[951,15425,15426],{"align":997},[1692,15427,13470],{},[951,15429,15132],{"align":997},[951,15431,15432],{},[618,15433,1167],{},[933,15435,15436,15441,15444],{},[951,15437,15438],{"align":997},[1692,15439,15440],{},"target",[951,15442,15443],{"align":997},"The target to orbit around.",[951,15445,15446],{},[618,15447,1167],{},[933,15449,15450,15455,15460],{},[951,15451,15452],{"align":997},[1692,15453,15454],{},"enableDamping",[951,15456,958,15457,15459],{"align":997},[618,15458,961],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[951,15461,15462],{},[618,15463,961],{},[933,15465,15466,15471,15478],{},[951,15467,15468],{"align":997},[1692,15469,15470],{},"dampingFactor",[951,15472,15473,15474,15477],{"align":997},"The damping inertia used if ",[618,15475,15476],{},".enableDamping"," is set to true.",[951,15479,15480],{},[618,15481,11664],{},[933,15483,15484,15489,15492],{},[951,15485,15486],{"align":997},[1692,15487,15488],{},"autoRotate",[951,15490,15491],{"align":997},"Set to true to automatically rotate around the target.",[951,15493,15494],{},[618,15495,971],{},[933,15497,15498,15503,15510],{},[951,15499,15500],{"align":997},[1692,15501,15502],{},"autoRotateSpeed",[951,15504,15505,15506,15509],{"align":997},"How fast to rotate around the target if ",[618,15507,15508],{},".autoRotate"," is true.",[951,15511,15512],{},[618,15513,820],{},[933,15515,15516,15521,15524],{},[951,15517,15518],{"align":997},[1692,15519,15520],{},"enablePan",[951,15522,15523],{"align":997},"Whether to enable panning.",[951,15525,15526],{},[618,15527,961],{},[933,15529,15530,15535,15538],{},[951,15531,15532],{"align":997},[1692,15533,15534],{},"keyPanSpeed",[951,15536,15537],{"align":997},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[951,15539,15540],{},[618,15541,15542],{},"7.0",[933,15544,15545,15550,15553],{},[951,15546,15547],{"align":997},[1692,15548,15549],{},"keys",[951,15551,15552],{"align":997},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[951,15554,15555],{},[618,15556,15557],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[933,15559,15560,15564,15575],{},[951,15561,15562],{"align":997},[1692,15563,13527],{},[951,15565,15566,15567,15570,15571,15574],{"align":997},"How far you can orbit horizontally, upper limit. If set, the interval ",[637,15568,15569],{}," min, max"," must be a sub-interval of ",[637,15572,15573],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[951,15576,15577],{},[618,15578,13535],{},[933,15580,15581,15585,15593],{},[951,15582,15583],{"align":997},[1692,15584,13512],{},[951,15586,15587,15588,15570,15590,15592],{"align":997},"How far you can orbit horizontally, lower limit. If set, the interval ",[637,15589,15569],{},[637,15591,15573],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[951,15594,15595],{},[618,15596,13520],{},[933,15598,15599,15603,15606],{},[951,15600,15601],{"align":997},[1692,15602,13498],{},[951,15604,15605],{"align":997},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[951,15607,15608],{},[618,15609,11685],{},[933,15611,15612,15616,15619],{},[951,15613,15614],{"align":997},[1692,15615,13484],{},[951,15617,15618],{"align":997},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[951,15620,15621],{},[618,15622,965],{},[933,15624,15625,15629,15632],{},[951,15626,15627],{"align":997},[1692,15628,13557],{},[951,15630,15631],{"align":997},"The minimum distance of the camera to the target. Default is 0.",[951,15633,15634],{},[618,15635,965],{},[933,15637,15638,15642,15645],{},[951,15639,15640],{"align":997},[1692,15641,13572],{},[951,15643,15644],{"align":997},"The maximum distance of the camera to the target. Default is Infinity.",[951,15646,15647],{},[618,15648,13535],{},[933,15650,15651,15655,15658],{},[951,15652,15653],{"align":997},[1692,15654,13602],{},[951,15656,15657],{"align":997},"The minimum field of view angle, in radians. Default is 0.",[951,15659,15660],{},[618,15661,965],{},[933,15663,15664,15668,15671],{},[951,15665,15666],{"align":997},[1692,15667,13616],{},[951,15669,15670],{"align":997},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[951,15672,15673],{},[618,15674,13535],{},[933,15676,15677,15681,15684],{},[951,15678,15679],{"align":997},[1692,15680,13862],{},[951,15682,15683],{"align":997},"This object contains references to the touch actions used by the controls.",[951,15685,15686],{},[618,15687,15688],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[933,15690,15691,15695,15698],{},[951,15692,15693],{"align":997},[1692,15694,13843],{},[951,15696,15697],{"align":997},"This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.",[951,15699,15700],{},[618,15701,15702],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[933,15704,15705,15710,15713],{},[951,15706,15707],{"align":997},[1692,15708,15709],{},"enableZoom",[951,15711,15712],{"align":997},"Whether to enable zooming.",[951,15714,15715],{},[618,15716,961],{},[933,15718,15719,15724,15727],{},[951,15720,15721],{"align":997},[1692,15722,15723],{},"zoomSpeed",[951,15725,15726],{"align":997},"How fast to zoom in and out. Default is 1.",[951,15728,15729],{},[618,15730,1897],{},[933,15732,15733,15738,15741],{},[951,15734,15735],{"align":997},[1692,15736,15737],{},"enableRotate",[951,15739,15740],{"align":997},"Whether to enable rotating.",[951,15742,15743],{},[618,15744,961],{},[933,15746,15747,15752,15755],{},[951,15748,15749],{"align":997},[1692,15750,15751],{},"rotateSpeed",[951,15753,15754],{"align":997},"How fast to rotate around the target. Default is 1.",[951,15756,15757],{},[618,15758,1897],{},[933,15760,15761,15765,15769],{},[951,15762,15763],{"align":997},[1692,15764,15143],{},[951,15766,15146,15767,15149],{"align":997},[618,15768,961],{},[951,15770,15771],{},[618,15772,961],{},[504,15774,1171],{"id":1170},[626,15776,15778],{"className":628,"code":15777,"language":633,"meta":576,"style":576},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[618,15779,15780],{"__ignoreMap":576},[637,15781,15782,15784,15786,15788,15790,15792,15794,15796,15798,15800,15802,15804,15806,15808,15810,15812,15814,15816,15818,15820,15822],{"class":639,"line":577},[637,15783,643],{"class":642},[637,15785,795],{"class":646},[637,15787,4277],{"class":642},[637,15789,1194],{"class":650},[637,15791,657],{"class":642},[637,15793,660],{"class":642},[637,15795,14321],{"class":683},[637,15797,660],{"class":642},[637,15799,4277],{"class":642},[637,15801,14328],{"class":650},[637,15803,657],{"class":642},[637,15805,660],{"class":642},[637,15807,14335],{"class":683},[637,15809,660],{"class":642},[637,15811,4277],{"class":642},[637,15813,14342],{"class":650},[637,15815,657],{"class":642},[637,15817,660],{"class":642},[637,15819,14349],{"class":683},[637,15821,660],{"class":642},[637,15823,787],{"class":642},[927,15825,15826,15834],{},[930,15827,15828],{},[933,15829,15830,15832],{},[936,15831,1180],{"align":997},[936,15833,941],{"align":997},[946,15835,15836,15844,15852],{},[933,15837,15838,15842],{},[951,15839,15840],{"align":997},[1692,15841,14328],{},[951,15843,14374],{"align":997},[933,15845,15846,15850],{},[951,15847,15848],{"align":997},[1692,15849,1194],{},[951,15851,14383],{"align":997},[933,15853,15854,15858],{},[951,15855,15856],{"align":997},[1692,15857,14342],{},[951,15859,14392],{"align":997},[1349,15861,14395],{},{"title":576,"searchDepth":577,"depth":578,"links":15863},[15864,15865,15866],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},"Allows you to orbit around the scene",{},{"title":115,"description":15867},"XWrClwQmT_iqfXhEFazDO2swYkiJCagLQjTOAb5xuyM",{"id":15872,"title":119,"body":15873,"description":16223,"extension":591,"links":592,"meta":16224,"navigation":594,"path":120,"seo":16225,"stem":121,"__hash__":16226},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":501,"value":15874,"toc":16218},[15875,15880,15887,15906,15908,16063,16067,16069,16134,16136,16183,16216],[608,15876,15877],{},[15878,15879],"controls-pointer-lock-controls",{},[614,15881,15882,15886],{},[1140,15883,14519],{"href":15884,"rel":15885},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1144]," is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.",[3222,15888,15889],{},[614,15890,15891,15892,15905],{},"This control uses the ",[637,15893,15895,15898],{"style":15894},"background-color:#222;padding:0.25rem;border-radius:4px;",[1140,15896],{"href":116,"style":15897},"color:#f7f7f7;text-decoration:none",[1140,15899,15902],{"href":15900,"rel":15901},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1144],[618,15903,15904],{},"Pointer Lock API",", the same rules are applied, for example, you need to interact with the browser to \"lock\" or start the event.\nIn addition, you need to wait 1 second between canceling and re-starting the event",[504,15907,15],{"id":624},[626,15909,15912],{"className":628,"code":15910,"highlights":15911,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointerLockControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera />\n \u003CBox :position-y=\"0.5\" />\n \u003CPointerLockControls />\n \u003CTresGridHelper />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,15913,15914,15934,15952,15976,15984,15988,15996,16004,16012,16030,16039,16047,16055],{"__ignoreMap":576},[637,15915,15916,15918,15920,15922,15924,15926,15928,15930,15932],{"class":639,"line":577},[637,15917,643],{"class":642},[637,15919,647],{"class":646},[637,15921,651],{"class":650},[637,15923,654],{"class":650},[637,15925,657],{"class":642},[637,15927,660],{"class":642},[637,15929,664],{"class":663},[637,15931,660],{"class":642},[637,15933,669],{"class":642},[637,15935,15936,15938,15940,15942,15944,15946,15948,15950],{"class":639,"line":578},[637,15937,677],{"class":676},[637,15939,680],{"class":642},[637,15941,715],{"class":683},[637,15943,693],{"class":642},[637,15945,696],{"class":676},[637,15947,699],{"class":642},[637,15949,724],{"class":663},[637,15951,705],{"class":642},[637,15953,15955,15957,15959,15962,15964,15966,15968,15970,15972,15974],{"class":15954,"line":708},[639,673],[637,15956,677],{"class":676},[637,15958,680],{"class":642},[637,15960,15961],{"class":683}," PointerLockControls",[637,15963,687],{"class":642},[637,15965,1420],{"class":683},[637,15967,693],{"class":642},[637,15969,696],{"class":676},[637,15971,699],{"class":642},[637,15973,702],{"class":663},[637,15975,705],{"class":642},[637,15977,15978,15980,15982],{"class":639,"line":729},[637,15979,732],{"class":642},[637,15981,647],{"class":646},[637,15983,669],{"class":642},[637,15985,15986],{"class":639,"line":739},[637,15987,742],{"emptyLinePlaceholder":594},[637,15989,15990,15992,15994],{"class":639,"line":745},[637,15991,643],{"class":642},[637,15993,750],{"class":646},[637,15995,669],{"class":642},[637,15997,15998,16000,16002],{"class":639,"line":755},[637,15999,758],{"class":642},[637,16001,761],{"class":646},[637,16003,669],{"class":642},[637,16005,16006,16008,16010],{"class":639,"line":778},[637,16007,781],{"class":642},[637,16009,784],{"class":646},[637,16011,787],{"class":642},[637,16013,16014,16016,16018,16020,16022,16024,16026,16028],{"class":639,"line":790},[637,16015,781],{"class":642},[637,16017,217],{"class":646},[637,16019,1962],{"class":650},[637,16021,657],{"class":642},[637,16023,660],{"class":642},[637,16025,1969],{"class":663},[637,16027,660],{"class":642},[637,16029,787],{"class":642},[637,16031,16033,16035,16037],{"class":16032,"line":800},[639,673],[637,16034,781],{"class":642},[637,16036,14519],{"class":646},[637,16038,787],{"class":642},[637,16040,16041,16043,16045],{"class":639,"line":805},[637,16042,781],{"class":642},[637,16044,8070],{"class":646},[637,16046,787],{"class":642},[637,16048,16049,16051,16053],{"class":639,"line":827},[637,16050,905],{"class":642},[637,16052,761],{"class":646},[637,16054,669],{"class":642},[637,16056,16057,16059,16061],{"class":639,"line":631},[637,16058,732],{"class":642},[637,16060,750],{"class":646},[637,16062,669],{"class":642},[3222,16064,16065],{},[614,16066,13416],{},[504,16068,922],{"id":921},[927,16070,16071,16081],{},[930,16072,16073],{},[933,16074,16075,16077,16079],{},[936,16076,938],{"align":997},[936,16078,941],{"align":997},[936,16080,944],{},[946,16082,16083,16097,16109,16121],{},[933,16084,16085,16089,16093],{},[951,16086,16087],{"align":997},[1692,16088,13442],{},[951,16090,958,16091,14724],{"align":997},[618,16092,961],{},[951,16094,16095],{},[618,16096,971],{},[933,16098,16099,16103,16105],{},[951,16100,16101],{"align":997},[1692,16102,13456],{},[951,16104,13459],{"align":997},[951,16106,16107],{},[618,16108,1167],{},[933,16110,16111,16115,16117],{},[951,16112,16113],{"align":997},[1692,16114,13470],{},[951,16116,15132],{"align":997},[951,16118,16119],{},[618,16120,1167],{},[933,16122,16123,16127,16130],{},[951,16124,16125],{"align":997},[1692,16126,14759],{},[951,16128,16129],{"align":997},"Accept an id element as string, if it is set, the new element will be used as the trigger",[951,16131,16132],{},[618,16133,1167],{},[504,16135,1171],{"id":1170},[626,16137,16139],{"className":628,"code":16138,"language":633,"meta":576,"style":576},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[618,16140,16141],{"__ignoreMap":576},[637,16142,16143,16145,16147,16149,16151,16153,16155,16157,16159,16161,16163,16165,16167,16169,16171,16173,16175,16177,16179,16181],{"class":639,"line":577},[637,16144,643],{"class":642},[637,16146,14519],{"class":646},[637,16148,4277],{"class":642},[637,16150,1194],{"class":650},[637,16152,657],{"class":642},[637,16154,660],{"class":642},[637,16156,14321],{"class":683},[637,16158,660],{"class":642},[637,16160,4277],{"class":642},[637,16162,14796],{"class":650},[637,16164,657],{"class":642},[637,16166,660],{"class":642},[637,16168,2460],{"class":642},[637,16170,14805],{"class":6859},[637,16172,3363],{"class":642},[637,16174,3700],{"class":650},[637,16176,14812],{"class":2457},[637,16178,14815],{"class":683},[637,16180,660],{"class":642},[637,16182,787],{"class":683},[927,16184,16185,16193],{},[930,16186,16187],{},[933,16188,16189,16191],{},[936,16190,1180],{"align":997},[936,16192,941],{"align":997},[946,16194,16195,16208],{},[933,16196,16197,16201],{},[951,16198,16199],{"align":997},[1692,16200,14838],{},[951,16202,14841,16203,14844,16205,16207],{"align":997},[618,16204,961],{},[618,16206,971],{}," if \"unlock\" events are trigger.",[933,16209,16210,16214],{},[951,16211,16212],{"align":997},[1692,16213,1194],{},[951,16215,14383],{"align":997},[1349,16217,14858],{},{"title":576,"searchDepth":577,"depth":578,"links":16219},[16220,16221,16222],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":119,"description":16223},"vV10imj42ZYLgsDF4-C_pkzy24eb_ucQLr8NOacrAsg",{"id":16228,"title":123,"body":16229,"description":16926,"extension":591,"links":592,"meta":16927,"navigation":594,"path":124,"seo":16928,"stem":125,"__hash__":16929},"docs/2.api/2.controls/transform-controls.md",{"type":501,"value":16230,"toc":16916},[16231,16238,16243,16245,16256,16452,16470,16474,16477,16481,16486,16489,16526,16530,16535,16538,16573,16576,16581,16584,16619,16621,16847,16849,16910,16913],[614,16232,2799,16233,16237],{},[1140,16234,123],{"href":16235,"rel":16236},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1144]," are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender",[608,16239,16240],{},[16241,16242],"controls-transform-controls",{},[504,16244,15],{"id":624},[614,16246,16247,16248,16251,16252,16255],{},"To use the Transform Controls, simply add the ",[618,16249,16250],{},"TransformControls"," component to your scene. You can pass the ",[618,16253,16254],{},"templateRef","of the instance you want to control as a prop.",[626,16257,16260],{"className":628,"code":16258,"highlights":16259,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nconst boxRef = shallowRef()\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n \u003COrbitControls make-default />\n \u003CTransformControls :object=\"boxRef\" />\n \u003CTresMesh ref=\"boxRef\" :position=\"[0, 4, 0]\" cast-shadow>\n \u003CTresBoxGeometry :args=\"[1.5, 1.5, 1.5]\" />\n \u003CTresMeshToonMaterial color=\"#4F4F4F\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[755,778],[618,16261,16262,16272,16285,16293,16301,16309,16328,16339,16359,16391,16410,16428,16436,16444],{"__ignoreMap":576},[637,16263,16264,16266,16268,16270],{"class":639,"line":577},[637,16265,643],{"class":642},[637,16267,647],{"class":646},[637,16269,651],{"class":650},[637,16271,669],{"class":642},[637,16273,16274,16276,16279,16281,16283],{"class":639,"line":578},[637,16275,2438],{"class":650},[637,16277,16278],{"class":683}," boxRef ",[637,16280,657],{"class":642},[637,16282,3521],{"class":2457},[637,16284,6556],{"class":683},[637,16286,16287,16289,16291],{"class":639,"line":708},[637,16288,732],{"class":642},[637,16290,647],{"class":646},[637,16292,669],{"class":642},[637,16294,16295,16297,16299],{"class":639,"line":729},[637,16296,643],{"class":642},[637,16298,750],{"class":646},[637,16300,669],{"class":642},[637,16302,16303,16305,16307],{"class":639,"line":739},[637,16304,758],{"class":642},[637,16306,761],{"class":646},[637,16308,669],{"class":642},[637,16310,16311,16313,16315,16317,16319,16321,16324,16326],{"class":639,"line":745},[637,16312,781],{"class":642},[637,16314,784],{"class":646},[637,16316,1982],{"class":650},[637,16318,657],{"class":642},[637,16320,660],{"class":642},[637,16322,16323],{"class":663},"[45, 1, 0.1, 1000]",[637,16325,660],{"class":642},[637,16327,787],{"class":642},[637,16329,16331,16333,16335,16337],{"class":16330,"line":755},[639,673],[637,16332,781],{"class":642},[637,16334,795],{"class":646},[637,16336,1874],{"class":650},[637,16338,787],{"class":642},[637,16340,16342,16344,16346,16348,16350,16352,16355,16357],{"class":16341,"line":778},[639,673],[637,16343,781],{"class":642},[637,16345,16250],{"class":646},[637,16347,4471],{"class":650},[637,16349,657],{"class":642},[637,16351,660],{"class":642},[637,16353,16354],{"class":663},"boxRef",[637,16356,660],{"class":642},[637,16358,787],{"class":642},[637,16360,16361,16363,16365,16367,16369,16371,16373,16375,16377,16379,16381,16384,16386,16389],{"class":639,"line":790},[637,16362,781],{"class":642},[637,16364,856],{"class":646},[637,16366,3895],{"class":650},[637,16368,657],{"class":642},[637,16370,660],{"class":642},[637,16372,16354],{"class":663},[637,16374,660],{"class":642},[637,16376,1508],{"class":650},[637,16378,657],{"class":642},[637,16380,660],{"class":642},[637,16382,16383],{"class":663},"[0, 4, 0]",[637,16385,660],{"class":642},[637,16387,16388],{"class":650}," cast-shadow",[637,16390,669],{"class":642},[637,16392,16393,16395,16397,16399,16401,16403,16406,16408],{"class":639,"line":800},[637,16394,853],{"class":642},[637,16396,867],{"class":646},[637,16398,1982],{"class":650},[637,16400,657],{"class":642},[637,16402,660],{"class":642},[637,16404,16405],{"class":663},"[1.5, 1.5, 1.5]",[637,16407,660],{"class":642},[637,16409,787],{"class":642},[637,16411,16412,16414,16416,16418,16420,16422,16424,16426],{"class":639,"line":805},[637,16413,853],{"class":642},[637,16415,13339],{"class":646},[637,16417,2712],{"class":650},[637,16419,657],{"class":642},[637,16421,660],{"class":642},[637,16423,7948],{"class":663},[637,16425,660],{"class":642},[637,16427,787],{"class":642},[637,16429,16430,16432,16434],{"class":639,"line":827},[637,16431,895],{"class":642},[637,16433,856],{"class":646},[637,16435,669],{"class":642},[637,16437,16438,16440,16442],{"class":639,"line":631},[637,16439,905],{"class":642},[637,16441,761],{"class":646},[637,16443,669],{"class":642},[637,16445,16446,16448,16450],{"class":639,"line":850},[637,16447,732],{"class":642},[637,16449,750],{"class":646},[637,16451,669],{"class":642},[3222,16453,16454],{},[614,16455,16456,16457,16461,16462,16464,16465,16467,16468,1146],{},"If you are using other controls ",[637,16458,16459],{"style":15894},[1140,16460,795],{"href":116,"style":15897}," they will interfere with each other when dragging. To avoid this, you can set the ",[618,16463,13442],{}," prop to ",[618,16466,961],{}," on the ",[1692,16469,795],{},[504,16471,16473],{"id":16472},"modes","Modes",[614,16475,16476],{},"The Transform Controls can be used in three different modes:",[4074,16478,16480],{"id":16479},"translate","Translate",[614,16482,16483],{},[9481,16484],{"alt":16480,"src":16485},"/cientos/transform-controls-translate.png",[614,16487,16488],{},"The default mode allows you to move the object around the scene.",[626,16490,16492],{"className":628,"code":16491,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[618,16493,16494],{"__ignoreMap":576},[637,16495,16496,16498,16500,16502,16504,16506,16508,16510,16512,16515,16517,16519,16522,16524],{"class":639,"line":577},[637,16497,643],{"class":642},[637,16499,16250],{"class":646},[637,16501,6864],{"class":650},[637,16503,657],{"class":642},[637,16505,660],{"class":642},[637,16507,16479],{"class":663},[637,16509,660],{"class":642},[637,16511,3052],{"class":642},[637,16513,16514],{"class":650},"object",[637,16516,657],{"class":642},[637,16518,660],{"class":642},[637,16520,16521],{"class":683},"sphereRef",[637,16523,660],{"class":642},[637,16525,787],{"class":642},[4074,16527,16529],{"id":16528},"rotate","Rotate",[614,16531,16532],{},[9481,16533],{"alt":16529,"src":16534},"/cientos/transform-controls-rotate.png",[614,16536,16537],{},"The rotate mode allows you to rotate the object around the scene.",[626,16539,16541],{"className":628,"code":16540,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[618,16542,16543],{"__ignoreMap":576},[637,16544,16545,16547,16549,16551,16553,16555,16557,16559,16561,16563,16565,16567,16569,16571],{"class":639,"line":577},[637,16546,643],{"class":642},[637,16548,16250],{"class":646},[637,16550,6864],{"class":650},[637,16552,657],{"class":642},[637,16554,660],{"class":642},[637,16556,16528],{"class":663},[637,16558,660],{"class":642},[637,16560,3052],{"class":642},[637,16562,16514],{"class":650},[637,16564,657],{"class":642},[637,16566,660],{"class":642},[637,16568,16354],{"class":683},[637,16570,660],{"class":642},[637,16572,787],{"class":642},[4074,16574,16575],{"id":5653},"Scale",[614,16577,16578],{},[9481,16579],{"alt":16575,"src":16580},"/cientos/transform-controls-scale.png",[614,16582,16583],{},"The scale mode allows you to scale the object around the scene.",[626,16585,16587],{"className":628,"code":16586,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[618,16588,16589],{"__ignoreMap":576},[637,16590,16591,16593,16595,16597,16599,16601,16603,16605,16607,16609,16611,16613,16615,16617],{"class":639,"line":577},[637,16592,643],{"class":642},[637,16594,16250],{"class":646},[637,16596,6864],{"class":650},[637,16598,657],{"class":642},[637,16600,660],{"class":642},[637,16602,5653],{"class":663},[637,16604,660],{"class":642},[637,16606,3052],{"class":642},[637,16608,16514],{"class":650},[637,16610,657],{"class":642},[637,16612,660],{"class":642},[637,16614,16521],{"class":683},[637,16616,660],{"class":642},[637,16618,787],{"class":642},[504,16620,922],{"id":921},[927,16622,16623,16633],{},[930,16624,16625],{},[933,16626,16627,16629,16631],{},[936,16628,938],{"align":997},[936,16630,941],{"align":997},[936,16632,944],{},[946,16634,16635,16653,16672,16688,16723,16743,16757,16771,16785,16799,16815,16831],{},[933,16636,16637,16641,16649],{},[951,16638,16639],{"align":997},[1692,16640,16514],{},[951,16642,16643,16644,16648],{"align":997},"The instance ",[1140,16645,7643],{"href":16646,"rel":16647},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1144]," to control.",[951,16650,16651],{},[618,16652,3679],{},[933,16654,16655,16659,16668],{},[951,16656,16657],{"align":997},[1692,16658,6885],{},[951,16660,16661,16662,1695,16664,5634,16666,1146],{"align":997},"The mode of the controls. Can be ",[618,16663,16479],{},[618,16665,16528],{},[618,16667,5653],{},[951,16669,16670],{},[618,16671,16479],{},[933,16673,16674,16679,16684],{},[951,16675,16676],{"align":997},[1692,16677,16678],{},"enabled",[951,16680,958,16681,16683],{"align":997},[618,16682,961],{},", the controls will be enabled.",[951,16685,16686],{},[618,16687,961],{},[933,16689,16690,16695,16719],{},[951,16691,16692],{"align":997},[1692,16693,16694],{},"axis",[951,16696,16697,16698,1695,16701,1695,16704,1695,16707,1695,16710,1695,16713,1695,16716,1146],{"align":997},"The axis to use for the controls. Can be ",[618,16699,16700],{},"X",[618,16702,16703],{},"Y",[618,16705,16706],{},"Z",[618,16708,16709],{},"XY",[618,16711,16712],{},"YZ",[618,16714,16715],{},"XZ",[618,16717,16718],{},"XYZ",[951,16720,16721],{},[618,16722,16718],{},[933,16724,16725,16730,16739],{},[951,16726,16727],{"align":997},[1692,16728,16729],{},"space",[951,16731,16732,16733,5634,16736,1146],{"align":997},"The space to use for the controls. Can be ",[618,16734,16735],{},"local",[618,16737,16738],{},"world",[951,16740,16741],{},[618,16742,16735],{},[933,16744,16745,16750,16753],{},[951,16746,16747],{"align":997},[1692,16748,16749],{},"size",[951,16751,16752],{"align":997},"The size of the controls.",[951,16754,16755],{},[618,16756,1897],{},[933,16758,16759,16764,16767],{},[951,16760,16761],{"align":997},[1692,16762,16763],{},"translationSnap",[951,16765,16766],{"align":997},"The distance to snap to when translating. (World units)",[951,16768,16769],{},[618,16770,3679],{},[933,16772,16773,16778,16781],{},[951,16774,16775],{"align":997},[1692,16776,16777],{},"rotationSnap",[951,16779,16780],{"align":997},"The angle to snap to when rotating. (Radians)",[951,16782,16783],{},[618,16784,3679],{},[933,16786,16787,16792,16795],{},[951,16788,16789],{"align":997},[1692,16790,16791],{},"scaleSnap",[951,16793,16794],{"align":997},"The scale to snap to when scaling.",[951,16796,16797],{},[618,16798,3679],{},[933,16800,16801,16806,16811],{},[951,16802,16803],{"align":997},[1692,16804,16805],{},"showX",[951,16807,958,16808,16810],{"align":997},[618,16809,961],{},", the X-axis helper will be shown.",[951,16812,16813],{},[618,16814,961],{},[933,16816,16817,16822,16827],{},[951,16818,16819],{"align":997},[1692,16820,16821],{},"showY",[951,16823,958,16824,16826],{"align":997},[618,16825,961],{},", the Y-axis helper will be shown.",[951,16828,16829],{},[618,16830,961],{},[933,16832,16833,16838,16843],{},[951,16834,16835],{"align":997},[1692,16836,16837],{},"showZ",[951,16839,958,16840,16842],{"align":997},[618,16841,961],{},", the Z-axis helper will be shown.",[951,16844,16845],{},[618,16846,961],{},[504,16848,1171],{"id":1170},[927,16850,16851,16859],{},[930,16852,16853],{},[933,16854,16855,16857],{},[936,16856,1180],{"align":997},[936,16858,941],{"align":997},[946,16860,16861,16871,16880,16890,16900],{},[933,16862,16863,16868],{},[951,16864,16865],{"align":997},[1692,16866,16867],{},"dragging",[951,16869,16870],{"align":997},"Fired when the user starts or stops dragging the controls.",[933,16872,16873,16877],{},[951,16874,16875],{"align":997},[1692,16876,1194],{},[951,16878,16879],{"align":997},"Fired when the user changes the controls.",[933,16881,16882,16887],{},[951,16883,16884],{"align":997},[1692,16885,16886],{},"mouseDown",[951,16888,16889],{"align":997},"Fired when the user clicks on the controls.",[933,16891,16892,16897],{},[951,16893,16894],{"align":997},[1692,16895,16896],{},"mouseUp",[951,16898,16899],{"align":997},"Fired when the user releases the mouse button on the controls.",[933,16901,16902,16907],{},[951,16903,16904],{"align":997},[1692,16905,16906],{},"objectChange",[951,16908,16909],{"align":997},"Fired when the user changes the object.",[1349,16911,16912],{"scoped":594},"\nimg {\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: top;\n border-radius: 8px;\n}\n",[1349,16914,16915],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":16917},[16918,16919,16924,16925],{"id":624,"depth":578,"text":15},{"id":16472,"depth":578,"text":16473,"children":16920},[16921,16922,16923],{"id":16479,"depth":708,"text":16480},{"id":16528,"depth":708,"text":16529},{"id":5653,"depth":708,"text":16575},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":123,"description":16926},"rtA5mRjWCioaInPfcKtnEcdh3kG88FfwUz7CBNeBOWs",[16931,17976,18743,19361,19999,20634,22080,24930,25405],{"id":16932,"title":133,"body":16933,"description":17972,"extension":591,"links":592,"meta":17973,"navigation":594,"path":134,"seo":17974,"stem":135,"__hash__":17975},"docs/2.api/3.loaders/1.use-gltf.md",{"type":501,"value":16934,"toc":17964},[16935,16940,16947,16949,17327,17343,17415,17419,17553,17556,17625,17629,17632,17724,17727,17731,17747,17903,17912,17916,17925,17956,17961],[2318,16936,16937],{},[16938,16939],"loaders-gltf",{},[614,16941,16942,16943,16946],{},"A composable that allows you to easily load glb/glTF models into your ",[1692,16944,16945],{},"TresJS"," scene.",[504,16948,15],{"id":624},[16950,16951,16952,17102],"code-group",{},[626,16953,16957],{"className":628,"code":16954,"filename":16955,"highlights":16956,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\nconst { state, nodes, materials } = useGLTF(path)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"state\" :object=\"state?.scene\" />\n\u003C/template>\n","TheModel.vue",[578,739],[618,16958,16959,16979,16998,17002,17018,17045,17053,17057,17065,17094],{"__ignoreMap":576},[637,16960,16961,16963,16965,16967,16969,16971,16973,16975,16977],{"class":639,"line":577},[637,16962,643],{"class":642},[637,16964,647],{"class":646},[637,16966,651],{"class":650},[637,16968,654],{"class":650},[637,16970,657],{"class":642},[637,16972,660],{"class":642},[637,16974,664],{"class":663},[637,16976,660],{"class":642},[637,16978,669],{"class":642},[637,16980,16982,16984,16986,16988,16990,16992,16994,16996],{"class":16981,"line":578},[639,673],[637,16983,677],{"class":676},[637,16985,680],{"class":642},[637,16987,4370],{"class":683},[637,16989,693],{"class":642},[637,16991,696],{"class":676},[637,16993,699],{"class":642},[637,16995,702],{"class":663},[637,16997,705],{"class":642},[637,16999,17000],{"class":639,"line":708},[637,17001,742],{"emptyLinePlaceholder":594},[637,17003,17004,17006,17009,17011,17013,17016],{"class":639,"line":729},[637,17005,2438],{"class":650},[637,17007,17008],{"class":683}," path ",[637,17010,657],{"class":642},[637,17012,699],{"class":642},[637,17014,17015],{"class":663},"./blender-cube.glb",[637,17017,705],{"class":642},[637,17019,17021,17023,17025,17027,17029,17031,17033,17036,17038,17040,17042],{"class":17020,"line":739},[639,673],[637,17022,2438],{"class":650},[637,17024,680],{"class":642},[637,17026,2443],{"class":683},[637,17028,687],{"class":642},[637,17030,11082],{"class":683},[637,17032,687],{"class":642},[637,17034,17035],{"class":683}," materials ",[637,17037,2451],{"class":642},[637,17039,2454],{"class":642},[637,17041,4370],{"class":2457},[637,17043,17044],{"class":683},"(path)\n",[637,17046,17047,17049,17051],{"class":639,"line":745},[637,17048,732],{"class":642},[637,17050,647],{"class":646},[637,17052,669],{"class":642},[637,17054,17055],{"class":639,"line":755},[637,17056,742],{"emptyLinePlaceholder":594},[637,17058,17059,17061,17063],{"class":639,"line":778},[637,17060,643],{"class":642},[637,17062,750],{"class":646},[637,17064,669],{"class":642},[637,17066,17067,17069,17071,17073,17075,17077,17079,17081,17083,17085,17087,17090,17092],{"class":639,"line":790},[637,17068,758],{"class":642},[637,17070,4457],{"class":646},[637,17072,2733],{"class":650},[637,17074,657],{"class":642},[637,17076,660],{"class":642},[637,17078,14805],{"class":663},[637,17080,660],{"class":642},[637,17082,4471],{"class":650},[637,17084,657],{"class":642},[637,17086,660],{"class":642},[637,17088,17089],{"class":663},"state?.scene",[637,17091,660],{"class":642},[637,17093,787],{"class":642},[637,17095,17096,17098,17100],{"class":639,"line":800},[637,17097,732],{"class":642},[637,17099,750],{"class":646},[637,17101,669],{"class":642},[626,17103,17106],{"className":628,"code":17104,"filename":17105,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#F78B3D\">\n \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n \u003COrbitControls />\n \u003CTheModel />\n \u003CTresDirectionalLight\n :intensity=\"2\"\n :position=\"[3, 3, 3]\"\n />\n \u003CTresAmbientLight :intensity=\"1\" />\n \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[618,17107,17108,17128,17146,17164,17180,17188,17192,17200,17219,17238,17246,17255,17262,17275,17288,17293,17311,17319],{"__ignoreMap":576},[637,17109,17110,17112,17114,17116,17118,17120,17122,17124,17126],{"class":639,"line":577},[637,17111,643],{"class":642},[637,17113,647],{"class":646},[637,17115,651],{"class":650},[637,17117,654],{"class":650},[637,17119,657],{"class":642},[637,17121,660],{"class":642},[637,17123,664],{"class":663},[637,17125,660],{"class":642},[637,17127,669],{"class":642},[637,17129,17130,17132,17134,17136,17138,17140,17142,17144],{"class":639,"line":578},[637,17131,677],{"class":676},[637,17133,680],{"class":642},[637,17135,690],{"class":683},[637,17137,693],{"class":642},[637,17139,696],{"class":676},[637,17141,699],{"class":642},[637,17143,702],{"class":663},[637,17145,705],{"class":642},[637,17147,17148,17150,17152,17154,17156,17158,17160,17162],{"class":639,"line":708},[637,17149,677],{"class":676},[637,17151,680],{"class":642},[637,17153,715],{"class":683},[637,17155,693],{"class":642},[637,17157,696],{"class":676},[637,17159,699],{"class":642},[637,17161,724],{"class":663},[637,17163,705],{"class":642},[637,17165,17166,17168,17171,17173,17175,17178],{"class":639,"line":729},[637,17167,677],{"class":676},[637,17169,17170],{"class":683}," TheModel ",[637,17172,8454],{"class":676},[637,17174,699],{"class":642},[637,17176,17177],{"class":663},"./TheModel.vue",[637,17179,705],{"class":642},[637,17181,17182,17184,17186],{"class":639,"line":739},[637,17183,732],{"class":642},[637,17185,647],{"class":646},[637,17187,669],{"class":642},[637,17189,17190],{"class":639,"line":745},[637,17191,742],{"emptyLinePlaceholder":594},[637,17193,17194,17196,17198],{"class":639,"line":755},[637,17195,643],{"class":642},[637,17197,750],{"class":646},[637,17199,669],{"class":642},[637,17201,17202,17204,17206,17208,17210,17212,17215,17217],{"class":639,"line":778},[637,17203,758],{"class":642},[637,17205,761],{"class":646},[637,17207,764],{"class":650},[637,17209,657],{"class":642},[637,17211,660],{"class":642},[637,17213,17214],{"class":663},"#F78B3D",[637,17216,660],{"class":642},[637,17218,669],{"class":642},[637,17220,17221,17223,17225,17227,17229,17231,17234,17236],{"class":639,"line":790},[637,17222,781],{"class":642},[637,17224,784],{"class":646},[637,17226,1508],{"class":650},[637,17228,657],{"class":642},[637,17230,660],{"class":642},[637,17232,17233],{"class":663},"[3, 2, 5]",[637,17235,660],{"class":642},[637,17237,787],{"class":642},[637,17239,17240,17242,17244],{"class":639,"line":800},[637,17241,781],{"class":642},[637,17243,795],{"class":646},[637,17245,787],{"class":642},[637,17247,17248,17250,17253],{"class":639,"line":805},[637,17249,781],{"class":642},[637,17251,17252],{"class":646},"TheModel",[637,17254,787],{"class":642},[637,17256,17257,17259],{"class":639,"line":827},[637,17258,781],{"class":642},[637,17260,17261],{"class":646},"TresDirectionalLight\n",[637,17263,17264,17267,17269,17271,17273],{"class":639,"line":631},[637,17265,17266],{"class":650}," :intensity",[637,17268,657],{"class":642},[637,17270,660],{"class":642},[637,17272,820],{"class":663},[637,17274,3154],{"class":642},[637,17276,17277,17280,17282,17284,17286],{"class":639,"line":850},[637,17278,17279],{"class":650}," :position",[637,17281,657],{"class":642},[637,17283,660],{"class":642},[637,17285,13301],{"class":663},[637,17287,3154],{"class":642},[637,17289,17290],{"class":639,"line":861},[637,17291,17292],{"class":642}," />\n",[637,17294,17295,17297,17299,17301,17303,17305,17307,17309],{"class":639,"line":872},[637,17296,781],{"class":642},[637,17298,9702],{"class":646},[637,17300,1890],{"class":650},[637,17302,657],{"class":642},[637,17304,660],{"class":642},[637,17306,1897],{"class":663},[637,17308,660],{"class":642},[637,17310,787],{"class":642},[637,17312,17313,17315,17317],{"class":639,"line":882},[637,17314,905],{"class":642},[637,17316,761],{"class":646},[637,17318,669],{"class":642},[637,17320,17321,17323,17325],{"class":639,"line":632},[637,17322,732],{"class":642},[637,17324,750],{"class":646},[637,17326,669],{"class":642},[614,17328,17329,17330,17332,17333,17336,17337,17342],{},"An advantage of using ",[618,17331,133],{}," is that you can pass a ",[618,17334,17335],{},"draco"," prop to enable ",[1140,17338,17341],{"href":17339,"rel":17340},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1144],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[626,17344,17346],{"className":1208,"code":17345,"language":664,"meta":576,"style":576},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[618,17347,17348,17366,17370],{"__ignoreMap":576},[637,17349,17350,17352,17354,17356,17358,17360,17362,17364],{"class":639,"line":577},[637,17351,677],{"class":676},[637,17353,680],{"class":642},[637,17355,4370],{"class":683},[637,17357,693],{"class":642},[637,17359,696],{"class":676},[637,17361,699],{"class":642},[637,17363,702],{"class":663},[637,17365,705],{"class":642},[637,17367,17368],{"class":639,"line":578},[637,17369,742],{"emptyLinePlaceholder":594},[637,17371,17372,17374,17376,17378,17380,17382,17384,17386,17388,17390,17392,17394,17396,17399,17401,17403,17405,17407,17409,17411,17413],{"class":639,"line":708},[637,17373,2438],{"class":650},[637,17375,680],{"class":642},[637,17377,2443],{"class":683},[637,17379,687],{"class":642},[637,17381,11082],{"class":683},[637,17383,687],{"class":642},[637,17385,17035],{"class":683},[637,17387,2451],{"class":642},[637,17389,2454],{"class":642},[637,17391,4370],{"class":2457},[637,17393,2460],{"class":683},[637,17395,2463],{"class":642},[637,17397,17398],{"class":663},"/models/AkuAku.gltf",[637,17400,2463],{"class":642},[637,17402,687],{"class":642},[637,17404,680],{"class":642},[637,17406,4415],{"class":646},[637,17408,1240],{"class":642},[637,17410,4421],{"class":4420},[637,17412,693],{"class":642},[637,17414,2471],{"class":683},[504,17416,17418],{"id":17417},"return-values","Return Values",[927,17420,17421,17431],{},[930,17422,17423],{},[933,17424,17425,17427,17429],{},[936,17426,8110],{"align":997},[936,17428,5990],{},[936,17430,941],{},[946,17432,17433,17450,17464,17478,17493,17508,17523,17538],{},[933,17434,17435,17439,17444],{},[951,17436,17437],{"align":997},[1692,17438,14805],{},[951,17440,17441],{},[618,17442,17443],{},"Ref\u003CGLTF | null>",[951,17445,17446,17447,17449],{},"The loaded GLTF, or ",[618,17448,3679],{}," until it arrives",[933,17451,17452,17456,17461],{},[951,17453,17454],{"align":997},[1692,17455,11051],{},[951,17457,17458],{},[618,17459,17460],{},"ComputedRef\u003CTNodes>",[951,17462,17463],{},"All nodes in the scene, keyed by name",[933,17465,17466,17470,17475],{},[951,17467,17468],{"align":997},[1692,17469,528],{},[951,17471,17472],{},[618,17473,17474],{},"ComputedRef\u003CTMaterials>",[951,17476,17477],{},"All materials in the scene, keyed by name",[933,17479,17480,17485,17490],{},[951,17481,17482],{"align":997},[1692,17483,17484],{},"isLoading",[951,17486,17487],{},[618,17488,17489],{},"Ref\u003Cboolean>",[951,17491,17492],{},"Whether the model is currently loading",[933,17494,17495,17500,17505],{},[951,17496,17497],{"align":997},[1692,17498,17499],{},"error",[951,17501,17502],{},[618,17503,17504],{},"Ref\u003Cunknown>",[951,17506,17507],{},"Whatever the loader threw, if anything",[933,17509,17510,17515,17520],{},[951,17511,17512],{"align":997},[1692,17513,17514],{},"progress",[951,17516,17517],{},[618,17518,17519],{},"{ loaded: number, total: number, percentage: number }",[951,17521,17522],{},"Progress of the current load",[933,17524,17525,17530,17535],{},[951,17526,17527],{"align":997},[1692,17528,17529],{},"load",[951,17531,17532],{},[618,17533,17534],{},"(path: string) => void",[951,17536,17537],{},"Load a different model into the same state",[933,17539,17540,17545,17550],{},[951,17541,17542],{"align":997},[1692,17543,17544],{},"execute",[951,17546,17547],{},[618,17548,17549],{},"(delay?: number) => Promise\u003CGLTF>",[951,17551,17552],{},"Re-run the load",[504,17554,14044],{"id":17555},"options",[927,17557,17558,17570],{},[930,17559,17560],{},[933,17561,17562,17564,17566,17568],{},[936,17563,8110],{"align":997},[936,17565,5990],{},[936,17567,944],{},[936,17569,941],{},[946,17571,17572,17590,17609],{},[933,17573,17574,17578,17583,17587],{},[951,17575,17576],{"align":997},[1692,17577,17335],{},[951,17579,17580],{},[618,17581,17582],{},"boolean",[951,17584,17585],{},[618,17586,971],{},[951,17588,17589],{},"Whether to enable Draco compression.",[933,17591,17592,17597,17601,17606],{},[951,17593,17594],{"align":997},[1692,17595,17596],{},"decoderPath",[951,17598,17599],{},[618,17600,3595],{},[951,17602,17603],{},[618,17604,17605],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[951,17607,17608],{},"Path to the Draco decoder.",[933,17610,17611,17616,17620,17622],{},[951,17612,17613],{"align":997},[1692,17614,17615],{},"traverse",[951,17617,17618],{},[618,17619,12068],{},[951,17621],{},[951,17623,17624],{},"A traverse function applied to the scene upon loading the model.",[504,17626,17628],{"id":17627},"accessing-nodes-and-materials","Accessing Nodes and Materials",[614,17630,17631],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[626,17633,17635],{"className":1208,"code":17634,"language":664,"meta":576,"style":576},"const { nodes, materials } = useGLTF('/model.glb')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[618,17636,17637,17666,17670,17675,17695,17699,17704],{"__ignoreMap":576},[637,17638,17639,17641,17643,17645,17647,17649,17651,17653,17655,17657,17659,17662,17664],{"class":639,"line":577},[637,17640,2438],{"class":650},[637,17642,680],{"class":642},[637,17644,11082],{"class":683},[637,17646,687],{"class":642},[637,17648,17035],{"class":683},[637,17650,2451],{"class":642},[637,17652,2454],{"class":642},[637,17654,4370],{"class":2457},[637,17656,2460],{"class":683},[637,17658,2463],{"class":642},[637,17660,17661],{"class":663},"/model.glb",[637,17663,2463],{"class":642},[637,17665,2471],{"class":683},[637,17667,17668],{"class":639,"line":578},[637,17669,742],{"emptyLinePlaceholder":594},[637,17671,17672],{"class":639,"line":708},[637,17673,17674],{"class":1231},"// Access a specific node\n",[637,17676,17677,17679,17682,17684,17686,17688,17690,17692],{"class":639,"line":729},[637,17678,2438],{"class":650},[637,17680,17681],{"class":683}," mesh ",[637,17683,657],{"class":642},[637,17685,11082],{"class":683},[637,17687,1146],{"class":642},[637,17689,3708],{"class":683},[637,17691,1146],{"class":642},[637,17693,17694],{"class":683},"MeshName\n",[637,17696,17697],{"class":639,"line":739},[637,17698,742],{"emptyLinePlaceholder":594},[637,17700,17701],{"class":639,"line":745},[637,17702,17703],{"class":1231},"// Access a specific material\n",[637,17705,17706,17708,17710,17712,17715,17717,17719,17721],{"class":639,"line":755},[637,17707,2438],{"class":650},[637,17709,8425],{"class":683},[637,17711,657],{"class":642},[637,17713,17714],{"class":683}," materials",[637,17716,1146],{"class":642},[637,17718,3708],{"class":683},[637,17720,1146],{"class":642},[637,17722,17723],{"class":683},"MaterialName\n",[614,17725,17726],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[504,17728,17730],{"id":17729},"typing-nodes-and-materials","Typing Nodes and Materials",[614,17732,17733,17734,3086,17736,17738,17739,17742,17743,17746],{},"The keys of ",[618,17735,11051],{},[618,17737,528],{}," come from the file, so by default both are a loose record and\n",[618,17740,17741],{},"nodes.value.Body"," is an ",[618,17744,17745],{},"any",". Pass the shape of your model as generics to get them typed:",[626,17748,17750],{"className":1208,"code":17749,"language":664,"meta":576,"style":576},"import type { Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('/models/robot.glb')\n\nnodes.value.Body.geometry // Mesh, not any\n",[618,17751,17752,17776,17794,17798,17817,17835,17839,17879,17883],{"__ignoreMap":576},[637,17753,17754,17756,17758,17760,17762,17764,17766,17768,17770,17772,17774],{"class":639,"line":577},[637,17755,677],{"class":676},[637,17757,3465],{"class":676},[637,17759,680],{"class":642},[637,17761,4640],{"class":683},[637,17763,687],{"class":642},[637,17765,8375],{"class":683},[637,17767,693],{"class":642},[637,17769,696],{"class":676},[637,17771,699],{"class":642},[637,17773,4649],{"class":663},[637,17775,705],{"class":642},[637,17777,17778,17780,17782,17784,17786,17788,17790,17792],{"class":639,"line":578},[637,17779,677],{"class":676},[637,17781,680],{"class":642},[637,17783,4370],{"class":683},[637,17785,693],{"class":642},[637,17787,696],{"class":676},[637,17789,699],{"class":642},[637,17791,702],{"class":663},[637,17793,705],{"class":642},[637,17795,17796],{"class":639,"line":708},[637,17797,742],{"emptyLinePlaceholder":594},[637,17799,17800,17802,17805,17807,17810,17812,17814],{"class":639,"line":729},[637,17801,5346],{"class":650},[637,17803,17804],{"class":1222}," ModelNodes",[637,17806,680],{"class":642},[637,17808,17809],{"class":646}," Body",[637,17811,1240],{"class":642},[637,17813,4640],{"class":1222},[637,17815,17816],{"class":642}," }\n",[637,17818,17819,17821,17824,17826,17829,17831,17833],{"class":639,"line":739},[637,17820,5346],{"class":650},[637,17822,17823],{"class":1222}," ModelMaterials",[637,17825,680],{"class":642},[637,17827,17828],{"class":646}," Skin",[637,17830,1240],{"class":642},[637,17832,8375],{"class":1222},[637,17834,17816],{"class":642},[637,17836,17837],{"class":639,"line":745},[637,17838,742],{"emptyLinePlaceholder":594},[637,17840,17841,17843,17845,17847,17849,17851,17853,17855,17857,17859,17862,17864,17866,17868,17870,17872,17875,17877],{"class":639,"line":755},[637,17842,2438],{"class":650},[637,17844,680],{"class":642},[637,17846,11082],{"class":683},[637,17848,687],{"class":642},[637,17850,17035],{"class":683},[637,17852,2451],{"class":642},[637,17854,2454],{"class":642},[637,17856,4370],{"class":2457},[637,17858,643],{"class":642},[637,17860,17861],{"class":1222},"ModelNodes",[637,17863,687],{"class":642},[637,17865,17823],{"class":1222},[637,17867,3674],{"class":642},[637,17869,2460],{"class":683},[637,17871,2463],{"class":642},[637,17873,17874],{"class":663},"/models/robot.glb",[637,17876,2463],{"class":642},[637,17878,2471],{"class":683},[637,17880,17881],{"class":639,"line":778},[637,17882,742],{"emptyLinePlaceholder":594},[637,17884,17885,17887,17889,17891,17893,17895,17897,17900],{"class":639,"line":790},[637,17886,11051],{"class":683},[637,17888,1146],{"class":642},[637,17890,3708],{"class":683},[637,17892,1146],{"class":642},[637,17894,4752],{"class":683},[637,17896,1146],{"class":642},[637,17898,17899],{"class":683},"geometry ",[637,17901,17902],{"class":1231},"// Mesh, not any\n",[2028,17904,17905],{},[614,17906,17907,17908,17911],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[618,17909,17910],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[504,17913,17915],{"id":17914},"generating-a-component-instead","Generating a Component Instead",[614,17917,17918,17919,17924],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1140,17920,17923],{"href":17921,"rel":17922},"https://docs.tresjs.org/cli/gltf",[1144],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[626,17926,17930],{"className":17927,"code":17928,"language":17929,"meta":576,"style":576},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n# 3 slots: Head, Body, Base\n","bash",[618,17931,17932,17946,17951],{"__ignoreMap":576},[637,17933,17934,17937,17940,17943],{"class":639,"line":577},[637,17935,17936],{"class":1222},"npx",[637,17938,17939],{"class":663}," @tresjs/cli",[637,17941,17942],{"class":663}," gltf",[637,17944,17945],{"class":663}," public/models/robot.glb\n",[637,17947,17948],{"class":639,"line":578},[637,17949,17950],{"class":1231},"# ✔ src/models/Robot.gen.vue\n",[637,17952,17953],{"class":639,"line":708},[637,17954,17955],{"class":1231},"# 3 slots: Head, Body, Base\n",[9440,17957,17958],{"to":20},[614,17959,17960],{},"The three ways to load a model, and when to reach for each one.",[1349,17962,17963],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":17965},[17966,17967,17968,17969,17970,17971],{"id":624,"depth":578,"text":15},{"id":17417,"depth":578,"text":17418},{"id":17555,"depth":578,"text":14044},{"id":17627,"depth":578,"text":17628},{"id":17729,"depth":578,"text":17730},{"id":17914,"depth":578,"text":17915},"A composable to load GLTF models in TresJS scenes.",{},{"title":133,"description":17972},"mVv2TZo5-pqLqIwJ-gYXHQx7OoCZ9HEO3CnPATpAwMA",{"id":17977,"title":137,"body":17978,"description":18739,"extension":591,"links":592,"meta":18740,"navigation":594,"path":138,"seo":18741,"stem":139,"__hash__":18742},"docs/2.api/3.loaders/2.gltf-model.md",{"type":501,"value":17979,"toc":18733},[17980,17984,17994,17996,18325,18329,18335,18578,18580,18675,18690,18694,18711,18726,18730],[2318,17981,17982],{},[16938,17983],{},[614,17985,2799,17986,17988,17989,17993],{},[618,17987,137],{}," component is a wrapper around ",[1140,17990,17991],{"href":134},[618,17992,133],{}," composable and accepts the same options as props.",[504,17995,15],{"id":624},[16950,17997,17998,18111],{},[626,17999,18002],{"className":628,"code":18000,"filename":16955,"highlights":18001,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n",[578,778],[618,18003,18004,18024,18044,18048,18062,18070,18074,18082,18103],{"__ignoreMap":576},[637,18005,18006,18008,18010,18012,18014,18016,18018,18020,18022],{"class":639,"line":577},[637,18007,643],{"class":642},[637,18009,647],{"class":646},[637,18011,651],{"class":650},[637,18013,654],{"class":650},[637,18015,657],{"class":642},[637,18017,660],{"class":642},[637,18019,664],{"class":663},[637,18021,660],{"class":642},[637,18023,669],{"class":642},[637,18025,18027,18029,18031,18034,18036,18038,18040,18042],{"class":18026,"line":578},[639,673],[637,18028,677],{"class":676},[637,18030,680],{"class":642},[637,18032,18033],{"class":683}," GLTFModel",[637,18035,693],{"class":642},[637,18037,696],{"class":676},[637,18039,699],{"class":642},[637,18041,702],{"class":663},[637,18043,705],{"class":642},[637,18045,18046],{"class":639,"line":708},[637,18047,742],{"emptyLinePlaceholder":594},[637,18049,18050,18052,18054,18056,18058,18060],{"class":639,"line":729},[637,18051,2438],{"class":650},[637,18053,17008],{"class":683},[637,18055,657],{"class":642},[637,18057,699],{"class":642},[637,18059,17015],{"class":663},[637,18061,705],{"class":642},[637,18063,18064,18066,18068],{"class":639,"line":739},[637,18065,732],{"class":642},[637,18067,647],{"class":646},[637,18069,669],{"class":642},[637,18071,18072],{"class":639,"line":745},[637,18073,742],{"emptyLinePlaceholder":594},[637,18075,18076,18078,18080],{"class":639,"line":755},[637,18077,643],{"class":642},[637,18079,750],{"class":646},[637,18081,669],{"class":642},[637,18083,18085,18087,18089,18092,18094,18096,18099,18101],{"class":18084,"line":778},[639,673],[637,18086,758],{"class":642},[637,18088,137],{"class":646},[637,18090,18091],{"class":650}," :path",[637,18093,657],{"class":642},[637,18095,660],{"class":642},[637,18097,18098],{"class":663},"path",[637,18100,660],{"class":642},[637,18102,787],{"class":642},[637,18104,18105,18107,18109],{"class":639,"line":790},[637,18106,732],{"class":642},[637,18108,750],{"class":646},[637,18110,669],{"class":642},[626,18112,18113],{"className":628,"code":17104,"filename":17105,"language":633,"meta":576,"style":576},[618,18114,18115,18135,18153,18171,18185,18193,18197,18205,18223,18241,18249,18257,18263,18275,18287,18291,18309,18317],{"__ignoreMap":576},[637,18116,18117,18119,18121,18123,18125,18127,18129,18131,18133],{"class":639,"line":577},[637,18118,643],{"class":642},[637,18120,647],{"class":646},[637,18122,651],{"class":650},[637,18124,654],{"class":650},[637,18126,657],{"class":642},[637,18128,660],{"class":642},[637,18130,664],{"class":663},[637,18132,660],{"class":642},[637,18134,669],{"class":642},[637,18136,18137,18139,18141,18143,18145,18147,18149,18151],{"class":639,"line":578},[637,18138,677],{"class":676},[637,18140,680],{"class":642},[637,18142,690],{"class":683},[637,18144,693],{"class":642},[637,18146,696],{"class":676},[637,18148,699],{"class":642},[637,18150,702],{"class":663},[637,18152,705],{"class":642},[637,18154,18155,18157,18159,18161,18163,18165,18167,18169],{"class":639,"line":708},[637,18156,677],{"class":676},[637,18158,680],{"class":642},[637,18160,715],{"class":683},[637,18162,693],{"class":642},[637,18164,696],{"class":676},[637,18166,699],{"class":642},[637,18168,724],{"class":663},[637,18170,705],{"class":642},[637,18172,18173,18175,18177,18179,18181,18183],{"class":639,"line":729},[637,18174,677],{"class":676},[637,18176,17170],{"class":683},[637,18178,8454],{"class":676},[637,18180,699],{"class":642},[637,18182,17177],{"class":663},[637,18184,705],{"class":642},[637,18186,18187,18189,18191],{"class":639,"line":739},[637,18188,732],{"class":642},[637,18190,647],{"class":646},[637,18192,669],{"class":642},[637,18194,18195],{"class":639,"line":745},[637,18196,742],{"emptyLinePlaceholder":594},[637,18198,18199,18201,18203],{"class":639,"line":755},[637,18200,643],{"class":642},[637,18202,750],{"class":646},[637,18204,669],{"class":642},[637,18206,18207,18209,18211,18213,18215,18217,18219,18221],{"class":639,"line":778},[637,18208,758],{"class":642},[637,18210,761],{"class":646},[637,18212,764],{"class":650},[637,18214,657],{"class":642},[637,18216,660],{"class":642},[637,18218,17214],{"class":663},[637,18220,660],{"class":642},[637,18222,669],{"class":642},[637,18224,18225,18227,18229,18231,18233,18235,18237,18239],{"class":639,"line":790},[637,18226,781],{"class":642},[637,18228,784],{"class":646},[637,18230,1508],{"class":650},[637,18232,657],{"class":642},[637,18234,660],{"class":642},[637,18236,17233],{"class":663},[637,18238,660],{"class":642},[637,18240,787],{"class":642},[637,18242,18243,18245,18247],{"class":639,"line":800},[637,18244,781],{"class":642},[637,18246,795],{"class":646},[637,18248,787],{"class":642},[637,18250,18251,18253,18255],{"class":639,"line":805},[637,18252,781],{"class":642},[637,18254,17252],{"class":646},[637,18256,787],{"class":642},[637,18258,18259,18261],{"class":639,"line":827},[637,18260,781],{"class":642},[637,18262,17261],{"class":646},[637,18264,18265,18267,18269,18271,18273],{"class":639,"line":631},[637,18266,17266],{"class":650},[637,18268,657],{"class":642},[637,18270,660],{"class":642},[637,18272,820],{"class":663},[637,18274,3154],{"class":642},[637,18276,18277,18279,18281,18283,18285],{"class":639,"line":850},[637,18278,17279],{"class":650},[637,18280,657],{"class":642},[637,18282,660],{"class":642},[637,18284,13301],{"class":663},[637,18286,3154],{"class":642},[637,18288,18289],{"class":639,"line":861},[637,18290,17292],{"class":642},[637,18292,18293,18295,18297,18299,18301,18303,18305,18307],{"class":639,"line":872},[637,18294,781],{"class":642},[637,18296,9702],{"class":646},[637,18298,1890],{"class":650},[637,18300,657],{"class":642},[637,18302,660],{"class":642},[637,18304,1897],{"class":663},[637,18306,660],{"class":642},[637,18308,787],{"class":642},[637,18310,18311,18313,18315],{"class":639,"line":882},[637,18312,905],{"class":642},[637,18314,761],{"class":646},[637,18316,669],{"class":642},[637,18318,18319,18321,18323],{"class":639,"line":632},[637,18320,732],{"class":642},[637,18322,750],{"class":646},[637,18324,669],{"class":642},[504,18326,18328],{"id":18327},"model-reference","Model reference",[614,18330,18331,18332,18334],{},"The component exposes the loaded GLTF as ",[618,18333,9347],{},", so a template ref gets you the parsed model:",[626,18336,18338],{"className":628,"code":18337,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\nimport { ref, watch } from 'vue'\n\nconst modelRef = ref\u003CInstanceType\u003Ctypeof GLTFModel>>()\n\n// `instance` is null until the file lands, so watch it rather than the ref\nwatch(() => modelRef.value?.instance, (gltf) => {\n gltf?.scene.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CGLTFModel\n ref=\"modelRef\"\n path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n />\n\u003C/template>\n",[618,18339,18340,18360,18378,18400,18404,18429,18433,18438,18472,18505,18511,18519,18523,18531,18538,18552,18566,18570],{"__ignoreMap":576},[637,18341,18342,18344,18346,18348,18350,18352,18354,18356,18358],{"class":639,"line":577},[637,18343,643],{"class":642},[637,18345,647],{"class":646},[637,18347,651],{"class":650},[637,18349,654],{"class":650},[637,18351,657],{"class":642},[637,18353,660],{"class":642},[637,18355,664],{"class":663},[637,18357,660],{"class":642},[637,18359,669],{"class":642},[637,18361,18362,18364,18366,18368,18370,18372,18374,18376],{"class":639,"line":578},[637,18363,677],{"class":676},[637,18365,680],{"class":642},[637,18367,18033],{"class":683},[637,18369,693],{"class":642},[637,18371,696],{"class":676},[637,18373,699],{"class":642},[637,18375,702],{"class":663},[637,18377,705],{"class":642},[637,18379,18380,18382,18384,18386,18388,18390,18392,18394,18396,18398],{"class":639,"line":708},[637,18381,677],{"class":676},[637,18383,680],{"class":642},[637,18385,3895],{"class":683},[637,18387,687],{"class":642},[637,18389,12161],{"class":683},[637,18391,693],{"class":642},[637,18393,696],{"class":676},[637,18395,699],{"class":642},[637,18397,633],{"class":663},[637,18399,705],{"class":642},[637,18401,18402],{"class":639,"line":729},[637,18403,742],{"emptyLinePlaceholder":594},[637,18405,18406,18408,18411,18413,18415,18417,18420,18423,18425,18427],{"class":639,"line":739},[637,18407,2438],{"class":650},[637,18409,18410],{"class":683}," modelRef ",[637,18412,657],{"class":642},[637,18414,3895],{"class":2457},[637,18416,643],{"class":642},[637,18418,18419],{"class":1222},"InstanceType",[637,18421,18422],{"class":642},"\u003Ctypeof",[637,18424,18033],{"class":683},[637,18426,3605],{"class":642},[637,18428,6556],{"class":683},[637,18430,18431],{"class":639,"line":745},[637,18432,742],{"emptyLinePlaceholder":594},[637,18434,18435],{"class":639,"line":755},[637,18436,18437],{"class":1231},"// `instance` is null until the file lands, so watch it rather than the ref\n",[637,18439,18440,18442,18444,18446,18448,18451,18453,18455,18457,18459,18461,18463,18466,18468,18470],{"class":639,"line":778},[637,18441,12210],{"class":2457},[637,18443,2460],{"class":683},[637,18445,3697],{"class":642},[637,18447,3700],{"class":650},[637,18449,18450],{"class":683}," modelRef",[637,18452,1146],{"class":642},[637,18454,3708],{"class":683},[637,18456,3711],{"class":642},[637,18458,9347],{"class":683},[637,18460,687],{"class":642},[637,18462,3097],{"class":642},[637,18464,18465],{"class":6859},"gltf",[637,18467,3363],{"class":642},[637,18469,3700],{"class":650},[637,18471,1226],{"class":642},[637,18473,18474,18477,18479,18482,18484,18486,18488,18491,18493,18495,18497,18499,18501,18503],{"class":639,"line":790},[637,18475,18476],{"class":683}," gltf",[637,18478,3711],{"class":642},[637,18480,18481],{"class":683},"scene",[637,18483,1146],{"class":642},[637,18485,4153],{"class":683},[637,18487,1146],{"class":642},[637,18489,18490],{"class":2457},"set",[637,18492,2460],{"class":646},[637,18494,965],{"class":2524},[637,18496,687],{"class":642},[637,18498,2529],{"class":2524},[637,18500,687],{"class":642},[637,18502,2529],{"class":2524},[637,18504,2471],{"class":646},[637,18506,18507,18509],{"class":639,"line":800},[637,18508,2451],{"class":642},[637,18510,2471],{"class":683},[637,18512,18513,18515,18517],{"class":639,"line":805},[637,18514,732],{"class":642},[637,18516,647],{"class":646},[637,18518,669],{"class":642},[637,18520,18521],{"class":639,"line":827},[637,18522,742],{"emptyLinePlaceholder":594},[637,18524,18525,18527,18529],{"class":639,"line":631},[637,18526,643],{"class":642},[637,18528,750],{"class":646},[637,18530,669],{"class":642},[637,18532,18533,18535],{"class":639,"line":850},[637,18534,758],{"class":642},[637,18536,18537],{"class":646},"GLTFModel\n",[637,18539,18540,18543,18545,18547,18550],{"class":639,"line":861},[637,18541,18542],{"class":650}," ref",[637,18544,657],{"class":642},[637,18546,660],{"class":642},[637,18548,18549],{"class":663},"modelRef",[637,18551,3154],{"class":642},[637,18553,18554,18557,18559,18561,18564],{"class":639,"line":872},[637,18555,18556],{"class":650}," path",[637,18558,657],{"class":642},[637,18560,660],{"class":642},[637,18562,18563],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[637,18565,3154],{"class":642},[637,18567,18568],{"class":639,"line":882},[637,18569,14016],{"class":642},[637,18571,18572,18574,18576],{"class":639,"line":632},[637,18573,732],{"class":642},[637,18575,750],{"class":646},[637,18577,669],{"class":642},[504,18579,922],{"id":921},[927,18581,18582,18592],{},[930,18583,18584],{},[933,18585,18586,18588,18590],{},[936,18587,938],{"align":997},[936,18589,941],{"align":997},[936,18591,944],{},[946,18593,18594,18610,18627,18641,18659],{},[933,18595,18596,18600,18606],{},[951,18597,18598],{"align":997},[618,18599,18098],{},[951,18601,18602,18603,1146],{"align":997},"Path to the model file. ",[1692,18604,18605],{},"Required",[951,18607,18608],{},[618,18609,1167],{},[933,18611,18612,18616,18623],{},[951,18613,18614],{"align":997},[618,18615,17335],{},[951,18617,18618,18619,18622],{"align":997},"Enable ",[1140,18620,17341],{"href":17339,"rel":18621},[1144]," for the model.",[951,18624,18625],{},[618,18626,971],{},[933,18628,18629,18633,18636],{},[951,18630,18631],{"align":997},[618,18632,17596],{},[951,18634,18635],{"align":997},"Path to a Draco decoder.",[951,18637,18638],{},[618,18639,18640],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[933,18642,18643,18648,18655],{},[951,18644,18645],{"align":997},[618,18646,18647],{},"castShadow",[951,18649,18650,18651,18654],{"align":997},"Apply ",[618,18652,18653],{},"cast-shadow"," to all meshes inside your model.",[951,18656,18657],{},[618,18658,971],{},[933,18660,18661,18666,18671],{},[951,18662,18663],{"align":997},[618,18664,18665],{},"receiveShadow",[951,18667,18650,18668,18654],{"align":997},[618,18669,18670],{},"receive-shadow",[951,18672,18673],{},[618,18674,971],{},[2028,18676,18677],{},[614,18678,18679,18681,18682,18686,18687,18689],{},[618,18680,18098],{}," is not reactive: the component reads it once on setup. Use\n",[1140,18683,18684],{"href":134},[618,18685,133],{}," with a ",[618,18688,5915],{}," path if you need to swap models at runtime.",[504,18691,18693],{"id":18692},"when-to-reach-for-something-else","When to reach for something else",[614,18695,18696,18698,18699,18701,18702,18706,18707,18710],{},[618,18697,137],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[618,18700,8286],{}," on. When you need that, use\n",[1140,18703,18704],{"href":134},[618,18705,133],{}," to compose the parts yourself, or let the\n",[1140,18708,17923],{"href":17921,"rel":18709},[1144]," generate a typed component with a slot per node:",[626,18712,18714],{"className":17927,"code":18713,"language":17929,"meta":576,"style":576},"npx @tresjs/cli gltf public/models/robot.glb\n",[618,18715,18716],{"__ignoreMap":576},[637,18717,18718,18720,18722,18724],{"class":639,"line":577},[637,18719,17936],{"class":1222},[637,18721,17939],{"class":663},[637,18723,17942],{"class":663},[637,18725,17945],{"class":663},[9440,18727,18728],{"to":20},[614,18729,17960],{},[1349,18731,18732],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":18734},[18735,18736,18737,18738],{"id":624,"depth":578,"text":15},{"id":18327,"depth":578,"text":18328},{"id":921,"depth":578,"text":922},{"id":18692,"depth":578,"text":18693},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":137,"description":18739},"p4XhK3Pj_fVq7UM9x8iv0ZyIb6SI_to_pSQUrYE8GQs",{"id":18744,"title":141,"body":18745,"description":19357,"extension":591,"links":592,"meta":19358,"navigation":594,"path":142,"seo":19359,"stem":143,"__hash__":19360},"docs/2.api/3.loaders/3.use-fbx.md",{"type":501,"value":18746,"toc":19351},[18747,18752,18757,18759,19147,19149,19228,19230,19256,19258,19260,19346,19348],[2318,18748,18749],{},[18750,18751],"loaders-fbx",{},[614,18753,18754,18755,16946],{},"A composable that allows you to easily load FBX models into your ",[1692,18756,16945],{},[504,18758,15],{"id":624},[16950,18760,18761,18930],{},[626,18762,18765],{"className":628,"code":18763,"filename":16955,"highlights":18764,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useFBX } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/'\n + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'\nconst { state, nodes, materials } = useFBX(path)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"state\" :object=\"state\" :scale=\"0.025\" />\n\u003C/template>\n",[578,745],[618,18766,18767,18787,18807,18811,18826,18838,18863,18871,18875,18883,18922],{"__ignoreMap":576},[637,18768,18769,18771,18773,18775,18777,18779,18781,18783,18785],{"class":639,"line":577},[637,18770,643],{"class":642},[637,18772,647],{"class":646},[637,18774,651],{"class":650},[637,18776,654],{"class":650},[637,18778,657],{"class":642},[637,18780,660],{"class":642},[637,18782,664],{"class":663},[637,18784,660],{"class":642},[637,18786,669],{"class":642},[637,18788,18790,18792,18794,18797,18799,18801,18803,18805],{"class":18789,"line":578},[639,673],[637,18791,677],{"class":676},[637,18793,680],{"class":642},[637,18795,18796],{"class":683}," useFBX",[637,18798,693],{"class":642},[637,18800,696],{"class":676},[637,18802,699],{"class":642},[637,18804,702],{"class":663},[637,18806,705],{"class":642},[637,18808,18809],{"class":639,"line":708},[637,18810,742],{"emptyLinePlaceholder":594},[637,18812,18813,18815,18817,18819,18821,18824],{"class":639,"line":729},[637,18814,2438],{"class":650},[637,18816,17008],{"class":683},[637,18818,657],{"class":642},[637,18820,699],{"class":642},[637,18822,18823],{"class":663},"https://raw.githubusercontent.com/",[637,18825,705],{"class":642},[637,18827,18828,18831,18833,18836],{"class":639,"line":739},[637,18829,18830],{"class":642}," +",[637,18832,699],{"class":642},[637,18834,18835],{"class":663},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[637,18837,705],{"class":642},[637,18839,18841,18843,18845,18847,18849,18851,18853,18855,18857,18859,18861],{"class":18840,"line":745},[639,673],[637,18842,2438],{"class":650},[637,18844,680],{"class":642},[637,18846,2443],{"class":683},[637,18848,687],{"class":642},[637,18850,11082],{"class":683},[637,18852,687],{"class":642},[637,18854,17035],{"class":683},[637,18856,2451],{"class":642},[637,18858,2454],{"class":642},[637,18860,18796],{"class":2457},[637,18862,17044],{"class":683},[637,18864,18865,18867,18869],{"class":639,"line":755},[637,18866,732],{"class":642},[637,18868,647],{"class":646},[637,18870,669],{"class":642},[637,18872,18873],{"class":639,"line":778},[637,18874,742],{"emptyLinePlaceholder":594},[637,18876,18877,18879,18881],{"class":639,"line":790},[637,18878,643],{"class":642},[637,18880,750],{"class":646},[637,18882,669],{"class":642},[637,18884,18885,18887,18889,18891,18893,18895,18897,18899,18901,18903,18905,18907,18909,18911,18913,18915,18918,18920],{"class":639,"line":800},[637,18886,758],{"class":642},[637,18888,4457],{"class":646},[637,18890,2733],{"class":650},[637,18892,657],{"class":642},[637,18894,660],{"class":642},[637,18896,14805],{"class":663},[637,18898,660],{"class":642},[637,18900,4471],{"class":650},[637,18902,657],{"class":642},[637,18904,660],{"class":642},[637,18906,14805],{"class":663},[637,18908,660],{"class":642},[637,18910,813],{"class":650},[637,18912,657],{"class":642},[637,18914,660],{"class":642},[637,18916,18917],{"class":663},"0.025",[637,18919,660],{"class":642},[637,18921,787],{"class":642},[637,18923,18924,18926,18928],{"class":639,"line":805},[637,18925,732],{"class":642},[637,18927,750],{"class":646},[637,18929,669],{"class":642},[626,18931,18933],{"className":628,"code":18932,"filename":17105,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#1F90FF\">\n \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n \u003COrbitControls />\n \u003CTheModel />\n \u003CTresDirectionalLight\n :intensity=\"2\"\n :position=\"[3, 3, 3]\"\n />\n \u003CTresAmbientLight :intensity=\"1\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,18934,18935,18955,18973,18991,19005,19013,19017,19025,19044,19063,19071,19079,19085,19097,19109,19113,19131,19139],{"__ignoreMap":576},[637,18936,18937,18939,18941,18943,18945,18947,18949,18951,18953],{"class":639,"line":577},[637,18938,643],{"class":642},[637,18940,647],{"class":646},[637,18942,651],{"class":650},[637,18944,654],{"class":650},[637,18946,657],{"class":642},[637,18948,660],{"class":642},[637,18950,664],{"class":663},[637,18952,660],{"class":642},[637,18954,669],{"class":642},[637,18956,18957,18959,18961,18963,18965,18967,18969,18971],{"class":639,"line":578},[637,18958,677],{"class":676},[637,18960,680],{"class":642},[637,18962,690],{"class":683},[637,18964,693],{"class":642},[637,18966,696],{"class":676},[637,18968,699],{"class":642},[637,18970,702],{"class":663},[637,18972,705],{"class":642},[637,18974,18975,18977,18979,18981,18983,18985,18987,18989],{"class":639,"line":708},[637,18976,677],{"class":676},[637,18978,680],{"class":642},[637,18980,715],{"class":683},[637,18982,693],{"class":642},[637,18984,696],{"class":676},[637,18986,699],{"class":642},[637,18988,724],{"class":663},[637,18990,705],{"class":642},[637,18992,18993,18995,18997,18999,19001,19003],{"class":639,"line":729},[637,18994,677],{"class":676},[637,18996,17170],{"class":683},[637,18998,8454],{"class":676},[637,19000,699],{"class":642},[637,19002,17177],{"class":663},[637,19004,705],{"class":642},[637,19006,19007,19009,19011],{"class":639,"line":739},[637,19008,732],{"class":642},[637,19010,647],{"class":646},[637,19012,669],{"class":642},[637,19014,19015],{"class":639,"line":745},[637,19016,742],{"emptyLinePlaceholder":594},[637,19018,19019,19021,19023],{"class":639,"line":755},[637,19020,643],{"class":642},[637,19022,750],{"class":646},[637,19024,669],{"class":642},[637,19026,19027,19029,19031,19033,19035,19037,19040,19042],{"class":639,"line":778},[637,19028,758],{"class":642},[637,19030,761],{"class":646},[637,19032,764],{"class":650},[637,19034,657],{"class":642},[637,19036,660],{"class":642},[637,19038,19039],{"class":663},"#1F90FF",[637,19041,660],{"class":642},[637,19043,669],{"class":642},[637,19045,19046,19048,19050,19052,19054,19056,19059,19061],{"class":639,"line":790},[637,19047,781],{"class":642},[637,19049,784],{"class":646},[637,19051,1508],{"class":650},[637,19053,657],{"class":642},[637,19055,660],{"class":642},[637,19057,19058],{"class":663},"[11, 11, 11]",[637,19060,660],{"class":642},[637,19062,787],{"class":642},[637,19064,19065,19067,19069],{"class":639,"line":800},[637,19066,781],{"class":642},[637,19068,795],{"class":646},[637,19070,787],{"class":642},[637,19072,19073,19075,19077],{"class":639,"line":805},[637,19074,781],{"class":642},[637,19076,17252],{"class":646},[637,19078,787],{"class":642},[637,19080,19081,19083],{"class":639,"line":827},[637,19082,781],{"class":642},[637,19084,17261],{"class":646},[637,19086,19087,19089,19091,19093,19095],{"class":639,"line":631},[637,19088,17266],{"class":650},[637,19090,657],{"class":642},[637,19092,660],{"class":642},[637,19094,820],{"class":663},[637,19096,3154],{"class":642},[637,19098,19099,19101,19103,19105,19107],{"class":639,"line":850},[637,19100,17279],{"class":650},[637,19102,657],{"class":642},[637,19104,660],{"class":642},[637,19106,13301],{"class":663},[637,19108,3154],{"class":642},[637,19110,19111],{"class":639,"line":861},[637,19112,17292],{"class":642},[637,19114,19115,19117,19119,19121,19123,19125,19127,19129],{"class":639,"line":872},[637,19116,781],{"class":642},[637,19118,9702],{"class":646},[637,19120,1890],{"class":650},[637,19122,657],{"class":642},[637,19124,660],{"class":642},[637,19126,1897],{"class":663},[637,19128,660],{"class":642},[637,19130,787],{"class":642},[637,19132,19133,19135,19137],{"class":639,"line":882},[637,19134,905],{"class":642},[637,19136,761],{"class":646},[637,19138,669],{"class":642},[637,19140,19141,19143,19145],{"class":639,"line":632},[637,19142,732],{"class":642},[637,19144,750],{"class":646},[637,19146,669],{"class":642},[504,19148,17418],{"id":17417},[927,19150,19151,19161],{},[930,19152,19153],{},[933,19154,19155,19157,19159],{},[936,19156,8110],{"align":997},[936,19158,5990],{},[936,19160,941],{},[946,19162,19163,19176,19189,19202,19214],{},[933,19164,19165,19169,19173],{},[951,19166,19167],{"align":997},[1692,19168,14805],{},[951,19170,19171],{},[618,19172,4549],{},[951,19174,19175],{},"The loaded FBX model state",[933,19177,19178,19182,19186],{},[951,19179,19180],{"align":997},[1692,19181,11051],{},[951,19183,19184],{},[618,19185,16514],{},[951,19187,19188],{},"Computed object containing all nodes in the scene",[933,19190,19191,19195,19199],{},[951,19192,19193],{"align":997},[1692,19194,528],{},[951,19196,19197],{},[618,19198,16514],{},[951,19200,19201],{},"Computed object containing all materials in the scene",[933,19203,19204,19208,19212],{},[951,19205,19206],{"align":997},[1692,19207,17484],{},[951,19209,19210],{},[618,19211,17582],{},[951,19213,17492],{},[933,19215,19216,19220,19225],{},[951,19217,19218],{"align":997},[1692,19219,17544],{},[951,19221,19222],{},[618,19223,19224],{},"() => Promise\u003Cvoid>",[951,19226,19227],{},"Function to reload the model",[504,19229,14044],{"id":17555},[927,19231,19232,19242],{},[930,19233,19234],{},[933,19235,19236,19238,19240],{},[936,19237,8110],{"align":997},[936,19239,5990],{},[936,19241,941],{},[946,19243,19244],{},[933,19245,19246,19250,19254],{},[951,19247,19248],{"align":997},[1692,19249,17615],{},[951,19251,19252],{},[618,19253,12068],{},[951,19255,17624],{},[504,19257,17628],{"id":17627},[614,19259,17631],{},[626,19261,19263],{"className":1208,"code":19262,"language":664,"meta":576,"style":576},"const { nodes, materials } = useFBX('/model.fbx')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[618,19264,19265,19294,19298,19302,19320,19324,19328],{"__ignoreMap":576},[637,19266,19267,19269,19271,19273,19275,19277,19279,19281,19283,19285,19287,19290,19292],{"class":639,"line":577},[637,19268,2438],{"class":650},[637,19270,680],{"class":642},[637,19272,11082],{"class":683},[637,19274,687],{"class":642},[637,19276,17035],{"class":683},[637,19278,2451],{"class":642},[637,19280,2454],{"class":642},[637,19282,18796],{"class":2457},[637,19284,2460],{"class":683},[637,19286,2463],{"class":642},[637,19288,19289],{"class":663},"/model.fbx",[637,19291,2463],{"class":642},[637,19293,2471],{"class":683},[637,19295,19296],{"class":639,"line":578},[637,19297,742],{"emptyLinePlaceholder":594},[637,19299,19300],{"class":639,"line":708},[637,19301,17674],{"class":1231},[637,19303,19304,19306,19308,19310,19312,19314,19316,19318],{"class":639,"line":729},[637,19305,2438],{"class":650},[637,19307,17681],{"class":683},[637,19309,657],{"class":642},[637,19311,11082],{"class":683},[637,19313,1146],{"class":642},[637,19315,3708],{"class":683},[637,19317,1146],{"class":642},[637,19319,17694],{"class":683},[637,19321,19322],{"class":639,"line":739},[637,19323,742],{"emptyLinePlaceholder":594},[637,19325,19326],{"class":639,"line":745},[637,19327,17703],{"class":1231},[637,19329,19330,19332,19334,19336,19338,19340,19342,19344],{"class":639,"line":755},[637,19331,2438],{"class":650},[637,19333,8425],{"class":683},[637,19335,657],{"class":642},[637,19337,17714],{"class":683},[637,19339,1146],{"class":642},[637,19341,3708],{"class":683},[637,19343,1146],{"class":642},[637,19345,17723],{"class":683},[614,19347,17726],{},[1349,19349,19350],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":19352},[19353,19354,19355,19356],{"id":624,"depth":578,"text":15},{"id":17417,"depth":578,"text":17418},{"id":17555,"depth":578,"text":14044},{"id":17627,"depth":578,"text":17628},"A composable to load FBX models in TresJS scenes.",{},{"title":141,"description":19357},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":19362,"title":145,"body":19363,"description":19995,"extension":591,"links":592,"meta":19996,"navigation":594,"path":146,"seo":19997,"stem":147,"__hash__":19998},"docs/2.api/3.loaders/4.fbx-model.md",{"type":501,"value":19364,"toc":19990},[19365,19369,19377,19379,19707,19709,19717,19930,19932,19987],[2318,19366,19367],{},[18750,19368],{},[614,19370,2799,19371,17988,19373,17993],{},[618,19372,145],{},[1140,19374,19375],{"href":142},[618,19376,141],{},[504,19378,15],{"id":624},[16950,19380,19381,19493],{},[626,19382,19385],{"className":628,"code":19383,"filename":16955,"highlights":19384,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { FBXModel } from '@tresjs/cientos'\n\nconst path = './Jeep_done.fbx'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CFBXModel :path=\"path\" />\n\u003C/template>\n",[578,778],[618,19386,19387,19407,19427,19431,19446,19454,19458,19466,19485],{"__ignoreMap":576},[637,19388,19389,19391,19393,19395,19397,19399,19401,19403,19405],{"class":639,"line":577},[637,19390,643],{"class":642},[637,19392,647],{"class":646},[637,19394,651],{"class":650},[637,19396,654],{"class":650},[637,19398,657],{"class":642},[637,19400,660],{"class":642},[637,19402,664],{"class":663},[637,19404,660],{"class":642},[637,19406,669],{"class":642},[637,19408,19410,19412,19414,19417,19419,19421,19423,19425],{"class":19409,"line":578},[639,673],[637,19411,677],{"class":676},[637,19413,680],{"class":642},[637,19415,19416],{"class":683}," FBXModel",[637,19418,693],{"class":642},[637,19420,696],{"class":676},[637,19422,699],{"class":642},[637,19424,702],{"class":663},[637,19426,705],{"class":642},[637,19428,19429],{"class":639,"line":708},[637,19430,742],{"emptyLinePlaceholder":594},[637,19432,19433,19435,19437,19439,19441,19444],{"class":639,"line":729},[637,19434,2438],{"class":650},[637,19436,17008],{"class":683},[637,19438,657],{"class":642},[637,19440,699],{"class":642},[637,19442,19443],{"class":663},"./Jeep_done.fbx",[637,19445,705],{"class":642},[637,19447,19448,19450,19452],{"class":639,"line":739},[637,19449,732],{"class":642},[637,19451,647],{"class":646},[637,19453,669],{"class":642},[637,19455,19456],{"class":639,"line":745},[637,19457,742],{"emptyLinePlaceholder":594},[637,19459,19460,19462,19464],{"class":639,"line":755},[637,19461,643],{"class":642},[637,19463,750],{"class":646},[637,19465,669],{"class":642},[637,19467,19469,19471,19473,19475,19477,19479,19481,19483],{"class":19468,"line":778},[639,673],[637,19470,758],{"class":642},[637,19472,145],{"class":646},[637,19474,18091],{"class":650},[637,19476,657],{"class":642},[637,19478,660],{"class":642},[637,19480,18098],{"class":663},[637,19482,660],{"class":642},[637,19484,787],{"class":642},[637,19486,19487,19489,19491],{"class":639,"line":790},[637,19488,732],{"class":642},[637,19490,750],{"class":646},[637,19492,669],{"class":642},[626,19494,19495],{"className":628,"code":17104,"filename":17105,"language":633,"meta":576,"style":576},[618,19496,19497,19517,19535,19553,19567,19575,19579,19587,19605,19623,19631,19639,19645,19657,19669,19673,19691,19699],{"__ignoreMap":576},[637,19498,19499,19501,19503,19505,19507,19509,19511,19513,19515],{"class":639,"line":577},[637,19500,643],{"class":642},[637,19502,647],{"class":646},[637,19504,651],{"class":650},[637,19506,654],{"class":650},[637,19508,657],{"class":642},[637,19510,660],{"class":642},[637,19512,664],{"class":663},[637,19514,660],{"class":642},[637,19516,669],{"class":642},[637,19518,19519,19521,19523,19525,19527,19529,19531,19533],{"class":639,"line":578},[637,19520,677],{"class":676},[637,19522,680],{"class":642},[637,19524,690],{"class":683},[637,19526,693],{"class":642},[637,19528,696],{"class":676},[637,19530,699],{"class":642},[637,19532,702],{"class":663},[637,19534,705],{"class":642},[637,19536,19537,19539,19541,19543,19545,19547,19549,19551],{"class":639,"line":708},[637,19538,677],{"class":676},[637,19540,680],{"class":642},[637,19542,715],{"class":683},[637,19544,693],{"class":642},[637,19546,696],{"class":676},[637,19548,699],{"class":642},[637,19550,724],{"class":663},[637,19552,705],{"class":642},[637,19554,19555,19557,19559,19561,19563,19565],{"class":639,"line":729},[637,19556,677],{"class":676},[637,19558,17170],{"class":683},[637,19560,8454],{"class":676},[637,19562,699],{"class":642},[637,19564,17177],{"class":663},[637,19566,705],{"class":642},[637,19568,19569,19571,19573],{"class":639,"line":739},[637,19570,732],{"class":642},[637,19572,647],{"class":646},[637,19574,669],{"class":642},[637,19576,19577],{"class":639,"line":745},[637,19578,742],{"emptyLinePlaceholder":594},[637,19580,19581,19583,19585],{"class":639,"line":755},[637,19582,643],{"class":642},[637,19584,750],{"class":646},[637,19586,669],{"class":642},[637,19588,19589,19591,19593,19595,19597,19599,19601,19603],{"class":639,"line":778},[637,19590,758],{"class":642},[637,19592,761],{"class":646},[637,19594,764],{"class":650},[637,19596,657],{"class":642},[637,19598,660],{"class":642},[637,19600,17214],{"class":663},[637,19602,660],{"class":642},[637,19604,669],{"class":642},[637,19606,19607,19609,19611,19613,19615,19617,19619,19621],{"class":639,"line":790},[637,19608,781],{"class":642},[637,19610,784],{"class":646},[637,19612,1508],{"class":650},[637,19614,657],{"class":642},[637,19616,660],{"class":642},[637,19618,17233],{"class":663},[637,19620,660],{"class":642},[637,19622,787],{"class":642},[637,19624,19625,19627,19629],{"class":639,"line":800},[637,19626,781],{"class":642},[637,19628,795],{"class":646},[637,19630,787],{"class":642},[637,19632,19633,19635,19637],{"class":639,"line":805},[637,19634,781],{"class":642},[637,19636,17252],{"class":646},[637,19638,787],{"class":642},[637,19640,19641,19643],{"class":639,"line":827},[637,19642,781],{"class":642},[637,19644,17261],{"class":646},[637,19646,19647,19649,19651,19653,19655],{"class":639,"line":631},[637,19648,17266],{"class":650},[637,19650,657],{"class":642},[637,19652,660],{"class":642},[637,19654,820],{"class":663},[637,19656,3154],{"class":642},[637,19658,19659,19661,19663,19665,19667],{"class":639,"line":850},[637,19660,17279],{"class":650},[637,19662,657],{"class":642},[637,19664,660],{"class":642},[637,19666,13301],{"class":663},[637,19668,3154],{"class":642},[637,19670,19671],{"class":639,"line":861},[637,19672,17292],{"class":642},[637,19674,19675,19677,19679,19681,19683,19685,19687,19689],{"class":639,"line":872},[637,19676,781],{"class":642},[637,19678,9702],{"class":646},[637,19680,1890],{"class":650},[637,19682,657],{"class":642},[637,19684,660],{"class":642},[637,19686,1897],{"class":663},[637,19688,660],{"class":642},[637,19690,787],{"class":642},[637,19692,19693,19695,19697],{"class":639,"line":882},[637,19694,905],{"class":642},[637,19696,761],{"class":646},[637,19698,669],{"class":642},[637,19700,19701,19703,19705],{"class":639,"line":632},[637,19702,732],{"class":642},[637,19704,750],{"class":646},[637,19706,669],{"class":642},[504,19708,18328],{"id":18327},[614,19710,19711,19712,1700,19714,19716],{},"You can access the model reference by passing a ",[618,19713,5915],{},[618,19715,145],{}," component and then using it to get the object.",[626,19718,19720],{"className":628,"code":19719,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from '@tresjs/core'\nimport { FBXModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n // Do something with the model\n model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CFBXModel\n ref=\"modelRef\"\n path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx\"\n />\n\u003C/template>\n",[618,19721,19722,19742,19763,19781,19785,19804,19808,19828,19833,19860,19866,19874,19878,19886,19893,19905,19918,19922],{"__ignoreMap":576},[637,19723,19724,19726,19728,19730,19732,19734,19736,19738,19740],{"class":639,"line":577},[637,19725,643],{"class":642},[637,19727,647],{"class":646},[637,19729,651],{"class":650},[637,19731,654],{"class":650},[637,19733,657],{"class":642},[637,19735,660],{"class":642},[637,19737,664],{"class":663},[637,19739,660],{"class":642},[637,19741,669],{"class":642},[637,19743,19744,19746,19748,19750,19753,19755,19757,19759,19761],{"class":639,"line":578},[637,19745,677],{"class":676},[637,19747,3465],{"class":676},[637,19749,680],{"class":642},[637,19751,19752],{"class":683}," TresObject",[637,19754,693],{"class":642},[637,19756,696],{"class":676},[637,19758,699],{"class":642},[637,19760,724],{"class":663},[637,19762,705],{"class":642},[637,19764,19765,19767,19769,19771,19773,19775,19777,19779],{"class":639,"line":708},[637,19766,677],{"class":676},[637,19768,680],{"class":642},[637,19770,19416],{"class":683},[637,19772,693],{"class":642},[637,19774,696],{"class":676},[637,19776,699],{"class":642},[637,19778,702],{"class":663},[637,19780,705],{"class":642},[637,19782,19783],{"class":639,"line":729},[637,19784,742],{"emptyLinePlaceholder":594},[637,19786,19787,19789,19791,19793,19795,19797,19800,19802],{"class":639,"line":739},[637,19788,2438],{"class":650},[637,19790,18410],{"class":683},[637,19792,657],{"class":642},[637,19794,3521],{"class":2457},[637,19796,643],{"class":642},[637,19798,19799],{"class":1222},"TresObject",[637,19801,3674],{"class":642},[637,19803,6556],{"class":683},[637,19805,19806],{"class":639,"line":745},[637,19807,742],{"emptyLinePlaceholder":594},[637,19809,19810,19812,19815,19817,19819,19822,19824,19826],{"class":639,"line":755},[637,19811,12210],{"class":2457},[637,19813,19814],{"class":683},"(modelRef",[637,19816,687],{"class":642},[637,19818,3097],{"class":642},[637,19820,19821],{"class":6859},"model",[637,19823,3363],{"class":642},[637,19825,3700],{"class":650},[637,19827,1226],{"class":642},[637,19829,19830],{"class":639,"line":778},[637,19831,19832],{"class":1231}," // Do something with the model\n",[637,19834,19835,19838,19840,19842,19844,19846,19848,19850,19852,19854,19856,19858],{"class":639,"line":790},[637,19836,19837],{"class":683}," model",[637,19839,1146],{"class":642},[637,19841,4153],{"class":683},[637,19843,1146],{"class":642},[637,19845,18490],{"class":2457},[637,19847,2460],{"class":646},[637,19849,965],{"class":2524},[637,19851,687],{"class":642},[637,19853,2529],{"class":2524},[637,19855,687],{"class":642},[637,19857,2529],{"class":2524},[637,19859,2471],{"class":646},[637,19861,19862,19864],{"class":639,"line":800},[637,19863,2451],{"class":642},[637,19865,2471],{"class":683},[637,19867,19868,19870,19872],{"class":639,"line":805},[637,19869,732],{"class":642},[637,19871,647],{"class":646},[637,19873,669],{"class":642},[637,19875,19876],{"class":639,"line":827},[637,19877,742],{"emptyLinePlaceholder":594},[637,19879,19880,19882,19884],{"class":639,"line":631},[637,19881,643],{"class":642},[637,19883,750],{"class":646},[637,19885,669],{"class":642},[637,19887,19888,19890],{"class":639,"line":850},[637,19889,758],{"class":642},[637,19891,19892],{"class":646},"FBXModel\n",[637,19894,19895,19897,19899,19901,19903],{"class":639,"line":861},[637,19896,18542],{"class":650},[637,19898,657],{"class":642},[637,19900,660],{"class":642},[637,19902,18549],{"class":663},[637,19904,3154],{"class":642},[637,19906,19907,19909,19911,19913,19916],{"class":639,"line":872},[637,19908,18556],{"class":650},[637,19910,657],{"class":642},[637,19912,660],{"class":642},[637,19914,19915],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[637,19917,3154],{"class":642},[637,19919,19920],{"class":639,"line":882},[637,19921,14016],{"class":642},[637,19923,19924,19926,19928],{"class":639,"line":632},[637,19925,732],{"class":642},[637,19927,750],{"class":646},[637,19929,669],{"class":642},[504,19931,922],{"id":921},[927,19933,19934,19944],{},[930,19935,19936],{},[933,19937,19938,19940,19942],{},[936,19939,938],{"align":997},[936,19941,941],{"align":997},[936,19943,944],{},[946,19945,19946,19959,19973],{},[933,19947,19948,19952,19955],{},[951,19949,19950],{"align":997},[618,19951,18098],{},[951,19953,19954],{"align":997},"Path to the model file.",[951,19956,19957],{},[618,19958,1167],{},[933,19960,19961,19965,19969],{},[951,19962,19963],{"align":997},[618,19964,18647],{},[951,19966,18650,19967,18654],{"align":997},[618,19968,18653],{},[951,19970,19971],{},[618,19972,971],{},[933,19974,19975,19979,19983],{},[951,19976,19977],{"align":997},[618,19978,18665],{},[951,19980,18650,19981,18654],{"align":997},[618,19982,18670],{},[951,19984,19985],{},[618,19986,971],{},[1349,19988,19989],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":19991},[19992,19993,19994],{"id":624,"depth":578,"text":15},{"id":18327,"depth":578,"text":18328},{"id":921,"depth":578,"text":922},"A component based on useFBX to load models in TresJS scenes.",{},{"title":145,"description":19995},"j1JukrpGAkW0gX6FKFZWThJUv3fBnEg_xZmIH8lkEcc",{"id":20000,"title":149,"body":20001,"description":20630,"extension":591,"links":592,"meta":20631,"navigation":594,"path":150,"seo":20632,"stem":151,"__hash__":20633},"docs/2.api/3.loaders/5.use-texture.md",{"type":501,"value":20002,"toc":20624},[20003,20008,20019,20021,20173,20175,20227,20229,20284,20288,20295,20621],[2318,20004,20005],{},[20006,20007],"loaders-use-texture",{},[614,20009,20010,20011,20016,20017,16946],{},"A composable that allows you to load textures using the ",[1140,20012,20015],{"href":20013,"rel":20014},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1144],"Three.js texture loader"," into your ",[1692,20018,16945],{},[504,20020,15],{"id":624},[626,20022,20025],{"className":628,"code":20023,"highlights":20024,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useTexture } from '@tresjs/cientos'\n\nconst { state: texture, isLoading, error } = useTexture(path)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n \u003C/TresMesh>\n\u003C/template>\n",[578,729,800],[618,20026,20027,20047,20066,20070,20102,20110,20114,20122,20130,20138,20157,20165],{"__ignoreMap":576},[637,20028,20029,20031,20033,20035,20037,20039,20041,20043,20045],{"class":639,"line":577},[637,20030,643],{"class":642},[637,20032,647],{"class":646},[637,20034,651],{"class":650},[637,20036,654],{"class":650},[637,20038,657],{"class":642},[637,20040,660],{"class":642},[637,20042,664],{"class":663},[637,20044,660],{"class":642},[637,20046,669],{"class":642},[637,20048,20050,20052,20054,20056,20058,20060,20062,20064],{"class":20049,"line":578},[639,673],[637,20051,677],{"class":676},[637,20053,680],{"class":642},[637,20055,2382],{"class":683},[637,20057,693],{"class":642},[637,20059,696],{"class":676},[637,20061,699],{"class":642},[637,20063,702],{"class":663},[637,20065,705],{"class":642},[637,20067,20068],{"class":639,"line":708},[637,20069,742],{"emptyLinePlaceholder":594},[637,20071,20073,20075,20077,20079,20081,20084,20086,20089,20091,20094,20096,20098,20100],{"class":20072,"line":729},[639,673],[637,20074,2438],{"class":650},[637,20076,680],{"class":642},[637,20078,2443],{"class":646},[637,20080,1240],{"class":642},[637,20082,20083],{"class":683}," texture",[637,20085,687],{"class":642},[637,20087,20088],{"class":683}," isLoading",[637,20090,687],{"class":642},[637,20092,20093],{"class":683}," error ",[637,20095,2451],{"class":642},[637,20097,2454],{"class":642},[637,20099,2382],{"class":2457},[637,20101,17044],{"class":683},[637,20103,20104,20106,20108],{"class":639,"line":739},[637,20105,732],{"class":642},[637,20107,647],{"class":646},[637,20109,669],{"class":642},[637,20111,20112],{"class":639,"line":745},[637,20113,742],{"emptyLinePlaceholder":594},[637,20115,20116,20118,20120],{"class":639,"line":755},[637,20117,643],{"class":642},[637,20119,750],{"class":646},[637,20121,669],{"class":642},[637,20123,20124,20126,20128],{"class":639,"line":778},[637,20125,758],{"class":642},[637,20127,856],{"class":646},[637,20129,669],{"class":642},[637,20131,20132,20134,20136],{"class":639,"line":790},[637,20133,781],{"class":642},[637,20135,3981],{"class":646},[637,20137,787],{"class":642},[637,20139,20141,20143,20145,20147,20149,20151,20153,20155],{"class":20140,"line":800},[639,673],[637,20142,781],{"class":642},[637,20144,2709],{"class":646},[637,20146,2757],{"class":650},[637,20148,657],{"class":642},[637,20150,660],{"class":642},[637,20152,2740],{"class":663},[637,20154,660],{"class":642},[637,20156,787],{"class":642},[637,20158,20159,20161,20163],{"class":639,"line":805},[637,20160,905],{"class":642},[637,20162,856],{"class":646},[637,20164,669],{"class":642},[637,20166,20167,20169,20171],{"class":639,"line":827},[637,20168,732],{"class":642},[637,20170,750],{"class":646},[637,20172,669],{"class":642},[504,20174,14044],{"id":17555},[927,20176,20177,20189],{},[930,20178,20179],{},[933,20180,20181,20183,20185,20187],{},[936,20182,8110],{"align":997},[936,20184,5990],{},[936,20186,944],{},[936,20188,941],{},[946,20190,20191,20208],{},[933,20192,20193,20197,20201,20205],{},[951,20194,20195],{"align":997},[1692,20196,18098],{},[951,20198,20199],{},[618,20200,3595],{},[951,20202,20203],{},[618,20204,1167],{},[951,20206,20207],{},"The path to the texture.",[933,20209,20210,20215,20220,20224],{},[951,20211,20212],{"align":997},[1692,20213,20214],{},"manager",[951,20216,20217],{},[618,20218,20219],{},"THREE.LoadingManager",[951,20221,20222],{},[618,20223,1167],{},[951,20225,20226],{},"The loading manager to use for the texture.",[504,20228,17418],{"id":17417},[927,20230,20231,20241],{},[930,20232,20233],{},[933,20234,20235,20237,20239],{},[936,20236,8110],{"align":997},[936,20238,5990],{"align":997},[936,20240,941],{"align":997},[946,20242,20243,20257,20270],{},[933,20244,20245,20249,20254],{},[951,20246,20247],{"align":997},[618,20248,14805],{},[951,20250,20251],{"align":997},[618,20252,20253],{},"Texture | null",[951,20255,20256],{"align":997},"The loaded texture",[933,20258,20259,20263,20267],{},[951,20260,20261],{"align":997},[618,20262,17484],{},[951,20264,20265],{"align":997},[618,20266,17582],{},[951,20268,20269],{"align":997},"Whether the texture is loading",[933,20271,20272,20276,20281],{},[951,20273,20274],{"align":997},[618,20275,17499],{},[951,20277,20278],{"align":997},[618,20279,20280],{},"string | null",[951,20282,20283],{"align":997},"Error message if loading failed",[504,20285,20287],{"id":20286},"component-usage","Component Usage",[614,20289,20290,20291,20294],{},"You can also use the ",[618,20292,20293],{},"UseTexture"," component directly in your template:",[626,20296,20299],{"className":628,"code":20297,"highlights":20298,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { UseTexture } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'\n\nconst handleLoaded = (texture: Texture) => {\n console.log('Loaded texture', texture)\n}\n\nconst handleError = (error: unknown) => {\n console.error('error', error)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUseTexture\n v-slot=\"{ state: texture }\"\n :path=\"path\"\n @loaded=\"handleLoaded\"\n @error=\"handleError\"\n >\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n \u003C/TresMesh>\n \u003C/UseTexture>\n\u003C/template>\n",[578,872,882,632,902,912,2648,2704],[618,20300,20301,20321,20341,20345,20360,20364,20388,20411,20415,20419,20443,20466,20470,20478,20482,20490,20498,20513,20527,20542,20557,20562,20570,20578,20596,20604,20613],{"__ignoreMap":576},[637,20302,20303,20305,20307,20309,20311,20313,20315,20317,20319],{"class":639,"line":577},[637,20304,643],{"class":642},[637,20306,647],{"class":646},[637,20308,651],{"class":650},[637,20310,654],{"class":650},[637,20312,657],{"class":642},[637,20314,660],{"class":642},[637,20316,664],{"class":663},[637,20318,660],{"class":642},[637,20320,669],{"class":642},[637,20322,20324,20326,20328,20331,20333,20335,20337,20339],{"class":20323,"line":578},[639,673],[637,20325,677],{"class":676},[637,20327,680],{"class":642},[637,20329,20330],{"class":683}," UseTexture",[637,20332,693],{"class":642},[637,20334,696],{"class":676},[637,20336,699],{"class":642},[637,20338,702],{"class":663},[637,20340,705],{"class":642},[637,20342,20343],{"class":639,"line":708},[637,20344,742],{"emptyLinePlaceholder":594},[637,20346,20347,20349,20351,20353,20355,20358],{"class":639,"line":729},[637,20348,2438],{"class":650},[637,20350,17008],{"class":683},[637,20352,657],{"class":642},[637,20354,699],{"class":642},[637,20356,20357],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[637,20359,705],{"class":642},[637,20361,20362],{"class":639,"line":739},[637,20363,742],{"emptyLinePlaceholder":594},[637,20365,20366,20368,20371,20373,20375,20377,20379,20382,20384,20386],{"class":639,"line":745},[637,20367,2438],{"class":650},[637,20369,20370],{"class":683}," handleLoaded ",[637,20372,657],{"class":642},[637,20374,3097],{"class":642},[637,20376,2740],{"class":6859},[637,20378,1240],{"class":642},[637,20380,20381],{"class":1222}," Texture",[637,20383,3363],{"class":642},[637,20385,3700],{"class":650},[637,20387,1226],{"class":642},[637,20389,20390,20392,20394,20396,20398,20400,20403,20405,20407,20409],{"class":639,"line":755},[637,20391,6875],{"class":683},[637,20393,1146],{"class":642},[637,20395,6880],{"class":2457},[637,20397,2460],{"class":646},[637,20399,2463],{"class":642},[637,20401,20402],{"class":663},"Loaded texture",[637,20404,2463],{"class":642},[637,20406,687],{"class":642},[637,20408,20083],{"class":683},[637,20410,2471],{"class":646},[637,20412,20413],{"class":639,"line":778},[637,20414,1347],{"class":642},[637,20416,20417],{"class":639,"line":790},[637,20418,742],{"emptyLinePlaceholder":594},[637,20420,20421,20423,20426,20428,20430,20432,20434,20437,20439,20441],{"class":639,"line":800},[637,20422,2438],{"class":650},[637,20424,20425],{"class":683}," handleError ",[637,20427,657],{"class":642},[637,20429,3097],{"class":642},[637,20431,17499],{"class":6859},[637,20433,1240],{"class":642},[637,20435,20436],{"class":1222}," unknown",[637,20438,3363],{"class":642},[637,20440,3700],{"class":650},[637,20442,1226],{"class":642},[637,20444,20445,20447,20449,20451,20453,20455,20457,20459,20461,20464],{"class":639,"line":805},[637,20446,6875],{"class":683},[637,20448,1146],{"class":642},[637,20450,17499],{"class":2457},[637,20452,2460],{"class":646},[637,20454,2463],{"class":642},[637,20456,17499],{"class":663},[637,20458,2463],{"class":642},[637,20460,687],{"class":642},[637,20462,20463],{"class":683}," error",[637,20465,2471],{"class":646},[637,20467,20468],{"class":639,"line":827},[637,20469,1347],{"class":642},[637,20471,20472,20474,20476],{"class":639,"line":631},[637,20473,732],{"class":642},[637,20475,647],{"class":646},[637,20477,669],{"class":642},[637,20479,20480],{"class":639,"line":850},[637,20481,742],{"emptyLinePlaceholder":594},[637,20483,20484,20486,20488],{"class":639,"line":861},[637,20485,643],{"class":642},[637,20487,750],{"class":646},[637,20489,669],{"class":642},[637,20491,20493,20495],{"class":20492,"line":872},[639,673],[637,20494,758],{"class":642},[637,20496,20497],{"class":646},"UseTexture\n",[637,20499,20501,20504,20506,20508,20511],{"class":20500,"line":882},[639,673],[637,20502,20503],{"class":650}," v-slot",[637,20505,657],{"class":642},[637,20507,660],{"class":642},[637,20509,20510],{"class":663},"{ state: texture }",[637,20512,3154],{"class":642},[637,20514,20516,20519,20521,20523,20525],{"class":20515,"line":632},[639,673],[637,20517,20518],{"class":650}," :path",[637,20520,657],{"class":642},[637,20522,660],{"class":642},[637,20524,18098],{"class":663},[637,20526,3154],{"class":642},[637,20528,20530,20533,20535,20537,20540],{"class":20529,"line":902},[639,673],[637,20531,20532],{"class":650}," @loaded",[637,20534,657],{"class":642},[637,20536,660],{"class":642},[637,20538,20539],{"class":663},"handleLoaded",[637,20541,3154],{"class":642},[637,20543,20545,20548,20550,20552,20555],{"class":20544,"line":912},[639,673],[637,20546,20547],{"class":650}," @error",[637,20549,657],{"class":642},[637,20551,660],{"class":642},[637,20553,20554],{"class":663},"handleError",[637,20556,3154],{"class":642},[637,20558,20560],{"class":20559,"line":2648},[639,673],[637,20561,5196],{"class":642},[637,20563,20564,20566,20568],{"class":639,"line":2657},[637,20565,781],{"class":642},[637,20567,856],{"class":646},[637,20569,669],{"class":642},[637,20571,20572,20574,20576],{"class":639,"line":2677},[637,20573,853],{"class":642},[637,20575,3981],{"class":646},[637,20577,787],{"class":642},[637,20579,20580,20582,20584,20586,20588,20590,20592,20594],{"class":639,"line":2686},[637,20581,853],{"class":642},[637,20583,2709],{"class":646},[637,20585,2757],{"class":650},[637,20587,657],{"class":642},[637,20589,660],{"class":642},[637,20591,2740],{"class":663},[637,20593,660],{"class":642},[637,20595,787],{"class":642},[637,20597,20598,20600,20602],{"class":639,"line":2695},[637,20599,895],{"class":642},[637,20601,856],{"class":646},[637,20603,669],{"class":642},[637,20605,20607,20609,20611],{"class":20606,"line":2704},[639,673],[637,20608,905],{"class":642},[637,20610,20293],{"class":646},[637,20612,669],{"class":642},[637,20614,20615,20617,20619],{"class":639,"line":2726},[637,20616,732],{"class":642},[637,20618,750],{"class":646},[637,20620,669],{"class":642},[1349,20622,20623],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":20625},[20626,20627,20628,20629],{"id":624,"depth":578,"text":15},{"id":17555,"depth":578,"text":14044},{"id":17417,"depth":578,"text":17418},{"id":20286,"depth":578,"text":20287},"A composable to load textures in TresJS scenes.",{},{"title":149,"description":20630},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":20635,"title":153,"body":20636,"description":22076,"extension":591,"links":592,"meta":22077,"navigation":594,"path":154,"seo":22078,"stem":155,"__hash__":22079},"docs/2.api/3.loaders/6.use-textures.md",{"type":501,"value":20637,"toc":22067},[20638,20643,20651,20653,20899,20903,20906,21933,21937,21941,21976,21980,22034,22038,22064],[2318,20639,20640],{},[20641,20642],"loaders-use-textures",{},[614,20644,20645,20646,20016,20649,16946],{},"A composable that allows you to load multiple textures at once using the ",[1140,20647,20015],{"href":20013,"rel":20648},[1144],[1692,20650,16945],{},[504,20652,15],{"id":624},[626,20654,20657],{"className":628,"code":20655,"highlights":20656,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useTextures } from '@tresjs/cientos'\n\n// Define an array of texture paths\nconst texturePaths = [\n '/textures/color.jpg',\n '/textures/normal.jpg',\n '/textures/roughness.jpg'\n]\n\n// Load all textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial\n :map=\"textures[0]\"\n :normal-map=\"textures[1]\"\n :roughness-map=\"textures[2]\"\n />\n \u003C/TresMesh>\n\u003C/template>\n",[578,827,902,912,2648],[618,20658,20659,20679,20698,20702,20707,20719,20730,20741,20750,20755,20759,20764,20791,20799,20803,20811,20819,20827,20834,20849,20864,20879,20883,20891],{"__ignoreMap":576},[637,20660,20661,20663,20665,20667,20669,20671,20673,20675,20677],{"class":639,"line":577},[637,20662,643],{"class":642},[637,20664,647],{"class":646},[637,20666,651],{"class":650},[637,20668,654],{"class":650},[637,20670,657],{"class":642},[637,20672,660],{"class":642},[637,20674,664],{"class":663},[637,20676,660],{"class":642},[637,20678,669],{"class":642},[637,20680,20682,20684,20686,20688,20690,20692,20694,20696],{"class":20681,"line":578},[639,673],[637,20683,677],{"class":676},[637,20685,680],{"class":642},[637,20687,2863],{"class":683},[637,20689,693],{"class":642},[637,20691,696],{"class":676},[637,20693,699],{"class":642},[637,20695,702],{"class":663},[637,20697,705],{"class":642},[637,20699,20700],{"class":639,"line":708},[637,20701,742],{"emptyLinePlaceholder":594},[637,20703,20704],{"class":639,"line":729},[637,20705,20706],{"class":1231},"// Define an array of texture paths\n",[637,20708,20709,20711,20714,20716],{"class":639,"line":739},[637,20710,2438],{"class":650},[637,20712,20713],{"class":683}," texturePaths ",[637,20715,657],{"class":642},[637,20717,20718],{"class":683}," [\n",[637,20720,20721,20723,20726,20728],{"class":639,"line":745},[637,20722,2899],{"class":642},[637,20724,20725],{"class":663},"/textures/color.jpg",[637,20727,2463],{"class":642},[637,20729,2511],{"class":642},[637,20731,20732,20734,20737,20739],{"class":639,"line":755},[637,20733,2899],{"class":642},[637,20735,20736],{"class":663},"/textures/normal.jpg",[637,20738,2463],{"class":642},[637,20740,2511],{"class":642},[637,20742,20743,20745,20748],{"class":639,"line":778},[637,20744,2899],{"class":642},[637,20746,20747],{"class":663},"/textures/roughness.jpg",[637,20749,705],{"class":642},[637,20751,20752],{"class":639,"line":790},[637,20753,20754],{"class":683},"]\n",[637,20756,20757],{"class":639,"line":800},[637,20758,742],{"emptyLinePlaceholder":594},[637,20760,20761],{"class":639,"line":805},[637,20762,20763],{"class":1231},"// Load all textures at once\n",[637,20765,20767,20769,20771,20774,20776,20778,20780,20782,20784,20786,20788],{"class":20766,"line":827},[639,673],[637,20768,2438],{"class":650},[637,20770,680],{"class":642},[637,20772,20773],{"class":683}," textures",[637,20775,687],{"class":642},[637,20777,20088],{"class":683},[637,20779,687],{"class":642},[637,20781,20093],{"class":683},[637,20783,2451],{"class":642},[637,20785,2454],{"class":642},[637,20787,2863],{"class":2457},[637,20789,20790],{"class":683},"(texturePaths)\n",[637,20792,20793,20795,20797],{"class":639,"line":631},[637,20794,732],{"class":642},[637,20796,647],{"class":646},[637,20798,669],{"class":642},[637,20800,20801],{"class":639,"line":850},[637,20802,742],{"emptyLinePlaceholder":594},[637,20804,20805,20807,20809],{"class":639,"line":861},[637,20806,643],{"class":642},[637,20808,750],{"class":646},[637,20810,669],{"class":642},[637,20812,20813,20815,20817],{"class":639,"line":872},[637,20814,758],{"class":642},[637,20816,856],{"class":646},[637,20818,669],{"class":642},[637,20820,20821,20823,20825],{"class":639,"line":882},[637,20822,781],{"class":642},[637,20824,3981],{"class":646},[637,20826,787],{"class":642},[637,20828,20829,20831],{"class":639,"line":632},[637,20830,781],{"class":642},[637,20832,20833],{"class":646},"TresMeshStandardMaterial\n",[637,20835,20837,20840,20842,20844,20847],{"class":20836,"line":902},[639,673],[637,20838,20839],{"class":650}," :map",[637,20841,657],{"class":642},[637,20843,660],{"class":642},[637,20845,20846],{"class":663},"textures[0]",[637,20848,3154],{"class":642},[637,20850,20852,20855,20857,20859,20862],{"class":20851,"line":912},[639,673],[637,20853,20854],{"class":650}," :normal-map",[637,20856,657],{"class":642},[637,20858,660],{"class":642},[637,20860,20861],{"class":663},"textures[1]",[637,20863,3154],{"class":642},[637,20865,20867,20870,20872,20874,20877],{"class":20866,"line":2648},[639,673],[637,20868,20869],{"class":650}," :roughness-map",[637,20871,657],{"class":642},[637,20873,660],{"class":642},[637,20875,20876],{"class":663},"textures[2]",[637,20878,3154],{"class":642},[637,20880,20881],{"class":639,"line":2657},[637,20882,17292],{"class":642},[637,20884,20885,20887,20889],{"class":639,"line":2677},[637,20886,905],{"class":642},[637,20888,856],{"class":646},[637,20890,669],{"class":642},[637,20892,20893,20895,20897],{"class":639,"line":2686},[637,20894,732],{"class":642},[637,20896,750],{"class":646},[637,20898,669],{"class":642},[504,20900,20902],{"id":20901},"pbr-textures-example","PBR Textures Example",[614,20904,20905],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[626,20907,20910],{"className":628,"code":20908,"filename":20909,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'\nimport { MeshStandardMaterial } from 'three'\n\n// Load the 3D model\nconst { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })\nconst cube = computed(() => model.value?.nodes?.BlenderCube)\nconst material = computed(() => model.value?.materials?.Material)\n\n// Define texture paths\nconst texturePaths = [\n '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',\n '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',\n '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',\n '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',\n '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'\n]\n\n// Load all PBR textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\n// Apply textures to material when loaded\nwatch([material, textures], ([modelMaterial, textures]) => {\n if (modelMaterial && textures && textures.length === texturePaths.length) {\n // Cast to MeshStandardMaterial to access PBR properties\n const pbrMaterial = modelMaterial as MeshStandardMaterial\n\n // Apply textures\n pbrMaterial.map = textures[0]\n pbrMaterial.normalMap = textures[1]\n pbrMaterial.roughnessMap = textures[2]\n pbrMaterial.metalnessMap = textures[3]\n pbrMaterial.displacementMap = textures[4]\n\n // Set material properties\n pbrMaterial.displacementScale = 0\n pbrMaterial.metalness = 0.8\n pbrMaterial.roughness = 0.2\n }\n})\n\n// Handle loading state and errors\nwatch(isLoading, (_loading) => {\n // Handle loading state\n})\n\nwatch(error, (errs) => {\n if (errs) {\n console.error('Error loading textures:', errs)\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4f4f4f\">\n \u003CSuspense>\n \u003CEnvironment preset=\"studio\" background :blur=\"1\" />\n \u003C/Suspense>\n \u003CTresPerspectiveCamera :position=\"[8, 8, 8]\" />\n \u003COrbitControls />\n \u003CTresGridHelper />\n \u003CTresAmbientLight :intensity=\"2\" />\n \u003CTresDirectionalLight v-light-helper :position=\"[5, 5, 5]\" :intensity=\"0.5\" color=\"#ff0000\" />\n \u003CTresDirectionalLight v-light-helper :position=\"[-5, 2, 2]\" :intensity=\"0.5\" color=\"#0000ff\" />\n \u003CTresGroup position-y=\"2\">\n \u003Cprimitive v-if=\"cube\" :object=\"cube\" />\n \u003C/TresGroup>\n \u003C/TresCanvas>\n\u003C/template>\n","PBRTextures.vue",[618,20911,20912,20932,20955,20986,21004,21008,21013,21054,21086,21117,21121,21126,21136,21147,21158,21169,21180,21189,21193,21197,21202,21226,21230,21235,21266,21303,21308,21327,21331,21336,21355,21374,21393,21413,21432,21436,21441,21455,21470,21485,21490,21497,21502,21508,21529,21535,21542,21547,21568,21581,21607,21612,21619,21628,21633,21642,21661,21671,21706,21715,21735,21744,21753,21772,21815,21857,21877,21906,21915,21924],{"__ignoreMap":576},[637,20913,20914,20916,20918,20920,20922,20924,20926,20928,20930],{"class":639,"line":577},[637,20915,643],{"class":642},[637,20917,647],{"class":646},[637,20919,651],{"class":650},[637,20921,654],{"class":650},[637,20923,657],{"class":642},[637,20925,660],{"class":642},[637,20927,664],{"class":663},[637,20929,660],{"class":642},[637,20931,669],{"class":642},[637,20933,20934,20936,20938,20940,20942,20945,20947,20949,20951,20953],{"class":639,"line":578},[637,20935,677],{"class":676},[637,20937,680],{"class":642},[637,20939,715],{"class":683},[637,20941,687],{"class":642},[637,20943,20944],{"class":683}," vLightHelper",[637,20946,693],{"class":642},[637,20948,696],{"class":676},[637,20950,699],{"class":642},[637,20952,724],{"class":663},[637,20954,705],{"class":642},[637,20956,20957,20959,20961,20964,20966,20968,20970,20972,20974,20976,20978,20980,20982,20984],{"class":639,"line":708},[637,20958,677],{"class":676},[637,20960,680],{"class":642},[637,20962,20963],{"class":683}," Environment",[637,20965,687],{"class":642},[637,20967,690],{"class":683},[637,20969,687],{"class":642},[637,20971,4370],{"class":683},[637,20973,687],{"class":642},[637,20975,2863],{"class":683},[637,20977,693],{"class":642},[637,20979,696],{"class":676},[637,20981,699],{"class":642},[637,20983,702],{"class":663},[637,20985,705],{"class":642},[637,20987,20988,20990,20992,20994,20996,20998,21000,21002],{"class":639,"line":729},[637,20989,677],{"class":676},[637,20991,680],{"class":642},[637,20993,8375],{"class":683},[637,20995,693],{"class":642},[637,20997,696],{"class":676},[637,20999,699],{"class":642},[637,21001,4649],{"class":663},[637,21003,705],{"class":642},[637,21005,21006],{"class":639,"line":739},[637,21007,742],{"emptyLinePlaceholder":594},[637,21009,21010],{"class":639,"line":745},[637,21011,21012],{"class":1231},"// Load the 3D model\n",[637,21014,21015,21017,21019,21021,21023,21025,21027,21029,21031,21033,21035,21038,21040,21042,21044,21046,21048,21050,21052],{"class":639,"line":755},[637,21016,2438],{"class":650},[637,21018,680],{"class":642},[637,21020,2443],{"class":646},[637,21022,1240],{"class":642},[637,21024,5032],{"class":683},[637,21026,2451],{"class":642},[637,21028,2454],{"class":642},[637,21030,4370],{"class":2457},[637,21032,2460],{"class":683},[637,21034,2463],{"class":642},[637,21036,21037],{"class":663},"/blender-cube-draco.glb",[637,21039,2463],{"class":642},[637,21041,687],{"class":642},[637,21043,680],{"class":642},[637,21045,4415],{"class":646},[637,21047,1240],{"class":642},[637,21049,4421],{"class":4420},[637,21051,693],{"class":642},[637,21053,2471],{"class":683},[637,21055,21056,21058,21061,21063,21065,21067,21069,21071,21073,21075,21077,21079,21081,21083],{"class":639,"line":778},[637,21057,2438],{"class":650},[637,21059,21060],{"class":683}," cube ",[637,21062,657],{"class":642},[637,21064,3512],{"class":2457},[637,21066,2460],{"class":683},[637,21068,3697],{"class":642},[637,21070,3700],{"class":650},[637,21072,5071],{"class":683},[637,21074,1146],{"class":642},[637,21076,3708],{"class":683},[637,21078,3711],{"class":642},[637,21080,11051],{"class":683},[637,21082,3711],{"class":642},[637,21084,21085],{"class":683},"BlenderCube)\n",[637,21087,21088,21090,21092,21094,21096,21098,21100,21102,21104,21106,21108,21110,21112,21114],{"class":639,"line":790},[637,21089,2438],{"class":650},[637,21091,8425],{"class":683},[637,21093,657],{"class":642},[637,21095,3512],{"class":2457},[637,21097,2460],{"class":683},[637,21099,3697],{"class":642},[637,21101,3700],{"class":650},[637,21103,5071],{"class":683},[637,21105,1146],{"class":642},[637,21107,3708],{"class":683},[637,21109,3711],{"class":642},[637,21111,528],{"class":683},[637,21113,3711],{"class":642},[637,21115,21116],{"class":683},"Material)\n",[637,21118,21119],{"class":639,"line":800},[637,21120,742],{"emptyLinePlaceholder":594},[637,21122,21123],{"class":639,"line":805},[637,21124,21125],{"class":1231},"// Define texture paths\n",[637,21127,21128,21130,21132,21134],{"class":639,"line":827},[637,21129,2438],{"class":650},[637,21131,20713],{"class":683},[637,21133,657],{"class":642},[637,21135,20718],{"class":683},[637,21137,21138,21140,21143,21145],{"class":639,"line":631},[637,21139,2899],{"class":642},[637,21141,21142],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[637,21144,2463],{"class":642},[637,21146,2511],{"class":642},[637,21148,21149,21151,21154,21156],{"class":639,"line":850},[637,21150,2899],{"class":642},[637,21152,21153],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[637,21155,2463],{"class":642},[637,21157,2511],{"class":642},[637,21159,21160,21162,21165,21167],{"class":639,"line":861},[637,21161,2899],{"class":642},[637,21163,21164],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[637,21166,2463],{"class":642},[637,21168,2511],{"class":642},[637,21170,21171,21173,21176,21178],{"class":639,"line":872},[637,21172,2899],{"class":642},[637,21174,21175],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[637,21177,2463],{"class":642},[637,21179,2511],{"class":642},[637,21181,21182,21184,21187],{"class":639,"line":882},[637,21183,2899],{"class":642},[637,21185,21186],{"class":663},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[637,21188,705],{"class":642},[637,21190,21191],{"class":639,"line":632},[637,21192,20754],{"class":683},[637,21194,21195],{"class":639,"line":902},[637,21196,742],{"emptyLinePlaceholder":594},[637,21198,21199],{"class":639,"line":912},[637,21200,21201],{"class":1231},"// Load all PBR textures at once\n",[637,21203,21204,21206,21208,21210,21212,21214,21216,21218,21220,21222,21224],{"class":639,"line":2648},[637,21205,2438],{"class":650},[637,21207,680],{"class":642},[637,21209,20773],{"class":683},[637,21211,687],{"class":642},[637,21213,20088],{"class":683},[637,21215,687],{"class":642},[637,21217,20093],{"class":683},[637,21219,2451],{"class":642},[637,21221,2454],{"class":642},[637,21223,2863],{"class":2457},[637,21225,20790],{"class":683},[637,21227,21228],{"class":639,"line":2657},[637,21229,742],{"emptyLinePlaceholder":594},[637,21231,21232],{"class":639,"line":2677},[637,21233,21234],{"class":1231},"// Apply textures to material when loaded\n",[637,21236,21237,21239,21242,21244,21247,21249,21252,21255,21257,21259,21262,21264],{"class":639,"line":2686},[637,21238,12210],{"class":2457},[637,21240,21241],{"class":683},"([material",[637,21243,687],{"class":642},[637,21245,21246],{"class":683}," textures]",[637,21248,687],{"class":642},[637,21250,21251],{"class":642}," ([",[637,21253,21254],{"class":6859},"modelMaterial",[637,21256,687],{"class":642},[637,21258,20773],{"class":6859},[637,21260,21261],{"class":642},"])",[637,21263,3700],{"class":650},[637,21265,1226],{"class":642},[637,21267,21268,21271,21273,21275,21278,21280,21282,21284,21286,21289,21292,21295,21297,21299,21301],{"class":639,"line":2695},[637,21269,21270],{"class":676}," if",[637,21272,3097],{"class":646},[637,21274,21254],{"class":683},[637,21276,21277],{"class":642}," &&",[637,21279,20773],{"class":683},[637,21281,21277],{"class":642},[637,21283,20773],{"class":683},[637,21285,1146],{"class":642},[637,21287,21288],{"class":683},"length",[637,21290,21291],{"class":642}," ===",[637,21293,21294],{"class":683}," texturePaths",[637,21296,1146],{"class":642},[637,21298,21288],{"class":683},[637,21300,4757],{"class":646},[637,21302,3283],{"class":642},[637,21304,21305],{"class":639,"line":2704},[637,21306,21307],{"class":1231}," // Cast to MeshStandardMaterial to access PBR properties\n",[637,21309,21310,21313,21316,21318,21321,21324],{"class":639,"line":2726},[637,21311,21312],{"class":650}," const",[637,21314,21315],{"class":683}," pbrMaterial",[637,21317,2454],{"class":642},[637,21319,21320],{"class":683}," modelMaterial",[637,21322,21323],{"class":676}," as",[637,21325,21326],{"class":1222}," MeshStandardMaterial\n",[637,21328,21329],{"class":639,"line":2770},[637,21330,742],{"emptyLinePlaceholder":594},[637,21332,21333],{"class":639,"line":2779},[637,21334,21335],{"class":1231}," // Apply textures\n",[637,21337,21338,21341,21343,21345,21347,21349,21351,21353],{"class":639,"line":2788},[637,21339,21340],{"class":683}," pbrMaterial",[637,21342,1146],{"class":642},[637,21344,3004],{"class":683},[637,21346,2454],{"class":642},[637,21348,20773],{"class":683},[637,21350,8752],{"class":646},[637,21352,965],{"class":2524},[637,21354,20754],{"class":646},[637,21356,21357,21359,21361,21364,21366,21368,21370,21372],{"class":639,"line":3945},[637,21358,21340],{"class":683},[637,21360,1146],{"class":642},[637,21362,21363],{"class":683},"normalMap",[637,21365,2454],{"class":642},[637,21367,20773],{"class":683},[637,21369,8752],{"class":646},[637,21371,1897],{"class":2524},[637,21373,20754],{"class":646},[637,21375,21376,21378,21380,21383,21385,21387,21389,21391],{"class":639,"line":3976},[637,21377,21340],{"class":683},[637,21379,1146],{"class":642},[637,21381,21382],{"class":683},"roughnessMap",[637,21384,2454],{"class":642},[637,21386,20773],{"class":683},[637,21388,8752],{"class":646},[637,21390,820],{"class":2524},[637,21392,20754],{"class":646},[637,21394,21395,21397,21399,21402,21404,21406,21408,21411],{"class":639,"line":3997},[637,21396,21340],{"class":683},[637,21398,1146],{"class":642},[637,21400,21401],{"class":683},"metalnessMap",[637,21403,2454],{"class":642},[637,21405,20773],{"class":683},[637,21407,8752],{"class":646},[637,21409,21410],{"class":2524},"3",[637,21412,20754],{"class":646},[637,21414,21415,21417,21419,21422,21424,21426,21428,21430],{"class":639,"line":4016},[637,21416,21340],{"class":683},[637,21418,1146],{"class":642},[637,21420,21421],{"class":683},"displacementMap",[637,21423,2454],{"class":642},[637,21425,20773],{"class":683},[637,21427,8752],{"class":646},[637,21429,9674],{"class":2524},[637,21431,20754],{"class":646},[637,21433,21434],{"class":639,"line":4048},[637,21435,742],{"emptyLinePlaceholder":594},[637,21437,21438],{"class":639,"line":4057},[637,21439,21440],{"class":1231}," // Set material properties\n",[637,21442,21443,21445,21447,21450,21452],{"class":639,"line":4066},[637,21444,21340],{"class":683},[637,21446,1146],{"class":642},[637,21448,21449],{"class":683},"displacementScale",[637,21451,2454],{"class":642},[637,21453,21454],{"class":2524}," 0\n",[637,21456,21458,21460,21462,21465,21467],{"class":639,"line":21457},38,[637,21459,21340],{"class":683},[637,21461,1146],{"class":642},[637,21463,21464],{"class":683},"metalness",[637,21466,2454],{"class":642},[637,21468,21469],{"class":2524}," 0.8\n",[637,21471,21473,21475,21477,21480,21482],{"class":639,"line":21472},39,[637,21474,21340],{"class":683},[637,21476,1146],{"class":642},[637,21478,21479],{"class":683},"roughness",[637,21481,2454],{"class":642},[637,21483,21484],{"class":2524}," 0.2\n",[637,21486,21488],{"class":639,"line":21487},40,[637,21489,7878],{"class":642},[637,21491,21493,21495],{"class":639,"line":21492},41,[637,21494,2451],{"class":642},[637,21496,2471],{"class":683},[637,21498,21500],{"class":639,"line":21499},42,[637,21501,742],{"emptyLinePlaceholder":594},[637,21503,21505],{"class":639,"line":21504},43,[637,21506,21507],{"class":1231},"// Handle loading state and errors\n",[637,21509,21511,21513,21516,21518,21520,21523,21525,21527],{"class":639,"line":21510},44,[637,21512,12210],{"class":2457},[637,21514,21515],{"class":683},"(isLoading",[637,21517,687],{"class":642},[637,21519,3097],{"class":642},[637,21521,21522],{"class":6859},"_loading",[637,21524,3363],{"class":642},[637,21526,3700],{"class":650},[637,21528,1226],{"class":642},[637,21530,21532],{"class":639,"line":21531},45,[637,21533,21534],{"class":1231}," // Handle loading state\n",[637,21536,21538,21540],{"class":639,"line":21537},46,[637,21539,2451],{"class":642},[637,21541,2471],{"class":683},[637,21543,21545],{"class":639,"line":21544},47,[637,21546,742],{"emptyLinePlaceholder":594},[637,21548,21550,21552,21555,21557,21559,21562,21564,21566],{"class":639,"line":21549},48,[637,21551,12210],{"class":2457},[637,21553,21554],{"class":683},"(error",[637,21556,687],{"class":642},[637,21558,3097],{"class":642},[637,21560,21561],{"class":6859},"errs",[637,21563,3363],{"class":642},[637,21565,3700],{"class":650},[637,21567,1226],{"class":642},[637,21569,21571,21573,21575,21577,21579],{"class":639,"line":21570},49,[637,21572,21270],{"class":676},[637,21574,3097],{"class":646},[637,21576,21561],{"class":683},[637,21578,4757],{"class":646},[637,21580,3283],{"class":642},[637,21582,21584,21587,21589,21591,21593,21595,21598,21600,21602,21605],{"class":639,"line":21583},50,[637,21585,21586],{"class":683}," console",[637,21588,1146],{"class":642},[637,21590,17499],{"class":2457},[637,21592,2460],{"class":646},[637,21594,2463],{"class":642},[637,21596,21597],{"class":663},"Error loading textures:",[637,21599,2463],{"class":642},[637,21601,687],{"class":642},[637,21603,21604],{"class":683}," errs",[637,21606,2471],{"class":646},[637,21608,21610],{"class":639,"line":21609},51,[637,21611,7878],{"class":642},[637,21613,21615,21617],{"class":639,"line":21614},52,[637,21616,2451],{"class":642},[637,21618,2471],{"class":683},[637,21620,21622,21624,21626],{"class":639,"line":21621},53,[637,21623,732],{"class":642},[637,21625,647],{"class":646},[637,21627,669],{"class":642},[637,21629,21631],{"class":639,"line":21630},54,[637,21632,742],{"emptyLinePlaceholder":594},[637,21634,21636,21638,21640],{"class":639,"line":21635},55,[637,21637,643],{"class":642},[637,21639,750],{"class":646},[637,21641,669],{"class":642},[637,21643,21645,21647,21649,21651,21653,21655,21657,21659],{"class":639,"line":21644},56,[637,21646,758],{"class":642},[637,21648,761],{"class":646},[637,21650,764],{"class":650},[637,21652,657],{"class":642},[637,21654,660],{"class":642},[637,21656,10031],{"class":663},[637,21658,660],{"class":642},[637,21660,669],{"class":642},[637,21662,21664,21666,21669],{"class":639,"line":21663},57,[637,21665,781],{"class":642},[637,21667,21668],{"class":646},"Suspense",[637,21670,669],{"class":642},[637,21672,21674,21676,21678,21681,21683,21685,21688,21690,21693,21696,21698,21700,21702,21704],{"class":639,"line":21673},58,[637,21675,853],{"class":642},[637,21677,375],{"class":646},[637,21679,21680],{"class":650}," preset",[637,21682,657],{"class":642},[637,21684,660],{"class":642},[637,21686,21687],{"class":663},"studio",[637,21689,660],{"class":642},[637,21691,21692],{"class":650}," background",[637,21694,21695],{"class":650}," :blur",[637,21697,657],{"class":642},[637,21699,660],{"class":642},[637,21701,1897],{"class":663},[637,21703,660],{"class":642},[637,21705,787],{"class":642},[637,21707,21709,21711,21713],{"class":639,"line":21708},59,[637,21710,895],{"class":642},[637,21712,21668],{"class":646},[637,21714,669],{"class":642},[637,21716,21718,21720,21722,21724,21726,21728,21731,21733],{"class":639,"line":21717},60,[637,21719,781],{"class":642},[637,21721,784],{"class":646},[637,21723,1508],{"class":650},[637,21725,657],{"class":642},[637,21727,660],{"class":642},[637,21729,21730],{"class":663},"[8, 8, 8]",[637,21732,660],{"class":642},[637,21734,787],{"class":642},[637,21736,21738,21740,21742],{"class":639,"line":21737},61,[637,21739,781],{"class":642},[637,21741,795],{"class":646},[637,21743,787],{"class":642},[637,21745,21747,21749,21751],{"class":639,"line":21746},62,[637,21748,781],{"class":642},[637,21750,8070],{"class":646},[637,21752,787],{"class":642},[637,21754,21756,21758,21760,21762,21764,21766,21768,21770],{"class":639,"line":21755},63,[637,21757,781],{"class":642},[637,21759,9702],{"class":646},[637,21761,1890],{"class":650},[637,21763,657],{"class":642},[637,21765,660],{"class":642},[637,21767,820],{"class":663},[637,21769,660],{"class":642},[637,21771,787],{"class":642},[637,21773,21775,21777,21779,21782,21784,21786,21788,21791,21793,21795,21797,21799,21801,21803,21805,21807,21809,21811,21813],{"class":639,"line":21774},64,[637,21776,781],{"class":642},[637,21778,9721],{"class":646},[637,21780,21781],{"class":650}," v-light-helper",[637,21783,1508],{"class":650},[637,21785,657],{"class":642},[637,21787,660],{"class":642},[637,21789,21790],{"class":663},"[5, 5, 5]",[637,21792,660],{"class":642},[637,21794,1890],{"class":650},[637,21796,657],{"class":642},[637,21798,660],{"class":642},[637,21800,1969],{"class":663},[637,21802,660],{"class":642},[637,21804,2712],{"class":650},[637,21806,657],{"class":642},[637,21808,660],{"class":642},[637,21810,7592],{"class":663},[637,21812,660],{"class":642},[637,21814,787],{"class":642},[637,21816,21818,21820,21822,21824,21826,21828,21830,21833,21835,21837,21839,21841,21843,21845,21847,21849,21851,21853,21855],{"class":639,"line":21817},65,[637,21819,781],{"class":642},[637,21821,9721],{"class":646},[637,21823,21781],{"class":650},[637,21825,1508],{"class":650},[637,21827,657],{"class":642},[637,21829,660],{"class":642},[637,21831,21832],{"class":663},"[-5, 2, 2]",[637,21834,660],{"class":642},[637,21836,1890],{"class":650},[637,21838,657],{"class":642},[637,21840,660],{"class":642},[637,21842,1969],{"class":663},[637,21844,660],{"class":642},[637,21846,2712],{"class":650},[637,21848,657],{"class":642},[637,21850,660],{"class":642},[637,21852,5767],{"class":663},[637,21854,660],{"class":642},[637,21856,787],{"class":642},[637,21858,21860,21862,21864,21867,21869,21871,21873,21875],{"class":639,"line":21859},66,[637,21861,781],{"class":642},[637,21863,10062],{"class":646},[637,21865,21866],{"class":650}," position-y",[637,21868,657],{"class":642},[637,21870,660],{"class":642},[637,21872,820],{"class":663},[637,21874,660],{"class":642},[637,21876,669],{"class":642},[637,21878,21880,21882,21884,21886,21888,21890,21892,21894,21896,21898,21900,21902,21904],{"class":639,"line":21879},67,[637,21881,853],{"class":642},[637,21883,4457],{"class":646},[637,21885,2733],{"class":650},[637,21887,657],{"class":642},[637,21889,660],{"class":642},[637,21891,3845],{"class":663},[637,21893,660],{"class":642},[637,21895,4471],{"class":650},[637,21897,657],{"class":642},[637,21899,660],{"class":642},[637,21901,3845],{"class":663},[637,21903,660],{"class":642},[637,21905,787],{"class":642},[637,21907,21909,21911,21913],{"class":639,"line":21908},68,[637,21910,895],{"class":642},[637,21912,10062],{"class":646},[637,21914,669],{"class":642},[637,21916,21918,21920,21922],{"class":639,"line":21917},69,[637,21919,905],{"class":642},[637,21921,761],{"class":646},[637,21923,669],{"class":642},[637,21925,21927,21929,21931],{"class":639,"line":21926},70,[637,21928,732],{"class":642},[637,21930,750],{"class":646},[637,21932,669],{"class":642},[504,21934,21936],{"id":21935},"api","API",[4074,21938,21940],{"id":21939},"parameters","Parameters",[927,21942,21943,21955],{},[930,21944,21945],{},[933,21946,21947,21949,21951,21953],{},[936,21948,8110],{"align":997},[936,21950,5990],{},[936,21952,944],{},[936,21954,941],{},[946,21956,21957],{},[933,21958,21959,21964,21969,21973],{},[951,21960,21961],{"align":997},[1692,21962,21963],{},"paths",[951,21965,21966],{},[618,21967,21968],{},"string[]",[951,21970,21971],{},[618,21972,1167],{},[951,21974,21975],{},"Array of paths to the textures.",[4074,21977,21979],{"id":21978},"returns","Returns",[927,21981,21982,21992],{},[930,21983,21984],{},[933,21985,21986,21988,21990],{},[936,21987,8110],{"align":997},[936,21989,5990],{},[936,21991,941],{},[946,21993,21994,22007,22020],{},[933,21995,21996,22000,22004],{},[951,21997,21998],{"align":997},[1692,21999,2976],{},[951,22001,22002],{},[618,22003,5616],{},[951,22005,22006],{},"Array of loaded textures.",[933,22008,22009,22013,22017],{},[951,22010,22011],{"align":997},[1692,22012,17484],{},[951,22014,22015],{},[618,22016,17582],{},[951,22018,22019],{},"Whether any textures are still loading.",[933,22021,22022,22026,22031],{},[951,22023,22024],{"align":997},[1692,22025,17499],{},[951,22027,22028],{},[618,22029,22030],{},"Error[] | null",[951,22032,22033],{},"Array of errors if any occurred during loading.",[504,22035,22037],{"id":22036},"benefits","Benefits",[2236,22039,22040,22046,22052,22058],{},[2239,22041,22042,22045],{},[1692,22043,22044],{},"Simplified API",": Load multiple textures with a single function call",[2239,22047,22048,22051],{},[1692,22049,22050],{},"Consolidated loading state",": Track loading state for all textures at once",[2239,22053,22054,22057],{},[1692,22055,22056],{},"Unified error handling",": Collect and report errors from all texture loads",[2239,22059,22060,22063],{},[1692,22061,22062],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1349,22065,22066],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":22068},[22069,22070,22071,22075],{"id":624,"depth":578,"text":15},{"id":20901,"depth":578,"text":20902},{"id":21935,"depth":578,"text":21936,"children":22072},[22073,22074],{"id":21939,"depth":708,"text":21940},{"id":21978,"depth":708,"text":21979},{"id":22036,"depth":578,"text":22037},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":153,"description":22076},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":22081,"title":157,"body":22082,"description":24926,"extension":591,"links":592,"meta":24927,"navigation":594,"path":158,"seo":24928,"stem":159,"__hash__":24929},"docs/2.api/3.loaders/7.use-svg.md",{"type":501,"value":22083,"toc":24901},[22084,22089,22102,22106,22111,22113,22592,22597,22611,22615,22618,22730,22732,22802,22804,22912,22916,22921,22977,22982,23287,23291,23296,23302,23307,23313,23329,23335,23350,23397,23400,23405,23416,23421,23424,23469,23473,23478,23481,23486,23495,23540,23544,23549,23561,23566,23608,23612,23615,23743,23747,23751,24054,24058,24352,24356,24363,24542,24544,24710,24714,24721,24724,24728,24738,24742,24766,24774,24787,24791,24818,24822,24842,24852,24860,24877,24884,24898],[2318,22085,22086],{},[22087,22088],"loaders-use-svg",{},[614,22090,22091,22092,22094,22095,22097,22098,22101],{},"Load and display SVG elements in your ",[1692,22093,16945],{}," scene. This guide covers both the ",[618,22096,157],{}," composable for advanced use cases and the ",[618,22099,22100],{},"SVG"," component for simple declarative rendering.",[504,22103,22105],{"id":22104},"usesvg-composable","useSVG Composable",[614,22107,2799,22108,22110],{},[618,22109,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4074,22112,15],{"id":624},[16950,22114,22115,22412],{},[626,22116,22119],{"className":628,"code":22117,"filename":16955,"highlights":22118,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n skipFills: false,\n fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup v-if=\"!isLoading\">\n \u003CTresMesh\n v-for=\"(layer, index) in layers\"\n :key=\"`layer-${index}`\"\n :geometry=\"layer.geometry\"\n :render-order=\"index\"\n >\n \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n \u003C/TresMesh>\n \u003C/TresGroup>\n\u003C/template>\n",[578,739,745,755,778],[618,22120,22121,22141,22161,22165,22181,22217,22229,22258,22265,22273,22277,22285,22304,22310,22324,22338,22352,22365,22369,22388,22396,22404],{"__ignoreMap":576},[637,22122,22123,22125,22127,22129,22131,22133,22135,22137,22139],{"class":639,"line":577},[637,22124,643],{"class":642},[637,22126,647],{"class":646},[637,22128,651],{"class":650},[637,22130,654],{"class":650},[637,22132,657],{"class":642},[637,22134,660],{"class":642},[637,22136,664],{"class":663},[637,22138,660],{"class":642},[637,22140,669],{"class":642},[637,22142,22144,22146,22148,22151,22153,22155,22157,22159],{"class":22143,"line":578},[639,673],[637,22145,677],{"class":676},[637,22147,680],{"class":642},[637,22149,22150],{"class":683}," useSVG",[637,22152,693],{"class":642},[637,22154,696],{"class":676},[637,22156,699],{"class":642},[637,22158,702],{"class":663},[637,22160,705],{"class":642},[637,22162,22163],{"class":639,"line":708},[637,22164,742],{"emptyLinePlaceholder":594},[637,22166,22167,22169,22172,22174,22176,22179],{"class":639,"line":729},[637,22168,2438],{"class":650},[637,22170,22171],{"class":683}," svgPath ",[637,22173,657],{"class":642},[637,22175,699],{"class":642},[637,22177,22178],{"class":663},"./logo.svg",[637,22180,705],{"class":642},[637,22182,22184,22186,22188,22190,22192,22195,22197,22199,22201,22204,22206,22208,22210,22213,22215],{"class":22183,"line":739},[639,673],[637,22185,2438],{"class":650},[637,22187,680],{"class":642},[637,22189,2443],{"class":683},[637,22191,687],{"class":642},[637,22193,22194],{"class":683}," layers",[637,22196,687],{"class":642},[637,22198,20088],{"class":683},[637,22200,687],{"class":642},[637,22202,22203],{"class":683}," dispose ",[637,22205,2451],{"class":642},[637,22207,2454],{"class":642},[637,22209,22150],{"class":2457},[637,22211,22212],{"class":683},"(svgPath",[637,22214,687],{"class":642},[637,22216,1226],{"class":642},[637,22218,22220,22223,22225,22227],{"class":22219,"line":745},[639,673],[637,22221,22222],{"class":646}," skipFills",[637,22224,1240],{"class":642},[637,22226,6746],{"class":4420},[637,22228,2511],{"class":642},[637,22230,22232,22235,22237,22239,22242,22244,22246,22248,22251,22253,22256],{"class":22231,"line":755},[639,673],[637,22233,22234],{"class":646}," fillMaterial",[637,22236,1240],{"class":642},[637,22238,680],{"class":642},[637,22240,22241],{"class":646}," transparent",[637,22243,1240],{"class":642},[637,22245,4421],{"class":4420},[637,22247,687],{"class":642},[637,22249,22250],{"class":646}," opacity",[637,22252,1240],{"class":642},[637,22254,22255],{"class":2524}," 0.8",[637,22257,17816],{"class":642},[637,22259,22261,22263],{"class":22260,"line":778},[639,673],[637,22262,2451],{"class":642},[637,22264,2471],{"class":683},[637,22266,22267,22269,22271],{"class":639,"line":790},[637,22268,732],{"class":642},[637,22270,647],{"class":646},[637,22272,669],{"class":642},[637,22274,22275],{"class":639,"line":800},[637,22276,742],{"emptyLinePlaceholder":594},[637,22278,22279,22281,22283],{"class":639,"line":805},[637,22280,643],{"class":642},[637,22282,750],{"class":646},[637,22284,669],{"class":642},[637,22286,22287,22289,22291,22293,22295,22297,22300,22302],{"class":639,"line":827},[637,22288,758],{"class":642},[637,22290,10062],{"class":646},[637,22292,2733],{"class":650},[637,22294,657],{"class":642},[637,22296,660],{"class":642},[637,22298,22299],{"class":663},"!isLoading",[637,22301,660],{"class":642},[637,22303,669],{"class":642},[637,22305,22306,22308],{"class":639,"line":631},[637,22307,781],{"class":642},[637,22309,5149],{"class":646},[637,22311,22312,22315,22317,22319,22322],{"class":639,"line":850},[637,22313,22314],{"class":650}," v-for",[637,22316,657],{"class":642},[637,22318,660],{"class":642},[637,22320,22321],{"class":663},"(layer, index) in layers",[637,22323,3154],{"class":642},[637,22325,22326,22329,22331,22333,22336],{"class":639,"line":861},[637,22327,22328],{"class":650}," :key",[637,22330,657],{"class":642},[637,22332,660],{"class":642},[637,22334,22335],{"class":663},"`layer-${index}`",[637,22337,3154],{"class":642},[637,22339,22340,22343,22345,22347,22350],{"class":639,"line":872},[637,22341,22342],{"class":650}," :geometry",[637,22344,657],{"class":642},[637,22346,660],{"class":642},[637,22348,22349],{"class":663},"layer.geometry",[637,22351,3154],{"class":642},[637,22353,22354,22357,22359,22361,22363],{"class":639,"line":882},[637,22355,22356],{"class":650}," :render-order",[637,22358,657],{"class":642},[637,22360,660],{"class":642},[637,22362,8019],{"class":663},[637,22364,3154],{"class":642},[637,22366,22367],{"class":639,"line":632},[637,22368,12412],{"class":642},[637,22370,22371,22373,22375,22377,22379,22381,22384,22386],{"class":639,"line":902},[637,22372,853],{"class":642},[637,22374,7493],{"class":646},[637,22376,10236],{"class":650},[637,22378,657],{"class":642},[637,22380,660],{"class":642},[637,22382,22383],{"class":663},"layer.material",[637,22385,660],{"class":642},[637,22387,787],{"class":642},[637,22389,22390,22392,22394],{"class":639,"line":912},[637,22391,895],{"class":642},[637,22393,856],{"class":646},[637,22395,669],{"class":642},[637,22397,22398,22400,22402],{"class":639,"line":2648},[637,22399,905],{"class":642},[637,22401,10062],{"class":646},[637,22403,669],{"class":642},[637,22405,22406,22408,22410],{"class":639,"line":2657},[637,22407,732],{"class":642},[637,22409,750],{"class":646},[637,22411,669],{"class":642},[626,22413,22415],{"className":628,"code":22414,"filename":17105,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333\">\n \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n \u003COrbitControls />\n \u003CTheModel />\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,22416,22417,22437,22455,22473,22487,22495,22499,22507,22525,22544,22552,22560,22568,22576,22584],{"__ignoreMap":576},[637,22418,22419,22421,22423,22425,22427,22429,22431,22433,22435],{"class":639,"line":577},[637,22420,643],{"class":642},[637,22422,647],{"class":646},[637,22424,651],{"class":650},[637,22426,654],{"class":650},[637,22428,657],{"class":642},[637,22430,660],{"class":642},[637,22432,664],{"class":663},[637,22434,660],{"class":642},[637,22436,669],{"class":642},[637,22438,22439,22441,22443,22445,22447,22449,22451,22453],{"class":639,"line":578},[637,22440,677],{"class":676},[637,22442,680],{"class":642},[637,22444,690],{"class":683},[637,22446,693],{"class":642},[637,22448,696],{"class":676},[637,22450,699],{"class":642},[637,22452,702],{"class":663},[637,22454,705],{"class":642},[637,22456,22457,22459,22461,22463,22465,22467,22469,22471],{"class":639,"line":708},[637,22458,677],{"class":676},[637,22460,680],{"class":642},[637,22462,715],{"class":683},[637,22464,693],{"class":642},[637,22466,696],{"class":676},[637,22468,699],{"class":642},[637,22470,724],{"class":663},[637,22472,705],{"class":642},[637,22474,22475,22477,22479,22481,22483,22485],{"class":639,"line":729},[637,22476,677],{"class":676},[637,22478,17170],{"class":683},[637,22480,8454],{"class":676},[637,22482,699],{"class":642},[637,22484,17177],{"class":663},[637,22486,705],{"class":642},[637,22488,22489,22491,22493],{"class":639,"line":739},[637,22490,732],{"class":642},[637,22492,647],{"class":646},[637,22494,669],{"class":642},[637,22496,22497],{"class":639,"line":745},[637,22498,742],{"emptyLinePlaceholder":594},[637,22500,22501,22503,22505],{"class":639,"line":755},[637,22502,643],{"class":642},[637,22504,750],{"class":646},[637,22506,669],{"class":642},[637,22508,22509,22511,22513,22515,22517,22519,22521,22523],{"class":639,"line":778},[637,22510,758],{"class":642},[637,22512,761],{"class":646},[637,22514,764],{"class":650},[637,22516,657],{"class":642},[637,22518,660],{"class":642},[637,22520,12959],{"class":663},[637,22522,660],{"class":642},[637,22524,669],{"class":642},[637,22526,22527,22529,22531,22533,22535,22537,22540,22542],{"class":639,"line":790},[637,22528,781],{"class":642},[637,22530,784],{"class":646},[637,22532,1508],{"class":650},[637,22534,657],{"class":642},[637,22536,660],{"class":642},[637,22538,22539],{"class":663},"[0, 2, 10]",[637,22541,660],{"class":642},[637,22543,787],{"class":642},[637,22545,22546,22548,22550],{"class":639,"line":800},[637,22547,781],{"class":642},[637,22549,795],{"class":646},[637,22551,787],{"class":642},[637,22553,22554,22556,22558],{"class":639,"line":805},[637,22555,781],{"class":642},[637,22557,17252],{"class":646},[637,22559,787],{"class":642},[637,22561,22562,22564,22566],{"class":639,"line":827},[637,22563,781],{"class":642},[637,22565,9702],{"class":646},[637,22567,787],{"class":642},[637,22569,22570,22572,22574],{"class":639,"line":631},[637,22571,781],{"class":642},[637,22573,9721],{"class":646},[637,22575,787],{"class":642},[637,22577,22578,22580,22582],{"class":639,"line":850},[637,22579,905],{"class":642},[637,22581,761],{"class":646},[637,22583,669],{"class":642},[637,22585,22586,22588,22590],{"class":639,"line":861},[637,22587,732],{"class":642},[637,22589,750],{"class":646},[637,22591,669],{"class":642},[614,22593,2799,22594,22596],{},[618,22595,157],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[2236,22598,22599,22602,22605,22608],{},[2239,22600,22601],{},"Manually control layer rendering",[2239,22603,22604],{},"Apply custom animations to individual layers",[2239,22606,22607],{},"Access geometry data programmatically",[2239,22609,22610],{},"Implement complex material logic",[4074,22612,22614],{"id":22613},"svg-data-sources","SVG Data Sources",[614,22616,22617],{},"The composable accepts both file paths and inline SVG strings:",[626,22619,22621],{"className":1208,"code":22620,"language":664,"meta":576,"style":576},"import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[618,22622,22623,22641,22645,22650,22676,22680,22685,22700,22705,22713],{"__ignoreMap":576},[637,22624,22625,22627,22629,22631,22633,22635,22637,22639],{"class":639,"line":577},[637,22626,677],{"class":676},[637,22628,680],{"class":642},[637,22630,22150],{"class":683},[637,22632,693],{"class":642},[637,22634,696],{"class":676},[637,22636,699],{"class":642},[637,22638,702],{"class":663},[637,22640,705],{"class":642},[637,22642,22643],{"class":639,"line":578},[637,22644,742],{"emptyLinePlaceholder":594},[637,22646,22647],{"class":639,"line":708},[637,22648,22649],{"class":1231},"// From file\n",[637,22651,22652,22654,22656,22659,22661,22663,22665,22667,22669,22672,22674],{"class":639,"line":729},[637,22653,2438],{"class":650},[637,22655,680],{"class":642},[637,22657,22658],{"class":683}," layers ",[637,22660,2451],{"class":642},[637,22662,2454],{"class":642},[637,22664,22150],{"class":2457},[637,22666,2460],{"class":683},[637,22668,2463],{"class":642},[637,22670,22671],{"class":663},"/path/to/file.svg",[637,22673,2463],{"class":642},[637,22675,2471],{"class":683},[637,22677,22678],{"class":639,"line":739},[637,22679,742],{"emptyLinePlaceholder":594},[637,22681,22682],{"class":639,"line":745},[637,22683,22684],{"class":1231},"// Inline SVG string\n",[637,22686,22687,22689,22692,22694,22697],{"class":639,"line":755},[637,22688,2438],{"class":650},[637,22690,22691],{"class":683}," svgString ",[637,22693,657],{"class":642},[637,22695,22696],{"class":642}," `",[637,22698,22699],{"class":663},"\u003Csvg viewBox=\"0 0 100 100\">\n",[637,22701,22702],{"class":639,"line":778},[637,22703,22704],{"class":663}," \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[637,22706,22707,22710],{"class":639,"line":790},[637,22708,22709],{"class":663},"\u003C/svg>",[637,22711,22712],{"class":642},"`\n",[637,22714,22715,22717,22719,22721,22723,22725,22727],{"class":639,"line":800},[637,22716,2438],{"class":650},[637,22718,680],{"class":642},[637,22720,22658],{"class":683},[637,22722,2451],{"class":642},[637,22724,2454],{"class":642},[637,22726,22150],{"class":2457},[637,22728,22729],{"class":683},"(svgString)\n",[4074,22731,17418],{"id":17417},[927,22733,22734,22744],{},[930,22735,22736],{},[933,22737,22738,22740,22742],{},[936,22739,8110],{"align":997},[936,22741,5990],{},[936,22743,941],{},[946,22745,22746,22760,22775,22788],{},[933,22747,22748,22752,22757],{},[951,22749,22750],{"align":997},[1692,22751,14805],{},[951,22753,22754],{},[618,22755,22756],{},"SVGResult",[951,22758,22759],{},"The loaded SVG state from SVGLoader",[933,22761,22762,22767,22772],{},[951,22763,22764],{"align":997},[1692,22765,22766],{},"layers",[951,22768,22769],{},[618,22770,22771],{},"SVGLayer[]",[951,22773,22774],{},"Computed array of processed geometries and materials",[933,22776,22777,22781,22785],{},[951,22778,22779],{"align":997},[1692,22780,17484],{},[951,22782,22783],{},[618,22784,17582],{},[951,22786,22787],{},"Whether the SVG is currently loading",[933,22789,22790,22795,22799],{},[951,22791,22792],{"align":997},[1692,22793,22794],{},"dispose",[951,22796,22797],{},[618,22798,6042],{},[951,22800,22801],{},"Function to dispose of all geometries",[4074,22803,14044],{"id":17555},[927,22805,22806,22818],{},[930,22807,22808],{},[933,22809,22810,22812,22814,22816],{},[936,22811,8110],{"align":997},[936,22813,5990],{},[936,22815,944],{},[936,22817,941],{},[946,22819,22820,22838,22856,22875,22893],{},[933,22821,22822,22827,22831,22835],{},[951,22823,22824],{"align":997},[1692,22825,22826],{},"skipStrokes",[951,22828,22829],{},[618,22830,17582],{},[951,22832,22833],{},[618,22834,971],{},[951,22836,22837],{},"Whether to skip rendering strokes",[933,22839,22840,22845,22849,22853],{},[951,22841,22842],{"align":997},[1692,22843,22844],{},"skipFills",[951,22846,22847],{},[618,22848,17582],{},[951,22850,22851],{},[618,22852,971],{},[951,22854,22855],{},"Whether to skip rendering fills",[933,22857,22858,22863,22868,22872],{},[951,22859,22860],{"align":997},[1692,22861,22862],{},"fillMaterial",[951,22864,22865],{},[618,22866,22867],{},"MeshBasicMaterialParameters",[951,22869,22870],{},[618,22871,6146],{},[951,22873,22874],{},"Material properties for fill layers",[933,22876,22877,22882,22886,22890],{},[951,22878,22879],{"align":997},[1692,22880,22881],{},"strokeMaterial",[951,22883,22884],{},[618,22885,22867],{},[951,22887,22888],{},[618,22889,6146],{},[951,22891,22892],{},"Material properties for stroke layers",[933,22894,22895,22899,22904,22909],{},[951,22896,22897],{"align":997},[1692,22898,13105],{},[951,22900,22901],{},[618,22902,22903],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[951,22905,22906],{},[618,22907,22908],{},"'renderOrder'",[951,22910,22911],{},"How layers should be rendered in 3D space",[4074,22913,22915],{"id":22914},"working-with-layers","Working with Layers",[614,22917,2799,22918,22920],{},[618,22919,22766],{}," computed property returns an array of processed SVG elements, each containing:",[626,22922,22924],{"className":1208,"code":22923,"language":664,"meta":576,"style":576},"interface SVGLayer {\n geometry: BufferGeometry // Three.js geometry for the layer\n material: MeshBasicMaterialParameters // Material properties\n isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[618,22925,22926,22935,22948,22961,22973],{"__ignoreMap":576},[637,22927,22928,22930,22933],{"class":639,"line":577},[637,22929,5346],{"class":650},[637,22931,22932],{"class":1222}," SVGLayer",[637,22934,1226],{"class":642},[637,22936,22937,22940,22942,22945],{"class":639,"line":578},[637,22938,22939],{"class":646}," geometry",[637,22941,1240],{"class":642},[637,22943,22944],{"class":1222}," BufferGeometry",[637,22946,22947],{"class":1231}," // Three.js geometry for the layer\n",[637,22949,22950,22953,22955,22958],{"class":639,"line":708},[637,22951,22952],{"class":646}," material",[637,22954,1240],{"class":642},[637,22956,22957],{"class":1222}," MeshBasicMaterialParameters",[637,22959,22960],{"class":1231}," // Material properties\n",[637,22962,22963,22966,22968,22970],{"class":639,"line":729},[637,22964,22965],{"class":646}," isStroke",[637,22967,1240],{"class":642},[637,22969,5477],{"class":1222},[637,22971,22972],{"class":1231}," // Whether this layer is a stroke or fill\n",[637,22974,22975],{"class":639,"line":739},[637,22976,1347],{"class":642},[22978,22979,22981],"h4",{"id":22980},"accessing-individual-layers","Accessing Individual Layers",[626,22983,22986],{"className":628,"code":22984,"highlights":22985,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CTresMesh\n v-for=\"(layer, index) in layers\"\n :key=\"index\"\n :geometry=\"layer.geometry\"\n >\n \u003CTresMeshBasicMaterial\n v-bind=\"layer.material\"\n :color=\"getFillColor(layer, index)\"\n />\n \u003C/TresMesh>\n \u003C/TresGroup>\n\u003C/template>\n",[578,729],[618,22987,22988,23008,23027,23031,23057,23061,23066,23099,23147,23151,23159,23163,23171,23179,23185,23197,23209,23221,23225,23232,23245,23259,23263,23271,23279],{"__ignoreMap":576},[637,22989,22990,22992,22994,22996,22998,23000,23002,23004,23006],{"class":639,"line":577},[637,22991,643],{"class":642},[637,22993,647],{"class":646},[637,22995,651],{"class":650},[637,22997,654],{"class":650},[637,22999,657],{"class":642},[637,23001,660],{"class":642},[637,23003,664],{"class":663},[637,23005,660],{"class":642},[637,23007,669],{"class":642},[637,23009,23011,23013,23015,23017,23019,23021,23023,23025],{"class":23010,"line":578},[639,673],[637,23012,677],{"class":676},[637,23014,680],{"class":642},[637,23016,22150],{"class":683},[637,23018,693],{"class":642},[637,23020,696],{"class":676},[637,23022,699],{"class":642},[637,23024,702],{"class":663},[637,23026,705],{"class":642},[637,23028,23029],{"class":639,"line":708},[637,23030,742],{"emptyLinePlaceholder":594},[637,23032,23034,23036,23038,23040,23042,23044,23046,23048,23050,23053,23055],{"class":23033,"line":729},[639,673],[637,23035,2438],{"class":650},[637,23037,680],{"class":642},[637,23039,22658],{"class":683},[637,23041,2451],{"class":642},[637,23043,2454],{"class":642},[637,23045,22150],{"class":2457},[637,23047,2460],{"class":683},[637,23049,2463],{"class":642},[637,23051,23052],{"class":663},"/complex-icon.svg",[637,23054,2463],{"class":642},[637,23056,2471],{"class":683},[637,23058,23059],{"class":639,"line":739},[637,23060,742],{"emptyLinePlaceholder":594},[637,23062,23063],{"class":639,"line":745},[637,23064,23065],{"class":1231},"// Apply different materials based on layer type\n",[637,23067,23068,23070,23073,23075,23077,23080,23082,23084,23086,23089,23091,23093,23095,23097],{"class":639,"line":755},[637,23069,2438],{"class":650},[637,23071,23072],{"class":683}," getFillColor ",[637,23074,657],{"class":642},[637,23076,3097],{"class":642},[637,23078,23079],{"class":6859},"layer",[637,23081,1240],{"class":642},[637,23083,22932],{"class":1222},[637,23085,687],{"class":642},[637,23087,23088],{"class":6859}," index",[637,23090,1240],{"class":642},[637,23092,5380],{"class":1222},[637,23094,3363],{"class":642},[637,23096,3700],{"class":650},[637,23098,1226],{"class":642},[637,23100,23101,23104,23107,23109,23112,23115,23117,23120,23122,23124,23126,23129,23132,23135,23138,23140,23142,23145],{"class":639,"line":778},[637,23102,23103],{"class":676}," return",[637,23105,23106],{"class":683}," layer",[637,23108,1146],{"class":642},[637,23110,23111],{"class":683},"isStroke",[637,23113,23114],{"class":642}," ?",[637,23116,699],{"class":642},[637,23118,23119],{"class":663},"#000000",[637,23121,2463],{"class":642},[637,23123,3052],{"class":642},[637,23125,22696],{"class":642},[637,23127,23128],{"class":663},"hsl(",[637,23130,23131],{"class":642},"${",[637,23133,23134],{"class":683},"index ",[637,23136,23137],{"class":642},"*",[637,23139,8493],{"class":2524},[637,23141,2451],{"class":642},[637,23143,23144],{"class":663},", 70%, 50%)",[637,23146,22712],{"class":642},[637,23148,23149],{"class":639,"line":790},[637,23150,1347],{"class":642},[637,23152,23153,23155,23157],{"class":639,"line":800},[637,23154,732],{"class":642},[637,23156,647],{"class":646},[637,23158,669],{"class":642},[637,23160,23161],{"class":639,"line":805},[637,23162,742],{"emptyLinePlaceholder":594},[637,23164,23165,23167,23169],{"class":639,"line":827},[637,23166,643],{"class":642},[637,23168,750],{"class":646},[637,23170,669],{"class":642},[637,23172,23173,23175,23177],{"class":639,"line":631},[637,23174,758],{"class":642},[637,23176,10062],{"class":646},[637,23178,669],{"class":642},[637,23180,23181,23183],{"class":639,"line":850},[637,23182,781],{"class":642},[637,23184,5149],{"class":646},[637,23186,23187,23189,23191,23193,23195],{"class":639,"line":861},[637,23188,22314],{"class":650},[637,23190,657],{"class":642},[637,23192,660],{"class":642},[637,23194,22321],{"class":663},[637,23196,3154],{"class":642},[637,23198,23199,23201,23203,23205,23207],{"class":639,"line":872},[637,23200,22328],{"class":650},[637,23202,657],{"class":642},[637,23204,660],{"class":642},[637,23206,8019],{"class":663},[637,23208,3154],{"class":642},[637,23210,23211,23213,23215,23217,23219],{"class":639,"line":882},[637,23212,22342],{"class":650},[637,23214,657],{"class":642},[637,23216,660],{"class":642},[637,23218,22349],{"class":663},[637,23220,3154],{"class":642},[637,23222,23223],{"class":639,"line":632},[637,23224,12412],{"class":642},[637,23226,23227,23229],{"class":639,"line":902},[637,23228,853],{"class":642},[637,23230,23231],{"class":646},"TresMeshBasicMaterial\n",[637,23233,23234,23237,23239,23241,23243],{"class":639,"line":912},[637,23235,23236],{"class":650}," v-bind",[637,23238,657],{"class":642},[637,23240,660],{"class":642},[637,23242,22383],{"class":663},[637,23244,3154],{"class":642},[637,23246,23247,23250,23252,23254,23257],{"class":639,"line":2648},[637,23248,23249],{"class":650}," :color",[637,23251,657],{"class":642},[637,23253,660],{"class":642},[637,23255,23256],{"class":663},"getFillColor(layer, index)",[637,23258,3154],{"class":642},[637,23260,23261],{"class":639,"line":2657},[637,23262,8054],{"class":642},[637,23264,23265,23267,23269],{"class":639,"line":2677},[637,23266,895],{"class":642},[637,23268,856],{"class":646},[637,23270,669],{"class":642},[637,23272,23273,23275,23277],{"class":639,"line":2686},[637,23274,905],{"class":642},[637,23276,10062],{"class":646},[637,23278,669],{"class":642},[637,23280,23281,23283,23285],{"class":639,"line":2695},[637,23282,732],{"class":642},[637,23284,750],{"class":646},[637,23286,669],{"class":642},[4074,23288,23290],{"id":23289},"depth-handling","Depth Handling",[614,23292,2799,23293,23295],{},[618,23294,13105],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[22978,23297,23299,23301],{"id":23298},"renderorder-default",[618,23300,22908],{}," (Default)",[614,23303,23304],{},[1692,23305,23306],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[614,23308,23309,23310,23312],{},"This is the default ",[618,23311,13105],{}," option.",[614,23314,23315,23316,2273,23318,23320,23321,23328],{},"This value sets the materials' ",[618,23317,10433],{},[618,23319,971],{}," and increments the mesh layers ",[1140,23322,23325],{"href":23323,"rel":23324},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1144],[618,23326,23327],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[614,23330,23331,23334],{},[1692,23332,23333],{},"Disadvantage",": Scene objects may render out of order.",[614,23336,23337,23338,23343,23344,23349],{},"SVG layers with higher ",[1140,23339,23341],{"href":23323,"rel":23340},[1144],[618,23342,23327],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1140,23345,23347],{"href":23323,"rel":23346},[1144],[618,23348,23327],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[626,23351,23353],{"className":1208,"code":23352,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[618,23354,23355],{"__ignoreMap":576},[637,23356,23357,23359,23361,23363,23365,23367,23369,23371,23373,23376,23378,23380,23382,23385,23387,23389,23391,23393,23395],{"class":639,"line":577},[637,23358,2438],{"class":650},[637,23360,680],{"class":642},[637,23362,22658],{"class":683},[637,23364,2451],{"class":642},[637,23366,2454],{"class":642},[637,23368,22150],{"class":2457},[637,23370,2460],{"class":683},[637,23372,2463],{"class":642},[637,23374,23375],{"class":663},"/icon.svg",[637,23377,2463],{"class":642},[637,23379,687],{"class":642},[637,23381,680],{"class":642},[637,23383,23384],{"class":646}," depth",[637,23386,1240],{"class":642},[637,23388,699],{"class":642},[637,23390,23327],{"class":663},[637,23392,2463],{"class":642},[637,23394,693],{"class":642},[637,23396,2471],{"class":683},[22978,23398,23399],{"id":23399},"flat",[614,23401,23402],{},[1692,23403,23404],{},"Use case: simple SVGs",[614,23406,23407,23408,2273,23414,1146],{},"This option sets the materials ",[1140,23409,23412],{"href":23410,"rel":23411},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1144],[618,23413,10433],{},[618,23415,971],{},[614,23417,23418,23420],{},[1692,23419,23333],{},": SVG layers may render out of order.",[614,23422,23423],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[626,23425,23427],{"className":1208,"code":23426,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[618,23428,23429],{"__ignoreMap":576},[637,23430,23431,23433,23435,23437,23439,23441,23443,23445,23447,23449,23451,23453,23455,23457,23459,23461,23463,23465,23467],{"class":639,"line":577},[637,23432,2438],{"class":650},[637,23434,680],{"class":642},[637,23436,22658],{"class":683},[637,23438,2451],{"class":642},[637,23440,2454],{"class":642},[637,23442,22150],{"class":2457},[637,23444,2460],{"class":683},[637,23446,2463],{"class":642},[637,23448,23375],{"class":663},[637,23450,2463],{"class":642},[637,23452,687],{"class":642},[637,23454,680],{"class":642},[637,23456,23384],{"class":646},[637,23458,1240],{"class":642},[637,23460,699],{"class":642},[637,23462,23399],{"class":663},[637,23464,2463],{"class":642},[637,23466,693],{"class":642},[637,23468,2471],{"class":683},[22978,23470,23472],{"id":23471},"offsetz","offsetZ",[614,23474,23475],{},[1692,23476,23477],{},"Use case: unscaled SVGs seen from the front",[614,23479,23480],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[614,23482,23483,23485],{},[1692,23484,23333],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[614,23487,23488,23489,23494],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1140,23490,23493],{"href":23491,"rel":23492},"https://en.wikipedia.org/wiki/Z-fighting",[1144],"z-fight",", particularly if the SVG is scaled down.",[626,23496,23498],{"className":1208,"code":23497,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[618,23499,23500],{"__ignoreMap":576},[637,23501,23502,23504,23506,23508,23510,23512,23514,23516,23518,23520,23522,23524,23526,23528,23530,23532,23534,23536,23538],{"class":639,"line":577},[637,23503,2438],{"class":650},[637,23505,680],{"class":642},[637,23507,22658],{"class":683},[637,23509,2451],{"class":642},[637,23511,2454],{"class":642},[637,23513,22150],{"class":2457},[637,23515,2460],{"class":683},[637,23517,2463],{"class":642},[637,23519,23375],{"class":663},[637,23521,2463],{"class":642},[637,23523,687],{"class":642},[637,23525,680],{"class":642},[637,23527,23384],{"class":646},[637,23529,1240],{"class":642},[637,23531,699],{"class":642},[637,23533,23472],{"class":663},[637,23535,2463],{"class":642},[637,23537,693],{"class":642},[637,23539,2471],{"class":683},[22978,23541,23542],{"id":5375},[618,23543,5375],{},[614,23545,23546],{},[1692,23547,23548],{},"Use case: SVGs seen from the front",[614,23550,23551,23552,23555,23556,23560],{},"This is the same as ",[618,23553,23554],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1140,23557,23559],{"href":23491,"rel":23558},[1144],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[614,23562,23563,23565],{},[1692,23564,23333],{},": \"Bottom\" of the \"stack\" is visible.",[626,23567,23569],{"className":1208,"code":23568,"language":664,"meta":576,"style":576},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[618,23570,23571],{"__ignoreMap":576},[637,23572,23573,23575,23577,23579,23581,23583,23585,23587,23589,23591,23593,23595,23597,23599,23601,23604,23606],{"class":639,"line":577},[637,23574,2438],{"class":650},[637,23576,680],{"class":642},[637,23578,22658],{"class":683},[637,23580,2451],{"class":642},[637,23582,2454],{"class":642},[637,23584,22150],{"class":2457},[637,23586,2460],{"class":683},[637,23588,2463],{"class":642},[637,23590,23375],{"class":663},[637,23592,2463],{"class":642},[637,23594,687],{"class":642},[637,23596,680],{"class":642},[637,23598,23384],{"class":646},[637,23600,1240],{"class":642},[637,23602,23603],{"class":2524}," 0.1",[637,23605,693],{"class":642},[637,23607,2471],{"class":683},[4074,23609,23611],{"id":23610},"memory-management","Memory Management",[614,23613,23614],{},"Always dispose of geometries when the component unmounts:",[626,23616,23618],{"className":628,"code":23617,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n dispose()\n})\n\u003C/script>\n",[618,23619,23620,23640,23658,23677,23681,23705,23709,23722,23729,23735],{"__ignoreMap":576},[637,23621,23622,23624,23626,23628,23630,23632,23634,23636,23638],{"class":639,"line":577},[637,23623,643],{"class":642},[637,23625,647],{"class":646},[637,23627,651],{"class":650},[637,23629,654],{"class":650},[637,23631,657],{"class":642},[637,23633,660],{"class":642},[637,23635,664],{"class":663},[637,23637,660],{"class":642},[637,23639,669],{"class":642},[637,23641,23642,23644,23646,23648,23650,23652,23654,23656],{"class":639,"line":578},[637,23643,677],{"class":676},[637,23645,680],{"class":642},[637,23647,22150],{"class":683},[637,23649,693],{"class":642},[637,23651,696],{"class":676},[637,23653,699],{"class":642},[637,23655,702],{"class":663},[637,23657,705],{"class":642},[637,23659,23660,23662,23664,23667,23669,23671,23673,23675],{"class":639,"line":708},[637,23661,677],{"class":676},[637,23663,680],{"class":642},[637,23665,23666],{"class":683}," onUnmounted",[637,23668,693],{"class":642},[637,23670,696],{"class":676},[637,23672,699],{"class":642},[637,23674,633],{"class":663},[637,23676,705],{"class":642},[637,23678,23679],{"class":639,"line":729},[637,23680,742],{"emptyLinePlaceholder":594},[637,23682,23683,23685,23687,23689,23691,23693,23695,23697,23699,23701,23703],{"class":639,"line":739},[637,23684,2438],{"class":650},[637,23686,680],{"class":642},[637,23688,22203],{"class":683},[637,23690,2451],{"class":642},[637,23692,2454],{"class":642},[637,23694,22150],{"class":2457},[637,23696,2460],{"class":683},[637,23698,2463],{"class":642},[637,23700,23375],{"class":663},[637,23702,2463],{"class":642},[637,23704,2471],{"class":683},[637,23706,23707],{"class":639,"line":745},[637,23708,742],{"emptyLinePlaceholder":594},[637,23710,23711,23714,23716,23718,23720],{"class":639,"line":755},[637,23712,23713],{"class":2457},"onUnmounted",[637,23715,2460],{"class":683},[637,23717,3697],{"class":642},[637,23719,3700],{"class":650},[637,23721,1226],{"class":642},[637,23723,23724,23727],{"class":639,"line":778},[637,23725,23726],{"class":2457}," dispose",[637,23728,6556],{"class":646},[637,23730,23731,23733],{"class":639,"line":790},[637,23732,2451],{"class":642},[637,23734,2471],{"class":683},[637,23736,23737,23739,23741],{"class":639,"line":800},[637,23738,732],{"class":642},[637,23740,647],{"class":646},[637,23742,669],{"class":642},[4074,23744,23746],{"id":23745},"advanced-usage","Advanced Usage",[22978,23748,23750],{"id":23749},"conditional-layer-rendering","Conditional Layer Rendering",[626,23752,23754],{"className":628,"code":23753,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n showDetails.value\n ? layers.value\n : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CTresMesh\n v-for=\"(layer, index) in visibleLayers\"\n :key=\"index\"\n :geometry=\"layer.geometry\"\n >\n \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n \u003C/TresMesh>\n \u003C/TresGroup>\n\u003C/template>\n",[618,23755,23756,23776,23794,23812,23816,23833,23858,23862,23880,23890,23901,23933,23937,23945,23949,23957,23965,23971,23984,23996,24008,24012,24030,24038,24046],{"__ignoreMap":576},[637,23757,23758,23760,23762,23764,23766,23768,23770,23772,23774],{"class":639,"line":577},[637,23759,643],{"class":642},[637,23761,647],{"class":646},[637,23763,651],{"class":650},[637,23765,654],{"class":650},[637,23767,657],{"class":642},[637,23769,660],{"class":642},[637,23771,664],{"class":663},[637,23773,660],{"class":642},[637,23775,669],{"class":642},[637,23777,23778,23780,23782,23784,23786,23788,23790,23792],{"class":639,"line":578},[637,23779,677],{"class":676},[637,23781,680],{"class":642},[637,23783,22150],{"class":683},[637,23785,693],{"class":642},[637,23787,696],{"class":676},[637,23789,699],{"class":642},[637,23791,702],{"class":663},[637,23793,705],{"class":642},[637,23795,23796,23798,23800,23802,23804,23806,23808,23810],{"class":639,"line":708},[637,23797,677],{"class":676},[637,23799,680],{"class":642},[637,23801,3512],{"class":683},[637,23803,693],{"class":642},[637,23805,696],{"class":676},[637,23807,699],{"class":642},[637,23809,633],{"class":663},[637,23811,705],{"class":642},[637,23813,23814],{"class":639,"line":729},[637,23815,742],{"emptyLinePlaceholder":594},[637,23817,23818,23820,23823,23825,23827,23829,23831],{"class":639,"line":739},[637,23819,2438],{"class":650},[637,23821,23822],{"class":683}," showDetails ",[637,23824,657],{"class":642},[637,23826,3895],{"class":2457},[637,23828,2460],{"class":683},[637,23830,961],{"class":4420},[637,23832,2471],{"class":683},[637,23834,23835,23837,23839,23841,23843,23845,23847,23849,23851,23854,23856],{"class":639,"line":745},[637,23836,2438],{"class":650},[637,23838,680],{"class":642},[637,23840,22658],{"class":683},[637,23842,2451],{"class":642},[637,23844,2454],{"class":642},[637,23846,22150],{"class":2457},[637,23848,2460],{"class":683},[637,23850,2463],{"class":642},[637,23852,23853],{"class":663},"/detailed-icon.svg",[637,23855,2463],{"class":642},[637,23857,2471],{"class":683},[637,23859,23860],{"class":639,"line":755},[637,23861,742],{"emptyLinePlaceholder":594},[637,23863,23864,23866,23869,23871,23873,23875,23877],{"class":639,"line":778},[637,23865,2438],{"class":650},[637,23867,23868],{"class":683}," visibleLayers ",[637,23870,657],{"class":642},[637,23872,3512],{"class":2457},[637,23874,2460],{"class":683},[637,23876,3697],{"class":642},[637,23878,23879],{"class":650}," =>\n",[637,23881,23882,23885,23887],{"class":639,"line":790},[637,23883,23884],{"class":683}," showDetails",[637,23886,1146],{"class":642},[637,23888,23889],{"class":683},"value\n",[637,23891,23892,23895,23897,23899],{"class":639,"line":800},[637,23893,23894],{"class":642}," ?",[637,23896,22194],{"class":683},[637,23898,1146],{"class":642},[637,23900,23889],{"class":683},[637,23902,23903,23906,23908,23910,23912,23914,23917,23919,23921,23923,23926,23928,23930],{"class":639,"line":805},[637,23904,23905],{"class":642}," :",[637,23907,22194],{"class":683},[637,23909,1146],{"class":642},[637,23911,3708],{"class":683},[637,23913,1146],{"class":642},[637,23915,23916],{"class":2457},"filter",[637,23918,2460],{"class":683},[637,23920,23079],{"class":6859},[637,23922,3700],{"class":650},[637,23924,23925],{"class":642}," !",[637,23927,23079],{"class":683},[637,23929,1146],{"class":642},[637,23931,23932],{"class":683},"isStroke)\n",[637,23934,23935],{"class":639,"line":827},[637,23936,2471],{"class":683},[637,23938,23939,23941,23943],{"class":639,"line":631},[637,23940,732],{"class":642},[637,23942,647],{"class":646},[637,23944,669],{"class":642},[637,23946,23947],{"class":639,"line":850},[637,23948,742],{"emptyLinePlaceholder":594},[637,23950,23951,23953,23955],{"class":639,"line":861},[637,23952,643],{"class":642},[637,23954,750],{"class":646},[637,23956,669],{"class":642},[637,23958,23959,23961,23963],{"class":639,"line":872},[637,23960,758],{"class":642},[637,23962,10062],{"class":646},[637,23964,669],{"class":642},[637,23966,23967,23969],{"class":639,"line":882},[637,23968,781],{"class":642},[637,23970,5149],{"class":646},[637,23972,23973,23975,23977,23979,23982],{"class":639,"line":632},[637,23974,22314],{"class":650},[637,23976,657],{"class":642},[637,23978,660],{"class":642},[637,23980,23981],{"class":663},"(layer, index) in visibleLayers",[637,23983,3154],{"class":642},[637,23985,23986,23988,23990,23992,23994],{"class":639,"line":902},[637,23987,22328],{"class":650},[637,23989,657],{"class":642},[637,23991,660],{"class":642},[637,23993,8019],{"class":663},[637,23995,3154],{"class":642},[637,23997,23998,24000,24002,24004,24006],{"class":639,"line":912},[637,23999,22342],{"class":650},[637,24001,657],{"class":642},[637,24003,660],{"class":642},[637,24005,22349],{"class":663},[637,24007,3154],{"class":642},[637,24009,24010],{"class":639,"line":2648},[637,24011,12412],{"class":642},[637,24013,24014,24016,24018,24020,24022,24024,24026,24028],{"class":639,"line":2657},[637,24015,853],{"class":642},[637,24017,7493],{"class":646},[637,24019,10236],{"class":650},[637,24021,657],{"class":642},[637,24023,660],{"class":642},[637,24025,22383],{"class":663},[637,24027,660],{"class":642},[637,24029,787],{"class":642},[637,24031,24032,24034,24036],{"class":639,"line":2677},[637,24033,895],{"class":642},[637,24035,856],{"class":646},[637,24037,669],{"class":642},[637,24039,24040,24042,24044],{"class":639,"line":2686},[637,24041,905],{"class":642},[637,24043,10062],{"class":646},[637,24045,669],{"class":642},[637,24047,24048,24050,24052],{"class":639,"line":2695},[637,24049,732],{"class":642},[637,24051,750],{"class":646},[637,24053,669],{"class":642},[22978,24055,24057],{"id":24056},"material-customization-per-layer","Material Customization per Layer",[626,24059,24061],{"className":628,"code":24060,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n fillMaterial: {\n transparent: true,\n opacity: 0.9\n },\n strokeMaterial: {\n transparent: true,\n opacity: 1.0,\n color: '#000000'\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CTresMesh\n v-for=\"(layer, index) in layers\"\n :key=\"index\"\n :geometry=\"layer.geometry\"\n >\n \u003CTresMeshBasicMaterial\n v-bind=\"layer.material\"\n :wireframe=\"layer.isStroke\"\n />\n \u003C/TresMesh>\n \u003C/TresGroup>\n\u003C/template>\n",[618,24062,24063,24083,24101,24105,24132,24140,24151,24161,24165,24174,24184,24195,24208,24212,24218,24226,24230,24238,24246,24252,24264,24276,24288,24292,24298,24310,24324,24328,24336,24344],{"__ignoreMap":576},[637,24064,24065,24067,24069,24071,24073,24075,24077,24079,24081],{"class":639,"line":577},[637,24066,643],{"class":642},[637,24068,647],{"class":646},[637,24070,651],{"class":650},[637,24072,654],{"class":650},[637,24074,657],{"class":642},[637,24076,660],{"class":642},[637,24078,664],{"class":663},[637,24080,660],{"class":642},[637,24082,669],{"class":642},[637,24084,24085,24087,24089,24091,24093,24095,24097,24099],{"class":639,"line":578},[637,24086,677],{"class":676},[637,24088,680],{"class":642},[637,24090,22150],{"class":683},[637,24092,693],{"class":642},[637,24094,696],{"class":676},[637,24096,699],{"class":642},[637,24098,702],{"class":663},[637,24100,705],{"class":642},[637,24102,24103],{"class":639,"line":708},[637,24104,742],{"emptyLinePlaceholder":594},[637,24106,24107,24109,24111,24113,24115,24117,24119,24121,24123,24126,24128,24130],{"class":639,"line":729},[637,24108,2438],{"class":650},[637,24110,680],{"class":642},[637,24112,22658],{"class":683},[637,24114,2451],{"class":642},[637,24116,2454],{"class":642},[637,24118,22150],{"class":2457},[637,24120,2460],{"class":683},[637,24122,2463],{"class":642},[637,24124,24125],{"class":663},"/logo.svg",[637,24127,2463],{"class":642},[637,24129,687],{"class":642},[637,24131,1226],{"class":642},[637,24133,24134,24136,24138],{"class":639,"line":739},[637,24135,22234],{"class":646},[637,24137,1240],{"class":642},[637,24139,1226],{"class":642},[637,24141,24142,24145,24147,24149],{"class":639,"line":745},[637,24143,24144],{"class":646}," transparent",[637,24146,1240],{"class":642},[637,24148,4421],{"class":4420},[637,24150,2511],{"class":642},[637,24152,24153,24156,24158],{"class":639,"line":755},[637,24154,24155],{"class":646}," opacity",[637,24157,1240],{"class":642},[637,24159,24160],{"class":2524}," 0.9\n",[637,24162,24163],{"class":639,"line":778},[637,24164,2620],{"class":642},[637,24166,24167,24170,24172],{"class":639,"line":790},[637,24168,24169],{"class":646}," strokeMaterial",[637,24171,1240],{"class":642},[637,24173,1226],{"class":642},[637,24175,24176,24178,24180,24182],{"class":639,"line":800},[637,24177,24144],{"class":646},[637,24179,1240],{"class":642},[637,24181,4421],{"class":4420},[637,24183,2511],{"class":642},[637,24185,24186,24188,24190,24193],{"class":639,"line":805},[637,24187,24155],{"class":646},[637,24189,1240],{"class":642},[637,24191,24192],{"class":2524}," 1.0",[637,24194,2511],{"class":642},[637,24196,24197,24200,24202,24204,24206],{"class":639,"line":827},[637,24198,24199],{"class":646}," color",[637,24201,1240],{"class":642},[637,24203,699],{"class":642},[637,24205,23119],{"class":663},[637,24207,705],{"class":642},[637,24209,24210],{"class":639,"line":631},[637,24211,7878],{"class":642},[637,24213,24214,24216],{"class":639,"line":850},[637,24215,2451],{"class":642},[637,24217,2471],{"class":683},[637,24219,24220,24222,24224],{"class":639,"line":861},[637,24221,732],{"class":642},[637,24223,647],{"class":646},[637,24225,669],{"class":642},[637,24227,24228],{"class":639,"line":872},[637,24229,742],{"emptyLinePlaceholder":594},[637,24231,24232,24234,24236],{"class":639,"line":882},[637,24233,643],{"class":642},[637,24235,750],{"class":646},[637,24237,669],{"class":642},[637,24239,24240,24242,24244],{"class":639,"line":632},[637,24241,758],{"class":642},[637,24243,10062],{"class":646},[637,24245,669],{"class":642},[637,24247,24248,24250],{"class":639,"line":902},[637,24249,781],{"class":642},[637,24251,5149],{"class":646},[637,24253,24254,24256,24258,24260,24262],{"class":639,"line":912},[637,24255,22314],{"class":650},[637,24257,657],{"class":642},[637,24259,660],{"class":642},[637,24261,22321],{"class":663},[637,24263,3154],{"class":642},[637,24265,24266,24268,24270,24272,24274],{"class":639,"line":2648},[637,24267,22328],{"class":650},[637,24269,657],{"class":642},[637,24271,660],{"class":642},[637,24273,8019],{"class":663},[637,24275,3154],{"class":642},[637,24277,24278,24280,24282,24284,24286],{"class":639,"line":2657},[637,24279,22342],{"class":650},[637,24281,657],{"class":642},[637,24283,660],{"class":642},[637,24285,22349],{"class":663},[637,24287,3154],{"class":642},[637,24289,24290],{"class":639,"line":2677},[637,24291,12412],{"class":642},[637,24293,24294,24296],{"class":639,"line":2686},[637,24295,853],{"class":642},[637,24297,23231],{"class":646},[637,24299,24300,24302,24304,24306,24308],{"class":639,"line":2695},[637,24301,23236],{"class":650},[637,24303,657],{"class":642},[637,24305,660],{"class":642},[637,24307,22383],{"class":663},[637,24309,3154],{"class":642},[637,24311,24312,24315,24317,24319,24322],{"class":639,"line":2704},[637,24313,24314],{"class":650}," :wireframe",[637,24316,657],{"class":642},[637,24318,660],{"class":642},[637,24320,24321],{"class":663},"layer.isStroke",[637,24323,3154],{"class":642},[637,24325,24326],{"class":639,"line":2726},[637,24327,8054],{"class":642},[637,24329,24330,24332,24334],{"class":639,"line":2770},[637,24331,895],{"class":642},[637,24333,856],{"class":646},[637,24335,669],{"class":642},[637,24337,24338,24340,24342],{"class":639,"line":2779},[637,24339,905],{"class":642},[637,24341,10062],{"class":646},[637,24343,669],{"class":642},[637,24345,24346,24348,24350],{"class":639,"line":2788},[637,24347,732],{"class":642},[637,24349,750],{"class":646},[637,24351,669],{"class":642},[504,24353,24355],{"id":24354},"usesvg-component","UseSVG Component",[614,24357,24358,24359,24362],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[618,24360,24361],{},"UseSVG"," component:",[626,24364,24366],{"className":628,"code":24365,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n \u003CUseSVG\n src=\"/path/to/logo.svg\"\n :skip-fills=\"false\"\n :fill-material=\"{ transparent: true,\n opacity: 0.8 }\"\n depth=\"renderOrder\"\n />\n \u003C/TresGroup>\n\u003C/template>\n",[618,24367,24368,24388,24407,24415,24419,24427,24456,24463,24477,24490,24502,24509,24522,24526,24534],{"__ignoreMap":576},[637,24369,24370,24372,24374,24376,24378,24380,24382,24384,24386],{"class":639,"line":577},[637,24371,643],{"class":642},[637,24373,647],{"class":646},[637,24375,651],{"class":650},[637,24377,654],{"class":650},[637,24379,657],{"class":642},[637,24381,660],{"class":642},[637,24383,664],{"class":663},[637,24385,660],{"class":642},[637,24387,669],{"class":642},[637,24389,24390,24392,24394,24397,24399,24401,24403,24405],{"class":639,"line":578},[637,24391,677],{"class":676},[637,24393,680],{"class":642},[637,24395,24396],{"class":683}," UseSVG",[637,24398,693],{"class":642},[637,24400,696],{"class":676},[637,24402,699],{"class":642},[637,24404,702],{"class":663},[637,24406,705],{"class":642},[637,24408,24409,24411,24413],{"class":639,"line":708},[637,24410,732],{"class":642},[637,24412,647],{"class":646},[637,24414,669],{"class":642},[637,24416,24417],{"class":639,"line":729},[637,24418,742],{"emptyLinePlaceholder":594},[637,24420,24421,24423,24425],{"class":639,"line":739},[637,24422,643],{"class":642},[637,24424,750],{"class":646},[637,24426,669],{"class":642},[637,24428,24429,24431,24433,24435,24437,24439,24441,24443,24445,24447,24449,24452,24454],{"class":639,"line":745},[637,24430,758],{"class":642},[637,24432,10062],{"class":646},[637,24434,813],{"class":650},[637,24436,657],{"class":642},[637,24438,660],{"class":642},[637,24440,1909],{"class":663},[637,24442,660],{"class":642},[637,24444,1508],{"class":650},[637,24446,657],{"class":642},[637,24448,660],{"class":642},[637,24450,24451],{"class":663},"[-2.1, 1, 0]",[637,24453,660],{"class":642},[637,24455,669],{"class":642},[637,24457,24458,24460],{"class":639,"line":755},[637,24459,781],{"class":642},[637,24461,24462],{"class":646},"UseSVG\n",[637,24464,24465,24468,24470,24472,24475],{"class":639,"line":778},[637,24466,24467],{"class":650}," src",[637,24469,657],{"class":642},[637,24471,660],{"class":642},[637,24473,24474],{"class":663},"/path/to/logo.svg",[637,24476,3154],{"class":642},[637,24478,24479,24482,24484,24486,24488],{"class":639,"line":790},[637,24480,24481],{"class":650}," :skip-fills",[637,24483,657],{"class":642},[637,24485,660],{"class":642},[637,24487,971],{"class":663},[637,24489,3154],{"class":642},[637,24491,24492,24495,24497,24499],{"class":639,"line":800},[637,24493,24494],{"class":650}," :fill-material",[637,24496,657],{"class":642},[637,24498,660],{"class":642},[637,24500,24501],{"class":663},"{ transparent: true,\n",[637,24503,24504,24507],{"class":639,"line":805},[637,24505,24506],{"class":663}," opacity: 0.8 }",[637,24508,3154],{"class":642},[637,24510,24511,24514,24516,24518,24520],{"class":639,"line":827},[637,24512,24513],{"class":650}," depth",[637,24515,657],{"class":642},[637,24517,660],{"class":642},[637,24519,23327],{"class":663},[637,24521,3154],{"class":642},[637,24523,24524],{"class":639,"line":631},[637,24525,17292],{"class":642},[637,24527,24528,24530,24532],{"class":639,"line":850},[637,24529,905],{"class":642},[637,24531,10062],{"class":646},[637,24533,669],{"class":642},[637,24535,24536,24538,24540],{"class":639,"line":861},[637,24537,732],{"class":642},[637,24539,750],{"class":646},[637,24541,669],{"class":642},[4074,24543,922],{"id":921},[927,24545,24546,24558],{},[930,24547,24548],{},[933,24549,24550,24552,24554,24556],{},[936,24551,938],{"align":997},[936,24553,5990],{},[936,24555,941],{"align":997},[936,24557,944],{},[946,24559,24560,24580,24599,24618,24635,24652,24671,24689],{},[933,24561,24562,24567,24571,24578],{},[951,24563,24564],{"align":997},[1692,24565,24566],{},"src",[951,24568,24569],{},[618,24570,3595],{},[951,24572,24573,24574,24577],{"align":997},"Either a path to an SVG ",[1697,24575,24576],{},"or"," an SVG string",[951,24579],{},[933,24581,24582,24586,24590,24595],{},[951,24583,24584],{"align":997},[1692,24585,22826],{},[951,24587,24588],{},[618,24589,17582],{},[951,24591,958,24592,24594],{"align":997},[618,24593,961],{},", the SVG strokes will not be rendered.",[951,24596,24597],{},[618,24598,971],{},[933,24600,24601,24605,24609,24614],{},[951,24602,24603],{"align":997},[1692,24604,22844],{},[951,24606,24607],{},[618,24608,17582],{},[951,24610,958,24611,24613],{"align":997},[618,24612,961],{},", the SVG fills will not be rendered.",[951,24615,24616],{},[618,24617,971],{},[933,24619,24620,24624,24628,24631],{},[951,24621,24622],{"align":997},[1692,24623,22881],{},[951,24625,24626],{},[618,24627,22867],{},[951,24629,24630],{"align":997},"Props to assign to the stroke materials of the resulting meshes.",[951,24632,24633],{},[618,24634,1167],{},[933,24636,24637,24641,24645,24648],{},[951,24638,24639],{"align":997},[1692,24640,22862],{},[951,24642,24643],{},[618,24644,22867],{},[951,24646,24647],{"align":997},"Props to assign to the fill materials of the resulting meshes.",[951,24649,24650],{},[618,24651,1167],{},[933,24653,24654,24659,24664,24667],{},[951,24655,24656],{"align":997},[1692,24657,24658],{},"strokeMeshProps",[951,24660,24661],{},[618,24662,24663],{},"TresOptions",[951,24665,24666],{"align":997},"Props to assign to the resulting stroke meshes.",[951,24668,24669],{},[618,24670,1167],{},[933,24672,24673,24678,24682,24685],{},[951,24674,24675],{"align":997},[1692,24676,24677],{},"fillMeshProps",[951,24679,24680],{},[618,24681,24663],{},[951,24683,24684],{"align":997},"Props to assign to the resulting fill meshes.",[951,24686,24687],{},[618,24688,1167],{},[933,24690,24691,24695,24699,24706],{},[951,24692,24693],{"align":997},[1692,24694,13105],{},[951,24696,24697],{},[618,24698,22903],{},[951,24700,24701,24702,3363],{"align":997},"Specify how SVG layers are to be rendered. (",[1140,24703,24705],{"href":24704},"#depth-handling","See \"Depth\"",[951,24707,24708],{},[618,24709,23327],{},[504,24711,24713],{"id":24712},"troubleshooting","Troubleshooting",[24715,24716,24718],"alert",{"type":24717},"warning",[614,24719,24720],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[614,24722,24723],{},"Here are some things to try if you run into problems:",[4074,24725,24727],{"id":24726},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2236,24729,24730],{},[2239,24731,24732,24733,2273,24735,1146],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[618,24734,7592],{},[618,24736,24737],{},"rgb(255, 0, 0)",[4074,24739,24741],{"id":24740},"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",[2236,24743,24744,24756],{},[2239,24745,24746,24747,24749,24750,1146],{},"In your ",[618,24748,157],{}," options, ",[1140,24751,24752,24753,24755],{"href":24704},"change the ",[618,24754,13105],{}," option",[2239,24757,24758,24759,24762,24763,1146],{},"In the SVG source, use ",[618,24760,24761],{},"fill=\"none\""," rather than ",[618,24764,24765],{},"fill-opacity=\"0\"",[4074,24767,24769,24770],{"id":24768},"parts-of-the-svg-z-fight","Parts of the SVG ",[1140,24771,24773],{"href":23491,"rel":24772},[1144],"\"z-fight\"",[2236,24775,24776,24784],{},[2239,24777,24746,24778,24749,24780,1146],{},[618,24779,157],{},[1140,24781,24752,24782,24755],{"href":24704},[618,24783,13105],{},[2239,24785,24786],{},"Increase the distance between the SVG and other on-screen elements.",[4074,24788,24790],{"id":24789},"the-svg-is-not-visible","The SVG is not visible",[2236,24792,24793,24796,24805,24811],{},[2239,24794,24795],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2239,24797,24798,24799,24801,24802,1146],{},"Try scaling the SVG down, e.g., wrap it in a ",[618,24800,10062],{}," with ",[618,24803,24804],{},":scale=\"0.01\"",[2239,24806,24807,24808,1146],{},"Try moving the SVG up (+y), e.g., ",[618,24809,24810],{},":position=\"[0,2,0]\"",[2239,24812,24813,24814,24817],{},"Check that ",[618,24815,24816],{},"layers.length > 0"," before rendering.",[4074,24819,24821],{"id":24820},"performance-issues-with-many-layers","Performance issues with many layers",[2236,24823,24824,24831,24839],{},[2239,24825,24826,24827,24830],{},"Use the ",[618,24828,24829],{},"dispose()"," function when components unmount to clean up geometries.",[2239,24832,24833,24834,5634,24836,24838],{},"Consider using ",[618,24835,22826],{},[618,24837,22844],{}," to reduce the number of rendered layers.",[2239,24840,24841],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[504,24843,24845,24846,24848,24849,24851],{"id":24844},"when-to-use-usesvg-vs-svg-component","When to Use ",[618,24847,157],{}," vs ",[618,24850,22100],{}," Component",[614,24853,24854],{},[1692,24855,24856,24857,24859],{},"Use ",[618,24858,157],{}," when you need:",[2236,24861,24862,24865,24868,24871,24874],{},[2239,24863,24864],{},"Direct access to individual SVG layers",[2239,24866,24867],{},"Custom rendering logic",[2239,24869,24870],{},"Layer-specific animations",[2239,24872,24873],{},"Programmatic geometry manipulation",[2239,24875,24876],{},"Advanced material customization per layer",[614,24878,24879],{},[1692,24880,24826,24881,24883],{},[618,24882,22100],{}," component when you need:",[2236,24885,24886,24889,24892,24895],{},[2239,24887,24888],{},"Simple, declarative SVG rendering",[2239,24890,24891],{},"Quick prototyping",[2239,24893,24894],{},"Standard SVG display without custom logic",[2239,24896,24897],{},"Less code and setup",[1349,24899,24900],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":24902},[24903,24913,24916,24924],{"id":22104,"depth":578,"text":22105,"children":24904},[24905,24906,24907,24908,24909,24910,24911,24912],{"id":624,"depth":708,"text":15},{"id":22613,"depth":708,"text":22614},{"id":17417,"depth":708,"text":17418},{"id":17555,"depth":708,"text":14044},{"id":22914,"depth":708,"text":22915},{"id":23289,"depth":708,"text":23290},{"id":23610,"depth":708,"text":23611},{"id":23745,"depth":708,"text":23746},{"id":24354,"depth":578,"text":24355,"children":24914},[24915],{"id":921,"depth":708,"text":922},{"id":24712,"depth":578,"text":24713,"children":24917},[24918,24919,24920,24922,24923],{"id":24726,"depth":708,"text":24727},{"id":24740,"depth":708,"text":24741},{"id":24768,"depth":708,"text":24921},"Parts of the SVG \"z-fight\"",{"id":24789,"depth":708,"text":24790},{"id":24820,"depth":708,"text":24821},{"id":24844,"depth":578,"text":24925},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":157,"description":24926},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":24931,"title":161,"body":24932,"description":25401,"extension":591,"links":592,"meta":25402,"navigation":594,"path":162,"seo":25403,"stem":163,"__hash__":25404},"docs/2.api/3.loaders/use-progress.md",{"type":501,"value":24933,"toc":25397},[24934,24941,24944,24946,25004,25010,25309,25320,25322,25378,25394],[614,24935,24936,24937,24940],{},"A composable to convenience wrap ",[618,24938,24939],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[614,24942,24943],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[504,24945,15],{"id":624},[626,24947,24949],{"className":1208,"code":24948,"language":664,"meta":576,"style":576},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[618,24950,24951,24970,24974],{"__ignoreMap":576},[637,24952,24953,24955,24957,24960,24962,24964,24966,24968],{"class":639,"line":577},[637,24954,677],{"class":676},[637,24956,680],{"class":642},[637,24958,24959],{"class":683}," useProgress",[637,24961,693],{"class":642},[637,24963,696],{"class":676},[637,24965,699],{"class":642},[637,24967,702],{"class":663},[637,24969,705],{"class":642},[637,24971,24972],{"class":639,"line":578},[637,24973,742],{"emptyLinePlaceholder":594},[637,24975,24976,24978,24980,24983,24985,24988,24990,24993,24995,24997,25000,25002],{"class":639,"line":708},[637,24977,2438],{"class":650},[637,24979,680],{"class":642},[637,24981,24982],{"class":683}," hasFinishLoading",[637,24984,687],{"class":642},[637,24986,24987],{"class":683}," progress",[637,24989,687],{"class":642},[637,24991,24992],{"class":683}," items ",[637,24994,2451],{"class":642},[637,24996,2454],{"class":642},[637,24998,24999],{"class":676}," await",[637,25001,24959],{"class":2457},[637,25003,6556],{"class":683},[614,25005,25006,25007,25009],{},"Then you can use the ",[618,25008,17514],{}," value to show a loading bar or a spinner:",[626,25011,25013],{"className":628,"code":25012,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CTransition\n name=\"fade-overlay\"\n enter-active-class=\"opacity-1 transition-opacity duration-200\"\n leave-active-class=\"opacity-0 transition-opacity duration-200\"\n >\n \u003Cdiv\n v-show=\"!hasFinishLoading\"\n class=\"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono\"\n >\n \u003Cdiv class=\"w-200px\">\n Loading... {{ progress }} %\n \u003Ci class=\"i-ic-twotone-catching-pokemon animate-rotate-in\">\u003C/i>\n \u003C/div>\n \u003C/div>\n \u003C/Transition>\n \u003CTresCanvas preset=\"realistic\">\n \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n \u003COrbitControls />\n \u003CSuspense>\n \u003CEnvironment\n background\n :files=\"environmentFiles\"\n path=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap\"\n />\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,25014,25015,25023,25030,25043,25057,25071,25075,25082,25096,25110,25114,25134,25139,25163,25171,25179,25188,25207,25225,25233,25241,25248,25253,25267,25281,25285,25293,25301],{"__ignoreMap":576},[637,25016,25017,25019,25021],{"class":639,"line":577},[637,25018,643],{"class":642},[637,25020,750],{"class":646},[637,25022,669],{"class":642},[637,25024,25025,25027],{"class":639,"line":578},[637,25026,758],{"class":642},[637,25028,25029],{"class":646},"Transition\n",[637,25031,25032,25034,25036,25038,25041],{"class":639,"line":708},[637,25033,5168],{"class":650},[637,25035,657],{"class":642},[637,25037,660],{"class":642},[637,25039,25040],{"class":663},"fade-overlay",[637,25042,3154],{"class":642},[637,25044,25045,25048,25050,25052,25055],{"class":639,"line":729},[637,25046,25047],{"class":650}," enter-active-class",[637,25049,657],{"class":642},[637,25051,660],{"class":642},[637,25053,25054],{"class":663},"opacity-1 transition-opacity duration-200",[637,25056,3154],{"class":642},[637,25058,25059,25062,25064,25066,25069],{"class":639,"line":739},[637,25060,25061],{"class":650}," leave-active-class",[637,25063,657],{"class":642},[637,25065,660],{"class":642},[637,25067,25068],{"class":663},"opacity-0 transition-opacity duration-200",[637,25070,3154],{"class":642},[637,25072,25073],{"class":639,"line":745},[637,25074,5196],{"class":642},[637,25076,25077,25079],{"class":639,"line":755},[637,25078,781],{"class":642},[637,25080,25081],{"class":646},"div\n",[637,25083,25084,25087,25089,25091,25094],{"class":639,"line":778},[637,25085,25086],{"class":650}," v-show",[637,25088,657],{"class":642},[637,25090,660],{"class":642},[637,25092,25093],{"class":663},"!hasFinishLoading",[637,25095,3154],{"class":642},[637,25097,25098,25101,25103,25105,25108],{"class":639,"line":790},[637,25099,25100],{"class":650}," class",[637,25102,657],{"class":642},[637,25104,660],{"class":642},[637,25106,25107],{"class":663},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[637,25109,3154],{"class":642},[637,25111,25112],{"class":639,"line":800},[637,25113,12412],{"class":642},[637,25115,25116,25118,25120,25123,25125,25127,25130,25132],{"class":639,"line":805},[637,25117,853],{"class":642},[637,25119,4142],{"class":646},[637,25121,25122],{"class":650}," class",[637,25124,657],{"class":642},[637,25126,660],{"class":642},[637,25128,25129],{"class":663},"w-200px",[637,25131,660],{"class":642},[637,25133,669],{"class":642},[637,25135,25136],{"class":639,"line":827},[637,25137,25138],{"class":683}," Loading... {{ progress }} %\n",[637,25140,25141,25143,25145,25147,25149,25151,25154,25156,25159,25161],{"class":639,"line":631},[637,25142,864],{"class":642},[637,25144,8642],{"class":646},[637,25146,25122],{"class":650},[637,25148,657],{"class":642},[637,25150,660],{"class":642},[637,25152,25153],{"class":663},"i-ic-twotone-catching-pokemon animate-rotate-in",[637,25155,660],{"class":642},[637,25157,25158],{"class":642},">\u003C/",[637,25160,8642],{"class":646},[637,25162,669],{"class":642},[637,25164,25165,25167,25169],{"class":639,"line":850},[637,25166,885],{"class":642},[637,25168,4142],{"class":646},[637,25170,669],{"class":642},[637,25172,25173,25175,25177],{"class":639,"line":861},[637,25174,895],{"class":642},[637,25176,4142],{"class":646},[637,25178,669],{"class":642},[637,25180,25181,25183,25186],{"class":639,"line":872},[637,25182,905],{"class":642},[637,25184,25185],{"class":646},"Transition",[637,25187,669],{"class":642},[637,25189,25190,25192,25194,25196,25198,25200,25203,25205],{"class":639,"line":882},[637,25191,758],{"class":642},[637,25193,761],{"class":646},[637,25195,21680],{"class":650},[637,25197,657],{"class":642},[637,25199,660],{"class":642},[637,25201,25202],{"class":663},"realistic",[637,25204,660],{"class":642},[637,25206,669],{"class":642},[637,25208,25209,25211,25213,25215,25217,25219,25221,25223],{"class":639,"line":632},[637,25210,781],{"class":642},[637,25212,784],{"class":646},[637,25214,1508],{"class":650},[637,25216,657],{"class":642},[637,25218,660],{"class":642},[637,25220,19058],{"class":663},[637,25222,660],{"class":642},[637,25224,787],{"class":642},[637,25226,25227,25229,25231],{"class":639,"line":902},[637,25228,781],{"class":642},[637,25230,795],{"class":646},[637,25232,787],{"class":642},[637,25234,25235,25237,25239],{"class":639,"line":912},[637,25236,781],{"class":642},[637,25238,21668],{"class":646},[637,25240,669],{"class":642},[637,25242,25243,25245],{"class":639,"line":2648},[637,25244,853],{"class":642},[637,25246,25247],{"class":646},"Environment\n",[637,25249,25250],{"class":639,"line":2657},[637,25251,25252],{"class":650}," background\n",[637,25254,25255,25258,25260,25262,25265],{"class":639,"line":2677},[637,25256,25257],{"class":650}," :files",[637,25259,657],{"class":642},[637,25261,660],{"class":642},[637,25263,25264],{"class":663},"environmentFiles",[637,25266,3154],{"class":642},[637,25268,25269,25272,25274,25276,25279],{"class":639,"line":2686},[637,25270,25271],{"class":650}," path",[637,25273,657],{"class":642},[637,25275,660],{"class":642},[637,25277,25278],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[637,25280,3154],{"class":642},[637,25282,25283],{"class":639,"line":2695},[637,25284,8054],{"class":642},[637,25286,25287,25289,25291],{"class":639,"line":2704},[637,25288,895],{"class":642},[637,25290,21668],{"class":646},[637,25292,669],{"class":642},[637,25294,25295,25297,25299],{"class":639,"line":2726},[637,25296,905],{"class":642},[637,25298,761],{"class":646},[637,25300,669],{"class":642},[637,25302,25303,25305,25307],{"class":639,"line":2770},[637,25304,732],{"class":642},[637,25306,750],{"class":646},[637,25308,669],{"class":642},[24715,25310,25311],{"type":24717},[614,25312,25313,25314,25319],{},"This component use top level await. Please check the ",[1140,25315,25318],{"href":25316,"rel":25317},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1144],"Suspense API"," for more info",[504,25321,17418],{"id":17417},[927,25323,25324,25334],{},[930,25325,25326],{},[933,25327,25328,25330,25332],{},[936,25329,8110],{"align":997},[936,25331,5990],{"align":997},[936,25333,941],{"align":997},[946,25335,25336,25350,25363],{},[933,25337,25338,25343,25347],{},[951,25339,25340],{"align":997},[618,25341,25342],{},"hasFinishLoading",[951,25344,25345],{"align":997},[618,25346,17582],{},[951,25348,25349],{"align":997},"Whether all items have finished loading",[933,25351,25352,25356,25360],{},[951,25353,25354],{"align":997},[618,25355,17514],{},[951,25357,25358],{"align":997},[618,25359,5375],{},[951,25361,25362],{"align":997},"Loading progress as percentage (0-100)",[933,25364,25365,25370,25375],{},[951,25366,25367],{"align":997},[618,25368,25369],{},"items",[951,25371,25372],{"align":997},[618,25373,25374],{},"Array",[951,25376,25377],{"align":997},"Array of loading items with their status",[3222,25379,25380],{},[614,25381,25382,25383,25388,25389,25319],{},"This component use top level await it needs to be wrapped on a ",[1140,25384,25386],{"href":25316,"rel":25385},[1144],[618,25387,21668],{},". Please check the ",[1140,25390,25392],{"href":25316,"rel":25391},[1144],[618,25393,25318],{},[1349,25395,25396],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":576,"searchDepth":577,"depth":578,"links":25398},[25399,25400],{"id":624,"depth":578,"text":15},{"id":17417,"depth":578,"text":17418},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":161,"description":25401},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":25406,"title":165,"body":25407,"description":25984,"extension":591,"links":592,"meta":25985,"navigation":594,"path":166,"seo":25986,"stem":167,"__hash__":25987},"docs/2.api/3.loaders/use-video-texture.md",{"type":501,"value":25408,"toc":25980},[25409,25414,25417,25424,25426,25863,25865,25968,25977],[2318,25410,25411],{},[25412,25413],"loaders-use-video-texture",{},[614,25415,25416],{},"A composable to easily use videos as textures in your meshes.",[614,25418,25419,25420],{},"This composable is based on the Drei ",[1140,25421,165],{"href":25422,"rel":25423},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1144],[504,25425,15],{"id":624},[16950,25427,25428,25643],{},[626,25429,25431],{"className":628,"code":25430,"filename":17105,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333\">\n \u003CTresPerspectiveCamera\n :position=\"[0, 5, 9]\"\n :look-at=\"[0, 1, 0]\"\n />\n \u003COrbitControls />\n \u003CSuspense>\n \u003CTheModel />\n \u003C/Suspense>\n \u003CTresGridHelper />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,25432,25433,25453,25471,25489,25503,25511,25515,25523,25541,25548,25561,25575,25579,25587,25595,25603,25611,25619,25627,25635],{"__ignoreMap":576},[637,25434,25435,25437,25439,25441,25443,25445,25447,25449,25451],{"class":639,"line":577},[637,25436,643],{"class":642},[637,25438,647],{"class":646},[637,25440,651],{"class":650},[637,25442,654],{"class":650},[637,25444,657],{"class":642},[637,25446,660],{"class":642},[637,25448,664],{"class":663},[637,25450,660],{"class":642},[637,25452,669],{"class":642},[637,25454,25455,25457,25459,25461,25463,25465,25467,25469],{"class":639,"line":578},[637,25456,677],{"class":676},[637,25458,680],{"class":642},[637,25460,690],{"class":683},[637,25462,693],{"class":642},[637,25464,696],{"class":676},[637,25466,699],{"class":642},[637,25468,702],{"class":663},[637,25470,705],{"class":642},[637,25472,25473,25475,25477,25479,25481,25483,25485,25487],{"class":639,"line":708},[637,25474,677],{"class":676},[637,25476,680],{"class":642},[637,25478,715],{"class":683},[637,25480,693],{"class":642},[637,25482,696],{"class":676},[637,25484,699],{"class":642},[637,25486,724],{"class":663},[637,25488,705],{"class":642},[637,25490,25491,25493,25495,25497,25499,25501],{"class":639,"line":729},[637,25492,677],{"class":676},[637,25494,17170],{"class":683},[637,25496,8454],{"class":676},[637,25498,699],{"class":642},[637,25500,17177],{"class":663},[637,25502,705],{"class":642},[637,25504,25505,25507,25509],{"class":639,"line":739},[637,25506,732],{"class":642},[637,25508,647],{"class":646},[637,25510,669],{"class":642},[637,25512,25513],{"class":639,"line":745},[637,25514,742],{"emptyLinePlaceholder":594},[637,25516,25517,25519,25521],{"class":639,"line":755},[637,25518,643],{"class":642},[637,25520,750],{"class":646},[637,25522,669],{"class":642},[637,25524,25525,25527,25529,25531,25533,25535,25537,25539],{"class":639,"line":778},[637,25526,758],{"class":642},[637,25528,761],{"class":646},[637,25530,764],{"class":650},[637,25532,657],{"class":642},[637,25534,660],{"class":642},[637,25536,12959],{"class":663},[637,25538,660],{"class":642},[637,25540,669],{"class":642},[637,25542,25543,25545],{"class":639,"line":790},[637,25544,781],{"class":642},[637,25546,25547],{"class":646},"TresPerspectiveCamera\n",[637,25549,25550,25552,25554,25556,25559],{"class":639,"line":800},[637,25551,17279],{"class":650},[637,25553,657],{"class":642},[637,25555,660],{"class":642},[637,25557,25558],{"class":663},"[0, 5, 9]",[637,25560,3154],{"class":642},[637,25562,25563,25566,25568,25570,25573],{"class":639,"line":805},[637,25564,25565],{"class":650}," :look-at",[637,25567,657],{"class":642},[637,25569,660],{"class":642},[637,25571,25572],{"class":663},"[0, 1, 0]",[637,25574,3154],{"class":642},[637,25576,25577],{"class":639,"line":827},[637,25578,17292],{"class":642},[637,25580,25581,25583,25585],{"class":639,"line":631},[637,25582,781],{"class":642},[637,25584,795],{"class":646},[637,25586,787],{"class":642},[637,25588,25589,25591,25593],{"class":639,"line":850},[637,25590,781],{"class":642},[637,25592,21668],{"class":646},[637,25594,669],{"class":642},[637,25596,25597,25599,25601],{"class":639,"line":861},[637,25598,853],{"class":642},[637,25600,17252],{"class":646},[637,25602,787],{"class":642},[637,25604,25605,25607,25609],{"class":639,"line":872},[637,25606,895],{"class":642},[637,25608,21668],{"class":646},[637,25610,669],{"class":642},[637,25612,25613,25615,25617],{"class":639,"line":882},[637,25614,781],{"class":642},[637,25616,8070],{"class":646},[637,25618,787],{"class":642},[637,25620,25621,25623,25625],{"class":639,"line":632},[637,25622,781],{"class":642},[637,25624,9702],{"class":646},[637,25626,787],{"class":642},[637,25628,25629,25631,25633],{"class":639,"line":902},[637,25630,905],{"class":642},[637,25632,761],{"class":646},[637,25634,669],{"class":642},[637,25636,25637,25639,25641],{"class":639,"line":912},[637,25638,732],{"class":642},[637,25640,750],{"class":646},[637,25642,669],{"class":642},[626,25644,25648],{"className":628,"code":25645,"filename":25646,"highlights":25647,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Sphere, useVideoTexture } from '@tresjs/cientos'\n\nconst videoPath = 'https://raw.githubusercontent.com/'\n + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'\nconst texture = ref()\ntexture.value = await useVideoTexture(videoPath, { loop: false })\n\u003C/script>\n\n\u003Ctemplate>\n \u003CSphere :position=\"[0, 2, 0]\">\n \u003CTresMeshBasicMaterial :map=\"texture\" />\n \u003C/Sphere>\n\u003C/template>\n","TheVideoTexture.vue",[708,778,631],[618,25649,25650,25670,25688,25713,25717,25732,25743,25755,25788,25796,25800,25808,25828,25847,25855],{"__ignoreMap":576},[637,25651,25652,25654,25656,25658,25660,25662,25664,25666,25668],{"class":639,"line":577},[637,25653,643],{"class":642},[637,25655,647],{"class":646},[637,25657,651],{"class":650},[637,25659,654],{"class":650},[637,25661,657],{"class":642},[637,25663,660],{"class":642},[637,25665,664],{"class":663},[637,25667,660],{"class":642},[637,25669,669],{"class":642},[637,25671,25672,25674,25676,25678,25680,25682,25684,25686],{"class":639,"line":578},[637,25673,677],{"class":676},[637,25675,680],{"class":642},[637,25677,3895],{"class":683},[637,25679,693],{"class":642},[637,25681,696],{"class":676},[637,25683,699],{"class":642},[637,25685,633],{"class":663},[637,25687,705],{"class":642},[637,25689,25691,25693,25695,25698,25700,25703,25705,25707,25709,25711],{"class":25690,"line":708},[639,673],[637,25692,677],{"class":676},[637,25694,680],{"class":642},[637,25696,25697],{"class":683}," Sphere",[637,25699,687],{"class":642},[637,25701,25702],{"class":683}," useVideoTexture",[637,25704,693],{"class":642},[637,25706,696],{"class":676},[637,25708,699],{"class":642},[637,25710,702],{"class":663},[637,25712,705],{"class":642},[637,25714,25715],{"class":639,"line":729},[637,25716,742],{"emptyLinePlaceholder":594},[637,25718,25719,25721,25724,25726,25728,25730],{"class":639,"line":739},[637,25720,2438],{"class":650},[637,25722,25723],{"class":683}," videoPath ",[637,25725,657],{"class":642},[637,25727,699],{"class":642},[637,25729,18823],{"class":663},[637,25731,705],{"class":642},[637,25733,25734,25736,25738,25741],{"class":639,"line":745},[637,25735,18830],{"class":642},[637,25737,699],{"class":642},[637,25739,25740],{"class":663},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[637,25742,705],{"class":642},[637,25744,25745,25747,25749,25751,25753],{"class":639,"line":755},[637,25746,2438],{"class":650},[637,25748,2448],{"class":683},[637,25750,657],{"class":642},[637,25752,3895],{"class":2457},[637,25754,6556],{"class":683},[637,25756,25758,25760,25762,25764,25766,25768,25770,25773,25775,25777,25780,25782,25784,25786],{"class":25757,"line":778},[639,673],[637,25759,2740],{"class":683},[637,25761,1146],{"class":642},[637,25763,6991],{"class":683},[637,25765,657],{"class":642},[637,25767,24999],{"class":676},[637,25769,25702],{"class":2457},[637,25771,25772],{"class":683},"(videoPath",[637,25774,687],{"class":642},[637,25776,680],{"class":642},[637,25778,25779],{"class":646}," loop",[637,25781,1240],{"class":642},[637,25783,6746],{"class":4420},[637,25785,693],{"class":642},[637,25787,2471],{"class":683},[637,25789,25790,25792,25794],{"class":639,"line":790},[637,25791,732],{"class":642},[637,25793,647],{"class":646},[637,25795,669],{"class":642},[637,25797,25798],{"class":639,"line":800},[637,25799,742],{"emptyLinePlaceholder":594},[637,25801,25802,25804,25806],{"class":639,"line":805},[637,25803,643],{"class":642},[637,25805,750],{"class":646},[637,25807,669],{"class":642},[637,25809,25810,25813,25815,25817,25819,25821,25824,25826],{"class":639,"line":827},[637,25811,25812],{"class":642}," \u003C",[637,25814,285],{"class":646},[637,25816,1508],{"class":650},[637,25818,657],{"class":642},[637,25820,660],{"class":642},[637,25822,25823],{"class":663},"[0, 2, 0]",[637,25825,660],{"class":642},[637,25827,669],{"class":642},[637,25829,25831,25833,25835,25837,25839,25841,25843,25845],{"class":25830,"line":631},[639,673],[637,25832,853],{"class":642},[637,25834,7493],{"class":646},[637,25836,2757],{"class":650},[637,25838,657],{"class":642},[637,25840,660],{"class":642},[637,25842,2740],{"class":663},[637,25844,660],{"class":642},[637,25846,787],{"class":642},[637,25848,25849,25851,25853],{"class":639,"line":850},[637,25850,895],{"class":642},[637,25852,285],{"class":646},[637,25854,669],{"class":642},[637,25856,25857,25859,25861],{"class":639,"line":861},[637,25858,732],{"class":642},[637,25860,750],{"class":646},[637,25862,669],{"class":642},[504,25864,922],{"id":921},[927,25866,25867,25877],{},[930,25868,25869],{},[933,25870,25871,25873,25875],{},[936,25872,938],{"align":997},[936,25874,941],{"align":997},[936,25876,944],{},[946,25878,25879,25892,25906,25921,25933,25945,25956],{},[933,25880,25881,25885,25888],{},[951,25882,25883],{"align":997},[618,25884,24566],{},[951,25886,25887],{"align":997},"Path to the video.",[951,25889,25890],{},[618,25891,1167],{},[933,25893,25894,25899,25901],{},[951,25895,25896],{"align":997},[618,25897,25898],{},"unsuspend",[951,25900,19954],{"align":997},[951,25902,25903],{},[618,25904,25905],{},"loadedmetadata",[933,25907,25908,25913,25916],{},[951,25909,25910],{"align":997},[618,25911,25912],{},"crossOrigin",[951,25914,25915],{"align":997},"Whether to use CORS to fetch the related video.",[951,25917,25918],{},[618,25919,25920],{},"Anonymous",[933,25922,25923,25928,25931],{},[951,25924,25925],{"align":997},[618,25926,25927],{},"muted",[951,25929,25930],{"align":997},"Whether to set the audio silenced.",[951,25932,961],{},[933,25934,25935,25940,25943],{},[951,25936,25937],{"align":997},[618,25938,25939],{},"loop",[951,25941,25942],{"align":997},"Automatically seek back to the start upon reaching the end of the video.",[951,25944,961],{},[933,25946,25947,25951,25954],{},[951,25948,25949],{"align":997},[618,25950,14328],{},[951,25952,25953],{"align":997},"To play to the video once loaded or not.",[951,25955,961],{},[933,25957,25958,25963,25966],{},[951,25959,25960],{"align":997},[618,25961,25962],{},"playsInline",[951,25964,25965],{"align":997},"To be play the video inline or not.",[951,25967,961],{},[2236,25969,25970],{},[2239,25971,25972,25973,25976],{},"Any other attribute for a ",[618,25974,25975],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1349,25978,25979],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":576,"searchDepth":577,"depth":578,"links":25981},[25982,25983],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A composable to load video textures in TresJS scenes.",{},{"title":165,"description":25984},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",[25989,26395,26993,27435,27606,28220,28943,29712,29996],{"id":25990,"title":175,"body":25991,"description":26391,"extension":591,"links":592,"meta":26392,"navigation":594,"path":176,"seo":26393,"stem":177,"__hash__":26394},"docs/2.api/4.materials/custom-shader-material.md",{"type":501,"value":25992,"toc":26387},[25993,25998,26018,26020,26368,26370,26384],[2318,25994,25995],{},[25996,25997],"materials-custom-shader-material",{},[614,25999,2799,26000,26002,26003,26006,26007,26014,26015,1146],{},[618,26001,7338],{}," package provides ",[618,26004,26005],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1140,26008,26011],{"href":26009,"rel":26010},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1144],[618,26012,26013],{},"three-custom-shader-material"," class. As states in the repo, it ",[1697,26016,26017],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[504,26019,15],{"id":624},[626,26021,26024],{"className":628,"code":26022,"highlights":26023,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCustomShaderMaterial } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst customShaderMaterialRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CTresCustomShaderMaterial\n ref=\"customShaderMaterialRef\"\n :vertex-shader=\"vertexShader\"\n :fragment-shader=\"fragmentShader\"\n :uniforms=\"{\n u_time: { value: 0 },\n u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n u_resolution: { value: new THREE.Vector2() }\n }\"\n :transparent=\"true\"\n :side=\"THREE.DoubleSide\"\n base-material=\"MeshLambertMaterial\"\n silent\n :map=\"texture\"\n :color=\"0xff0000\"\n />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,631,850,861,872,882,632,902,912,2648,2657,2677,2686,2695,2704,2726],[618,26025,26026,26046,26066,26084,26088,26101,26109,26113,26121,26129,26147,26155,26163,26171,26186,26201,26216,26228,26234,26240,26246,26254,26268,26283,26298,26304,26318,26332,26336,26344,26352,26360],{"__ignoreMap":576},[637,26027,26028,26030,26032,26034,26036,26038,26040,26042,26044],{"class":639,"line":577},[637,26029,643],{"class":642},[637,26031,647],{"class":646},[637,26033,651],{"class":650},[637,26035,654],{"class":650},[637,26037,657],{"class":642},[637,26039,660],{"class":642},[637,26041,664],{"class":663},[637,26043,660],{"class":642},[637,26045,669],{"class":642},[637,26047,26049,26051,26053,26056,26058,26060,26062,26064],{"class":26048,"line":578},[639,673],[637,26050,677],{"class":676},[637,26052,680],{"class":642},[637,26054,26055],{"class":683}," TresCustomShaderMaterial",[637,26057,693],{"class":642},[637,26059,696],{"class":676},[637,26061,699],{"class":642},[637,26063,702],{"class":663},[637,26065,705],{"class":642},[637,26067,26068,26070,26072,26074,26076,26078,26080,26082],{"class":639,"line":708},[637,26069,677],{"class":676},[637,26071,680],{"class":642},[637,26073,3521],{"class":683},[637,26075,693],{"class":642},[637,26077,696],{"class":676},[637,26079,699],{"class":642},[637,26081,633],{"class":663},[637,26083,705],{"class":642},[637,26085,26086],{"class":639,"line":729},[637,26087,742],{"emptyLinePlaceholder":594},[637,26089,26090,26092,26095,26097,26099],{"class":639,"line":739},[637,26091,2438],{"class":650},[637,26093,26094],{"class":683}," customShaderMaterialRef ",[637,26096,657],{"class":642},[637,26098,3521],{"class":2457},[637,26100,6556],{"class":683},[637,26102,26103,26105,26107],{"class":639,"line":745},[637,26104,732],{"class":642},[637,26106,647],{"class":646},[637,26108,669],{"class":642},[637,26110,26111],{"class":639,"line":755},[637,26112,742],{"emptyLinePlaceholder":594},[637,26114,26115,26117,26119],{"class":639,"line":778},[637,26116,643],{"class":642},[637,26118,750],{"class":646},[637,26120,669],{"class":642},[637,26122,26123,26125,26127],{"class":639,"line":790},[637,26124,758],{"class":642},[637,26126,761],{"class":646},[637,26128,669],{"class":642},[637,26130,26131,26133,26135,26137,26139,26141,26143,26145],{"class":639,"line":800},[637,26132,781],{"class":642},[637,26134,784],{"class":646},[637,26136,1508],{"class":650},[637,26138,657],{"class":642},[637,26140,660],{"class":642},[637,26142,13301],{"class":663},[637,26144,660],{"class":642},[637,26146,787],{"class":642},[637,26148,26149,26151,26153],{"class":639,"line":805},[637,26150,781],{"class":642},[637,26152,856],{"class":646},[637,26154,669],{"class":642},[637,26156,26157,26159,26161],{"class":639,"line":827},[637,26158,853],{"class":642},[637,26160,867],{"class":646},[637,26162,787],{"class":642},[637,26164,26166,26168],{"class":26165,"line":631},[639,673],[637,26167,853],{"class":642},[637,26169,26170],{"class":646},"TresCustomShaderMaterial\n",[637,26172,26174,26177,26179,26181,26184],{"class":26173,"line":850},[639,673],[637,26175,26176],{"class":650}," ref",[637,26178,657],{"class":642},[637,26180,660],{"class":642},[637,26182,26183],{"class":663},"customShaderMaterialRef",[637,26185,3154],{"class":642},[637,26187,26189,26192,26194,26196,26199],{"class":26188,"line":861},[639,673],[637,26190,26191],{"class":650}," :vertex-shader",[637,26193,657],{"class":642},[637,26195,660],{"class":642},[637,26197,26198],{"class":663},"vertexShader",[637,26200,3154],{"class":642},[637,26202,26204,26207,26209,26211,26214],{"class":26203,"line":872},[639,673],[637,26205,26206],{"class":650}," :fragment-shader",[637,26208,657],{"class":642},[637,26210,660],{"class":642},[637,26212,26213],{"class":663},"fragmentShader",[637,26215,3154],{"class":642},[637,26217,26219,26222,26224,26226],{"class":26218,"line":882},[639,673],[637,26220,26221],{"class":650}," :uniforms",[637,26223,657],{"class":642},[637,26225,660],{"class":642},[637,26227,3283],{"class":663},[637,26229,26231],{"class":26230,"line":632},[639,673],[637,26232,26233],{"class":663}," u_time: { value: 0 },\n",[637,26235,26237],{"class":26236,"line":902},[639,673],[637,26238,26239],{"class":663}," u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n",[637,26241,26243],{"class":26242,"line":912},[639,673],[637,26244,26245],{"class":663}," u_resolution: { value: new THREE.Vector2() }\n",[637,26247,26249,26252],{"class":26248,"line":2648},[639,673],[637,26250,26251],{"class":663}," }",[637,26253,3154],{"class":642},[637,26255,26257,26260,26262,26264,26266],{"class":26256,"line":2657},[639,673],[637,26258,26259],{"class":650}," :transparent",[637,26261,657],{"class":642},[637,26263,660],{"class":642},[637,26265,961],{"class":663},[637,26267,3154],{"class":642},[637,26269,26271,26274,26276,26278,26281],{"class":26270,"line":2677},[639,673],[637,26272,26273],{"class":650}," :side",[637,26275,657],{"class":642},[637,26277,660],{"class":642},[637,26279,26280],{"class":663},"THREE.DoubleSide",[637,26282,3154],{"class":642},[637,26284,26286,26289,26291,26293,26296],{"class":26285,"line":2686},[639,673],[637,26287,26288],{"class":650}," base-material",[637,26290,657],{"class":642},[637,26292,660],{"class":642},[637,26294,26295],{"class":663},"MeshLambertMaterial",[637,26297,3154],{"class":642},[637,26299,26301],{"class":26300,"line":2695},[639,673],[637,26302,26303],{"class":650}," silent\n",[637,26305,26307,26310,26312,26314,26316],{"class":26306,"line":2704},[639,673],[637,26308,26309],{"class":650}," :map",[637,26311,657],{"class":642},[637,26313,660],{"class":642},[637,26315,2740],{"class":663},[637,26317,3154],{"class":642},[637,26319,26321,26323,26325,26327,26330],{"class":26320,"line":2726},[639,673],[637,26322,23249],{"class":650},[637,26324,657],{"class":642},[637,26326,660],{"class":642},[637,26328,26329],{"class":663},"0xff0000",[637,26331,3154],{"class":642},[637,26333,26334],{"class":639,"line":2770},[637,26335,8054],{"class":642},[637,26337,26338,26340,26342],{"class":639,"line":2779},[637,26339,895],{"class":642},[637,26341,856],{"class":646},[637,26343,669],{"class":642},[637,26345,26346,26348,26350],{"class":639,"line":2788},[637,26347,781],{"class":642},[637,26349,9702],{"class":646},[637,26351,787],{"class":642},[637,26353,26354,26356,26358],{"class":639,"line":3945},[637,26355,905],{"class":642},[637,26357,761],{"class":646},[637,26359,669],{"class":642},[637,26361,26362,26364,26366],{"class":639,"line":3976},[637,26363,732],{"class":642},[637,26365,750],{"class":646},[637,26367,669],{"class":642},[504,26369,922],{"id":921},[614,26371,26372,26373,26376,26377,26379,26380,1146],{},"Being a wrapper around the ",[618,26374,26375],{},"CustomShaderMaterial"," class, the ",[618,26378,26005],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1140,26381,26383],{"href":26009,"rel":26382},[1144],"official repo",[1349,26385,26386],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":26388},[26389,26390],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":175,"description":26391},"_HOuAJQ5DQ9SpzOn3sJ32tgM-mbRXc16CsR6Pu3n5Bg",{"id":26396,"title":179,"body":26397,"description":26989,"extension":591,"links":592,"meta":26990,"navigation":594,"path":180,"seo":26991,"stem":181,"__hash__":26992},"docs/2.api/4.materials/glass-material.md",{"type":501,"value":26398,"toc":26980},[26399,26404,26415,26417,26421,26617,26619,26626,26630,26965,26969,26977],[2318,26400,26401],{},[26402,26403],"materials-glass-material",{},[614,26405,2799,26406,26408,26409,26412,26413,1146],{},[618,26407,7338],{}," package provides a new",[618,26410,26411],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[618,26414,3021],{},[504,26416,15],{"id":624},[4074,26418,26420],{"id":26419},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[626,26422,26425],{"className":628,"code":26423,"highlights":26424,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n \u003CTresMesh>\n \u003CTresTorusGeometry />\n \u003CMeshGlassMaterial />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,800],[618,26426,26427,26447,26466,26485,26493,26497,26505,26513,26541,26549,26558,26567,26575,26583,26601,26609],{"__ignoreMap":576},[637,26428,26429,26431,26433,26435,26437,26439,26441,26443,26445],{"class":639,"line":577},[637,26430,643],{"class":642},[637,26432,647],{"class":646},[637,26434,651],{"class":650},[637,26436,654],{"class":650},[637,26438,657],{"class":642},[637,26440,660],{"class":642},[637,26442,664],{"class":663},[637,26444,660],{"class":642},[637,26446,669],{"class":642},[637,26448,26450,26452,26454,26456,26458,26460,26462,26464],{"class":26449,"line":578},[639,673],[637,26451,677],{"class":676},[637,26453,680],{"class":642},[637,26455,715],{"class":683},[637,26457,693],{"class":642},[637,26459,696],{"class":676},[637,26461,699],{"class":642},[637,26463,724],{"class":663},[637,26465,705],{"class":642},[637,26467,26468,26470,26472,26475,26477,26479,26481,26483],{"class":639,"line":708},[637,26469,677],{"class":676},[637,26471,680],{"class":642},[637,26473,26474],{"class":683}," MeshGlassMaterial",[637,26476,693],{"class":642},[637,26478,696],{"class":676},[637,26480,699],{"class":642},[637,26482,702],{"class":663},[637,26484,705],{"class":642},[637,26486,26487,26489,26491],{"class":639,"line":729},[637,26488,732],{"class":642},[637,26490,647],{"class":646},[637,26492,669],{"class":642},[637,26494,26495],{"class":639,"line":739},[637,26496,742],{"emptyLinePlaceholder":594},[637,26498,26499,26501,26503],{"class":639,"line":745},[637,26500,643],{"class":642},[637,26502,750],{"class":646},[637,26504,669],{"class":642},[637,26506,26507,26509,26511],{"class":639,"line":755},[637,26508,758],{"class":642},[637,26510,761],{"class":646},[637,26512,669],{"class":642},[637,26514,26515,26517,26519,26521,26523,26525,26527,26529,26531,26533,26535,26537,26539],{"class":639,"line":778},[637,26516,781],{"class":642},[637,26518,784],{"class":646},[637,26520,1508],{"class":650},[637,26522,657],{"class":642},[637,26524,660],{"class":642},[637,26526,13301],{"class":663},[637,26528,660],{"class":642},[637,26530,9637],{"class":650},[637,26532,657],{"class":642},[637,26534,660],{"class":642},[637,26536,9644],{"class":663},[637,26538,660],{"class":642},[637,26540,787],{"class":642},[637,26542,26543,26545,26547],{"class":639,"line":790},[637,26544,781],{"class":642},[637,26546,856],{"class":646},[637,26548,669],{"class":642},[637,26550,26552,26554,26556],{"class":26551,"line":800},[639,673],[637,26553,853],{"class":642},[637,26555,11884],{"class":646},[637,26557,787],{"class":642},[637,26559,26560,26562,26565],{"class":639,"line":805},[637,26561,853],{"class":642},[637,26563,26564],{"class":646},"MeshGlassMaterial",[637,26566,787],{"class":642},[637,26568,26569,26571,26573],{"class":639,"line":827},[637,26570,895],{"class":642},[637,26572,856],{"class":646},[637,26574,669],{"class":642},[637,26576,26577,26579,26581],{"class":639,"line":631},[637,26578,781],{"class":642},[637,26580,9702],{"class":646},[637,26582,787],{"class":642},[637,26584,26585,26587,26589,26591,26593,26595,26597,26599],{"class":639,"line":850},[637,26586,781],{"class":642},[637,26588,9721],{"class":646},[637,26590,1508],{"class":650},[637,26592,657],{"class":642},[637,26594,660],{"class":642},[637,26596,13383],{"class":663},[637,26598,660],{"class":642},[637,26600,787],{"class":642},[637,26602,26603,26605,26607],{"class":639,"line":861},[637,26604,905],{"class":642},[637,26606,761],{"class":646},[637,26608,669],{"class":642},[637,26610,26611,26613,26615],{"class":639,"line":872},[637,26612,732],{"class":642},[637,26614,750],{"class":646},[637,26616,669],{"class":642},[504,26618,922],{"id":921},[614,26620,26621,26622,26625],{},"No props are required. The component extends ",[618,26623,26624],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4074,26627,26629],{"id":26628},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[626,26631,26634],{"className":628,"code":26632,"highlights":26633,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial, Box } from '@tresjs/cientos'\n\nconst glassMaterialRef = shallowRef()\nconst boxRef = shallowRef()\n\nwatch(glassMaterialRef, value => {\n // For good practice we dispose the old material\n boxRef.value.instance.material.dispose()\n\n // We assign the new MeshGlassMaterialClass\n boxRef.value.instance.material = value.MeshGlassMaterialClass\n})\n\u003C/script>\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresTorusGeometry />\n \u003CMeshGlassMaterial ref=\"glassMaterialRef\" />\n \u003C/TresMesh>\n \u003C!-- Mesh to be replaced -->\n \u003CTresMesh ref=\"boxRef\">\n \u003CTresBoxGeometry />\n \u003CMeshBasicMaterial />\n \u003C/TresMesh>\n\u003C/template>\n",[729,745,755,778,790,800,805,827,631,850,861,912],[618,26635,26636,26656,26682,26700,26723,26727,26741,26754,26759,26776,26782,26806,26811,26817,26843,26850,26858,26866,26874,26882,26902,26910,26915,26933,26941,26949,26957],{"__ignoreMap":576},[637,26637,26638,26640,26642,26644,26646,26648,26650,26652,26654],{"class":639,"line":577},[637,26639,643],{"class":642},[637,26641,647],{"class":646},[637,26643,651],{"class":650},[637,26645,654],{"class":650},[637,26647,657],{"class":642},[637,26649,660],{"class":642},[637,26651,664],{"class":663},[637,26653,660],{"class":642},[637,26655,669],{"class":642},[637,26657,26658,26660,26662,26664,26666,26668,26670,26672,26674,26676,26678,26680],{"class":639,"line":578},[637,26659,677],{"class":676},[637,26661,680],{"class":642},[637,26663,3895],{"class":683},[637,26665,687],{"class":642},[637,26667,3521],{"class":683},[637,26669,687],{"class":642},[637,26671,12161],{"class":683},[637,26673,693],{"class":642},[637,26675,696],{"class":676},[637,26677,699],{"class":642},[637,26679,633],{"class":663},[637,26681,705],{"class":642},[637,26683,26684,26686,26688,26690,26692,26694,26696,26698],{"class":639,"line":708},[637,26685,677],{"class":676},[637,26687,680],{"class":642},[637,26689,715],{"class":683},[637,26691,693],{"class":642},[637,26693,696],{"class":676},[637,26695,699],{"class":642},[637,26697,724],{"class":663},[637,26699,705],{"class":642},[637,26701,26703,26705,26707,26709,26711,26713,26715,26717,26719,26721],{"class":26702,"line":729},[639,673],[637,26704,677],{"class":676},[637,26706,680],{"class":642},[637,26708,26474],{"class":683},[637,26710,687],{"class":642},[637,26712,1420],{"class":683},[637,26714,693],{"class":642},[637,26716,696],{"class":676},[637,26718,699],{"class":642},[637,26720,702],{"class":663},[637,26722,705],{"class":642},[637,26724,26725],{"class":639,"line":739},[637,26726,742],{"emptyLinePlaceholder":594},[637,26728,26730,26732,26735,26737,26739],{"class":26729,"line":745},[639,673],[637,26731,2438],{"class":650},[637,26733,26734],{"class":683}," glassMaterialRef ",[637,26736,657],{"class":642},[637,26738,3521],{"class":2457},[637,26740,6556],{"class":683},[637,26742,26744,26746,26748,26750,26752],{"class":26743,"line":755},[639,673],[637,26745,2438],{"class":650},[637,26747,16278],{"class":683},[637,26749,657],{"class":642},[637,26751,3521],{"class":2457},[637,26753,6556],{"class":683},[637,26755,26757],{"class":26756,"line":778},[639,673],[637,26758,742],{"emptyLinePlaceholder":594},[637,26760,26762,26764,26767,26769,26772,26774],{"class":26761,"line":790},[639,673],[637,26763,12210],{"class":2457},[637,26765,26766],{"class":683},"(glassMaterialRef",[637,26768,687],{"class":642},[637,26770,26771],{"class":6859}," value",[637,26773,3700],{"class":650},[637,26775,1226],{"class":642},[637,26777,26779],{"class":26778,"line":800},[639,673],[637,26780,26781],{"class":1231}," // For good practice we dispose the old material\n",[637,26783,26785,26788,26790,26792,26794,26796,26798,26800,26802,26804],{"class":26784,"line":805},[639,673],[637,26786,26787],{"class":683}," boxRef",[637,26789,1146],{"class":642},[637,26791,3708],{"class":683},[637,26793,1146],{"class":642},[637,26795,9347],{"class":683},[637,26797,1146],{"class":642},[637,26799,5223],{"class":683},[637,26801,1146],{"class":642},[637,26803,22794],{"class":2457},[637,26805,6556],{"class":646},[637,26807,26809],{"class":26808,"line":827},[639,673],[637,26810,742],{"emptyLinePlaceholder":594},[637,26812,26814],{"class":26813,"line":631},[639,673],[637,26815,26816],{"class":1231}," // We assign the new MeshGlassMaterialClass\n",[637,26818,26820,26822,26824,26826,26828,26830,26832,26834,26836,26838,26840],{"class":26819,"line":850},[639,673],[637,26821,26787],{"class":683},[637,26823,1146],{"class":642},[637,26825,3708],{"class":683},[637,26827,1146],{"class":642},[637,26829,9347],{"class":683},[637,26831,1146],{"class":642},[637,26833,5223],{"class":683},[637,26835,2454],{"class":642},[637,26837,26771],{"class":683},[637,26839,1146],{"class":642},[637,26841,26842],{"class":683},"MeshGlassMaterialClass\n",[637,26844,26846,26848],{"class":26845,"line":861},[639,673],[637,26847,2451],{"class":642},[637,26849,2471],{"class":683},[637,26851,26852,26854,26856],{"class":639,"line":872},[637,26853,732],{"class":642},[637,26855,647],{"class":646},[637,26857,669],{"class":642},[637,26859,26860,26862,26864],{"class":639,"line":882},[637,26861,643],{"class":642},[637,26863,750],{"class":646},[637,26865,669],{"class":642},[637,26867,26868,26870,26872],{"class":639,"line":632},[637,26869,758],{"class":642},[637,26871,856],{"class":646},[637,26873,669],{"class":642},[637,26875,26876,26878,26880],{"class":639,"line":902},[637,26877,781],{"class":642},[637,26879,11884],{"class":646},[637,26881,787],{"class":642},[637,26883,26885,26887,26889,26891,26893,26895,26898,26900],{"class":26884,"line":912},[639,673],[637,26886,781],{"class":642},[637,26888,26564],{"class":646},[637,26890,3895],{"class":650},[637,26892,657],{"class":642},[637,26894,660],{"class":642},[637,26896,26897],{"class":663},"glassMaterialRef",[637,26899,660],{"class":642},[637,26901,787],{"class":642},[637,26903,26904,26906,26908],{"class":639,"line":2648},[637,26905,905],{"class":642},[637,26907,856],{"class":646},[637,26909,669],{"class":642},[637,26911,26912],{"class":639,"line":2657},[637,26913,26914],{"class":1231}," \u003C!-- Mesh to be replaced -->\n",[637,26916,26917,26919,26921,26923,26925,26927,26929,26931],{"class":639,"line":2677},[637,26918,758],{"class":642},[637,26920,856],{"class":646},[637,26922,3895],{"class":650},[637,26924,657],{"class":642},[637,26926,660],{"class":642},[637,26928,16354],{"class":663},[637,26930,660],{"class":642},[637,26932,669],{"class":642},[637,26934,26935,26937,26939],{"class":639,"line":2686},[637,26936,781],{"class":642},[637,26938,867],{"class":646},[637,26940,787],{"class":642},[637,26942,26943,26945,26947],{"class":639,"line":2695},[637,26944,781],{"class":642},[637,26946,3014],{"class":646},[637,26948,14016],{"class":642},[637,26950,26951,26953,26955],{"class":639,"line":2704},[637,26952,905],{"class":642},[637,26954,856],{"class":646},[637,26956,669],{"class":642},[637,26958,26959,26961,26963],{"class":639,"line":2726},[637,26960,732],{"class":642},[637,26962,750],{"class":646},[637,26964,669],{"class":642},[504,26966,26968],{"id":26967},"tips","Tips",[2236,26970,26971,26974],{},[2239,26972,26973],{},"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",[2239,26975,26976],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1349,26978,26979],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":26981},[26982,26985,26988],{"id":624,"depth":578,"text":15,"children":26983},[26984],{"id":26419,"depth":708,"text":26420},{"id":921,"depth":578,"text":922,"children":26986},[26987],{"id":26628,"depth":708,"text":26629},{"id":26967,"depth":578,"text":26968},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":179,"description":26989},"oLHskfHH-pJ6DBy0QJ2dNa5baMGuKNpEQRJ-5FVmwvI",{"id":26994,"title":183,"body":26995,"description":27431,"extension":591,"links":592,"meta":27432,"navigation":594,"path":184,"seo":27433,"stem":185,"__hash__":27434},"docs/2.api/4.materials/holographic-material.md",{"type":501,"value":26996,"toc":27426},[26997,27002,27006,27009,27012,27017,27019,27200,27202,27424],[608,26998,26999],{},[27000,27001],"materials-holographic-material",{},[504,27003,27005],{"id":27004},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[614,27007,27008],{},"Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla Three.js. This enchanting Three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.",[614,27010,27011],{},"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.",[2028,27013,27014],{},[614,27015,27016],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[504,27018,15],{"id":624},[626,27020,27023],{"className":628,"code":27021,"highlights":27022,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { HolographicMaterial, Sphere } from '@tresjs/cientos'\n\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=[0,0,0] />\n \u003CSphere :scale=\"0.5\">\n \u003CHolographicMaterial />\n \u003C/Sphere>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800],[618,27024,27025,27045,27063,27087,27091,27099,27107,27115,27140,27158,27168,27176,27184,27192],{"__ignoreMap":576},[637,27026,27027,27029,27031,27033,27035,27037,27039,27041,27043],{"class":639,"line":577},[637,27028,643],{"class":642},[637,27030,647],{"class":646},[637,27032,651],{"class":650},[637,27034,654],{"class":650},[637,27036,657],{"class":642},[637,27038,660],{"class":642},[637,27040,664],{"class":663},[637,27042,660],{"class":642},[637,27044,669],{"class":642},[637,27046,27047,27049,27051,27053,27055,27057,27059,27061],{"class":639,"line":578},[637,27048,677],{"class":676},[637,27050,680],{"class":642},[637,27052,715],{"class":683},[637,27054,693],{"class":642},[637,27056,696],{"class":676},[637,27058,699],{"class":642},[637,27060,724],{"class":663},[637,27062,705],{"class":642},[637,27064,27066,27068,27070,27073,27075,27077,27079,27081,27083,27085],{"class":27065,"line":708},[639,673],[637,27067,677],{"class":676},[637,27069,680],{"class":642},[637,27071,27072],{"class":683}," HolographicMaterial",[637,27074,687],{"class":642},[637,27076,25697],{"class":683},[637,27078,693],{"class":642},[637,27080,696],{"class":676},[637,27082,699],{"class":642},[637,27084,702],{"class":663},[637,27086,705],{"class":642},[637,27088,27089],{"class":639,"line":729},[637,27090,742],{"emptyLinePlaceholder":594},[637,27092,27093,27095,27097],{"class":639,"line":739},[637,27094,732],{"class":642},[637,27096,647],{"class":646},[637,27098,669],{"class":642},[637,27100,27101,27103,27105],{"class":639,"line":745},[637,27102,643],{"class":642},[637,27104,750],{"class":646},[637,27106,669],{"class":642},[637,27108,27109,27111,27113],{"class":639,"line":755},[637,27110,758],{"class":642},[637,27112,761],{"class":646},[637,27114,669],{"class":642},[637,27116,27117,27119,27121,27123,27125,27127,27129,27131,27133,27135,27138],{"class":639,"line":778},[637,27118,781],{"class":642},[637,27120,784],{"class":646},[637,27122,1508],{"class":650},[637,27124,657],{"class":642},[637,27126,660],{"class":642},[637,27128,13301],{"class":663},[637,27130,660],{"class":642},[637,27132,9637],{"class":650},[637,27134,657],{"class":642},[637,27136,27137],{"class":663},"[0,0,0]",[637,27139,787],{"class":642},[637,27141,27142,27144,27146,27148,27150,27152,27154,27156],{"class":639,"line":790},[637,27143,781],{"class":642},[637,27145,285],{"class":646},[637,27147,813],{"class":650},[637,27149,657],{"class":642},[637,27151,660],{"class":642},[637,27153,1969],{"class":663},[637,27155,660],{"class":642},[637,27157,669],{"class":642},[637,27159,27161,27163,27166],{"class":27160,"line":800},[639,673],[637,27162,853],{"class":642},[637,27164,27165],{"class":646},"HolographicMaterial",[637,27167,787],{"class":642},[637,27169,27170,27172,27174],{"class":639,"line":805},[637,27171,895],{"class":642},[637,27173,285],{"class":646},[637,27175,669],{"class":642},[637,27177,27178,27180,27182],{"class":639,"line":827},[637,27179,781],{"class":642},[637,27181,9702],{"class":646},[637,27183,787],{"class":642},[637,27185,27186,27188,27190],{"class":639,"line":631},[637,27187,905],{"class":642},[637,27189,761],{"class":646},[637,27191,669],{"class":642},[637,27193,27194,27196,27198],{"class":639,"line":850},[637,27195,732],{"class":642},[637,27197,750],{"class":646},[637,27199,669],{"class":642},[504,27201,922],{"id":921},[927,27203,27204,27217],{},[930,27205,27206],{},[933,27207,27208,27210,27212,27214],{},[936,27209,938],{"align":997},[936,27211,941],{"align":997},[936,27213,5990],{},[936,27215,27216],{},"default",[946,27218,27219,27238,27256,27275,27294,27312,27331,27350,27368,27386,27404],{},[933,27220,27221,27226,27229,27233],{},[951,27222,27223],{"align":997},[1692,27224,27225],{},"fresnelAmount",[951,27227,27228],{"align":997},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[951,27230,27231],{},[618,27232,12035],{},[951,27234,27235],{},[618,27236,27237],{},"0.45",[933,27239,27240,27245,27248,27252],{},[951,27241,27242],{"align":997},[1692,27243,27244],{},"fresnelOpacity",[951,27246,27247],{"align":997},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[951,27249,27250],{},[618,27251,12035],{},[951,27253,27254],{},[618,27255,13682],{},[933,27257,27258,27263,27266,27270],{},[951,27259,27260],{"align":997},[1692,27261,27262],{},"scanlineSize",[951,27264,27265],{"align":997},"Size of the scanlines. Ranges from 1 to 15.",[951,27267,27268],{},[618,27269,12035],{},[951,27271,27272],{},[618,27273,27274],{},"8.0",[933,27276,27277,27282,27285,27289],{},[951,27278,27279],{"align":997},[1692,27280,27281],{},"hologramBrightness",[951,27283,27284],{"align":997},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[951,27286,27287],{},[618,27288,12035],{},[951,27290,27291],{},[618,27292,27293],{},"1.2",[933,27295,27296,27301,27304,27308],{},[951,27297,27298],{"align":997},[1692,27299,27300],{},"signalSpeed",[951,27302,27303],{"align":997},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[951,27305,27306],{},[618,27307,12035],{},[951,27309,27310],{},[618,27311,27237],{},[933,27313,27314,27319,27322,27326],{},[951,27315,27316],{"align":997},[1692,27317,27318],{},"hologramColor",[951,27320,27321],{"align":997},"Specifies the color of the hologram.",[951,27323,27324],{},[618,27325,12057],{},[951,27327,27328],{},[618,27329,27330],{},"\"#00d5ff\"",[933,27332,27333,27338,27341,27346],{},[951,27334,27335],{"align":997},[1692,27336,27337],{},"enableBlinking",[951,27339,27340],{"align":997},"Enables or disables the blinking effect.",[951,27342,27343],{},[618,27344,27345],{},"Boolean",[951,27347,27348],{},[618,27349,961],{},[933,27351,27352,27357,27360,27364],{},[951,27353,27354],{"align":997},[1692,27355,27356],{},"hologramOpacity",[951,27358,27359],{"align":997},"Specifies the opacity of the hologram.",[951,27361,27362],{},[618,27363,12035],{},[951,27365,27366],{},[618,27367,13682],{},[933,27369,27370,27375,27378,27382],{},[951,27371,27372],{"align":997},[1692,27373,27374],{},"blinkFresnelOnly",[951,27376,27377],{"align":997},"Enables or disables the blinking effect for the Fresnel only.",[951,27379,27380],{},[618,27381,27345],{},[951,27383,27384],{},[618,27385,961],{},[933,27387,27388,27393,27396,27400],{},[951,27389,27390],{"align":997},[1692,27391,27392],{},"enableAdditive",[951,27394,27395],{"align":997},"Enables or disables the Additive Blend Mode.",[951,27397,27398],{},[618,27399,27345],{},[951,27401,27402],{},[618,27403,961],{},[933,27405,27406,27411,27414,27419],{},[951,27407,27408],{"align":997},[1692,27409,27410],{},"side",[951,27412,27413],{"align":997},"Specifies side for the material, as String.",[951,27415,27416],{},[618,27417,27418],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[951,27420,27421],{},[618,27422,27423],{},"FrontSide",[1349,27425,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":27427},[27428,27429,27430],{"id":27004,"depth":578,"text":27005},{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":183,"description":27431},"xIEPkRUmuLTvzMRufIpFP12igw1vvqL43oWczW_i5i4",{"id":27436,"title":187,"body":27437,"description":27602,"extension":591,"links":592,"meta":27603,"navigation":594,"path":188,"seo":27604,"stem":189,"__hash__":27605},"docs/2.api/4.materials/mesh-discard-material.md",{"type":501,"value":27438,"toc":27599},[27439,27445,27447,27597],[614,27440,27441,27444],{},[618,27442,27443],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[504,27446,15],{"id":624},[626,27448,27451],{"className":628,"code":27449,"highlights":27450,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshDiscardMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera />\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CMeshDiscardMaterial />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,805],[618,27452,27453,27473,27491,27511,27519,27523,27531,27539,27547,27555,27563,27573,27581,27589],{"__ignoreMap":576},[637,27454,27455,27457,27459,27461,27463,27465,27467,27469,27471],{"class":639,"line":577},[637,27456,643],{"class":642},[637,27458,647],{"class":646},[637,27460,651],{"class":650},[637,27462,654],{"class":650},[637,27464,657],{"class":642},[637,27466,660],{"class":642},[637,27468,664],{"class":663},[637,27470,660],{"class":642},[637,27472,669],{"class":642},[637,27474,27475,27477,27479,27481,27483,27485,27487,27489],{"class":639,"line":578},[637,27476,677],{"class":676},[637,27478,680],{"class":642},[637,27480,715],{"class":683},[637,27482,693],{"class":642},[637,27484,696],{"class":676},[637,27486,699],{"class":642},[637,27488,724],{"class":663},[637,27490,705],{"class":642},[637,27492,27494,27496,27498,27501,27503,27505,27507,27509],{"class":27493,"line":708},[639,673],[637,27495,677],{"class":676},[637,27497,680],{"class":642},[637,27499,27500],{"class":683}," MeshDiscardMaterial",[637,27502,693],{"class":642},[637,27504,696],{"class":676},[637,27506,699],{"class":642},[637,27508,702],{"class":663},[637,27510,705],{"class":642},[637,27512,27513,27515,27517],{"class":639,"line":729},[637,27514,732],{"class":642},[637,27516,647],{"class":646},[637,27518,669],{"class":642},[637,27520,27521],{"class":639,"line":739},[637,27522,742],{"emptyLinePlaceholder":594},[637,27524,27525,27527,27529],{"class":639,"line":745},[637,27526,643],{"class":642},[637,27528,750],{"class":646},[637,27530,669],{"class":642},[637,27532,27533,27535,27537],{"class":639,"line":755},[637,27534,758],{"class":642},[637,27536,761],{"class":646},[637,27538,669],{"class":642},[637,27540,27541,27543,27545],{"class":639,"line":778},[637,27542,781],{"class":642},[637,27544,784],{"class":646},[637,27546,787],{"class":642},[637,27548,27549,27551,27553],{"class":639,"line":790},[637,27550,781],{"class":642},[637,27552,856],{"class":646},[637,27554,669],{"class":642},[637,27556,27557,27559,27561],{"class":639,"line":800},[637,27558,853],{"class":642},[637,27560,867],{"class":646},[637,27562,787],{"class":642},[637,27564,27566,27568,27571],{"class":27565,"line":805},[639,673],[637,27567,853],{"class":642},[637,27569,27570],{"class":646},"MeshDiscardMaterial",[637,27572,787],{"class":642},[637,27574,27575,27577,27579],{"class":639,"line":827},[637,27576,895],{"class":642},[637,27578,856],{"class":646},[637,27580,669],{"class":642},[637,27582,27583,27585,27587],{"class":639,"line":631},[637,27584,905],{"class":642},[637,27586,761],{"class":646},[637,27588,669],{"class":642},[637,27590,27591,27593,27595],{"class":639,"line":850},[637,27592,732],{"class":642},[637,27594,750],{"class":646},[637,27596,669],{"class":642},[1349,27598,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":27600},[27601],{"id":624,"depth":578,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":187,"description":27602},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":27607,"title":191,"body":27608,"description":28216,"extension":591,"links":592,"meta":28217,"navigation":594,"path":192,"seo":28218,"stem":193,"__hash__":28219},"docs/2.api/4.materials/mesh-portal-material.md",{"type":501,"value":27609,"toc":28211},[27610,27615,27623,27639,27651,27653,27944,27946,28039,28043,28053,28129,28173,28197,28208],[608,27611,27612],{},[27613,27614],"materials-mesh-portal-material",{},[614,27616,2799,27617,9489,27619,27622],{},[618,27618,7338],{},[618,27620,27621],{},"\u003CMeshPortalMaterial />"," component that renders its\ndeclarative children into a private off-main scene and projects that scene onto the\nhost mesh as a perspective-correct window.",[614,27624,27625,27626,27629,27630,27633,27634,27636,27637,5597],{},"Children declared inside the component render into the ",[1692,27627,27628],{},"portal scene",", not the main\nscene. The portal scene is rendered to a frame buffer each frame using the active\ncamera, so contents sit in world-space (move the camera and you get parallax through\nthe surface, not a flat decal). The mesh geometry masks the result, and ",[618,27631,27632],{},"blend","\ncross-fades between the world (",[618,27635,965],{},") and the portal (",[618,27638,1897],{},[2028,27640,27641],{},[614,27642,27643,27644,27650],{},"This component is a port of the ",[1140,27645,27649],{"href":27646,"rel":27647,"target":27648},"https://drei.docs.pmnd.rs/portals/mesh-portal-material",[1144],"_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[504,27652,15],{"id":624},[626,27654,27656],{"className":628,"code":27655,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshPortalMaterial, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" />\n \u003COrbitControls />\n \u003CTresMesh>\n \u003CTresPlaneGeometry :args=\"[3, 4]\" />\n \u003CMeshPortalMaterial :blend=\"0\">\n \u003C!-- children render INTO the portal scene -->\n \u003CTresAmbientLight :intensity=\"0.5\" />\n \u003CTresMesh :position=\"[0, 0, -1]\">\n \u003CTresTorusKnotGeometry :args=\"[0.6, 0.25, 128, 32]\" />\n \u003CTresMeshStandardMaterial color=\"#fbb03b\" />\n \u003C/TresMesh>\n \u003C/MeshPortalMaterial>\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,27657,27658,27678,27696,27719,27727,27731,27739,27747,27766,27774,27782,27802,27822,27827,27845,27864,27885,27903,27912,27920,27928,27936],{"__ignoreMap":576},[637,27659,27660,27662,27664,27666,27668,27670,27672,27674,27676],{"class":639,"line":577},[637,27661,643],{"class":642},[637,27663,647],{"class":646},[637,27665,651],{"class":650},[637,27667,654],{"class":650},[637,27669,657],{"class":642},[637,27671,660],{"class":642},[637,27673,664],{"class":663},[637,27675,660],{"class":642},[637,27677,669],{"class":642},[637,27679,27680,27682,27684,27686,27688,27690,27692,27694],{"class":639,"line":578},[637,27681,677],{"class":676},[637,27683,680],{"class":642},[637,27685,715],{"class":683},[637,27687,693],{"class":642},[637,27689,696],{"class":676},[637,27691,699],{"class":642},[637,27693,724],{"class":663},[637,27695,705],{"class":642},[637,27697,27698,27700,27702,27705,27707,27709,27711,27713,27715,27717],{"class":639,"line":708},[637,27699,677],{"class":676},[637,27701,680],{"class":642},[637,27703,27704],{"class":683}," MeshPortalMaterial",[637,27706,687],{"class":642},[637,27708,690],{"class":683},[637,27710,693],{"class":642},[637,27712,696],{"class":676},[637,27714,699],{"class":642},[637,27716,702],{"class":663},[637,27718,705],{"class":642},[637,27720,27721,27723,27725],{"class":639,"line":729},[637,27722,732],{"class":642},[637,27724,647],{"class":646},[637,27726,669],{"class":642},[637,27728,27729],{"class":639,"line":739},[637,27730,742],{"emptyLinePlaceholder":594},[637,27732,27733,27735,27737],{"class":639,"line":745},[637,27734,643],{"class":642},[637,27736,750],{"class":646},[637,27738,669],{"class":642},[637,27740,27741,27743,27745],{"class":639,"line":755},[637,27742,758],{"class":642},[637,27744,761],{"class":646},[637,27746,669],{"class":642},[637,27748,27749,27751,27753,27755,27757,27759,27762,27764],{"class":639,"line":778},[637,27750,781],{"class":642},[637,27752,784],{"class":646},[637,27754,1508],{"class":650},[637,27756,657],{"class":642},[637,27758,660],{"class":642},[637,27760,27761],{"class":663},"[0, 0, 6]",[637,27763,660],{"class":642},[637,27765,787],{"class":642},[637,27767,27768,27770,27772],{"class":639,"line":790},[637,27769,781],{"class":642},[637,27771,795],{"class":646},[637,27773,787],{"class":642},[637,27775,27776,27778,27780],{"class":639,"line":800},[637,27777,781],{"class":642},[637,27779,856],{"class":646},[637,27781,669],{"class":642},[637,27783,27784,27786,27789,27791,27793,27795,27798,27800],{"class":639,"line":805},[637,27785,853],{"class":642},[637,27787,27788],{"class":646},"TresPlaneGeometry",[637,27790,1982],{"class":650},[637,27792,657],{"class":642},[637,27794,660],{"class":642},[637,27796,27797],{"class":663},"[3, 4]",[637,27799,660],{"class":642},[637,27801,787],{"class":642},[637,27803,27804,27806,27809,27812,27814,27816,27818,27820],{"class":639,"line":827},[637,27805,853],{"class":642},[637,27807,27808],{"class":646},"MeshPortalMaterial",[637,27810,27811],{"class":650}," :blend",[637,27813,657],{"class":642},[637,27815,660],{"class":642},[637,27817,965],{"class":663},[637,27819,660],{"class":642},[637,27821,669],{"class":642},[637,27823,27824],{"class":639,"line":631},[637,27825,27826],{"class":1231}," \u003C!-- children render INTO the portal scene -->\n",[637,27828,27829,27831,27833,27835,27837,27839,27841,27843],{"class":639,"line":850},[637,27830,864],{"class":642},[637,27832,9702],{"class":646},[637,27834,1890],{"class":650},[637,27836,657],{"class":642},[637,27838,660],{"class":642},[637,27840,1969],{"class":663},[637,27842,660],{"class":642},[637,27844,787],{"class":642},[637,27846,27847,27849,27851,27853,27855,27857,27860,27862],{"class":639,"line":861},[637,27848,864],{"class":642},[637,27850,856],{"class":646},[637,27852,1508],{"class":650},[637,27854,657],{"class":642},[637,27856,660],{"class":642},[637,27858,27859],{"class":663},"[0, 0, -1]",[637,27861,660],{"class":642},[637,27863,669],{"class":642},[637,27865,27866,27869,27872,27874,27876,27878,27881,27883],{"class":639,"line":872},[637,27867,27868],{"class":642}," \u003C",[637,27870,27871],{"class":646},"TresTorusKnotGeometry",[637,27873,1982],{"class":650},[637,27875,657],{"class":642},[637,27877,660],{"class":642},[637,27879,27880],{"class":663},"[0.6, 0.25, 128, 32]",[637,27882,660],{"class":642},[637,27884,787],{"class":642},[637,27886,27887,27889,27891,27893,27895,27897,27899,27901],{"class":639,"line":882},[637,27888,27868],{"class":642},[637,27890,2709],{"class":646},[637,27892,2712],{"class":650},[637,27894,657],{"class":642},[637,27896,660],{"class":642},[637,27898,10174],{"class":663},[637,27900,660],{"class":642},[637,27902,787],{"class":642},[637,27904,27905,27908,27910],{"class":639,"line":632},[637,27906,27907],{"class":642}," \u003C/",[637,27909,856],{"class":646},[637,27911,669],{"class":642},[637,27913,27914,27916,27918],{"class":639,"line":902},[637,27915,885],{"class":642},[637,27917,27808],{"class":646},[637,27919,669],{"class":642},[637,27921,27922,27924,27926],{"class":639,"line":912},[637,27923,895],{"class":642},[637,27925,856],{"class":646},[637,27927,669],{"class":642},[637,27929,27930,27932,27934],{"class":639,"line":2648},[637,27931,905],{"class":642},[637,27933,761],{"class":646},[637,27935,669],{"class":642},[637,27937,27938,27940,27942],{"class":639,"line":2657},[637,27939,732],{"class":642},[637,27941,750],{"class":646},[637,27943,669],{"class":642},[504,27945,922],{"id":921},[927,27947,27948,27960],{},[930,27949,27950],{},[933,27951,27952,27954,27956,27958],{},[936,27953,938],{},[936,27955,5990],{},[936,27957,944],{},[936,27959,941],{},[946,27961,27962,27984,28003,28021],{},[933,27963,27964,27968,27972,27976],{},[951,27965,27966],{},[618,27967,27632],{},[951,27969,27970],{},[618,27971,5375],{},[951,27973,27974],{},[618,27975,965],{},[951,27977,27978,27980,27981,27983],{},[618,27979,965],{}," = world only, ",[618,27982,1897],{}," = portal only; cross-fades between.",[933,27985,27986,27991,27995,28000],{},[951,27987,27988],{},[618,27989,27990],{},"resolution",[951,27992,27993],{},[618,27994,5375],{},[951,27996,27997],{},[618,27998,27999],{},"512",[951,28001,28002],{},"Frame buffer resolution for the portal render.",[933,28004,28005,28010,28014,28018],{},[951,28006,28007],{},[618,28008,28009],{},"worldUnits",[951,28011,28012],{},[618,28013,17582],{},[951,28015,28016],{},[618,28017,971],{},[951,28019,28020],{},"Keep portal contents in world units instead of host-relative.",[933,28022,28023,28028,28032,28036],{},[951,28024,28025],{},[618,28026,28027],{},"renderPriority",[951,28029,28030],{},[618,28031,5375],{},[951,28033,28034],{},[618,28035,965],{},[951,28037,28038],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[504,28040,28042],{"id":28041},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[614,28044,28045,28048,28049,28052],{},[618,28046,28047],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[1692,28050,28051],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[626,28054,28056],{"className":628,"code":28055,"language":633,"meta":576,"style":576},"\u003CMeshPortalMaterial :blend=\"blend\">\n \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n \u003CSuspense>\n \u003CEnvironment preset=\"dawn\" :background=\"true\" />\n \u003C/Suspense>\n\n \u003C!-- Or declarative attach (also lands on the portal scene) -->\n \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" />\n\n \u003C!-- ...portal scene contents... -->\n\u003C/MeshPortalMaterial>\n",[618,28057,28058,28078,28083,28088,28093,28098,28102,28107,28112,28116,28121],{"__ignoreMap":576},[637,28059,28060,28062,28064,28066,28068,28070,28072,28074,28076],{"class":639,"line":577},[637,28061,643],{"class":642},[637,28063,27808],{"class":646},[637,28065,3052],{"class":642},[637,28067,27632],{"class":650},[637,28069,657],{"class":642},[637,28071,660],{"class":642},[637,28073,27632],{"class":683},[637,28075,660],{"class":642},[637,28077,669],{"class":642},[637,28079,28080],{"class":639,"line":578},[637,28081,28082],{"class":683}," \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[637,28084,28085],{"class":639,"line":708},[637,28086,28087],{"class":683}," \u003CSuspense>\n",[637,28089,28090],{"class":639,"line":729},[637,28091,28092],{"class":683}," \u003CEnvironment preset=\"dawn\" :background=\"true\" />\n",[637,28094,28095],{"class":639,"line":739},[637,28096,28097],{"class":683}," \u003C/Suspense>\n",[637,28099,28100],{"class":639,"line":745},[637,28101,742],{"emptyLinePlaceholder":594},[637,28103,28104],{"class":639,"line":755},[637,28105,28106],{"class":683}," \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[637,28108,28109],{"class":639,"line":778},[637,28110,28111],{"class":683}," \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" />\n",[637,28113,28114],{"class":639,"line":790},[637,28115,742],{"emptyLinePlaceholder":594},[637,28117,28118],{"class":639,"line":800},[637,28119,28120],{"class":683}," \u003C!-- ...portal scene contents... -->\n",[637,28122,28123,28125,28127],{"class":639,"line":805},[637,28124,732],{"class":642},[637,28126,27808],{"class":646},[637,28128,669],{"class":642},[2028,28130,28131],{},[614,28132,28133,28136,28137,28140,28141,28143,28144,8519,28147,28150,28151,8519,28154,28157,28158,28161,28162,28165,28166,28169,28170,28172],{},[1692,28134,28135],{},"How it works:"," the component ",[618,28138,28139],{},"provide()","s a context whose ",[618,28142,18481],{}," points at the\nprivate portal scene. Vue's ",[618,28145,28146],{},"provide",[618,28148,28149],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[618,28152,28153],{},"\u003CTresPortal>",[618,28155,28156],{},"\u003CTeleport>","), so both imperative\nhelpers (",[618,28159,28160],{},"useTres().scene",", e.g. ",[618,28163,28164],{},"\u003CEnvironment>",") and declarative ",[618,28167,28168],{},"attach"," configure\nthe portal scene. Only the ",[618,28171,18481],{}," is swapped — renderer, camera and sizes are shared.",[3222,28174,28175],{},[614,28176,28177,28180,28181,28183,28184,28187,28188,28190,28191,28196],{},[1692,28178,28179],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[618,28182,27632],{}," takeover stays\nin sync. To do this it calls ",[618,28185,28186],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[618,28189,28047],{}," effectively opts out of\n",[1140,28192,28195],{"href":28193,"rel":28194,"target":27648},"https://docs.tresjs.org/api/advanced/performance#mode-on-demand",[1144],"on-demand rendering"," while mounted.",[2028,28198,28199],{},[614,28200,28201,3217,28204,28207],{},[1692,28202,28203],{},"Limitations (MVP):",[618,28205,28206],{},"blur"," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1349,28209,28210],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":28212},[28213,28214,28215],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":28041,"depth":578,"text":28042},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.",{},{"title":191,"description":28216},"ohfbKC7GzCyDLCAu6PE_RcaQcHLETnumKwxeb3qJ82E",{"id":28221,"title":195,"body":28222,"description":28939,"extension":591,"links":592,"meta":28940,"navigation":594,"path":196,"seo":28941,"stem":197,"__hash__":28942},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":501,"value":28223,"toc":28935},[28224,28229,28240,28249,28256,28258,28640,28642,28912,28933],[608,28225,28226],{},[28227,28228],"materials-mesh-reflection-material",{},[614,28230,2799,28231,9489,28233,28236,28237,1146],{},[618,28232,7338],{},[618,28234,28235],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[618,28238,28239],{},"Scene",[614,28241,28242,28243,28248],{},"The component is based on the excellent ",[1140,28244,28247],{"href":28245,"rel":28246},"https://github.com/pmndrs/drei",[1144],"Drei"," component of the same name.",[614,28250,28251,28252,28255],{},"It extends ",[618,28253,28254],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[504,28257,15],{"id":624},[626,28259,28262],{"className":628,"code":28260,"highlights":28261,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshReflectionMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\">\n \u003CTresPlaneGeometry :args=\"[10, 10]\" />\n \u003CMeshReflectionMaterial\n :blur=\"[300, 100]\"\n :mixBlur=\"30\"\n :mixStrength=\"80\"\n :mixContrast=\"1\"\n color=\"#a0a0a0\"\n metalness=\"0.5\"\n roughness=\"1\"\n mirror=\"0\"\n />\n \u003C/TresMesh>\n \u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,872,882,632,902],[618,28263,28264,28284,28302,28322,28330,28334,28342,28350,28378,28398,28416,28423,28437,28451,28465,28478,28492,28506,28520,28534,28538,28546,28564,28572,28590,28598,28606,28624,28632],{"__ignoreMap":576},[637,28265,28266,28268,28270,28272,28274,28276,28278,28280,28282],{"class":639,"line":577},[637,28267,643],{"class":642},[637,28269,647],{"class":646},[637,28271,651],{"class":650},[637,28273,654],{"class":650},[637,28275,657],{"class":642},[637,28277,660],{"class":642},[637,28279,664],{"class":663},[637,28281,660],{"class":642},[637,28283,669],{"class":642},[637,28285,28286,28288,28290,28292,28294,28296,28298,28300],{"class":639,"line":578},[637,28287,677],{"class":676},[637,28289,680],{"class":642},[637,28291,715],{"class":683},[637,28293,693],{"class":642},[637,28295,696],{"class":676},[637,28297,699],{"class":642},[637,28299,724],{"class":663},[637,28301,705],{"class":642},[637,28303,28305,28307,28309,28312,28314,28316,28318,28320],{"class":28304,"line":708},[639,673],[637,28306,677],{"class":676},[637,28308,680],{"class":642},[637,28310,28311],{"class":683}," MeshReflectionMaterial",[637,28313,693],{"class":642},[637,28315,696],{"class":676},[637,28317,699],{"class":642},[637,28319,702],{"class":663},[637,28321,705],{"class":642},[637,28323,28324,28326,28328],{"class":639,"line":729},[637,28325,732],{"class":642},[637,28327,647],{"class":646},[637,28329,669],{"class":642},[637,28331,28332],{"class":639,"line":739},[637,28333,742],{"emptyLinePlaceholder":594},[637,28335,28336,28338,28340],{"class":639,"line":745},[637,28337,643],{"class":642},[637,28339,750],{"class":646},[637,28341,669],{"class":642},[637,28343,28344,28346,28348],{"class":639,"line":755},[637,28345,758],{"class":642},[637,28347,761],{"class":646},[637,28349,669],{"class":642},[637,28351,28352,28354,28356,28358,28360,28362,28364,28366,28368,28370,28372,28374,28376],{"class":639,"line":778},[637,28353,781],{"class":642},[637,28355,784],{"class":646},[637,28357,1508],{"class":650},[637,28359,657],{"class":642},[637,28361,660],{"class":642},[637,28363,13301],{"class":663},[637,28365,660],{"class":642},[637,28367,9637],{"class":650},[637,28369,657],{"class":642},[637,28371,660],{"class":642},[637,28373,9644],{"class":663},[637,28375,660],{"class":642},[637,28377,787],{"class":642},[637,28379,28380,28382,28384,28387,28389,28391,28394,28396],{"class":639,"line":790},[637,28381,781],{"class":642},[637,28383,856],{"class":646},[637,28385,28386],{"class":650}," :rotation",[637,28388,657],{"class":642},[637,28390,660],{"class":642},[637,28392,28393],{"class":663},"[-Math.PI / 2, 0, 0]",[637,28395,660],{"class":642},[637,28397,669],{"class":642},[637,28399,28400,28402,28404,28406,28408,28410,28412,28414],{"class":639,"line":800},[637,28401,853],{"class":642},[637,28403,27788],{"class":646},[637,28405,1982],{"class":650},[637,28407,657],{"class":642},[637,28409,660],{"class":642},[637,28411,11982],{"class":663},[637,28413,660],{"class":642},[637,28415,787],{"class":642},[637,28417,28418,28420],{"class":639,"line":805},[637,28419,853],{"class":642},[637,28421,28422],{"class":646},"MeshReflectionMaterial\n",[637,28424,28425,28428,28430,28432,28435],{"class":639,"line":827},[637,28426,28427],{"class":650}," :blur",[637,28429,657],{"class":642},[637,28431,660],{"class":642},[637,28433,28434],{"class":663},"[300, 100]",[637,28436,3154],{"class":642},[637,28438,28439,28442,28444,28446,28449],{"class":639,"line":631},[637,28440,28441],{"class":650}," :mixBlur",[637,28443,657],{"class":642},[637,28445,660],{"class":642},[637,28447,28448],{"class":663},"30",[637,28450,3154],{"class":642},[637,28452,28453,28456,28458,28460,28463],{"class":639,"line":850},[637,28454,28455],{"class":650}," :mixStrength",[637,28457,657],{"class":642},[637,28459,660],{"class":642},[637,28461,28462],{"class":663},"80",[637,28464,3154],{"class":642},[637,28466,28467,28470,28472,28474,28476],{"class":639,"line":861},[637,28468,28469],{"class":650}," :mixContrast",[637,28471,657],{"class":642},[637,28473,660],{"class":642},[637,28475,1897],{"class":663},[637,28477,3154],{"class":642},[637,28479,28481,28483,28485,28487,28490],{"class":28480,"line":872},[639,673],[637,28482,8663],{"class":650},[637,28484,657],{"class":642},[637,28486,660],{"class":642},[637,28488,28489],{"class":663},"#a0a0a0",[637,28491,3154],{"class":642},[637,28493,28495,28498,28500,28502,28504],{"class":28494,"line":882},[639,673],[637,28496,28497],{"class":650}," metalness",[637,28499,657],{"class":642},[637,28501,660],{"class":642},[637,28503,1969],{"class":663},[637,28505,3154],{"class":642},[637,28507,28509,28512,28514,28516,28518],{"class":28508,"line":632},[639,673],[637,28510,28511],{"class":650}," roughness",[637,28513,657],{"class":642},[637,28515,660],{"class":642},[637,28517,1897],{"class":663},[637,28519,3154],{"class":642},[637,28521,28523,28526,28528,28530,28532],{"class":28522,"line":902},[639,673],[637,28524,28525],{"class":650}," mirror",[637,28527,657],{"class":642},[637,28529,660],{"class":642},[637,28531,965],{"class":663},[637,28533,3154],{"class":642},[637,28535,28536],{"class":639,"line":912},[637,28537,8054],{"class":642},[637,28539,28540,28542,28544],{"class":639,"line":2648},[637,28541,895],{"class":642},[637,28543,856],{"class":646},[637,28545,669],{"class":642},[637,28547,28548,28550,28552,28554,28556,28558,28560,28562],{"class":639,"line":2657},[637,28549,781],{"class":642},[637,28551,856],{"class":646},[637,28553,1508],{"class":650},[637,28555,657],{"class":642},[637,28557,660],{"class":642},[637,28559,25572],{"class":663},[637,28561,660],{"class":642},[637,28563,669],{"class":642},[637,28565,28566,28568,28570],{"class":639,"line":2677},[637,28567,853],{"class":642},[637,28569,867],{"class":646},[637,28571,787],{"class":642},[637,28573,28574,28576,28578,28580,28582,28584,28586,28588],{"class":639,"line":2686},[637,28575,853],{"class":642},[637,28577,2709],{"class":646},[637,28579,2712],{"class":650},[637,28581,657],{"class":642},[637,28583,660],{"class":642},[637,28585,13348],{"class":663},[637,28587,660],{"class":642},[637,28589,787],{"class":642},[637,28591,28592,28594,28596],{"class":639,"line":2695},[637,28593,895],{"class":642},[637,28595,856],{"class":646},[637,28597,669],{"class":642},[637,28599,28600,28602,28604],{"class":639,"line":2704},[637,28601,781],{"class":642},[637,28603,9702],{"class":646},[637,28605,787],{"class":642},[637,28607,28608,28610,28612,28614,28616,28618,28620,28622],{"class":639,"line":2726},[637,28609,781],{"class":642},[637,28611,9721],{"class":646},[637,28613,1508],{"class":650},[637,28615,657],{"class":642},[637,28617,660],{"class":642},[637,28619,13383],{"class":663},[637,28621,660],{"class":642},[637,28623,787],{"class":642},[637,28625,28626,28628,28630],{"class":639,"line":2770},[637,28627,905],{"class":642},[637,28629,761],{"class":646},[637,28631,669],{"class":642},[637,28633,28634,28636,28638],{"class":639,"line":2779},[637,28635,732],{"class":642},[637,28637,750],{"class":646},[637,28639,669],{"class":642},[504,28641,922],{"id":921},[927,28643,28644,28654],{},[930,28645,28646],{},[933,28647,28648,28650,28652],{},[936,28649,8110],{"align":997},[936,28651,941],{"align":997},[936,28653,944],{},[946,28655,28656,28670,28684,28698,28715,28729,28743,28757,28771,28785,28802,28816,28830,28844,28868,28882,28898],{},[933,28657,28658,28662,28665],{},[951,28659,28660],{"align":997},[618,28661,27990],{},[951,28663,28664],{"align":997},"Length in pixels of one side of the square reflective textures",[951,28666,28667],{},[618,28668,28669],{},"256",[933,28671,28672,28677,28680],{},[951,28673,28674],{"align":997},[618,28675,28676],{},"mix",[951,28678,28679],{"align":997},"Overall strength of the reflection",[951,28681,28682],{},[618,28683,1897],{},[933,28685,28686,28691,28694],{},[951,28687,28688],{"align":997},[618,28689,28690],{},"sharpMix",[951,28692,28693],{"align":997},"Strength of the sharp reflection on smooth surfaces",[951,28695,28696],{},[618,28697,1897],{},[933,28699,28700,28705,28711],{},[951,28701,28702],{"align":997},[618,28703,28704],{},"sharpDepthScale",[951,28706,28707,28708,28710],{"align":997},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,28709,965],{},", a depth texture will be created",[951,28712,28713],{},[618,28714,1897],{},[933,28716,28717,28722,28725],{},[951,28718,28719],{"align":997},[618,28720,28721],{},"sharpDepthBias",[951,28723,28724],{"align":997},"Sharp reflection depth falloff bias",[951,28726,28727],{},[618,28728,965],{},[933,28730,28731,28736,28739],{},[951,28732,28733],{"align":997},[618,28734,28735],{},"sharpDepthEdgeMin",[951,28737,28738],{"align":997},"Sharp reflection depth falloff start",[951,28740,28741],{},[618,28742,965],{},[933,28744,28745,28750,28753],{},[951,28746,28747],{"align":997},[618,28748,28749],{},"sharpDepthEdgeMax",[951,28751,28752],{"align":997},"Sharp reflection depth falloff end",[951,28754,28755],{},[618,28756,5752],{},[933,28758,28759,28764,28767],{},[951,28760,28761],{"align":997},[618,28762,28763],{},"blurMixSmooth",[951,28765,28766],{"align":997},"Strength of the blurred reflection on smooth surfaces",[951,28768,28769],{},[618,28770,1897],{},[933,28772,28773,28778,28781],{},[951,28774,28775],{"align":997},[618,28776,28777],{},"blurMixRough",[951,28779,28780],{"align":997},"Strength of the blurred reflection on rough surfaces",[951,28782,28783],{},[618,28784,1897],{},[933,28786,28787,28792,28798],{},[951,28788,28789],{"align":997},[618,28790,28791],{},"blurDepthScale",[951,28793,28794,28795,28797],{"align":997},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,28796,965],{},", depth texture will be rendered",[951,28799,28800],{},[618,28801,1897],{},[933,28803,28804,28809,28812],{},[951,28805,28806],{"align":997},[618,28807,28808],{},"blurDepthBias",[951,28810,28811],{"align":997},"Blurred reflection depth spread bias",[951,28813,28814],{},[618,28815,965],{},[933,28817,28818,28823,28826],{},[951,28819,28820],{"align":997},[618,28821,28822],{},"blurDepthEdgeMin",[951,28824,28825],{"align":997},"Blurred reflection depth spread start",[951,28827,28828],{},[618,28829,965],{},[933,28831,28832,28837,28840],{},[951,28833,28834],{"align":997},[618,28835,28836],{},"blurDepthEdgeMax",[951,28838,28839],{"align":997},"Blurred reflection depth spread end",[951,28841,28842],{},[618,28843,5752],{},[933,28845,28846,28851,28864],{},[951,28847,28848],{"align":997},[618,28849,28850],{},"blurSize",[951,28852,28853,28854,28857,28858,5634,28861,28863],{"align":997},"Size of the blur. If ",[618,28855,28856],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[618,28859,28860],{},"[0, 0]",[618,28862,965],{},", a blur texture will be rendered",[951,28865,28866],{},[618,28867,28860],{},[933,28869,28870,28875,28878],{},[951,28871,28872],{"align":997},[618,28873,28874],{},"distortionMap",[951,28876,28877],{"align":997},"Texture for offsetting the reflection",[951,28879,28880],{},[618,28881,1167],{},[933,28883,28884,28889,28894],{},[951,28885,28886],{"align":997},[618,28887,28888],{},"distortion",[951,28890,28891,28892],{"align":997},"Influence of ",[618,28893,28874],{},[951,28895,28896],{},[618,28897,965],{},[933,28899,28900,28905,28908],{},[951,28901,28902],{"align":997},[618,28903,28904],{},"reflectorOffset",[951,28906,28907],{"align":997},"Offsets the reflection",[951,28909,28910],{},[618,28911,965],{},[614,28913,28914,28915,28917,28918,1695,28920,1695,28922,1695,28924,1695,28926,1695,28928,1695,28930,28932],{},"Additionally, the component extends ",[618,28916,28254],{}," and accepts all the same props including ",[618,28919,7568],{},[618,28921,21479],{},[618,28923,21464],{},[618,28925,3004],{},[618,28927,21363],{},[618,28929,21382],{},[618,28931,21401],{},", and more.",[1349,28934,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":28936},[28937,28938],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":195,"description":28939},"-dhKiUbKV5dPMARGNmTRwR-6x_sfsh0AlnXCQ6x3KUM",{"id":28944,"title":199,"body":28945,"description":29708,"extension":591,"links":592,"meta":29709,"navigation":594,"path":200,"seo":29710,"stem":201,"__hash__":29711},"docs/2.api/4.materials/mesh-transmission-material.md",{"type":501,"value":28946,"toc":29703},[28947,28952,28960,28967,28976,28978,29233,29235,29659,29664,29666,29701],[608,28948,28949],{},[28950,28951],"materials-mesh-transmission-material",{},[614,28953,2799,28954,9489,28956,28959],{},[618,28955,7338],{},[618,28957,28958],{},"\u003CMeshTransmissionMaterial />"," component that produces high-quality glass and transmission effects.",[614,28961,28962,28963,28966],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[618,28964,28965],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[2028,28968,28969],{},[614,28970,27643,28971,27650],{},[1140,28972,28975],{"href":28973,"rel":28974,"target":27648},"https://drei.docs.pmnd.rs/shaders/mesh-transmission-material",[1144],"drei MeshTransmissionMaterial",[504,28977,15],{"id":624},[626,28979,28982],{"className":628,"code":28980,"highlights":28981,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshTransmissionMaterial, Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n \u003CEnvironment preset=\"city\" />\n \u003CTresMesh>\n \u003CTresTorusKnotGeometry :args=\"[1, 0.3, 128, 32]\" />\n \u003CMeshTransmissionMaterial\n :transmission=\"1\"\n :thickness=\"0.5\"\n :chromatic-aberration=\"0.03\"\n :resolution=\"512\"\n />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850,861,872],[618,28983,28984,29004,29022,29046,29054,29058,29066,29074,29092,29111,29120,29140,29148,29162,29176,29191,29205,29209,29217,29225],{"__ignoreMap":576},[637,28985,28986,28988,28990,28992,28994,28996,28998,29000,29002],{"class":639,"line":577},[637,28987,643],{"class":642},[637,28989,647],{"class":646},[637,28991,651],{"class":650},[637,28993,654],{"class":650},[637,28995,657],{"class":642},[637,28997,660],{"class":642},[637,28999,664],{"class":663},[637,29001,660],{"class":642},[637,29003,669],{"class":642},[637,29005,29006,29008,29010,29012,29014,29016,29018,29020],{"class":639,"line":578},[637,29007,677],{"class":676},[637,29009,680],{"class":642},[637,29011,715],{"class":683},[637,29013,693],{"class":642},[637,29015,696],{"class":676},[637,29017,699],{"class":642},[637,29019,724],{"class":663},[637,29021,705],{"class":642},[637,29023,29025,29027,29029,29032,29034,29036,29038,29040,29042,29044],{"class":29024,"line":708},[639,673],[637,29026,677],{"class":676},[637,29028,680],{"class":642},[637,29030,29031],{"class":683}," MeshTransmissionMaterial",[637,29033,687],{"class":642},[637,29035,20963],{"class":683},[637,29037,693],{"class":642},[637,29039,696],{"class":676},[637,29041,699],{"class":642},[637,29043,702],{"class":663},[637,29045,705],{"class":642},[637,29047,29048,29050,29052],{"class":639,"line":729},[637,29049,732],{"class":642},[637,29051,647],{"class":646},[637,29053,669],{"class":642},[637,29055,29056],{"class":639,"line":739},[637,29057,742],{"emptyLinePlaceholder":594},[637,29059,29060,29062,29064],{"class":639,"line":745},[637,29061,643],{"class":642},[637,29063,750],{"class":646},[637,29065,669],{"class":642},[637,29067,29068,29070,29072],{"class":639,"line":755},[637,29069,758],{"class":642},[637,29071,761],{"class":646},[637,29073,669],{"class":642},[637,29075,29076,29078,29080,29082,29084,29086,29088,29090],{"class":639,"line":778},[637,29077,781],{"class":642},[637,29079,784],{"class":646},[637,29081,1508],{"class":650},[637,29083,657],{"class":642},[637,29085,660],{"class":642},[637,29087,9632],{"class":663},[637,29089,660],{"class":642},[637,29091,787],{"class":642},[637,29093,29094,29096,29098,29100,29102,29104,29107,29109],{"class":639,"line":790},[637,29095,781],{"class":642},[637,29097,375],{"class":646},[637,29099,21680],{"class":650},[637,29101,657],{"class":642},[637,29103,660],{"class":642},[637,29105,29106],{"class":663},"city",[637,29108,660],{"class":642},[637,29110,787],{"class":642},[637,29112,29114,29116,29118],{"class":29113,"line":800},[639,673],[637,29115,781],{"class":642},[637,29117,856],{"class":646},[637,29119,669],{"class":642},[637,29121,29123,29125,29127,29129,29131,29133,29136,29138],{"class":29122,"line":805},[639,673],[637,29124,853],{"class":642},[637,29126,27871],{"class":646},[637,29128,1982],{"class":650},[637,29130,657],{"class":642},[637,29132,660],{"class":642},[637,29134,29135],{"class":663},"[1, 0.3, 128, 32]",[637,29137,660],{"class":642},[637,29139,787],{"class":642},[637,29141,29143,29145],{"class":29142,"line":827},[639,673],[637,29144,853],{"class":642},[637,29146,29147],{"class":646},"MeshTransmissionMaterial\n",[637,29149,29151,29154,29156,29158,29160],{"class":29150,"line":631},[639,673],[637,29152,29153],{"class":650}," :transmission",[637,29155,657],{"class":642},[637,29157,660],{"class":642},[637,29159,1897],{"class":663},[637,29161,3154],{"class":642},[637,29163,29165,29168,29170,29172,29174],{"class":29164,"line":850},[639,673],[637,29166,29167],{"class":650}," :thickness",[637,29169,657],{"class":642},[637,29171,660],{"class":642},[637,29173,1969],{"class":663},[637,29175,3154],{"class":642},[637,29177,29179,29182,29184,29186,29189],{"class":29178,"line":861},[639,673],[637,29180,29181],{"class":650}," :chromatic-aberration",[637,29183,657],{"class":642},[637,29185,660],{"class":642},[637,29187,29188],{"class":663},"0.03",[637,29190,3154],{"class":642},[637,29192,29194,29197,29199,29201,29203],{"class":29193,"line":872},[639,673],[637,29195,29196],{"class":650}," :resolution",[637,29198,657],{"class":642},[637,29200,660],{"class":642},[637,29202,27999],{"class":663},[637,29204,3154],{"class":642},[637,29206,29207],{"class":639,"line":882},[637,29208,8054],{"class":642},[637,29210,29211,29213,29215],{"class":639,"line":632},[637,29212,895],{"class":642},[637,29214,856],{"class":646},[637,29216,669],{"class":642},[637,29218,29219,29221,29223],{"class":639,"line":902},[637,29220,905],{"class":642},[637,29222,761],{"class":646},[637,29224,669],{"class":642},[637,29226,29227,29229,29231],{"class":639,"line":912},[637,29228,732],{"class":642},[637,29230,750],{"class":646},[637,29232,669],{"class":642},[504,29234,922],{"id":921},[927,29236,29237,29250],{},[930,29238,29239],{},[933,29240,29241,29243,29245,29247],{},[936,29242,938],{"align":997},[936,29244,941],{"align":997},[936,29246,5990],{"align":997},[936,29248,944],{"align":29249},"center",[946,29251,29252,29274,29291,29308,29326,29344,29361,29379,29397,29416,29433,29451,29469,29487,29505,29523,29541,29558,29578,29597,29616,29638],{},[933,29253,29254,29259,29266,29270],{},[951,29255,29256],{"align":997},[618,29257,29258],{},"transmission",[951,29260,29261,29262,29265],{"align":997},"Glass opacity (maps to the internal ",[618,29263,29264],{},"_transmission"," uniform)",[951,29267,29268],{"align":997},[618,29269,5375],{},[951,29271,29272],{"align":29249},[618,29273,1897],{},[933,29275,29276,29280,29283,29287],{},[951,29277,29278],{"align":997},[618,29279,11656],{},[951,29281,29282],{"align":997},"Thickness of the glass volume",[951,29284,29285],{"align":997},[618,29286,5375],{},[951,29288,29289],{"align":29249},[618,29290,965],{},[933,29292,29293,29297,29300,29304],{},[951,29294,29295],{"align":997},[618,29296,21479],{},[951,29298,29299],{"align":997},"Surface roughness",[951,29301,29302],{"align":997},[618,29303,5375],{},[951,29305,29306],{"align":29249},[618,29307,965],{},[933,29309,29310,29315,29318,29322],{},[951,29311,29312],{"align":997},[618,29313,29314],{},"chromaticAberration",[951,29316,29317],{"align":997},"Chromatic aberration intensity",[951,29319,29320],{"align":997},[618,29321,5375],{},[951,29323,29324],{"align":29249},[618,29325,29188],{},[933,29327,29328,29333,29336,29340],{},[951,29329,29330],{"align":997},[618,29331,29332],{},"anisotropicBlur",[951,29334,29335],{"align":997},"Anisotropic blur amount",[951,29337,29338],{"align":997},[618,29339,5375],{},[951,29341,29342],{"align":29249},[618,29343,2186],{},[933,29345,29346,29350,29353,29357],{},[951,29347,29348],{"align":997},[618,29349,28888],{},[951,29351,29352],{"align":997},"Distortion amount",[951,29354,29355],{"align":997},[618,29356,5375],{},[951,29358,29359],{"align":29249},[618,29360,965],{},[933,29362,29363,29368,29371,29375],{},[951,29364,29365],{"align":997},[618,29366,29367],{},"distortionScale",[951,29369,29370],{"align":997},"Scale of the distortion noise",[951,29372,29373],{"align":997},[618,29374,5375],{},[951,29376,29377],{"align":29249},[618,29378,1969],{},[933,29380,29381,29386,29389,29393],{},[951,29382,29383],{"align":997},[618,29384,29385],{},"temporalDistortion",[951,29387,29388],{"align":997},"Animates the distortion over time",[951,29390,29391],{"align":997},[618,29392,5375],{},[951,29394,29395],{"align":29249},[618,29396,965],{},[933,29398,29399,29404,29407,29411],{},[951,29400,29401],{"align":997},[618,29402,29403],{},"ior",[951,29405,29406],{"align":997},"Index of refraction",[951,29408,29409],{"align":997},[618,29410,5375],{},[951,29412,29413],{"align":29249},[618,29414,29415],{},"1.5",[933,29417,29418,29422,29425,29429],{},[951,29419,29420],{"align":997},[618,29421,7568],{},[951,29423,29424],{"align":997},"Base color of the glass",[951,29426,29427],{"align":997},[618,29428,7583],{},[951,29430,29431],{"align":29249},[618,29432,2719],{},[933,29434,29435,29440,29443,29447],{},[951,29436,29437],{"align":997},[618,29438,29439],{},"clearcoat",[951,29441,29442],{"align":997},"Clearcoat layer intensity",[951,29444,29445],{"align":997},[618,29446,5375],{},[951,29448,29449],{"align":29249},[618,29450,965],{},[933,29452,29453,29458,29461,29465],{},[951,29454,29455],{"align":997},[618,29456,29457],{},"clearcoatRoughness",[951,29459,29460],{"align":997},"Clearcoat roughness",[951,29462,29463],{"align":997},[618,29464,5375],{},[951,29466,29467],{"align":29249},[618,29468,965],{},[933,29470,29471,29476,29479,29483],{},[951,29472,29473],{"align":997},[618,29474,29475],{},"attenuationDistance",[951,29477,29478],{"align":997},"Distance at which light is attenuated through the volume",[951,29480,29481],{"align":997},[618,29482,5375],{},[951,29484,29485],{"align":29249},[618,29486,13535],{},[933,29488,29489,29494,29497,29501],{},[951,29490,29491],{"align":997},[618,29492,29493],{},"attenuationColor",[951,29495,29496],{"align":997},"Color the light shifts to as it passes through the volume",[951,29498,29499],{"align":997},[618,29500,7583],{},[951,29502,29503],{"align":29249},[618,29504,2719],{},[933,29506,29507,29512,29515,29519],{},[951,29508,29509],{"align":997},[618,29510,29511],{},"backside",[951,29513,29514],{"align":997},"Render back faces into a separate buffer for proper glass thickness",[951,29516,29517],{"align":997},[618,29518,17582],{},[951,29520,29521],{"align":29249},[618,29522,971],{},[933,29524,29525,29530,29533,29537],{},[951,29526,29527],{"align":997},[618,29528,29529],{},"backsideThickness",[951,29531,29532],{"align":997},"Thickness used during the backside pass",[951,29534,29535],{"align":997},[618,29536,5375],{},[951,29538,29539],{"align":29249},[618,29540,965],{},[933,29542,29543,29547,29550,29554],{},[951,29544,29545],{"align":997},[618,29546,27990],{},[951,29548,29549],{"align":997},"Resolution of the FBO render target in pixels",[951,29551,29552],{"align":997},[618,29553,5375],{},[951,29555,29556],{"align":29249},[618,29557,28669],{},[933,29559,29560,29565,29570,29574],{},[951,29561,29562],{"align":997},[618,29563,29564],{},"backsideResolution",[951,29566,29567,29568],{"align":997},"Resolution of the backside FBO. Defaults to ",[618,29569,27990],{},[951,29571,29572],{"align":997},[618,29573,5375],{},[951,29575,29576],{"align":29249},[618,29577,27990],{},[933,29579,29580,29585,29588,29593],{},[951,29581,29582],{"align":997},[618,29583,29584],{},"background",[951,29586,29587],{"align":997},"Override the scene background during the FBO pass",[951,29589,29590],{"align":997},[618,29591,29592],{},"THREE.Color | null",[951,29594,29595],{"align":29249},[618,29596,1167],{},[933,29598,29599,29604,29607,29612],{},[951,29600,29601],{"align":997},[618,29602,29603],{},"buffer",[951,29605,29606],{"align":997},"Supply your own render-target texture, skipping the internal FBO pass",[951,29608,29609],{"align":997},[618,29610,29611],{},"THREE.Texture | null",[951,29613,29614],{"align":29249},[618,29615,1167],{},[933,29617,29618,29623,29629,29633],{},[951,29619,29620],{"align":997},[618,29621,29622],{},"samples",[951,29624,29625,29626],{"align":997},"Number of refraction samples. ",[1692,29627,29628],{},"Baked at compile time — changing requires remount.",[951,29630,29631],{"align":997},[618,29632,5375],{},[951,29634,29635],{"align":29249},[618,29636,29637],{},"6",[933,29639,29640,29645,29651,29655],{},[951,29641,29642],{"align":997},[618,29643,29644],{},"transmissionSampler",[951,29646,29647,29648],{"align":997},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[1692,29649,29650],{},"Baked at compile time.",[951,29652,29653],{"align":997},[618,29654,17582],{},[951,29656,29657],{"align":29249},[618,29658,971],{},[614,29660,29661,29662,28255],{},"The component extends ",[618,29663,26624],{},[504,29665,26968],{"id":26967},[2236,29667,29668,29676,29683,29691],{},[2239,29669,8277,29670,5634,29672,29675],{},[618,29671,28164],{},[618,29673,29674],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[2239,29677,29678,3086,29680,29682],{},[618,29679,29622],{},[618,29681,29644],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[2239,29684,18618,29685,29687,29688,29690],{},[618,29686,29511],{}," with a non-zero ",[618,29689,29529],{}," for more convincing thick-glass effects.",[2239,29692,29693,29694,29696,29697,29700],{},"Lower ",[618,29695,27990],{}," (e.g. ",[618,29698,29699],{},"128",") improves performance at the cost of refraction sharpness.",[1349,29702,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":29704},[29705,29706,29707],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":26967,"depth":578,"text":26968},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":199,"description":29708},"MSm1cDIVGWOO8lvYX_2hfQL4QLQbohqGi_4-iSPYgOA",{"id":29713,"title":203,"body":29714,"description":29992,"extension":591,"links":592,"meta":29993,"navigation":594,"path":204,"seo":29994,"stem":205,"__hash__":29995},"docs/2.api/4.materials/point-material.md",{"type":501,"value":29715,"toc":29988},[29716,29721,29731,29736,29738,29970,29972,29986],[2318,29717,29718],{},[29719,29720],"materials-point-material",{},[614,29722,29723,29726,29727,29730],{},[618,29724,29725],{},"\u003CPointMaterial />"," extends ",[618,29728,29729],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3222,29732,29733],{},[614,29734,29735],{},"N.B., stacking order and transparency of objects using THREE.PointsMaterial and by extension PointMaterial can be somewhat unintuitive, especially when combined with other on-screen objects. Please see discussions at threejs.org for more infomation.",[504,29737,15],{"id":624},[626,29739,29742],{"className":628,"code":29740,"highlights":29741,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointMaterial, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n \u003COrbitControls />\n \u003CTresPoints>\n \u003CTresIcosahedronGeometry :args=\"[1, 4]\" />\n \u003CPointMaterial\n :size=\"5\"\n color=\"orange\"\n />\n \u003C/TresPoints>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,827,631,850],[618,29743,29744,29764,29782,29806,29814,29818,29826,29834,29862,29870,29879,29899,29907,29921,29934,29938,29946,29954,29962],{"__ignoreMap":576},[637,29745,29746,29748,29750,29752,29754,29756,29758,29760,29762],{"class":639,"line":577},[637,29747,643],{"class":642},[637,29749,647],{"class":646},[637,29751,651],{"class":650},[637,29753,654],{"class":650},[637,29755,657],{"class":642},[637,29757,660],{"class":642},[637,29759,664],{"class":663},[637,29761,660],{"class":642},[637,29763,669],{"class":642},[637,29765,29766,29768,29770,29772,29774,29776,29778,29780],{"class":639,"line":578},[637,29767,677],{"class":676},[637,29769,680],{"class":642},[637,29771,715],{"class":683},[637,29773,693],{"class":642},[637,29775,696],{"class":676},[637,29777,699],{"class":642},[637,29779,724],{"class":663},[637,29781,705],{"class":642},[637,29783,29785,29787,29789,29792,29794,29796,29798,29800,29802,29804],{"class":29784,"line":708},[639,673],[637,29786,677],{"class":676},[637,29788,680],{"class":642},[637,29790,29791],{"class":683}," PointMaterial",[637,29793,687],{"class":642},[637,29795,690],{"class":683},[637,29797,693],{"class":642},[637,29799,696],{"class":676},[637,29801,699],{"class":642},[637,29803,702],{"class":663},[637,29805,705],{"class":642},[637,29807,29808,29810,29812],{"class":639,"line":729},[637,29809,732],{"class":642},[637,29811,647],{"class":646},[637,29813,669],{"class":642},[637,29815,29816],{"class":639,"line":739},[637,29817,742],{"emptyLinePlaceholder":594},[637,29819,29820,29822,29824],{"class":639,"line":745},[637,29821,643],{"class":642},[637,29823,750],{"class":646},[637,29825,669],{"class":642},[637,29827,29828,29830,29832],{"class":639,"line":755},[637,29829,758],{"class":642},[637,29831,761],{"class":646},[637,29833,669],{"class":642},[637,29835,29836,29838,29840,29842,29844,29846,29848,29850,29852,29854,29856,29858,29860],{"class":639,"line":778},[637,29837,781],{"class":642},[637,29839,784],{"class":646},[637,29841,1508],{"class":650},[637,29843,657],{"class":642},[637,29845,660],{"class":642},[637,29847,13301],{"class":663},[637,29849,660],{"class":642},[637,29851,9637],{"class":650},[637,29853,657],{"class":642},[637,29855,660],{"class":642},[637,29857,9644],{"class":663},[637,29859,660],{"class":642},[637,29861,787],{"class":642},[637,29863,29864,29866,29868],{"class":639,"line":790},[637,29865,781],{"class":642},[637,29867,795],{"class":646},[637,29869,787],{"class":642},[637,29871,29872,29874,29877],{"class":639,"line":800},[637,29873,781],{"class":642},[637,29875,29876],{"class":646},"TresPoints",[637,29878,669],{"class":642},[637,29880,29881,29883,29886,29888,29890,29892,29895,29897],{"class":639,"line":805},[637,29882,853],{"class":642},[637,29884,29885],{"class":646},"TresIcosahedronGeometry",[637,29887,1982],{"class":650},[637,29889,657],{"class":642},[637,29891,660],{"class":642},[637,29893,29894],{"class":663},"[1, 4]",[637,29896,660],{"class":642},[637,29898,787],{"class":642},[637,29900,29902,29904],{"class":29901,"line":827},[639,673],[637,29903,853],{"class":642},[637,29905,29906],{"class":646},"PointMaterial\n",[637,29908,29910,29913,29915,29917,29919],{"class":29909,"line":631},[639,673],[637,29911,29912],{"class":650}," :size",[637,29914,657],{"class":642},[637,29916,660],{"class":642},[637,29918,12730],{"class":663},[637,29920,3154],{"class":642},[637,29922,29924,29926,29928,29930,29932],{"class":29923,"line":850},[639,673],[637,29925,8663],{"class":650},[637,29927,657],{"class":642},[637,29929,660],{"class":642},[637,29931,13348],{"class":663},[637,29933,3154],{"class":642},[637,29935,29936],{"class":639,"line":861},[637,29937,8054],{"class":642},[637,29939,29940,29942,29944],{"class":639,"line":872},[637,29941,895],{"class":642},[637,29943,29876],{"class":646},[637,29945,669],{"class":642},[637,29947,29948,29950,29952],{"class":639,"line":882},[637,29949,781],{"class":642},[637,29951,9702],{"class":646},[637,29953,787],{"class":642},[637,29955,29956,29958,29960],{"class":639,"line":632},[637,29957,905],{"class":642},[637,29959,761],{"class":646},[637,29961,669],{"class":642},[637,29963,29964,29966,29968],{"class":639,"line":902},[637,29965,732],{"class":642},[637,29967,750],{"class":646},[637,29969,669],{"class":642},[504,29971,922],{"id":921},[614,29973,29974,29975,29982,29983,1146],{},"All ",[1140,29976,29979,29981],{"href":29977,"rel":29978},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1144],[618,29980,29729],{}," properties"," are inherited by ",[618,29984,29985],{},"PointMaterial",[1349,29987,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":29989},[29990,29991],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":203,"description":29992},"KQarQWFbe_ZShVTsHEKL-hBviOOcUTm-CtCNsZFQ3jo",{"id":29997,"title":207,"body":29998,"description":30310,"extension":591,"links":592,"meta":30311,"navigation":594,"path":208,"seo":30312,"stem":209,"__hash__":30313},"docs/2.api/4.materials/wobble-material.md",{"type":501,"value":29999,"toc":30306},[30000,30005,30013,30015,30256,30258,30299,30304],[608,30001,30002],{},[30003,30004],"materials-wobble-material",{},[614,30006,2799,30007,9489,30009,30012],{},[618,30008,7338],{},[618,30010,30011],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[504,30014,15],{"id":624},[626,30016,30019],{"className":628,"code":30017,"highlights":30018,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshWobbleMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n \u003CTresMesh>\n \u003CTresTorusGeometry />\n \u003CMeshWobbleMaterial\n color=\"#f25042\"\n :speed=\"1\"\n :factor=\"0.6\"\n />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,805,827,631,850,861],[618,30020,30021,30041,30059,30079,30087,30091,30099,30107,30135,30143,30151,30159,30173,30187,30201,30206,30214,30222,30240,30248],{"__ignoreMap":576},[637,30022,30023,30025,30027,30029,30031,30033,30035,30037,30039],{"class":639,"line":577},[637,30024,643],{"class":642},[637,30026,647],{"class":646},[637,30028,651],{"class":650},[637,30030,654],{"class":650},[637,30032,657],{"class":642},[637,30034,660],{"class":642},[637,30036,664],{"class":663},[637,30038,660],{"class":642},[637,30040,669],{"class":642},[637,30042,30043,30045,30047,30049,30051,30053,30055,30057],{"class":639,"line":578},[637,30044,677],{"class":676},[637,30046,680],{"class":642},[637,30048,715],{"class":683},[637,30050,693],{"class":642},[637,30052,696],{"class":676},[637,30054,699],{"class":642},[637,30056,724],{"class":663},[637,30058,705],{"class":642},[637,30060,30062,30064,30066,30069,30071,30073,30075,30077],{"class":30061,"line":708},[639,673],[637,30063,677],{"class":676},[637,30065,680],{"class":642},[637,30067,30068],{"class":683}," MeshWobbleMaterial",[637,30070,693],{"class":642},[637,30072,696],{"class":676},[637,30074,699],{"class":642},[637,30076,702],{"class":663},[637,30078,705],{"class":642},[637,30080,30081,30083,30085],{"class":639,"line":729},[637,30082,732],{"class":642},[637,30084,647],{"class":646},[637,30086,669],{"class":642},[637,30088,30089],{"class":639,"line":739},[637,30090,742],{"emptyLinePlaceholder":594},[637,30092,30093,30095,30097],{"class":639,"line":745},[637,30094,643],{"class":642},[637,30096,750],{"class":646},[637,30098,669],{"class":642},[637,30100,30101,30103,30105],{"class":639,"line":755},[637,30102,758],{"class":642},[637,30104,761],{"class":646},[637,30106,669],{"class":642},[637,30108,30109,30111,30113,30115,30117,30119,30121,30123,30125,30127,30129,30131,30133],{"class":639,"line":778},[637,30110,781],{"class":642},[637,30112,784],{"class":646},[637,30114,1508],{"class":650},[637,30116,657],{"class":642},[637,30118,660],{"class":642},[637,30120,13301],{"class":663},[637,30122,660],{"class":642},[637,30124,9637],{"class":650},[637,30126,657],{"class":642},[637,30128,660],{"class":642},[637,30130,9644],{"class":663},[637,30132,660],{"class":642},[637,30134,787],{"class":642},[637,30136,30137,30139,30141],{"class":639,"line":790},[637,30138,781],{"class":642},[637,30140,856],{"class":646},[637,30142,669],{"class":642},[637,30144,30145,30147,30149],{"class":639,"line":800},[637,30146,853],{"class":642},[637,30148,11884],{"class":646},[637,30150,787],{"class":642},[637,30152,30154,30156],{"class":30153,"line":805},[639,673],[637,30155,853],{"class":642},[637,30157,30158],{"class":646},"MeshWobbleMaterial\n",[637,30160,30162,30164,30166,30168,30171],{"class":30161,"line":827},[639,673],[637,30163,8663],{"class":650},[637,30165,657],{"class":642},[637,30167,660],{"class":642},[637,30169,30170],{"class":663},"#f25042",[637,30172,3154],{"class":642},[637,30174,30176,30179,30181,30183,30185],{"class":30175,"line":631},[639,673],[637,30177,30178],{"class":650}," :speed",[637,30180,657],{"class":642},[637,30182,660],{"class":642},[637,30184,1897],{"class":663},[637,30186,3154],{"class":642},[637,30188,30190,30193,30195,30197,30199],{"class":30189,"line":850},[639,673],[637,30191,30192],{"class":650}," :factor",[637,30194,657],{"class":642},[637,30196,660],{"class":642},[637,30198,10682],{"class":663},[637,30200,3154],{"class":642},[637,30202,30204],{"class":30203,"line":861},[639,673],[637,30205,8054],{"class":642},[637,30207,30208,30210,30212],{"class":639,"line":872},[637,30209,895],{"class":642},[637,30211,856],{"class":646},[637,30213,669],{"class":642},[637,30215,30216,30218,30220],{"class":639,"line":882},[637,30217,781],{"class":642},[637,30219,9702],{"class":646},[637,30221,787],{"class":642},[637,30223,30224,30226,30228,30230,30232,30234,30236,30238],{"class":639,"line":632},[637,30225,781],{"class":642},[637,30227,9721],{"class":646},[637,30229,1508],{"class":650},[637,30231,657],{"class":642},[637,30233,660],{"class":642},[637,30235,13383],{"class":663},[637,30237,660],{"class":642},[637,30239,787],{"class":642},[637,30241,30242,30244,30246],{"class":639,"line":902},[637,30243,905],{"class":642},[637,30245,761],{"class":646},[637,30247,669],{"class":642},[637,30249,30250,30252,30254],{"class":639,"line":912},[637,30251,732],{"class":642},[637,30253,750],{"class":646},[637,30255,669],{"class":642},[504,30257,922],{"id":921},[927,30259,30260,30270],{},[930,30261,30262],{},[933,30263,30264,30266,30268],{},[936,30265,938],{"align":997},[936,30267,941],{"align":997},[936,30269,944],{},[946,30271,30272,30285],{},[933,30273,30274,30278,30281],{},[951,30275,30276],{"align":997},[1692,30277,9802],{},[951,30279,30280],{"align":997},"how fast the wobble effect would be.",[951,30282,30283],{},[618,30284,1897],{},[933,30286,30287,30292,30295],{},[951,30288,30289],{"align":997},[1692,30290,30291],{},"factor",[951,30293,30294],{"align":997},"how strong the wobble effect will deform the geometry",[951,30296,30297],{},[618,30298,1897],{},[614,30300,30301,30302,26625],{},"This material extends ",[618,30303,28254],{},[1349,30305,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":30307},[30308,30309],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":207,"description":30310},"FcmdcQOb0wna_07P1wVmXmyOFm6O2rnxJE44Peni4w8",[30315,30499,31005,31175,31353,31740,31976,32145,32686,32854,33452,33619,33794,34154,34331,34493,34654,34848,35024,35428,35596,35786,35975],{"id":30316,"title":217,"body":30317,"description":30495,"extension":591,"links":592,"meta":30496,"navigation":594,"path":218,"seo":30497,"stem":219,"__hash__":30498},"docs/2.api/5.shapes/box.md",{"type":501,"value":30318,"toc":30492},[30319,30324,30335,30343,30350,30352,30489],[608,30320,30321],{},[30322,30323],"shapes-box",{},[614,30325,2799,30326,9489,30328,30331,30332,1146],{},[618,30327,7338],{},[618,30329,30330],{},"\u003CBox />"," component that serves as a short-cut for a ",[618,30333,30334],{},"BoxGeometry",[626,30336,30341],{"className":30337,"code":30339,"language":30340},[30338],"language-text","args: [\n width: number,\n height: number,\n depth: number,\n widthSegments: number,\n heightSegments: number,\n depthSegments: number\n]\n","text",[618,30342,30339],{"__ignoreMap":576},[614,30344,30345,30346],{},"Reference: ",[1140,30347,30334],{"href":30348,"rel":30349},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1144],[504,30351,15],{"id":624},[626,30353,30355],{"className":628,"code":30354,"language":633,"meta":576,"style":576},"\u003CBox :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Box with a custom material transformations\n\u003CBox ref=\"boxRef\" :args=\"[1, 1, 1]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Box>\n",[618,30356,30357,30400,30404,30409,30476,30481],{"__ignoreMap":576},[637,30358,30359,30361,30363,30365,30368,30370,30372,30374,30376,30378,30380,30382,30384,30386,30388,30390,30392,30394,30396,30398],{"class":639,"line":577},[637,30360,643],{"class":642},[637,30362,217],{"class":646},[637,30364,3052],{"class":642},[637,30366,30367],{"class":650},"args",[637,30369,657],{"class":642},[637,30371,660],{"class":642},[637,30373,8752],{"class":683},[637,30375,1897],{"class":2524},[637,30377,687],{"class":642},[637,30379,2584],{"class":2524},[637,30381,687],{"class":642},[637,30383,2584],{"class":2524},[637,30385,2537],{"class":683},[637,30387,660],{"class":642},[637,30389,2712],{"class":650},[637,30391,657],{"class":642},[637,30393,660],{"class":642},[637,30395,13348],{"class":663},[637,30397,660],{"class":642},[637,30399,787],{"class":642},[637,30401,30402],{"class":639,"line":578},[637,30403,742],{"emptyLinePlaceholder":594},[637,30405,30406],{"class":639,"line":708},[637,30407,30408],{"class":683},"// Box with a custom material transformations\n",[637,30410,30411,30413,30415,30417,30419,30421,30423,30425,30427,30429,30431,30433,30435,30437,30439,30441,30443,30445,30447,30449,30451,30453,30455,30457,30459,30461,30463,30466,30468,30470,30472,30474],{"class":639,"line":729},[637,30412,643],{"class":642},[637,30414,217],{"class":646},[637,30416,3895],{"class":650},[637,30418,657],{"class":642},[637,30420,660],{"class":642},[637,30422,16354],{"class":663},[637,30424,660],{"class":642},[637,30426,3052],{"class":642},[637,30428,30367],{"class":650},[637,30430,657],{"class":642},[637,30432,660],{"class":642},[637,30434,8752],{"class":683},[637,30436,1897],{"class":2524},[637,30438,687],{"class":642},[637,30440,2584],{"class":2524},[637,30442,687],{"class":642},[637,30444,2584],{"class":2524},[637,30446,2537],{"class":683},[637,30448,660],{"class":642},[637,30450,3052],{"class":642},[637,30452,4153],{"class":650},[637,30454,657],{"class":642},[637,30456,660],{"class":642},[637,30458,8752],{"class":683},[637,30460,965],{"class":2524},[637,30462,687],{"class":642},[637,30464,30465],{"class":2524}," 4",[637,30467,687],{"class":642},[637,30469,2529],{"class":2524},[637,30471,2537],{"class":683},[637,30473,660],{"class":642},[637,30475,669],{"class":642},[637,30477,30478],{"class":639,"line":739},[637,30479,30480],{"class":683}," \u003CTresMeshToonMaterial color=\"orange\" />\n",[637,30482,30483,30485,30487],{"class":639,"line":745},[637,30484,732],{"class":642},[637,30486,217],{"class":646},[637,30488,669],{"class":642},[1349,30490,30491],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":30493},[30494],{"id":624,"depth":578,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":30495},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":30500,"title":221,"body":30501,"description":31001,"extension":591,"links":592,"meta":31002,"navigation":594,"path":222,"seo":31003,"stem":223,"__hash__":31004},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":501,"value":30502,"toc":30997},[30503,30508,30516,30539,30541,30763,30765,30995],[2318,30504,30505],{},[30506,30507],"shapes-catmull-rom-curve3",{},[614,30509,2799,30510,9489,30512,30515],{},[618,30511,7338],{},[618,30513,30514],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[614,30517,30518,30520,30521,30528,30529,30532,30533],{},[618,30519,30514],{}," wraps ",[1140,30522,30525,30526],{"href":30523,"rel":30524},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1144],"Three.js's ",[618,30527,221],{}," functionality, but applies it to Cientos' ",[618,30530,30531],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1140,30534,30536,30537,1146],{"href":30535},"line2#props","all the props from ",[618,30538,30531],{},[504,30540,15],{"id":624},[626,30542,30545],{"className":628,"code":30543,"highlights":30544,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CatmullRomCurve3 } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CCatmullRomCurve3\n :points=\"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850],[618,30546,30547,30567,30585,30605,30624,30632,30636,30644,30652,30670,30678,30693,30707,30721,30735,30739,30747,30755],{"__ignoreMap":576},[637,30548,30549,30551,30553,30555,30557,30559,30561,30563,30565],{"class":639,"line":577},[637,30550,643],{"class":642},[637,30552,647],{"class":646},[637,30554,651],{"class":650},[637,30556,654],{"class":650},[637,30558,657],{"class":642},[637,30560,660],{"class":642},[637,30562,664],{"class":663},[637,30564,660],{"class":642},[637,30566,669],{"class":642},[637,30568,30569,30571,30573,30575,30577,30579,30581,30583],{"class":639,"line":578},[637,30570,677],{"class":676},[637,30572,680],{"class":642},[637,30574,715],{"class":683},[637,30576,693],{"class":642},[637,30578,696],{"class":676},[637,30580,699],{"class":642},[637,30582,724],{"class":663},[637,30584,705],{"class":642},[637,30586,30588,30590,30592,30595,30597,30599,30601,30603],{"class":30587,"line":708},[639,673],[637,30589,677],{"class":676},[637,30591,680],{"class":642},[637,30593,30594],{"class":683}," CatmullRomCurve3",[637,30596,693],{"class":642},[637,30598,696],{"class":676},[637,30600,699],{"class":642},[637,30602,702],{"class":663},[637,30604,705],{"class":642},[637,30606,30607,30609,30611,30614,30616,30618,30620,30622],{"class":639,"line":729},[637,30608,677],{"class":676},[637,30610,680],{"class":642},[637,30612,30613],{"class":683}," Vector3",[637,30615,693],{"class":642},[637,30617,696],{"class":676},[637,30619,699],{"class":642},[637,30621,4649],{"class":663},[637,30623,705],{"class":642},[637,30625,30626,30628,30630],{"class":639,"line":739},[637,30627,732],{"class":642},[637,30629,647],{"class":646},[637,30631,669],{"class":642},[637,30633,30634],{"class":639,"line":745},[637,30635,742],{"emptyLinePlaceholder":594},[637,30637,30638,30640,30642],{"class":639,"line":755},[637,30639,643],{"class":642},[637,30641,750],{"class":646},[637,30643,669],{"class":642},[637,30645,30646,30648,30650],{"class":639,"line":778},[637,30647,758],{"class":642},[637,30649,761],{"class":646},[637,30651,669],{"class":642},[637,30653,30654,30656,30658,30660,30662,30664,30666,30668],{"class":639,"line":790},[637,30655,781],{"class":642},[637,30657,784],{"class":646},[637,30659,1508],{"class":650},[637,30661,657],{"class":642},[637,30663,660],{"class":642},[637,30665,13301],{"class":663},[637,30667,660],{"class":642},[637,30669,787],{"class":642},[637,30671,30673,30675],{"class":30672,"line":800},[639,673],[637,30674,781],{"class":642},[637,30676,30677],{"class":646},"CatmullRomCurve3\n",[637,30679,30681,30684,30686,30688,30691],{"class":30680,"line":805},[639,673],[637,30682,30683],{"class":650}," :points",[637,30685,657],{"class":642},[637,30687,660],{"class":642},[637,30689,30690],{"class":663},"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]",[637,30692,3154],{"class":642},[637,30694,30696,30699,30701,30703,30705],{"class":30695,"line":827},[639,673],[637,30697,30698],{"class":650}," :segments",[637,30700,657],{"class":642},[637,30702,660],{"class":642},[637,30704,11397],{"class":663},[637,30706,3154],{"class":642},[637,30708,30710,30713,30715,30717,30719],{"class":30709,"line":631},[639,673],[637,30711,30712],{"class":650}," color",[637,30714,657],{"class":642},[637,30716,660],{"class":642},[637,30718,13348],{"class":663},[637,30720,3154],{"class":642},[637,30722,30724,30727,30729,30731,30733],{"class":30723,"line":850},[639,673],[637,30725,30726],{"class":650}," :line-width",[637,30728,657],{"class":642},[637,30730,660],{"class":642},[637,30732,21410],{"class":663},[637,30734,3154],{"class":642},[637,30736,30737],{"class":639,"line":861},[637,30738,17292],{"class":642},[637,30740,30741,30743,30745],{"class":639,"line":872},[637,30742,781],{"class":642},[637,30744,9702],{"class":646},[637,30746,787],{"class":642},[637,30748,30749,30751,30753],{"class":639,"line":882},[637,30750,905],{"class":642},[637,30752,761],{"class":646},[637,30754,669],{"class":642},[637,30756,30757,30759,30761],{"class":639,"line":632},[637,30758,732],{"class":642},[637,30760,750],{"class":646},[637,30762,669],{"class":642},[504,30764,922],{"id":921},[927,30766,30767,30779],{},[930,30768,30769],{},[933,30770,30771,30773,30775,30777],{},[936,30772,938],{},[936,30774,5990],{},[936,30776,941],{},[936,30778,944],{},[946,30780,30781,30796,30811,30825,30841,30855,30870,30884,30898,30911,30925,30939,30953,30967,30981],{},[933,30782,30783,30786,30791,30794],{},[951,30784,30785],{},"points",[951,30787,30788],{},[618,30789,30790],{},"Array\u003CVector3 | [number, number, number]>",[951,30792,30793],{},"Curve's control points",[951,30795],{},[933,30797,30798,30801,30805,30808],{},[951,30799,30800],{},"segments",[951,30802,30803],{},[618,30804,5375],{},[951,30806,30807],{},"Number of segments in the resulting curve (higher = smoother)",[951,30809,30810],{},"20",[933,30812,30813,30816,30820,30823],{},[951,30814,30815],{},"closed",[951,30817,30818],{},[618,30819,17582],{},[951,30821,30822],{},"The curve will loop back onto itself when this is true.",[951,30824,971],{},[933,30826,30827,30830,30835,30838],{},[951,30828,30829],{},"curveType",[951,30831,30832],{},[618,30833,30834],{},"'centripetal' | 'chordal' | 'catmullrom'",[951,30836,30837],{},"Curve type",[951,30839,30840],{},"'centripetal'",[933,30842,30843,30846,30850,30853],{},[951,30844,30845],{},"tension",[951,30847,30848],{},[618,30849,5375],{},[951,30851,30852],{},"Catmullrom's tension, when curveType is 'catmullrom'",[951,30854,1969],{},[933,30856,30857,30860,30865,30868],{},[951,30858,30859],{},"vertexColors",[951,30861,30862],{},[618,30863,30864],{},"TresColor[]",[951,30866,30867],{},"Vertex colors, if using",[951,30869,3679],{},[933,30871,30872,30874,30878,30881],{},[951,30873,7568],{},[951,30875,30876],{},[618,30877,7583],{},[951,30879,30880],{},"Color for the line – multiplies vertex colors",[951,30882,30883],{},"'white'",[933,30885,30886,30889,30893,30896],{},[951,30887,30888],{},"lineWidth",[951,30890,30891],{},[618,30892,5375],{},[951,30894,30895],{},"Width of the line – in world units with size attenuation, pixels otherwise",[951,30897,1897],{},[933,30899,30900,30902,30906,30909],{},[951,30901,28009],{},[951,30903,30904],{},[618,30905,17582],{},[951,30907,30908],{},"Whether the line width is in world units or pixels",[951,30910,971],{},[933,30912,30913,30916,30920,30923],{},[951,30914,30915],{},"alphaToCoverage",[951,30917,30918],{},[618,30919,17582],{},[951,30921,30922],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[951,30924,971],{},[933,30926,30927,30930,30934,30937],{},[951,30928,30929],{},"dashed",[951,30931,30932],{},[618,30933,17582],{},[951,30935,30936],{},"Whether the line is dashed",[951,30938,971],{},[933,30940,30941,30944,30948,30951],{},[951,30942,30943],{},"dashSize",[951,30945,30946],{},[618,30947,5375],{},[951,30949,30950],{},"Dash size",[951,30952,1897],{},[933,30954,30955,30958,30962,30965],{},[951,30956,30957],{},"gapSize",[951,30959,30960],{},[618,30961,5375],{},[951,30963,30964],{},"Gap size in dashed line",[951,30966,1897],{},[933,30968,30969,30972,30976,30979],{},[951,30970,30971],{},"dashScale",[951,30973,30974],{},[618,30975,5375],{},[951,30977,30978],{},"Scale of the dashes/gaps",[951,30980,1897],{},[933,30982,30983,30986,30990,30993],{},[951,30984,30985],{},"dashOffset",[951,30987,30988],{},[618,30989,5375],{},[951,30991,30992],{},"Dash offset",[951,30994,965],{},[1349,30996,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":30998},[30999,31000],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":221,"description":31001},"qeOP9WBmpA_w2Yd5qceOSBKv-l797GiqondBBAasbSM",{"id":31006,"title":225,"body":31007,"description":31171,"extension":591,"links":592,"meta":31172,"navigation":594,"path":226,"seo":31173,"stem":227,"__hash__":31174},"docs/2.api/5.shapes/circle.md",{"type":501,"value":31008,"toc":31168},[31009,31014,31024,31030,31036,31038,31166],[608,31010,31011],{},[31012,31013],"shapes-circle",{},[614,31015,2799,31016,9489,31018,30331,31021,1146],{},[618,31017,7338],{},[618,31019,31020],{},"\u003CCircle />",[618,31022,31023],{},"CircleGeometry",[626,31025,31028],{"className":31026,"code":31027,"language":30340},[30338],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[618,31029,31027],{"__ignoreMap":576},[614,31031,30345,31032],{},[1140,31033,31023],{"href":31034,"rel":31035},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1144],[504,31037,15],{"id":624},[626,31039,31041],{"className":628,"code":31040,"language":633,"meta":576,"style":576},"\u003CCircle :args=\"[1, 32]\" color=\"orange\" />\n\n// Circle with a custom material transformations\n\u003CCircle ref=\"circleRef\" :args=\"[1, 32]\" :position=\"[0, 0, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Circle>\n",[618,31042,31043,31082,31086,31091,31154,31158],{"__ignoreMap":576},[637,31044,31045,31047,31049,31051,31053,31055,31057,31059,31061,31063,31066,31068,31070,31072,31074,31076,31078,31080],{"class":639,"line":577},[637,31046,643],{"class":642},[637,31048,225],{"class":646},[637,31050,3052],{"class":642},[637,31052,30367],{"class":650},[637,31054,657],{"class":642},[637,31056,660],{"class":642},[637,31058,8752],{"class":683},[637,31060,1897],{"class":2524},[637,31062,687],{"class":642},[637,31064,31065],{"class":2524}," 32",[637,31067,2537],{"class":683},[637,31069,660],{"class":642},[637,31071,2712],{"class":650},[637,31073,657],{"class":642},[637,31075,660],{"class":642},[637,31077,13348],{"class":663},[637,31079,660],{"class":642},[637,31081,787],{"class":642},[637,31083,31084],{"class":639,"line":578},[637,31085,742],{"emptyLinePlaceholder":594},[637,31087,31088],{"class":639,"line":708},[637,31089,31090],{"class":683},"// Circle with a custom material transformations\n",[637,31092,31093,31095,31097,31099,31101,31103,31106,31108,31110,31112,31114,31116,31118,31120,31122,31124,31126,31128,31130,31132,31134,31136,31138,31140,31142,31144,31146,31148,31150,31152],{"class":639,"line":729},[637,31094,643],{"class":642},[637,31096,225],{"class":646},[637,31098,3895],{"class":650},[637,31100,657],{"class":642},[637,31102,660],{"class":642},[637,31104,31105],{"class":663},"circleRef",[637,31107,660],{"class":642},[637,31109,3052],{"class":642},[637,31111,30367],{"class":650},[637,31113,657],{"class":642},[637,31115,660],{"class":642},[637,31117,8752],{"class":683},[637,31119,1897],{"class":2524},[637,31121,687],{"class":642},[637,31123,31065],{"class":2524},[637,31125,2537],{"class":683},[637,31127,660],{"class":642},[637,31129,3052],{"class":642},[637,31131,4153],{"class":650},[637,31133,657],{"class":642},[637,31135,660],{"class":642},[637,31137,8752],{"class":683},[637,31139,965],{"class":2524},[637,31141,687],{"class":642},[637,31143,2529],{"class":2524},[637,31145,687],{"class":642},[637,31147,2529],{"class":2524},[637,31149,2537],{"class":683},[637,31151,660],{"class":642},[637,31153,669],{"class":642},[637,31155,31156],{"class":639,"line":739},[637,31157,30480],{"class":683},[637,31159,31160,31162,31164],{"class":639,"line":745},[637,31161,732],{"class":642},[637,31163,225],{"class":646},[637,31165,669],{"class":642},[1349,31167,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":31169},[31170],{"id":624,"depth":578,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":225,"description":31171},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":31176,"title":229,"body":31177,"description":31349,"extension":591,"links":592,"meta":31350,"navigation":594,"path":230,"seo":31351,"stem":231,"__hash__":31352},"docs/2.api/5.shapes/cone.md",{"type":501,"value":31178,"toc":31346},[31179,31184,31194,31200,31206,31208,31344],[608,31180,31181],{},[31182,31183],"shapes-cone",{},[614,31185,2799,31186,9489,31188,30331,31191,1146],{},[618,31187,7338],{},[618,31189,31190],{},"\u003CCone />",[618,31192,31193],{},"ConeGeometry",[626,31195,31198],{"className":31196,"code":31197,"language":30340},[30338],"args: [\n radius: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[618,31199,31197],{"__ignoreMap":576},[614,31201,30345,31202],{},[1140,31203,31193],{"href":31204,"rel":31205},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1144],[504,31207,15],{"id":624},[626,31209,31211],{"className":628,"code":31210,"language":633,"meta":576,"style":576},"\u003CCone :args=\"[1, 1, 8]\" color=\"orange\" />\n\n// Cone with a custom material transformations\n\u003CCone ref=\"coneRef\" :args=\"[1, 1, 8]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cone>\n",[618,31212,31213,31256,31260,31265,31332,31336],{"__ignoreMap":576},[637,31214,31215,31217,31219,31221,31223,31225,31227,31229,31231,31233,31235,31237,31240,31242,31244,31246,31248,31250,31252,31254],{"class":639,"line":577},[637,31216,643],{"class":642},[637,31218,229],{"class":646},[637,31220,3052],{"class":642},[637,31222,30367],{"class":650},[637,31224,657],{"class":642},[637,31226,660],{"class":642},[637,31228,8752],{"class":683},[637,31230,1897],{"class":2524},[637,31232,687],{"class":642},[637,31234,2584],{"class":2524},[637,31236,687],{"class":642},[637,31238,31239],{"class":2524}," 8",[637,31241,2537],{"class":683},[637,31243,660],{"class":642},[637,31245,2712],{"class":650},[637,31247,657],{"class":642},[637,31249,660],{"class":642},[637,31251,13348],{"class":663},[637,31253,660],{"class":642},[637,31255,787],{"class":642},[637,31257,31258],{"class":639,"line":578},[637,31259,742],{"emptyLinePlaceholder":594},[637,31261,31262],{"class":639,"line":708},[637,31263,31264],{"class":683},"// Cone with a custom material transformations\n",[637,31266,31267,31269,31271,31273,31275,31277,31280,31282,31284,31286,31288,31290,31292,31294,31296,31298,31300,31302,31304,31306,31308,31310,31312,31314,31316,31318,31320,31322,31324,31326,31328,31330],{"class":639,"line":729},[637,31268,643],{"class":642},[637,31270,229],{"class":646},[637,31272,3895],{"class":650},[637,31274,657],{"class":642},[637,31276,660],{"class":642},[637,31278,31279],{"class":663},"coneRef",[637,31281,660],{"class":642},[637,31283,3052],{"class":642},[637,31285,30367],{"class":650},[637,31287,657],{"class":642},[637,31289,660],{"class":642},[637,31291,8752],{"class":683},[637,31293,1897],{"class":2524},[637,31295,687],{"class":642},[637,31297,2584],{"class":2524},[637,31299,687],{"class":642},[637,31301,31239],{"class":2524},[637,31303,2537],{"class":683},[637,31305,660],{"class":642},[637,31307,3052],{"class":642},[637,31309,4153],{"class":650},[637,31311,657],{"class":642},[637,31313,660],{"class":642},[637,31315,8752],{"class":683},[637,31317,965],{"class":2524},[637,31319,687],{"class":642},[637,31321,30465],{"class":2524},[637,31323,687],{"class":642},[637,31325,2529],{"class":2524},[637,31327,2537],{"class":683},[637,31329,660],{"class":642},[637,31331,669],{"class":642},[637,31333,31334],{"class":639,"line":739},[637,31335,30480],{"class":683},[637,31337,31338,31340,31342],{"class":639,"line":745},[637,31339,732],{"class":642},[637,31341,229],{"class":646},[637,31343,669],{"class":642},[1349,31345,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":31347},[31348],{"id":624,"depth":578,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":31349},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":31354,"title":233,"body":31355,"description":31736,"extension":591,"links":592,"meta":31737,"navigation":594,"path":234,"seo":31738,"stem":235,"__hash__":31739},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":501,"value":31356,"toc":31732},[31357,31362,31371,31373,31626,31628,31637,31730],[2318,31358,31359],{},[31360,31361],"shapes-cubic-bezier-line",{},[614,31363,31364,31367,31368,31370],{},[618,31365,31366],{},"\u003CCubicBezierLine />"," renders a ",[618,31369,30531],{}," between start and end points, with additional 2 control points.",[504,31372,15],{"id":624},[626,31374,31376],{"className":628,"code":31375,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CubicBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CCubicBezierLine\n :start=\"new Vector3(-1, 0, 0)\"\n :end=\"new Vector3(1, 0, 0)\"\n :midA=\"new Vector3(-0.5, 1, 0)\"\n :midB=\"new Vector3(0.5, 1, 0)\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,31377,31378,31398,31416,31435,31453,31461,31465,31473,31481,31499,31506,31520,31534,31548,31562,31574,31586,31598,31602,31610,31618],{"__ignoreMap":576},[637,31379,31380,31382,31384,31386,31388,31390,31392,31394,31396],{"class":639,"line":577},[637,31381,643],{"class":642},[637,31383,647],{"class":646},[637,31385,651],{"class":650},[637,31387,654],{"class":650},[637,31389,657],{"class":642},[637,31391,660],{"class":642},[637,31393,664],{"class":663},[637,31395,660],{"class":642},[637,31397,669],{"class":642},[637,31399,31400,31402,31404,31406,31408,31410,31412,31414],{"class":639,"line":578},[637,31401,677],{"class":676},[637,31403,680],{"class":642},[637,31405,715],{"class":683},[637,31407,693],{"class":642},[637,31409,696],{"class":676},[637,31411,699],{"class":642},[637,31413,724],{"class":663},[637,31415,705],{"class":642},[637,31417,31418,31420,31422,31425,31427,31429,31431,31433],{"class":639,"line":708},[637,31419,677],{"class":676},[637,31421,680],{"class":642},[637,31423,31424],{"class":683}," CubicBezierLine",[637,31426,693],{"class":642},[637,31428,696],{"class":676},[637,31430,699],{"class":642},[637,31432,702],{"class":663},[637,31434,705],{"class":642},[637,31436,31437,31439,31441,31443,31445,31447,31449,31451],{"class":639,"line":729},[637,31438,677],{"class":676},[637,31440,680],{"class":642},[637,31442,30613],{"class":683},[637,31444,693],{"class":642},[637,31446,696],{"class":676},[637,31448,699],{"class":642},[637,31450,4649],{"class":663},[637,31452,705],{"class":642},[637,31454,31455,31457,31459],{"class":639,"line":739},[637,31456,732],{"class":642},[637,31458,647],{"class":646},[637,31460,669],{"class":642},[637,31462,31463],{"class":639,"line":745},[637,31464,742],{"emptyLinePlaceholder":594},[637,31466,31467,31469,31471],{"class":639,"line":755},[637,31468,643],{"class":642},[637,31470,750],{"class":646},[637,31472,669],{"class":642},[637,31474,31475,31477,31479],{"class":639,"line":778},[637,31476,758],{"class":642},[637,31478,761],{"class":646},[637,31480,669],{"class":642},[637,31482,31483,31485,31487,31489,31491,31493,31495,31497],{"class":639,"line":790},[637,31484,781],{"class":642},[637,31486,784],{"class":646},[637,31488,1508],{"class":650},[637,31490,657],{"class":642},[637,31492,660],{"class":642},[637,31494,13301],{"class":663},[637,31496,660],{"class":642},[637,31498,787],{"class":642},[637,31500,31501,31503],{"class":639,"line":800},[637,31502,781],{"class":642},[637,31504,31505],{"class":646},"CubicBezierLine\n",[637,31507,31508,31511,31513,31515,31518],{"class":639,"line":805},[637,31509,31510],{"class":650}," :start",[637,31512,657],{"class":642},[637,31514,660],{"class":642},[637,31516,31517],{"class":663},"new Vector3(-1, 0, 0)",[637,31519,3154],{"class":642},[637,31521,31522,31525,31527,31529,31532],{"class":639,"line":827},[637,31523,31524],{"class":650}," :end",[637,31526,657],{"class":642},[637,31528,660],{"class":642},[637,31530,31531],{"class":663},"new Vector3(1, 0, 0)",[637,31533,3154],{"class":642},[637,31535,31536,31539,31541,31543,31546],{"class":639,"line":631},[637,31537,31538],{"class":650}," :midA",[637,31540,657],{"class":642},[637,31542,660],{"class":642},[637,31544,31545],{"class":663},"new Vector3(-0.5, 1, 0)",[637,31547,3154],{"class":642},[637,31549,31550,31553,31555,31557,31560],{"class":639,"line":850},[637,31551,31552],{"class":650}," :midB",[637,31554,657],{"class":642},[637,31556,660],{"class":642},[637,31558,31559],{"class":663},"new Vector3(0.5, 1, 0)",[637,31561,3154],{"class":642},[637,31563,31564,31566,31568,31570,31572],{"class":639,"line":861},[637,31565,30698],{"class":650},[637,31567,657],{"class":642},[637,31569,660],{"class":642},[637,31571,11397],{"class":663},[637,31573,3154],{"class":642},[637,31575,31576,31578,31580,31582,31584],{"class":639,"line":872},[637,31577,30712],{"class":650},[637,31579,657],{"class":642},[637,31581,660],{"class":642},[637,31583,13348],{"class":663},[637,31585,3154],{"class":642},[637,31587,31588,31590,31592,31594,31596],{"class":639,"line":882},[637,31589,30726],{"class":650},[637,31591,657],{"class":642},[637,31593,660],{"class":642},[637,31595,21410],{"class":663},[637,31597,3154],{"class":642},[637,31599,31600],{"class":639,"line":632},[637,31601,17292],{"class":642},[637,31603,31604,31606,31608],{"class":639,"line":902},[637,31605,781],{"class":642},[637,31607,9702],{"class":646},[637,31609,787],{"class":642},[637,31611,31612,31614,31616],{"class":639,"line":912},[637,31613,905],{"class":642},[637,31615,761],{"class":646},[637,31617,669],{"class":642},[637,31619,31620,31622,31624],{"class":639,"line":2648},[637,31621,732],{"class":642},[637,31623,750],{"class":646},[637,31625,669],{"class":642},[504,31627,922],{"id":921},[614,31629,31630,31632,31633,7240,31635,1146],{},[618,31631,31366],{}," inherits all props but ",[618,31634,30785],{},[618,31636,30531],{},[927,31638,31639,31651],{},[930,31640,31641],{},[933,31642,31643,31645,31647,31649],{},[936,31644,938],{},[936,31646,5990],{},[936,31648,941],{},[936,31650,944],{},[946,31652,31653,31669,31684,31700,31716],{},[933,31654,31655,31659,31664,31667],{},[951,31656,31657],{},[618,31658,14328],{},[951,31660,31661],{},[618,31662,31663],{},"Vector3 | [number, number, number]",[951,31665,31666],{},"Starting point",[951,31668],{},[933,31670,31671,31675,31679,31682],{},[951,31672,31673],{},[618,31674,14342],{},[951,31676,31677],{},[618,31678,31663],{},[951,31680,31681],{},"Ending point",[951,31683],{},[933,31685,31686,31691,31695,31698],{},[951,31687,31688],{},[618,31689,31690],{},"midA",[951,31692,31693],{},[618,31694,31663],{},[951,31696,31697],{},"First control point",[951,31699],{},[933,31701,31702,31707,31711,31714],{},[951,31703,31704],{},[618,31705,31706],{},"midB",[951,31708,31709],{},[618,31710,31663],{},[951,31712,31713],{},"Second control point",[951,31715],{},[933,31717,31718,31722,31726,31728],{},[951,31719,31720],{},[618,31721,30800],{},[951,31723,31724],{},[618,31725,5375],{},[951,31727,30807],{},[951,31729,30810],{},[1349,31731,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":31733},[31734,31735],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders a Line2 between start and end points with two control points.",{},{"title":233,"description":31736},"Bi4-z99FCo5x_LjzwKRj0meHtbAxC8tTMsvdiP4y5sU",{"id":31741,"title":237,"body":31742,"description":31972,"extension":591,"links":592,"meta":31973,"navigation":594,"path":238,"seo":31974,"stem":239,"__hash__":31975},"docs/2.api/5.shapes/cylinder.md",{"type":501,"value":31743,"toc":31969},[31744,31749,31759,31765,31771,31773,31966],[608,31745,31746],{},[31747,31748],"shapes-cylinder",{},[614,31750,2799,31751,9489,31753,30331,31756,1146],{},[618,31752,7338],{},[618,31754,31755],{},"\u003CCylinder />",[618,31757,31758],{},"CylinderGeometry",[626,31760,31763],{"className":31761,"code":31762,"language":30340},[30338],"args: [\n radiusTop: number,\n radiusBottom: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[618,31764,31762],{"__ignoreMap":576},[614,31766,30345,31767],{},[1140,31768,31758],{"href":31769,"rel":31770},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1144],[504,31772,15],{"id":624},[626,31774,31776],{"className":628,"code":31775,"language":633,"meta":576,"style":576},"\u003CCylinder :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" color=\"orange\" />\n\n// Cylinder with a custom material transformations\n\u003CCylinder ref=\"cylinderRef\" :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cylinder>\n",[618,31777,31778,31850,31854,31859,31954,31958],{"__ignoreMap":576},[637,31779,31780,31782,31784,31786,31788,31790,31792,31794,31796,31798,31800,31802,31804,31806,31808,31810,31812,31814,31816,31818,31820,31822,31824,31826,31829,31831,31834,31836,31838,31840,31842,31844,31846,31848],{"class":639,"line":577},[637,31781,643],{"class":642},[637,31783,237],{"class":646},[637,31785,3052],{"class":642},[637,31787,30367],{"class":650},[637,31789,657],{"class":642},[637,31791,660],{"class":642},[637,31793,8752],{"class":683},[637,31795,1897],{"class":2524},[637,31797,687],{"class":642},[637,31799,2584],{"class":2524},[637,31801,687],{"class":642},[637,31803,2584],{"class":2524},[637,31805,687],{"class":642},[637,31807,31065],{"class":2524},[637,31809,687],{"class":642},[637,31811,2584],{"class":2524},[637,31813,687],{"class":642},[637,31815,6746],{"class":4420},[637,31817,687],{"class":642},[637,31819,2529],{"class":2524},[637,31821,687],{"class":642},[637,31823,8508],{"class":683},[637,31825,1146],{"class":642},[637,31827,31828],{"class":683},"PI ",[637,31830,23137],{"class":642},[637,31832,31833],{"class":2524}," 2",[637,31835,2537],{"class":683},[637,31837,660],{"class":642},[637,31839,2712],{"class":650},[637,31841,657],{"class":642},[637,31843,660],{"class":642},[637,31845,13348],{"class":663},[637,31847,660],{"class":642},[637,31849,787],{"class":642},[637,31851,31852],{"class":639,"line":578},[637,31853,742],{"emptyLinePlaceholder":594},[637,31855,31856],{"class":639,"line":708},[637,31857,31858],{"class":683},"// Cylinder with a custom material transformations\n",[637,31860,31861,31863,31865,31867,31869,31871,31874,31876,31878,31880,31882,31884,31886,31888,31890,31892,31894,31896,31898,31900,31902,31904,31906,31908,31910,31912,31914,31916,31918,31920,31922,31924,31926,31928,31930,31932,31934,31936,31938,31940,31942,31944,31946,31948,31950,31952],{"class":639,"line":729},[637,31862,643],{"class":642},[637,31864,237],{"class":646},[637,31866,3895],{"class":650},[637,31868,657],{"class":642},[637,31870,660],{"class":642},[637,31872,31873],{"class":663},"cylinderRef",[637,31875,660],{"class":642},[637,31877,3052],{"class":642},[637,31879,30367],{"class":650},[637,31881,657],{"class":642},[637,31883,660],{"class":642},[637,31885,8752],{"class":683},[637,31887,1897],{"class":2524},[637,31889,687],{"class":642},[637,31891,2584],{"class":2524},[637,31893,687],{"class":642},[637,31895,2584],{"class":2524},[637,31897,687],{"class":642},[637,31899,31065],{"class":2524},[637,31901,687],{"class":642},[637,31903,2584],{"class":2524},[637,31905,687],{"class":642},[637,31907,6746],{"class":4420},[637,31909,687],{"class":642},[637,31911,2529],{"class":2524},[637,31913,687],{"class":642},[637,31915,8508],{"class":683},[637,31917,1146],{"class":642},[637,31919,31828],{"class":683},[637,31921,23137],{"class":642},[637,31923,31833],{"class":2524},[637,31925,2537],{"class":683},[637,31927,660],{"class":642},[637,31929,3052],{"class":642},[637,31931,4153],{"class":650},[637,31933,657],{"class":642},[637,31935,660],{"class":642},[637,31937,8752],{"class":683},[637,31939,965],{"class":2524},[637,31941,687],{"class":642},[637,31943,30465],{"class":2524},[637,31945,687],{"class":642},[637,31947,2529],{"class":2524},[637,31949,2537],{"class":683},[637,31951,660],{"class":642},[637,31953,669],{"class":642},[637,31955,31956],{"class":639,"line":739},[637,31957,30480],{"class":683},[637,31959,31960,31962,31964],{"class":639,"line":745},[637,31961,732],{"class":642},[637,31963,237],{"class":646},[637,31965,669],{"class":642},[1349,31967,31968],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":31970},[31971],{"id":624,"depth":578,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":31972},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":31977,"title":241,"body":31978,"description":32141,"extension":591,"links":592,"meta":32142,"navigation":594,"path":242,"seo":32143,"stem":243,"__hash__":32144},"docs/2.api/5.shapes/dodecahedron.md",{"type":501,"value":31979,"toc":32138},[31980,31985,31995,32001,32007,32009,32136],[608,31981,31982],{},[31983,31984],"shapes-dodecahedron",{},[614,31986,2799,31987,9489,31989,30331,31992,1146],{},[618,31988,7338],{},[618,31990,31991],{},"\u003CDodecahedron />",[618,31993,31994],{},"DodecahedronGeometry",[626,31996,31999],{"className":31997,"code":31998,"language":30340},[30338],"args: [radius: number, detail: number]\n",[618,32000,31998],{"__ignoreMap":576},[614,32002,30345,32003],{},[1140,32004,31994],{"href":32005,"rel":32006},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1144],[504,32008,15],{"id":624},[626,32010,32012],{"className":628,"code":32011,"language":633,"meta":576,"style":576},"\u003CDodecahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Dodecahedron with a custom material transformations\n\u003CDodecahedron ref=\"dodecahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Dodecahedron>\n",[618,32013,32014,32052,32056,32061,32124,32128],{"__ignoreMap":576},[637,32015,32016,32018,32020,32022,32024,32026,32028,32030,32032,32034,32036,32038,32040,32042,32044,32046,32048,32050],{"class":639,"line":577},[637,32017,643],{"class":642},[637,32019,241],{"class":646},[637,32021,3052],{"class":642},[637,32023,30367],{"class":650},[637,32025,657],{"class":642},[637,32027,660],{"class":642},[637,32029,8752],{"class":683},[637,32031,1897],{"class":2524},[637,32033,687],{"class":642},[637,32035,2529],{"class":2524},[637,32037,2537],{"class":683},[637,32039,660],{"class":642},[637,32041,2712],{"class":650},[637,32043,657],{"class":642},[637,32045,660],{"class":642},[637,32047,13348],{"class":663},[637,32049,660],{"class":642},[637,32051,787],{"class":642},[637,32053,32054],{"class":639,"line":578},[637,32055,742],{"emptyLinePlaceholder":594},[637,32057,32058],{"class":639,"line":708},[637,32059,32060],{"class":683},"// Dodecahedron with a custom material transformations\n",[637,32062,32063,32065,32067,32069,32071,32073,32076,32078,32080,32082,32084,32086,32088,32090,32092,32094,32096,32098,32100,32102,32104,32106,32108,32110,32112,32114,32116,32118,32120,32122],{"class":639,"line":729},[637,32064,643],{"class":642},[637,32066,241],{"class":646},[637,32068,3895],{"class":650},[637,32070,657],{"class":642},[637,32072,660],{"class":642},[637,32074,32075],{"class":663},"dodecahedronRef",[637,32077,660],{"class":642},[637,32079,3052],{"class":642},[637,32081,30367],{"class":650},[637,32083,657],{"class":642},[637,32085,660],{"class":642},[637,32087,8752],{"class":683},[637,32089,1897],{"class":2524},[637,32091,687],{"class":642},[637,32093,2529],{"class":2524},[637,32095,2537],{"class":683},[637,32097,660],{"class":642},[637,32099,3052],{"class":642},[637,32101,4153],{"class":650},[637,32103,657],{"class":642},[637,32105,660],{"class":642},[637,32107,8752],{"class":683},[637,32109,820],{"class":2524},[637,32111,687],{"class":642},[637,32113,30465],{"class":2524},[637,32115,687],{"class":642},[637,32117,2529],{"class":2524},[637,32119,2537],{"class":683},[637,32121,660],{"class":642},[637,32123,669],{"class":642},[637,32125,32126],{"class":639,"line":739},[637,32127,30480],{"class":683},[637,32129,32130,32132,32134],{"class":639,"line":745},[637,32131,732],{"class":642},[637,32133,241],{"class":646},[637,32135,669],{"class":642},[1349,32137,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":32139},[32140],{"id":624,"depth":578,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":32141},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":32146,"title":245,"body":32147,"description":32682,"extension":591,"links":592,"meta":32683,"navigation":594,"path":246,"seo":32684,"stem":247,"__hash__":32685},"docs/2.api/5.shapes/grid.md",{"type":501,"value":32148,"toc":32678},[32149,32154,32160,32162,32492,32494,32676],[608,32150,32151],{},[32152,32153],"shapes-grid",{},[614,32155,32156,32159],{},[618,32157,32158],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[504,32161,15],{"id":624},[626,32163,32166],{"className":628,"code":32164,"highlights":32165,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Grid, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222222\">\n \u003CTresPerspectiveCamera :position=\"[8, 10, 10]\" :fov=\"25\" />\n \u003COrbitControls />\n \u003CGrid\n :args=\"[10.5, 10.5]\"\n cell-color=\"#82dbc5\"\n :cell-size=\"0.6\"\n :cell-thickness=\"0.5\"\n section-color=\"#fbb03b\"\n :section-size=\"2\"\n :section-thickness=\"1.3\"\n :infinite-grid=\"true\"\n :fade-from=\"0\"\n :fade-distance=\"12\"\n :fade-strength=\"1\"\n />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,800,805,827,631,850,861,872,882,632,902,912,2648],[618,32167,32168,32188,32212,32230,32238,32242,32250,32269,32300,32308,32316,32330,32344,32358,32372,32386,32400,32415,32429,32443,32458,32472,32476,32484],{"__ignoreMap":576},[637,32169,32170,32172,32174,32176,32178,32180,32182,32184,32186],{"class":639,"line":577},[637,32171,643],{"class":642},[637,32173,647],{"class":646},[637,32175,651],{"class":650},[637,32177,654],{"class":650},[637,32179,657],{"class":642},[637,32181,660],{"class":642},[637,32183,664],{"class":663},[637,32185,660],{"class":642},[637,32187,669],{"class":642},[637,32189,32191,32193,32195,32198,32200,32202,32204,32206,32208,32210],{"class":32190,"line":578},[639,673],[637,32192,677],{"class":676},[637,32194,680],{"class":642},[637,32196,32197],{"class":683}," Grid",[637,32199,687],{"class":642},[637,32201,690],{"class":683},[637,32203,693],{"class":642},[637,32205,696],{"class":676},[637,32207,699],{"class":642},[637,32209,702],{"class":663},[637,32211,705],{"class":642},[637,32213,32214,32216,32218,32220,32222,32224,32226,32228],{"class":639,"line":708},[637,32215,677],{"class":676},[637,32217,680],{"class":642},[637,32219,715],{"class":683},[637,32221,693],{"class":642},[637,32223,696],{"class":676},[637,32225,699],{"class":642},[637,32227,724],{"class":663},[637,32229,705],{"class":642},[637,32231,32232,32234,32236],{"class":639,"line":729},[637,32233,732],{"class":642},[637,32235,647],{"class":646},[637,32237,669],{"class":642},[637,32239,32240],{"class":639,"line":739},[637,32241,742],{"emptyLinePlaceholder":594},[637,32243,32244,32246,32248],{"class":639,"line":745},[637,32245,643],{"class":642},[637,32247,750],{"class":646},[637,32249,669],{"class":642},[637,32251,32252,32254,32256,32258,32260,32262,32265,32267],{"class":639,"line":755},[637,32253,758],{"class":642},[637,32255,761],{"class":646},[637,32257,764],{"class":650},[637,32259,657],{"class":642},[637,32261,660],{"class":642},[637,32263,32264],{"class":663},"#222222",[637,32266,660],{"class":642},[637,32268,669],{"class":642},[637,32270,32271,32273,32275,32277,32279,32281,32284,32286,32289,32291,32293,32296,32298],{"class":639,"line":778},[637,32272,781],{"class":642},[637,32274,784],{"class":646},[637,32276,1508],{"class":650},[637,32278,657],{"class":642},[637,32280,660],{"class":642},[637,32282,32283],{"class":663},"[8, 10, 10]",[637,32285,660],{"class":642},[637,32287,32288],{"class":650}," :fov",[637,32290,657],{"class":642},[637,32292,660],{"class":642},[637,32294,32295],{"class":663},"25",[637,32297,660],{"class":642},[637,32299,787],{"class":642},[637,32301,32302,32304,32306],{"class":639,"line":790},[637,32303,781],{"class":642},[637,32305,795],{"class":646},[637,32307,787],{"class":642},[637,32309,32311,32313],{"class":32310,"line":800},[639,673],[637,32312,781],{"class":642},[637,32314,32315],{"class":646},"Grid\n",[637,32317,32319,32321,32323,32325,32328],{"class":32318,"line":805},[639,673],[637,32320,12398],{"class":650},[637,32322,657],{"class":642},[637,32324,660],{"class":642},[637,32326,32327],{"class":663},"[10.5, 10.5]",[637,32329,3154],{"class":642},[637,32331,32333,32336,32338,32340,32342],{"class":32332,"line":827},[639,673],[637,32334,32335],{"class":650}," cell-color",[637,32337,657],{"class":642},[637,32339,660],{"class":642},[637,32341,11477],{"class":663},[637,32343,3154],{"class":642},[637,32345,32347,32350,32352,32354,32356],{"class":32346,"line":631},[639,673],[637,32348,32349],{"class":650}," :cell-size",[637,32351,657],{"class":642},[637,32353,660],{"class":642},[637,32355,10682],{"class":663},[637,32357,3154],{"class":642},[637,32359,32361,32364,32366,32368,32370],{"class":32360,"line":850},[639,673],[637,32362,32363],{"class":650}," :cell-thickness",[637,32365,657],{"class":642},[637,32367,660],{"class":642},[637,32369,1969],{"class":663},[637,32371,3154],{"class":642},[637,32373,32375,32378,32380,32382,32384],{"class":32374,"line":861},[639,673],[637,32376,32377],{"class":650}," section-color",[637,32379,657],{"class":642},[637,32381,660],{"class":642},[637,32383,10174],{"class":663},[637,32385,3154],{"class":642},[637,32387,32389,32392,32394,32396,32398],{"class":32388,"line":872},[639,673],[637,32390,32391],{"class":650}," :section-size",[637,32393,657],{"class":642},[637,32395,660],{"class":642},[637,32397,820],{"class":663},[637,32399,3154],{"class":642},[637,32401,32403,32406,32408,32410,32413],{"class":32402,"line":882},[639,673],[637,32404,32405],{"class":650}," :section-thickness",[637,32407,657],{"class":642},[637,32409,660],{"class":642},[637,32411,32412],{"class":663},"1.3",[637,32414,3154],{"class":642},[637,32416,32418,32421,32423,32425,32427],{"class":32417,"line":632},[639,673],[637,32419,32420],{"class":650}," :infinite-grid",[637,32422,657],{"class":642},[637,32424,660],{"class":642},[637,32426,961],{"class":663},[637,32428,3154],{"class":642},[637,32430,32432,32435,32437,32439,32441],{"class":32431,"line":902},[639,673],[637,32433,32434],{"class":650}," :fade-from",[637,32436,657],{"class":642},[637,32438,660],{"class":642},[637,32440,965],{"class":663},[637,32442,3154],{"class":642},[637,32444,32446,32449,32451,32453,32456],{"class":32445,"line":912},[639,673],[637,32447,32448],{"class":650}," :fade-distance",[637,32450,657],{"class":642},[637,32452,660],{"class":642},[637,32454,32455],{"class":663},"12",[637,32457,3154],{"class":642},[637,32459,32461,32464,32466,32468,32470],{"class":32460,"line":2648},[639,673],[637,32462,32463],{"class":650}," :fade-strength",[637,32465,657],{"class":642},[637,32467,660],{"class":642},[637,32469,1897],{"class":663},[637,32471,3154],{"class":642},[637,32473,32474],{"class":639,"line":2657},[637,32475,17292],{"class":642},[637,32477,32478,32480,32482],{"class":639,"line":2677},[637,32479,905],{"class":642},[637,32481,761],{"class":646},[637,32483,669],{"class":642},[637,32485,32486,32488,32490],{"class":639,"line":2686},[637,32487,732],{"class":642},[637,32489,750],{"class":646},[637,32491,669],{"class":642},[504,32493,922],{"id":921},[927,32495,32496,32506],{},[930,32497,32498],{},[933,32499,32500,32502,32504],{},[936,32501,938],{"align":997},[936,32503,941],{"align":997},[936,32505,944],{},[946,32507,32508,32522,32536,32550,32564,32578,32592,32606,32620,32634,32648,32662],{},[933,32509,32510,32515,32518],{},[951,32511,32512],{"align":997},[1692,32513,32514],{},"cellSize",[951,32516,32517],{"align":997},"Cell size",[951,32519,32520],{},[618,32521,1969],{},[933,32523,32524,32529,32532],{},[951,32525,32526],{"align":997},[1692,32527,32528],{},"cellThickness",[951,32530,32531],{"align":997},"Thickness of cell lines",[951,32533,32534],{},[618,32535,1969],{},[933,32537,32538,32543,32546],{},[951,32539,32540],{"align":997},[1692,32541,32542],{},"cellColor",[951,32544,32545],{"align":997},"Color of cell lines",[951,32547,32548],{},[618,32549,11615],{},[933,32551,32552,32557,32560],{},[951,32553,32554],{"align":997},[1692,32555,32556],{},"sectionSize",[951,32558,32559],{"align":997},"Section size",[951,32561,32562],{},[618,32563,1897],{},[933,32565,32566,32571,32574],{},[951,32567,32568],{"align":997},[1692,32569,32570],{},"sectionThickness",[951,32572,32573],{"align":997},"Thickness of section lines",[951,32575,32576],{},[618,32577,1897],{},[933,32579,32580,32585,32587],{},[951,32581,32582],{"align":997},[1692,32583,32584],{},"sectionColor",[951,32586,32545],{"align":997},[951,32588,32589],{},[618,32590,32591],{},"'blue'",[933,32593,32594,32599,32602],{},[951,32595,32596],{"align":997},[1692,32597,32598],{},"followCamera",[951,32600,32601],{"align":997},"Whether to follow camera",[951,32603,32604],{},[618,32605,971],{},[933,32607,32608,32613,32616],{},[951,32609,32610],{"align":997},[1692,32611,32612],{},"infiniteGrid",[951,32614,32615],{"align":997},"Whether to display an infinite grid",[951,32617,32618],{},[618,32619,971],{},[933,32621,32622,32627,32630],{},[951,32623,32624],{"align":997},[1692,32625,32626],{},"fadeDistance",[951,32628,32629],{"align":997},"Fade distance",[951,32631,32632],{},[618,32633,11190],{},[933,32635,32636,32641,32644],{},[951,32637,32638],{"align":997},[1692,32639,32640],{},"fadeStrength",[951,32642,32643],{"align":997},"Fade strength",[951,32645,32646],{},[618,32647,1897],{},[933,32649,32650,32655,32658],{},[951,32651,32652],{"align":997},[1692,32653,32654],{},"fadeFrom",[951,32656,32657],{"align":997},"Fade from camera (1) or origin (0) or in between",[951,32659,32660],{},[618,32661,1897],{},[933,32663,32664,32668,32671],{},[951,32665,32666],{"align":997},[1692,32667,27410],{},[951,32669,32670],{"align":997},"Material side",[951,32672,32673],{},[618,32674,32675],{},"THREE.BackSide",[1349,32677,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":32679},[32680,32681],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Shader-based grid plane with customizable cell and section lines.",{},{"title":245,"description":32682},"gUhcCJXpeIhlg4aOnkCR0HsAX8-yKo0ddjfKc6h8BKY",{"id":32687,"title":249,"body":32688,"description":32850,"extension":591,"links":592,"meta":32851,"navigation":594,"path":250,"seo":32852,"stem":251,"__hash__":32853},"docs/2.api/5.shapes/icosahedron.md",{"type":501,"value":32689,"toc":32847},[32690,32695,32705,32710,32716,32718,32845],[608,32691,32692],{},[32693,32694],"shapes-icosahedron",{},[614,32696,2799,32697,9489,32699,30331,32702,1146],{},[618,32698,7338],{},[618,32700,32701],{},"\u003CIcosahedron />",[618,32703,32704],{},"IcosahedronGeometry",[626,32706,32708],{"className":32707,"code":31998,"language":30340},[30338],[618,32709,31998],{"__ignoreMap":576},[614,32711,30345,32712],{},[1140,32713,32704],{"href":32714,"rel":32715},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1144],[504,32717,15],{"id":624},[626,32719,32721],{"className":628,"code":32720,"language":633,"meta":576,"style":576},"\u003CIcosahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Icosahedron with a custom material transformations\n\u003CIcosahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Icosahedron>\n",[618,32722,32723,32761,32765,32770,32833,32837],{"__ignoreMap":576},[637,32724,32725,32727,32729,32731,32733,32735,32737,32739,32741,32743,32745,32747,32749,32751,32753,32755,32757,32759],{"class":639,"line":577},[637,32726,643],{"class":642},[637,32728,249],{"class":646},[637,32730,3052],{"class":642},[637,32732,30367],{"class":650},[637,32734,657],{"class":642},[637,32736,660],{"class":642},[637,32738,8752],{"class":683},[637,32740,1897],{"class":2524},[637,32742,687],{"class":642},[637,32744,2529],{"class":2524},[637,32746,2537],{"class":683},[637,32748,660],{"class":642},[637,32750,2712],{"class":650},[637,32752,657],{"class":642},[637,32754,660],{"class":642},[637,32756,13348],{"class":663},[637,32758,660],{"class":642},[637,32760,787],{"class":642},[637,32762,32763],{"class":639,"line":578},[637,32764,742],{"emptyLinePlaceholder":594},[637,32766,32767],{"class":639,"line":708},[637,32768,32769],{"class":683},"// Icosahedron with a custom material transformations\n",[637,32771,32772,32774,32776,32778,32780,32782,32785,32787,32789,32791,32793,32795,32797,32799,32801,32803,32805,32807,32809,32811,32813,32815,32817,32819,32821,32823,32825,32827,32829,32831],{"class":639,"line":729},[637,32773,643],{"class":642},[637,32775,249],{"class":646},[637,32777,3895],{"class":650},[637,32779,657],{"class":642},[637,32781,660],{"class":642},[637,32783,32784],{"class":663},"icosahedronRef",[637,32786,660],{"class":642},[637,32788,3052],{"class":642},[637,32790,30367],{"class":650},[637,32792,657],{"class":642},[637,32794,660],{"class":642},[637,32796,8752],{"class":683},[637,32798,1897],{"class":2524},[637,32800,687],{"class":642},[637,32802,2529],{"class":2524},[637,32804,2537],{"class":683},[637,32806,660],{"class":642},[637,32808,3052],{"class":642},[637,32810,4153],{"class":650},[637,32812,657],{"class":642},[637,32814,660],{"class":642},[637,32816,8752],{"class":683},[637,32818,820],{"class":2524},[637,32820,687],{"class":642},[637,32822,30465],{"class":2524},[637,32824,687],{"class":642},[637,32826,2529],{"class":2524},[637,32828,2537],{"class":683},[637,32830,660],{"class":642},[637,32832,669],{"class":642},[637,32834,32835],{"class":639,"line":739},[637,32836,30480],{"class":683},[637,32838,32839,32841,32843],{"class":639,"line":745},[637,32840,732],{"class":642},[637,32842,249],{"class":646},[637,32844,669],{"class":642},[1349,32846,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":32848},[32849],{"id":624,"depth":578,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":32850},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":32855,"title":253,"body":32856,"description":33448,"extension":591,"links":592,"meta":33449,"navigation":594,"path":254,"seo":33450,"stem":255,"__hash__":33451},"docs/2.api/5.shapes/line2.md",{"type":501,"value":32857,"toc":33442},[32858,32863,32876,32878,33065,33067,33218,33221,33224,33229,33236,33299,33304,33436,33439],[2318,32859,32860],{},[32861,32862],"shapes-line2",{},[614,32864,2799,32865,9489,32867,32869,32870,1146],{},[618,32866,7338],{},[618,32868,30531],{}," component for creating 3-D lines. It wraps ",[1140,32871,30525,32874],{"href":32872,"rel":32873},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1144],[618,32875,253],{},[504,32877,15],{"id":624},[626,32879,32882],{"className":628,"code":32880,"highlights":32881,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Line2 } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CLine2\n :points=\"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]\"\n color=\"orange\"\n :line-width=\"3\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,778,790,800,805,827],[618,32883,32884,32904,32922,32942,32950,32954,32962,32970,32989,32997,33011,33024,33037,33041,33049,33057],{"__ignoreMap":576},[637,32885,32886,32888,32890,32892,32894,32896,32898,32900,32902],{"class":639,"line":577},[637,32887,643],{"class":642},[637,32889,647],{"class":646},[637,32891,651],{"class":650},[637,32893,654],{"class":650},[637,32895,657],{"class":642},[637,32897,660],{"class":642},[637,32899,664],{"class":663},[637,32901,660],{"class":642},[637,32903,669],{"class":642},[637,32905,32906,32908,32910,32912,32914,32916,32918,32920],{"class":639,"line":578},[637,32907,677],{"class":676},[637,32909,680],{"class":642},[637,32911,715],{"class":683},[637,32913,693],{"class":642},[637,32915,696],{"class":676},[637,32917,699],{"class":642},[637,32919,724],{"class":663},[637,32921,705],{"class":642},[637,32923,32925,32927,32929,32932,32934,32936,32938,32940],{"class":32924,"line":708},[639,673],[637,32926,677],{"class":676},[637,32928,680],{"class":642},[637,32930,32931],{"class":683}," Line2",[637,32933,693],{"class":642},[637,32935,696],{"class":676},[637,32937,699],{"class":642},[637,32939,702],{"class":663},[637,32941,705],{"class":642},[637,32943,32944,32946,32948],{"class":639,"line":729},[637,32945,732],{"class":642},[637,32947,647],{"class":646},[637,32949,669],{"class":642},[637,32951,32952],{"class":639,"line":739},[637,32953,742],{"emptyLinePlaceholder":594},[637,32955,32956,32958,32960],{"class":639,"line":745},[637,32957,643],{"class":642},[637,32959,750],{"class":646},[637,32961,669],{"class":642},[637,32963,32964,32966,32968],{"class":639,"line":755},[637,32965,758],{"class":642},[637,32967,761],{"class":646},[637,32969,669],{"class":642},[637,32971,32973,32975,32977,32979,32981,32983,32985,32987],{"class":32972,"line":778},[639,673],[637,32974,781],{"class":642},[637,32976,784],{"class":646},[637,32978,1508],{"class":650},[637,32980,657],{"class":642},[637,32982,660],{"class":642},[637,32984,13301],{"class":663},[637,32986,660],{"class":642},[637,32988,787],{"class":642},[637,32990,32992,32994],{"class":32991,"line":790},[639,673],[637,32993,781],{"class":642},[637,32995,32996],{"class":646},"Line2\n",[637,32998,33000,33002,33004,33006,33009],{"class":32999,"line":800},[639,673],[637,33001,30683],{"class":650},[637,33003,657],{"class":642},[637,33005,660],{"class":642},[637,33007,33008],{"class":663},"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]",[637,33010,3154],{"class":642},[637,33012,33014,33016,33018,33020,33022],{"class":33013,"line":805},[639,673],[637,33015,30712],{"class":650},[637,33017,657],{"class":642},[637,33019,660],{"class":642},[637,33021,13348],{"class":663},[637,33023,3154],{"class":642},[637,33025,33027,33029,33031,33033,33035],{"class":33026,"line":827},[639,673],[637,33028,30726],{"class":650},[637,33030,657],{"class":642},[637,33032,660],{"class":642},[637,33034,21410],{"class":663},[637,33036,3154],{"class":642},[637,33038,33039],{"class":639,"line":631},[637,33040,17292],{"class":642},[637,33042,33043,33045,33047],{"class":639,"line":850},[637,33044,781],{"class":642},[637,33046,9702],{"class":646},[637,33048,787],{"class":642},[637,33050,33051,33053,33055],{"class":639,"line":861},[637,33052,905],{"class":642},[637,33054,761],{"class":646},[637,33056,669],{"class":642},[637,33058,33059,33061,33063],{"class":639,"line":872},[637,33060,732],{"class":642},[637,33062,750],{"class":646},[637,33064,669],{"class":642},[504,33066,922],{"id":921},[927,33068,33069,33081],{},[930,33070,33071],{},[933,33072,33073,33075,33077,33079],{},[936,33074,938],{},[936,33076,5990],{},[936,33078,941],{},[936,33080,944],{},[946,33082,33083,33098,33110,33122,33134,33146,33158,33170,33182,33194,33206],{},[933,33084,33085,33087,33093,33096],{},[951,33086,30785],{},[951,33088,33089],{},[1140,33090,33092],{"href":33091},"#points","See below",[951,33094,33095],{},"Points representing the line",[951,33097],{},[933,33099,33100,33102,33106,33108],{},[951,33101,30859],{},[951,33103,33104],{},[618,33105,30864],{},[951,33107,30867],{},[951,33109,3679],{},[933,33111,33112,33114,33118,33120],{},[951,33113,7568],{},[951,33115,33116],{},[618,33117,7583],{},[951,33119,30880],{},[951,33121,30883],{},[933,33123,33124,33126,33130,33132],{},[951,33125,30888],{},[951,33127,33128],{},[618,33129,5375],{},[951,33131,30895],{},[951,33133,1897],{},[933,33135,33136,33138,33142,33144],{},[951,33137,28009],{},[951,33139,33140],{},[618,33141,17582],{},[951,33143,30908],{},[951,33145,971],{},[933,33147,33148,33150,33154,33156],{},[951,33149,30915],{},[951,33151,33152],{},[618,33153,17582],{},[951,33155,30922],{},[951,33157,971],{},[933,33159,33160,33162,33166,33168],{},[951,33161,30929],{},[951,33163,33164],{},[618,33165,17582],{},[951,33167,30936],{},[951,33169,971],{},[933,33171,33172,33174,33178,33180],{},[951,33173,30943],{},[951,33175,33176],{},[618,33177,5375],{},[951,33179,30950],{},[951,33181,1897],{},[933,33183,33184,33186,33190,33192],{},[951,33185,30957],{},[951,33187,33188],{},[618,33189,5375],{},[951,33191,30964],{},[951,33193,1897],{},[933,33195,33196,33198,33202,33204],{},[951,33197,30971],{},[951,33199,33200],{},[618,33201,5375],{},[951,33203,30978],{},[951,33205,1897],{},[933,33207,33208,33210,33214,33216],{},[951,33209,30985],{},[951,33211,33212],{},[618,33213,5375],{},[951,33215,30992],{},[951,33217,965],{},[4074,33219,33220],{"id":30785},"Points",[614,33222,33223],{},"The points prop has the following type:",[614,33225,33226],{},[618,33227,33228],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[614,33230,33231,33232,33235],{},"The passed array is converted to ",[618,33233,33234],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[927,33237,33238,33248],{},[930,33239,33240],{},[933,33241,33242,33245],{},[936,33243,33244],{},"Entry type",[936,33246,33247],{},"Interpretation",[946,33249,33250,33259,33271,33281,33290],{},[933,33251,33252,33256],{},[951,33253,33254],{},[618,33255,8161],{},[951,33257,33258],{},"Insert the vector's x, y, z into the result array",[933,33260,33261,33268],{},[951,33262,33263],{},[33264,33265,33266],"nobr",{},[618,33267,8158],{},[951,33269,33270],{},"Insert the array values into the result array",[933,33272,33273,33278],{},[951,33274,33275],{},[618,33276,33277],{},"Vector2",[951,33279,33280],{},"Insert the vector's x, y, then 0 into the result array",[933,33282,33283,33287],{},[951,33284,33285],{},[618,33286,28856],{},[951,33288,33289],{},"Insert the array values, then 0 into the result array",[933,33291,33292,33296],{},[951,33293,33294],{},[618,33295,5375],{},[951,33297,33298],{},"Insert the number into the result array",[3222,33300,33301],{},[614,33302,33303],{},"If you pass bare numbers in the points array, ensure that you pass triplets – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.",[626,33305,33307],{"className":628,"code":33306,"language":633,"meta":576,"style":576},"\u003C!-- Wrong -->\n\u003CLine2 :points=\"[[1,1], 2, 2, [3,3]]\" />\n\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n\n\u003C!-- Right -->\n\u003CLine2 :points=\"[[1, 1], 2, 2, 0, [3, 3]]\" />\n\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[618,33308,33309,33314,33364,33369,33373,33378,33431],{"__ignoreMap":576},[637,33310,33311],{"class":639,"line":577},[637,33312,33313],{"class":1231},"\u003C!-- Wrong -->\n",[637,33315,33316,33318,33320,33322,33324,33326,33328,33331,33333,33335,33337,33339,33341,33343,33345,33347,33349,33351,33353,33355,33357,33360,33362],{"class":639,"line":578},[637,33317,643],{"class":642},[637,33319,253],{"class":646},[637,33321,3052],{"class":642},[637,33323,30785],{"class":650},[637,33325,657],{"class":642},[637,33327,660],{"class":642},[637,33329,33330],{"class":683},"[[",[637,33332,1897],{"class":2524},[637,33334,687],{"class":642},[637,33336,1897],{"class":2524},[637,33338,2537],{"class":683},[637,33340,687],{"class":642},[637,33342,31833],{"class":2524},[637,33344,687],{"class":642},[637,33346,31833],{"class":2524},[637,33348,687],{"class":642},[637,33350,2521],{"class":683},[637,33352,21410],{"class":2524},[637,33354,687],{"class":642},[637,33356,21410],{"class":2524},[637,33358,33359],{"class":683},"]]",[637,33361,660],{"class":642},[637,33363,787],{"class":642},[637,33365,33366],{"class":639,"line":708},[637,33367,33368],{"class":1231},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[637,33370,33371],{"class":639,"line":729},[637,33372,742],{"emptyLinePlaceholder":594},[637,33374,33375],{"class":639,"line":739},[637,33376,33377],{"class":1231},"\u003C!-- Right -->\n",[637,33379,33380,33382,33384,33386,33388,33390,33392,33394,33396,33398,33400,33402,33404,33406,33408,33410,33412,33414,33416,33418,33420,33422,33425,33427,33429],{"class":639,"line":745},[637,33381,643],{"class":642},[637,33383,253],{"class":646},[637,33385,3052],{"class":642},[637,33387,30785],{"class":650},[637,33389,657],{"class":642},[637,33391,660],{"class":642},[637,33393,33330],{"class":683},[637,33395,1897],{"class":2524},[637,33397,687],{"class":642},[637,33399,2584],{"class":2524},[637,33401,2537],{"class":683},[637,33403,687],{"class":642},[637,33405,31833],{"class":2524},[637,33407,687],{"class":642},[637,33409,31833],{"class":2524},[637,33411,687],{"class":642},[637,33413,2529],{"class":2524},[637,33415,687],{"class":642},[637,33417,2521],{"class":683},[637,33419,21410],{"class":2524},[637,33421,687],{"class":642},[637,33423,33424],{"class":2524}," 3",[637,33426,33359],{"class":683},[637,33428,660],{"class":642},[637,33430,787],{"class":642},[637,33432,33433],{"class":639,"line":755},[637,33434,33435],{"class":1231},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[614,33437,33438],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1349,33440,33441],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":33443},[33444,33445],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":33446},[33447],{"id":30785,"depth":708,"text":33220},"Component for creating 3D lines using Three.js's Line2.",{},{"title":253,"description":33448},"3_PA8PNLJqkUe1WxI0VGct3uJ9JTkMiGeSxC7ZRsjNc",{"id":33453,"title":257,"body":33454,"description":33615,"extension":591,"links":592,"meta":33616,"navigation":594,"path":258,"seo":33617,"stem":259,"__hash__":33618},"docs/2.api/5.shapes/octahedron.md",{"type":501,"value":33455,"toc":33612},[33456,33461,33471,33476,33482,33484,33610],[608,33457,33458],{},[33459,33460],"shapes-octahedron",{},[614,33462,2799,33463,9489,33465,30331,33468,1146],{},[618,33464,7338],{},[618,33466,33467],{},"\u003COctahedron />",[618,33469,33470],{},"OctahedronGeometry",[626,33472,33474],{"className":33473,"code":31998,"language":30340},[30338],[618,33475,31998],{"__ignoreMap":576},[614,33477,30345,33478],{},[1140,33479,33470],{"href":33480,"rel":33481},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1144],[504,33483,15],{"id":624},[626,33485,33487],{"className":628,"code":33486,"language":633,"meta":576,"style":576},"\u003COctahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Octahedron with a custom material transformations\n\u003COctahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Octahedron>\n",[618,33488,33489,33527,33531,33536,33598,33602],{"__ignoreMap":576},[637,33490,33491,33493,33495,33497,33499,33501,33503,33505,33507,33509,33511,33513,33515,33517,33519,33521,33523,33525],{"class":639,"line":577},[637,33492,643],{"class":642},[637,33494,257],{"class":646},[637,33496,3052],{"class":642},[637,33498,30367],{"class":650},[637,33500,657],{"class":642},[637,33502,660],{"class":642},[637,33504,8752],{"class":683},[637,33506,1897],{"class":2524},[637,33508,687],{"class":642},[637,33510,2529],{"class":2524},[637,33512,2537],{"class":683},[637,33514,660],{"class":642},[637,33516,2712],{"class":650},[637,33518,657],{"class":642},[637,33520,660],{"class":642},[637,33522,13348],{"class":663},[637,33524,660],{"class":642},[637,33526,787],{"class":642},[637,33528,33529],{"class":639,"line":578},[637,33530,742],{"emptyLinePlaceholder":594},[637,33532,33533],{"class":639,"line":708},[637,33534,33535],{"class":683},"// Octahedron with a custom material transformations\n",[637,33537,33538,33540,33542,33544,33546,33548,33550,33552,33554,33556,33558,33560,33562,33564,33566,33568,33570,33572,33574,33576,33578,33580,33582,33584,33586,33588,33590,33592,33594,33596],{"class":639,"line":729},[637,33539,643],{"class":642},[637,33541,257],{"class":646},[637,33543,3895],{"class":650},[637,33545,657],{"class":642},[637,33547,660],{"class":642},[637,33549,32784],{"class":663},[637,33551,660],{"class":642},[637,33553,3052],{"class":642},[637,33555,30367],{"class":650},[637,33557,657],{"class":642},[637,33559,660],{"class":642},[637,33561,8752],{"class":683},[637,33563,1897],{"class":2524},[637,33565,687],{"class":642},[637,33567,2529],{"class":2524},[637,33569,2537],{"class":683},[637,33571,660],{"class":642},[637,33573,3052],{"class":642},[637,33575,4153],{"class":650},[637,33577,657],{"class":642},[637,33579,660],{"class":642},[637,33581,8752],{"class":683},[637,33583,820],{"class":2524},[637,33585,687],{"class":642},[637,33587,30465],{"class":2524},[637,33589,687],{"class":642},[637,33591,2529],{"class":2524},[637,33593,2537],{"class":683},[637,33595,660],{"class":642},[637,33597,669],{"class":642},[637,33599,33600],{"class":639,"line":739},[637,33601,30480],{"class":683},[637,33603,33604,33606,33608],{"class":639,"line":745},[637,33605,732],{"class":642},[637,33607,257],{"class":646},[637,33609,669],{"class":642},[1349,33611,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":33613},[33614],{"id":624,"depth":578,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":257,"description":33615},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":33620,"title":261,"body":33621,"description":33790,"extension":591,"links":592,"meta":33791,"navigation":594,"path":262,"seo":33792,"stem":263,"__hash__":33793},"docs/2.api/5.shapes/plane.md",{"type":501,"value":33622,"toc":33787},[33623,33628,33638,33644,33650,33655,33657,33785],[608,33624,33625],{},[33626,33627],"shapes-plane",{},[614,33629,2799,33630,9489,33632,30331,33635,1146],{},[618,33631,7338],{},[618,33633,33634],{},"\u003CPlane />",[618,33636,33637],{},"PlaneGeometry",[626,33639,33642],{"className":33640,"code":33641,"language":30340},[30338],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[618,33643,33641],{"__ignoreMap":576},[614,33645,30345,33646],{},[1140,33647,33637],{"href":33648,"rel":33649},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1144],[2028,33651,33652],{},[614,33653,33654],{},"A convenient default rotation is applied to the x-axis of the plane (-Math.PI / 2), so that it is facing up (along the Y axis).",[504,33656,15],{"id":624},[626,33658,33660],{"className":628,"code":33659,"language":633,"meta":576,"style":576},"\u003CPlane :args=\"[1, 1]\" color=\"orange\" />\n\n// Plane with a custom material transformations\n\u003CPlane ref=\"planeRef\" :args=\"[8, 8]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Plane>\n",[618,33661,33662,33700,33704,33709,33773,33777],{"__ignoreMap":576},[637,33663,33664,33666,33668,33670,33672,33674,33676,33678,33680,33682,33684,33686,33688,33690,33692,33694,33696,33698],{"class":639,"line":577},[637,33665,643],{"class":642},[637,33667,261],{"class":646},[637,33669,3052],{"class":642},[637,33671,30367],{"class":650},[637,33673,657],{"class":642},[637,33675,660],{"class":642},[637,33677,8752],{"class":683},[637,33679,1897],{"class":2524},[637,33681,687],{"class":642},[637,33683,2584],{"class":2524},[637,33685,2537],{"class":683},[637,33687,660],{"class":642},[637,33689,2712],{"class":650},[637,33691,657],{"class":642},[637,33693,660],{"class":642},[637,33695,13348],{"class":663},[637,33697,660],{"class":642},[637,33699,787],{"class":642},[637,33701,33702],{"class":639,"line":578},[637,33703,742],{"emptyLinePlaceholder":594},[637,33705,33706],{"class":639,"line":708},[637,33707,33708],{"class":683},"// Plane with a custom material transformations\n",[637,33710,33711,33713,33715,33717,33719,33721,33724,33726,33728,33730,33732,33734,33736,33739,33741,33743,33745,33747,33749,33751,33753,33755,33757,33759,33761,33763,33765,33767,33769,33771],{"class":639,"line":729},[637,33712,643],{"class":642},[637,33714,261],{"class":646},[637,33716,3895],{"class":650},[637,33718,657],{"class":642},[637,33720,660],{"class":642},[637,33722,33723],{"class":663},"planeRef",[637,33725,660],{"class":642},[637,33727,3052],{"class":642},[637,33729,30367],{"class":650},[637,33731,657],{"class":642},[637,33733,660],{"class":642},[637,33735,8752],{"class":683},[637,33737,33738],{"class":2524},"8",[637,33740,687],{"class":642},[637,33742,31239],{"class":2524},[637,33744,2537],{"class":683},[637,33746,660],{"class":642},[637,33748,3052],{"class":642},[637,33750,4153],{"class":650},[637,33752,657],{"class":642},[637,33754,660],{"class":642},[637,33756,8752],{"class":683},[637,33758,965],{"class":2524},[637,33760,687],{"class":642},[637,33762,30465],{"class":2524},[637,33764,687],{"class":642},[637,33766,2529],{"class":2524},[637,33768,2537],{"class":683},[637,33770,660],{"class":642},[637,33772,669],{"class":642},[637,33774,33775],{"class":639,"line":739},[637,33776,30480],{"class":683},[637,33778,33779,33781,33783],{"class":639,"line":745},[637,33780,732],{"class":642},[637,33782,261],{"class":646},[637,33784,669],{"class":642},[1349,33786,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":33788},[33789],{"id":624,"depth":578,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":33790},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":33795,"title":265,"body":33796,"description":34150,"extension":591,"links":592,"meta":34151,"navigation":594,"path":266,"seo":34152,"stem":267,"__hash__":34153},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":501,"value":33797,"toc":34146},[33798,33803,33811,33813,34048,34050,34058,34144],[2318,33799,33800],{},[33801,33802],"shapes-quadratic-bezier-line",{},[614,33804,33805,31367,33808,33810],{},[618,33806,33807],{},"\u003CQuadraticBezierLine />",[618,33809,30531],{}," between start and end points, with an optional control point.",[504,33812,15],{"id":624},[626,33814,33816],{"className":628,"code":33815,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { QuadraticBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CQuadraticBezierLine\n :start=\"new Vector3(-1, 0, 0)\"\n :end=\"new Vector3(1, 0, 0)\"\n :mid=\"new Vector3(0, 1, 0)\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,33817,33818,33838,33856,33875,33893,33901,33905,33913,33921,33939,33946,33958,33970,33984,33996,34008,34020,34024,34032,34040],{"__ignoreMap":576},[637,33819,33820,33822,33824,33826,33828,33830,33832,33834,33836],{"class":639,"line":577},[637,33821,643],{"class":642},[637,33823,647],{"class":646},[637,33825,651],{"class":650},[637,33827,654],{"class":650},[637,33829,657],{"class":642},[637,33831,660],{"class":642},[637,33833,664],{"class":663},[637,33835,660],{"class":642},[637,33837,669],{"class":642},[637,33839,33840,33842,33844,33846,33848,33850,33852,33854],{"class":639,"line":578},[637,33841,677],{"class":676},[637,33843,680],{"class":642},[637,33845,715],{"class":683},[637,33847,693],{"class":642},[637,33849,696],{"class":676},[637,33851,699],{"class":642},[637,33853,724],{"class":663},[637,33855,705],{"class":642},[637,33857,33858,33860,33862,33865,33867,33869,33871,33873],{"class":639,"line":708},[637,33859,677],{"class":676},[637,33861,680],{"class":642},[637,33863,33864],{"class":683}," QuadraticBezierLine",[637,33866,693],{"class":642},[637,33868,696],{"class":676},[637,33870,699],{"class":642},[637,33872,702],{"class":663},[637,33874,705],{"class":642},[637,33876,33877,33879,33881,33883,33885,33887,33889,33891],{"class":639,"line":729},[637,33878,677],{"class":676},[637,33880,680],{"class":642},[637,33882,30613],{"class":683},[637,33884,693],{"class":642},[637,33886,696],{"class":676},[637,33888,699],{"class":642},[637,33890,4649],{"class":663},[637,33892,705],{"class":642},[637,33894,33895,33897,33899],{"class":639,"line":739},[637,33896,732],{"class":642},[637,33898,647],{"class":646},[637,33900,669],{"class":642},[637,33902,33903],{"class":639,"line":745},[637,33904,742],{"emptyLinePlaceholder":594},[637,33906,33907,33909,33911],{"class":639,"line":755},[637,33908,643],{"class":642},[637,33910,750],{"class":646},[637,33912,669],{"class":642},[637,33914,33915,33917,33919],{"class":639,"line":778},[637,33916,758],{"class":642},[637,33918,761],{"class":646},[637,33920,669],{"class":642},[637,33922,33923,33925,33927,33929,33931,33933,33935,33937],{"class":639,"line":790},[637,33924,781],{"class":642},[637,33926,784],{"class":646},[637,33928,1508],{"class":650},[637,33930,657],{"class":642},[637,33932,660],{"class":642},[637,33934,13301],{"class":663},[637,33936,660],{"class":642},[637,33938,787],{"class":642},[637,33940,33941,33943],{"class":639,"line":800},[637,33942,781],{"class":642},[637,33944,33945],{"class":646},"QuadraticBezierLine\n",[637,33947,33948,33950,33952,33954,33956],{"class":639,"line":805},[637,33949,31510],{"class":650},[637,33951,657],{"class":642},[637,33953,660],{"class":642},[637,33955,31517],{"class":663},[637,33957,3154],{"class":642},[637,33959,33960,33962,33964,33966,33968],{"class":639,"line":827},[637,33961,31524],{"class":650},[637,33963,657],{"class":642},[637,33965,660],{"class":642},[637,33967,31531],{"class":663},[637,33969,3154],{"class":642},[637,33971,33972,33975,33977,33979,33982],{"class":639,"line":631},[637,33973,33974],{"class":650}," :mid",[637,33976,657],{"class":642},[637,33978,660],{"class":642},[637,33980,33981],{"class":663},"new Vector3(0, 1, 0)",[637,33983,3154],{"class":642},[637,33985,33986,33988,33990,33992,33994],{"class":639,"line":850},[637,33987,30698],{"class":650},[637,33989,657],{"class":642},[637,33991,660],{"class":642},[637,33993,11397],{"class":663},[637,33995,3154],{"class":642},[637,33997,33998,34000,34002,34004,34006],{"class":639,"line":861},[637,33999,30712],{"class":650},[637,34001,657],{"class":642},[637,34003,660],{"class":642},[637,34005,13348],{"class":663},[637,34007,3154],{"class":642},[637,34009,34010,34012,34014,34016,34018],{"class":639,"line":872},[637,34011,30726],{"class":650},[637,34013,657],{"class":642},[637,34015,660],{"class":642},[637,34017,21410],{"class":663},[637,34019,3154],{"class":642},[637,34021,34022],{"class":639,"line":882},[637,34023,17292],{"class":642},[637,34025,34026,34028,34030],{"class":639,"line":632},[637,34027,781],{"class":642},[637,34029,9702],{"class":646},[637,34031,787],{"class":642},[637,34033,34034,34036,34038],{"class":639,"line":902},[637,34035,905],{"class":642},[637,34037,761],{"class":646},[637,34039,669],{"class":642},[637,34041,34042,34044,34046],{"class":639,"line":912},[637,34043,732],{"class":642},[637,34045,750],{"class":646},[637,34047,669],{"class":642},[504,34049,922],{"id":921},[614,34051,34052,31632,34054,7240,34056,1146],{},[618,34053,33807],{},[618,34055,30785],{},[618,34057,30531],{},[927,34059,34060,34074],{},[930,34061,34062],{},[933,34063,34064,34066,34068,34070,34072],{},[936,34065,938],{},[936,34067,5990],{},[936,34069,941],{},[936,34071,944],{},[936,34073,18605],{},[946,34075,34076,34093,34109,34128],{},[933,34077,34078,34082,34086,34088,34090],{},[951,34079,34080],{},[618,34081,14328],{},[951,34083,34084],{},[618,34085,31663],{},[951,34087,31666],{},[951,34089],{},[951,34091,34092],{},"yes",[933,34094,34095,34099,34103,34105,34107],{},[951,34096,34097],{},[618,34098,14342],{},[951,34100,34101],{},[618,34102,31663],{},[951,34104,31681],{},[951,34106],{},[951,34108,34092],{},[933,34110,34111,34116,34120,34123,34125],{},[951,34112,34113],{},[618,34114,34115],{},"mid",[951,34117,34118],{},[618,34119,31663],{},[951,34121,34122],{},"Control point",[951,34124],{},[951,34126,34127],{},"no",[933,34129,34130,34134,34138,34140,34142],{},[951,34131,34132],{},[618,34133,30800],{},[951,34135,34136],{},[618,34137,5375],{},[951,34139,30807],{},[951,34141,30810],{},[951,34143,34127],{},[1349,34145,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":34147},[34148,34149],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders a Line2 between start and end points with an optional control point.",{},{"title":265,"description":34150},"hH6Hhkz4HlI9pLG1_7W6Yd5ehTKlLTzjWtTfZEcye0I",{"id":34155,"title":269,"body":34156,"description":34327,"extension":591,"links":592,"meta":34328,"navigation":594,"path":270,"seo":34329,"stem":271,"__hash__":34330},"docs/2.api/5.shapes/ring.md",{"type":501,"value":34157,"toc":34324},[34158,34163,34173,34179,34185,34187,34322],[608,34159,34160],{},[34161,34162],"shapes-ring",{},[614,34164,2799,34165,9489,34167,30331,34170,1146],{},[618,34166,7338],{},[618,34168,34169],{},"\u003CRing />",[618,34171,34172],{},"RingGeometry",[626,34174,34177],{"className":34175,"code":34176,"language":30340},[30338],"args: [\n innerRadius: number,\n outerRadius: number,\n thetaSegments: number,\n phiSegments: number,\n thetaStart: number,\n thetaLength: number\n]\n",[618,34178,34176],{"__ignoreMap":576},[614,34180,30345,34181],{},[1140,34182,34172],{"href":34183,"rel":34184},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1144],[504,34186,15],{"id":624},[626,34188,34190],{"className":628,"code":34189,"language":633,"meta":576,"style":576},"\u003CRing :args=\"[0.5, 1, 32]\" color=\"orange\" />\n\n// Ring with a custom material transformations\n\u003CRing ref=\"ringRef\" :args=\"[0.5, 1, 32]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Ring>\n",[618,34191,34192,34234,34238,34243,34310,34314],{"__ignoreMap":576},[637,34193,34194,34196,34198,34200,34202,34204,34206,34208,34210,34212,34214,34216,34218,34220,34222,34224,34226,34228,34230,34232],{"class":639,"line":577},[637,34195,643],{"class":642},[637,34197,269],{"class":646},[637,34199,3052],{"class":642},[637,34201,30367],{"class":650},[637,34203,657],{"class":642},[637,34205,660],{"class":642},[637,34207,8752],{"class":683},[637,34209,1969],{"class":2524},[637,34211,687],{"class":642},[637,34213,2584],{"class":2524},[637,34215,687],{"class":642},[637,34217,31065],{"class":2524},[637,34219,2537],{"class":683},[637,34221,660],{"class":642},[637,34223,2712],{"class":650},[637,34225,657],{"class":642},[637,34227,660],{"class":642},[637,34229,13348],{"class":663},[637,34231,660],{"class":642},[637,34233,787],{"class":642},[637,34235,34236],{"class":639,"line":578},[637,34237,742],{"emptyLinePlaceholder":594},[637,34239,34240],{"class":639,"line":708},[637,34241,34242],{"class":683},"// Ring with a custom material transformations\n",[637,34244,34245,34247,34249,34251,34253,34255,34258,34260,34262,34264,34266,34268,34270,34272,34274,34276,34278,34280,34282,34284,34286,34288,34290,34292,34294,34296,34298,34300,34302,34304,34306,34308],{"class":639,"line":729},[637,34246,643],{"class":642},[637,34248,269],{"class":646},[637,34250,3895],{"class":650},[637,34252,657],{"class":642},[637,34254,660],{"class":642},[637,34256,34257],{"class":663},"ringRef",[637,34259,660],{"class":642},[637,34261,3052],{"class":642},[637,34263,30367],{"class":650},[637,34265,657],{"class":642},[637,34267,660],{"class":642},[637,34269,8752],{"class":683},[637,34271,1969],{"class":2524},[637,34273,687],{"class":642},[637,34275,2584],{"class":2524},[637,34277,687],{"class":642},[637,34279,31065],{"class":2524},[637,34281,2537],{"class":683},[637,34283,660],{"class":642},[637,34285,3052],{"class":642},[637,34287,4153],{"class":650},[637,34289,657],{"class":642},[637,34291,660],{"class":642},[637,34293,8752],{"class":683},[637,34295,820],{"class":2524},[637,34297,687],{"class":642},[637,34299,30465],{"class":2524},[637,34301,687],{"class":642},[637,34303,2529],{"class":2524},[637,34305,2537],{"class":683},[637,34307,660],{"class":642},[637,34309,669],{"class":642},[637,34311,34312],{"class":639,"line":739},[637,34313,30480],{"class":683},[637,34315,34316,34318,34320],{"class":639,"line":745},[637,34317,732],{"class":642},[637,34319,269],{"class":646},[637,34321,669],{"class":642},[1349,34323,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":34325},[34326],{"id":624,"depth":578,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":34327},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":34332,"title":273,"body":34333,"description":34489,"extension":591,"links":592,"meta":34490,"navigation":594,"path":274,"seo":34491,"stem":275,"__hash__":34492},"docs/2.api/5.shapes/rounded-box.md",{"type":501,"value":34334,"toc":34486},[34335,34340,34351,34357,34363,34365,34484],[608,34336,34337],{},[34338,34339],"shapes-rounded-box",{},[614,34341,2799,34342,9489,34344,30331,34347,34350],{},[618,34343,7338],{},[618,34345,34346],{},"\u003CRoundedBox />",[618,34348,34349],{},"RoundedBoxGeometry"," .",[626,34352,34355],{"className":34353,"code":34354,"language":30340},[30338],"args: [\n width: number, // default 1\n height: number, // default 1\n depth: number, // default 1\n segments: number, // default 2\n radius: number, // default 0.1\n]\n",[618,34356,34354],{"__ignoreMap":576},[614,34358,30345,34359],{},[1140,34360,34349],{"href":34361,"rel":34362},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1144],[504,34364,15],{"id":624},[626,34366,34368],{"className":628,"code":34367,"language":633,"meta":576,"style":576},"\u003CRoundedBox :args=\"[1, 1, 1, 2, 0.1]\" color=\"orange\" />\n\n// RoundedBox with a custom material transformations\n\u003CRoundedBox ref=\"boxRef\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/RoundedBox>\n",[618,34369,34370,34421,34425,34430,34472,34476],{"__ignoreMap":576},[637,34371,34372,34374,34377,34379,34381,34383,34385,34387,34389,34391,34393,34395,34397,34399,34401,34403,34405,34407,34409,34411,34413,34415,34417,34419],{"class":639,"line":577},[637,34373,643],{"class":642},[637,34375,34376],{"class":646},"RoundedBox",[637,34378,3052],{"class":642},[637,34380,30367],{"class":650},[637,34382,657],{"class":642},[637,34384,660],{"class":642},[637,34386,8752],{"class":683},[637,34388,1897],{"class":2524},[637,34390,687],{"class":642},[637,34392,2584],{"class":2524},[637,34394,687],{"class":642},[637,34396,2584],{"class":2524},[637,34398,687],{"class":642},[637,34400,31833],{"class":2524},[637,34402,687],{"class":642},[637,34404,23603],{"class":2524},[637,34406,2537],{"class":683},[637,34408,660],{"class":642},[637,34410,2712],{"class":650},[637,34412,657],{"class":642},[637,34414,660],{"class":642},[637,34416,13348],{"class":663},[637,34418,660],{"class":642},[637,34420,787],{"class":642},[637,34422,34423],{"class":639,"line":578},[637,34424,742],{"emptyLinePlaceholder":594},[637,34426,34427],{"class":639,"line":708},[637,34428,34429],{"class":683},"// RoundedBox with a custom material transformations\n",[637,34431,34432,34434,34436,34438,34440,34442,34444,34446,34448,34450,34452,34454,34456,34458,34460,34462,34464,34466,34468,34470],{"class":639,"line":729},[637,34433,643],{"class":642},[637,34435,34376],{"class":646},[637,34437,3895],{"class":650},[637,34439,657],{"class":642},[637,34441,660],{"class":642},[637,34443,16354],{"class":663},[637,34445,660],{"class":642},[637,34447,3052],{"class":642},[637,34449,4153],{"class":650},[637,34451,657],{"class":642},[637,34453,660],{"class":642},[637,34455,8752],{"class":683},[637,34457,965],{"class":2524},[637,34459,687],{"class":642},[637,34461,30465],{"class":2524},[637,34463,687],{"class":642},[637,34465,2529],{"class":2524},[637,34467,2537],{"class":683},[637,34469,660],{"class":642},[637,34471,669],{"class":642},[637,34473,34474],{"class":639,"line":739},[637,34475,30480],{"class":683},[637,34477,34478,34480,34482],{"class":639,"line":745},[637,34479,732],{"class":642},[637,34481,34376],{"class":646},[637,34483,669],{"class":642},[1349,34485,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":34487},[34488],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":34489},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":34494,"title":277,"body":34495,"description":34650,"extension":591,"links":592,"meta":34651,"navigation":594,"path":278,"seo":34652,"stem":279,"__hash__":34653},"docs/2.api/5.shapes/rounded-plane.md",{"type":501,"value":34496,"toc":34647},[34497,34502,34519,34525,34527,34645],[608,34498,34499],{},[34500,34501],"shapes-rounded-plane",{},[614,34503,2799,34504,9489,34506,30331,34509,34512,34513,34518],{},[618,34505,7338],{},[618,34507,34508],{},"\u003CRoundedPlane />",[618,34510,34511],{},"RoundedPlaneGeometry",": a plane with rounded corners. The geometry is vendored from ",[1140,34514,34517],{"href":34515,"rel":34516},"https://github.com/pmndrs/maath/blob/main/packages/maath/src/geometry.ts",[1144],"pmndrs/maath"," (MIT), so it ships with no extra dependency.",[626,34520,34523],{"className":34521,"code":34522,"language":30340},[30338],"args: [\n width: number, // default 1\n height: number, // default 1\n radius: number, // default 0.2\n segments: number, // default 16\n]\n",[618,34524,34522],{"__ignoreMap":576},[504,34526,15],{"id":624},[626,34528,34530],{"className":628,"code":34529,"language":633,"meta":576,"style":576},"\u003CRoundedPlane :args=\"[1.5, 1, 0.2, 16]\" color=\"orange\" />\n\n// RoundedPlane with a custom material\n\u003CRoundedPlane ref=\"planeRef\" :position=\"[0, 4, 0]\">\n \u003CTresMeshStandardMaterial color=\"orange\" />\n\u003C/RoundedPlane>\n",[618,34531,34532,34581,34585,34590,34632,34637],{"__ignoreMap":576},[637,34533,34534,34536,34539,34541,34543,34545,34547,34549,34551,34553,34555,34557,34560,34562,34565,34567,34569,34571,34573,34575,34577,34579],{"class":639,"line":577},[637,34535,643],{"class":642},[637,34537,34538],{"class":646},"RoundedPlane",[637,34540,3052],{"class":642},[637,34542,30367],{"class":650},[637,34544,657],{"class":642},[637,34546,660],{"class":642},[637,34548,8752],{"class":683},[637,34550,29415],{"class":2524},[637,34552,687],{"class":642},[637,34554,2584],{"class":2524},[637,34556,687],{"class":642},[637,34558,34559],{"class":2524}," 0.2",[637,34561,687],{"class":642},[637,34563,34564],{"class":2524}," 16",[637,34566,2537],{"class":683},[637,34568,660],{"class":642},[637,34570,2712],{"class":650},[637,34572,657],{"class":642},[637,34574,660],{"class":642},[637,34576,13348],{"class":663},[637,34578,660],{"class":642},[637,34580,787],{"class":642},[637,34582,34583],{"class":639,"line":578},[637,34584,742],{"emptyLinePlaceholder":594},[637,34586,34587],{"class":639,"line":708},[637,34588,34589],{"class":683},"// RoundedPlane with a custom material\n",[637,34591,34592,34594,34596,34598,34600,34602,34604,34606,34608,34610,34612,34614,34616,34618,34620,34622,34624,34626,34628,34630],{"class":639,"line":729},[637,34593,643],{"class":642},[637,34595,34538],{"class":646},[637,34597,3895],{"class":650},[637,34599,657],{"class":642},[637,34601,660],{"class":642},[637,34603,33723],{"class":663},[637,34605,660],{"class":642},[637,34607,3052],{"class":642},[637,34609,4153],{"class":650},[637,34611,657],{"class":642},[637,34613,660],{"class":642},[637,34615,8752],{"class":683},[637,34617,965],{"class":2524},[637,34619,687],{"class":642},[637,34621,30465],{"class":2524},[637,34623,687],{"class":642},[637,34625,2529],{"class":2524},[637,34627,2537],{"class":683},[637,34629,660],{"class":642},[637,34631,669],{"class":642},[637,34633,34634],{"class":639,"line":739},[637,34635,34636],{"class":683}," \u003CTresMeshStandardMaterial color=\"orange\" />\n",[637,34638,34639,34641,34643],{"class":639,"line":745},[637,34640,732],{"class":642},[637,34642,34538],{"class":646},[637,34644,669],{"class":642},[1349,34646,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":34648},[34649],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedPlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":34650},"HH5158_07Il55CXeB5dFOKuUS3I52MwiYYeqEjcgDoM",{"id":34655,"title":281,"body":34656,"description":34844,"extension":591,"links":592,"meta":34845,"navigation":594,"path":282,"seo":34846,"stem":283,"__hash__":34847},"docs/2.api/5.shapes/screen-quad.md",{"type":501,"value":34657,"toc":34840},[34658,34663,34666,34668,34818,34822,34838],[2318,34659,34660],{},[34661,34662],"shapes-screen-quad",{},[614,34664,34665],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[504,34667,15],{"id":624},[626,34669,34671],{"className":628,"code":34670,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { ScreenQuad } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresOrthographicCamera />\n \u003CScreenQuad>\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/ScreenQuad>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,34672,34673,34693,34711,34730,34738,34742,34750,34758,34767,34776,34794,34802,34810],{"__ignoreMap":576},[637,34674,34675,34677,34679,34681,34683,34685,34687,34689,34691],{"class":639,"line":577},[637,34676,643],{"class":642},[637,34678,647],{"class":646},[637,34680,651],{"class":650},[637,34682,654],{"class":650},[637,34684,657],{"class":642},[637,34686,660],{"class":642},[637,34688,664],{"class":663},[637,34690,660],{"class":642},[637,34692,669],{"class":642},[637,34694,34695,34697,34699,34701,34703,34705,34707,34709],{"class":639,"line":578},[637,34696,677],{"class":676},[637,34698,680],{"class":642},[637,34700,715],{"class":683},[637,34702,693],{"class":642},[637,34704,696],{"class":676},[637,34706,699],{"class":642},[637,34708,724],{"class":663},[637,34710,705],{"class":642},[637,34712,34713,34715,34717,34720,34722,34724,34726,34728],{"class":639,"line":708},[637,34714,677],{"class":676},[637,34716,680],{"class":642},[637,34718,34719],{"class":683}," ScreenQuad",[637,34721,693],{"class":642},[637,34723,696],{"class":676},[637,34725,699],{"class":642},[637,34727,702],{"class":663},[637,34729,705],{"class":642},[637,34731,34732,34734,34736],{"class":639,"line":729},[637,34733,732],{"class":642},[637,34735,647],{"class":646},[637,34737,669],{"class":642},[637,34739,34740],{"class":639,"line":739},[637,34741,742],{"emptyLinePlaceholder":594},[637,34743,34744,34746,34748],{"class":639,"line":745},[637,34745,643],{"class":642},[637,34747,750],{"class":646},[637,34749,669],{"class":642},[637,34751,34752,34754,34756],{"class":639,"line":755},[637,34753,758],{"class":642},[637,34755,761],{"class":646},[637,34757,669],{"class":642},[637,34759,34760,34762,34765],{"class":639,"line":778},[637,34761,781],{"class":642},[637,34763,34764],{"class":646},"TresOrthographicCamera",[637,34766,787],{"class":642},[637,34768,34769,34771,34774],{"class":639,"line":790},[637,34770,781],{"class":642},[637,34772,34773],{"class":646},"ScreenQuad",[637,34775,669],{"class":642},[637,34777,34778,34780,34782,34784,34786,34788,34790,34792],{"class":639,"line":800},[637,34779,853],{"class":642},[637,34781,13339],{"class":646},[637,34783,2712],{"class":650},[637,34785,657],{"class":642},[637,34787,660],{"class":642},[637,34789,13348],{"class":663},[637,34791,660],{"class":642},[637,34793,787],{"class":642},[637,34795,34796,34798,34800],{"class":639,"line":805},[637,34797,895],{"class":642},[637,34799,34773],{"class":646},[637,34801,669],{"class":642},[637,34803,34804,34806,34808],{"class":639,"line":827},[637,34805,905],{"class":642},[637,34807,761],{"class":646},[637,34809,669],{"class":642},[637,34811,34812,34814,34816],{"class":639,"line":631},[637,34813,732],{"class":642},[637,34815,750],{"class":646},[637,34817,669],{"class":642},[504,34819,34821],{"id":34820},"references","References",[2236,34823,34824,34831],{},[2239,34825,34826],{},[1140,34827,34830],{"href":34828,"rel":34829},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1144],"Why a triangle?",[2239,34832,34833],{},[1140,34834,34837],{"href":34835,"rel":34836},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1144],"Simple postprocessing in Three.js",[1349,34839,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":34841},[34842,34843],{"id":624,"depth":578,"text":15},{"id":34820,"depth":578,"text":34821},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":281,"description":34844},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":34849,"title":285,"body":34850,"description":35020,"extension":591,"links":592,"meta":35021,"navigation":594,"path":286,"seo":35022,"stem":287,"__hash__":35023},"docs/2.api/5.shapes/sphere.md",{"type":501,"value":34851,"toc":35017},[34852,34857,34867,34873,34879,34881,35015],[608,34853,34854],{},[34855,34856],"shapes-sphere",{},[614,34858,2799,34859,9489,34861,30331,34864,1146],{},[618,34860,7338],{},[618,34862,34863],{},"\u003CSphere />",[618,34865,34866],{},"SphereGeometry",[626,34868,34871],{"className":34869,"code":34870,"language":30340},[30338],"args: [\n radius: number,\n widthSegments: number,\n heightSegments: number,\n phiStart: number,\n phiLength: number,\n thetaStart: number,\n thetaLength: number\n]\n",[618,34872,34870],{"__ignoreMap":576},[614,34874,30345,34875],{},[1140,34876,34866],{"href":34877,"rel":34878},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1144],[504,34880,15],{"id":624},[626,34882,34884],{"className":628,"code":34883,"language":633,"meta":576,"style":576},"\u003CSphere :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Sphere with a custom material transformations\n\u003CSphere ref=\"planeRef\" :args=\"[1, 1, 1]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Sphere>\n",[618,34885,34886,34928,34932,34937,35003,35007],{"__ignoreMap":576},[637,34887,34888,34890,34892,34894,34896,34898,34900,34902,34904,34906,34908,34910,34912,34914,34916,34918,34920,34922,34924,34926],{"class":639,"line":577},[637,34889,643],{"class":642},[637,34891,285],{"class":646},[637,34893,3052],{"class":642},[637,34895,30367],{"class":650},[637,34897,657],{"class":642},[637,34899,660],{"class":642},[637,34901,8752],{"class":683},[637,34903,1897],{"class":2524},[637,34905,687],{"class":642},[637,34907,2584],{"class":2524},[637,34909,687],{"class":642},[637,34911,2584],{"class":2524},[637,34913,2537],{"class":683},[637,34915,660],{"class":642},[637,34917,2712],{"class":650},[637,34919,657],{"class":642},[637,34921,660],{"class":642},[637,34923,13348],{"class":663},[637,34925,660],{"class":642},[637,34927,787],{"class":642},[637,34929,34930],{"class":639,"line":578},[637,34931,742],{"emptyLinePlaceholder":594},[637,34933,34934],{"class":639,"line":708},[637,34935,34936],{"class":683},"// Sphere with a custom material transformations\n",[637,34938,34939,34941,34943,34945,34947,34949,34951,34953,34955,34957,34959,34961,34963,34965,34967,34969,34971,34973,34975,34977,34979,34981,34983,34985,34987,34989,34991,34993,34995,34997,34999,35001],{"class":639,"line":729},[637,34940,643],{"class":642},[637,34942,285],{"class":646},[637,34944,3895],{"class":650},[637,34946,657],{"class":642},[637,34948,660],{"class":642},[637,34950,33723],{"class":663},[637,34952,660],{"class":642},[637,34954,3052],{"class":642},[637,34956,30367],{"class":650},[637,34958,657],{"class":642},[637,34960,660],{"class":642},[637,34962,8752],{"class":683},[637,34964,1897],{"class":2524},[637,34966,687],{"class":642},[637,34968,2584],{"class":2524},[637,34970,687],{"class":642},[637,34972,2584],{"class":2524},[637,34974,2537],{"class":683},[637,34976,660],{"class":642},[637,34978,3052],{"class":642},[637,34980,4153],{"class":650},[637,34982,657],{"class":642},[637,34984,660],{"class":642},[637,34986,8752],{"class":683},[637,34988,820],{"class":2524},[637,34990,687],{"class":642},[637,34992,30465],{"class":2524},[637,34994,687],{"class":642},[637,34996,2529],{"class":2524},[637,34998,2537],{"class":683},[637,35000,660],{"class":642},[637,35002,669],{"class":642},[637,35004,35005],{"class":639,"line":739},[637,35006,30480],{"class":683},[637,35008,35009,35011,35013],{"class":639,"line":745},[637,35010,732],{"class":642},[637,35012,285],{"class":646},[637,35014,669],{"class":642},[1349,35016,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":35018},[35019],{"id":624,"depth":578,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":285,"description":35020},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":35025,"title":289,"body":35026,"description":35424,"extension":591,"links":592,"meta":35425,"navigation":594,"path":290,"seo":35426,"stem":291,"__hash__":35427},"docs/2.api/5.shapes/superformula.md",{"type":501,"value":35027,"toc":35419},[35028,35033,35046,35048,35284,35286,35296,35408,35412,35417],[608,35029,35030],{},[35031,35032],"shapes-super-formula",{},[614,35034,2799,35035,9489,35037,35040,35041,1146],{},[618,35036,7338],{},[618,35038,35039],{},"\u003CSuperformula />"," component that produces a configurable ",[1140,35042,35045],{"href":35043,"rel":35044},"https://en.wikipedia.org/wiki/Superformula",[1144],"3D plot of the superformula",[504,35047,15],{"id":624},[626,35049,35052],{"className":628,"code":35050,"highlights":35051,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Superformula } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CSuperformula\n :width-segments=\"64\"\n :height-segments=\"64\"\n :num-arms-a=\"5\"\n :exp-a=\"[40, 1.3, 0.9]\"\n color=\"#ff6b6b\"\n />\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631,850],[618,35053,35054,35074,35092,35112,35120,35124,35132,35140,35158,35166,35181,35195,35209,35224,35238,35242,35250,35268,35276],{"__ignoreMap":576},[637,35055,35056,35058,35060,35062,35064,35066,35068,35070,35072],{"class":639,"line":577},[637,35057,643],{"class":642},[637,35059,647],{"class":646},[637,35061,651],{"class":650},[637,35063,654],{"class":650},[637,35065,657],{"class":642},[637,35067,660],{"class":642},[637,35069,664],{"class":663},[637,35071,660],{"class":642},[637,35073,669],{"class":642},[637,35075,35076,35078,35080,35082,35084,35086,35088,35090],{"class":639,"line":578},[637,35077,677],{"class":676},[637,35079,680],{"class":642},[637,35081,715],{"class":683},[637,35083,693],{"class":642},[637,35085,696],{"class":676},[637,35087,699],{"class":642},[637,35089,724],{"class":663},[637,35091,705],{"class":642},[637,35093,35095,35097,35099,35102,35104,35106,35108,35110],{"class":35094,"line":708},[639,673],[637,35096,677],{"class":676},[637,35098,680],{"class":642},[637,35100,35101],{"class":683}," Superformula",[637,35103,693],{"class":642},[637,35105,696],{"class":676},[637,35107,699],{"class":642},[637,35109,702],{"class":663},[637,35111,705],{"class":642},[637,35113,35114,35116,35118],{"class":639,"line":729},[637,35115,732],{"class":642},[637,35117,647],{"class":646},[637,35119,669],{"class":642},[637,35121,35122],{"class":639,"line":739},[637,35123,742],{"emptyLinePlaceholder":594},[637,35125,35126,35128,35130],{"class":639,"line":745},[637,35127,643],{"class":642},[637,35129,750],{"class":646},[637,35131,669],{"class":642},[637,35133,35134,35136,35138],{"class":639,"line":755},[637,35135,758],{"class":642},[637,35137,761],{"class":646},[637,35139,669],{"class":642},[637,35141,35142,35144,35146,35148,35150,35152,35154,35156],{"class":639,"line":778},[637,35143,781],{"class":642},[637,35145,784],{"class":646},[637,35147,1508],{"class":650},[637,35149,657],{"class":642},[637,35151,660],{"class":642},[637,35153,13301],{"class":663},[637,35155,660],{"class":642},[637,35157,787],{"class":642},[637,35159,35161,35163],{"class":35160,"line":790},[639,673],[637,35162,781],{"class":642},[637,35164,35165],{"class":646},"Superformula\n",[637,35167,35169,35172,35174,35176,35179],{"class":35168,"line":800},[639,673],[637,35170,35171],{"class":650}," :width-segments",[637,35173,657],{"class":642},[637,35175,660],{"class":642},[637,35177,35178],{"class":663},"64",[637,35180,3154],{"class":642},[637,35182,35184,35187,35189,35191,35193],{"class":35183,"line":805},[639,673],[637,35185,35186],{"class":650}," :height-segments",[637,35188,657],{"class":642},[637,35190,660],{"class":642},[637,35192,35178],{"class":663},[637,35194,3154],{"class":642},[637,35196,35198,35201,35203,35205,35207],{"class":35197,"line":827},[639,673],[637,35199,35200],{"class":650}," :num-arms-a",[637,35202,657],{"class":642},[637,35204,660],{"class":642},[637,35206,12730],{"class":663},[637,35208,3154],{"class":642},[637,35210,35212,35215,35217,35219,35222],{"class":35211,"line":631},[639,673],[637,35213,35214],{"class":650}," :exp-a",[637,35216,657],{"class":642},[637,35218,660],{"class":642},[637,35220,35221],{"class":663},"[40, 1.3, 0.9]",[637,35223,3154],{"class":642},[637,35225,35227,35229,35231,35233,35236],{"class":35226,"line":850},[639,673],[637,35228,30712],{"class":650},[637,35230,657],{"class":642},[637,35232,660],{"class":642},[637,35234,35235],{"class":663},"#ff6b6b",[637,35237,3154],{"class":642},[637,35239,35240],{"class":639,"line":861},[637,35241,17292],{"class":642},[637,35243,35244,35246,35248],{"class":639,"line":872},[637,35245,781],{"class":642},[637,35247,9702],{"class":646},[637,35249,787],{"class":642},[637,35251,35252,35254,35256,35258,35260,35262,35264,35266],{"class":639,"line":882},[637,35253,781],{"class":642},[637,35255,9721],{"class":646},[637,35257,1508],{"class":650},[637,35259,657],{"class":642},[637,35261,660],{"class":642},[637,35263,13383],{"class":663},[637,35265,660],{"class":642},[637,35267,787],{"class":642},[637,35269,35270,35272,35274],{"class":639,"line":632},[637,35271,905],{"class":642},[637,35273,761],{"class":646},[637,35275,669],{"class":642},[637,35277,35278,35280,35282],{"class":639,"line":902},[637,35279,732],{"class":642},[637,35281,750],{"class":646},[637,35283,669],{"class":642},[504,35285,922],{"id":921},[614,35287,2799,35288,35290,35291,35295],{},[618,35289,35039],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1140,35292,35294],{"href":35043,"rel":35293},[1144],"Wikipedia article about the superformula"," for more information about the function's arguments.",[927,35297,35298,35308],{},[930,35299,35300],{},[933,35301,35302,35304,35306],{},[936,35303,8110],{"align":997},[936,35305,941],{"align":997},[936,35307,944],{"align":997},[946,35309,35310,35325,35339,35353,35367,35381,35395],{},[933,35311,35312,35317,35320],{},[951,35313,35314],{"align":997},[1692,35315,35316],{},"widthSegments",[951,35318,35319],{"align":997},"Number of horizontal mesh segments",[951,35321,35322],{"align":997},[618,35323,35324],{},"32",[933,35326,35327,35332,35335],{},[951,35328,35329],{"align":997},[1692,35330,35331],{},"heightSegments",[951,35333,35334],{"align":997},"Number of vertical mesh segments",[951,35336,35337],{"align":997},[618,35338,35324],{},[933,35340,35341,35346,35349],{},[951,35342,35343],{"align":997},[1692,35344,35345],{},"numArmsA",[951,35347,35348],{"align":997},"For A, number of radial arms/ripples",[951,35350,35351],{"align":997},[618,35352,9674],{},[933,35354,35355,35360,35363],{},[951,35356,35357],{"align":997},[1692,35358,35359],{},"expA",[951,35361,35362],{"align":997},"A's 3 exponents",[951,35364,35365],{"align":997},[618,35366,35221],{},[933,35368,35369,35374,35377],{},[951,35370,35371],{"align":997},[1692,35372,35373],{},"numArmsB",[951,35375,35376],{"align":997},"For B, number of radial arms/ripples",[951,35378,35379],{"align":997},[618,35380,9674],{},[933,35382,35383,35388,35391],{},[951,35384,35385],{"align":997},[1692,35386,35387],{},"expB",[951,35389,35390],{"align":997},"B's 3 exponents",[951,35392,35393],{"align":997},[618,35394,35221],{},[933,35396,35397,35401,35404],{},[951,35398,35399],{"align":997},[1692,35400,7568],{},[951,35402,35403],{"align":997},"If no material is provided, a color for the default material",[951,35405,35406],{"align":997},[618,35407,30883],{},[504,35409,35411],{"id":35410},"slot","Slot",[614,35413,35414,35416],{},[618,35415,35039],{}," has a single slot for an optional material.",[1349,35418,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":35420},[35421,35422,35423],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":35410,"depth":578,"text":35411},"Produces a configurable 3D plot of the superformula.",{},{"title":289,"description":35424},"MwKL1T459MzFaCW-z9Syi59B9UEjgZjpfCi8goXNYmQ",{"id":35429,"title":293,"body":35430,"description":35592,"extension":591,"links":592,"meta":35593,"navigation":594,"path":294,"seo":35594,"stem":295,"__hash__":35595},"docs/2.api/5.shapes/tetrahedron.md",{"type":501,"value":35431,"toc":35589},[35432,35437,35447,35452,35458,35460,35587],[608,35433,35434],{},[35435,35436],"shapes-tetrahedron",{},[614,35438,2799,35439,9489,35441,30331,35444,1146],{},[618,35440,7338],{},[618,35442,35443],{},"\u003CTetrahedron />",[618,35445,35446],{},"TetrahedronGeometry",[626,35448,35450],{"className":35449,"code":31998,"language":30340},[30338],[618,35451,31998],{"__ignoreMap":576},[614,35453,30345,35454],{},[1140,35455,35446],{"href":35456,"rel":35457},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1144],[504,35459,15],{"id":624},[626,35461,35463],{"className":628,"code":35462,"language":633,"meta":576,"style":576},"\u003CTetrahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Tetrahedron with a custom material transformations\n\u003CTetrahedron ref=\"tetrahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Tetrahedron>\n",[618,35464,35465,35503,35507,35512,35575,35579],{"__ignoreMap":576},[637,35466,35467,35469,35471,35473,35475,35477,35479,35481,35483,35485,35487,35489,35491,35493,35495,35497,35499,35501],{"class":639,"line":577},[637,35468,643],{"class":642},[637,35470,293],{"class":646},[637,35472,3052],{"class":642},[637,35474,30367],{"class":650},[637,35476,657],{"class":642},[637,35478,660],{"class":642},[637,35480,8752],{"class":683},[637,35482,1897],{"class":2524},[637,35484,687],{"class":642},[637,35486,2529],{"class":2524},[637,35488,2537],{"class":683},[637,35490,660],{"class":642},[637,35492,2712],{"class":650},[637,35494,657],{"class":642},[637,35496,660],{"class":642},[637,35498,13348],{"class":663},[637,35500,660],{"class":642},[637,35502,787],{"class":642},[637,35504,35505],{"class":639,"line":578},[637,35506,742],{"emptyLinePlaceholder":594},[637,35508,35509],{"class":639,"line":708},[637,35510,35511],{"class":683},"// Tetrahedron with a custom material transformations\n",[637,35513,35514,35516,35518,35520,35522,35524,35527,35529,35531,35533,35535,35537,35539,35541,35543,35545,35547,35549,35551,35553,35555,35557,35559,35561,35563,35565,35567,35569,35571,35573],{"class":639,"line":729},[637,35515,643],{"class":642},[637,35517,293],{"class":646},[637,35519,3895],{"class":650},[637,35521,657],{"class":642},[637,35523,660],{"class":642},[637,35525,35526],{"class":663},"tetrahedronRef",[637,35528,660],{"class":642},[637,35530,3052],{"class":642},[637,35532,30367],{"class":650},[637,35534,657],{"class":642},[637,35536,660],{"class":642},[637,35538,8752],{"class":683},[637,35540,1897],{"class":2524},[637,35542,687],{"class":642},[637,35544,2529],{"class":2524},[637,35546,2537],{"class":683},[637,35548,660],{"class":642},[637,35550,3052],{"class":642},[637,35552,4153],{"class":650},[637,35554,657],{"class":642},[637,35556,660],{"class":642},[637,35558,8752],{"class":683},[637,35560,820],{"class":2524},[637,35562,687],{"class":642},[637,35564,30465],{"class":2524},[637,35566,687],{"class":642},[637,35568,2529],{"class":2524},[637,35570,2537],{"class":683},[637,35572,660],{"class":642},[637,35574,669],{"class":642},[637,35576,35577],{"class":639,"line":739},[637,35578,30480],{"class":683},[637,35580,35581,35583,35585],{"class":639,"line":745},[637,35582,732],{"class":642},[637,35584,293],{"class":646},[637,35586,669],{"class":642},[1349,35588,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":35590},[35591],{"id":624,"depth":578,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":293,"description":35592},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":35597,"title":297,"body":35598,"description":35782,"extension":591,"links":592,"meta":35783,"navigation":594,"path":298,"seo":35784,"stem":299,"__hash__":35785},"docs/2.api/5.shapes/torus.md",{"type":501,"value":35599,"toc":35779},[35600,35605,35615,35621,35627,35629,35777],[608,35601,35602],{},[35603,35604],"shapes-torus",{},[614,35606,2799,35607,9489,35609,30331,35612,1146],{},[618,35608,7338],{},[618,35610,35611],{},"\u003CTorus />",[618,35613,35614],{},"TorusGeometry",[626,35616,35619],{"className":35617,"code":35618,"language":30340},[30338],"args: [\n radius: number,\n tube: number,\n radialSegments: number,\n tubularSegments: number,\n arc: number\n]\n",[618,35620,35618],{"__ignoreMap":576},[614,35622,30345,35623],{},[1140,35624,35614],{"href":35625,"rel":35626},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1144],[504,35628,15],{"id":624},[626,35630,35632],{"className":628,"code":35631,"language":633,"meta":576,"style":576},"\u003CTorus :args=\"[2, 0.4, 42, 100]\" color=\"orange\" />\n\n// Torus with a custom material transformations\n\u003CTorus ref=\"torusRef\" :args=\"[0.75, 0.4, 16, 80]\" :position=\"[-2, 6, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Torus>\n",[618,35633,35634,35682,35686,35691,35765,35769],{"__ignoreMap":576},[637,35635,35636,35638,35640,35642,35644,35646,35648,35650,35652,35654,35657,35659,35662,35664,35666,35668,35670,35672,35674,35676,35678,35680],{"class":639,"line":577},[637,35637,643],{"class":642},[637,35639,297],{"class":646},[637,35641,3052],{"class":642},[637,35643,30367],{"class":650},[637,35645,657],{"class":642},[637,35647,660],{"class":642},[637,35649,8752],{"class":683},[637,35651,820],{"class":2524},[637,35653,687],{"class":642},[637,35655,35656],{"class":2524}," 0.4",[637,35658,687],{"class":642},[637,35660,35661],{"class":2524}," 42",[637,35663,687],{"class":642},[637,35665,7784],{"class":2524},[637,35667,2537],{"class":683},[637,35669,660],{"class":642},[637,35671,2712],{"class":650},[637,35673,657],{"class":642},[637,35675,660],{"class":642},[637,35677,13348],{"class":663},[637,35679,660],{"class":642},[637,35681,787],{"class":642},[637,35683,35684],{"class":639,"line":578},[637,35685,742],{"emptyLinePlaceholder":594},[637,35687,35688],{"class":639,"line":708},[637,35689,35690],{"class":683},"// Torus with a custom material transformations\n",[637,35692,35693,35695,35697,35699,35701,35703,35705,35707,35709,35711,35713,35715,35717,35719,35721,35723,35725,35727,35729,35732,35734,35736,35738,35740,35742,35744,35746,35748,35750,35752,35755,35757,35759,35761,35763],{"class":639,"line":729},[637,35694,643],{"class":642},[637,35696,297],{"class":646},[637,35698,3895],{"class":650},[637,35700,657],{"class":642},[637,35702,660],{"class":642},[637,35704,12348],{"class":663},[637,35706,660],{"class":642},[637,35708,3052],{"class":642},[637,35710,30367],{"class":650},[637,35712,657],{"class":642},[637,35714,660],{"class":642},[637,35716,8752],{"class":683},[637,35718,2574],{"class":2524},[637,35720,687],{"class":642},[637,35722,35656],{"class":2524},[637,35724,687],{"class":642},[637,35726,34564],{"class":2524},[637,35728,687],{"class":642},[637,35730,35731],{"class":2524}," 80",[637,35733,2537],{"class":683},[637,35735,660],{"class":642},[637,35737,3052],{"class":642},[637,35739,4153],{"class":650},[637,35741,657],{"class":642},[637,35743,660],{"class":642},[637,35745,8752],{"class":683},[637,35747,8526],{"class":642},[637,35749,820],{"class":2524},[637,35751,687],{"class":642},[637,35753,35754],{"class":2524}," 6",[637,35756,687],{"class":642},[637,35758,2529],{"class":2524},[637,35760,2537],{"class":683},[637,35762,660],{"class":642},[637,35764,669],{"class":642},[637,35766,35767],{"class":639,"line":739},[637,35768,30480],{"class":683},[637,35770,35771,35773,35775],{"class":639,"line":745},[637,35772,732],{"class":642},[637,35774,297],{"class":646},[637,35776,669],{"class":642},[1349,35778,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":35780},[35781],{"id":624,"depth":578,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":297,"description":35782},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":35787,"title":301,"body":35788,"description":35971,"extension":591,"links":592,"meta":35972,"navigation":594,"path":302,"seo":35973,"stem":303,"__hash__":35974},"docs/2.api/5.shapes/torus-knot.md",{"type":501,"value":35789,"toc":35968},[35790,35795,35805,35811,35817,35819,35966],[608,35791,35792],{},[35793,35794],"shapes-torus-knot",{},[614,35796,2799,35797,9489,35799,30331,35802,1146],{},[618,35798,7338],{},[618,35800,35801],{},"\u003CTorusKnot />",[618,35803,35804],{},"TorusKnotGeometry",[626,35806,35809],{"className":35807,"code":35808,"language":30340},[30338],"args: [\n radius: number,\n tube: number,\n tubularSegments: number,\n radialSegments: number,\n p: number,\n q: number\n]\n",[618,35810,35808],{"__ignoreMap":576},[614,35812,30345,35813],{},[1140,35814,35804],{"href":35815,"rel":35816},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1144],[504,35818,15],{"id":624},[626,35820,35822],{"className":628,"code":35821,"language":633,"meta":576,"style":576},"\u003CTorusKnot :args=\"[0.6, 0.2, 64, 8]\" color=\"orange\" />\n\n// TorusKnot with a custom material transformations\n\u003CTorusKnot ref=\"torusKnotRef\" :args=\"[0.6, 0.2, 64, 8]\" :position=\"[-2, 6, 2]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/TorusKnot>\n",[618,35823,35824,35872,35876,35881,35954,35958],{"__ignoreMap":576},[637,35825,35826,35828,35831,35833,35835,35837,35839,35841,35843,35845,35847,35849,35852,35854,35856,35858,35860,35862,35864,35866,35868,35870],{"class":639,"line":577},[637,35827,643],{"class":642},[637,35829,35830],{"class":646},"TorusKnot",[637,35832,3052],{"class":642},[637,35834,30367],{"class":650},[637,35836,657],{"class":642},[637,35838,660],{"class":642},[637,35840,8752],{"class":683},[637,35842,10682],{"class":2524},[637,35844,687],{"class":642},[637,35846,34559],{"class":2524},[637,35848,687],{"class":642},[637,35850,35851],{"class":2524}," 64",[637,35853,687],{"class":642},[637,35855,31239],{"class":2524},[637,35857,2537],{"class":683},[637,35859,660],{"class":642},[637,35861,2712],{"class":650},[637,35863,657],{"class":642},[637,35865,660],{"class":642},[637,35867,13348],{"class":663},[637,35869,660],{"class":642},[637,35871,787],{"class":642},[637,35873,35874],{"class":639,"line":578},[637,35875,742],{"emptyLinePlaceholder":594},[637,35877,35878],{"class":639,"line":708},[637,35879,35880],{"class":683},"// TorusKnot with a custom material transformations\n",[637,35882,35883,35885,35887,35889,35891,35893,35896,35898,35900,35902,35904,35906,35908,35910,35912,35914,35916,35918,35920,35922,35924,35926,35928,35930,35932,35934,35936,35938,35940,35942,35944,35946,35948,35950,35952],{"class":639,"line":729},[637,35884,643],{"class":642},[637,35886,35830],{"class":646},[637,35888,3895],{"class":650},[637,35890,657],{"class":642},[637,35892,660],{"class":642},[637,35894,35895],{"class":663},"torusKnotRef",[637,35897,660],{"class":642},[637,35899,3052],{"class":642},[637,35901,30367],{"class":650},[637,35903,657],{"class":642},[637,35905,660],{"class":642},[637,35907,8752],{"class":683},[637,35909,10682],{"class":2524},[637,35911,687],{"class":642},[637,35913,34559],{"class":2524},[637,35915,687],{"class":642},[637,35917,35851],{"class":2524},[637,35919,687],{"class":642},[637,35921,31239],{"class":2524},[637,35923,2537],{"class":683},[637,35925,660],{"class":642},[637,35927,3052],{"class":642},[637,35929,4153],{"class":650},[637,35931,657],{"class":642},[637,35933,660],{"class":642},[637,35935,8752],{"class":683},[637,35937,8526],{"class":642},[637,35939,820],{"class":2524},[637,35941,687],{"class":642},[637,35943,35754],{"class":2524},[637,35945,687],{"class":642},[637,35947,31833],{"class":2524},[637,35949,2537],{"class":683},[637,35951,660],{"class":642},[637,35953,669],{"class":642},[637,35955,35956],{"class":639,"line":739},[637,35957,30480],{"class":683},[637,35959,35960,35962,35964],{"class":639,"line":745},[637,35961,732],{"class":642},[637,35963,35830],{"class":646},[637,35965,669],{"class":642},[1349,35967,30491],{},{"title":576,"searchDepth":577,"depth":578,"links":35969},[35970],{"id":624,"depth":578,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":301,"description":35971},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":35976,"title":305,"body":35977,"description":36351,"extension":591,"links":592,"meta":36352,"navigation":594,"path":306,"seo":36353,"stem":307,"__hash__":36354},"docs/2.api/5.shapes/tube.md",{"type":501,"value":35978,"toc":36347},[35979,35984,35994,36000,36002,36335,36338,36344],[608,35980,35981],{},[35982,35983],"shapes-tube",{},[614,35985,2799,35986,9489,35988,30331,35991,1146],{},[618,35987,7338],{},[618,35989,35990],{},"\u003CTube />",[618,35992,35993],{},"TubeGeometry",[614,35995,30345,35996],{},[1140,35997,35993],{"href":35998,"rel":35999},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1144],[504,36001,15],{"id":624},[626,36003,36005],{"className":628,"code":36004,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Tube } from '@tresjs/cientos'\nimport { CubicBezierCurve3, Vector3 } from 'three'\nimport { ref } from 'vue'\n\nconst tubePath = ref(new CubicBezierCurve3(\n new Vector3(-1, 0, 0),\n new Vector3(-0.5, -1, 0),\n new Vector3(0.5, 1, 0),\n new Vector3(1, 0, 0),\n))\n\u003C/script>\n\n\u003Ctemplate>\n \u003C!-- TubeGeometry needs a curve path to be construct -->\n \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" color=\"orange\" />\n\n \u003C!-- Tube with a custom material transformations -->\n \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/Tube>\n\u003C/template>\n",[618,36006,36007,36027,36046,36069,36087,36091,36111,36136,36162,36184,36206,36210,36218,36222,36230,36235,36264,36268,36273,36301,36319,36327],{"__ignoreMap":576},[637,36008,36009,36011,36013,36015,36017,36019,36021,36023,36025],{"class":639,"line":577},[637,36010,643],{"class":642},[637,36012,647],{"class":646},[637,36014,651],{"class":650},[637,36016,654],{"class":650},[637,36018,657],{"class":642},[637,36020,660],{"class":642},[637,36022,664],{"class":663},[637,36024,660],{"class":642},[637,36026,669],{"class":642},[637,36028,36029,36031,36033,36036,36038,36040,36042,36044],{"class":639,"line":578},[637,36030,677],{"class":676},[637,36032,680],{"class":642},[637,36034,36035],{"class":683}," Tube",[637,36037,693],{"class":642},[637,36039,696],{"class":676},[637,36041,699],{"class":642},[637,36043,702],{"class":663},[637,36045,705],{"class":642},[637,36047,36048,36050,36052,36055,36057,36059,36061,36063,36065,36067],{"class":639,"line":708},[637,36049,677],{"class":676},[637,36051,680],{"class":642},[637,36053,36054],{"class":683}," CubicBezierCurve3",[637,36056,687],{"class":642},[637,36058,30613],{"class":683},[637,36060,693],{"class":642},[637,36062,696],{"class":676},[637,36064,699],{"class":642},[637,36066,4649],{"class":663},[637,36068,705],{"class":642},[637,36070,36071,36073,36075,36077,36079,36081,36083,36085],{"class":639,"line":729},[637,36072,677],{"class":676},[637,36074,680],{"class":642},[637,36076,3895],{"class":683},[637,36078,693],{"class":642},[637,36080,696],{"class":676},[637,36082,699],{"class":642},[637,36084,633],{"class":663},[637,36086,705],{"class":642},[637,36088,36089],{"class":639,"line":739},[637,36090,742],{"emptyLinePlaceholder":594},[637,36092,36093,36095,36098,36100,36102,36104,36107,36109],{"class":639,"line":745},[637,36094,2438],{"class":650},[637,36096,36097],{"class":683}," tubePath ",[637,36099,657],{"class":642},[637,36101,3895],{"class":2457},[637,36103,2460],{"class":683},[637,36105,36106],{"class":642},"new",[637,36108,36054],{"class":2457},[637,36110,4721],{"class":683},[637,36112,36113,36116,36118,36120,36122,36124,36126,36128,36130,36132,36134],{"class":639,"line":755},[637,36114,36115],{"class":642}," new",[637,36117,30613],{"class":2457},[637,36119,2460],{"class":683},[637,36121,8526],{"class":642},[637,36123,1897],{"class":2524},[637,36125,687],{"class":642},[637,36127,2529],{"class":2524},[637,36129,687],{"class":642},[637,36131,2529],{"class":2524},[637,36133,3363],{"class":683},[637,36135,2511],{"class":642},[637,36137,36138,36140,36142,36144,36146,36148,36150,36152,36154,36156,36158,36160],{"class":639,"line":778},[637,36139,36115],{"class":642},[637,36141,30613],{"class":2457},[637,36143,2460],{"class":683},[637,36145,8526],{"class":642},[637,36147,1969],{"class":2524},[637,36149,687],{"class":642},[637,36151,8496],{"class":642},[637,36153,1897],{"class":2524},[637,36155,687],{"class":642},[637,36157,2529],{"class":2524},[637,36159,3363],{"class":683},[637,36161,2511],{"class":642},[637,36163,36164,36166,36168,36170,36172,36174,36176,36178,36180,36182],{"class":639,"line":790},[637,36165,36115],{"class":642},[637,36167,30613],{"class":2457},[637,36169,2460],{"class":683},[637,36171,1969],{"class":2524},[637,36173,687],{"class":642},[637,36175,2584],{"class":2524},[637,36177,687],{"class":642},[637,36179,2529],{"class":2524},[637,36181,3363],{"class":683},[637,36183,2511],{"class":642},[637,36185,36186,36188,36190,36192,36194,36196,36198,36200,36202,36204],{"class":639,"line":800},[637,36187,36115],{"class":642},[637,36189,30613],{"class":2457},[637,36191,2460],{"class":683},[637,36193,1897],{"class":2524},[637,36195,687],{"class":642},[637,36197,2529],{"class":2524},[637,36199,687],{"class":642},[637,36201,2529],{"class":2524},[637,36203,3363],{"class":683},[637,36205,2511],{"class":642},[637,36207,36208],{"class":639,"line":805},[637,36209,7210],{"class":683},[637,36211,36212,36214,36216],{"class":639,"line":827},[637,36213,732],{"class":642},[637,36215,647],{"class":646},[637,36217,669],{"class":642},[637,36219,36220],{"class":639,"line":631},[637,36221,742],{"emptyLinePlaceholder":594},[637,36223,36224,36226,36228],{"class":639,"line":850},[637,36225,643],{"class":642},[637,36227,750],{"class":646},[637,36229,669],{"class":642},[637,36231,36232],{"class":639,"line":861},[637,36233,36234],{"class":1231}," \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[637,36236,36237,36239,36241,36243,36245,36247,36250,36252,36254,36256,36258,36260,36262],{"class":639,"line":872},[637,36238,758],{"class":642},[637,36240,305],{"class":646},[637,36242,1982],{"class":650},[637,36244,657],{"class":642},[637,36246,660],{"class":642},[637,36248,36249],{"class":663},"[tubePath, 20, 0.2, 8, false]",[637,36251,660],{"class":642},[637,36253,2712],{"class":650},[637,36255,657],{"class":642},[637,36257,660],{"class":642},[637,36259,13348],{"class":663},[637,36261,660],{"class":642},[637,36263,787],{"class":642},[637,36265,36266],{"class":639,"line":882},[637,36267,742],{"emptyLinePlaceholder":594},[637,36269,36270],{"class":639,"line":632},[637,36271,36272],{"class":1231}," \u003C!-- Tube with a custom material transformations -->\n",[637,36274,36275,36277,36279,36281,36283,36285,36287,36289,36291,36293,36295,36297,36299],{"class":639,"line":902},[637,36276,758],{"class":642},[637,36278,305],{"class":646},[637,36280,1982],{"class":650},[637,36282,657],{"class":642},[637,36284,660],{"class":642},[637,36286,36249],{"class":663},[637,36288,660],{"class":642},[637,36290,1508],{"class":650},[637,36292,657],{"class":642},[637,36294,660],{"class":642},[637,36296,16383],{"class":663},[637,36298,660],{"class":642},[637,36300,669],{"class":642},[637,36302,36303,36305,36307,36309,36311,36313,36315,36317],{"class":639,"line":912},[637,36304,781],{"class":642},[637,36306,13339],{"class":646},[637,36308,2712],{"class":650},[637,36310,657],{"class":642},[637,36312,660],{"class":642},[637,36314,13348],{"class":663},[637,36316,660],{"class":642},[637,36318,787],{"class":642},[637,36320,36321,36323,36325],{"class":639,"line":2648},[637,36322,905],{"class":642},[637,36324,305],{"class":646},[637,36326,669],{"class":642},[637,36328,36329,36331,36333],{"class":639,"line":2657},[637,36330,732],{"class":642},[637,36332,750],{"class":646},[637,36334,669],{"class":642},[504,36336,36337],{"id":30367},"Args",[626,36339,36342],{"className":36340,"code":36341,"language":30340},[30338],"type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3\n\nargs: [\n path: CurveType,\n tubularSegments: number,\n radius: number,\n radialSegments: number,\n closed: boolean\n]\n",[618,36343,36341],{"__ignoreMap":576},[1349,36345,36346],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":36348},[36349,36350],{"id":624,"depth":578,"text":15},{"id":30367,"depth":578,"text":36337},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":305,"description":36351},"zVAYQCaOg4ZLIRgpfR02Fdo7jK-GAaHqfNXcfRiMzEs",[36356,36650,37090,37301,37599],{"id":36357,"title":315,"body":36358,"description":36646,"extension":591,"links":592,"meta":36647,"navigation":594,"path":316,"seo":36648,"stem":317,"__hash__":36649},"docs/2.api/6.debug-performance/helper.md",{"type":501,"value":36359,"toc":36642},[36360,36365,36371,36373,36600,36602,36640],[2318,36361,36362],{},[36363,36364],"debug-performance-helper",{},[614,36366,36367,36370],{},[618,36368,36369],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[504,36372,15],{"id":624},[626,36374,36377],{"className":628,"code":36375,"highlights":36376,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Helper } from '@tresjs/cientos'\nimport { BoxHelper } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n \u003CTresMesh ref=\"boxRef\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003CHelper :type=\"BoxHelper\" :args=\"[0xff0000]\" />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,631],[618,36378,36379,36399,36417,36437,36456,36464,36468,36476,36484,36502,36520,36528,36536,36568,36576,36584,36592],{"__ignoreMap":576},[637,36380,36381,36383,36385,36387,36389,36391,36393,36395,36397],{"class":639,"line":577},[637,36382,643],{"class":642},[637,36384,647],{"class":646},[637,36386,651],{"class":650},[637,36388,654],{"class":650},[637,36390,657],{"class":642},[637,36392,660],{"class":642},[637,36394,664],{"class":663},[637,36396,660],{"class":642},[637,36398,669],{"class":642},[637,36400,36401,36403,36405,36407,36409,36411,36413,36415],{"class":639,"line":578},[637,36402,677],{"class":676},[637,36404,680],{"class":642},[637,36406,715],{"class":683},[637,36408,693],{"class":642},[637,36410,696],{"class":676},[637,36412,699],{"class":642},[637,36414,724],{"class":663},[637,36416,705],{"class":642},[637,36418,36420,36422,36424,36427,36429,36431,36433,36435],{"class":36419,"line":708},[639,673],[637,36421,677],{"class":676},[637,36423,680],{"class":642},[637,36425,36426],{"class":683}," Helper",[637,36428,693],{"class":642},[637,36430,696],{"class":676},[637,36432,699],{"class":642},[637,36434,702],{"class":663},[637,36436,705],{"class":642},[637,36438,36439,36441,36443,36446,36448,36450,36452,36454],{"class":639,"line":729},[637,36440,677],{"class":676},[637,36442,680],{"class":642},[637,36444,36445],{"class":683}," BoxHelper",[637,36447,693],{"class":642},[637,36449,696],{"class":676},[637,36451,699],{"class":642},[637,36453,4649],{"class":663},[637,36455,705],{"class":642},[637,36457,36458,36460,36462],{"class":639,"line":739},[637,36459,732],{"class":642},[637,36461,647],{"class":646},[637,36463,669],{"class":642},[637,36465,36466],{"class":639,"line":745},[637,36467,742],{"emptyLinePlaceholder":594},[637,36469,36470,36472,36474],{"class":639,"line":755},[637,36471,643],{"class":642},[637,36473,750],{"class":646},[637,36475,669],{"class":642},[637,36477,36478,36480,36482],{"class":639,"line":778},[637,36479,758],{"class":642},[637,36481,761],{"class":646},[637,36483,669],{"class":642},[637,36485,36486,36488,36490,36492,36494,36496,36498,36500],{"class":639,"line":790},[637,36487,781],{"class":642},[637,36489,784],{"class":646},[637,36491,1508],{"class":650},[637,36493,657],{"class":642},[637,36495,660],{"class":642},[637,36497,13301],{"class":663},[637,36499,660],{"class":642},[637,36501,787],{"class":642},[637,36503,36504,36506,36508,36510,36512,36514,36516,36518],{"class":639,"line":800},[637,36505,781],{"class":642},[637,36507,856],{"class":646},[637,36509,3895],{"class":650},[637,36511,657],{"class":642},[637,36513,660],{"class":642},[637,36515,16354],{"class":663},[637,36517,660],{"class":642},[637,36519,669],{"class":642},[637,36521,36522,36524,36526],{"class":639,"line":805},[637,36523,853],{"class":642},[637,36525,867],{"class":646},[637,36527,787],{"class":642},[637,36529,36530,36532,36534],{"class":639,"line":827},[637,36531,853],{"class":642},[637,36533,877],{"class":646},[637,36535,787],{"class":642},[637,36537,36539,36541,36543,36546,36548,36550,36553,36555,36557,36559,36561,36564,36566],{"class":36538,"line":631},[639,673],[637,36540,853],{"class":642},[637,36542,315],{"class":646},[637,36544,36545],{"class":650}," :type",[637,36547,657],{"class":642},[637,36549,660],{"class":642},[637,36551,36552],{"class":663},"BoxHelper",[637,36554,660],{"class":642},[637,36556,1982],{"class":650},[637,36558,657],{"class":642},[637,36560,660],{"class":642},[637,36562,36563],{"class":663},"[0xff0000]",[637,36565,660],{"class":642},[637,36567,787],{"class":642},[637,36569,36570,36572,36574],{"class":639,"line":850},[637,36571,895],{"class":642},[637,36573,856],{"class":646},[637,36575,669],{"class":642},[637,36577,36578,36580,36582],{"class":639,"line":861},[637,36579,781],{"class":642},[637,36581,9702],{"class":646},[637,36583,787],{"class":642},[637,36585,36586,36588,36590],{"class":639,"line":872},[637,36587,905],{"class":642},[637,36589,761],{"class":646},[637,36591,669],{"class":642},[637,36593,36594,36596,36598],{"class":639,"line":882},[637,36595,732],{"class":642},[637,36597,750],{"class":646},[637,36599,669],{"class":642},[504,36601,922],{"id":921},[927,36603,36604,36614],{},[930,36605,36606],{},[933,36607,36608,36610,36612],{},[936,36609,938],{"align":997},[936,36611,941],{"align":997},[936,36613,944],{},[946,36615,36616,36627],{},[933,36617,36618,36622,36625],{},[951,36619,36620],{"align":997},[1692,36621,5540],{},[951,36623,36624],{"align":997},"Helper constructor - required",[951,36626],{},[933,36628,36629,36633,36636],{},[951,36630,36631],{"align":997},[1692,36632,30367],{},[951,36634,36635],{"align":997},"Helper constructor args",[951,36637,36638],{},[618,36639,3602],{},[1349,36641,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":36643},[36644,36645],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":315,"description":36646},"sOeaxtC-_woCHM-l_CN1ntMywo7uC7PTbXeoO7-e15E",{"id":36651,"title":319,"body":36652,"description":37086,"extension":591,"links":592,"meta":37087,"navigation":594,"path":320,"seo":37088,"stem":321,"__hash__":37089},"docs/2.api/6.debug-performance/lod.md",{"type":501,"value":36653,"toc":37082},[36654,36659,36662,36673,36675,37029,37031,37080],[2318,36655,36656],{},[36657,36658],"debug-performance-lod",{},[614,36660,36661],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[614,36663,36664,36667,36668,36672],{},[618,36665,36666],{},"\u003CLOD />"," is a wrapper for THREE's ",[1140,36669,319],{"href":36670,"rel":36671},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1144]," class.",[504,36674,15],{"id":624},[626,36676,36678],{"className":628,"code":36677,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { LOD } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n \u003CLOD :levels=\"[0, 5, 10]\">\n \u003C!-- High detail mesh - shown when close -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n \u003CTresMeshStandardMaterial color=\"red\" />\n \u003C/TresMesh>\n \u003C!-- Medium detail mesh - shown at mid distance -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 16, 16]\" />\n \u003CTresMeshStandardMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003C!-- Low detail mesh - shown when far -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 8, 8]\" />\n \u003CTresMeshStandardMaterial color=\"yellow\" />\n \u003C/TresMesh>\n \u003C/LOD>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,36679,36680,36700,36718,36737,36745,36749,36757,36765,36783,36803,36808,36816,36835,36854,36862,36867,36875,36894,36912,36920,36925,36933,36952,36971,36979,36987,36995,37013,37021],{"__ignoreMap":576},[637,36681,36682,36684,36686,36688,36690,36692,36694,36696,36698],{"class":639,"line":577},[637,36683,643],{"class":642},[637,36685,647],{"class":646},[637,36687,651],{"class":650},[637,36689,654],{"class":650},[637,36691,657],{"class":642},[637,36693,660],{"class":642},[637,36695,664],{"class":663},[637,36697,660],{"class":642},[637,36699,669],{"class":642},[637,36701,36702,36704,36706,36708,36710,36712,36714,36716],{"class":639,"line":578},[637,36703,677],{"class":676},[637,36705,680],{"class":642},[637,36707,715],{"class":683},[637,36709,693],{"class":642},[637,36711,696],{"class":676},[637,36713,699],{"class":642},[637,36715,724],{"class":663},[637,36717,705],{"class":642},[637,36719,36720,36722,36724,36727,36729,36731,36733,36735],{"class":639,"line":708},[637,36721,677],{"class":676},[637,36723,680],{"class":642},[637,36725,36726],{"class":683}," LOD",[637,36728,693],{"class":642},[637,36730,696],{"class":676},[637,36732,699],{"class":642},[637,36734,702],{"class":663},[637,36736,705],{"class":642},[637,36738,36739,36741,36743],{"class":639,"line":729},[637,36740,732],{"class":642},[637,36742,647],{"class":646},[637,36744,669],{"class":642},[637,36746,36747],{"class":639,"line":739},[637,36748,742],{"emptyLinePlaceholder":594},[637,36750,36751,36753,36755],{"class":639,"line":745},[637,36752,643],{"class":642},[637,36754,750],{"class":646},[637,36756,669],{"class":642},[637,36758,36759,36761,36763],{"class":639,"line":755},[637,36760,758],{"class":642},[637,36762,761],{"class":646},[637,36764,669],{"class":642},[637,36766,36767,36769,36771,36773,36775,36777,36779,36781],{"class":639,"line":778},[637,36768,781],{"class":642},[637,36770,784],{"class":646},[637,36772,1508],{"class":650},[637,36774,657],{"class":642},[637,36776,660],{"class":642},[637,36778,7466],{"class":663},[637,36780,660],{"class":642},[637,36782,787],{"class":642},[637,36784,36785,36787,36789,36792,36794,36796,36799,36801],{"class":639,"line":790},[637,36786,781],{"class":642},[637,36788,319],{"class":646},[637,36790,36791],{"class":650}," :levels",[637,36793,657],{"class":642},[637,36795,660],{"class":642},[637,36797,36798],{"class":663},"[0, 5, 10]",[637,36800,660],{"class":642},[637,36802,669],{"class":642},[637,36804,36805],{"class":639,"line":800},[637,36806,36807],{"class":1231}," \u003C!-- High detail mesh - shown when close -->\n",[637,36809,36810,36812,36814],{"class":639,"line":805},[637,36811,853],{"class":642},[637,36813,856],{"class":646},[637,36815,669],{"class":642},[637,36817,36818,36820,36822,36824,36826,36828,36831,36833],{"class":639,"line":827},[637,36819,864],{"class":642},[637,36821,3981],{"class":646},[637,36823,1982],{"class":650},[637,36825,657],{"class":642},[637,36827,660],{"class":642},[637,36829,36830],{"class":663},"[1, 32, 32]",[637,36832,660],{"class":642},[637,36834,787],{"class":642},[637,36836,36837,36839,36841,36843,36845,36847,36850,36852],{"class":639,"line":631},[637,36838,864],{"class":642},[637,36840,2709],{"class":646},[637,36842,2712],{"class":650},[637,36844,657],{"class":642},[637,36846,660],{"class":642},[637,36848,36849],{"class":663},"red",[637,36851,660],{"class":642},[637,36853,787],{"class":642},[637,36855,36856,36858,36860],{"class":639,"line":850},[637,36857,885],{"class":642},[637,36859,856],{"class":646},[637,36861,669],{"class":642},[637,36863,36864],{"class":639,"line":861},[637,36865,36866],{"class":1231}," \u003C!-- Medium detail mesh - shown at mid distance -->\n",[637,36868,36869,36871,36873],{"class":639,"line":872},[637,36870,853],{"class":642},[637,36872,856],{"class":646},[637,36874,669],{"class":642},[637,36876,36877,36879,36881,36883,36885,36887,36890,36892],{"class":639,"line":882},[637,36878,864],{"class":642},[637,36880,3981],{"class":646},[637,36882,1982],{"class":650},[637,36884,657],{"class":642},[637,36886,660],{"class":642},[637,36888,36889],{"class":663},"[1, 16, 16]",[637,36891,660],{"class":642},[637,36893,787],{"class":642},[637,36895,36896,36898,36900,36902,36904,36906,36908,36910],{"class":639,"line":632},[637,36897,864],{"class":642},[637,36899,2709],{"class":646},[637,36901,2712],{"class":650},[637,36903,657],{"class":642},[637,36905,660],{"class":642},[637,36907,13348],{"class":663},[637,36909,660],{"class":642},[637,36911,787],{"class":642},[637,36913,36914,36916,36918],{"class":639,"line":902},[637,36915,885],{"class":642},[637,36917,856],{"class":646},[637,36919,669],{"class":642},[637,36921,36922],{"class":639,"line":912},[637,36923,36924],{"class":1231}," \u003C!-- Low detail mesh - shown when far -->\n",[637,36926,36927,36929,36931],{"class":639,"line":2648},[637,36928,853],{"class":642},[637,36930,856],{"class":646},[637,36932,669],{"class":642},[637,36934,36935,36937,36939,36941,36943,36945,36948,36950],{"class":639,"line":2657},[637,36936,864],{"class":642},[637,36938,3981],{"class":646},[637,36940,1982],{"class":650},[637,36942,657],{"class":642},[637,36944,660],{"class":642},[637,36946,36947],{"class":663},"[1, 8, 8]",[637,36949,660],{"class":642},[637,36951,787],{"class":642},[637,36953,36954,36956,36958,36960,36962,36964,36967,36969],{"class":639,"line":2677},[637,36955,864],{"class":642},[637,36957,2709],{"class":646},[637,36959,2712],{"class":650},[637,36961,657],{"class":642},[637,36963,660],{"class":642},[637,36965,36966],{"class":663},"yellow",[637,36968,660],{"class":642},[637,36970,787],{"class":642},[637,36972,36973,36975,36977],{"class":639,"line":2686},[637,36974,885],{"class":642},[637,36976,856],{"class":646},[637,36978,669],{"class":642},[637,36980,36981,36983,36985],{"class":639,"line":2695},[637,36982,895],{"class":642},[637,36984,319],{"class":646},[637,36986,669],{"class":642},[637,36988,36989,36991,36993],{"class":639,"line":2704},[637,36990,781],{"class":642},[637,36992,9702],{"class":646},[637,36994,787],{"class":642},[637,36996,36997,36999,37001,37003,37005,37007,37009,37011],{"class":639,"line":2726},[637,36998,781],{"class":642},[637,37000,9721],{"class":646},[637,37002,1508],{"class":650},[637,37004,657],{"class":642},[637,37006,660],{"class":642},[637,37008,13383],{"class":663},[637,37010,660],{"class":642},[637,37012,787],{"class":642},[637,37014,37015,37017,37019],{"class":639,"line":2770},[637,37016,905],{"class":642},[637,37018,761],{"class":646},[637,37020,669],{"class":642},[637,37022,37023,37025,37027],{"class":639,"line":2779},[637,37024,732],{"class":642},[637,37026,750],{"class":646},[637,37028,669],{"class":642},[504,37030,922],{"id":921},[927,37032,37033,37043],{},[930,37034,37035],{},[933,37036,37037,37039,37041],{},[936,37038,938],{"align":997},[936,37040,941],{"align":997},[936,37042,944],{},[946,37044,37045,37066],{},[933,37046,37047,37052,37064],{},[951,37048,37049],{"align":997},[1692,37050,37051],{},"levels",[951,37053,37054,37057,37058,37060,37061,37063],{"align":997},[618,37055,37056],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[618,37059,37051],{}," value for each ",[618,37062,319],{}," child.",[951,37065],{},[933,37067,37068,37073,37076],{},[951,37069,37070],{"align":997},[1692,37071,37072],{},"hysteresis",[951,37074,37075],{"align":997},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[951,37077,37078],{},[618,37079,13804],{},[1349,37081,28210],{},{"title":576,"searchDepth":577,"depth":578,"links":37083},[37084,37085],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":319,"description":37086},"Vf93ORp5sHYAGbVs0PWkO2EoHaFKA4HQ5pb0l8rQxoQ",{"id":37091,"title":323,"body":37092,"description":37297,"extension":591,"links":592,"meta":37298,"navigation":594,"path":324,"seo":37299,"stem":325,"__hash__":37300},"docs/2.api/6.debug-performance/stats.md",{"type":501,"value":37093,"toc":37293},[37094,37108,37117,37121,37238,37240,37274,37291],[614,37095,37096,37101,37102,37107],{},[1140,37097,37100],{"href":37098,"rel":37099},"https://github.com/mrdoob/stats.js/",[1144],"stats.js"," is a JavaScript performance monitor, made by ",[1140,37103,37106],{"href":37104,"rel":37105},"https://github.com/mrdoob",[1144],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[614,37109,37110,37113,37114,37116],{},[1692,37111,37112],{},"Cientos"," provides a component called ",[618,37115,323],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[504,37118,37120],{"id":37119},"basic-usage","Basic usage",[626,37122,37125],{"className":628,"code":37123,"highlights":37124,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stats } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CStats />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,778],[618,37126,37127,37147,37165,37185,37193,37197,37205,37213,37222,37230],{"__ignoreMap":576},[637,37128,37129,37131,37133,37135,37137,37139,37141,37143,37145],{"class":639,"line":577},[637,37130,643],{"class":642},[637,37132,647],{"class":646},[637,37134,651],{"class":650},[637,37136,654],{"class":650},[637,37138,657],{"class":642},[637,37140,660],{"class":642},[637,37142,664],{"class":663},[637,37144,660],{"class":642},[637,37146,669],{"class":642},[637,37148,37149,37151,37153,37155,37157,37159,37161,37163],{"class":639,"line":578},[637,37150,677],{"class":676},[637,37152,680],{"class":642},[637,37154,715],{"class":683},[637,37156,693],{"class":642},[637,37158,696],{"class":676},[637,37160,699],{"class":642},[637,37162,724],{"class":663},[637,37164,705],{"class":642},[637,37166,37168,37170,37172,37175,37177,37179,37181,37183],{"class":37167,"line":708},[639,673],[637,37169,677],{"class":676},[637,37171,680],{"class":642},[637,37173,37174],{"class":683}," Stats",[637,37176,693],{"class":642},[637,37178,696],{"class":676},[637,37180,699],{"class":642},[637,37182,702],{"class":663},[637,37184,705],{"class":642},[637,37186,37187,37189,37191],{"class":639,"line":729},[637,37188,732],{"class":642},[637,37190,647],{"class":646},[637,37192,669],{"class":642},[637,37194,37195],{"class":639,"line":739},[637,37196,742],{"emptyLinePlaceholder":594},[637,37198,37199,37201,37203],{"class":639,"line":745},[637,37200,643],{"class":642},[637,37202,750],{"class":646},[637,37204,669],{"class":642},[637,37206,37207,37209,37211],{"class":639,"line":755},[637,37208,758],{"class":642},[637,37210,761],{"class":646},[637,37212,669],{"class":642},[637,37214,37216,37218,37220],{"class":37215,"line":778},[639,673],[637,37217,781],{"class":642},[637,37219,323],{"class":646},[637,37221,787],{"class":642},[637,37223,37224,37226,37228],{"class":639,"line":790},[637,37225,905],{"class":642},[637,37227,761],{"class":646},[637,37229,669],{"class":642},[637,37231,37232,37234,37236],{"class":639,"line":800},[637,37233,732],{"class":642},[637,37235,750],{"class":646},[637,37237,669],{"class":642},[504,37239,922],{"id":921},[927,37241,37242,37254],{},[930,37243,37244],{},[933,37245,37246,37248,37250,37252],{},[936,37247,938],{"align":997},[936,37249,5990],{},[936,37251,944],{},[936,37253,941],{},[946,37255,37256],{},[933,37257,37258,37263,37267,37271],{},[951,37259,37260],{"align":997},[1692,37261,37262],{},"showPanel",[951,37264,37265],{},[618,37266,5375],{},[951,37268,37269],{},[618,37270,965],{},[951,37272,37273],{},"FPS monitor.",[2236,37275,37276,37279,37282,37285],{},[2239,37277,37278],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2239,37280,37281],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2239,37283,37284],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2239,37286,37287,37288,1146],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1140,37289,37100],{"href":37098,"rel":37290},[1144],[1349,37292,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":37294},[37295,37296],{"id":37119,"depth":578,"text":37120},{"id":921,"depth":578,"text":922},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":323,"description":37297},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":37302,"title":327,"body":37303,"description":37595,"extension":591,"links":592,"meta":37596,"navigation":594,"path":328,"seo":37597,"stem":329,"__hash__":37598},"docs/2.api/6.debug-performance/stats-gl.md",{"type":501,"value":37304,"toc":37591},[37305,37323,37326,37328,37445,37447,37589],[614,37306,37307,37312,37313,37318,37319,37322],{},[1140,37308,37311],{"href":37309,"rel":37310},"https://github.com/RenaudRohlinger/stats-gl",[1144],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1140,37314,37317],{"href":37315,"rel":37316},"https://github.com/RenaudRohlinger",[1144],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1140,37320,37100],{"href":37098,"rel":37321},[1144],", capable of displaying CPU and GPU metrics.",[614,37324,37325],{},"In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.\nSimply drop the StatsGl component into your TresCanvas for easy performance monitoring.",[504,37327,37120],{"id":37119},[626,37329,37332],{"className":628,"code":37330,"highlights":37331,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { StatsGl } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CStatsGl />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,778],[618,37333,37334,37354,37372,37392,37400,37404,37412,37420,37429,37437],{"__ignoreMap":576},[637,37335,37336,37338,37340,37342,37344,37346,37348,37350,37352],{"class":639,"line":577},[637,37337,643],{"class":642},[637,37339,647],{"class":646},[637,37341,651],{"class":650},[637,37343,654],{"class":650},[637,37345,657],{"class":642},[637,37347,660],{"class":642},[637,37349,664],{"class":663},[637,37351,660],{"class":642},[637,37353,669],{"class":642},[637,37355,37356,37358,37360,37362,37364,37366,37368,37370],{"class":639,"line":578},[637,37357,677],{"class":676},[637,37359,680],{"class":642},[637,37361,715],{"class":683},[637,37363,693],{"class":642},[637,37365,696],{"class":676},[637,37367,699],{"class":642},[637,37369,724],{"class":663},[637,37371,705],{"class":642},[637,37373,37375,37377,37379,37382,37384,37386,37388,37390],{"class":37374,"line":708},[639,673],[637,37376,677],{"class":676},[637,37378,680],{"class":642},[637,37380,37381],{"class":683}," StatsGl",[637,37383,693],{"class":642},[637,37385,696],{"class":676},[637,37387,699],{"class":642},[637,37389,702],{"class":663},[637,37391,705],{"class":642},[637,37393,37394,37396,37398],{"class":639,"line":729},[637,37395,732],{"class":642},[637,37397,647],{"class":646},[637,37399,669],{"class":642},[637,37401,37402],{"class":639,"line":739},[637,37403,742],{"emptyLinePlaceholder":594},[637,37405,37406,37408,37410],{"class":639,"line":745},[637,37407,643],{"class":642},[637,37409,750],{"class":646},[637,37411,669],{"class":642},[637,37413,37414,37416,37418],{"class":639,"line":755},[637,37415,758],{"class":642},[637,37417,761],{"class":646},[637,37419,669],{"class":642},[637,37421,37423,37425,37427],{"class":37422,"line":778},[639,673],[637,37424,781],{"class":642},[637,37426,327],{"class":646},[637,37428,787],{"class":642},[637,37430,37431,37433,37435],{"class":639,"line":790},[637,37432,905],{"class":642},[637,37434,761],{"class":646},[637,37436,669],{"class":642},[637,37438,37439,37441,37443],{"class":639,"line":800},[637,37440,732],{"class":642},[637,37442,750],{"class":646},[637,37444,669],{"class":642},[504,37446,14044],{"id":17555},[927,37448,37449,37461],{},[930,37450,37451],{},[933,37452,37453,37455,37457,37459],{},[936,37454,8110],{"align":997},[936,37456,5990],{},[936,37458,944],{},[936,37460,941],{},[946,37462,37463,37481,37499,37518,37536,37554,37572],{},[933,37464,37465,37470,37474,37478],{},[951,37466,37467],{"align":997},[1692,37468,37469],{},"logsPerSecond",[951,37471,37472],{},[618,37473,5375],{},[951,37475,37476],{},[618,37477,30810],{},[951,37479,37480],{},"How often to log performance data, in logs per second.",[933,37482,37483,37488,37492,37496],{},[951,37484,37485],{"align":997},[1692,37486,37487],{},"samplesLog",[951,37489,37490],{},[618,37491,5375],{},[951,37493,37494],{},[618,37495,11190],{},[951,37497,37498],{},"Number of recent log samples to keep for computing averages.",[933,37500,37501,37506,37510,37515],{},[951,37502,37503],{"align":997},[1692,37504,37505],{},"samplesGraph",[951,37507,37508],{},[618,37509,5375],{},[951,37511,37512],{},[618,37513,37514],{},"10",[951,37516,37517],{},"Number of recent graph samples to keep for computing averages.",[933,37519,37520,37525,37529,37533],{},[951,37521,37522],{"align":997},[1692,37523,37524],{},"precision",[951,37526,37527],{},[618,37528,5375],{},[951,37530,37531],{},[618,37532,820],{},[951,37534,37535],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[933,37537,37538,37543,37547,37551],{},[951,37539,37540],{"align":997},[1692,37541,37542],{},"horizontal",[951,37544,37545],{},[618,37546,17582],{},[951,37548,37549],{},[618,37550,961],{},[951,37552,37553],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[933,37555,37556,37561,37565,37569],{},[951,37557,37558],{"align":997},[1692,37559,37560],{},"minimal",[951,37562,37563],{},[618,37564,17582],{},[951,37566,37567],{},[618,37568,971],{},[951,37570,37571],{},"A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.",[933,37573,37574,37578,37582,37586],{},[951,37575,37576],{"align":997},[1692,37577,6885],{},[951,37579,37580],{},[618,37581,5375],{},[951,37583,37584],{},[618,37585,965],{},[951,37587,37588],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1349,37590,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":37592},[37593,37594],{"id":37119,"depth":578,"text":37120},{"id":17555,"depth":578,"text":14044},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":327,"description":37595},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":37600,"title":331,"body":37601,"description":39009,"extension":591,"links":592,"meta":39010,"navigation":594,"path":332,"seo":39011,"stem":333,"__hash__":39012},"docs/2.api/6.debug-performance/use-bvh.md",{"type":501,"value":37602,"toc":38985},[37603,37608,37615,37629,37633,37636,37641,37652,37654,37657,37822,37826,37829,37976,37980,37983,38273,38275,38289,38293,38346,38350,38356,38504,38508,38528,38530,38534,38537,38629,38633,38636,38679,38682,38686,38736,38740,38766,38770,38776,38932,38934,38938,38959,38963,38982],[608,37604,37605],{},[37606,37607],"debug-performance-use-bounding-volume-hierarchy",{},[614,37609,37610,37611,37614],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1692,37612,37613],{},"orders of magnitude",", especially for complex models with many triangles.",[614,37616,37617,37618,37623,37624,1146],{},"Built on top of ",[1140,37619,37622],{"href":37620,"rel":37621},"https://github.com/gkjohnson/three-mesh-bvh",[1144],"three-mesh-bvh"," by ",[1140,37625,37628],{"href":37626,"rel":37627},"https://github.com/gkjohnson",[1144],"Garrett Johnson",[504,37630,37632],{"id":37631},"what-is-bvh","What is BVH?",[614,37634,37635],{},"BVH (Bounding Volume Hierarchy) is a spatial data structure that organizes geometry into a tree of bounding boxes. Instead of testing every triangle during raycasting, the algorithm tests bounding boxes first and only checks triangles in boxes that intersect the ray. This reduces raycasting complexity from O(n) to O(log n).",[614,37637,37638],{},[1692,37639,37640],{},"Use cases:",[2236,37642,37643,37646,37649],{},[2239,37644,37645],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2239,37647,37648],{},"Complex models with thousands of triangles",[2239,37650,37651],{},"Scenes with multiple raycasting operations per frame",[504,37653,15],{"id":624},[4074,37655,37656],{"id":37119},"Basic Usage",[626,37658,37661],{"className":628,"code":37659,"highlights":37660,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/complex-model.glb')\nuseBVH(() => model.value?.scene)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n\u003C/template>\n",[578,739,745,755,778,800],[618,37662,37663,37683,37707,37711,37740,37761,37770,37775,37784,37813],{"__ignoreMap":576},[637,37664,37665,37667,37669,37671,37673,37675,37677,37679,37681],{"class":639,"line":577},[637,37666,643],{"class":642},[637,37668,647],{"class":646},[637,37670,651],{"class":650},[637,37672,654],{"class":650},[637,37674,657],{"class":642},[637,37676,660],{"class":642},[637,37678,664],{"class":663},[637,37680,660],{"class":642},[637,37682,669],{"class":642},[637,37684,37686,37688,37690,37692,37694,37697,37699,37701,37703,37705],{"class":37685,"line":578},[639,673],[637,37687,677],{"class":676},[637,37689,680],{"class":642},[637,37691,4370],{"class":683},[637,37693,687],{"class":642},[637,37695,37696],{"class":683}," useBVH",[637,37698,693],{"class":642},[637,37700,696],{"class":676},[637,37702,699],{"class":642},[637,37704,702],{"class":663},[637,37706,705],{"class":642},[637,37708,37709],{"class":639,"line":708},[637,37710,742],{"emptyLinePlaceholder":594},[637,37712,37713,37715,37717,37719,37721,37723,37725,37727,37729,37731,37733,37736,37738],{"class":639,"line":729},[637,37714,2438],{"class":650},[637,37716,680],{"class":642},[637,37718,2443],{"class":646},[637,37720,1240],{"class":642},[637,37722,5032],{"class":683},[637,37724,2451],{"class":642},[637,37726,2454],{"class":642},[637,37728,4370],{"class":2457},[637,37730,2460],{"class":683},[637,37732,2463],{"class":642},[637,37734,37735],{"class":663},"/models/complex-model.glb",[637,37737,2463],{"class":642},[637,37739,2471],{"class":683},[637,37741,37743,37745,37747,37749,37751,37753,37755,37757,37759],{"class":37742,"line":739},[639,673],[637,37744,331],{"class":2457},[637,37746,2460],{"class":683},[637,37748,3697],{"class":642},[637,37750,3700],{"class":650},[637,37752,5071],{"class":683},[637,37754,1146],{"class":642},[637,37756,3708],{"class":683},[637,37758,3711],{"class":642},[637,37760,5080],{"class":683},[637,37762,37764,37766,37768],{"class":37763,"line":745},[639,673],[637,37765,732],{"class":642},[637,37767,647],{"class":646},[637,37769,669],{"class":642},[637,37771,37773],{"class":37772,"line":755},[639,673],[637,37774,742],{"emptyLinePlaceholder":594},[637,37776,37778,37780,37782],{"class":37777,"line":778},[639,673],[637,37779,643],{"class":642},[637,37781,750],{"class":646},[637,37783,669],{"class":642},[637,37785,37786,37788,37790,37792,37794,37796,37798,37800,37802,37804,37806,37809,37811],{"class":639,"line":790},[637,37787,758],{"class":642},[637,37789,4457],{"class":646},[637,37791,2733],{"class":650},[637,37793,657],{"class":642},[637,37795,660],{"class":642},[637,37797,19821],{"class":663},[637,37799,660],{"class":642},[637,37801,4471],{"class":650},[637,37803,657],{"class":642},[637,37805,660],{"class":642},[637,37807,37808],{"class":663},"model.scene",[637,37810,660],{"class":642},[637,37812,787],{"class":642},[637,37814,37816,37818,37820],{"class":37815,"line":800},[639,673],[637,37817,732],{"class":642},[637,37819,750],{"class":646},[637,37821,669],{"class":642},[4074,37823,37825],{"id":37824},"with-debug-visualization","With Debug Visualization",[614,37827,37828],{},"Enable debug mode to visualize the BVH bounding boxes:",[626,37830,37833],{"className":628,"code":37831,"highlights":37832,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n () => model.value?.scene,\n {\n debug: true, // Show BVH bounding boxes\n }\n)\n\u003C/script>\n",[729,739,745,755],[618,37834,37835,37855,37877,37881,37911,37916,37923,37942,37946,37960,37964,37968],{"__ignoreMap":576},[637,37836,37837,37839,37841,37843,37845,37847,37849,37851,37853],{"class":639,"line":577},[637,37838,643],{"class":642},[637,37840,647],{"class":646},[637,37842,651],{"class":650},[637,37844,654],{"class":650},[637,37846,657],{"class":642},[637,37848,660],{"class":642},[637,37850,664],{"class":663},[637,37852,660],{"class":642},[637,37854,669],{"class":642},[637,37856,37857,37859,37861,37863,37865,37867,37869,37871,37873,37875],{"class":639,"line":578},[637,37858,677],{"class":676},[637,37860,680],{"class":642},[637,37862,4370],{"class":683},[637,37864,687],{"class":642},[637,37866,37696],{"class":683},[637,37868,693],{"class":642},[637,37870,696],{"class":676},[637,37872,699],{"class":642},[637,37874,702],{"class":663},[637,37876,705],{"class":642},[637,37878,37879],{"class":639,"line":708},[637,37880,742],{"emptyLinePlaceholder":594},[637,37882,37884,37886,37888,37890,37892,37894,37896,37898,37900,37902,37904,37907,37909],{"class":37883,"line":729},[639,673],[637,37885,2438],{"class":650},[637,37887,680],{"class":642},[637,37889,2443],{"class":646},[637,37891,1240],{"class":642},[637,37893,5032],{"class":683},[637,37895,2451],{"class":642},[637,37897,2454],{"class":642},[637,37899,4370],{"class":2457},[637,37901,2460],{"class":683},[637,37903,2463],{"class":642},[637,37905,37906],{"class":663},"/models/model.glb",[637,37908,2463],{"class":642},[637,37910,2471],{"class":683},[637,37912,37914],{"class":37913,"line":739},[639,673],[637,37915,742],{"emptyLinePlaceholder":594},[637,37917,37919,37921],{"class":37918,"line":745},[639,673],[637,37920,331],{"class":2457},[637,37922,4721],{"class":683},[637,37924,37926,37928,37930,37932,37934,37936,37938,37940],{"class":37925,"line":755},[639,673],[637,37927,4726],{"class":642},[637,37929,3700],{"class":650},[637,37931,5071],{"class":683},[637,37933,1146],{"class":642},[637,37935,3708],{"class":683},[637,37937,3711],{"class":642},[637,37939,18481],{"class":683},[637,37941,2511],{"class":642},[637,37943,37944],{"class":639,"line":778},[637,37945,2494],{"class":642},[637,37947,37948,37951,37953,37955,37957],{"class":639,"line":790},[637,37949,37950],{"class":646}," debug",[637,37952,1240],{"class":642},[637,37954,4421],{"class":4420},[637,37956,687],{"class":642},[637,37958,37959],{"class":1231}," // Show BVH bounding boxes\n",[637,37961,37962],{"class":639,"line":800},[637,37963,7878],{"class":642},[637,37965,37966],{"class":639,"line":805},[637,37967,2471],{"class":683},[637,37969,37970,37972,37974],{"class":639,"line":827},[637,37971,732],{"class":642},[637,37973,647],{"class":646},[637,37975,669],{"class":642},[4074,37977,37979],{"id":37978},"reactive-enabled-state","Reactive Enabled State",[614,37981,37982],{},"Control BVH optimization dynamically:",[626,37984,37987],{"className":628,"code":37985,"highlights":37986,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst bvhEnabled = ref(true)\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n () => model.value?.scene,\n {\n enabled: bvhEnabled,\n }\n)\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"bvhEnabled = !bvhEnabled\">\n Toggle BVH\n \u003C/button>\n \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n \u003C/div>\n\u003C/template>\n",[729,745,755,778,790],[618,37988,37989,38009,38031,38053,38058,38075,38080,38109,38114,38121,38139,38143,38155,38159,38163,38167,38175,38179,38187,38195,38216,38221,38229,38257,38265],{"__ignoreMap":576},[637,37990,37991,37993,37995,37997,37999,38001,38003,38005,38007],{"class":639,"line":577},[637,37992,643],{"class":642},[637,37994,647],{"class":646},[637,37996,651],{"class":650},[637,37998,654],{"class":650},[637,38000,657],{"class":642},[637,38002,660],{"class":642},[637,38004,664],{"class":663},[637,38006,660],{"class":642},[637,38008,669],{"class":642},[637,38010,38011,38013,38015,38017,38019,38021,38023,38025,38027,38029],{"class":639,"line":578},[637,38012,677],{"class":676},[637,38014,680],{"class":642},[637,38016,3895],{"class":683},[637,38018,687],{"class":642},[637,38020,3512],{"class":683},[637,38022,693],{"class":642},[637,38024,696],{"class":676},[637,38026,699],{"class":642},[637,38028,633],{"class":663},[637,38030,705],{"class":642},[637,38032,38033,38035,38037,38039,38041,38043,38045,38047,38049,38051],{"class":639,"line":708},[637,38034,677],{"class":676},[637,38036,680],{"class":642},[637,38038,4370],{"class":683},[637,38040,687],{"class":642},[637,38042,37696],{"class":683},[637,38044,693],{"class":642},[637,38046,696],{"class":676},[637,38048,699],{"class":642},[637,38050,702],{"class":663},[637,38052,705],{"class":642},[637,38054,38056],{"class":38055,"line":729},[639,673],[637,38057,742],{"emptyLinePlaceholder":594},[637,38059,38060,38062,38065,38067,38069,38071,38073],{"class":639,"line":739},[637,38061,2438],{"class":650},[637,38063,38064],{"class":683}," bvhEnabled ",[637,38066,657],{"class":642},[637,38068,3895],{"class":2457},[637,38070,2460],{"class":683},[637,38072,961],{"class":4420},[637,38074,2471],{"class":683},[637,38076,38078],{"class":38077,"line":745},[639,673],[637,38079,742],{"emptyLinePlaceholder":594},[637,38081,38083,38085,38087,38089,38091,38093,38095,38097,38099,38101,38103,38105,38107],{"class":38082,"line":755},[639,673],[637,38084,2438],{"class":650},[637,38086,680],{"class":642},[637,38088,2443],{"class":646},[637,38090,1240],{"class":642},[637,38092,5032],{"class":683},[637,38094,2451],{"class":642},[637,38096,2454],{"class":642},[637,38098,4370],{"class":2457},[637,38100,2460],{"class":683},[637,38102,2463],{"class":642},[637,38104,37906],{"class":663},[637,38106,2463],{"class":642},[637,38108,2471],{"class":683},[637,38110,38112],{"class":38111,"line":778},[639,673],[637,38113,742],{"emptyLinePlaceholder":594},[637,38115,38117,38119],{"class":38116,"line":790},[639,673],[637,38118,331],{"class":2457},[637,38120,4721],{"class":683},[637,38122,38123,38125,38127,38129,38131,38133,38135,38137],{"class":639,"line":800},[637,38124,4726],{"class":642},[637,38126,3700],{"class":650},[637,38128,5071],{"class":683},[637,38130,1146],{"class":642},[637,38132,3708],{"class":683},[637,38134,3711],{"class":642},[637,38136,18481],{"class":683},[637,38138,2511],{"class":642},[637,38140,38141],{"class":639,"line":805},[637,38142,2494],{"class":642},[637,38144,38145,38148,38150,38153],{"class":639,"line":827},[637,38146,38147],{"class":646}," enabled",[637,38149,1240],{"class":642},[637,38151,38152],{"class":683}," bvhEnabled",[637,38154,2511],{"class":642},[637,38156,38157],{"class":639,"line":631},[637,38158,7878],{"class":642},[637,38160,38161],{"class":639,"line":850},[637,38162,2471],{"class":683},[637,38164,38165],{"class":639,"line":861},[637,38166,742],{"emptyLinePlaceholder":594},[637,38168,38169,38171,38173],{"class":639,"line":872},[637,38170,732],{"class":642},[637,38172,647],{"class":646},[637,38174,669],{"class":642},[637,38176,38177],{"class":639,"line":882},[637,38178,742],{"emptyLinePlaceholder":594},[637,38180,38181,38183,38185],{"class":639,"line":632},[637,38182,643],{"class":642},[637,38184,750],{"class":646},[637,38186,669],{"class":642},[637,38188,38189,38191,38193],{"class":639,"line":902},[637,38190,758],{"class":642},[637,38192,4142],{"class":646},[637,38194,669],{"class":642},[637,38196,38197,38199,38202,38205,38207,38209,38212,38214],{"class":639,"line":912},[637,38198,781],{"class":642},[637,38200,38201],{"class":646},"button",[637,38203,38204],{"class":650}," @click",[637,38206,657],{"class":642},[637,38208,660],{"class":642},[637,38210,38211],{"class":663},"bvhEnabled = !bvhEnabled",[637,38213,660],{"class":642},[637,38215,669],{"class":642},[637,38217,38218],{"class":639,"line":2648},[637,38219,38220],{"class":683}," Toggle BVH\n",[637,38222,38223,38225,38227],{"class":639,"line":2657},[637,38224,895],{"class":642},[637,38226,38201],{"class":646},[637,38228,669],{"class":642},[637,38230,38231,38233,38235,38237,38239,38241,38243,38245,38247,38249,38251,38253,38255],{"class":639,"line":2677},[637,38232,781],{"class":642},[637,38234,4457],{"class":646},[637,38236,2733],{"class":650},[637,38238,657],{"class":642},[637,38240,660],{"class":642},[637,38242,19821],{"class":663},[637,38244,660],{"class":642},[637,38246,4471],{"class":650},[637,38248,657],{"class":642},[637,38250,660],{"class":642},[637,38252,37808],{"class":663},[637,38254,660],{"class":642},[637,38256,787],{"class":642},[637,38258,38259,38261,38263],{"class":639,"line":2686},[637,38260,905],{"class":642},[637,38262,4142],{"class":646},[637,38264,669],{"class":642},[637,38266,38267,38269,38271],{"class":639,"line":2695},[637,38268,732],{"class":642},[637,38270,750],{"class":646},[637,38272,669],{"class":642},[504,38274,14044],{"id":17555},[614,38276,38277,38278,38281,38282,38285,38286,38288],{},"Options are divided into ",[1692,38279,38280],{},"reactive"," (can change at runtime) and ",[1692,38283,38284],{},"static"," (set once at creation - changing requires toggling ",[618,38287,16678],{}," off/on to rebuild).",[4074,38290,38292],{"id":38291},"reactive-options","Reactive Options",[927,38294,38295,38308],{},[930,38296,38297],{},[933,38298,38299,38302,38304,38306],{},[936,38300,38301],{"align":997},"Option",[936,38303,5990],{"align":997},[936,38305,944],{"align":997},[936,38307,941],{"align":997},[946,38309,38310,38328],{},[933,38311,38312,38316,38321,38325],{},[951,38313,38314],{"align":997},[1692,38315,16678],{},[951,38317,38318],{"align":997},[618,38319,38320],{},"MaybeRefOrGetter\u003Cboolean>",[951,38322,38323],{"align":997},[618,38324,961],{},[951,38326,38327],{"align":997},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[933,38329,38330,38335,38339,38343],{},[951,38331,38332],{"align":997},[1692,38333,38334],{},"debug",[951,38336,38337],{"align":997},[618,38338,38320],{},[951,38340,38341],{"align":997},[618,38342,971],{},[951,38344,38345],{"align":997},"Show debug visualization of BVH bounding boxes.",[4074,38347,38349],{"id":38348},"static-options-bvh-construction","Static Options (BVH Construction)",[614,38351,38352,38353,38355],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[618,38354,16678],{}," off/on to rebuild with new values.",[927,38357,38358,38370],{},[930,38359,38360],{},[933,38361,38362,38364,38366,38368],{},[936,38363,38301],{"align":997},[936,38365,5990],{"align":997},[936,38367,944],{"align":997},[936,38369,941],{"align":997},[946,38371,38372,38393,38413,38432,38450,38468,38486],{},[933,38373,38374,38379,38383,38387],{},[951,38375,38376],{"align":997},[1692,38377,38378],{},"firstHitOnly",[951,38380,38381],{"align":997},[618,38382,17582],{},[951,38384,38385],{"align":997},[618,38386,971],{},[951,38388,24856,38389,38392],{"align":997},[618,38390,38391],{},"raycastFirst"," for better performance when only the first hit is needed.",[933,38394,38395,38400,38405,38410],{},[951,38396,38397],{"align":997},[1692,38398,38399],{},"splitStrategy",[951,38401,38402],{"align":997},[618,38403,38404],{},"'CENTER' | 'AVERAGE' | 'SAH'",[951,38406,38407],{"align":997},[618,38408,38409],{},"'SAH'",[951,38411,38412],{"align":997},"BVH build strategy. See section below.",[933,38414,38415,38420,38424,38429],{},[951,38416,38417],{"align":997},[1692,38418,38419],{},"maxDepth",[951,38421,38422],{"align":997},[618,38423,5375],{},[951,38425,38426],{"align":997},[618,38427,38428],{},"40",[951,38430,38431],{"align":997},"Maximum tree depth for the BVH structure.",[933,38433,38434,38439,38443,38447],{},[951,38435,38436],{"align":997},[1692,38437,38438],{},"maxLeafSize",[951,38440,38441],{"align":997},[618,38442,5375],{},[951,38444,38445],{"align":997},[618,38446,37514],{},[951,38448,38449],{"align":997},"Target number of triangles per leaf node.",[933,38451,38452,38457,38461,38465],{},[951,38453,38454],{"align":997},[1692,38455,38456],{},"verbose",[951,38458,38459],{"align":997},[618,38460,17582],{},[951,38462,38463],{"align":997},[618,38464,971],{},[951,38466,38467],{"align":997},"Print construction warnings and progress to console.",[933,38469,38470,38475,38479,38483],{},[951,38471,38472],{"align":997},[1692,38473,38474],{},"setBoundingBox",[951,38476,38477],{"align":997},[618,38478,17582],{},[951,38480,38481],{"align":997},[618,38482,961],{},[951,38484,38485],{"align":997},"Automatically set geometry bounding box after BVH construction.",[933,38487,38488,38493,38497,38501],{},[951,38489,38490],{"align":997},[1692,38491,38492],{},"indirect",[951,38494,38495],{"align":997},[618,38496,17582],{},[951,38498,38499],{"align":997},[618,38500,971],{},[951,38502,38503],{"align":997},"If false, creates and rearranges index buffer for better performance.",[4074,38505,38507],{"id":38506},"split-strategies","Split Strategies",[2236,38509,38510,38516,38522],{},[2239,38511,38512,38515],{},[1692,38513,38514],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2239,38517,38518,38521],{},[1692,38519,38520],{},"AVERAGE"," - Balanced build time and runtime performance.",[2239,38523,38524,38527],{},[1692,38525,38526],{},"CENTER"," - Fastest to build, slower at runtime.",[504,38529,23746],{"id":23745},[4074,38531,38533],{"id":38532},"fine-tuning-performance","Fine-tuning Performance",[614,38535,38536],{},"Adjust BVH construction parameters for your use case:",[626,38538,38540],{"className":1208,"code":38539,"language":664,"meta":576,"style":576},"useBVH(\n target,\n {\n splitStrategy: 'SAH', // Best runtime performance\n maxDepth: 30, // Shallower tree (faster build)\n maxLeafSize: 5, // Smaller leaves (better culling)\n verbose: true, // Debug construction\n }\n)\n",[618,38541,38542,38548,38555,38559,38578,38592,38607,38621,38625],{"__ignoreMap":576},[637,38543,38544,38546],{"class":639,"line":577},[637,38545,331],{"class":2457},[637,38547,4721],{"class":683},[637,38549,38550,38553],{"class":639,"line":578},[637,38551,38552],{"class":683}," target",[637,38554,2511],{"class":642},[637,38556,38557],{"class":639,"line":708},[637,38558,2494],{"class":642},[637,38560,38561,38564,38566,38568,38571,38573,38575],{"class":639,"line":729},[637,38562,38563],{"class":646}," splitStrategy",[637,38565,1240],{"class":642},[637,38567,699],{"class":642},[637,38569,38570],{"class":663},"SAH",[637,38572,2463],{"class":642},[637,38574,687],{"class":642},[637,38576,38577],{"class":1231}," // Best runtime performance\n",[637,38579,38580,38583,38585,38587,38589],{"class":639,"line":739},[637,38581,38582],{"class":646}," maxDepth",[637,38584,1240],{"class":642},[637,38586,8493],{"class":2524},[637,38588,687],{"class":642},[637,38590,38591],{"class":1231}," // Shallower tree (faster build)\n",[637,38593,38594,38597,38599,38602,38604],{"class":639,"line":745},[637,38595,38596],{"class":646}," maxLeafSize",[637,38598,1240],{"class":642},[637,38600,38601],{"class":2524}," 5",[637,38603,687],{"class":642},[637,38605,38606],{"class":1231}," // Smaller leaves (better culling)\n",[637,38608,38609,38612,38614,38616,38618],{"class":639,"line":755},[637,38610,38611],{"class":646}," verbose",[637,38613,1240],{"class":642},[637,38615,4421],{"class":4420},[637,38617,687],{"class":642},[637,38619,38620],{"class":1231}," // Debug construction\n",[637,38622,38623],{"class":639,"line":778},[637,38624,7878],{"class":642},[637,38626,38627],{"class":639,"line":790},[637,38628,2471],{"class":683},[4074,38630,38632],{"id":38631},"first-hit-only-mode","First Hit Only Mode",[614,38634,38635],{},"When you only need the closest intersection (e.g., mouse picking):",[626,38637,38639],{"className":1208,"code":38638,"language":664,"meta":576,"style":576},"useBVH(\n target,\n {\n firstHitOnly: true, // Uses raycastFirst internally\n }\n)\n",[618,38640,38641,38647,38653,38657,38671,38675],{"__ignoreMap":576},[637,38642,38643,38645],{"class":639,"line":577},[637,38644,331],{"class":2457},[637,38646,4721],{"class":683},[637,38648,38649,38651],{"class":639,"line":578},[637,38650,38552],{"class":683},[637,38652,2511],{"class":642},[637,38654,38655],{"class":639,"line":708},[637,38656,2494],{"class":642},[637,38658,38659,38662,38664,38666,38668],{"class":639,"line":729},[637,38660,38661],{"class":646}," firstHitOnly",[637,38663,1240],{"class":642},[637,38665,4421],{"class":4420},[637,38667,687],{"class":642},[637,38669,38670],{"class":1231}," // Uses raycastFirst internally\n",[637,38672,38673],{"class":639,"line":739},[637,38674,7878],{"class":642},[637,38676,38677],{"class":639,"line":745},[637,38678,2471],{"class":683},[614,38680,38681],{},"This is significantly faster than computing all intersections when you only need one.",[504,38683,38685],{"id":38684},"important-notes","Important Notes",[2236,38687,38688,38694,38713,38719,38730],{},[2239,38689,38690,38693],{},[1692,38691,38692],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2239,38695,38696,38699,38700,3086,38702,38704,38705,1695,38707,38709,38710,38712],{},[1692,38697,38698],{},"Reactive options",": Only ",[618,38701,16678],{},[618,38703,38334],{}," are reactive. Construction options (",[618,38706,38399],{},[618,38708,38419],{},", etc.) are static - to apply new values, toggle ",[618,38711,16678],{}," off/on.",[2239,38714,38715,38718],{},[1692,38716,38717],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2239,38720,38721,38724,38725,3086,38727,38729],{},[1692,38722,38723],{},"Automatic mesh detection",": Works with ",[618,38726,4315],{},[618,38728,6372],{}," instances.",[2239,38731,38732,38735],{},[1692,38733,38734],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[504,38737,38739],{"id":38738},"performance-tips","Performance Tips",[14163,38741,38742,38748,38754,38760],{},[2239,38743,38744,38747],{},[1692,38745,38746],{},"Use firstHitOnly"," when you only need the closest intersection",[2239,38749,38750,38753],{},[1692,38751,38752],{},"SAH strategy"," gives best runtime performance for production",[2239,38755,38756,38759],{},[1692,38757,38758],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2239,38761,38762,38765],{},[1692,38763,38764],{},"Enable debug mode"," during development to verify BVH coverage",[504,38767,38769],{"id":38768},"integration-with-usegltf","Integration with useGLTF",[614,38771,38772,38773,38775],{},"Perfect pairing with ",[618,38774,133],{}," for optimized model loading:",[626,38777,38779],{"className":628,"code":38778,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useBVH, useGLTF } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/high-poly-model.glb', {\n draco: true\n})\n\nuseBVH(\n () => model.value?.scene,\n { splitStrategy: 'SAH' }\n)\n\u003C/script>\n",[618,38780,38781,38801,38823,38827,38858,38868,38874,38878,38884,38902,38920,38924],{"__ignoreMap":576},[637,38782,38783,38785,38787,38789,38791,38793,38795,38797,38799],{"class":639,"line":577},[637,38784,643],{"class":642},[637,38786,647],{"class":646},[637,38788,651],{"class":650},[637,38790,654],{"class":650},[637,38792,657],{"class":642},[637,38794,660],{"class":642},[637,38796,664],{"class":663},[637,38798,660],{"class":642},[637,38800,669],{"class":642},[637,38802,38803,38805,38807,38809,38811,38813,38815,38817,38819,38821],{"class":639,"line":578},[637,38804,677],{"class":676},[637,38806,680],{"class":642},[637,38808,37696],{"class":683},[637,38810,687],{"class":642},[637,38812,4370],{"class":683},[637,38814,693],{"class":642},[637,38816,696],{"class":676},[637,38818,699],{"class":642},[637,38820,702],{"class":663},[637,38822,705],{"class":642},[637,38824,38825],{"class":639,"line":708},[637,38826,742],{"emptyLinePlaceholder":594},[637,38828,38829,38831,38833,38835,38837,38839,38841,38843,38845,38847,38849,38852,38854,38856],{"class":639,"line":729},[637,38830,2438],{"class":650},[637,38832,680],{"class":642},[637,38834,2443],{"class":646},[637,38836,1240],{"class":642},[637,38838,5032],{"class":683},[637,38840,2451],{"class":642},[637,38842,2454],{"class":642},[637,38844,4370],{"class":2457},[637,38846,2460],{"class":683},[637,38848,2463],{"class":642},[637,38850,38851],{"class":663},"/models/high-poly-model.glb",[637,38853,2463],{"class":642},[637,38855,687],{"class":642},[637,38857,1226],{"class":642},[637,38859,38860,38863,38865],{"class":639,"line":739},[637,38861,38862],{"class":646}," draco",[637,38864,1240],{"class":642},[637,38866,38867],{"class":4420}," true\n",[637,38869,38870,38872],{"class":639,"line":745},[637,38871,2451],{"class":642},[637,38873,2471],{"class":683},[637,38875,38876],{"class":639,"line":755},[637,38877,742],{"emptyLinePlaceholder":594},[637,38879,38880,38882],{"class":639,"line":778},[637,38881,331],{"class":2457},[637,38883,4721],{"class":683},[637,38885,38886,38888,38890,38892,38894,38896,38898,38900],{"class":639,"line":790},[637,38887,4726],{"class":642},[637,38889,3700],{"class":650},[637,38891,5071],{"class":683},[637,38893,1146],{"class":642},[637,38895,3708],{"class":683},[637,38897,3711],{"class":642},[637,38899,18481],{"class":683},[637,38901,2511],{"class":642},[637,38903,38904,38907,38910,38912,38914,38916,38918],{"class":639,"line":800},[637,38905,38906],{"class":642}," {",[637,38908,38909],{"class":646}," splitStrategy",[637,38911,1240],{"class":642},[637,38913,699],{"class":642},[637,38915,38570],{"class":663},[637,38917,2463],{"class":642},[637,38919,17816],{"class":642},[637,38921,38922],{"class":639,"line":805},[637,38923,2471],{"class":683},[637,38925,38926,38928,38930],{"class":639,"line":827},[637,38927,732],{"class":642},[637,38929,647],{"class":646},[637,38931,669],{"class":642},[504,38933,24713],{"id":24712},[4074,38935,38937],{"id":38936},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2236,38939,38940,38943,38950],{},[2239,38941,38942],{},"Ensure meshes have valid geometry with position attributes",[2239,38944,38945,38946,38949],{},"Check console with ",[618,38947,38948],{},"verbose: true"," to see which meshes are skipped",[2239,38951,38952,38953,38955,38956,38958],{},"Verify the object is an ",[618,38954,7643],{}," (use ",[618,38957,4457],{}," in templates)",[4074,38960,38962],{"id":38961},"performance-not-improving","Performance not improving",[2236,38964,38965,38970,38976,38979],{},[2239,38966,18618,38967,38969],{},[618,38968,38378],{}," if you only need one intersection",[2239,38971,38972,38973,38975],{},"Try different split strategies (",[618,38974,38570],{}," is usually best)",[2239,38977,38978],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[2239,38980,38981],{},"Consider LOD for very distant objects",[1349,38983,38984],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":38986},[38987,38988,38993,38998,39002,39003,39004,39005],{"id":37631,"depth":578,"text":37632},{"id":624,"depth":578,"text":15,"children":38989},[38990,38991,38992],{"id":37119,"depth":708,"text":37656},{"id":37824,"depth":708,"text":37825},{"id":37978,"depth":708,"text":37979},{"id":17555,"depth":578,"text":14044,"children":38994},[38995,38996,38997],{"id":38291,"depth":708,"text":38292},{"id":38348,"depth":708,"text":38349},{"id":38506,"depth":708,"text":38507},{"id":23745,"depth":578,"text":23746,"children":38999},[39000,39001],{"id":38532,"depth":708,"text":38533},{"id":38631,"depth":708,"text":38632},{"id":38684,"depth":578,"text":38685},{"id":38738,"depth":578,"text":38739},{"id":38768,"depth":578,"text":38769},{"id":24712,"depth":578,"text":24713,"children":39006},[39007,39008],{"id":38936,"depth":708,"text":38937},{"id":38961,"depth":708,"text":38962},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":331,"description":39009},"Ubx_HIq-xEI-Pv2T8zVe8LT3sJ_wBF7VmDcGGpLgBYs",[39014,39557,40103,40494,40968,42482,43111],{"id":39015,"title":341,"body":39016,"description":39553,"extension":591,"links":592,"meta":39554,"navigation":594,"path":342,"seo":39555,"stem":343,"__hash__":39556},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":501,"value":39017,"toc":39548},[39018,39023,39037,39039,39315,39317,39514,39516,39526,39546],[608,39019,39020],{},[39021,39022],"light-shadow-accumulative-shadows",{},[614,39024,39025,4327,39028,39031,39032,1146],{},[618,39026,39027],{},"\u003CAccumulativeShadows />",[618,39029,39030],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1140,39033,39036],{"href":39034,"rel":39035},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1144],"Drei component of the same name",[504,39038,15],{"id":624},[626,39040,39043],{"className":628,"code":39041,"highlights":39042,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AccumulativeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#fbb03b\" :shadows=\"true\">\n \u003CTresPerspectiveCamera\n :look-at=\"[0, 0, 0]\"\n />\n \u003CTresMesh :position-y=\"0.3\" :scale=\"0.4\" :cast-shadow=\"true\">\n \u003CTresTorusKnotGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003CAccumulativeShadows\n :blend=\"100\"\n color=\"#fbb03b\"\n once\n :position-y=\"-0.4\"\n />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,861,872,882,632,902],[618,39044,39045,39065,39085,39103,39111,39115,39123,39152,39158,39170,39174,39215,39223,39231,39239,39247,39261,39274,39280,39295,39299,39307],{"__ignoreMap":576},[637,39046,39047,39049,39051,39053,39055,39057,39059,39061,39063],{"class":639,"line":577},[637,39048,643],{"class":642},[637,39050,647],{"class":646},[637,39052,651],{"class":650},[637,39054,654],{"class":650},[637,39056,657],{"class":642},[637,39058,660],{"class":642},[637,39060,664],{"class":663},[637,39062,660],{"class":642},[637,39064,669],{"class":642},[637,39066,39068,39070,39072,39075,39077,39079,39081,39083],{"class":39067,"line":578},[639,673],[637,39069,677],{"class":676},[637,39071,680],{"class":642},[637,39073,39074],{"class":683}," AccumulativeShadows",[637,39076,693],{"class":642},[637,39078,696],{"class":676},[637,39080,699],{"class":642},[637,39082,702],{"class":663},[637,39084,705],{"class":642},[637,39086,39087,39089,39091,39093,39095,39097,39099,39101],{"class":639,"line":708},[637,39088,677],{"class":676},[637,39090,680],{"class":642},[637,39092,715],{"class":683},[637,39094,693],{"class":642},[637,39096,696],{"class":676},[637,39098,699],{"class":642},[637,39100,724],{"class":663},[637,39102,705],{"class":642},[637,39104,39105,39107,39109],{"class":639,"line":729},[637,39106,732],{"class":642},[637,39108,647],{"class":646},[637,39110,669],{"class":642},[637,39112,39113],{"class":639,"line":739},[637,39114,742],{"emptyLinePlaceholder":594},[637,39116,39117,39119,39121],{"class":639,"line":745},[637,39118,643],{"class":642},[637,39120,750],{"class":646},[637,39122,669],{"class":642},[637,39124,39125,39127,39129,39131,39133,39135,39137,39139,39142,39144,39146,39148,39150],{"class":639,"line":755},[637,39126,758],{"class":642},[637,39128,761],{"class":646},[637,39130,764],{"class":650},[637,39132,657],{"class":642},[637,39134,660],{"class":642},[637,39136,10174],{"class":663},[637,39138,660],{"class":642},[637,39140,39141],{"class":650}," :shadows",[637,39143,657],{"class":642},[637,39145,660],{"class":642},[637,39147,961],{"class":663},[637,39149,660],{"class":642},[637,39151,669],{"class":642},[637,39153,39154,39156],{"class":639,"line":778},[637,39155,853],{"class":642},[637,39157,25547],{"class":646},[637,39159,39160,39162,39164,39166,39168],{"class":639,"line":790},[637,39161,25565],{"class":650},[637,39163,657],{"class":642},[637,39165,660],{"class":642},[637,39167,9644],{"class":663},[637,39169,3154],{"class":642},[637,39171,39172],{"class":639,"line":800},[637,39173,17292],{"class":642},[637,39175,39176,39178,39180,39182,39184,39186,39189,39191,39193,39195,39197,39200,39202,39205,39207,39209,39211,39213],{"class":639,"line":805},[637,39177,781],{"class":642},[637,39179,856],{"class":646},[637,39181,1962],{"class":650},[637,39183,657],{"class":642},[637,39185,660],{"class":642},[637,39187,39188],{"class":663},"0.3",[637,39190,660],{"class":642},[637,39192,813],{"class":650},[637,39194,657],{"class":642},[637,39196,660],{"class":642},[637,39198,39199],{"class":663},"0.4",[637,39201,660],{"class":642},[637,39203,39204],{"class":650}," :cast-shadow",[637,39206,657],{"class":642},[637,39208,660],{"class":642},[637,39210,961],{"class":663},[637,39212,660],{"class":642},[637,39214,669],{"class":642},[637,39216,39217,39219,39221],{"class":639,"line":827},[637,39218,853],{"class":642},[637,39220,27871],{"class":646},[637,39222,787],{"class":642},[637,39224,39225,39227,39229],{"class":639,"line":631},[637,39226,853],{"class":642},[637,39228,877],{"class":646},[637,39230,787],{"class":642},[637,39232,39233,39235,39237],{"class":639,"line":850},[637,39234,895],{"class":642},[637,39236,856],{"class":646},[637,39238,669],{"class":642},[637,39240,39242,39244],{"class":39241,"line":861},[639,673],[637,39243,781],{"class":642},[637,39245,39246],{"class":646},"AccumulativeShadows\n",[637,39248,39250,39253,39255,39257,39259],{"class":39249,"line":872},[639,673],[637,39251,39252],{"class":650}," :blend",[637,39254,657],{"class":642},[637,39256,660],{"class":642},[637,39258,11190],{"class":663},[637,39260,3154],{"class":642},[637,39262,39264,39266,39268,39270,39272],{"class":39263,"line":882},[639,673],[637,39265,30712],{"class":650},[637,39267,657],{"class":642},[637,39269,660],{"class":642},[637,39271,10174],{"class":663},[637,39273,3154],{"class":642},[637,39275,39277],{"class":39276,"line":632},[639,673],[637,39278,39279],{"class":650}," once\n",[637,39281,39283,39286,39288,39290,39293],{"class":39282,"line":902},[639,673],[637,39284,39285],{"class":650}," :position-y",[637,39287,657],{"class":642},[637,39289,660],{"class":642},[637,39291,39292],{"class":663},"-0.4",[637,39294,3154],{"class":642},[637,39296,39297],{"class":639,"line":912},[637,39298,17292],{"class":642},[637,39300,39301,39303,39305],{"class":639,"line":2648},[637,39302,905],{"class":642},[637,39304,761],{"class":646},[637,39306,669],{"class":642},[637,39308,39309,39311,39313],{"class":639,"line":2657},[637,39310,732],{"class":642},[637,39312,750],{"class":646},[637,39314,669],{"class":642},[504,39316,922],{"id":921},[927,39318,39319,39329],{},[930,39320,39321],{},[933,39322,39323,39325,39327],{},[936,39324,938],{},[936,39326,941],{},[936,39328,944],{},[946,39330,39331,39344,39358,39382,39397,39413,39426,39439,39453,39466,39486,39500],{},[933,39332,39333,39337,39340],{},[951,39334,39335],{},[618,39336,3231],{},[951,39338,39339],{},"Whether shadow creation only happens once (resets after props change)",[951,39341,39342],{},[618,39343,961],{},[933,39345,39346,39351,39354],{},[951,39347,39348],{},[618,39349,39350],{},"accumulate",[951,39352,39353],{},"Whether shadows accumulate progressively over several frames",[951,39355,39356],{},[618,39357,961],{},[933,39359,39360,39365,39378],{},[951,39361,39362],{},[618,39363,39364],{},"frames",[951,39366,39367,39368,39371,39372,39374,39375,39377],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[618,39369,39370],{},"accumulate && once",", 1 frame will be consumed every update for ",[618,39373,39364],{}," updates. Otherwise, ",[618,39376,39364],{}," frames are consumed for every update.",[951,39379,39380],{},[618,39381,38428],{},[933,39383,39384,39388,39393],{},[951,39385,39386],{},[618,39387,27632],{},[951,39389,958,39390,39392],{},[618,39391,39350],{},", controls the refresh ratio",[951,39394,39395],{},[618,39396,30810],{},[933,39398,39399,39403,39409],{},[951,39400,39401],{},[618,39402,9100],{},[951,39404,39405,39406,39408],{},"If less than ",[618,39407,13535],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[951,39410,39411],{},[618,39412,13535],{},[933,39414,39415,39419,39422],{},[951,39416,39417],{},[618,39418,5653],{},[951,39420,39421],{},"Scale of the plane",[951,39423,39424],{},[618,39425,37514],{},[933,39427,39428,39432,39435],{},[951,39429,39430],{},[618,39431,11632],{},[951,39433,39434],{},"Opacity of the plane",[951,39436,39437],{},[618,39438,1897],{},[933,39440,39441,39446,39449],{},[951,39442,39443],{},[618,39444,39445],{},"alphaTest",[951,39447,39448],{},"Discards alpha pixels",[951,39450,39451],{},[618,39452,2129],{},[933,39454,39455,39459,39462],{},[951,39456,39457],{},[618,39458,7568],{},[951,39460,39461],{},"Shadow color",[951,39463,39464],{},[618,39465,11615],{},[933,39467,39468,39473,39482],{},[951,39469,39470],{},[618,39471,39472],{},"colorBlend",[951,39474,39475,39476,39478,39479,39481],{},"Amount of ",[618,39477,7568],{}," blended into the shadow. ",[618,39480,965],{}," is black",[951,39483,39484],{},[618,39485,820],{},[933,39487,39488,39492,39495],{},[951,39489,39490],{},[618,39491,27990],{},[951,39493,39494],{},"Buffer resolution",[951,39496,39497],{},[618,39498,39499],{},"1024",[933,39501,39502,39507,39510],{},[951,39503,39504],{},[618,39505,39506],{},"toneMapped",[951,39508,39509],{},"Texture tonemapping",[951,39511,39512],{},[618,39513,961],{},[504,39515,35411],{"id":35410},[614,39517,39518,39519,39522,39523,1146],{},"You can bring your own lights to ",[618,39520,39521],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[618,39524,39525],{},"\u003CRandomizedLights />",[614,39527,39528,39529,39533,39534,39536,39537,39540,39541,39545],{},"By default, there's a ",[1140,39530,39531],{"href":362},[618,39532,39525],{}," instance provided in ",[618,39535,39521],{},"'s ",[618,39538,39539],{},"\u003Cslot />",". You can replace it with your own ",[1140,39542,39543],{"href":362},[618,39544,39525],{}," or an alternative by passing it as a child component.",[1349,39547,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":39549},[39550,39551,39552],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":35410,"depth":578,"text":35411},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":341,"description":39553},"_e0gVbLabxPdG8iwvNp-dZyAJRCPazSRayFGlfanGtM",{"id":39558,"title":345,"body":39559,"description":40099,"extension":591,"links":592,"meta":40100,"navigation":594,"path":346,"seo":40101,"stem":347,"__hash__":40102},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":501,"value":39560,"toc":40096},[39561,39566,39577,39579,39584,40093],[2318,39562,39563],{},[39564,39565],"light-shadow-bake-shadows",{},[614,39567,39568,37113,39570,39573,39574,39576],{},[1692,39569,37112],{},[618,39571,39572],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[618,39575,971],{},", so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.",[504,39578,37120],{"id":37119},[3222,39580,39581],{},[614,39582,39583],{},"You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.",[626,39585,39588],{"className":628,"code":39586,"highlights":39587,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { BakeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst cubeRef = shallowRef()\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n if (cubeRef.value) {\n cubeRef.value.rotation.y = elapsed * 0.5\n cubeRef.value.rotation.x = elapsed * 0.5\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas\n clear-color=\"#82DBC5\"\n shadows\n @loop=\"onLoop\"\n >\n \u003CTresPerspectiveCamera\n :position=\"[0, 2, 5]\"\n :look-at=\"[0, 0, 0]\"\n />\n \u003CBakeShadows />\n \u003CTresMesh\n ref=\"cubeRef\"\n cast-shadow\n >\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003CTresMesh\n receive-shadow\n :position=\"[0, -2, 0]\"\n :rotation-x=\"-Math.PI / 2\"\n >\n \u003CTresPlaneGeometry :args=\"[5, 5]\" />\n \u003CTresMeshStandardMaterial :color=\"0xF7F7F7\" />\n \u003C/TresMesh>\n \u003CTresDirectionalLight\n cast-shadow\n :position=\"[0, 10, 0]\"\n />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,2704],[618,39589,39590,39610,39630,39648,39666,39670,39683,39687,39717,39734,39762,39786,39790,39794,39802,39806,39814,39821,39834,39839,39853,39857,39863,39875,39887,39891,39900,39906,39918,39923,39927,39935,39953,39961,39967,39972,39985,39999,40003,40022,40042,40050,40056,40060,40073,40077,40085],{"__ignoreMap":576},[637,39591,39592,39594,39596,39598,39600,39602,39604,39606,39608],{"class":639,"line":577},[637,39593,643],{"class":642},[637,39595,647],{"class":646},[637,39597,651],{"class":650},[637,39599,654],{"class":650},[637,39601,657],{"class":642},[637,39603,660],{"class":642},[637,39605,664],{"class":663},[637,39607,660],{"class":642},[637,39609,669],{"class":642},[637,39611,39613,39615,39617,39620,39622,39624,39626,39628],{"class":39612,"line":578},[639,673],[637,39614,677],{"class":676},[637,39616,680],{"class":642},[637,39618,39619],{"class":683}," BakeShadows",[637,39621,693],{"class":642},[637,39623,696],{"class":676},[637,39625,699],{"class":642},[637,39627,702],{"class":663},[637,39629,705],{"class":642},[637,39631,39632,39634,39636,39638,39640,39642,39644,39646],{"class":639,"line":708},[637,39633,677],{"class":676},[637,39635,680],{"class":642},[637,39637,715],{"class":683},[637,39639,693],{"class":642},[637,39641,696],{"class":676},[637,39643,699],{"class":642},[637,39645,724],{"class":663},[637,39647,705],{"class":642},[637,39649,39650,39652,39654,39656,39658,39660,39662,39664],{"class":639,"line":729},[637,39651,677],{"class":676},[637,39653,680],{"class":642},[637,39655,3521],{"class":683},[637,39657,693],{"class":642},[637,39659,696],{"class":676},[637,39661,699],{"class":642},[637,39663,633],{"class":663},[637,39665,705],{"class":642},[637,39667,39668],{"class":639,"line":739},[637,39669,742],{"emptyLinePlaceholder":594},[637,39671,39672,39674,39677,39679,39681],{"class":639,"line":745},[637,39673,2438],{"class":650},[637,39675,39676],{"class":683}," cubeRef ",[637,39678,657],{"class":642},[637,39680,3521],{"class":2457},[637,39682,6556],{"class":683},[637,39684,39685],{"class":639,"line":755},[637,39686,742],{"emptyLinePlaceholder":594},[637,39688,39689,39692,39695,39698,39701,39704,39706,39708,39710,39712,39715],{"class":639,"line":778},[637,39690,39691],{"class":650},"function",[637,39693,39694],{"class":2457}," onLoop",[637,39696,39697],{"class":642},"({",[637,39699,39700],{"class":6859}," elapsed",[637,39702,39703],{"class":642}," }:",[637,39705,680],{"class":642},[637,39707,39700],{"class":646},[637,39709,1240],{"class":642},[637,39711,5380],{"class":1222},[637,39713,39714],{"class":642}," })",[637,39716,1226],{"class":642},[637,39718,39719,39721,39723,39726,39728,39730,39732],{"class":639,"line":790},[637,39720,21270],{"class":676},[637,39722,3097],{"class":646},[637,39724,39725],{"class":683},"cubeRef",[637,39727,1146],{"class":642},[637,39729,3708],{"class":683},[637,39731,4757],{"class":646},[637,39733,3283],{"class":642},[637,39735,39736,39739,39741,39743,39745,39747,39749,39752,39754,39756,39759],{"class":639,"line":800},[637,39737,39738],{"class":683}," cubeRef",[637,39740,1146],{"class":642},[637,39742,3708],{"class":683},[637,39744,1146],{"class":642},[637,39746,5650],{"class":683},[637,39748,1146],{"class":642},[637,39750,39751],{"class":683},"y",[637,39753,2454],{"class":642},[637,39755,39700],{"class":683},[637,39757,39758],{"class":642}," *",[637,39760,39761],{"class":2524}," 0.5\n",[637,39763,39764,39766,39768,39770,39772,39774,39776,39778,39780,39782,39784],{"class":639,"line":805},[637,39765,39738],{"class":683},[637,39767,1146],{"class":642},[637,39769,3708],{"class":683},[637,39771,1146],{"class":642},[637,39773,5650],{"class":683},[637,39775,1146],{"class":642},[637,39777,7861],{"class":683},[637,39779,2454],{"class":642},[637,39781,39700],{"class":683},[637,39783,39758],{"class":642},[637,39785,39761],{"class":2524},[637,39787,39788],{"class":639,"line":827},[637,39789,7878],{"class":642},[637,39791,39792],{"class":639,"line":631},[637,39793,1347],{"class":642},[637,39795,39796,39798,39800],{"class":639,"line":850},[637,39797,732],{"class":642},[637,39799,647],{"class":646},[637,39801,669],{"class":642},[637,39803,39804],{"class":639,"line":861},[637,39805,742],{"emptyLinePlaceholder":594},[637,39807,39808,39810,39812],{"class":639,"line":872},[637,39809,643],{"class":642},[637,39811,750],{"class":646},[637,39813,669],{"class":642},[637,39815,39816,39818],{"class":639,"line":882},[637,39817,758],{"class":642},[637,39819,39820],{"class":646},"TresCanvas\n",[637,39822,39823,39826,39828,39830,39832],{"class":639,"line":632},[637,39824,39825],{"class":650}," clear-color",[637,39827,657],{"class":642},[637,39829,660],{"class":642},[637,39831,11812],{"class":663},[637,39833,3154],{"class":642},[637,39835,39836],{"class":639,"line":902},[637,39837,39838],{"class":650}," shadows\n",[637,39840,39841,39844,39846,39848,39851],{"class":639,"line":912},[637,39842,39843],{"class":650}," @loop",[637,39845,657],{"class":642},[637,39847,660],{"class":642},[637,39849,39850],{"class":663},"onLoop",[637,39852,3154],{"class":642},[637,39854,39855],{"class":639,"line":2648},[637,39856,5196],{"class":642},[637,39858,39859,39861],{"class":639,"line":2657},[637,39860,781],{"class":642},[637,39862,25547],{"class":646},[637,39864,39865,39867,39869,39871,39873],{"class":639,"line":2677},[637,39866,17279],{"class":650},[637,39868,657],{"class":642},[637,39870,660],{"class":642},[637,39872,7466],{"class":663},[637,39874,3154],{"class":642},[637,39876,39877,39879,39881,39883,39885],{"class":639,"line":2686},[637,39878,25565],{"class":650},[637,39880,657],{"class":642},[637,39882,660],{"class":642},[637,39884,9644],{"class":663},[637,39886,3154],{"class":642},[637,39888,39889],{"class":639,"line":2695},[637,39890,17292],{"class":642},[637,39892,39894,39896,39898],{"class":39893,"line":2704},[639,673],[637,39895,781],{"class":642},[637,39897,39572],{"class":646},[637,39899,787],{"class":642},[637,39901,39902,39904],{"class":639,"line":2726},[637,39903,781],{"class":642},[637,39905,5149],{"class":646},[637,39907,39908,39910,39912,39914,39916],{"class":639,"line":2770},[637,39909,12384],{"class":650},[637,39911,657],{"class":642},[637,39913,660],{"class":642},[637,39915,39725],{"class":663},[637,39917,3154],{"class":642},[637,39919,39920],{"class":639,"line":2779},[637,39921,39922],{"class":650}," cast-shadow\n",[637,39924,39925],{"class":639,"line":2788},[637,39926,12412],{"class":642},[637,39928,39929,39931,39933],{"class":639,"line":3945},[637,39930,853],{"class":642},[637,39932,867],{"class":646},[637,39934,787],{"class":642},[637,39936,39937,39939,39941,39943,39945,39947,39949,39951],{"class":639,"line":3976},[637,39938,853],{"class":642},[637,39940,2709],{"class":646},[637,39942,2712],{"class":650},[637,39944,657],{"class":642},[637,39946,660],{"class":642},[637,39948,13348],{"class":663},[637,39950,660],{"class":642},[637,39952,787],{"class":642},[637,39954,39955,39957,39959],{"class":639,"line":3997},[637,39956,895],{"class":642},[637,39958,856],{"class":646},[637,39960,669],{"class":642},[637,39962,39963,39965],{"class":639,"line":4016},[637,39964,781],{"class":642},[637,39966,5149],{"class":646},[637,39968,39969],{"class":639,"line":4048},[637,39970,39971],{"class":650}," receive-shadow\n",[637,39973,39974,39976,39978,39980,39983],{"class":639,"line":4057},[637,39975,17279],{"class":650},[637,39977,657],{"class":642},[637,39979,660],{"class":642},[637,39981,39982],{"class":663},"[0, -2, 0]",[637,39984,3154],{"class":642},[637,39986,39987,39990,39992,39994,39997],{"class":639,"line":4066},[637,39988,39989],{"class":650}," :rotation-x",[637,39991,657],{"class":642},[637,39993,660],{"class":642},[637,39995,39996],{"class":663},"-Math.PI / 2",[637,39998,3154],{"class":642},[637,40000,40001],{"class":639,"line":21457},[637,40002,12412],{"class":642},[637,40004,40005,40007,40009,40011,40013,40015,40018,40020],{"class":639,"line":21472},[637,40006,853],{"class":642},[637,40008,27788],{"class":646},[637,40010,1982],{"class":650},[637,40012,657],{"class":642},[637,40014,660],{"class":642},[637,40016,40017],{"class":663},"[5, 5]",[637,40019,660],{"class":642},[637,40021,787],{"class":642},[637,40023,40024,40026,40028,40031,40033,40035,40038,40040],{"class":639,"line":21487},[637,40025,853],{"class":642},[637,40027,2709],{"class":646},[637,40029,40030],{"class":650}," :color",[637,40032,657],{"class":642},[637,40034,660],{"class":642},[637,40036,40037],{"class":663},"0xF7F7F7",[637,40039,660],{"class":642},[637,40041,787],{"class":642},[637,40043,40044,40046,40048],{"class":639,"line":21492},[637,40045,895],{"class":642},[637,40047,856],{"class":646},[637,40049,669],{"class":642},[637,40051,40052,40054],{"class":639,"line":21499},[637,40053,781],{"class":642},[637,40055,17261],{"class":646},[637,40057,40058],{"class":639,"line":21504},[637,40059,39922],{"class":650},[637,40061,40062,40064,40066,40068,40071],{"class":639,"line":21510},[637,40063,17279],{"class":650},[637,40065,657],{"class":642},[637,40067,660],{"class":642},[637,40069,40070],{"class":663},"[0, 10, 0]",[637,40072,3154],{"class":642},[637,40074,40075],{"class":639,"line":21531},[637,40076,17292],{"class":642},[637,40078,40079,40081,40083],{"class":639,"line":21537},[637,40080,905],{"class":642},[637,40082,761],{"class":646},[637,40084,669],{"class":642},[637,40086,40087,40089,40091],{"class":639,"line":21544},[637,40088,732],{"class":642},[637,40090,750],{"class":646},[637,40092,669],{"class":642},[1349,40094,40095],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":40097},[40098],{"id":37119,"depth":578,"text":37120},"Bakes shadows in the first frame for performance optimization.",{},{"title":345,"description":40099},"hU2MwhHPZEp5uQ1ZY4cZSmx8JjSu1SZkY7M14ckgtTM",{"id":40104,"title":349,"body":40105,"description":40490,"extension":591,"links":592,"meta":40491,"navigation":594,"path":350,"seo":40492,"stem":351,"__hash__":40493},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":501,"value":40106,"toc":40486},[40107,40112,40121,40123,40390,40392,40394,40484],[608,40108,40109],{},[40110,40111],"light-shadow-circle-shadow",{},[614,40113,40114,40117,40118,1146],{},[618,40115,40116],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[618,40119,40120],{},"THREE.PlaneGeometry",[504,40122,15],{"id":624},[626,40124,40127],{"className":628,"code":40125,"highlights":40126,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CircleShadow, OrbitControls } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n \u003CTresGroup :position-y=\"-0.5\">\n \u003CTresMesh :position-y=\"1\">\n \u003CTresBoxGeometry />\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003CCircleShadow :scale=\"1.5\" />\n \u003C/TresGroup>\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,861],[618,40128,40129,40149,40175,40195,40203,40207,40215,40233,40241,40249,40268,40286,40294,40312,40320,40340,40348,40356,40374,40382],{"__ignoreMap":576},[637,40130,40131,40133,40135,40137,40139,40141,40143,40145,40147],{"class":639,"line":577},[637,40132,643],{"class":642},[637,40134,647],{"class":646},[637,40136,651],{"class":650},[637,40138,654],{"class":650},[637,40140,657],{"class":642},[637,40142,660],{"class":642},[637,40144,664],{"class":663},[637,40146,660],{"class":642},[637,40148,669],{"class":642},[637,40150,40152,40154,40156,40159,40161,40163,40165,40167,40169,40171,40173],{"class":40151,"line":578},[639,673],[637,40153,677],{"class":676},[637,40155,680],{"class":642},[637,40157,40158],{"class":683}," CircleShadow",[637,40160,687],{"class":642},[637,40162,690],{"class":683},[637,40164,693],{"class":642},[637,40166,696],{"class":676},[637,40168,9536],{"class":642},[637,40170,702],{"class":663},[637,40172,660],{"class":642},[637,40174,9543],{"class":642},[637,40176,40177,40179,40181,40183,40185,40187,40189,40191,40193],{"class":639,"line":708},[637,40178,677],{"class":676},[637,40180,680],{"class":642},[637,40182,715],{"class":683},[637,40184,693],{"class":642},[637,40186,696],{"class":676},[637,40188,9536],{"class":642},[637,40190,724],{"class":663},[637,40192,660],{"class":642},[637,40194,9543],{"class":642},[637,40196,40197,40199,40201],{"class":639,"line":729},[637,40198,732],{"class":642},[637,40200,647],{"class":646},[637,40202,669],{"class":642},[637,40204,40205],{"class":639,"line":739},[637,40206,742],{"emptyLinePlaceholder":594},[637,40208,40209,40211,40213],{"class":639,"line":745},[637,40210,643],{"class":642},[637,40212,750],{"class":646},[637,40214,669],{"class":642},[637,40216,40217,40219,40221,40223,40225,40227,40229,40231],{"class":639,"line":755},[637,40218,758],{"class":642},[637,40220,761],{"class":646},[637,40222,764],{"class":650},[637,40224,657],{"class":642},[637,40226,660],{"class":642},[637,40228,11812],{"class":663},[637,40230,660],{"class":642},[637,40232,669],{"class":642},[637,40234,40235,40237,40239],{"class":639,"line":778},[637,40236,781],{"class":642},[637,40238,784],{"class":646},[637,40240,787],{"class":642},[637,40242,40243,40245,40247],{"class":639,"line":790},[637,40244,781],{"class":642},[637,40246,795],{"class":646},[637,40248,787],{"class":642},[637,40250,40251,40253,40255,40257,40259,40261,40264,40266],{"class":639,"line":800},[637,40252,781],{"class":642},[637,40254,10062],{"class":646},[637,40256,1962],{"class":650},[637,40258,657],{"class":642},[637,40260,660],{"class":642},[637,40262,40263],{"class":663},"-0.5",[637,40265,660],{"class":642},[637,40267,669],{"class":642},[637,40269,40270,40272,40274,40276,40278,40280,40282,40284],{"class":639,"line":805},[637,40271,853],{"class":642},[637,40273,856],{"class":646},[637,40275,1962],{"class":650},[637,40277,657],{"class":642},[637,40279,660],{"class":642},[637,40281,1897],{"class":663},[637,40283,660],{"class":642},[637,40285,669],{"class":642},[637,40287,40288,40290,40292],{"class":639,"line":827},[637,40289,864],{"class":642},[637,40291,867],{"class":646},[637,40293,787],{"class":642},[637,40295,40296,40298,40300,40302,40304,40306,40308,40310],{"class":639,"line":631},[637,40297,864],{"class":642},[637,40299,13339],{"class":646},[637,40301,2712],{"class":650},[637,40303,657],{"class":642},[637,40305,660],{"class":642},[637,40307,13348],{"class":663},[637,40309,660],{"class":642},[637,40311,787],{"class":642},[637,40313,40314,40316,40318],{"class":639,"line":850},[637,40315,885],{"class":642},[637,40317,856],{"class":646},[637,40319,669],{"class":642},[637,40321,40323,40325,40328,40330,40332,40334,40336,40338],{"class":40322,"line":861},[639,673],[637,40324,853],{"class":642},[637,40326,40327],{"class":646},"CircleShadow",[637,40329,813],{"class":650},[637,40331,657],{"class":642},[637,40333,660],{"class":642},[637,40335,29415],{"class":663},[637,40337,660],{"class":642},[637,40339,787],{"class":642},[637,40341,40342,40344,40346],{"class":639,"line":872},[637,40343,895],{"class":642},[637,40345,10062],{"class":646},[637,40347,669],{"class":642},[637,40349,40350,40352,40354],{"class":639,"line":882},[637,40351,781],{"class":642},[637,40353,9702],{"class":646},[637,40355,787],{"class":642},[637,40357,40358,40360,40362,40364,40366,40368,40370,40372],{"class":639,"line":632},[637,40359,781],{"class":642},[637,40361,9721],{"class":646},[637,40363,1508],{"class":650},[637,40365,657],{"class":642},[637,40367,660],{"class":642},[637,40369,13383],{"class":663},[637,40371,660],{"class":642},[637,40373,787],{"class":642},[637,40375,40376,40378,40380],{"class":639,"line":902},[637,40377,905],{"class":642},[637,40379,761],{"class":646},[637,40381,669],{"class":642},[637,40383,40384,40386,40388],{"class":639,"line":912},[637,40385,732],{"class":642},[637,40387,750],{"class":646},[637,40389,669],{"class":642},[504,40391,922],{"id":921},[614,40393,925],{},[927,40395,40396,40406],{},[930,40397,40398],{},[933,40399,40400,40402,40404],{},[936,40401,8110],{"align":997},[936,40403,941],{"align":997},[936,40405,944],{},[946,40407,40408,40424,40437,40457,40471],{},[933,40409,40410,40414,40420],{},[951,40411,40412],{"align":997},[618,40413,7568],{},[951,40415,40416,40417],{"align":997},"Color of the shadow as a ",[618,40418,40419],{},"Color | number | string",[951,40421,40422],{},[618,40423,11615],{},[933,40425,40426,40430,40433],{},[951,40427,40428],{"align":997},[618,40429,11632],{},[951,40431,40432],{"align":997},"Opacity of the shadow",[951,40434,40435],{},[618,40436,1969],{},[933,40438,40439,40444,40453],{},[951,40440,40441],{"align":997},[618,40442,40443],{},"offset",[951,40445,40446,40447,40449,40450,40452],{"align":997},"Placement of the first radial gradient color stop. ",[618,40448,13804],{}," is the center of the circle. ",[618,40451,13682],{}," is edge.",[951,40454,40455],{},[618,40456,965],{},[933,40458,40459,40464,40467],{},[951,40460,40461],{"align":997},[618,40462,40463],{},"fog",[951,40465,40466],{"align":997},"Whether the material is affected by fog",[951,40468,40469],{},[618,40470,971],{},[933,40472,40473,40477,40480],{},[951,40474,40475],{"align":997},[618,40476,10433],{},[951,40478,40479],{"align":997},"Whether rendering the material has any effect on the depth buffer",[951,40481,40482],{},[618,40483,971],{},[1349,40485,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":40487},[40488,40489],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":349,"description":40490},"TUy3Uz9v0MKp5WFl-uNVQ_T1BiUHugE-_tL8tI71jFo",{"id":40495,"title":353,"body":40496,"description":40964,"extension":591,"links":592,"meta":40965,"navigation":594,"path":354,"seo":40966,"stem":355,"__hash__":40967},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":501,"value":40497,"toc":40960},[40498,40503,40519,40521,40773,40775,40958],[608,40499,40500],{},[40501,40502],"light-shadow-contact-shadow",{},[614,40504,40505,40508,40509,37623,40514,1146],{},[618,40506,40507],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1140,40510,40513],{"href":40511,"rel":40512},"https://threejs.org/examples/webgl_shadow_contact.html",[1144],"Three.js contact shadows example",[1140,40515,40518],{"href":40516,"rel":40517},"https://twitter.com/mrdoob",[1144],"@mrdoob",[504,40520,15],{"id":624},[626,40522,40525],{"className":628,"code":40523,"highlights":40524,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"white\">\n \u003CLevioso :speed=\"2\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n \u003CTorusKnot :scale=\"0.45\">\n \u003CTresMeshNormalMaterial />\n \u003C/TorusKnot>\n \u003C/Levioso>\n \u003CContactShadows :position-y=\"-1\" color=\"#335\" :scale=\"20\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,631],[618,40526,40527,40547,40576,40594,40602,40606,40614,40632,40674,40692,40700,40708,40716,40757,40765],{"__ignoreMap":576},[637,40528,40529,40531,40533,40535,40537,40539,40541,40543,40545],{"class":639,"line":577},[637,40530,643],{"class":642},[637,40532,647],{"class":646},[637,40534,651],{"class":650},[637,40536,654],{"class":650},[637,40538,657],{"class":642},[637,40540,660],{"class":642},[637,40542,664],{"class":663},[637,40544,660],{"class":642},[637,40546,669],{"class":642},[637,40548,40550,40552,40554,40557,40559,40561,40563,40566,40568,40570,40572,40574],{"class":40549,"line":578},[639,673],[637,40551,677],{"class":676},[637,40553,680],{"class":642},[637,40555,40556],{"class":683}," ContactShadows",[637,40558,687],{"class":642},[637,40560,9553],{"class":683},[637,40562,687],{"class":642},[637,40564,40565],{"class":683}," TorusKnot",[637,40567,693],{"class":642},[637,40569,696],{"class":676},[637,40571,699],{"class":642},[637,40573,702],{"class":663},[637,40575,705],{"class":642},[637,40577,40578,40580,40582,40584,40586,40588,40590,40592],{"class":639,"line":708},[637,40579,677],{"class":676},[637,40581,680],{"class":642},[637,40583,715],{"class":683},[637,40585,693],{"class":642},[637,40587,696],{"class":676},[637,40589,699],{"class":642},[637,40591,724],{"class":663},[637,40593,705],{"class":642},[637,40595,40596,40598,40600],{"class":639,"line":729},[637,40597,732],{"class":642},[637,40599,647],{"class":646},[637,40601,669],{"class":642},[637,40603,40604],{"class":639,"line":739},[637,40605,742],{"emptyLinePlaceholder":594},[637,40607,40608,40610,40612],{"class":639,"line":745},[637,40609,643],{"class":642},[637,40611,750],{"class":646},[637,40613,669],{"class":642},[637,40615,40616,40618,40620,40622,40624,40626,40628,40630],{"class":639,"line":755},[637,40617,758],{"class":642},[637,40619,761],{"class":646},[637,40621,764],{"class":650},[637,40623,657],{"class":642},[637,40625,660],{"class":642},[637,40627,2719],{"class":663},[637,40629,660],{"class":642},[637,40631,669],{"class":642},[637,40633,40634,40636,40638,40640,40642,40644,40646,40648,40651,40653,40655,40658,40660,40663,40665,40667,40670,40672],{"class":639,"line":778},[637,40635,781],{"class":642},[637,40637,9664],{"class":646},[637,40639,9667],{"class":650},[637,40641,657],{"class":642},[637,40643,660],{"class":642},[637,40645,820],{"class":663},[637,40647,660],{"class":642},[637,40649,40650],{"class":650}," :range",[637,40652,657],{"class":642},[637,40654,660],{"class":642},[637,40656,40657],{"class":663},"[0, 0.7]",[637,40659,660],{"class":642},[637,40661,40662],{"class":650}," :rotation-factor",[637,40664,657],{"class":642},[637,40666,660],{"class":642},[637,40668,40669],{"class":663},"9",[637,40671,660],{"class":642},[637,40673,669],{"class":642},[637,40675,40676,40678,40680,40682,40684,40686,40688,40690],{"class":639,"line":790},[637,40677,853],{"class":642},[637,40679,35830],{"class":646},[637,40681,813],{"class":650},[637,40683,657],{"class":642},[637,40685,660],{"class":642},[637,40687,27237],{"class":663},[637,40689,660],{"class":642},[637,40691,669],{"class":642},[637,40693,40694,40696,40698],{"class":639,"line":800},[637,40695,864],{"class":642},[637,40697,877],{"class":646},[637,40699,787],{"class":642},[637,40701,40702,40704,40706],{"class":639,"line":805},[637,40703,885],{"class":642},[637,40705,35830],{"class":646},[637,40707,669],{"class":642},[637,40709,40710,40712,40714],{"class":639,"line":827},[637,40711,895],{"class":642},[637,40713,9664],{"class":646},[637,40715,669],{"class":642},[637,40717,40719,40721,40724,40726,40728,40730,40732,40734,40736,40738,40740,40743,40745,40747,40749,40751,40753,40755],{"class":40718,"line":631},[639,673],[637,40720,781],{"class":642},[637,40722,40723],{"class":646},"ContactShadows",[637,40725,1962],{"class":650},[637,40727,657],{"class":642},[637,40729,660],{"class":642},[637,40731,10215],{"class":663},[637,40733,660],{"class":642},[637,40735,2712],{"class":650},[637,40737,657],{"class":642},[637,40739,660],{"class":642},[637,40741,40742],{"class":663},"#335",[637,40744,660],{"class":642},[637,40746,813],{"class":650},[637,40748,657],{"class":642},[637,40750,660],{"class":642},[637,40752,30810],{"class":663},[637,40754,660],{"class":642},[637,40756,787],{"class":642},[637,40758,40759,40761,40763],{"class":639,"line":850},[637,40760,905],{"class":642},[637,40762,761],{"class":646},[637,40764,669],{"class":642},[637,40766,40767,40769,40771],{"class":639,"line":861},[637,40768,732],{"class":642},[637,40770,750],{"class":646},[637,40772,669],{"class":642},[504,40774,922],{"id":921},[927,40776,40777,40787],{},[930,40778,40779],{},[933,40780,40781,40783,40785],{},[936,40782,938],{},[936,40784,941],{},[936,40786,944],{},[946,40788,40789,40802,40815,40829,40845,40859,40873,40887,40901,40915,40928,40945],{},[933,40790,40791,40795,40798],{},[951,40792,40793],{},[618,40794,11632],{},[951,40796,40797],{},"The opacity of the shadows.",[951,40799,40800],{},[618,40801,1897],{},[933,40803,40804,40808,40811],{},[951,40805,40806],{},[618,40807,28206],{},[951,40809,40810],{},"The blur of the shadows.",[951,40812,40813],{},[618,40814,1897],{},[933,40816,40817,40821,40824],{},[951,40818,40819],{},[618,40820,7568],{},[951,40822,40823],{},"The color of the shadows.",[951,40825,40826],{},[618,40827,40828],{},"'#000000'",[933,40830,40831,40836,40841],{},[951,40832,40833],{},[618,40834,40835],{},"tint",[951,40837,40838,40839,1146],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[618,40840,7568],{},[951,40842,40843],{},[618,40844,1167],{},[933,40846,40847,40851,40857],{},[951,40848,40849],{},[618,40850,5653],{},[951,40852,40853,40854,1146],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[618,40855,40856],{},"[x, y]",[951,40858,37514],{},[933,40860,40861,40866,40869],{},[951,40862,40863],{},[618,40864,40865],{},"width",[951,40867,40868],{},"The width of the shadow plane.",[951,40870,40871],{},[618,40872,1897],{},[933,40874,40875,40880,40883],{},[951,40876,40877],{},[618,40878,40879],{},"height",[951,40881,40882],{},"The height of the shadow plane.",[951,40884,40885],{},[618,40886,1897],{},[933,40888,40889,40894,40897],{},[951,40890,40891],{},[618,40892,40893],{},"far",[951,40895,40896],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[951,40898,40899],{},[618,40900,37514],{},[933,40902,40903,40908,40911],{},[951,40904,40905],{},[618,40906,40907],{},"smooth",[951,40909,40910],{},"Whether the shadows should be smoothed to reduce artifacts.",[951,40912,40913],{},[618,40914,961],{},[933,40916,40917,40921,40924],{},[951,40918,40919],{},[618,40920,27990],{},[951,40922,40923],{},"The resolution of the shadow textures.",[951,40925,40926],{},[618,40927,27999],{},[933,40929,40930,40934,40940],{},[951,40931,40932],{},[618,40933,39364],{},[951,40935,40936,40937,40939],{},"For performance, optionally stop updating shadows after ",[618,40938,39364],{}," frames.",[951,40941,40942],{},[618,40943,40944],{},"Math.POSITIVE_INFINITY",[933,40946,40947,40951,40954],{},[951,40948,40949],{},[618,40950,10433],{},[951,40952,40953],{},"Whether the shadows should write to the depth buffer or not.",[951,40955,40956],{},[618,40957,971],{},[1349,40959,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":40961},[40962,40963],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":353,"description":40964},"o8ix90CI6-yelSPJOMj3eTHEv1PqdpDiKiRrYUJfBHQ",{"id":40969,"title":357,"body":40970,"description":42478,"extension":591,"links":592,"meta":42479,"navigation":594,"path":358,"seo":42480,"stem":359,"__hash__":42481},"docs/2.api/7.light-shadow/lensflare.md",{"type":501,"value":40971,"toc":42462},[40972,40977,40988,40990,41123,41125,41250,41254,41260,41268,41274,41331,41335,41341,41355,41362,41366,41392,41409,41415,41420,41425,41432,41438,41530,41535,41539,41544,41557,41561,41569,41624,41634,41637,41656,41665,41672,41676,41679,41687,41699,41707,41733,41740,41773,41777,41780,41824,41838,41843,41846,41849,41872,41891,41896,41900,41903,42033,42038,42043,42231,42237,42243,42246,42249,42459],[608,40973,40974],{},[40975,40976],"light-shadow-lensflare",{},[614,40978,40979,40982,40983,1146],{},[618,40980,40981],{},"\u003CLensflare />"," wraps the ",[1140,40984,40987],{"href":40985,"rel":40986},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1144],"Three.js Lensflare",[504,40989,15],{"id":624},[626,40991,40994],{"className":628,"code":40992,"highlights":40993,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Lensflare } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPointLight>\n \u003CLensflare />\n \u003C/TresPointLight>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,40995,40996,41016,41034,41054,41062,41066,41074,41082,41090,41099,41107,41115],{"__ignoreMap":576},[637,40997,40998,41000,41002,41004,41006,41008,41010,41012,41014],{"class":639,"line":577},[637,40999,643],{"class":642},[637,41001,647],{"class":646},[637,41003,651],{"class":650},[637,41005,654],{"class":650},[637,41007,657],{"class":642},[637,41009,660],{"class":642},[637,41011,664],{"class":663},[637,41013,660],{"class":642},[637,41015,669],{"class":642},[637,41017,41018,41020,41022,41024,41026,41028,41030,41032],{"class":639,"line":578},[637,41019,677],{"class":676},[637,41021,680],{"class":642},[637,41023,715],{"class":683},[637,41025,693],{"class":642},[637,41027,696],{"class":676},[637,41029,699],{"class":642},[637,41031,724],{"class":663},[637,41033,705],{"class":642},[637,41035,41037,41039,41041,41044,41046,41048,41050,41052],{"class":41036,"line":708},[639,673],[637,41038,677],{"class":676},[637,41040,680],{"class":642},[637,41042,41043],{"class":683}," Lensflare",[637,41045,693],{"class":642},[637,41047,696],{"class":676},[637,41049,699],{"class":642},[637,41051,702],{"class":663},[637,41053,705],{"class":642},[637,41055,41056,41058,41060],{"class":639,"line":729},[637,41057,732],{"class":642},[637,41059,647],{"class":646},[637,41061,669],{"class":642},[637,41063,41064],{"class":639,"line":739},[637,41065,742],{"emptyLinePlaceholder":594},[637,41067,41068,41070,41072],{"class":639,"line":745},[637,41069,643],{"class":642},[637,41071,750],{"class":646},[637,41073,669],{"class":642},[637,41075,41076,41078,41080],{"class":639,"line":755},[637,41077,758],{"class":642},[637,41079,761],{"class":646},[637,41081,669],{"class":642},[637,41083,41084,41086,41088],{"class":639,"line":778},[637,41085,781],{"class":642},[637,41087,11388],{"class":646},[637,41089,669],{"class":642},[637,41091,41093,41095,41097],{"class":41092,"line":790},[639,673],[637,41094,853],{"class":642},[637,41096,357],{"class":646},[637,41098,787],{"class":642},[637,41100,41101,41103,41105],{"class":639,"line":800},[637,41102,895],{"class":642},[637,41104,11388],{"class":646},[637,41106,669],{"class":642},[637,41108,41109,41111,41113],{"class":639,"line":805},[637,41110,905],{"class":642},[637,41112,761],{"class":646},[637,41114,669],{"class":642},[637,41116,41117,41119,41121],{"class":639,"line":827},[637,41118,732],{"class":642},[637,41120,750],{"class":646},[637,41122,669],{"class":642},[504,41124,922],{"id":921},[927,41126,41127,41137],{},[930,41128,41129],{},[933,41130,41131,41133,41135],{},[936,41132,8110],{"align":997},[936,41134,941],{"align":997},[936,41136,944],{"align":997},[946,41138,41139,41154,41169,41186,41202,41219,41234],{},[933,41140,41141,41145,41150],{},[951,41142,41143],{"align":997},[1692,41144,5653],{},[951,41146,41147,41149],{"align":997},[618,41148,5375],{}," – multiplier for lensflare element sizes",[951,41151,41152],{"align":997},[618,41153,13682],{},[933,41155,41156,41160,41165],{},[951,41157,41158],{"align":997},[1692,41159,13542],{},[951,41161,41162,41164],{"align":997},[618,41163,5375],{}," – multiplier for element distances from flare center",[951,41166,41167],{"align":997},[618,41168,13682],{},[933,41170,41171,41176,41182],{},[951,41172,41173],{"align":997},[1692,41174,41175],{},"elements",[951,41177,41178,41181],{"align":997},[618,41179,41180],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[951,41183,41184],{"align":997},[618,41185,1167],{},[933,41187,41188,41193,41198],{},[951,41189,41190],{"align":997},[1692,41191,41192],{},"seed",[951,41194,41195,41197],{"align":997},[618,41196,5375],{}," – random seed for generating random seeded elements",[951,41199,41200],{"align":997},[618,41201,1167],{},[933,41203,41204,41209,41215],{},[951,41205,41206],{"align":997},[1692,41207,41208],{},"seedProps",[951,41210,41211,41214],{"align":997},[618,41212,41213],{},"SeedProps[]"," – specifications for generating random seeded elements",[951,41216,41217],{"align":997},[618,41218,1167],{},[933,41220,41221,41225,41230],{},[951,41222,41223],{"align":997},[1692,41224,7568],{},[951,41226,41227,41229],{"align":997},[618,41228,7583],{}," – default color of lensflare elements",[951,41231,41232],{"align":997},[618,41233,1167],{},[933,41235,41236,41240,41246],{},[951,41237,41238],{"align":997},[1692,41239,2740],{},[951,41241,41242,41245],{"align":997},[618,41243,41244],{},"Texture | string"," – default texture of lensflare elements",[951,41247,41248],{"align":997},[618,41249,1167],{},[504,41251,41252],{"id":41175},[618,41253,41175],{},[614,41255,41256,41257,41259],{},"You can specify individual lensflare element properties directly using the component's ",[618,41258,41175],{}," prop.",[614,41261,2799,41262,41264,41265,1146],{},[618,41263,41175],{}," prop expects an instance of ",[618,41266,41267],{},"(Partial\u003CLensflareElementProps>)[]",[614,41269,41270,41271,41273],{},"Every object in ",[618,41272,41175],{}," may have any (or none) of the following properties.",[927,41275,41276,41284],{},[930,41277,41278],{},[933,41279,41280,41282],{},[936,41281,8110],{"align":997},[936,41283,941],{"align":997},[946,41285,41286,41298,41309,41320],{},[933,41287,41288,41292],{},[951,41289,41290],{"align":997},[1692,41291,2740],{},[951,41293,41294,41297],{"align":997},[618,41295,41296],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[933,41299,41300,41304],{},[951,41301,41302],{"align":997},[1692,41303,7568],{},[951,41305,41306,41308],{"align":997},[618,41307,7583],{}," - color of the lensflare element",[933,41310,41311,41315],{},[951,41312,41313],{"align":997},[1692,41314,13542],{},[951,41316,41317,41319],{"align":997},[618,41318,5375],{}," - distance of the lensflare element from the lensflare center",[933,41321,41322,41326],{},[951,41323,41324],{"align":997},[1692,41325,16749],{},[951,41327,41328,41330],{"align":997},[618,41329,5375],{}," - size of the lensflare element",[504,41332,41333],{"id":41192},[618,41334,41192],{},[614,41336,41337,41338,41340],{},"Adding a ",[618,41339,41192],{}," prop to a component enables seeded random element generation.",[614,41342,2799,41343,41345,41346,41351,41352,1146],{},[618,41344,41192],{}," prop is used as the \"seed\" in a ",[1140,41347,41350],{"href":41348,"rel":41349},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1144],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[618,41353,41354],{},"SeedProps",[2028,41356,41357],{},[614,41358,41359,41360,1146],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[637,41361],{},[4074,41363,41365],{"id":41364},"example","Example",[626,41367,41369],{"className":628,"code":41368,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"seedRef\" />\n",[618,41370,41371],{"__ignoreMap":576},[637,41372,41373,41375,41377,41379,41381,41383,41385,41388,41390],{"class":639,"line":577},[637,41374,643],{"class":642},[637,41376,357],{"class":646},[637,41378,3052],{"class":642},[637,41380,41192],{"class":650},[637,41382,657],{"class":642},[637,41384,660],{"class":642},[637,41386,41387],{"class":683},"seedRef",[637,41389,660],{"class":642},[637,41391,787],{"class":642},[614,41393,41394,41395,2273,41398,1695,41400,1695,41402,1695,41404,1695,41406,41408],{},"Below, the results of setting ",[618,41396,41397],{},"seedRef.value",[618,41399,965],{},[618,41401,1897],{},[618,41403,820],{},[618,41405,21410],{},[618,41407,9674],{},", respectively.",[614,41410,41411],{},[9481,41412],{"alt":41413,"src":41414},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[504,41416,41418],{"id":41417},"seedprops",[618,41419,41208],{},[614,41421,41337,41422,41424],{},[618,41423,41208],{}," prop to the component enables seeded random element generation.",[614,41426,2799,41427,41264,41429,41431],{},[618,41428,41208],{},[618,41430,41213],{},". It specifies rules and acceptable values for creating random lensflare elements.",[614,41433,41434,41435,41437],{},"Every element in ",[618,41436,41208],{}," has this shape.",[927,41439,41440,41450],{},[930,41441,41442],{},[933,41443,41444,41446,41448],{},[936,41445,8110],{"align":997},[936,41447,941],{"align":997},[936,41449,18605],{},[946,41451,41452,41465,41478,41491,41504,41517],{},[933,41453,41454,41458,41463],{},[951,41455,41456],{"align":997},[1692,41457,2740],{},[951,41459,41460,41462],{"align":997},[618,41461,21968],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[951,41464,34092],{},[933,41466,41467,41471,41476],{},[951,41468,41469],{"align":997},[1692,41470,7568],{},[951,41472,41473,41475],{"align":997},[618,41474,30864],{}," - array of 1 or more colors; a single color will be selected per generated element",[951,41477,34092],{},[933,41479,41480,41484,41489],{},[951,41481,41482],{"align":997},[1692,41483,13542],{},[951,41485,41486,41488],{"align":997},[618,41487,28856],{}," - minimum and maximum allowable distance from the flare center",[951,41490,34092],{},[933,41492,41493,41497,41502],{},[951,41494,41495],{"align":997},[1692,41496,16749],{},[951,41498,41499,41501],{"align":997},[618,41500,28856],{}," - minimum and maximum allowable size",[951,41503,34092],{},[933,41505,41506,41510,41515],{},[951,41507,41508],{"align":997},[1692,41509,21288],{},[951,41511,41512,41514],{"align":997},[618,41513,28856],{}," - minimum and maximum allowable number of elements to generate",[951,41516,34092],{},[933,41518,41519,41523,41528],{},[951,41520,41521],{"align":997},[1692,41522,41192],{},[951,41524,41525,41527],{"align":997},[618,41526,5375],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[951,41529,34127],{},[2028,41531,41532],{},[614,41533,41534],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[504,41536,41538],{"id":41537},"random-elements-and-non-random-properties","Random elements and non-random properties",[614,41540,41541,41543],{},[618,41542,40981],{}," was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements.",[626,41545,41547],{"className":628,"code":41546,"language":633,"meta":576,"style":576},"\u003CLensflare />\n",[618,41548,41549],{"__ignoreMap":576},[637,41550,41551,41553,41555],{"class":639,"line":577},[637,41552,643],{"class":642},[637,41554,357],{"class":646},[637,41556,787],{"class":642},[4074,41558,41560],{"id":41559},"non-random-properties","Non-random properties",[614,41562,41563,41564,41259],{},"You can provide a list of lensflare element properties using the ",[1140,41565,41567],{"href":41566},"#elements",[618,41568,41175],{},[626,41570,41572],{"className":628,"code":41571,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[618,41573,41574],{"__ignoreMap":576},[637,41575,41576,41578,41580,41582,41584,41586,41588,41590,41592,41594,41596,41598,41600,41602,41604,41606,41608,41610,41612,41614,41616,41618,41620,41622],{"class":639,"line":577},[637,41577,643],{"class":642},[637,41579,357],{"class":646},[637,41581,3052],{"class":642},[637,41583,41175],{"class":650},[637,41585,657],{"class":642},[637,41587,660],{"class":642},[637,41589,8752],{"class":683},[637,41591,8459],{"class":642},[637,41593,2712],{"class":646},[637,41595,1240],{"class":642},[637,41597,699],{"class":642},[637,41599,36849],{"class":663},[637,41601,2463],{"class":642},[637,41603,8470],{"class":642},[637,41605,680],{"class":642},[637,41607,2712],{"class":646},[637,41609,1240],{"class":642},[637,41611,699],{"class":642},[637,41613,36966],{"class":663},[637,41615,2463],{"class":642},[637,41617,693],{"class":642},[637,41619,2537],{"class":683},[637,41621,660],{"class":642},[637,41623,787],{"class":642},[614,41625,41626,41627,1695,41629,1695,41631,41633],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[618,41628,13542],{},[618,41630,16749],{},[618,41632,2740],{}," – will be filled in by the built-in defaults in this case.",[614,41635,41636],{},"You can also provide default props which will overwrite random generated props.",[626,41638,41640],{"className":628,"code":41639,"language":633,"meta":576,"style":576},"\u003CLensflare color:\"red\" />\n",[618,41641,41642],{"__ignoreMap":576},[637,41643,41644,41646,41648,41651,41654],{"class":639,"line":577},[637,41645,643],{"class":642},[637,41647,357],{"class":646},[637,41649,41650],{"class":650}," color:",[637,41652,41653],{"class":683},"\"red\" ",[637,41655,3190],{"class":642},[614,41657,41658,41659,41661,41662,41664],{},"Since ",[618,41660,41175],{}," is not defined here, the component will generate random lensflare elements. The specified ",[618,41663,7568],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[614,41666,1138,41667,41671],{},[1140,41668,41670],{"href":41669},"#precedence","precedence"," for details about how properties are filled in.",[4074,41673,41675],{"id":41674},"random-elements","Random elements",[614,41677,41678],{},"You can let the component generate random elements ...",[614,41680,41681,41682],{},"... by not adding an ",[1140,41683,41684,41686],{"href":41566},[618,41685,41175],{}," prop",[626,41688,41689],{"className":628,"code":41546,"language":633,"meta":576,"style":576},[618,41690,41691],{"__ignoreMap":576},[637,41692,41693,41695,41697],{"class":639,"line":577},[637,41694,643],{"class":642},[637,41696,357],{"class":646},[637,41698,787],{"class":642},[614,41700,41701,41702],{},"... by adding a ",[1140,41703,41705,41686],{"href":41704},"#seed",[618,41706,41192],{},[626,41708,41710],{"className":628,"code":41709,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"7127\" />\n",[618,41711,41712],{"__ignoreMap":576},[637,41713,41714,41716,41718,41720,41722,41724,41726,41729,41731],{"class":639,"line":577},[637,41715,643],{"class":642},[637,41717,357],{"class":646},[637,41719,3052],{"class":642},[637,41721,41192],{"class":650},[637,41723,657],{"class":642},[637,41725,660],{"class":642},[637,41727,41728],{"class":2524},"7127",[637,41730,660],{"class":642},[637,41732,787],{"class":642},[614,41734,41701,41735],{},[1140,41736,41738,41686],{"href":41737},"#seedprops",[618,41739,41208],{},[626,41741,41743],{"className":628,"code":41742,"language":633,"meta":576,"style":576},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[618,41744,41745],{"__ignoreMap":576},[637,41746,41747,41749,41751,41753,41755,41757,41759,41761,41764,41767,41769,41771],{"class":639,"line":577},[637,41748,643],{"class":642},[637,41750,357],{"class":646},[637,41752,3052],{"class":642},[637,41754,41208],{"class":650},[637,41756,657],{"class":642},[637,41758,660],{"class":642},[637,41760,8752],{"class":683},[637,41762,41763],{"class":642},"{...},",[637,41765,41766],{"class":642}," {...}",[637,41768,2537],{"class":683},[637,41770,660],{"class":642},[637,41772,787],{"class":642},[4074,41774,41776],{"id":41775},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[614,41778,41779],{},"You can mix your own properties and random elements.",[626,41781,41783],{"className":628,"code":41782,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[618,41784,41785],{"__ignoreMap":576},[637,41786,41787,41789,41791,41793,41795,41797,41799,41801,41803,41805,41807,41809,41811,41813,41815,41817,41820,41822],{"class":639,"line":577},[637,41788,643],{"class":642},[637,41790,357],{"class":646},[637,41792,3052],{"class":642},[637,41794,41175],{"class":650},[637,41796,657],{"class":642},[637,41798,660],{"class":642},[637,41800,8752],{"class":683},[637,41802,41763],{"class":642},[637,41804,41766],{"class":642},[637,41806,2537],{"class":683},[637,41808,660],{"class":642},[637,41810,3052],{"class":642},[637,41812,41192],{"class":650},[637,41814,657],{"class":642},[637,41816,660],{"class":642},[637,41818,41819],{"class":2524},"8193",[637,41821,660],{"class":642},[637,41823,787],{"class":642},[614,41825,41826,41827,3086,41829,41831,41832,41834,41835,1146],{},"Here, both ",[618,41828,41175],{},[618,41830,41192],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[618,41833,41175],{},", according to the ",[1140,41836,41837],{"href":41669},"order of precedence",[2028,41839,41840],{},[614,41841,41842],{},"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.",[4074,41844,41845],{"id":41670},"Precedence",[614,41847,41848],{},"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.",[14163,41850,41851,41855,41862,41869],{},[2239,41852,41853],{},[618,41854,41175],{},[2239,41856,41857,1695,41859,41861],{},[618,41858,7568],{},[618,41860,2740],{}," – default element properties",[2239,41863,41864,1695,41866,41868],{},[618,41865,41192],{},[618,41867,41208],{}," – generated random elements",[2239,41870,41871],{},"built-in default element properties",[2028,41873,41874],{},[614,41875,41876,3086,41878,41880,41881,41884,41885,41887,41888,41890],{},[618,41877,5653],{},[618,41879,13542],{}," are applied as ",[1692,41882,41883],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[618,41886,5653],{}," to make the entire lensflare larger or smaller, and ",[618,41889,13542],{}," to spread or compress the scattered elements.",[2028,41892,41893],{},[614,41894,41895],{},"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.",[4074,41897,41899],{"id":41898},"precedence-example","Precedence example",[614,41901,41902],{},"Here's an example of precedence. Assume this is in our vue template.",[626,41904,41906],{"className":628,"code":41905,"language":633,"meta":576,"style":576},"\u003CLensflare\n :elements=\"[\n {size:512, texture='http://example.net/circle.png'},\n {color:'yellow', distance:0.5}\n ]\"\n :texture=\"http://example.net/ring.png\"\n color=\"red\"\n :seed=\"1\"\n/>\n",[618,41907,41908,41915,41928,41955,41980,41987,42003,42015,42029],{"__ignoreMap":576},[637,41909,41910,41912],{"class":639,"line":577},[637,41911,643],{"class":642},[637,41913,41914],{"class":646},"Lensflare\n",[637,41916,41917,41919,41921,41923,41925],{"class":639,"line":578},[637,41918,3159],{"class":642},[637,41920,41175],{"class":650},[637,41922,657],{"class":642},[637,41924,660],{"class":642},[637,41926,41927],{"class":683},"[\n",[637,41929,41930,41933,41935,41937,41939,41941,41943,41945,41947,41950,41952],{"class":639,"line":708},[637,41931,41932],{"class":642}," {",[637,41934,16749],{"class":646},[637,41936,1240],{"class":642},[637,41938,27999],{"class":2524},[637,41940,687],{"class":642},[637,41942,20083],{"class":683},[637,41944,657],{"class":642},[637,41946,2463],{"class":642},[637,41948,41949],{"class":663},"http://example.net/circle.png",[637,41951,2463],{"class":642},[637,41953,41954],{"class":642},"},\n",[637,41956,41957,41959,41961,41963,41965,41967,41969,41971,41974,41976,41978],{"class":639,"line":729},[637,41958,41932],{"class":642},[637,41960,7568],{"class":646},[637,41962,1240],{"class":642},[637,41964,2463],{"class":642},[637,41966,36966],{"class":663},[637,41968,2463],{"class":642},[637,41970,687],{"class":642},[637,41972,41973],{"class":646}," distance",[637,41975,1240],{"class":642},[637,41977,1969],{"class":2524},[637,41979,1347],{"class":642},[637,41981,41982,41985],{"class":639,"line":739},[637,41983,41984],{"class":683}," ]",[637,41986,3154],{"class":642},[637,41988,41989,41991,41993,41995,41997,42000],{"class":639,"line":745},[637,41990,3159],{"class":642},[637,41992,2740],{"class":650},[637,41994,657],{"class":642},[637,41996,660],{"class":642},[637,41998,41999],{"class":683},"http:",[637,42001,42002],{"class":1231},"//example.net/ring.png\"\n",[637,42004,42005,42007,42009,42011,42013],{"class":639,"line":755},[637,42006,5496],{"class":683},[637,42008,657],{"class":642},[637,42010,660],{"class":642},[637,42012,36849],{"class":650},[637,42014,3154],{"class":683},[637,42016,42017,42019,42021,42023,42025,42027],{"class":639,"line":778},[637,42018,3159],{"class":642},[637,42020,41192],{"class":650},[637,42022,657],{"class":642},[637,42024,660],{"class":642},[637,42026,1897],{"class":2524},[637,42028,3154],{"class":642},[637,42030,42031],{"class":639,"line":790},[637,42032,3190],{"class":683},[614,42034,42035,42037],{},[618,42036,41192],{}," is defined, so the component will produce random elements.",[614,42039,42040,42041,1240],{},"Assume the random element generator produces this, based on ",[618,42042,41192],{},[626,42044,42048],{"className":42045,"code":42046,"language":42047,"meta":576,"style":576},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n {\n color: 'white',\n distance: 0,\n size: 1024,\n texture: 'http://example.net/rays.png',\n },\n {\n color: 'white',\n distance: 1,\n size: 512,\n texture: 'http://example.net/circle.png',\n },\n {\n color: 'white',\n distance: 2,\n size: 512,\n texture: 'http://example.net/circle.png',\n },\n]\n","js",[618,42049,42050,42054,42058,42072,42083,42094,42110,42114,42118,42132,42142,42153,42167,42171,42175,42189,42199,42209,42223,42227],{"__ignoreMap":576},[637,42051,42052],{"class":639,"line":577},[637,42053,41927],{"class":683},[637,42055,42056],{"class":639,"line":578},[637,42057,2494],{"class":642},[637,42059,42060,42062,42064,42066,42068,42070],{"class":639,"line":708},[637,42061,24199],{"class":646},[637,42063,1240],{"class":642},[637,42065,699],{"class":642},[637,42067,2719],{"class":663},[637,42069,2463],{"class":642},[637,42071,2511],{"class":642},[637,42073,42074,42077,42079,42081],{"class":639,"line":729},[637,42075,42076],{"class":646}," distance",[637,42078,1240],{"class":642},[637,42080,2529],{"class":2524},[637,42082,2511],{"class":642},[637,42084,42085,42087,42089,42092],{"class":639,"line":739},[637,42086,2567],{"class":646},[637,42088,1240],{"class":642},[637,42090,42091],{"class":2524}," 1024",[637,42093,2511],{"class":642},[637,42095,42096,42099,42101,42103,42106,42108],{"class":639,"line":745},[637,42097,42098],{"class":646}," texture",[637,42100,1240],{"class":642},[637,42102,699],{"class":642},[637,42104,42105],{"class":663},"http://example.net/rays.png",[637,42107,2463],{"class":642},[637,42109,2511],{"class":642},[637,42111,42112],{"class":639,"line":755},[637,42113,2620],{"class":642},[637,42115,42116],{"class":639,"line":778},[637,42117,2494],{"class":642},[637,42119,42120,42122,42124,42126,42128,42130],{"class":639,"line":790},[637,42121,24199],{"class":646},[637,42123,1240],{"class":642},[637,42125,699],{"class":642},[637,42127,2719],{"class":663},[637,42129,2463],{"class":642},[637,42131,2511],{"class":642},[637,42133,42134,42136,42138,42140],{"class":639,"line":800},[637,42135,42076],{"class":646},[637,42137,1240],{"class":642},[637,42139,2584],{"class":2524},[637,42141,2511],{"class":642},[637,42143,42144,42146,42148,42151],{"class":639,"line":805},[637,42145,2567],{"class":646},[637,42147,1240],{"class":642},[637,42149,42150],{"class":2524}," 512",[637,42152,2511],{"class":642},[637,42154,42155,42157,42159,42161,42163,42165],{"class":639,"line":827},[637,42156,42098],{"class":646},[637,42158,1240],{"class":642},[637,42160,699],{"class":642},[637,42162,41949],{"class":663},[637,42164,2463],{"class":642},[637,42166,2511],{"class":642},[637,42168,42169],{"class":639,"line":631},[637,42170,2620],{"class":642},[637,42172,42173],{"class":639,"line":850},[637,42174,2494],{"class":642},[637,42176,42177,42179,42181,42183,42185,42187],{"class":639,"line":861},[637,42178,24199],{"class":646},[637,42180,1240],{"class":642},[637,42182,699],{"class":642},[637,42184,2719],{"class":663},[637,42186,2463],{"class":642},[637,42188,2511],{"class":642},[637,42190,42191,42193,42195,42197],{"class":639,"line":872},[637,42192,42076],{"class":646},[637,42194,1240],{"class":642},[637,42196,31833],{"class":2524},[637,42198,2511],{"class":642},[637,42200,42201,42203,42205,42207],{"class":639,"line":882},[637,42202,2567],{"class":646},[637,42204,1240],{"class":642},[637,42206,42150],{"class":2524},[637,42208,2511],{"class":642},[637,42210,42211,42213,42215,42217,42219,42221],{"class":639,"line":632},[637,42212,42098],{"class":646},[637,42214,1240],{"class":642},[637,42216,699],{"class":642},[637,42218,41949],{"class":663},[637,42220,2463],{"class":642},[637,42222,2511],{"class":642},[637,42224,42225],{"class":639,"line":902},[637,42226,2620],{"class":642},[637,42228,42229],{"class":639,"line":912},[637,42230,20754],{"class":683},[614,42232,42233,42234,42236],{},"When random elements are mixed with ",[618,42235,41175],{},", the final number of elements in the lensflare is determined by whichever is longer.",[614,42238,42239,42240,42242],{},"Here, ",[618,42241,41175],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[614,42244,42245],{},"Therefore, resulting lensflare will have 3 elements.",[614,42247,42248],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[626,42250,42252],{"className":42045,"code":42251,"language":42047,"meta":576,"style":576},"[\n {\n color: 'yellow', // from `elements`\n distance: 0, // from random element generator\n size: 512, // from `elements`\n texture: 'http://example.net/circle.png', // from `elements`\n },\n {\n color: 'red', // from component prop `color`\n distance: 0.5, // from `elements`\n size: 512, // from random element generator\n texture: 'http://example.net/ring.png', // from component prop `texture`\n },\n {\n color: 'red', // from component prop `color`\n distance: 2, // from random element generator\n size: 512, // from random element generator\n texture: 'http://example.net/ring.png', // from component prop `texture`\n },\n]\n",[618,42253,42254,42258,42262,42279,42292,42304,42320,42324,42328,42345,42357,42369,42387,42391,42395,42411,42423,42435,42451,42455],{"__ignoreMap":576},[637,42255,42256],{"class":639,"line":577},[637,42257,41927],{"class":683},[637,42259,42260],{"class":639,"line":578},[637,42261,2494],{"class":642},[637,42263,42264,42266,42268,42270,42272,42274,42276],{"class":639,"line":708},[637,42265,24199],{"class":646},[637,42267,1240],{"class":642},[637,42269,699],{"class":642},[637,42271,36966],{"class":663},[637,42273,2463],{"class":642},[637,42275,687],{"class":642},[637,42277,42278],{"class":1231}," // from `elements`\n",[637,42280,42281,42283,42285,42287,42289],{"class":639,"line":729},[637,42282,42076],{"class":646},[637,42284,1240],{"class":642},[637,42286,2529],{"class":2524},[637,42288,687],{"class":642},[637,42290,42291],{"class":1231}," // from random element generator\n",[637,42293,42294,42296,42298,42300,42302],{"class":639,"line":739},[637,42295,2567],{"class":646},[637,42297,1240],{"class":642},[637,42299,42150],{"class":2524},[637,42301,687],{"class":642},[637,42303,42278],{"class":1231},[637,42305,42306,42308,42310,42312,42314,42316,42318],{"class":639,"line":745},[637,42307,42098],{"class":646},[637,42309,1240],{"class":642},[637,42311,699],{"class":642},[637,42313,41949],{"class":663},[637,42315,2463],{"class":642},[637,42317,687],{"class":642},[637,42319,42278],{"class":1231},[637,42321,42322],{"class":639,"line":755},[637,42323,2620],{"class":642},[637,42325,42326],{"class":639,"line":778},[637,42327,2494],{"class":642},[637,42329,42330,42332,42334,42336,42338,42340,42342],{"class":639,"line":790},[637,42331,24199],{"class":646},[637,42333,1240],{"class":642},[637,42335,699],{"class":642},[637,42337,36849],{"class":663},[637,42339,2463],{"class":642},[637,42341,687],{"class":642},[637,42343,42344],{"class":1231}," // from component prop `color`\n",[637,42346,42347,42349,42351,42353,42355],{"class":639,"line":800},[637,42348,42076],{"class":646},[637,42350,1240],{"class":642},[637,42352,2534],{"class":2524},[637,42354,687],{"class":642},[637,42356,42278],{"class":1231},[637,42358,42359,42361,42363,42365,42367],{"class":639,"line":805},[637,42360,2567],{"class":646},[637,42362,1240],{"class":642},[637,42364,42150],{"class":2524},[637,42366,687],{"class":642},[637,42368,42291],{"class":1231},[637,42370,42371,42373,42375,42377,42380,42382,42384],{"class":639,"line":827},[637,42372,42098],{"class":646},[637,42374,1240],{"class":642},[637,42376,699],{"class":642},[637,42378,42379],{"class":663},"http://example.net/ring.png",[637,42381,2463],{"class":642},[637,42383,687],{"class":642},[637,42385,42386],{"class":1231}," // from component prop `texture`\n",[637,42388,42389],{"class":639,"line":631},[637,42390,2620],{"class":642},[637,42392,42393],{"class":639,"line":850},[637,42394,2494],{"class":642},[637,42396,42397,42399,42401,42403,42405,42407,42409],{"class":639,"line":861},[637,42398,24199],{"class":646},[637,42400,1240],{"class":642},[637,42402,699],{"class":642},[637,42404,36849],{"class":663},[637,42406,2463],{"class":642},[637,42408,687],{"class":642},[637,42410,42344],{"class":1231},[637,42412,42413,42415,42417,42419,42421],{"class":639,"line":872},[637,42414,42076],{"class":646},[637,42416,1240],{"class":642},[637,42418,31833],{"class":2524},[637,42420,687],{"class":642},[637,42422,42291],{"class":1231},[637,42424,42425,42427,42429,42431,42433],{"class":639,"line":882},[637,42426,2567],{"class":646},[637,42428,1240],{"class":642},[637,42430,42150],{"class":2524},[637,42432,687],{"class":642},[637,42434,42291],{"class":1231},[637,42436,42437,42439,42441,42443,42445,42447,42449],{"class":639,"line":632},[637,42438,42098],{"class":646},[637,42440,1240],{"class":642},[637,42442,699],{"class":642},[637,42444,42379],{"class":663},[637,42446,2463],{"class":642},[637,42448,687],{"class":642},[637,42450,42386],{"class":1231},[637,42452,42453],{"class":639,"line":902},[637,42454,2620],{"class":642},[637,42456,42457],{"class":639,"line":912},[637,42458,20754],{"class":683},[1349,42460,42461],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":42463},[42464,42465,42466,42467,42470,42471],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":41175,"depth":578,"text":41175},{"id":41192,"depth":578,"text":41192,"children":42468},[42469],{"id":41364,"depth":708,"text":41365},{"id":41417,"depth":578,"text":41208},{"id":41537,"depth":578,"text":41538,"children":42472},[42473,42474,42475,42476,42477],{"id":41559,"depth":708,"text":41560},{"id":41674,"depth":708,"text":41675},{"id":41775,"depth":708,"text":41776},{"id":41670,"depth":708,"text":41845},{"id":41898,"depth":708,"text":41899},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":357,"description":42478},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":42483,"title":361,"body":42484,"description":43107,"extension":591,"links":592,"meta":43108,"navigation":594,"path":362,"seo":43109,"stem":363,"__hash__":43110},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":501,"value":42485,"toc":43103},[42486,42491,42498,42506,42508,42936,42938,43101],[2318,42487,42488],{},[42489,42490],"light-shadow-randomized-lights",{},[614,42492,42493,42495,42496,1146],{},[618,42494,39525],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[618,42497,39027],{},[614,42499,42500,42501,1146],{},"It is based on this ",[1140,42502,42505],{"href":42503,"rel":42504},"http://drei.docs.pmnd.rs/staging/randomized-light",[1144],"Drei component",[504,42507,15],{"id":624},[626,42509,42512],{"className":628,"code":42510,"highlights":42511,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport {\n RandomizedLights,\n AccumulativeShadows,\n OrbitControls,\n Plane,\n} from \"@tresjs/cientos\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003COrbitControls />\n \u003CAccumulativeShadows :blend=\"100\" color=\"#fbb03b\" once :position-y=\"-1\">\n \u003CRandomizedLights\n :ambient=\"0.25\"\n :bias=\"0.001\"\n :count=\"8\"\n :intensity=\"Math.PI\"\n :map-size=\"1024\"\n :position=\"[5, 5, -10]\"\n :radius=\"2\"\n />\n \u003C/AccumulativeShadows>\n \u003CTresMesh cast-shadow>\n \u003CTresBoxGeometry />\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n \u003CTresMeshStandardMaterial />\n \u003C/Plane>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[729,872,882,632,902,912,2648,2657,2677],[618,42513,42514,42534,42554,42560,42568,42575,42582,42589,42603,42611,42615,42623,42634,42653,42661,42703,42711,42725,42739,42753,42767,42781,42795,42809,42813,42821,42831,42839,42857,42865,42896,42904,42912,42920,42928],{"__ignoreMap":576},[637,42515,42516,42518,42520,42522,42524,42526,42528,42530,42532],{"class":639,"line":577},[637,42517,643],{"class":642},[637,42519,647],{"class":646},[637,42521,651],{"class":650},[637,42523,654],{"class":650},[637,42525,657],{"class":642},[637,42527,660],{"class":642},[637,42529,664],{"class":663},[637,42531,660],{"class":642},[637,42533,669],{"class":642},[637,42535,42536,42538,42540,42542,42544,42546,42548,42550,42552],{"class":639,"line":578},[637,42537,677],{"class":676},[637,42539,680],{"class":642},[637,42541,715],{"class":683},[637,42543,693],{"class":642},[637,42545,696],{"class":676},[637,42547,9536],{"class":642},[637,42549,724],{"class":663},[637,42551,660],{"class":642},[637,42553,9543],{"class":642},[637,42555,42556,42558],{"class":639,"line":708},[637,42557,677],{"class":676},[637,42559,1226],{"class":642},[637,42561,42563,42566],{"class":42562,"line":729},[639,673],[637,42564,42565],{"class":683}," RandomizedLights",[637,42567,2511],{"class":642},[637,42569,42570,42573],{"class":639,"line":739},[637,42571,42572],{"class":683}," AccumulativeShadows",[637,42574,2511],{"class":642},[637,42576,42577,42580],{"class":639,"line":745},[637,42578,42579],{"class":683}," OrbitControls",[637,42581,2511],{"class":642},[637,42583,42584,42587],{"class":639,"line":755},[637,42585,42586],{"class":683}," Plane",[637,42588,2511],{"class":642},[637,42590,42591,42593,42595,42597,42599,42601],{"class":639,"line":778},[637,42592,2451],{"class":642},[637,42594,696],{"class":676},[637,42596,9536],{"class":642},[637,42598,702],{"class":663},[637,42600,660],{"class":642},[637,42602,9543],{"class":642},[637,42604,42605,42607,42609],{"class":639,"line":790},[637,42606,732],{"class":642},[637,42608,647],{"class":646},[637,42610,669],{"class":642},[637,42612,42613],{"class":639,"line":800},[637,42614,742],{"emptyLinePlaceholder":594},[637,42616,42617,42619,42621],{"class":639,"line":805},[637,42618,643],{"class":642},[637,42620,750],{"class":646},[637,42622,669],{"class":642},[637,42624,42625,42627,42629,42632],{"class":639,"line":827},[637,42626,758],{"class":642},[637,42628,761],{"class":646},[637,42630,42631],{"class":650}," shadows",[637,42633,669],{"class":642},[637,42635,42636,42638,42640,42642,42644,42646,42649,42651],{"class":639,"line":631},[637,42637,781],{"class":642},[637,42639,784],{"class":646},[637,42641,1508],{"class":650},[637,42643,657],{"class":642},[637,42645,660],{"class":642},[637,42647,42648],{"class":663},"[0, 3, 5]",[637,42650,660],{"class":642},[637,42652,787],{"class":642},[637,42654,42655,42657,42659],{"class":639,"line":850},[637,42656,781],{"class":642},[637,42658,795],{"class":646},[637,42660,787],{"class":642},[637,42662,42663,42665,42668,42670,42672,42674,42676,42678,42680,42682,42684,42686,42688,42691,42693,42695,42697,42699,42701],{"class":639,"line":861},[637,42664,781],{"class":642},[637,42666,42667],{"class":646},"AccumulativeShadows",[637,42669,27811],{"class":650},[637,42671,657],{"class":642},[637,42673,660],{"class":642},[637,42675,11190],{"class":663},[637,42677,660],{"class":642},[637,42679,2712],{"class":650},[637,42681,657],{"class":642},[637,42683,660],{"class":642},[637,42685,10174],{"class":663},[637,42687,660],{"class":642},[637,42689,42690],{"class":650}," once",[637,42692,1962],{"class":650},[637,42694,657],{"class":642},[637,42696,660],{"class":642},[637,42698,10215],{"class":663},[637,42700,660],{"class":642},[637,42702,669],{"class":642},[637,42704,42706,42708],{"class":42705,"line":872},[639,673],[637,42707,853],{"class":642},[637,42709,42710],{"class":646},"RandomizedLights\n",[637,42712,42714,42717,42719,42721,42723],{"class":42713,"line":882},[639,673],[637,42715,42716],{"class":650}," :ambient",[637,42718,657],{"class":642},[637,42720,660],{"class":642},[637,42722,13638],{"class":663},[637,42724,3154],{"class":642},[637,42726,42728,42731,42733,42735,42737],{"class":42727,"line":632},[639,673],[637,42729,42730],{"class":650}," :bias",[637,42732,657],{"class":642},[637,42734,660],{"class":642},[637,42736,5724],{"class":663},[637,42738,3154],{"class":642},[637,42740,42742,42745,42747,42749,42751],{"class":42741,"line":902},[639,673],[637,42743,42744],{"class":650}," :count",[637,42746,657],{"class":642},[637,42748,660],{"class":642},[637,42750,33738],{"class":663},[637,42752,3154],{"class":642},[637,42754,42756,42759,42761,42763,42765],{"class":42755,"line":912},[639,673],[637,42757,42758],{"class":650}," :intensity",[637,42760,657],{"class":642},[637,42762,660],{"class":642},[637,42764,11685],{"class":663},[637,42766,3154],{"class":642},[637,42768,42770,42773,42775,42777,42779],{"class":42769,"line":2648},[639,673],[637,42771,42772],{"class":650}," :map-size",[637,42774,657],{"class":642},[637,42776,660],{"class":642},[637,42778,39499],{"class":663},[637,42780,3154],{"class":642},[637,42782,42784,42786,42788,42790,42793],{"class":42783,"line":2657},[639,673],[637,42785,8026],{"class":650},[637,42787,657],{"class":642},[637,42789,660],{"class":642},[637,42791,42792],{"class":663},"[5, 5, -10]",[637,42794,3154],{"class":642},[637,42796,42798,42801,42803,42805,42807],{"class":42797,"line":2677},[639,673],[637,42799,42800],{"class":650}," :radius",[637,42802,657],{"class":642},[637,42804,660],{"class":642},[637,42806,820],{"class":663},[637,42808,3154],{"class":642},[637,42810,42811],{"class":639,"line":2686},[637,42812,8054],{"class":642},[637,42814,42815,42817,42819],{"class":639,"line":2695},[637,42816,895],{"class":642},[637,42818,42667],{"class":646},[637,42820,669],{"class":642},[637,42822,42823,42825,42827,42829],{"class":639,"line":2704},[637,42824,781],{"class":642},[637,42826,856],{"class":646},[637,42828,16388],{"class":650},[637,42830,669],{"class":642},[637,42832,42833,42835,42837],{"class":639,"line":2726},[637,42834,853],{"class":642},[637,42836,867],{"class":646},[637,42838,787],{"class":642},[637,42840,42841,42843,42845,42847,42849,42851,42853,42855],{"class":639,"line":2770},[637,42842,853],{"class":642},[637,42844,13339],{"class":646},[637,42846,2712],{"class":650},[637,42848,657],{"class":642},[637,42850,660],{"class":642},[637,42852,13348],{"class":663},[637,42854,660],{"class":642},[637,42856,787],{"class":642},[637,42858,42859,42861,42863],{"class":639,"line":2779},[637,42860,895],{"class":642},[637,42862,856],{"class":646},[637,42864,669],{"class":642},[637,42866,42867,42869,42871,42873,42875,42877,42879,42881,42884,42886,42888,42890,42892,42894],{"class":639,"line":2788},[637,42868,781],{"class":642},[637,42870,261],{"class":646},[637,42872,1508],{"class":650},[637,42874,657],{"class":642},[637,42876,660],{"class":642},[637,42878,39982],{"class":663},[637,42880,660],{"class":642},[637,42882,42883],{"class":650}," receive-shadow",[637,42885,1982],{"class":650},[637,42887,657],{"class":642},[637,42889,660],{"class":642},[637,42891,11982],{"class":663},[637,42893,660],{"class":642},[637,42895,669],{"class":642},[637,42897,42898,42900,42902],{"class":639,"line":3945},[637,42899,853],{"class":642},[637,42901,2709],{"class":646},[637,42903,787],{"class":642},[637,42905,42906,42908,42910],{"class":639,"line":3976},[637,42907,895],{"class":642},[637,42909,261],{"class":646},[637,42911,669],{"class":642},[637,42913,42914,42916,42918],{"class":639,"line":3997},[637,42915,781],{"class":642},[637,42917,9702],{"class":646},[637,42919,787],{"class":642},[637,42921,42922,42924,42926],{"class":639,"line":4016},[637,42923,905],{"class":642},[637,42925,761],{"class":646},[637,42927,669],{"class":642},[637,42929,42930,42932,42934],{"class":639,"line":4048},[637,42931,732],{"class":642},[637,42933,750],{"class":646},[637,42935,669],{"class":642},[504,42937,922],{"id":921},[927,42939,42940,42950],{},[930,42941,42942],{},[933,42943,42944,42946,42948],{},[936,42945,938],{},[936,42947,941],{},[936,42949,944],{},[946,42951,42952,42965,42979,42992,43006,43019,43033,43047,43060,43074,43088],{},[933,42953,42954,42958,42961],{},[951,42955,42956],{},[618,42957,12030],{},[951,42959,42960],{},"Number of lights",[951,42962,42963],{},[618,42964,33738],{},[933,42966,42967,42972,42975],{},[951,42968,42969],{},[618,42970,42971],{},"radius",[951,42973,42974],{},"Radius of the jiggle, higher values make softer light",[951,42976,42977],{},[618,42978,1897],{},[933,42980,42981,42985,42988],{},[951,42982,42983],{},[618,42984,2088],{},[951,42986,42987],{},"Light intensity",[951,42989,42990],{},[618,42991,11685],{},[933,42993,42994,42999,43002],{},[951,42995,42996],{},[618,42997,42998],{},"ambient",[951,43000,43001],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[951,43003,43004],{},[618,43005,1969],{},[933,43007,43008,43012,43015],{},[951,43009,43010],{},[618,43011,18647],{},[951,43013,43014],{},"If the lights cast shadows",[951,43016,43017],{},[618,43018,961],{},[933,43020,43021,43026,43029],{},[951,43022,43023],{},[618,43024,43025],{},"bias",[951,43027,43028],{},"Default shadow bias",[951,43030,43031],{},[618,43032,965],{},[933,43034,43035,43040,43043],{},[951,43036,43037],{},[618,43038,43039],{},"mapSize",[951,43041,43042],{},"Size of the lights' shadow map",[951,43044,43045],{},[618,43046,27999],{},[933,43048,43049,43053,43056],{},[951,43050,43051],{},[618,43052,16749],{},[951,43054,43055],{},"Size of the lights' shadow camera frustum",[951,43057,43058],{},[618,43059,37514],{},[933,43061,43062,43067,43070],{},[951,43063,43064],{},[618,43065,43066],{},"near",[951,43068,43069],{},"Lights' shadow camera near value",[951,43071,43072],{},[618,43073,1969],{},[933,43075,43076,43080,43083],{},[951,43077,43078],{},[618,43079,40893],{},[951,43081,43082],{},"Lights' shadow camera far value",[951,43084,43085],{},[618,43086,43087],{},"500",[933,43089,43090,43094,43097],{},[951,43091,43092],{},[618,43093,4153],{},[951,43095,43096],{},"Position",[951,43098,43099],{},[618,43100,42792],{},[1349,43102,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":43104},[43105,43106],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":361,"description":43107},"79Dz6CbGDB6whT9LqG15v15q-nHtJLggTb7-YTnIEEE",{"id":43112,"title":365,"body":43113,"description":43506,"extension":591,"links":592,"meta":43507,"navigation":594,"path":366,"seo":43508,"stem":367,"__hash__":43509},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":501,"value":43114,"toc":43502},[43115,43120,43123,43125,43449,43451,43500],[608,43116,43117],{},[43118,43119],"light-shadow-soft-shadows",{},[614,43121,43122],{},"Injects percent closer soft shadows (pcss) into THREE's shader chunk. Mounting/unmounting this component or changing its props will cause all shaders to be recompiled.",[504,43124,15],{"id":624},[626,43126,43129],{"className":628,"code":43127,"highlights":43128,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { SoftShadows, Levioso, TorusKnot, Plane } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows clear-color=\"#82DBC5\">\n \u003CLevioso :speed=\"4\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n \u003CTorusKnot cast-shadow :scale=\"0.45\">\n \u003CTresMeshStandardMaterial color=\"orange\" />\n \u003C/TorusKnot>\n \u003C/Levioso>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n \u003CTresMeshStandardMaterial />\n \u003C/Plane>\n \u003CTresDirectionalLight cast-shadow :position=\"[0, 3, 0]\" />\n \u003CTresAmbientLight :intensity=\"0.5\" />\n \u003CSoftShadows />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,632],[618,43130,43131,43151,43186,43206,43214,43218,43226,43246,43284,43304,43322,43330,43338,43368,43376,43384,43405,43423,43433,43441],{"__ignoreMap":576},[637,43132,43133,43135,43137,43139,43141,43143,43145,43147,43149],{"class":639,"line":577},[637,43134,643],{"class":642},[637,43136,647],{"class":646},[637,43138,651],{"class":650},[637,43140,654],{"class":650},[637,43142,657],{"class":642},[637,43144,660],{"class":642},[637,43146,664],{"class":663},[637,43148,660],{"class":642},[637,43150,669],{"class":642},[637,43152,43154,43156,43158,43161,43163,43165,43167,43169,43171,43174,43176,43178,43180,43182,43184],{"class":43153,"line":578},[639,673],[637,43155,677],{"class":676},[637,43157,680],{"class":642},[637,43159,43160],{"class":683}," SoftShadows",[637,43162,687],{"class":642},[637,43164,9553],{"class":683},[637,43166,687],{"class":642},[637,43168,40565],{"class":683},[637,43170,687],{"class":642},[637,43172,43173],{"class":683}," Plane",[637,43175,693],{"class":642},[637,43177,696],{"class":676},[637,43179,9536],{"class":642},[637,43181,702],{"class":663},[637,43183,660],{"class":642},[637,43185,9543],{"class":642},[637,43187,43188,43190,43192,43194,43196,43198,43200,43202,43204],{"class":639,"line":708},[637,43189,677],{"class":676},[637,43191,680],{"class":642},[637,43193,715],{"class":683},[637,43195,693],{"class":642},[637,43197,696],{"class":676},[637,43199,9536],{"class":642},[637,43201,724],{"class":663},[637,43203,660],{"class":642},[637,43205,9543],{"class":642},[637,43207,43208,43210,43212],{"class":639,"line":729},[637,43209,732],{"class":642},[637,43211,647],{"class":646},[637,43213,669],{"class":642},[637,43215,43216],{"class":639,"line":739},[637,43217,742],{"emptyLinePlaceholder":594},[637,43219,43220,43222,43224],{"class":639,"line":745},[637,43221,643],{"class":642},[637,43223,750],{"class":646},[637,43225,669],{"class":642},[637,43227,43228,43230,43232,43234,43236,43238,43240,43242,43244],{"class":639,"line":755},[637,43229,758],{"class":642},[637,43231,761],{"class":646},[637,43233,42631],{"class":650},[637,43235,764],{"class":650},[637,43237,657],{"class":642},[637,43239,660],{"class":642},[637,43241,11812],{"class":663},[637,43243,660],{"class":642},[637,43245,669],{"class":642},[637,43247,43248,43250,43252,43254,43256,43258,43260,43262,43264,43266,43268,43270,43272,43274,43276,43278,43280,43282],{"class":639,"line":778},[637,43249,781],{"class":642},[637,43251,9664],{"class":646},[637,43253,9667],{"class":650},[637,43255,657],{"class":642},[637,43257,660],{"class":642},[637,43259,9674],{"class":663},[637,43261,660],{"class":642},[637,43263,40650],{"class":650},[637,43265,657],{"class":642},[637,43267,660],{"class":642},[637,43269,40657],{"class":663},[637,43271,660],{"class":642},[637,43273,40662],{"class":650},[637,43275,657],{"class":642},[637,43277,660],{"class":642},[637,43279,40669],{"class":663},[637,43281,660],{"class":642},[637,43283,669],{"class":642},[637,43285,43286,43288,43290,43292,43294,43296,43298,43300,43302],{"class":639,"line":790},[637,43287,853],{"class":642},[637,43289,35830],{"class":646},[637,43291,16388],{"class":650},[637,43293,813],{"class":650},[637,43295,657],{"class":642},[637,43297,660],{"class":642},[637,43299,27237],{"class":663},[637,43301,660],{"class":642},[637,43303,669],{"class":642},[637,43305,43306,43308,43310,43312,43314,43316,43318,43320],{"class":639,"line":800},[637,43307,864],{"class":642},[637,43309,2709],{"class":646},[637,43311,2712],{"class":650},[637,43313,657],{"class":642},[637,43315,660],{"class":642},[637,43317,13348],{"class":663},[637,43319,660],{"class":642},[637,43321,787],{"class":642},[637,43323,43324,43326,43328],{"class":639,"line":805},[637,43325,885],{"class":642},[637,43327,35830],{"class":646},[637,43329,669],{"class":642},[637,43331,43332,43334,43336],{"class":639,"line":827},[637,43333,895],{"class":642},[637,43335,9664],{"class":646},[637,43337,669],{"class":642},[637,43339,43340,43342,43344,43346,43348,43350,43352,43354,43356,43358,43360,43362,43364,43366],{"class":639,"line":631},[637,43341,781],{"class":642},[637,43343,261],{"class":646},[637,43345,1508],{"class":650},[637,43347,657],{"class":642},[637,43349,660],{"class":642},[637,43351,39982],{"class":663},[637,43353,660],{"class":642},[637,43355,42883],{"class":650},[637,43357,1982],{"class":650},[637,43359,657],{"class":642},[637,43361,660],{"class":642},[637,43363,11982],{"class":663},[637,43365,660],{"class":642},[637,43367,669],{"class":642},[637,43369,43370,43372,43374],{"class":639,"line":850},[637,43371,853],{"class":642},[637,43373,2709],{"class":646},[637,43375,787],{"class":642},[637,43377,43378,43380,43382],{"class":639,"line":861},[637,43379,895],{"class":642},[637,43381,261],{"class":646},[637,43383,669],{"class":642},[637,43385,43386,43388,43390,43392,43394,43396,43398,43401,43403],{"class":639,"line":872},[637,43387,781],{"class":642},[637,43389,9721],{"class":646},[637,43391,16388],{"class":650},[637,43393,1508],{"class":650},[637,43395,657],{"class":642},[637,43397,660],{"class":642},[637,43399,43400],{"class":663},"[0, 3, 0]",[637,43402,660],{"class":642},[637,43404,787],{"class":642},[637,43406,43407,43409,43411,43413,43415,43417,43419,43421],{"class":639,"line":882},[637,43408,781],{"class":642},[637,43410,9702],{"class":646},[637,43412,1890],{"class":650},[637,43414,657],{"class":642},[637,43416,660],{"class":642},[637,43418,1969],{"class":663},[637,43420,660],{"class":642},[637,43422,787],{"class":642},[637,43424,43426,43428,43431],{"class":43425,"line":632},[639,673],[637,43427,781],{"class":642},[637,43429,43430],{"class":646},"SoftShadows",[637,43432,787],{"class":642},[637,43434,43435,43437,43439],{"class":639,"line":902},[637,43436,905],{"class":642},[637,43438,761],{"class":646},[637,43440,669],{"class":642},[637,43442,43443,43445,43447],{"class":639,"line":912},[637,43444,732],{"class":642},[637,43446,750],{"class":646},[637,43448,669],{"class":642},[504,43450,922],{"id":921},[927,43452,43453,43463],{},[930,43454,43455],{},[933,43456,43457,43459,43461],{},[936,43458,8110],{"align":997},[936,43460,941],{"align":997},[936,43462,944],{},[946,43464,43465,43476,43487],{},[933,43466,43467,43469,43472],{},[951,43468,16749],{"align":997},[951,43470,43471],{"align":997},"Size of the light source (the larger the softer the light)",[951,43473,43474],{},[618,43475,32295],{},[933,43477,43478,43480,43483],{},[951,43479,29622],{"align":997},[951,43481,43482],{"align":997},"Number of samples (more samples less noise but more expensive)",[951,43484,43485],{},[618,43486,37514],{},[933,43488,43489,43492,43495],{},[951,43490,43491],{"align":997},"focus",[951,43493,43494],{"align":997},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[951,43496,43497,43499],{},[618,43498,965],{}," (the beginning)",[1349,43501,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":43503},[43504,43505],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":365,"description":43506},"WFVp3-okOdmyoKfWIXSoGlyt-AidaFEgkQYSqpSVti0",[43511,44569,45117,45372,45697,46295,47259,47650,48047,49784,50435],{"id":43512,"title":375,"body":43513,"description":44565,"extension":591,"links":592,"meta":44566,"navigation":594,"path":376,"seo":44567,"stem":377,"__hash__":44568},"docs/2.api/8.staging/1.environment.md",{"type":501,"value":43514,"toc":44552},[43515,43520,43530,43536,43538,43716,43723,43749,43754,43758,43765,43960,43964,43970,43993,43997,44015,44051,44064,44078,44095,44128,44132,44135,44220,44224,44230,44310,44315,44326,44328,44540,44543,44549],[608,43516,43517],{},[43518,43519],"staging-environment",{},[614,43521,43522,43523,43526,43527,1146],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[618,43524,43525],{},"scene.environment",", and optionally ",[618,43528,43529],{},"scene.background",[614,43531,43532,43533,43535],{},"It uses the composable ",[1140,43534,379],{"href":380}," under the hood to load the cubemap.",[504,43537,15],{"id":624},[626,43539,43541],{"className":628,"code":43540,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CEnvironment\n :files=\"[\n '/px.jpg',\n '/nx.jpg',\n '/py.jpg',\n '/ny.jpg',\n '/pz.jpg',\n '/nz.jpg',\n ]\"\n />\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,43542,43543,43563,43581,43599,43607,43611,43619,43627,43635,43641,43651,43656,43661,43666,43671,43676,43681,43688,43692,43700,43708],{"__ignoreMap":576},[637,43544,43545,43547,43549,43551,43553,43555,43557,43559,43561],{"class":639,"line":577},[637,43546,643],{"class":642},[637,43548,647],{"class":646},[637,43550,651],{"class":650},[637,43552,654],{"class":650},[637,43554,657],{"class":642},[637,43556,660],{"class":642},[637,43558,664],{"class":663},[637,43560,660],{"class":642},[637,43562,669],{"class":642},[637,43564,43565,43567,43569,43571,43573,43575,43577,43579],{"class":639,"line":578},[637,43566,677],{"class":676},[637,43568,680],{"class":642},[637,43570,715],{"class":683},[637,43572,693],{"class":642},[637,43574,696],{"class":676},[637,43576,699],{"class":642},[637,43578,724],{"class":663},[637,43580,705],{"class":642},[637,43582,43583,43585,43587,43589,43591,43593,43595,43597],{"class":639,"line":708},[637,43584,677],{"class":676},[637,43586,680],{"class":642},[637,43588,20963],{"class":683},[637,43590,693],{"class":642},[637,43592,696],{"class":676},[637,43594,699],{"class":642},[637,43596,702],{"class":663},[637,43598,705],{"class":642},[637,43600,43601,43603,43605],{"class":639,"line":729},[637,43602,732],{"class":642},[637,43604,647],{"class":646},[637,43606,669],{"class":642},[637,43608,43609],{"class":639,"line":739},[637,43610,742],{"emptyLinePlaceholder":594},[637,43612,43613,43615,43617],{"class":639,"line":745},[637,43614,643],{"class":642},[637,43616,750],{"class":646},[637,43618,669],{"class":642},[637,43620,43621,43623,43625],{"class":639,"line":755},[637,43622,758],{"class":642},[637,43624,761],{"class":646},[637,43626,669],{"class":642},[637,43628,43629,43631,43633],{"class":639,"line":778},[637,43630,781],{"class":642},[637,43632,21668],{"class":646},[637,43634,669],{"class":642},[637,43636,43637,43639],{"class":639,"line":790},[637,43638,853],{"class":642},[637,43640,25247],{"class":646},[637,43642,43643,43645,43647,43649],{"class":639,"line":800},[637,43644,25257],{"class":650},[637,43646,657],{"class":642},[637,43648,660],{"class":642},[637,43650,41927],{"class":663},[637,43652,43653],{"class":639,"line":805},[637,43654,43655],{"class":663}," '/px.jpg',\n",[637,43657,43658],{"class":639,"line":827},[637,43659,43660],{"class":663}," '/nx.jpg',\n",[637,43662,43663],{"class":639,"line":631},[637,43664,43665],{"class":663}," '/py.jpg',\n",[637,43667,43668],{"class":639,"line":850},[637,43669,43670],{"class":663}," '/ny.jpg',\n",[637,43672,43673],{"class":639,"line":861},[637,43674,43675],{"class":663}," '/pz.jpg',\n",[637,43677,43678],{"class":639,"line":872},[637,43679,43680],{"class":663}," '/nz.jpg',\n",[637,43682,43683,43686],{"class":639,"line":882},[637,43684,43685],{"class":663}," ]",[637,43687,3154],{"class":642},[637,43689,43690],{"class":639,"line":632},[637,43691,8054],{"class":642},[637,43693,43694,43696,43698],{"class":639,"line":902},[637,43695,895],{"class":642},[637,43697,21668],{"class":646},[637,43699,669],{"class":642},[637,43701,43702,43704,43706],{"class":639,"line":912},[637,43703,905],{"class":642},[637,43705,761],{"class":646},[637,43707,669],{"class":642},[637,43709,43710,43712,43714],{"class":639,"line":2648},[637,43711,732],{"class":642},[637,43713,750],{"class":646},[637,43715,669],{"class":642},[614,43717,43718,43719,43722],{},"You can also pass the ",[618,43720,43721],{},".hdr"," file directly:",[626,43724,43726],{"className":628,"code":43725,"language":633,"meta":576,"style":576},"\u003CSuspense>\n \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[618,43727,43728,43736,43741],{"__ignoreMap":576},[637,43729,43730,43732,43734],{"class":639,"line":577},[637,43731,643],{"class":642},[637,43733,21668],{"class":646},[637,43735,669],{"class":642},[637,43737,43738],{"class":639,"line":578},[637,43739,43740],{"class":683}," \u003CEnvironment files=\"/sunset.hdr\" />\n",[637,43742,43743,43745,43747],{"class":639,"line":708},[637,43744,732],{"class":642},[637,43746,21668],{"class":646},[637,43748,669],{"class":642},[614,43750,43751],{},[9481,43752],{"alt":375,"src":43753},"/cientos/envmaps.png",[504,43755,43757],{"id":43756},"texture-reference","Texture reference",[614,43759,19711,43760,1700,43762,41686],{},[618,43761,5915],{},[618,43763,43764],{},"\u003CEnvironment />",[626,43766,43769],{"className":628,"code":43767,"highlights":43768,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Environment } from '@tresjs/cientos'\n\nconst environmentRef = shallowRef()\n\nwatch(environmentRef, texture => {\n console.log(texture)\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CEnvironment ref=\"environmentRef\" />\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :env-map=\"envMap\" />\n \u003C/TresMesh>\n\u003C/template>\n",[729,745,790,850,882],[618,43770,43771,43791,43809,43813,43827,43831,43847,43861,43867,43876,43880,43888,43907,43915,43924,43943,43951],{"__ignoreMap":576},[637,43772,43773,43775,43777,43779,43781,43783,43785,43787,43789],{"class":639,"line":577},[637,43774,643],{"class":642},[637,43776,647],{"class":646},[637,43778,651],{"class":650},[637,43780,654],{"class":650},[637,43782,657],{"class":642},[637,43784,660],{"class":642},[637,43786,664],{"class":663},[637,43788,660],{"class":642},[637,43790,669],{"class":642},[637,43792,43793,43795,43797,43799,43801,43803,43805,43807],{"class":639,"line":578},[637,43794,677],{"class":676},[637,43796,680],{"class":642},[637,43798,20963],{"class":683},[637,43800,693],{"class":642},[637,43802,696],{"class":676},[637,43804,699],{"class":642},[637,43806,702],{"class":663},[637,43808,705],{"class":642},[637,43810,43811],{"class":639,"line":708},[637,43812,742],{"emptyLinePlaceholder":594},[637,43814,43816,43818,43821,43823,43825],{"class":43815,"line":729},[639,673],[637,43817,2438],{"class":650},[637,43819,43820],{"class":683}," environmentRef ",[637,43822,657],{"class":642},[637,43824,3521],{"class":2457},[637,43826,6556],{"class":683},[637,43828,43829],{"class":639,"line":739},[637,43830,742],{"emptyLinePlaceholder":594},[637,43832,43834,43836,43839,43841,43843,43845],{"class":43833,"line":745},[639,673],[637,43835,12210],{"class":2457},[637,43837,43838],{"class":683},"(environmentRef",[637,43840,687],{"class":642},[637,43842,20083],{"class":6859},[637,43844,3700],{"class":650},[637,43846,1226],{"class":642},[637,43848,43849,43851,43853,43855,43857,43859],{"class":639,"line":755},[637,43850,6875],{"class":683},[637,43852,1146],{"class":642},[637,43854,6880],{"class":2457},[637,43856,2460],{"class":646},[637,43858,2740],{"class":683},[637,43860,2471],{"class":646},[637,43862,43863,43865],{"class":639,"line":778},[637,43864,2451],{"class":642},[637,43866,2471],{"class":683},[637,43868,43870,43872,43874],{"class":43869,"line":790},[639,673],[637,43871,732],{"class":642},[637,43873,647],{"class":646},[637,43875,669],{"class":642},[637,43877,43878],{"class":639,"line":800},[637,43879,742],{"emptyLinePlaceholder":594},[637,43881,43882,43884,43886],{"class":639,"line":805},[637,43883,643],{"class":642},[637,43885,750],{"class":646},[637,43887,669],{"class":642},[637,43889,43890,43892,43894,43896,43898,43900,43903,43905],{"class":639,"line":827},[637,43891,758],{"class":642},[637,43893,375],{"class":646},[637,43895,3895],{"class":650},[637,43897,657],{"class":642},[637,43899,660],{"class":642},[637,43901,43902],{"class":663},"environmentRef",[637,43904,660],{"class":642},[637,43906,787],{"class":642},[637,43908,43909,43911,43913],{"class":639,"line":631},[637,43910,758],{"class":642},[637,43912,856],{"class":646},[637,43914,669],{"class":642},[637,43916,43918,43920,43922],{"class":43917,"line":850},[639,673],[637,43919,781],{"class":642},[637,43921,3981],{"class":646},[637,43923,787],{"class":642},[637,43925,43926,43928,43930,43933,43935,43937,43939,43941],{"class":639,"line":861},[637,43927,781],{"class":642},[637,43929,2709],{"class":646},[637,43931,43932],{"class":650}," :env-map",[637,43934,657],{"class":642},[637,43936,660],{"class":642},[637,43938,29674],{"class":663},[637,43940,660],{"class":642},[637,43942,787],{"class":642},[637,43944,43945,43947,43949],{"class":639,"line":872},[637,43946,905],{"class":642},[637,43948,856],{"class":646},[637,43950,669],{"class":642},[637,43952,43954,43956,43958],{"class":43953,"line":882},[639,673],[637,43955,732],{"class":642},[637,43957,750],{"class":646},[637,43959,669],{"class":642},[504,43961,43963],{"id":43962},"presets","Presets",[614,43965,43966,43967,2050],{},"You can use one of the available presets by passing the ",[618,43968,43969],{},"preset",[626,43971,43973],{"className":628,"code":43972,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"city\" />\n",[618,43974,43975],{"__ignoreMap":576},[637,43976,43977,43979,43981,43983,43985,43987,43989,43991],{"class":639,"line":577},[637,43978,643],{"class":642},[637,43980,375],{"class":646},[637,43982,21680],{"class":650},[637,43984,657],{"class":642},[637,43986,660],{"class":642},[637,43988,29106],{"class":663},[637,43990,660],{"class":642},[637,43992,787],{"class":642},[4074,43994,43996],{"id":43995},"preset-quality","Preset quality",[614,43998,43999,44000,44007,44008,44011,44012,2050],{},"Presets are served from the ",[1140,44001,44004],{"href":44002,"rel":44003},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1144],[618,44005,44006],{},"Tresjs/assets"," CDN at ",[1692,44009,44010],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[618,44013,44014],{},"quality",[626,44016,44018],{"className":628,"code":44017,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[618,44019,44020],{"__ignoreMap":576},[637,44021,44022,44024,44026,44028,44030,44032,44035,44037,44040,44042,44044,44047,44049],{"class":639,"line":577},[637,44023,643],{"class":642},[637,44025,375],{"class":646},[637,44027,21680],{"class":650},[637,44029,657],{"class":642},[637,44031,660],{"class":642},[637,44033,44034],{"class":663},"sunset",[637,44036,660],{"class":642},[637,44038,44039],{"class":650}," quality",[637,44041,657],{"class":642},[637,44043,660],{"class":642},[637,44045,44046],{"class":663},"4k",[637,44048,660],{"class":642},[637,44050,787],{"class":642},[614,44052,44053,44054,44057,44058,1695,44061,1146],{},"Available tiers: ",[618,44055,44056],{},"'1k'"," (default), ",[618,44059,44060],{},"'2k'",[618,44062,44063],{},"'4k'",[24717,44065,44066],{},[614,44067,44068,44069,44072,44073,3359,44075,44077],{},"Higher tiers are significantly larger: ",[1692,44070,44071],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[618,44074,44060],{},[618,44076,44063],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[614,44079,2799,44080,44082,44083,44085,44086,3359,44089,44091,44092,44094],{},[618,44081,44014],{}," prop only applies when ",[618,44084,43969],{}," is set — it is ignored when loading via ",[618,44087,44088],{},"files",[618,44090,18098],{},". An unsupported value falls back to ",[618,44093,44056],{}," with a console warning.",[24717,44096,44097],{},[614,44098,44099,44108,44109,44111,44112,44115,44116,44118,44119,44121,44122,44124,44125,44127],{},[1692,44100,44101,44103,44104,44107],{},[618,44102,44014],{}," has no visible effect when you pass ",[1140,44105,44106],{"href":384},"Lightformers"," (or any children)."," With children present, ",[618,44110,28164],{}," bakes the environment and background into a ",[618,44113,44114],{},"WebGLCubeRenderTarget"," sized by the ",[618,44117,27990],{}," prop (default ",[618,44120,28669],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[618,44123,44014],{},". For a sharp high-res background, either omit the children or raise ",[618,44126,27990],{}," (a cube big enough to match 4K is expensive to render each frame).",[504,44129,44131],{"id":44130},"environment-rotation","Environment Rotation",[614,44133,44134],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[626,44136,44138],{"className":628,"code":44137,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CEnvironment\n preset=\"sunset\"\n :background=\"true\"\n :background-rotation=\"[0, Math.PI / 2, 0]\"\n :environment-rotation=\"[0, Math.PI / 4, 0]\"\n />\n\u003C/template>\n",[618,44139,44140,44148,44154,44167,44180,44194,44208,44212],{"__ignoreMap":576},[637,44141,44142,44144,44146],{"class":639,"line":577},[637,44143,643],{"class":642},[637,44145,750],{"class":646},[637,44147,669],{"class":642},[637,44149,44150,44152],{"class":639,"line":578},[637,44151,758],{"class":642},[637,44153,25247],{"class":646},[637,44155,44156,44159,44161,44163,44165],{"class":639,"line":708},[637,44157,44158],{"class":650}," preset",[637,44160,657],{"class":642},[637,44162,660],{"class":642},[637,44164,44034],{"class":663},[637,44166,3154],{"class":642},[637,44168,44169,44172,44174,44176,44178],{"class":639,"line":729},[637,44170,44171],{"class":650}," :background",[637,44173,657],{"class":642},[637,44175,660],{"class":642},[637,44177,961],{"class":663},[637,44179,3154],{"class":642},[637,44181,44182,44185,44187,44189,44192],{"class":639,"line":739},[637,44183,44184],{"class":650}," :background-rotation",[637,44186,657],{"class":642},[637,44188,660],{"class":642},[637,44190,44191],{"class":663},"[0, Math.PI / 2, 0]",[637,44193,3154],{"class":642},[637,44195,44196,44199,44201,44203,44206],{"class":639,"line":745},[637,44197,44198],{"class":650}," :environment-rotation",[637,44200,657],{"class":642},[637,44202,660],{"class":642},[637,44204,44205],{"class":663},"[0, Math.PI / 4, 0]",[637,44207,3154],{"class":642},[637,44209,44210],{"class":639,"line":755},[637,44211,14016],{"class":642},[637,44213,44214,44216,44218],{"class":639,"line":778},[637,44215,732],{"class":642},[637,44217,750],{"class":646},[637,44219,669],{"class":642},[4074,44221,44223],{"id":44222},"syncing-rotations","Syncing Rotations",[614,44225,44226,44227,2050],{},"You can sync the environment rotation with the background rotation using the ",[618,44228,44229],{},"syncMaterials",[626,44231,44233],{"className":628,"code":44232,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CEnvironment\n preset=\"sunset\"\n :background=\"true\"\n :sync-materials=\"true\"\n :background-rotation=\"[0, Math.PI / 2, 0]\"\n />\n\u003C/template>\n",[618,44234,44235,44243,44249,44261,44273,44286,44298,44302],{"__ignoreMap":576},[637,44236,44237,44239,44241],{"class":639,"line":577},[637,44238,643],{"class":642},[637,44240,750],{"class":646},[637,44242,669],{"class":642},[637,44244,44245,44247],{"class":639,"line":578},[637,44246,758],{"class":642},[637,44248,25247],{"class":646},[637,44250,44251,44253,44255,44257,44259],{"class":639,"line":708},[637,44252,44158],{"class":650},[637,44254,657],{"class":642},[637,44256,660],{"class":642},[637,44258,44034],{"class":663},[637,44260,3154],{"class":642},[637,44262,44263,44265,44267,44269,44271],{"class":639,"line":729},[637,44264,44171],{"class":650},[637,44266,657],{"class":642},[637,44268,660],{"class":642},[637,44270,961],{"class":663},[637,44272,3154],{"class":642},[637,44274,44275,44278,44280,44282,44284],{"class":639,"line":739},[637,44276,44277],{"class":650}," :sync-materials",[637,44279,657],{"class":642},[637,44281,660],{"class":642},[637,44283,961],{"class":663},[637,44285,3154],{"class":642},[637,44287,44288,44290,44292,44294,44296],{"class":639,"line":745},[637,44289,44184],{"class":650},[637,44291,657],{"class":642},[637,44293,660],{"class":642},[637,44295,44191],{"class":663},[637,44297,3154],{"class":642},[637,44299,44300],{"class":639,"line":755},[637,44301,14016],{"class":642},[637,44303,44304,44306,44308],{"class":639,"line":778},[637,44305,732],{"class":642},[637,44307,750],{"class":646},[637,44309,669],{"class":642},[614,44311,4323,44312,44314],{},[618,44313,44229],{}," is enabled:",[2236,44316,44317,44320,44323],{},[2239,44318,44319],{},"The environment rotation will automatically match the background rotation",[2239,44321,44322],{},"All materials in the scene will update to reflect the new rotation",[2239,44324,44325],{},"This ensures visual consistency between the background and environment reflections",[504,44327,922],{"id":921},[927,44329,44330,44340],{},[930,44331,44332],{},[933,44333,44334,44336,44338],{},[936,44335,938],{"align":997},[936,44337,941],{"align":997},[936,44339,944],{},[946,44341,44342,44355,44368,44383,44394,44407,44432,44443,44454,44465,44476,44488,44500,44515,44529],{},[933,44343,44344,44348,44351],{},[951,44345,44346],{"align":997},[618,44347,44088],{},[951,44349,44350],{"align":997},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[951,44352,44353],{},[618,44354,1167],{},[933,44356,44357,44361,44364],{},[951,44358,44359],{"align":997},[618,44360,18098],{},[951,44362,44363],{"align":997},"Path to the environment map files",[951,44365,44366],{},[618,44367,1167],{},[933,44369,44370,44374,44379],{},[951,44371,44372],{"align":997},[618,44373,29584],{},[951,44375,958,44376,44378],{"align":997},[618,44377,961],{},", the environment map will be used as the scene background",[951,44380,44381],{},[618,44382,971],{},[933,44384,44385,44389,44392],{},[951,44386,44387],{"align":997},[618,44388,28206],{},[951,44390,44391],{"align":997},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[951,44393,965],{},[933,44395,44396,44400,44403],{},[951,44397,44398],{"align":997},[618,44399,43969],{},[951,44401,44402],{"align":997},"Preset environment map",[951,44404,44405],{},[618,44406,1167],{},[933,44408,44409,44413,44428],{},[951,44410,44411],{"align":997},[618,44412,44014],{},[951,44414,44415,44416,14061,44419,14061,44422,44424,44425,44427],{"align":997},"Resolution variant of the preset HDR (",[618,44417,44418],{},"1k",[618,44420,44421],{},"2k",[618,44423,44046],{},"). Only applies when ",[618,44426,43969],{}," is set",[951,44429,44430],{},[618,44431,44418],{},[933,44433,44434,44438,44441],{},[951,44435,44436],{"align":997},[618,44437,27990],{},[951,44439,44440],{"align":997},"The resolution of the WebGLCubeRenderTarget",[951,44442,28669],{},[933,44444,44445,44449,44452],{},[951,44446,44447],{"align":997},[618,44448,43066],{},[951,44450,44451],{"align":997},"The near of the CubeCamera",[951,44453,1897],{},[933,44455,44456,44460,44463],{},[951,44457,44458],{"align":997},[618,44459,40893],{},[951,44461,44462],{"align":997},"The far of the CubeCamera",[951,44464,9307],{},[933,44466,44467,44471,44474],{},[951,44468,44469],{"align":997},[618,44470,39364],{},[951,44472,44473],{"align":997},"The frames of the cubeCamera.update",[951,44475,13535],{},[933,44477,44478,44483,44486],{},[951,44479,44480],{"align":997},[618,44481,44482],{},"backgroundIntensity",[951,44484,44485],{"align":997},"Intensity of the background",[951,44487,1897],{},[933,44489,44490,44495,44498],{},[951,44491,44492],{"align":997},[618,44493,44494],{},"environmentIntensity",[951,44496,44497],{"align":997},"Intensity of the environment",[951,44499,1897],{},[933,44501,44502,44507,44510],{},[951,44503,44504],{"align":997},[618,44505,44506],{},"backgroundRotation",[951,44508,44509],{"align":997},"Rotation of the background (in radians)",[951,44511,44512],{},[637,44513,44514],{},"0, 0, 0",[933,44516,44517,44522,44525],{},[951,44518,44519],{"align":997},[618,44520,44521],{},"environmentRotation",[951,44523,44524],{"align":997},"Rotation of the environment (in radians)",[951,44526,44527],{},[637,44528,44514],{},[933,44530,44531,44535,44538],{},[951,44532,44533],{"align":997},[618,44534,44229],{},[951,44536,44537],{"align":997},"If true, environment rotation will sync with background rotation",[951,44539,971],{},[4074,44541,43963],{"id":44542},"presets-1",[626,44544,44547],{"className":44545,"code":44546,"language":30340},[30338],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[618,44548,44546],{"__ignoreMap":576},[1349,44550,44551],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":44553},[44554,44555,44556,44559,44562],{"id":624,"depth":578,"text":15},{"id":43756,"depth":578,"text":43757},{"id":43962,"depth":578,"text":43963,"children":44557},[44558],{"id":43995,"depth":708,"text":43996},{"id":44130,"depth":578,"text":44131,"children":44560},[44561],{"id":44222,"depth":708,"text":44223},{"id":921,"depth":578,"text":922,"children":44563},[44564],{"id":44542,"depth":708,"text":43963},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":375,"description":44565},"sBTJfXaKb0fv3DCKG2HMzo9vcpdBTvsCQGOHngKtjPs",{"id":44570,"title":379,"body":44571,"description":45113,"extension":591,"links":592,"meta":45114,"navigation":594,"path":380,"seo":45115,"stem":381,"__hash__":45116},"docs/2.api/8.staging/2.use-environment.md",{"type":501,"value":44572,"toc":45109},[44573,44577,44586,44595,44597,44602,44774,44779,44812,44817,44891,44893,45107],[2318,44574,44575],{},[43518,44576],{},[614,44578,44579,44581,44582,43526,44584,1146],{},[618,44580,379],{}," composable that automatically sets up a global cubemap, which affects the default ",[618,44583,43525],{},[618,44585,43529],{},[614,44587,44588,44589,44594],{},"It uses the ",[1140,44590,44593],{"href":44591,"rel":44592},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1144],"CubeTextureLoader"," to load the cubemap",[504,44596,15],{"id":624},[3222,44598,44599],{},[614,44600,44601],{},"UseEnvironment needs to be wrapped by a Suspense component",[626,44603,44605],{"className":628,"code":44604,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useEnvironment } from '@tresjs/cientos'\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})\n\u003C/script>\n",[618,44606,44607,44627,44646,44650,44666,44675,44687,44698,44709,44720,44731,44742,44748,44760,44766],{"__ignoreMap":576},[637,44608,44609,44611,44613,44615,44617,44619,44621,44623,44625],{"class":639,"line":577},[637,44610,643],{"class":642},[637,44612,647],{"class":646},[637,44614,651],{"class":650},[637,44616,654],{"class":650},[637,44618,657],{"class":642},[637,44620,660],{"class":642},[637,44622,664],{"class":663},[637,44624,660],{"class":642},[637,44626,669],{"class":642},[637,44628,44629,44631,44633,44636,44638,44640,44642,44644],{"class":639,"line":578},[637,44630,677],{"class":676},[637,44632,680],{"class":642},[637,44634,44635],{"class":683}," useEnvironment",[637,44637,693],{"class":642},[637,44639,696],{"class":676},[637,44641,699],{"class":642},[637,44643,702],{"class":663},[637,44645,705],{"class":642},[637,44647,44648],{"class":639,"line":708},[637,44649,742],{"emptyLinePlaceholder":594},[637,44651,44652,44654,44656,44658,44660,44662,44664],{"class":639,"line":729},[637,44653,2438],{"class":650},[637,44655,2448],{"class":683},[637,44657,657],{"class":642},[637,44659,24999],{"class":676},[637,44661,44635],{"class":2457},[637,44663,2460],{"class":683},[637,44665,3283],{"class":642},[637,44667,44668,44671,44673],{"class":639,"line":739},[637,44669,44670],{"class":646}," files",[637,44672,1240],{"class":642},[637,44674,20718],{"class":683},[637,44676,44677,44680,44683,44685],{"class":639,"line":745},[637,44678,44679],{"class":642}," '",[637,44681,44682],{"class":663},"/textures/environmentMaps/0/px.jpg",[637,44684,2463],{"class":642},[637,44686,2511],{"class":642},[637,44688,44689,44691,44694,44696],{"class":639,"line":755},[637,44690,44679],{"class":642},[637,44692,44693],{"class":663},"/textures/environmentMaps/0/nx.jpg",[637,44695,2463],{"class":642},[637,44697,2511],{"class":642},[637,44699,44700,44702,44705,44707],{"class":639,"line":778},[637,44701,44679],{"class":642},[637,44703,44704],{"class":663},"/textures/environmentMaps/0/py.jpg",[637,44706,2463],{"class":642},[637,44708,2511],{"class":642},[637,44710,44711,44713,44716,44718],{"class":639,"line":790},[637,44712,44679],{"class":642},[637,44714,44715],{"class":663},"/textures/environmentMaps/0/ny.jpg",[637,44717,2463],{"class":642},[637,44719,2511],{"class":642},[637,44721,44722,44724,44727,44729],{"class":639,"line":800},[637,44723,44679],{"class":642},[637,44725,44726],{"class":663},"/textures/environmentMaps/0/pz.jpg",[637,44728,2463],{"class":642},[637,44730,2511],{"class":642},[637,44732,44733,44735,44738,44740],{"class":639,"line":805},[637,44734,44679],{"class":642},[637,44736,44737],{"class":663},"/textures/environmentMaps/0/nz.jpg",[637,44739,2463],{"class":642},[637,44741,2511],{"class":642},[637,44743,44744,44746],{"class":639,"line":827},[637,44745,41984],{"class":683},[637,44747,2511],{"class":642},[637,44749,44750,44753,44755,44758],{"class":639,"line":631},[637,44751,44752],{"class":646}," path",[637,44754,1240],{"class":642},[637,44756,44757],{"class":642}," ''",[637,44759,2511],{"class":642},[637,44761,44762,44764],{"class":639,"line":850},[637,44763,2451],{"class":642},[637,44765,2471],{"class":683},[637,44767,44768,44770,44772],{"class":639,"line":861},[637,44769,732],{"class":642},[637,44771,647],{"class":646},[637,44773,669],{"class":642},[614,44775,25006,44776,44778],{},[618,44777,2740],{}," in your scene:",[626,44780,44783],{"className":628,"code":44781,"highlights":44782,"language":633,"meta":576,"style":576},"\u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[708],[618,44784,44785,44793,44798,44804],{"__ignoreMap":576},[637,44786,44787,44789,44791],{"class":639,"line":577},[637,44788,643],{"class":642},[637,44790,856],{"class":646},[637,44792,669],{"class":642},[637,44794,44795],{"class":639,"line":578},[637,44796,44797],{"class":683}," \u003CTresSphereGeometry />\n",[637,44799,44801],{"class":44800,"line":708},[639,673],[637,44802,44803],{"class":683}," \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[637,44805,44806,44808,44810],{"class":639,"line":729},[637,44807,732],{"class":642},[637,44809,856],{"class":646},[637,44811,669],{"class":642},[614,44813,43718,44814,44816],{},[618,44815,43721],{}," file directly",[626,44818,44820],{"className":1208,"code":44819,"language":664,"meta":576,"style":576},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n files: '/sunset.hdr',\n path: '',\n})\n",[618,44821,44822,44840,44844,44860,44875,44885],{"__ignoreMap":576},[637,44823,44824,44826,44828,44830,44832,44834,44836,44838],{"class":639,"line":577},[637,44825,677],{"class":676},[637,44827,680],{"class":642},[637,44829,44635],{"class":683},[637,44831,693],{"class":642},[637,44833,696],{"class":676},[637,44835,699],{"class":642},[637,44837,702],{"class":663},[637,44839,705],{"class":642},[637,44841,44842],{"class":639,"line":578},[637,44843,742],{"emptyLinePlaceholder":594},[637,44845,44846,44848,44850,44852,44854,44856,44858],{"class":639,"line":708},[637,44847,2438],{"class":650},[637,44849,2448],{"class":683},[637,44851,657],{"class":642},[637,44853,24999],{"class":676},[637,44855,44635],{"class":2457},[637,44857,2460],{"class":683},[637,44859,3283],{"class":642},[637,44861,44862,44864,44866,44868,44871,44873],{"class":639,"line":729},[637,44863,44670],{"class":646},[637,44865,1240],{"class":642},[637,44867,699],{"class":642},[637,44869,44870],{"class":663},"/sunset.hdr",[637,44872,2463],{"class":642},[637,44874,2511],{"class":642},[637,44876,44877,44879,44881,44883],{"class":639,"line":739},[637,44878,44752],{"class":646},[637,44880,1240],{"class":642},[637,44882,44757],{"class":642},[637,44884,2511],{"class":642},[637,44886,44887,44889],{"class":639,"line":745},[637,44888,2451],{"class":642},[637,44890,2471],{"class":683},[504,44892,14044],{"id":17555},[927,44894,44895,44907],{},[930,44896,44897],{},[933,44898,44899,44901,44903,44905],{},[936,44900,8110],{"align":997},[936,44902,5990],{},[936,44904,944],{},[936,44906,941],{},[946,44908,44909,44927,44945,44964,44981,44998,45019,45036,45053,45071,45088],{},[933,44910,44911,44915,44920,44924],{},[951,44912,44913],{"align":997},[1692,44914,44088],{},[951,44916,44917],{},[618,44918,44919],{},"string | string[]",[951,44921,44922],{},[618,44923,1167],{},[951,44925,44926],{},"Array of 6 urls to images, one for each side of the CubeTexture, or a single HDR file.",[933,44928,44929,44933,44937,44942],{},[951,44930,44931],{"align":997},[1692,44932,18098],{},[951,44934,44935],{},[618,44936,3595],{},[951,44938,44939],{},[618,44940,44941],{},"''",[951,44943,44944],{},"Path to the environment map files.",[933,44946,44947,44951,44955,44959],{},[951,44948,44949],{"align":997},[1692,44950,29584],{},[951,44952,44953],{},[618,44954,17582],{},[951,44956,44957],{},[618,44958,971],{},[951,44960,958,44961,44963],{},[618,44962,961],{}," the texture will be used as the scene background.",[933,44965,44966,44970,44974,44978],{},[951,44967,44968],{"align":997},[1692,44969,28206],{},[951,44971,44972],{},[618,44973,5375],{},[951,44975,44976],{},[618,44977,965],{},[951,44979,44980],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[933,44982,44983,44987,44991,44995],{},[951,44984,44985],{"align":997},[1692,44986,43969],{},[951,44988,44989],{},[618,44990,3595],{},[951,44992,44993],{},[618,44994,1167],{},[951,44996,44997],{},"Preset environment map.",[933,44999,45000,45004,45009,45013],{},[951,45001,45002],{"align":997},[1692,45003,44014],{},[951,45005,45006],{},[618,45007,45008],{},"'1k' | '2k' | '4k'",[951,45010,45011],{},[618,45012,44056],{},[951,45014,45015,45016,45018],{},"Resolution variant of the preset HDR. Only applies when ",[618,45017,43969],{}," is set. 4K ≈ 30–60MB.",[933,45020,45021,45025,45029,45033],{},[951,45022,45023],{"align":997},[1692,45024,44482],{},[951,45026,45027],{},[618,45028,5375],{},[951,45030,45031],{},[618,45032,1897],{},[951,45034,45035],{},"Intensity of the background.",[933,45037,45038,45042,45046,45050],{},[951,45039,45040],{"align":997},[1692,45041,44494],{},[951,45043,45044],{},[618,45045,5375],{},[951,45047,45048],{},[618,45049,1897],{},[951,45051,45052],{},"Intensity of the environment.",[933,45054,45055,45059,45064,45068],{},[951,45056,45057],{"align":997},[1692,45058,44506],{},[951,45060,45061],{},[618,45062,45063],{},"VectorFlexibleParams",[951,45065,45066],{},[618,45067,9644],{},[951,45069,45070],{},"Rotation of the background.",[933,45072,45073,45077,45081,45085],{},[951,45074,45075],{"align":997},[1692,45076,44521],{},[951,45078,45079],{},[618,45080,45063],{},[951,45082,45083],{},[618,45084,9644],{},[951,45086,45087],{},"Rotation of the environment.",[933,45089,45090,45094,45098,45102],{},[951,45091,45092],{"align":997},[1692,45093,44229],{},[951,45095,45096],{},[618,45097,17582],{},[951,45099,45100],{},[618,45101,971],{},[951,45103,958,45104,45106],{},[618,45105,961],{},", environment rotation is synced with background rotation.",[1349,45108,26386],{},{"title":576,"searchDepth":577,"depth":578,"links":45110},[45111,45112],{"id":624,"depth":578,"text":15},{"id":17555,"depth":578,"text":14044},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":379,"description":45113},"ZUeFnaIuGDPEnqm9cVvBGZT5NrkVpzuVfHMtjcAi2fg",{"id":45118,"title":383,"body":45119,"description":45368,"extension":591,"links":592,"meta":45369,"navigation":594,"path":384,"seo":45370,"stem":385,"__hash__":45371},"docs/2.api/8.staging/3.lightformer.md",{"type":501,"value":45120,"toc":45365},[45121,45126,45132,45286,45288,45291,45363],[608,45122,45123],{},[45124,45125],"staging-lightformer",{},[614,45127,45128,45129,45131],{},"You can incorporate ",[618,45130,383],{}," into the environment just like a slot.",[626,45133,45135],{"className":628,"code":45134,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { Enviroment, LightFormer } from '@tres/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CEnvironment>\n \u003CLightformer :intensity=\"0.75\" :position=\"[0, 5, -9]\" />\n \u003CLightformer from=\"ring\" :rotation-y=\"-Math.PI / 2\" :scale=\"[10, 10, 1]\" />\n \u003C/Environment>\n\u003C/template>\n",[618,45136,45137,45147,45172,45180,45184,45192,45200,45229,45270,45278],{"__ignoreMap":576},[637,45138,45139,45141,45143,45145],{"class":639,"line":577},[637,45140,643],{"class":642},[637,45142,647],{"class":646},[637,45144,651],{"class":650},[637,45146,669],{"class":642},[637,45148,45149,45151,45153,45156,45158,45161,45163,45165,45167,45170],{"class":639,"line":578},[637,45150,677],{"class":676},[637,45152,680],{"class":642},[637,45154,45155],{"class":683}," Enviroment",[637,45157,687],{"class":642},[637,45159,45160],{"class":683}," LightFormer",[637,45162,693],{"class":642},[637,45164,696],{"class":676},[637,45166,699],{"class":642},[637,45168,45169],{"class":663},"@tres/cientos",[637,45171,705],{"class":642},[637,45173,45174,45176,45178],{"class":639,"line":708},[637,45175,732],{"class":642},[637,45177,647],{"class":646},[637,45179,669],{"class":642},[637,45181,45182],{"class":639,"line":729},[637,45183,742],{"emptyLinePlaceholder":594},[637,45185,45186,45188,45190],{"class":639,"line":739},[637,45187,643],{"class":642},[637,45189,750],{"class":646},[637,45191,669],{"class":642},[637,45193,45194,45196,45198],{"class":639,"line":745},[637,45195,758],{"class":642},[637,45197,375],{"class":646},[637,45199,669],{"class":642},[637,45201,45202,45204,45206,45208,45210,45212,45214,45216,45218,45220,45222,45225,45227],{"class":639,"line":755},[637,45203,781],{"class":642},[637,45205,383],{"class":646},[637,45207,1890],{"class":650},[637,45209,657],{"class":642},[637,45211,660],{"class":642},[637,45213,2574],{"class":663},[637,45215,660],{"class":642},[637,45217,1508],{"class":650},[637,45219,657],{"class":642},[637,45221,660],{"class":642},[637,45223,45224],{"class":663},"[0, 5, -9]",[637,45226,660],{"class":642},[637,45228,787],{"class":642},[637,45230,45231,45233,45235,45237,45239,45241,45244,45246,45249,45251,45253,45255,45257,45259,45261,45263,45266,45268],{"class":639,"line":778},[637,45232,781],{"class":642},[637,45234,383],{"class":646},[637,45236,696],{"class":650},[637,45238,657],{"class":642},[637,45240,660],{"class":642},[637,45242,45243],{"class":663},"ring",[637,45245,660],{"class":642},[637,45247,45248],{"class":650}," :rotation-y",[637,45250,657],{"class":642},[637,45252,660],{"class":642},[637,45254,39996],{"class":663},[637,45256,660],{"class":642},[637,45258,813],{"class":650},[637,45260,657],{"class":642},[637,45262,660],{"class":642},[637,45264,45265],{"class":663},"[10, 10, 1]",[637,45267,660],{"class":642},[637,45269,787],{"class":642},[637,45271,45272,45274,45276],{"class":639,"line":790},[637,45273,905],{"class":642},[637,45275,375],{"class":646},[637,45277,669],{"class":642},[637,45279,45280,45282,45284],{"class":639,"line":800},[637,45281,732],{"class":642},[637,45283,750],{"class":646},[637,45285,669],{"class":642},[4074,45287,922],{"id":921},[614,45289,45290],{},"Lightformer inherits from mesh, and its extension parameters include:",[927,45292,45293,45303],{},[930,45294,45295],{},[933,45296,45297,45299,45301],{},[936,45298,938],{"align":997},[936,45300,941],{"align":997},[936,45302,944],{},[946,45304,45305,45326,45337,45351],{},[933,45306,45307,45311,45322],{},[951,45308,45309],{"align":997},[618,45310,8454],{},[951,45312,45313,1695,45316,1695,45318,45321],{"align":997},[618,45314,45315],{},"circle",[618,45317,45243],{},[618,45319,45320],{},"rect",", or any other Mesh type",[951,45323,45324],{},[618,45325,45320],{},[933,45327,45328,45332,45335],{},[951,45329,45330],{"align":997},[618,45331,2088],{},[951,45333,45334],{"align":997},"The intensity of the light",[951,45336,1897],{},[933,45338,45339,45343,45346],{},[951,45340,45341],{"align":997},[618,45342,7568],{},[951,45344,45345],{"align":997},"The color of the light",[951,45347,45348],{},[618,45349,45350],{},"0xffffff",[933,45352,45353,45357,45360],{},[951,45354,45355],{"align":997},[618,45356,30367],{},[951,45358,45359],{"align":997},"The arguments of the Geometry",[951,45361,45362],{},"When using other geometries, set the corresponding arguments",[1349,45364,14395],{},{"title":576,"searchDepth":577,"depth":578,"links":45366},[45367],{"id":921,"depth":708,"text":922},"Addon for environment component that provided you custom lights.",{},{"title":383,"description":45368},"C3TURFuGqCgHegN3UPXdHHYIKEDi-0ACd5UIMvQeHcQ",{"id":45373,"title":387,"body":45374,"description":45693,"extension":591,"links":592,"meta":45694,"navigation":594,"path":388,"seo":45695,"stem":389,"__hash__":45696},"docs/2.api/8.staging/backdrop.md",{"type":501,"value":45375,"toc":45689},[45376,45381,45389,45391,45552,45555,45632,45634,45687],[608,45377,45378],{},[45379,45380],"staging-backdrop",{},[614,45382,2799,45383,9489,45385,45388],{},[618,45384,7338],{},[618,45386,45387],{},"\u003CBackdrop />"," component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.",[504,45390,15],{"id":624},[626,45392,45395],{"className":628,"code":45393,"highlights":45394,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Backdrop } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CBackdrop />\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,45396,45397,45417,45435,45455,45463,45467,45475,45483,45501,45510,45518,45536,45544],{"__ignoreMap":576},[637,45398,45399,45401,45403,45405,45407,45409,45411,45413,45415],{"class":639,"line":577},[637,45400,643],{"class":642},[637,45402,647],{"class":646},[637,45404,651],{"class":650},[637,45406,654],{"class":650},[637,45408,657],{"class":642},[637,45410,660],{"class":642},[637,45412,664],{"class":663},[637,45414,660],{"class":642},[637,45416,669],{"class":642},[637,45418,45419,45421,45423,45425,45427,45429,45431,45433],{"class":639,"line":578},[637,45420,677],{"class":676},[637,45422,680],{"class":642},[637,45424,715],{"class":683},[637,45426,693],{"class":642},[637,45428,696],{"class":676},[637,45430,699],{"class":642},[637,45432,724],{"class":663},[637,45434,705],{"class":642},[637,45436,45438,45440,45442,45445,45447,45449,45451,45453],{"class":45437,"line":708},[639,673],[637,45439,677],{"class":676},[637,45441,680],{"class":642},[637,45443,45444],{"class":683}," Backdrop",[637,45446,693],{"class":642},[637,45448,696],{"class":676},[637,45450,699],{"class":642},[637,45452,702],{"class":663},[637,45454,705],{"class":642},[637,45456,45457,45459,45461],{"class":639,"line":729},[637,45458,732],{"class":642},[637,45460,647],{"class":646},[637,45462,669],{"class":642},[637,45464,45465],{"class":639,"line":739},[637,45466,742],{"emptyLinePlaceholder":594},[637,45468,45469,45471,45473],{"class":639,"line":745},[637,45470,643],{"class":642},[637,45472,750],{"class":646},[637,45474,669],{"class":642},[637,45476,45477,45479,45481],{"class":639,"line":755},[637,45478,758],{"class":642},[637,45480,761],{"class":646},[637,45482,669],{"class":642},[637,45484,45485,45487,45489,45491,45493,45495,45497,45499],{"class":639,"line":778},[637,45486,781],{"class":642},[637,45488,784],{"class":646},[637,45490,1508],{"class":650},[637,45492,657],{"class":642},[637,45494,660],{"class":642},[637,45496,42648],{"class":663},[637,45498,660],{"class":642},[637,45500,787],{"class":642},[637,45502,45504,45506,45508],{"class":45503,"line":790},[639,673],[637,45505,781],{"class":642},[637,45507,387],{"class":646},[637,45509,787],{"class":642},[637,45511,45512,45514,45516],{"class":639,"line":800},[637,45513,781],{"class":642},[637,45515,9702],{"class":646},[637,45517,787],{"class":642},[637,45519,45520,45522,45524,45526,45528,45530,45532,45534],{"class":639,"line":805},[637,45521,781],{"class":642},[637,45523,9721],{"class":646},[637,45525,1508],{"class":650},[637,45527,657],{"class":642},[637,45529,660],{"class":642},[637,45531,13383],{"class":663},[637,45533,660],{"class":642},[637,45535,787],{"class":642},[637,45537,45538,45540,45542],{"class":639,"line":827},[637,45539,905],{"class":642},[637,45541,761],{"class":646},[637,45543,669],{"class":642},[637,45545,45546,45548,45550],{"class":639,"line":631},[637,45547,732],{"class":642},[637,45549,750],{"class":646},[637,45551,669],{"class":642},[614,45553,45554],{},"Or with a custom material",[626,45556,45560],{"className":45557,"code":45558,"language":45559,"meta":576,"style":576},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBackdrop :floor=\"1.5\" :segments=\"20\" receive-shadow>\n \u003CTresMeshPhysicalMaterial color=\"orange\" :roughness=\"1\" />\n\u003C/Backdrop>\n","html",[618,45561,45562,45594,45624],{"__ignoreMap":576},[637,45563,45564,45566,45568,45571,45573,45575,45577,45579,45582,45584,45586,45588,45590,45592],{"class":639,"line":577},[637,45565,643],{"class":642},[637,45567,387],{"class":646},[637,45569,45570],{"class":650}," :floor",[637,45572,657],{"class":642},[637,45574,660],{"class":642},[637,45576,29415],{"class":663},[637,45578,660],{"class":642},[637,45580,45581],{"class":650}," :segments",[637,45583,657],{"class":642},[637,45585,660],{"class":642},[637,45587,30810],{"class":663},[637,45589,660],{"class":642},[637,45591,42883],{"class":650},[637,45593,669],{"class":642},[637,45595,45596,45598,45601,45603,45605,45607,45609,45611,45614,45616,45618,45620,45622],{"class":639,"line":578},[637,45597,758],{"class":642},[637,45599,45600],{"class":646},"TresMeshPhysicalMaterial",[637,45602,2712],{"class":650},[637,45604,657],{"class":642},[637,45606,660],{"class":642},[637,45608,13348],{"class":663},[637,45610,660],{"class":642},[637,45612,45613],{"class":650}," :roughness",[637,45615,657],{"class":642},[637,45617,660],{"class":642},[637,45619,1897],{"class":663},[637,45621,660],{"class":642},[637,45623,787],{"class":642},[637,45625,45626,45628,45630],{"class":639,"line":708},[637,45627,732],{"class":642},[637,45629,387],{"class":646},[637,45631,669],{"class":642},[504,45633,922],{"id":921},[927,45635,45636,45648],{},[930,45637,45638],{},[933,45639,45640,45642,45644,45646],{},[936,45641,8110],{"align":997},[936,45643,5990],{"align":997},[936,45645,944],{},[936,45647,18605],{},[946,45649,45650,45663,45675],{},[933,45651,45652,45654,45656,45660],{},[951,45653,8513],{"align":997},[951,45655,5375],{"align":997},[951,45657,45658],{},[618,45659,13638],{},[951,45661,45662],{},"No",[933,45664,45665,45667,45669,45673],{},[951,45666,30800],{"align":997},[951,45668,5375],{"align":997},[951,45670,45671],{},[618,45672,30810],{},[951,45674,45662],{},[933,45676,45677,45679,45681,45685],{},[951,45678,18665],{"align":997},[951,45680,17582],{"align":997},[951,45682,45683],{},[618,45684,971],{},[951,45686,45662],{},[1349,45688,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":45690},[45691,45692],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"A curved plane studio backdrop for presentational purposes.",{},{"title":387,"description":45693},"H0D0nxhSUngurmG2CpnQ3kEOUzOJchm3LVO_M0_yMnI",{"id":45698,"title":391,"body":45699,"description":46291,"extension":591,"links":592,"meta":46292,"navigation":594,"path":392,"seo":46293,"stem":393,"__hash__":46294},"docs/2.api/8.staging/ocean.md",{"type":501,"value":45700,"toc":46283},[45701,45706,45721,45726,45728,45861,45865,45874,45877,45892,45896,45899,46060,46062,46068,46281],[608,45702,45703],{},[45704,45705],"staging-ocean",{},[614,45707,45708,45711,45712,1146],{},[618,45709,45710],{},"\u003COcean />"," is a wrapper for the ",[1140,45713,45716,45717,45720],{"href":45714,"rel":45715},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1144],"Three.js ",[618,45718,45719],{},"Water"," add-on",[3222,45722,45723],{},[614,45724,45725],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[504,45727,15],{"id":624},[626,45729,45732],{"className":628,"code":45730,"highlights":45731,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003COcean />\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,45733,45734,45754,45772,45792,45800,45804,45812,45820,45828,45837,45845,45853],{"__ignoreMap":576},[637,45735,45736,45738,45740,45742,45744,45746,45748,45750,45752],{"class":639,"line":577},[637,45737,643],{"class":642},[637,45739,647],{"class":646},[637,45741,651],{"class":650},[637,45743,654],{"class":650},[637,45745,657],{"class":642},[637,45747,660],{"class":642},[637,45749,664],{"class":663},[637,45751,660],{"class":642},[637,45753,669],{"class":642},[637,45755,45756,45758,45760,45762,45764,45766,45768,45770],{"class":639,"line":578},[637,45757,677],{"class":676},[637,45759,680],{"class":642},[637,45761,715],{"class":683},[637,45763,693],{"class":642},[637,45765,696],{"class":676},[637,45767,699],{"class":642},[637,45769,724],{"class":663},[637,45771,705],{"class":642},[637,45773,45775,45777,45779,45782,45784,45786,45788,45790],{"class":45774,"line":708},[639,673],[637,45776,677],{"class":676},[637,45778,680],{"class":642},[637,45780,45781],{"class":683}," Ocean",[637,45783,693],{"class":642},[637,45785,696],{"class":676},[637,45787,699],{"class":642},[637,45789,702],{"class":663},[637,45791,705],{"class":642},[637,45793,45794,45796,45798],{"class":639,"line":729},[637,45795,732],{"class":642},[637,45797,647],{"class":646},[637,45799,669],{"class":642},[637,45801,45802],{"class":639,"line":739},[637,45803,742],{"emptyLinePlaceholder":594},[637,45805,45806,45808,45810],{"class":639,"line":745},[637,45807,643],{"class":642},[637,45809,750],{"class":646},[637,45811,669],{"class":642},[637,45813,45814,45816,45818],{"class":639,"line":755},[637,45815,758],{"class":642},[637,45817,761],{"class":646},[637,45819,669],{"class":642},[637,45821,45822,45824,45826],{"class":639,"line":778},[637,45823,781],{"class":642},[637,45825,21668],{"class":646},[637,45827,669],{"class":642},[637,45829,45831,45833,45835],{"class":45830,"line":790},[639,673],[637,45832,853],{"class":642},[637,45834,391],{"class":646},[637,45836,787],{"class":642},[637,45838,45839,45841,45843],{"class":639,"line":800},[637,45840,895],{"class":642},[637,45842,21668],{"class":646},[637,45844,669],{"class":642},[637,45846,45847,45849,45851],{"class":639,"line":805},[637,45848,905],{"class":642},[637,45850,761],{"class":646},[637,45852,669],{"class":642},[637,45854,45855,45857,45859],{"class":639,"line":827},[637,45856,732],{"class":642},[637,45858,750],{"class":646},[637,45860,669],{"class":642},[4074,45862,45864],{"id":45863},"sky","SKY",[614,45866,45867,45869,45870,45873],{},[618,45868,45710],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[618,45871,45872],{},"\u003CSky />"," is not required for making this component work.)",[4074,45875,45876],{"id":40463},"Fog",[614,45878,2799,45879,45881,45882,5634,45886,45891],{},[618,45880,45710],{}," component also reacts when there's ",[1140,45883,45876],{"href":45884,"rel":45885},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1144],[1140,45887,45890],{"href":45888,"rel":45889},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1144],"FogExp2"," in your scene.",[504,45893,45895],{"id":45894},"custom-geometry","Custom Geometry",[614,45897,45898],{},"You can use custom geometry by adding it as a child.",[626,45900,45903],{"className":628,"code":45901,"highlights":45902,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003COcean>\n \u003CTresCircleGeometry :args=\"[50, 16]\" />\n \u003C/Ocean>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805],[618,45904,45905,45925,45943,45962,45970,45974,45982,45990,45998,46007,46027,46036,46044,46052],{"__ignoreMap":576},[637,45906,45907,45909,45911,45913,45915,45917,45919,45921,45923],{"class":639,"line":577},[637,45908,643],{"class":642},[637,45910,647],{"class":646},[637,45912,651],{"class":650},[637,45914,654],{"class":650},[637,45916,657],{"class":642},[637,45918,660],{"class":642},[637,45920,664],{"class":663},[637,45922,660],{"class":642},[637,45924,669],{"class":642},[637,45926,45927,45929,45931,45933,45935,45937,45939,45941],{"class":639,"line":578},[637,45928,677],{"class":676},[637,45930,680],{"class":642},[637,45932,715],{"class":683},[637,45934,693],{"class":642},[637,45936,696],{"class":676},[637,45938,699],{"class":642},[637,45940,724],{"class":663},[637,45942,705],{"class":642},[637,45944,45946,45948,45950,45952,45954,45956,45958,45960],{"class":45945,"line":708},[639,673],[637,45947,677],{"class":676},[637,45949,680],{"class":642},[637,45951,45781],{"class":683},[637,45953,693],{"class":642},[637,45955,696],{"class":676},[637,45957,699],{"class":642},[637,45959,702],{"class":663},[637,45961,705],{"class":642},[637,45963,45964,45966,45968],{"class":639,"line":729},[637,45965,732],{"class":642},[637,45967,647],{"class":646},[637,45969,669],{"class":642},[637,45971,45972],{"class":639,"line":739},[637,45973,742],{"emptyLinePlaceholder":594},[637,45975,45976,45978,45980],{"class":639,"line":745},[637,45977,643],{"class":642},[637,45979,750],{"class":646},[637,45981,669],{"class":642},[637,45983,45984,45986,45988],{"class":639,"line":755},[637,45985,758],{"class":642},[637,45987,761],{"class":646},[637,45989,669],{"class":642},[637,45991,45992,45994,45996],{"class":639,"line":778},[637,45993,781],{"class":642},[637,45995,21668],{"class":646},[637,45997,669],{"class":642},[637,45999,46001,46003,46005],{"class":46000,"line":790},[639,673],[637,46002,853],{"class":642},[637,46004,391],{"class":646},[637,46006,669],{"class":642},[637,46008,46010,46012,46014,46016,46018,46020,46023,46025],{"class":46009,"line":800},[639,673],[637,46011,864],{"class":642},[637,46013,10156],{"class":646},[637,46015,1982],{"class":650},[637,46017,657],{"class":642},[637,46019,660],{"class":642},[637,46021,46022],{"class":663},"[50, 16]",[637,46024,660],{"class":642},[637,46026,787],{"class":642},[637,46028,46030,46032,46034],{"class":46029,"line":805},[639,673],[637,46031,885],{"class":642},[637,46033,391],{"class":646},[637,46035,669],{"class":642},[637,46037,46038,46040,46042],{"class":639,"line":827},[637,46039,895],{"class":642},[637,46041,21668],{"class":646},[637,46043,669],{"class":642},[637,46045,46046,46048,46050],{"class":639,"line":631},[637,46047,905],{"class":642},[637,46049,761],{"class":646},[637,46051,669],{"class":642},[637,46053,46054,46056,46058],{"class":639,"line":850},[637,46055,732],{"class":642},[637,46057,750],{"class":646},[637,46059,669],{"class":642},[504,46061,922],{"id":921},[46063,46064,46065],"prose-tip",{},[614,46066,46067],{},"Props marked with ✅ support reactive changes at runtime. Props marked with ❌ are only read at construction time and cannot be changed after the component is mounted.",[927,46069,46070,46083],{},[930,46071,46072],{},[933,46073,46074,46076,46078,46080],{},[936,46075,938],{"align":997},[936,46077,941],{"align":997},[936,46079,944],{},[936,46081,46082],{"align":29249},"Reactive",[946,46084,46085,46102,46118,46137,46154,46171,46188,46204,46219,46235,46251,46266],{},[933,46086,46087,46092,46095,46099],{},[951,46088,46089],{"align":997},[1692,46090,46091],{},"textureWidth",[951,46093,46094],{"align":997},"Width of the mirror texture",[951,46096,46097],{},[618,46098,27999],{},[951,46100,46101],{"align":29249},"❌",[933,46103,46104,46109,46112,46116],{},[951,46105,46106],{"align":997},[1692,46107,46108],{},"textureHeight",[951,46110,46111],{"align":997},"Height of the mirror texture",[951,46113,46114],{},[618,46115,27999],{},[951,46117,46101],{"align":29249},[933,46119,46120,46125,46128,46135],{},[951,46121,46122],{"align":997},[1692,46123,46124],{},"waterNormals",[951,46126,46127],{"align":997},"URL of the water normal texture",[951,46129,46130],{},[1140,46131,46134],{"href":46132,"rel":46133},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1144],"Water_1_M_Normal.jpg",[951,46136,46101],{"align":29249},[933,46138,46139,46144,46147,46152],{},[951,46140,46141],{"align":997},[1692,46142,46143],{},"sunDirection",[951,46145,46146],{"align":997},"Sun direction to be reflected on the water",[951,46148,46149],{},[618,46150,46151],{},"Vector3(0,0,0)",[951,46153,46101],{"align":29249},[933,46155,46156,46161,46164,46168],{},[951,46157,46158],{"align":997},[1692,46159,46160],{},"sunColor",[951,46162,46163],{"align":997},"Sun color to be reflected on the water",[951,46165,46166],{},[618,46167,45350],{},[951,46169,46170],{"align":29249},"✅",[933,46172,46173,46178,46181,46186],{},[951,46174,46175],{"align":997},[1692,46176,46177],{},"waterColor",[951,46179,46180],{"align":997},"Water color",[951,46182,46183],{},[618,46184,46185],{},"0x001e0f",[951,46187,46170],{"align":29249},[933,46189,46190,46194,46197,46202],{},[951,46191,46192],{"align":997},[1692,46193,29367],{},[951,46195,46196],{"align":997},"Distortion scale on reflected objects",[951,46198,46199],{},[618,46200,46201],{},"3.7",[951,46203,46170],{"align":29249},[933,46205,46206,46210,46213,46217],{},[951,46207,46208],{"align":997},[1692,46209,16749],{},[951,46211,46212],{"align":997},"Size of the water normals",[951,46214,46215],{},[618,46216,1897],{},[951,46218,46170],{"align":29249},[933,46220,46221,46226,46229,46233],{},[951,46222,46223],{"align":997},[1692,46224,46225],{},"clipBias",[951,46227,46228],{"align":997},"Clip bias for the render target",[951,46230,46231],{},[618,46232,13804],{},[951,46234,46101],{"align":29249},[933,46236,46237,46242,46245,46249],{},[951,46238,46239],{"align":997},[1692,46240,46241],{},"alpha",[951,46243,46244],{"align":997},"Alpha transparency of the water",[951,46246,46247],{},[618,46248,13682],{},[951,46250,46170],{"align":29249},[933,46252,46253,46257,46260,46264],{},[951,46254,46255],{"align":997},[1692,46256,27410],{},[951,46258,46259],{"align":997},"Which side of the mesh renders the water",[951,46261,46262],{},[618,46263,27423],{},[951,46265,46101],{"align":29249},[933,46267,46268,46272,46275,46279],{},[951,46269,46270],{"align":997},[1692,46271,9802],{},[951,46273,46274],{"align":997},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[951,46276,46277],{},[618,46278,1897],{},[951,46280,46170],{"align":29249},[1349,46282,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":46284},[46285,46289,46290],{"id":624,"depth":578,"text":15,"children":46286},[46287,46288],{"id":45863,"depth":708,"text":45864},{"id":40463,"depth":708,"text":45876},{"id":45894,"depth":578,"text":45895},{"id":921,"depth":578,"text":922},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":391,"description":46291},"5q-r3e4Wze0nFZnJd16ECdI8wU7cxHU35-r6Z0qCmhU",{"id":46296,"title":395,"body":46297,"description":47255,"extension":591,"links":592,"meta":47256,"navigation":594,"path":396,"seo":47257,"stem":397,"__hash__":47258},"docs/2.api/8.staging/precipitation.md",{"type":501,"value":46298,"toc":47247},[46299,46304,46310,46312,46318,46461,46465,46468,46657,46661,46664,46849,46853,46856,47070,47073,47078,47080,47245],[608,46300,46301],{},[46302,46303],"staging-precipitation",{},[614,46305,46306,46309],{},[618,46307,46308],{},"\u003CPrecipitation />"," is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.",[504,46311,15],{"id":624},[614,46313,46314,46315,46317],{},"You can use ",[618,46316,46308],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[626,46319,46322],{"className":628,"code":46320,"highlights":46321,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CPrecipitation />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,46323,46324,46344,46362,46382,46390,46394,46402,46410,46428,46437,46445,46453],{"__ignoreMap":576},[637,46325,46326,46328,46330,46332,46334,46336,46338,46340,46342],{"class":639,"line":577},[637,46327,643],{"class":642},[637,46329,647],{"class":646},[637,46331,651],{"class":650},[637,46333,654],{"class":650},[637,46335,657],{"class":642},[637,46337,660],{"class":642},[637,46339,664],{"class":663},[637,46341,660],{"class":642},[637,46343,669],{"class":642},[637,46345,46346,46348,46350,46352,46354,46356,46358,46360],{"class":639,"line":578},[637,46347,677],{"class":676},[637,46349,680],{"class":642},[637,46351,715],{"class":683},[637,46353,693],{"class":642},[637,46355,696],{"class":676},[637,46357,699],{"class":642},[637,46359,724],{"class":663},[637,46361,705],{"class":642},[637,46363,46365,46367,46369,46372,46374,46376,46378,46380],{"class":46364,"line":708},[639,673],[637,46366,677],{"class":676},[637,46368,680],{"class":642},[637,46370,46371],{"class":683}," Precipitation",[637,46373,693],{"class":642},[637,46375,696],{"class":676},[637,46377,699],{"class":642},[637,46379,702],{"class":663},[637,46381,705],{"class":642},[637,46383,46384,46386,46388],{"class":639,"line":729},[637,46385,732],{"class":642},[637,46387,647],{"class":646},[637,46389,669],{"class":642},[637,46391,46392],{"class":639,"line":739},[637,46393,742],{"emptyLinePlaceholder":594},[637,46395,46396,46398,46400],{"class":639,"line":745},[637,46397,643],{"class":642},[637,46399,750],{"class":646},[637,46401,669],{"class":642},[637,46403,46404,46406,46408],{"class":639,"line":755},[637,46405,758],{"class":642},[637,46407,761],{"class":646},[637,46409,669],{"class":642},[637,46411,46412,46414,46416,46418,46420,46422,46424,46426],{"class":639,"line":778},[637,46413,781],{"class":642},[637,46415,784],{"class":646},[637,46417,1508],{"class":650},[637,46419,657],{"class":642},[637,46421,660],{"class":642},[637,46423,42648],{"class":663},[637,46425,660],{"class":642},[637,46427,787],{"class":642},[637,46429,46431,46433,46435],{"class":46430,"line":790},[639,673],[637,46432,781],{"class":642},[637,46434,395],{"class":646},[637,46436,787],{"class":642},[637,46438,46439,46441,46443],{"class":639,"line":800},[637,46440,781],{"class":642},[637,46442,9702],{"class":646},[637,46444,787],{"class":642},[637,46446,46447,46449,46451],{"class":639,"line":805},[637,46448,905],{"class":642},[637,46450,761],{"class":646},[637,46452,669],{"class":642},[637,46454,46455,46457,46459],{"class":639,"line":827},[637,46456,732],{"class":642},[637,46458,750],{"class":646},[637,46460,669],{"class":642},[4074,46462,46464],{"id":46463},"rain","Rain",[614,46466,46467],{},"By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.",[626,46469,46472],{"className":628,"code":46470,"highlights":46471,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CPrecipitation\n :count=\"2000\"\n :speed=\"0.3\"\n :randomness=\"0\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631],[618,46473,46474,46494,46512,46531,46539,46543,46551,46559,46577,46585,46600,46614,46628,46633,46641,46649],{"__ignoreMap":576},[637,46475,46476,46478,46480,46482,46484,46486,46488,46490,46492],{"class":639,"line":577},[637,46477,643],{"class":642},[637,46479,647],{"class":646},[637,46481,651],{"class":650},[637,46483,654],{"class":650},[637,46485,657],{"class":642},[637,46487,660],{"class":642},[637,46489,664],{"class":663},[637,46491,660],{"class":642},[637,46493,669],{"class":642},[637,46495,46496,46498,46500,46502,46504,46506,46508,46510],{"class":639,"line":578},[637,46497,677],{"class":676},[637,46499,680],{"class":642},[637,46501,715],{"class":683},[637,46503,693],{"class":642},[637,46505,696],{"class":676},[637,46507,699],{"class":642},[637,46509,724],{"class":663},[637,46511,705],{"class":642},[637,46513,46515,46517,46519,46521,46523,46525,46527,46529],{"class":46514,"line":708},[639,673],[637,46516,677],{"class":676},[637,46518,680],{"class":642},[637,46520,46371],{"class":683},[637,46522,693],{"class":642},[637,46524,696],{"class":676},[637,46526,699],{"class":642},[637,46528,702],{"class":663},[637,46530,705],{"class":642},[637,46532,46533,46535,46537],{"class":639,"line":729},[637,46534,732],{"class":642},[637,46536,647],{"class":646},[637,46538,669],{"class":642},[637,46540,46541],{"class":639,"line":739},[637,46542,742],{"emptyLinePlaceholder":594},[637,46544,46545,46547,46549],{"class":639,"line":745},[637,46546,643],{"class":642},[637,46548,750],{"class":646},[637,46550,669],{"class":642},[637,46552,46553,46555,46557],{"class":639,"line":755},[637,46554,758],{"class":642},[637,46556,761],{"class":646},[637,46558,669],{"class":642},[637,46560,46561,46563,46565,46567,46569,46571,46573,46575],{"class":639,"line":778},[637,46562,781],{"class":642},[637,46564,784],{"class":646},[637,46566,1508],{"class":650},[637,46568,657],{"class":642},[637,46570,660],{"class":642},[637,46572,42648],{"class":663},[637,46574,660],{"class":642},[637,46576,787],{"class":642},[637,46578,46580,46582],{"class":46579,"line":790},[639,673],[637,46581,781],{"class":642},[637,46583,46584],{"class":646},"Precipitation\n",[637,46586,46588,46591,46593,46595,46598],{"class":46587,"line":800},[639,673],[637,46589,46590],{"class":650}," :count",[637,46592,657],{"class":642},[637,46594,660],{"class":642},[637,46596,46597],{"class":663},"2000",[637,46599,3154],{"class":642},[637,46601,46603,46606,46608,46610,46612],{"class":46602,"line":805},[639,673],[637,46604,46605],{"class":650}," :speed",[637,46607,657],{"class":642},[637,46609,660],{"class":642},[637,46611,39188],{"class":663},[637,46613,3154],{"class":642},[637,46615,46617,46620,46622,46624,46626],{"class":46616,"line":827},[639,673],[637,46618,46619],{"class":650}," :randomness",[637,46621,657],{"class":642},[637,46623,660],{"class":642},[637,46625,965],{"class":663},[637,46627,3154],{"class":642},[637,46629,46631],{"class":46630,"line":631},[639,673],[637,46632,17292],{"class":642},[637,46634,46635,46637,46639],{"class":639,"line":850},[637,46636,781],{"class":642},[637,46638,9702],{"class":646},[637,46640,787],{"class":642},[637,46642,46643,46645,46647],{"class":639,"line":861},[637,46644,905],{"class":642},[637,46646,761],{"class":646},[637,46648,669],{"class":642},[637,46650,46651,46653,46655],{"class":639,"line":872},[637,46652,732],{"class":642},[637,46654,750],{"class":646},[637,46656,669],{"class":642},[4074,46658,46660],{"id":46659},"storm","Storm",[614,46662,46663],{},"A storm effect? Easy just increase the randomness.",[626,46665,46668],{"className":628,"code":46666,"highlights":46667,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CPrecipitation\n :count=\"3000\"\n :speed=\"0.5\"\n :randomness=\"1.5\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631],[618,46669,46670,46690,46708,46727,46735,46739,46747,46755,46773,46780,46794,46807,46820,46825,46833,46841],{"__ignoreMap":576},[637,46671,46672,46674,46676,46678,46680,46682,46684,46686,46688],{"class":639,"line":577},[637,46673,643],{"class":642},[637,46675,647],{"class":646},[637,46677,651],{"class":650},[637,46679,654],{"class":650},[637,46681,657],{"class":642},[637,46683,660],{"class":642},[637,46685,664],{"class":663},[637,46687,660],{"class":642},[637,46689,669],{"class":642},[637,46691,46692,46694,46696,46698,46700,46702,46704,46706],{"class":639,"line":578},[637,46693,677],{"class":676},[637,46695,680],{"class":642},[637,46697,715],{"class":683},[637,46699,693],{"class":642},[637,46701,696],{"class":676},[637,46703,699],{"class":642},[637,46705,724],{"class":663},[637,46707,705],{"class":642},[637,46709,46711,46713,46715,46717,46719,46721,46723,46725],{"class":46710,"line":708},[639,673],[637,46712,677],{"class":676},[637,46714,680],{"class":642},[637,46716,46371],{"class":683},[637,46718,693],{"class":642},[637,46720,696],{"class":676},[637,46722,699],{"class":642},[637,46724,702],{"class":663},[637,46726,705],{"class":642},[637,46728,46729,46731,46733],{"class":639,"line":729},[637,46730,732],{"class":642},[637,46732,647],{"class":646},[637,46734,669],{"class":642},[637,46736,46737],{"class":639,"line":739},[637,46738,742],{"emptyLinePlaceholder":594},[637,46740,46741,46743,46745],{"class":639,"line":745},[637,46742,643],{"class":642},[637,46744,750],{"class":646},[637,46746,669],{"class":642},[637,46748,46749,46751,46753],{"class":639,"line":755},[637,46750,758],{"class":642},[637,46752,761],{"class":646},[637,46754,669],{"class":642},[637,46756,46757,46759,46761,46763,46765,46767,46769,46771],{"class":639,"line":778},[637,46758,781],{"class":642},[637,46760,784],{"class":646},[637,46762,1508],{"class":650},[637,46764,657],{"class":642},[637,46766,660],{"class":642},[637,46768,42648],{"class":663},[637,46770,660],{"class":642},[637,46772,787],{"class":642},[637,46774,46776,46778],{"class":46775,"line":790},[639,673],[637,46777,781],{"class":642},[637,46779,46584],{"class":646},[637,46781,46783,46785,46787,46789,46792],{"class":46782,"line":800},[639,673],[637,46784,46590],{"class":650},[637,46786,657],{"class":642},[637,46788,660],{"class":642},[637,46790,46791],{"class":663},"3000",[637,46793,3154],{"class":642},[637,46795,46797,46799,46801,46803,46805],{"class":46796,"line":805},[639,673],[637,46798,46605],{"class":650},[637,46800,657],{"class":642},[637,46802,660],{"class":642},[637,46804,1969],{"class":663},[637,46806,3154],{"class":642},[637,46808,46810,46812,46814,46816,46818],{"class":46809,"line":827},[639,673],[637,46811,46619],{"class":650},[637,46813,657],{"class":642},[637,46815,660],{"class":642},[637,46817,29415],{"class":663},[637,46819,3154],{"class":642},[637,46821,46823],{"class":46822,"line":631},[639,673],[637,46824,17292],{"class":642},[637,46826,46827,46829,46831],{"class":639,"line":850},[637,46828,781],{"class":642},[637,46830,9702],{"class":646},[637,46832,787],{"class":642},[637,46834,46835,46837,46839],{"class":639,"line":861},[637,46836,905],{"class":642},[637,46838,761],{"class":646},[637,46840,669],{"class":642},[637,46842,46843,46845,46847],{"class":639,"line":872},[637,46844,732],{"class":642},[637,46846,750],{"class":646},[637,46848,669],{"class":642},[4074,46850,46852],{"id":46851},"beam","Beam",[614,46854,46855],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[626,46857,46860],{"className":628,"code":46858,"highlights":46859,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CPrecipitation\n :area=\"[0.5, 0.5, 20]\"\n :count=\"1000\"\n :speed=\"0.2\"\n :size=\"0.3\"\n color=\"#00ff00\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790,800,805,827,631,850,861],[618,46861,46862,46882,46900,46919,46927,46931,46939,46947,46965,46972,46987,47000,47013,47027,47041,47046,47054,47062],{"__ignoreMap":576},[637,46863,46864,46866,46868,46870,46872,46874,46876,46878,46880],{"class":639,"line":577},[637,46865,643],{"class":642},[637,46867,647],{"class":646},[637,46869,651],{"class":650},[637,46871,654],{"class":650},[637,46873,657],{"class":642},[637,46875,660],{"class":642},[637,46877,664],{"class":663},[637,46879,660],{"class":642},[637,46881,669],{"class":642},[637,46883,46884,46886,46888,46890,46892,46894,46896,46898],{"class":639,"line":578},[637,46885,677],{"class":676},[637,46887,680],{"class":642},[637,46889,715],{"class":683},[637,46891,693],{"class":642},[637,46893,696],{"class":676},[637,46895,699],{"class":642},[637,46897,724],{"class":663},[637,46899,705],{"class":642},[637,46901,46903,46905,46907,46909,46911,46913,46915,46917],{"class":46902,"line":708},[639,673],[637,46904,677],{"class":676},[637,46906,680],{"class":642},[637,46908,46371],{"class":683},[637,46910,693],{"class":642},[637,46912,696],{"class":676},[637,46914,699],{"class":642},[637,46916,702],{"class":663},[637,46918,705],{"class":642},[637,46920,46921,46923,46925],{"class":639,"line":729},[637,46922,732],{"class":642},[637,46924,647],{"class":646},[637,46926,669],{"class":642},[637,46928,46929],{"class":639,"line":739},[637,46930,742],{"emptyLinePlaceholder":594},[637,46932,46933,46935,46937],{"class":639,"line":745},[637,46934,643],{"class":642},[637,46936,750],{"class":646},[637,46938,669],{"class":642},[637,46940,46941,46943,46945],{"class":639,"line":755},[637,46942,758],{"class":642},[637,46944,761],{"class":646},[637,46946,669],{"class":642},[637,46948,46949,46951,46953,46955,46957,46959,46961,46963],{"class":639,"line":778},[637,46950,781],{"class":642},[637,46952,784],{"class":646},[637,46954,1508],{"class":650},[637,46956,657],{"class":642},[637,46958,660],{"class":642},[637,46960,42648],{"class":663},[637,46962,660],{"class":642},[637,46964,787],{"class":642},[637,46966,46968,46970],{"class":46967,"line":790},[639,673],[637,46969,781],{"class":642},[637,46971,46584],{"class":646},[637,46973,46975,46978,46980,46982,46985],{"class":46974,"line":800},[639,673],[637,46976,46977],{"class":650}," :area",[637,46979,657],{"class":642},[637,46981,660],{"class":642},[637,46983,46984],{"class":663},"[0.5, 0.5, 20]",[637,46986,3154],{"class":642},[637,46988,46990,46992,46994,46996,46998],{"class":46989,"line":805},[639,673],[637,46991,46590],{"class":650},[637,46993,657],{"class":642},[637,46995,660],{"class":642},[637,46997,9307],{"class":663},[637,46999,3154],{"class":642},[637,47001,47003,47005,47007,47009,47011],{"class":47002,"line":827},[639,673],[637,47004,46605],{"class":650},[637,47006,657],{"class":642},[637,47008,660],{"class":642},[637,47010,5752],{"class":663},[637,47012,3154],{"class":642},[637,47014,47016,47019,47021,47023,47025],{"class":47015,"line":631},[639,673],[637,47017,47018],{"class":650}," :size",[637,47020,657],{"class":642},[637,47022,660],{"class":642},[637,47024,39188],{"class":663},[637,47026,3154],{"class":642},[637,47028,47030,47032,47034,47036,47039],{"class":47029,"line":850},[639,673],[637,47031,30712],{"class":650},[637,47033,657],{"class":642},[637,47035,660],{"class":642},[637,47037,47038],{"class":663},"#00ff00",[637,47040,3154],{"class":642},[637,47042,47044],{"class":47043,"line":861},[639,673],[637,47045,17292],{"class":642},[637,47047,47048,47050,47052],{"class":639,"line":872},[637,47049,781],{"class":642},[637,47051,9702],{"class":646},[637,47053,787],{"class":642},[637,47055,47056,47058,47060],{"class":639,"line":882},[637,47057,905],{"class":642},[637,47059,761],{"class":646},[637,47061,669],{"class":642},[637,47063,47064,47066,47068],{"class":639,"line":632},[637,47065,732],{"class":642},[637,47067,750],{"class":646},[637,47069,669],{"class":642},[614,47071,47072],{},"You can create much more! ☔",[3222,47074,47075],{},[614,47076,47077],{},"Be careful with the performance this components render infinite particles in movement",[504,47079,922],{"id":921},[927,47081,47082,47092],{},[930,47083,47084],{},[933,47085,47086,47088,47090],{},[936,47087,938],{"align":997},[936,47089,941],{"align":997},[936,47091,944],{},[946,47093,47094,47105,47120,47131,47142,47154,47165,47177,47188,47199,47211,47222,47233],{},[933,47095,47096,47100,47103],{},[951,47097,47098],{"align":997},[1692,47099,16749],{},[951,47101,47102],{"align":997},"The size of the drops.",[951,47104,2186],{},[933,47106,47107,47112,47115],{},[951,47108,47109],{"align":997},[1692,47110,47111],{},"area",[951,47113,47114],{"align":997},"The size of the precipitation area.",[951,47116,47117],{},[637,47118,47119],{},"10, 10, 20",[933,47121,47122,47126,47129],{},[951,47123,47124],{"align":997},[1692,47125,7568],{},[951,47127,47128],{"align":997},"The color of the drops.",[951,47130,45350],{},[933,47132,47133,47137,47140],{},[951,47134,47135],{"align":997},[1692,47136,3004],{},[951,47138,47139],{"align":997},"Color texture of the drops.",[951,47141,3679],{},[933,47143,47144,47149,47152],{},[951,47145,47146],{"align":997},[1692,47147,47148],{},"alphaMap",[951,47150,47151],{"align":997},"Alpha texture of the Drops.",[951,47153,3679],{},[933,47155,47156,47160,47163],{},[951,47157,47158],{"align":997},[1692,47159,39445],{},[951,47161,47162],{"align":997},"Enables the WebGL to know when not to render the pixel.",[951,47164,1909],{},[933,47166,47167,47171,47174],{},[951,47168,47169],{"align":997},[1692,47170,11632],{},[951,47172,47173],{"align":997},"Set the opacity of the drops.",[951,47175,47176],{},"0.8",[933,47178,47179,47183,47186],{},[951,47180,47181],{"align":997},[1692,47182,12030],{},[951,47184,47185],{"align":997},"Number of drops.",[951,47187,9150],{},[933,47189,47190,47194,47197],{},[951,47191,47192],{"align":997},[1692,47193,9802],{},[951,47195,47196],{"align":997},"Drops speed.",[951,47198,2186],{},[933,47200,47201,47206,47209],{},[951,47202,47203],{"align":997},[1692,47204,47205],{},"randomness",[951,47207,47208],{"align":997},"Add randomness to the drops.",[951,47210,1969],{},[933,47212,47213,47217,47220],{},[951,47214,47215],{"align":997},[1692,47216,10433],{},[951,47218,47219],{"align":997},"Whether should write to the depth buffer or not. drops.",[951,47221,961],{},[933,47223,47224,47228,47231],{},[951,47225,47226],{"align":997},[1692,47227,11644],{},[951,47229,47230],{"align":997},"Transparency on the drops texture",[951,47232,971],{},[933,47234,47235,47240,47243],{},[951,47236,47237],{"align":997},[1692,47238,47239],{},"sizeAttenuation",[951,47241,47242],{"align":997},"Keep the same size regardless distance. drops.",[951,47244,961],{},[1349,47246,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":47248},[47249,47254],{"id":624,"depth":578,"text":15,"children":47250},[47251,47252,47253],{"id":46463,"depth":708,"text":46464},{"id":46659,"depth":708,"text":46660},{"id":46851,"depth":708,"text":46852},{"id":921,"depth":578,"text":922},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":395,"description":47255},"tt7i9fbwRZ4B8AUSIJO4jMNnX2vDH4IJ9qHfravYfLs",{"id":47260,"title":399,"body":47261,"description":47646,"extension":591,"links":592,"meta":47647,"navigation":594,"path":400,"seo":47648,"stem":401,"__hash__":47649},"docs/2.api/8.staging/sky.md",{"type":501,"value":47262,"toc":47642},[47263,47268,47278,47280,47458,47460,47640],[608,47264,47265],{},[47266,47267],"staging-sky",{},[614,47269,47270,45711,47272,1146],{},[618,47271,45872],{},[1140,47273,45716,47276,45720],{"href":47274,"rel":47275},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1144],[618,47277,399],{},[504,47279,15],{"id":624},[626,47281,47284],{"className":628,"code":47282,"highlights":47283,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sky } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas :tone-mapping-exposure=\"0.25\">\n \u003CTresPerspectiveCamera :position=\"[0, 15, 200]\" />\n \u003CSky />\n \u003COrbitControls />\n \u003CTresGridHelper :args=\"[1000, 20]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[578,790],[618,47285,47286,47306,47330,47348,47356,47360,47368,47387,47406,47415,47423,47442,47450],{"__ignoreMap":576},[637,47287,47288,47290,47292,47294,47296,47298,47300,47302,47304],{"class":639,"line":577},[637,47289,643],{"class":642},[637,47291,647],{"class":646},[637,47293,651],{"class":650},[637,47295,654],{"class":650},[637,47297,657],{"class":642},[637,47299,660],{"class":642},[637,47301,664],{"class":663},[637,47303,660],{"class":642},[637,47305,669],{"class":642},[637,47307,47309,47311,47313,47315,47317,47320,47322,47324,47326,47328],{"class":47308,"line":578},[639,673],[637,47310,677],{"class":676},[637,47312,680],{"class":642},[637,47314,690],{"class":683},[637,47316,687],{"class":642},[637,47318,47319],{"class":683}," Sky",[637,47321,693],{"class":642},[637,47323,696],{"class":676},[637,47325,699],{"class":642},[637,47327,702],{"class":663},[637,47329,705],{"class":642},[637,47331,47332,47334,47336,47338,47340,47342,47344,47346],{"class":639,"line":708},[637,47333,677],{"class":676},[637,47335,680],{"class":642},[637,47337,715],{"class":683},[637,47339,693],{"class":642},[637,47341,696],{"class":676},[637,47343,699],{"class":642},[637,47345,724],{"class":663},[637,47347,705],{"class":642},[637,47349,47350,47352,47354],{"class":639,"line":729},[637,47351,732],{"class":642},[637,47353,647],{"class":646},[637,47355,669],{"class":642},[637,47357,47358],{"class":639,"line":739},[637,47359,742],{"emptyLinePlaceholder":594},[637,47361,47362,47364,47366],{"class":639,"line":745},[637,47363,643],{"class":642},[637,47365,750],{"class":646},[637,47367,669],{"class":642},[637,47369,47370,47372,47374,47377,47379,47381,47383,47385],{"class":639,"line":755},[637,47371,758],{"class":642},[637,47373,761],{"class":646},[637,47375,47376],{"class":650}," :tone-mapping-exposure",[637,47378,657],{"class":642},[637,47380,660],{"class":642},[637,47382,13638],{"class":663},[637,47384,660],{"class":642},[637,47386,669],{"class":642},[637,47388,47389,47391,47393,47395,47397,47399,47402,47404],{"class":639,"line":778},[637,47390,781],{"class":642},[637,47392,784],{"class":646},[637,47394,1508],{"class":650},[637,47396,657],{"class":642},[637,47398,660],{"class":642},[637,47400,47401],{"class":663},"[0, 15, 200]",[637,47403,660],{"class":642},[637,47405,787],{"class":642},[637,47407,47409,47411,47413],{"class":47408,"line":790},[639,673],[637,47410,781],{"class":642},[637,47412,399],{"class":646},[637,47414,787],{"class":642},[637,47416,47417,47419,47421],{"class":639,"line":800},[637,47418,781],{"class":642},[637,47420,795],{"class":646},[637,47422,787],{"class":642},[637,47424,47425,47427,47429,47431,47433,47435,47438,47440],{"class":639,"line":805},[637,47426,781],{"class":642},[637,47428,8070],{"class":646},[637,47430,1982],{"class":650},[637,47432,657],{"class":642},[637,47434,660],{"class":642},[637,47436,47437],{"class":663},"[1000, 20]",[637,47439,660],{"class":642},[637,47441,787],{"class":642},[637,47443,47444,47446,47448],{"class":639,"line":827},[637,47445,905],{"class":642},[637,47447,761],{"class":646},[637,47449,669],{"class":642},[637,47451,47452,47454,47456],{"class":639,"line":631},[637,47453,732],{"class":642},[637,47455,750],{"class":646},[637,47457,669],{"class":642},[504,47459,922],{"id":921},[927,47461,47462,47476],{},[930,47463,47464],{},[933,47465,47466,47468,47470,47472,47474],{},[936,47467,8110],{"align":997},[936,47469,5990],{"align":997},[936,47471,941],{"align":997},[936,47473,944],{"align":997},[936,47475,18605],{"align":997},[946,47477,47478,47499,47523,47549,47573,47593,47620],{},[933,47479,47480,47485,47489,47492,47497],{},[951,47481,47482],{"align":997},[1692,47483,47484],{},"turbidity",[951,47486,47487],{"align":997},[618,47488,5375],{},[951,47490,47491],{"align":997},"Haziness",[951,47493,47494],{"align":997},[618,47495,47496],{},"3.4",[951,47498,45662],{"align":997},[933,47500,47501,47506,47510,47517,47521],{},[951,47502,47503],{"align":997},[1692,47504,47505],{},"rayleigh",[951,47507,47508],{"align":997},[618,47509,5375],{},[951,47511,47512],{"align":997},[1140,47513,47516],{"href":47514,"rel":47515},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1144],"Rayleigh scattering",[951,47518,47519],{"align":997},[618,47520,21410],{},[951,47522,45662],{"align":997},[933,47524,47525,47530,47534,47542,47547],{},[951,47526,47527],{"align":997},[1692,47528,47529],{},"mieCoefficient",[951,47531,47532],{"align":997},[618,47533,5375],{},[951,47535,47536,47541],{"align":997},[1140,47537,47540],{"href":47538,"rel":47539},"https://en.wikipedia.org/wiki/Mie_scattering",[1144],"Mie scattering"," amount",[951,47543,47544],{"align":997},[618,47545,47546],{},"0.005",[951,47548,45662],{"align":997},[933,47550,47551,47556,47560,47566,47571],{},[951,47552,47553],{"align":997},[1692,47554,47555],{},"mieDirectionalG",[951,47557,47558],{"align":997},[618,47559,5375],{},[951,47561,47562,47565],{"align":997},[1140,47563,47540],{"href":47538,"rel":47564},[1144]," direction",[951,47567,47568],{"align":997},[618,47569,47570],{},"0.7",[951,47572,45662],{"align":997},[933,47574,47575,47580,47584,47587,47591],{},[951,47576,47577],{"align":997},[1692,47578,47579],{},"elevation",[951,47581,47582],{"align":997},[618,47583,5375],{},[951,47585,47586],{"align":997},"Sun's elevation from the horizon, in degrees",[951,47588,47589],{"align":997},[618,47590,10682],{},[951,47592,45662],{"align":997},[933,47594,47595,47600,47604,47613,47618],{},[951,47596,47597],{"align":997},[1692,47598,47599],{},"azimuth",[951,47601,47602],{"align":997},[618,47603,5375],{},[951,47605,47606,47607,47612],{"align":997},"Sun's ",[1140,47608,47611],{"href":47609,"rel":47610},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1144],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[951,47614,47615],{"align":997},[618,47616,47617],{},"180",[951,47619,45662],{"align":997},[933,47621,47622,47626,47630,47633,47638],{},[951,47623,47624],{"align":997},[1692,47625,13542],{},[951,47627,47628],{"align":997},[618,47629,5375],{},[951,47631,47632],{"align":997},"Sky box scale",[951,47634,47635],{"align":997},[618,47636,47637],{},"450000",[951,47639,45662],{"align":997},[1349,47641,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":47643},[47644,47645],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":399,"description":47646},"gj-nWIhO12GxCs2jecdsUZVQa85u-DxXdL5B9nW79zk",{"id":47651,"title":403,"body":47652,"description":48043,"extension":591,"links":592,"meta":48044,"navigation":594,"path":404,"seo":48045,"stem":405,"__hash__":48046},"docs/2.api/8.staging/smoke.md",{"type":501,"value":47653,"toc":48037},[47654,47659,47665,47667,47672,47677,47833,47835,48027,48031,48035],[2318,47655,47656],{},[47657,47658],"staging-smoke",{},[614,47660,47661,47664],{},[618,47662,47663],{},"\u003CSmoke />"," is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful smoke - cloud - fog effect",[504,47666,15],{"id":624},[3222,47668,47669],{},[614,47670,47671],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[614,47673,46314,47674,47676],{},[618,47675,47663],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[626,47678,47680],{"className":628,"code":47679,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Smoke } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CSuspense>\n \u003CSmoke />\n \u003C/Suspense>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[618,47681,47682,47702,47720,47739,47747,47751,47759,47767,47785,47793,47801,47809,47817,47825],{"__ignoreMap":576},[637,47683,47684,47686,47688,47690,47692,47694,47696,47698,47700],{"class":639,"line":577},[637,47685,643],{"class":642},[637,47687,647],{"class":646},[637,47689,651],{"class":650},[637,47691,654],{"class":650},[637,47693,657],{"class":642},[637,47695,660],{"class":642},[637,47697,664],{"class":663},[637,47699,660],{"class":642},[637,47701,669],{"class":642},[637,47703,47704,47706,47708,47710,47712,47714,47716,47718],{"class":639,"line":578},[637,47705,677],{"class":676},[637,47707,680],{"class":642},[637,47709,715],{"class":683},[637,47711,693],{"class":642},[637,47713,696],{"class":676},[637,47715,699],{"class":642},[637,47717,724],{"class":663},[637,47719,705],{"class":642},[637,47721,47722,47724,47726,47729,47731,47733,47735,47737],{"class":639,"line":708},[637,47723,677],{"class":676},[637,47725,680],{"class":642},[637,47727,47728],{"class":683}," Smoke",[637,47730,693],{"class":642},[637,47732,696],{"class":676},[637,47734,699],{"class":642},[637,47736,702],{"class":663},[637,47738,705],{"class":642},[637,47740,47741,47743,47745],{"class":639,"line":729},[637,47742,732],{"class":642},[637,47744,647],{"class":646},[637,47746,669],{"class":642},[637,47748,47749],{"class":639,"line":739},[637,47750,742],{"emptyLinePlaceholder":594},[637,47752,47753,47755,47757],{"class":639,"line":745},[637,47754,643],{"class":642},[637,47756,750],{"class":646},[637,47758,669],{"class":642},[637,47760,47761,47763,47765],{"class":639,"line":755},[637,47762,758],{"class":642},[637,47764,761],{"class":646},[637,47766,669],{"class":642},[637,47768,47769,47771,47773,47775,47777,47779,47781,47783],{"class":639,"line":778},[637,47770,781],{"class":642},[637,47772,784],{"class":646},[637,47774,1508],{"class":650},[637,47776,657],{"class":642},[637,47778,660],{"class":642},[637,47780,42648],{"class":663},[637,47782,660],{"class":642},[637,47784,787],{"class":642},[637,47786,47787,47789,47791],{"class":639,"line":790},[637,47788,781],{"class":642},[637,47790,21668],{"class":646},[637,47792,669],{"class":642},[637,47794,47795,47797,47799],{"class":639,"line":800},[637,47796,853],{"class":642},[637,47798,403],{"class":646},[637,47800,787],{"class":642},[637,47802,47803,47805,47807],{"class":639,"line":805},[637,47804,895],{"class":642},[637,47806,21668],{"class":646},[637,47808,669],{"class":642},[637,47810,47811,47813,47815],{"class":639,"line":827},[637,47812,781],{"class":642},[637,47814,9702],{"class":646},[637,47816,787],{"class":642},[637,47818,47819,47821,47823],{"class":639,"line":631},[637,47820,905],{"class":642},[637,47822,761],{"class":646},[637,47824,669],{"class":642},[637,47826,47827,47829,47831],{"class":639,"line":850},[637,47828,732],{"class":642},[637,47830,750],{"class":646},[637,47832,669],{"class":642},[504,47834,922],{"id":921},[927,47836,47837,47849],{},[930,47838,47839],{},[933,47840,47841,47843,47845,47847],{},[936,47842,8110],{"align":997},[936,47844,5990],{"align":997},[936,47846,941],{"align":997},[936,47848,944],{"align":997},[946,47850,47851,47869,47886,47903,47920,47937,47957,47975,47993,48011],{},[933,47852,47853,47857,47861,47864],{},[951,47854,47855],{"align":997},[1692,47856,7568],{},[951,47858,47859],{"align":997},[618,47860,7583],{},[951,47862,47863],{"align":997},"The color of the smoke.",[951,47865,47866],{"align":997},[618,47867,47868],{},"'#ffffff'",[933,47870,47871,47875,47879,47882],{},[951,47872,47873],{"align":997},[1692,47874,11632],{},[951,47876,47877],{"align":997},[618,47878,5375],{},[951,47880,47881],{"align":997},"The strength of the opacity.",[951,47883,47884],{"align":997},[618,47885,1969],{},[933,47887,47888,47892,47896,47899],{},[951,47889,47890],{"align":997},[1692,47891,9802],{},[951,47893,47894],{"align":997},[618,47895,5375],{},[951,47897,47898],{"align":997},"The rotation speed of the smoke.",[951,47900,47901],{"align":997},[618,47902,39199],{},[933,47904,47905,47909,47913,47916],{},[951,47906,47907],{"align":997},[1692,47908,13105],{},[951,47910,47911],{"align":997},[618,47912,5375],{},[951,47914,47915],{"align":997},"The base depth.",[951,47917,47918],{"align":997},[618,47919,39188],{},[933,47921,47922,47926,47930,47933],{},[951,47923,47924],{"align":997},[1692,47925,30800],{},[951,47927,47928],{"align":997},[618,47929,5375],{},[951,47931,47932],{"align":997},"The number of smoke to render.",[951,47934,47935],{"align":997},[618,47936,37514],{},[933,47938,47939,47943,47947,47950],{},[951,47940,47941],{"align":997},[1692,47942,2740],{},[951,47944,47945],{"align":997},[618,47946,3595],{},[951,47948,47949],{"align":997},"The texture of the smoke.",[951,47951,47952],{"align":997},[1140,47953,47956],{"href":47954,"rel":47955},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1144],"link",[933,47958,47959,47964,47968,47971],{},[951,47960,47961],{"align":997},[1692,47962,47963],{},"depthTest",[951,47965,47966],{"align":997},[618,47967,17582],{},[951,47969,47970],{"align":997},"The depthTest.",[951,47972,47973],{"align":997},[618,47974,971],{},[933,47976,47977,47982,47986,47989],{},[951,47978,47979],{"align":997},[1692,47980,47981],{},"spreadY",[951,47983,47984],{"align":997},[618,47985,5375],{},[951,47987,47988],{"align":997},"Spread on the Y axis.",[951,47990,47991],{"align":997},[618,47992,2186],{},[933,47994,47995,48000,48004,48007],{},[951,47996,47997],{"align":997},[1692,47998,47999],{},"spreadX",[951,48001,48002],{"align":997},[618,48003,5375],{},[951,48005,48006],{"align":997},"Spread on the X axis.",[951,48008,48009],{"align":997},[618,48010,1969],{},[933,48012,48013,48017,48021,48023],{},[951,48014,48015],{"align":997},[1692,48016,5653],{},[951,48018,48019],{"align":997},[618,48020,5375],{},[951,48022,5653],{"align":997},[951,48024,48025],{"align":997},[618,48026,1897],{},[4074,48028,48030],{"id":48029},"default-texture","Default texture",[614,48032,48033],{},[9481,48034],{"alt":48030,"src":47954},[1349,48036,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":48038},[48039,48040],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":48041},[48042],{"id":48029,"depth":708,"text":48030},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":403,"description":48043},"sbmmZ3rOQ9aBpjlOeEx_ISxnTzHqa7qssAvcFtfGBTQ",{"id":48048,"title":407,"body":48049,"description":49780,"extension":591,"links":592,"meta":49781,"navigation":594,"path":408,"seo":49782,"stem":409,"__hash__":49783},"docs/2.api/8.staging/sparkles.md",{"type":501,"value":48050,"toc":49771},[48051,48057,48059,48063,48230,48234,48237,48497,48501,48519,48546,48552,48569,48781,48785,48801,48830,48840,49132,49134,49769],[614,48052,48053,48056],{},[618,48054,48055],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[504,48058,15],{"id":624},[4074,48060,48062],{"id":48061},"basic","Basic",[626,48064,48067],{"className":628,"code":48065,"highlights":48066,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CSparkles />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,805],[618,48068,48069,48089,48107,48127,48135,48139,48147,48155,48173,48181,48189,48198,48206,48214,48222],{"__ignoreMap":576},[637,48070,48071,48073,48075,48077,48079,48081,48083,48085,48087],{"class":639,"line":577},[637,48072,643],{"class":642},[637,48074,647],{"class":646},[637,48076,651],{"class":650},[637,48078,654],{"class":650},[637,48080,657],{"class":642},[637,48082,660],{"class":642},[637,48084,664],{"class":663},[637,48086,660],{"class":642},[637,48088,669],{"class":642},[637,48090,48091,48093,48095,48097,48099,48101,48103,48105],{"class":639,"line":578},[637,48092,677],{"class":676},[637,48094,680],{"class":642},[637,48096,715],{"class":683},[637,48098,693],{"class":642},[637,48100,696],{"class":676},[637,48102,699],{"class":642},[637,48104,724],{"class":663},[637,48106,705],{"class":642},[637,48108,48110,48112,48114,48117,48119,48121,48123,48125],{"class":48109,"line":708},[639,673],[637,48111,677],{"class":676},[637,48113,680],{"class":642},[637,48115,48116],{"class":683}," Sparkles",[637,48118,693],{"class":642},[637,48120,696],{"class":676},[637,48122,699],{"class":642},[637,48124,702],{"class":663},[637,48126,705],{"class":642},[637,48128,48129,48131,48133],{"class":639,"line":729},[637,48130,732],{"class":642},[637,48132,647],{"class":646},[637,48134,669],{"class":642},[637,48136,48137],{"class":639,"line":739},[637,48138,742],{"emptyLinePlaceholder":594},[637,48140,48141,48143,48145],{"class":639,"line":745},[637,48142,643],{"class":642},[637,48144,750],{"class":646},[637,48146,669],{"class":642},[637,48148,48149,48151,48153],{"class":639,"line":755},[637,48150,758],{"class":642},[637,48152,761],{"class":646},[637,48154,669],{"class":642},[637,48156,48157,48159,48161,48163,48165,48167,48169,48171],{"class":639,"line":778},[637,48158,781],{"class":642},[637,48160,784],{"class":646},[637,48162,1508],{"class":650},[637,48164,657],{"class":642},[637,48166,660],{"class":642},[637,48168,42648],{"class":663},[637,48170,660],{"class":642},[637,48172,787],{"class":642},[637,48174,48175,48177,48179],{"class":639,"line":790},[637,48176,781],{"class":642},[637,48178,856],{"class":646},[637,48180,669],{"class":642},[637,48182,48183,48185,48187],{"class":639,"line":800},[637,48184,853],{"class":642},[637,48186,3981],{"class":646},[637,48188,787],{"class":642},[637,48190,48192,48194,48196],{"class":48191,"line":805},[639,673],[637,48193,853],{"class":642},[637,48195,407],{"class":646},[637,48197,787],{"class":642},[637,48199,48200,48202,48204],{"class":639,"line":827},[637,48201,895],{"class":642},[637,48203,856],{"class":646},[637,48205,669],{"class":642},[637,48207,48208,48210,48212],{"class":639,"line":631},[637,48209,781],{"class":642},[637,48211,9702],{"class":646},[637,48213,787],{"class":642},[637,48215,48216,48218,48220],{"class":639,"line":850},[637,48217,905],{"class":642},[637,48219,761],{"class":646},[637,48221,669],{"class":642},[637,48223,48224,48226,48228],{"class":639,"line":861},[637,48225,732],{"class":642},[637,48227,750],{"class":646},[637,48229,669],{"class":642},[4074,48231,48233],{"id":48232},"with-tresdirectionallight","With TresDirectionalLight",[614,48235,48236],{},"By default, sparkles appear on the up-facing vertices. However, you can pass a directional light to the component. Moving the directional light will cause \"lit\" vertices to emit sparkles.",[626,48238,48241],{"className":628,"code":48239,"highlights":48240,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CSparkles :directional-light=\"directionalLightRef\" />\n \u003C/TresMesh>\n \u003CTresDirectionalLight\n ref=\"directionalLightRef\"\n :position=\"[3, 3, 3]\"\n :intensity=\"2\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[745,850,882],[618,48242,48243,48263,48281,48299,48317,48321,48335,48343,48347,48355,48363,48381,48389,48397,48418,48426,48432,48445,48457,48469,48473,48481,48489],{"__ignoreMap":576},[637,48244,48245,48247,48249,48251,48253,48255,48257,48259,48261],{"class":639,"line":577},[637,48246,643],{"class":642},[637,48248,647],{"class":646},[637,48250,651],{"class":650},[637,48252,654],{"class":650},[637,48254,657],{"class":642},[637,48256,660],{"class":642},[637,48258,664],{"class":663},[637,48260,660],{"class":642},[637,48262,669],{"class":642},[637,48264,48265,48267,48269,48271,48273,48275,48277,48279],{"class":639,"line":578},[637,48266,677],{"class":676},[637,48268,680],{"class":642},[637,48270,715],{"class":683},[637,48272,693],{"class":642},[637,48274,696],{"class":676},[637,48276,699],{"class":642},[637,48278,724],{"class":663},[637,48280,705],{"class":642},[637,48282,48283,48285,48287,48289,48291,48293,48295,48297],{"class":639,"line":708},[637,48284,677],{"class":676},[637,48286,680],{"class":642},[637,48288,48116],{"class":683},[637,48290,693],{"class":642},[637,48292,696],{"class":676},[637,48294,699],{"class":642},[637,48296,702],{"class":663},[637,48298,705],{"class":642},[637,48300,48301,48303,48305,48307,48309,48311,48313,48315],{"class":639,"line":729},[637,48302,677],{"class":676},[637,48304,680],{"class":642},[637,48306,3521],{"class":683},[637,48308,693],{"class":642},[637,48310,696],{"class":676},[637,48312,699],{"class":642},[637,48314,633],{"class":663},[637,48316,705],{"class":642},[637,48318,48319],{"class":639,"line":739},[637,48320,742],{"emptyLinePlaceholder":594},[637,48322,48324,48326,48329,48331,48333],{"class":48323,"line":745},[639,673],[637,48325,2438],{"class":650},[637,48327,48328],{"class":683}," directionalLightRef ",[637,48330,657],{"class":642},[637,48332,3521],{"class":2457},[637,48334,6556],{"class":683},[637,48336,48337,48339,48341],{"class":639,"line":755},[637,48338,732],{"class":642},[637,48340,647],{"class":646},[637,48342,669],{"class":642},[637,48344,48345],{"class":639,"line":778},[637,48346,742],{"emptyLinePlaceholder":594},[637,48348,48349,48351,48353],{"class":639,"line":790},[637,48350,643],{"class":642},[637,48352,750],{"class":646},[637,48354,669],{"class":642},[637,48356,48357,48359,48361],{"class":639,"line":800},[637,48358,758],{"class":642},[637,48360,761],{"class":646},[637,48362,669],{"class":642},[637,48364,48365,48367,48369,48371,48373,48375,48377,48379],{"class":639,"line":805},[637,48366,781],{"class":642},[637,48368,784],{"class":646},[637,48370,1508],{"class":650},[637,48372,657],{"class":642},[637,48374,660],{"class":642},[637,48376,42648],{"class":663},[637,48378,660],{"class":642},[637,48380,787],{"class":642},[637,48382,48383,48385,48387],{"class":639,"line":827},[637,48384,781],{"class":642},[637,48386,856],{"class":646},[637,48388,669],{"class":642},[637,48390,48391,48393,48395],{"class":639,"line":631},[637,48392,853],{"class":642},[637,48394,3981],{"class":646},[637,48396,787],{"class":642},[637,48398,48400,48402,48404,48407,48409,48411,48414,48416],{"class":48399,"line":850},[639,673],[637,48401,853],{"class":642},[637,48403,407],{"class":646},[637,48405,48406],{"class":650}," :directional-light",[637,48408,657],{"class":642},[637,48410,660],{"class":642},[637,48412,48413],{"class":663},"directionalLightRef",[637,48415,660],{"class":642},[637,48417,787],{"class":642},[637,48419,48420,48422,48424],{"class":639,"line":861},[637,48421,895],{"class":642},[637,48423,856],{"class":646},[637,48425,669],{"class":642},[637,48427,48428,48430],{"class":639,"line":872},[637,48429,781],{"class":642},[637,48431,17261],{"class":646},[637,48433,48435,48437,48439,48441,48443],{"class":48434,"line":882},[639,673],[637,48436,12384],{"class":650},[637,48438,657],{"class":642},[637,48440,660],{"class":642},[637,48442,48413],{"class":663},[637,48444,3154],{"class":642},[637,48446,48447,48449,48451,48453,48455],{"class":639,"line":632},[637,48448,17279],{"class":650},[637,48450,657],{"class":642},[637,48452,660],{"class":642},[637,48454,13301],{"class":663},[637,48456,3154],{"class":642},[637,48458,48459,48461,48463,48465,48467],{"class":639,"line":902},[637,48460,17266],{"class":650},[637,48462,657],{"class":642},[637,48464,660],{"class":642},[637,48466,820],{"class":663},[637,48468,3154],{"class":642},[637,48470,48471],{"class":639,"line":912},[637,48472,17292],{"class":642},[637,48474,48475,48477,48479],{"class":639,"line":2648},[637,48476,781],{"class":642},[637,48478,9702],{"class":646},[637,48480,787],{"class":642},[637,48482,48483,48485,48487],{"class":639,"line":2657},[637,48484,905],{"class":642},[637,48486,761],{"class":646},[637,48488,669],{"class":642},[637,48490,48491,48493,48495],{"class":639,"line":2677},[637,48492,732],{"class":642},[637,48494,750],{"class":646},[637,48496,669],{"class":642},[4074,48498,48500],{"id":48499},"sequences","Sequences",[614,48502,48503,48504,48507,48508,8187,48512,48514,48515,48518],{},"All props beginning with ",[618,48505,48506],{},":sequence-"," are used to define how a particle changes as it progresses ",[1140,48509,48511],{"href":48510},"#mixes","(See also: Mixes)",[618,48513,48506],{}," props are of the type ",[618,48516,48517],{},"Gradient\u003CT>",", which can be any one of:",[2236,48520,48521,48527,48533],{},[2239,48522,48523,48526],{},[618,48524,48525],{},"T",": a single value",[2239,48528,48529,48532],{},[618,48530,48531],{},"[T, T, T, ...]",": an evenly distributed series of values",[2239,48534,48535,48538,48539,48541,48542,2273,48544,1146],{},[618,48536,48537],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[618,48540,5375],{}," is a gradient \"stop\" from ",[618,48543,965],{},[618,48545,1897],{},[614,48547,48548,48549,1240],{},"For example, all of these are acceptable values for ",[618,48550,48551],{},"Gradient\u003CTresColor>",[2236,48553,48554,48559,48564],{},[2239,48555,48556],{},[618,48557,48558],{},"'red'",[2239,48560,48561],{},[618,48562,48563],{},"['red', 'blue', 'green']",[2239,48565,48566],{},[618,48567,48568],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[626,48570,48573],{"className":628,"code":48571,"highlights":48572,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CSparkles\n :sequence-color=\"['red', 'blue', 'green']\"\n :sequence-alpha=\"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]\"\n :sequence-size=\"[0.0, 1.0, 0.5]\"\n />\n \u003C/TresMesh>\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[805,827,631,850],[618,48574,48575,48595,48613,48631,48639,48643,48651,48659,48677,48685,48693,48701,48715,48730,48745,48749,48757,48765,48773],{"__ignoreMap":576},[637,48576,48577,48579,48581,48583,48585,48587,48589,48591,48593],{"class":639,"line":577},[637,48578,643],{"class":642},[637,48580,647],{"class":646},[637,48582,651],{"class":650},[637,48584,654],{"class":650},[637,48586,657],{"class":642},[637,48588,660],{"class":642},[637,48590,664],{"class":663},[637,48592,660],{"class":642},[637,48594,669],{"class":642},[637,48596,48597,48599,48601,48603,48605,48607,48609,48611],{"class":639,"line":578},[637,48598,677],{"class":676},[637,48600,680],{"class":642},[637,48602,715],{"class":683},[637,48604,693],{"class":642},[637,48606,696],{"class":676},[637,48608,699],{"class":642},[637,48610,724],{"class":663},[637,48612,705],{"class":642},[637,48614,48615,48617,48619,48621,48623,48625,48627,48629],{"class":639,"line":708},[637,48616,677],{"class":676},[637,48618,680],{"class":642},[637,48620,48116],{"class":683},[637,48622,693],{"class":642},[637,48624,696],{"class":676},[637,48626,699],{"class":642},[637,48628,702],{"class":663},[637,48630,705],{"class":642},[637,48632,48633,48635,48637],{"class":639,"line":729},[637,48634,732],{"class":642},[637,48636,647],{"class":646},[637,48638,669],{"class":642},[637,48640,48641],{"class":639,"line":739},[637,48642,742],{"emptyLinePlaceholder":594},[637,48644,48645,48647,48649],{"class":639,"line":745},[637,48646,643],{"class":642},[637,48648,750],{"class":646},[637,48650,669],{"class":642},[637,48652,48653,48655,48657],{"class":639,"line":755},[637,48654,758],{"class":642},[637,48656,761],{"class":646},[637,48658,669],{"class":642},[637,48660,48661,48663,48665,48667,48669,48671,48673,48675],{"class":639,"line":778},[637,48662,781],{"class":642},[637,48664,784],{"class":646},[637,48666,1508],{"class":650},[637,48668,657],{"class":642},[637,48670,660],{"class":642},[637,48672,42648],{"class":663},[637,48674,660],{"class":642},[637,48676,787],{"class":642},[637,48678,48679,48681,48683],{"class":639,"line":790},[637,48680,781],{"class":642},[637,48682,856],{"class":646},[637,48684,669],{"class":642},[637,48686,48687,48689,48691],{"class":639,"line":800},[637,48688,853],{"class":642},[637,48690,3981],{"class":646},[637,48692,787],{"class":642},[637,48694,48696,48698],{"class":48695,"line":805},[639,673],[637,48697,853],{"class":642},[637,48699,48700],{"class":646},"Sparkles\n",[637,48702,48704,48707,48709,48711,48713],{"class":48703,"line":827},[639,673],[637,48705,48706],{"class":650}," :sequence-color",[637,48708,657],{"class":642},[637,48710,660],{"class":642},[637,48712,48563],{"class":663},[637,48714,3154],{"class":642},[637,48716,48718,48721,48723,48725,48728],{"class":48717,"line":631},[639,673],[637,48719,48720],{"class":650}," :sequence-alpha",[637,48722,657],{"class":642},[637,48724,660],{"class":642},[637,48726,48727],{"class":663},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[637,48729,3154],{"class":642},[637,48731,48733,48736,48738,48740,48743],{"class":48732,"line":850},[639,673],[637,48734,48735],{"class":650}," :sequence-size",[637,48737,657],{"class":642},[637,48739,660],{"class":642},[637,48741,48742],{"class":663},"[0.0, 1.0, 0.5]",[637,48744,3154],{"class":642},[637,48746,48747],{"class":639,"line":861},[637,48748,8054],{"class":642},[637,48750,48751,48753,48755],{"class":639,"line":872},[637,48752,895],{"class":642},[637,48754,856],{"class":646},[637,48756,669],{"class":642},[637,48758,48759,48761,48763],{"class":639,"line":882},[637,48760,781],{"class":642},[637,48762,9702],{"class":646},[637,48764,787],{"class":642},[637,48766,48767,48769,48771],{"class":639,"line":632},[637,48768,905],{"class":642},[637,48770,761],{"class":646},[637,48772,669],{"class":642},[637,48774,48775,48777,48779],{"class":639,"line":902},[637,48776,732],{"class":642},[637,48778,750],{"class":646},[637,48780,669],{"class":642},[4074,48782,48784],{"id":48783},"mixes","Mixes",[614,48786,48503,48787,48790,48791,48793,48794,48797,48798,1146],{},[618,48788,48789],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[618,48792,48506],{}," prop. E.g., ",[618,48795,48796],{},":mix-alpha"," affects ",[618,48799,48800],{},":sequence-alpha",[2236,48802,48803,48821],{},[2239,48804,48805,48806,48808,48809,48811,48812,48814,48815],{},"If the ",[618,48807,48789],{}," prop is ",[618,48810,13804],{},", 'progress' through the ",[618,48813,48506],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1140,48816,48818],{"href":48817},"#precisely",[48819,48820,1897],"sup",{},[2239,48822,48805,48823,48808,48825,48811,48827,48829],{},[618,48824,48789],{},[618,48826,13682],{},[618,48828,48506],{}," is determined entirely by the particle's lifetime.",[614,48831,48832,48835,48836,48839],{},[1140,48833],{"id":48834},"precisely"," More precisely, the value is determined by the dot product of the ",[618,48837,48838],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[626,48841,48844],{"className":628,"code":48842,"highlights":48843,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CSparkles\n :directional-light=\"directionalLightRef\"\n :mix-color=\"0.8\"\n :mix-alpha=\"0.5\"\n :mix-size=\"0.2\"\n />\n \u003C/TresMesh>\n \u003CTresDirectionalLight\n ref=\"directionalLightRef\"\n :position=\"[3, 3, 3]\"\n />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,850,861,872,882,632],[618,48845,48846,48866,48884,48903,48921,48925,48937,48945,48949,48957,48965,48983,48991,48999,49006,49020,49034,49048,49062,49066,49074,49080,49092,49104,49108,49116,49124],{"__ignoreMap":576},[637,48847,48848,48850,48852,48854,48856,48858,48860,48862,48864],{"class":639,"line":577},[637,48849,643],{"class":642},[637,48851,647],{"class":646},[637,48853,651],{"class":650},[637,48855,654],{"class":650},[637,48857,657],{"class":642},[637,48859,660],{"class":642},[637,48861,664],{"class":663},[637,48863,660],{"class":642},[637,48865,669],{"class":642},[637,48867,48868,48870,48872,48874,48876,48878,48880,48882],{"class":639,"line":578},[637,48869,677],{"class":676},[637,48871,680],{"class":642},[637,48873,715],{"class":683},[637,48875,693],{"class":642},[637,48877,696],{"class":676},[637,48879,699],{"class":642},[637,48881,724],{"class":663},[637,48883,705],{"class":642},[637,48885,48887,48889,48891,48893,48895,48897,48899,48901],{"class":48886,"line":708},[639,673],[637,48888,677],{"class":676},[637,48890,680],{"class":642},[637,48892,48116],{"class":683},[637,48894,693],{"class":642},[637,48896,696],{"class":676},[637,48898,699],{"class":642},[637,48900,702],{"class":663},[637,48902,705],{"class":642},[637,48904,48905,48907,48909,48911,48913,48915,48917,48919],{"class":639,"line":729},[637,48906,677],{"class":676},[637,48908,680],{"class":642},[637,48910,3521],{"class":683},[637,48912,693],{"class":642},[637,48914,696],{"class":676},[637,48916,699],{"class":642},[637,48918,633],{"class":663},[637,48920,705],{"class":642},[637,48922,48923],{"class":639,"line":739},[637,48924,742],{"emptyLinePlaceholder":594},[637,48926,48927,48929,48931,48933,48935],{"class":639,"line":745},[637,48928,2438],{"class":650},[637,48930,48328],{"class":683},[637,48932,657],{"class":642},[637,48934,3521],{"class":2457},[637,48936,6556],{"class":683},[637,48938,48939,48941,48943],{"class":639,"line":755},[637,48940,732],{"class":642},[637,48942,647],{"class":646},[637,48944,669],{"class":642},[637,48946,48947],{"class":639,"line":778},[637,48948,742],{"emptyLinePlaceholder":594},[637,48950,48951,48953,48955],{"class":639,"line":790},[637,48952,643],{"class":642},[637,48954,750],{"class":646},[637,48956,669],{"class":642},[637,48958,48959,48961,48963],{"class":639,"line":800},[637,48960,758],{"class":642},[637,48962,761],{"class":646},[637,48964,669],{"class":642},[637,48966,48967,48969,48971,48973,48975,48977,48979,48981],{"class":639,"line":805},[637,48968,781],{"class":642},[637,48970,784],{"class":646},[637,48972,1508],{"class":650},[637,48974,657],{"class":642},[637,48976,660],{"class":642},[637,48978,42648],{"class":663},[637,48980,660],{"class":642},[637,48982,787],{"class":642},[637,48984,48985,48987,48989],{"class":639,"line":827},[637,48986,781],{"class":642},[637,48988,856],{"class":646},[637,48990,669],{"class":642},[637,48992,48993,48995,48997],{"class":639,"line":631},[637,48994,853],{"class":642},[637,48996,3981],{"class":646},[637,48998,787],{"class":642},[637,49000,49002,49004],{"class":49001,"line":850},[639,673],[637,49003,853],{"class":642},[637,49005,48700],{"class":646},[637,49007,49009,49012,49014,49016,49018],{"class":49008,"line":861},[639,673],[637,49010,49011],{"class":650}," :directional-light",[637,49013,657],{"class":642},[637,49015,660],{"class":642},[637,49017,48413],{"class":663},[637,49019,3154],{"class":642},[637,49021,49023,49026,49028,49030,49032],{"class":49022,"line":872},[639,673],[637,49024,49025],{"class":650}," :mix-color",[637,49027,657],{"class":642},[637,49029,660],{"class":642},[637,49031,47176],{"class":663},[637,49033,3154],{"class":642},[637,49035,49037,49040,49042,49044,49046],{"class":49036,"line":882},[639,673],[637,49038,49039],{"class":650}," :mix-alpha",[637,49041,657],{"class":642},[637,49043,660],{"class":642},[637,49045,1969],{"class":663},[637,49047,3154],{"class":642},[637,49049,49051,49054,49056,49058,49060],{"class":49050,"line":632},[639,673],[637,49052,49053],{"class":650}," :mix-size",[637,49055,657],{"class":642},[637,49057,660],{"class":642},[637,49059,5752],{"class":663},[637,49061,3154],{"class":642},[637,49063,49064],{"class":639,"line":902},[637,49065,8054],{"class":642},[637,49067,49068,49070,49072],{"class":639,"line":912},[637,49069,895],{"class":642},[637,49071,856],{"class":646},[637,49073,669],{"class":642},[637,49075,49076,49078],{"class":639,"line":2648},[637,49077,781],{"class":642},[637,49079,17261],{"class":646},[637,49081,49082,49084,49086,49088,49090],{"class":639,"line":2657},[637,49083,12384],{"class":650},[637,49085,657],{"class":642},[637,49087,660],{"class":642},[637,49089,48413],{"class":663},[637,49091,3154],{"class":642},[637,49093,49094,49096,49098,49100,49102],{"class":639,"line":2677},[637,49095,17279],{"class":650},[637,49097,657],{"class":642},[637,49099,660],{"class":642},[637,49101,13301],{"class":663},[637,49103,3154],{"class":642},[637,49105,49106],{"class":639,"line":2686},[637,49107,17292],{"class":642},[637,49109,49110,49112,49114],{"class":639,"line":2695},[637,49111,781],{"class":642},[637,49113,9702],{"class":646},[637,49115,787],{"class":642},[637,49117,49118,49120,49122],{"class":639,"line":2704},[637,49119,905],{"class":642},[637,49121,761],{"class":646},[637,49123,669],{"class":642},[637,49125,49126,49128,49130],{"class":639,"line":2726},[637,49127,732],{"class":642},[637,49129,750],{"class":646},[637,49131,669],{"class":642},[504,49133,922],{"id":921},[927,49135,49136,49144],{},[930,49137,49138],{},[933,49139,49140,49142],{},[936,49141,8110],{"align":997},[936,49143,941],{"align":997},[946,49145,49146,49168,49201,49223,49243,49263,49283,49304,49324,49344,49364,49383,49402,49421,49441,49468,49489,49511,49531,49552,49573,49607,49628,49648,49669,49689,49709,49731,49750],{},[933,49147,49148,49152],{},[951,49149,49150],{"align":997},[1692,49151,3004],{},[951,49153,49154,49155,49157,49159,49160,49163,49165,49167],{"align":997},"Type: ",[618,49156,41244],{},[7576,49158],{},"Default: ",[618,49161,49162],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[7576,49164],{},[7576,49166],{},"Texture or image path for individual sparkles",[933,49169,49170,49174],{},[951,49171,49172],{"align":997},[1692,49173,5279],{},[951,49175,49154,49176,49179,49159,49181,49183,49185,49187,49188,49190],{"align":997},[618,49177,49178],{},"Object3D | BufferGeometry",[7576,49180],{},[618,49182,1167],{},[7576,49184],{},[7576,49186],{},"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.",[7576,49189],{},[2236,49191,49192,49195,49198],{},[2239,49193,49194],{},"If provided, the component will use the passed geometry.",[2239,49196,49197],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2239,49199,49200],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[933,49202,49203,49207],{},[951,49204,49205],{"align":997},[1692,49206,48838],{},[951,49208,49154,49209,49211,49159,49213,49215,49217,49219,49220,49222],{"align":997},[618,49210,7643],{},[7576,49212],{},[618,49214,1167],{},[7576,49216],{},[7576,49218],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[618,49221,48838],{}," is provided, the default \"up\" vector will be used.",[933,49224,49225,49230],{},[951,49226,49227],{"align":997},[1692,49228,49229],{},"lifetimeSec",[951,49231,49154,49232,49234,49159,49236,49238,49240,49242],{"align":997},[618,49233,5375],{},[7576,49235],{},[618,49237,39199],{},[7576,49239],{},[7576,49241],{},"Particle lifetime in seconds",[933,49244,49245,49250],{},[951,49246,49247],{"align":997},[1692,49248,49249],{},"cooldownSec",[951,49251,49154,49252,49254,49159,49256,49258,49260,49262],{"align":997},[618,49253,5375],{},[7576,49255],{},[618,49257,13741],{},[7576,49259],{},[7576,49261],{},"Particle cooldown in seconds – time between lifetime end and respawn",[933,49264,49265,49270],{},[951,49266,49267],{"align":997},[1692,49268,49269],{},"normalThreshold",[951,49271,49154,49272,49274,49159,49276,49278,49280,49282],{"align":997},[618,49273,5375],{},[7576,49275],{},[618,49277,47570],{},[7576,49279],{},[7576,49281],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[933,49284,49285,49290],{},[951,49286,49287],{"align":997},[1692,49288,49289],{},"noiseScale",[951,49291,49154,49292,49294,49159,49296,49299,49301,49303],{"align":997},[618,49293,5375],{},[7576,49295],{},[618,49297,49298],{},"3.0",[7576,49300],{},[7576,49302],{},"Scale of the noise period (lower == more slowly cycling noise)",[933,49305,49306,49311],{},[951,49307,49308],{"align":997},[1692,49309,49310],{},"scaleNoise",[951,49312,49154,49313,49315,49159,49317,49319,49321,49323],{"align":997},[618,49314,5375],{},[7576,49316],{},[618,49318,13682],{},[7576,49320],{},[7576,49322],{},"Noise coefficient applied to particle scale",[933,49325,49326,49331],{},[951,49327,49328],{"align":997},[1692,49329,49330],{},"offsetNoise",[951,49332,49154,49333,49335,49159,49337,49339,49341,49343],{"align":997},[618,49334,5375],{},[7576,49336],{},[618,49338,2186],{},[7576,49340],{},[7576,49342],{},"Noise coefficient applied to particle offset",[933,49345,49346,49351],{},[951,49347,49348],{"align":997},[1692,49349,49350],{},"lifetimeNoise",[951,49352,49154,49353,49355,49159,49357,49359,49361,49363],{"align":997},[618,49354,5375],{},[7576,49356],{},[618,49358,13804],{},[7576,49360],{},[7576,49362],{},"Noise coefficient applied to particle lifetime",[933,49365,49366,49370],{},[951,49367,49368],{"align":997},[1692,49369,16749],{},[951,49371,49154,49372,49374,49159,49376,49378,49380,49382],{"align":997},[618,49373,5375],{},[7576,49375],{},[618,49377,13682],{},[7576,49379],{},[7576,49381],{},"Particle scale multiplier",[933,49384,49385,49389],{},[951,49386,49387],{"align":997},[1692,49388,46241],{},[951,49390,49154,49391,49393,49159,49395,49397,49399,49401],{"align":997},[618,49392,5375],{},[7576,49394],{},[618,49396,13682],{},[7576,49398],{},[7576,49400],{},"Opacity multiplier",[933,49403,49404,49408],{},[951,49405,49406],{"align":997},[1692,49407,40443],{},[951,49409,49154,49410,49412,49159,49414,49416,49418,49420],{"align":997},[618,49411,5375],{},[7576,49413],{},[618,49415,13682],{},[7576,49417],{},[7576,49419],{},"Offset multiplier",[933,49422,49423,49428],{},[951,49424,49425],{"align":997},[1692,49426,49427],{},"surfaceDistance",[951,49429,49154,49430,49432,49159,49434,49436,49438,49440],{"align":997},[618,49431,5375],{},[7576,49433],{},[618,49435,13682],{},[7576,49437],{},[7576,49439],{},"Surface distance multiplier",[933,49442,49443,49448],{},[951,49444,49445],{"align":997},[1692,49446,49447],{},"sequenceColor",[951,49449,49154,49450,49452,49159,49454,49457,49459,2463,49461,49464,49465,49467],{"align":997},[618,49451,48551],{},[7576,49453],{},[618,49455,49456],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7576,49458],{},[7576,49460],{},[1697,49462,49463],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7576,49466],{},"Color sequence as particles progress",[933,49469,49470,49475],{},[951,49471,49472],{"align":997},[1692,49473,49474],{},"sequenceAlpha",[951,49476,49154,49477,49480,49159,49482,49484,49486,49488],{"align":997},[618,49478,49479],{},"Gradient\u003Cnumber>",[7576,49481],{},[618,49483,48727],{},[7576,49485],{},[7576,49487],{},"Opacity sequence as particles progress",[933,49490,49491,49496],{},[951,49492,49493],{"align":997},[1692,49494,49495],{},"sequenceOffset",[951,49497,49154,49498,49501,49159,49503,49506,49508,49510],{"align":997},[618,49499,49500],{},"Gradient\u003C[number, number, number]>",[7576,49502],{},[618,49504,49505],{},"[0.0, 0.0, 0.0]",[7576,49507],{},[7576,49509],{},"Distance sequence as particles progress",[933,49512,49513,49518],{},[951,49514,49515],{"align":997},[1692,49516,49517],{},"sequenceNoise",[951,49519,49154,49520,49522,49159,49524,49526,49528,49530],{"align":997},[618,49521,49500],{},[7576,49523],{},[618,49525,11936],{},[7576,49527],{},[7576,49529],{},"Noise sequence as particles progress",[933,49532,49533,49538],{},[951,49534,49535],{"align":997},[1692,49536,49537],{},"sequenceSize",[951,49539,49154,49540,49542,49159,49544,49547,49549,49551],{"align":997},[618,49541,49479],{},[7576,49543],{},[618,49545,49546],{},"[0.0, 1.0]",[7576,49548],{},[7576,49550],{},"Size sequence as particles progress",[933,49553,49554,49559],{},[951,49555,49556],{"align":997},[1692,49557,49558],{},"sequenceSurfaceDistance",[951,49560,49154,49561,49563,49159,49565,49568,49570,49572],{"align":997},[618,49562,49479],{},[7576,49564],{},[618,49566,49567],{},"[0.05, 0.08, 0.1]",[7576,49569],{},[7576,49571],{},"Distance from surface (along normal) as particles progress",[933,49574,49575,49580],{},[951,49576,49577],{"align":997},[1692,49578,49579],{},"mixColor",[951,49581,49154,49582,49584,49159,49586,49588,49590,49592,49593,49595,49603,49604,49606],{"align":997},[618,49583,5375],{},[7576,49585],{},[618,49587,1969],{},[7576,49589],{},[7576,49591],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7576,49594],{},[2236,49596,49597,49600],{},[2239,49598,49599],{},"its normal \"facing\" the directionalLight",[2239,49601,49602],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7576,49605],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[933,49608,49609,49614],{},[951,49610,49611],{"align":997},[1692,49612,49613],{},"mixAlpha",[951,49615,49154,49616,49618,49159,49620,49623,49625,49627],{"align":997},[618,49617,5375],{},[7576,49619],{},[618,49621,49622],{},"1.",[7576,49624],{},[7576,49626],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[933,49629,49630,49635],{},[951,49631,49632],{"align":997},[1692,49633,49634],{},"mixOffset",[951,49636,49154,49637,49639,49159,49641,49643,49645,49647],{"align":997},[618,49638,5375],{},[7576,49640],{},[618,49642,49622],{},[7576,49644],{},[7576,49646],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[933,49649,49650,49655],{},[951,49651,49652],{"align":997},[1692,49653,49654],{},"mixSize",[951,49656,49154,49657,49659,49159,49661,49664,49666,49668],{"align":997},[618,49658,5375],{},[7576,49660],{},[618,49662,49663],{},"0.",[7576,49665],{},[7576,49667],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[933,49670,49671,49676],{},[951,49672,49673],{"align":997},[1692,49674,49675],{},"mixSurfaceDistance",[951,49677,49154,49678,49680,49159,49682,49684,49686,49688],{"align":997},[618,49679,5375],{},[7576,49681],{},[618,49683,49622],{},[7576,49685],{},[7576,49687],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[933,49690,49691,49696],{},[951,49692,49693],{"align":997},[1692,49694,49695],{},"mixNoise",[951,49697,49154,49698,49700,49159,49702,49704,49706,49708],{"align":997},[618,49699,5375],{},[7576,49701],{},[618,49703,49622],{},[7576,49705],{},[7576,49707],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[933,49710,49711,49716],{},[951,49712,49713],{"align":997},[1692,49714,49715],{},"blending",[951,49717,49154,49718,49721,49159,49723,49726,49728,49730],{"align":997},[618,49719,49720],{},"Blending",[7576,49722],{},[618,49724,49725],{},"AdditiveBlending",[7576,49727],{},[7576,49729],{},"Material blending",[933,49732,49733,49737],{},[951,49734,49735],{"align":997},[1692,49736,11644],{},[951,49738,49154,49739,49741,49159,49743,49745,49747,49749],{"align":997},[618,49740,17582],{},[7576,49742],{},[618,49744,961],{},[7576,49746],{},[7576,49748],{},"Material transparency",[933,49751,49752,49756],{},[951,49753,49754],{"align":997},[1692,49755,10433],{},[951,49757,49154,49758,49760,49159,49762,49764,49766,49768],{"align":997},[618,49759,17582],{},[7576,49761],{},[618,49763,971],{},[7576,49765],{},[7576,49767],{},"Material depth write",[1349,49770,11208],{},{"title":576,"searchDepth":577,"depth":578,"links":49772},[49773,49779],{"id":624,"depth":578,"text":15,"children":49774},[49775,49776,49777,49778],{"id":48061,"depth":708,"text":48062},{"id":48232,"depth":708,"text":48233},{"id":48499,"depth":708,"text":48500},{"id":48783,"depth":708,"text":48784},{"id":921,"depth":578,"text":922},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":407,"description":49780},"HM8JeL6MyPB0GIa8xnkj-A_wEWc2xfe0JgLNTCfq1Wg",{"id":49785,"title":411,"body":49786,"description":50431,"extension":591,"links":592,"meta":50432,"navigation":594,"path":412,"seo":50433,"stem":413,"__hash__":50434},"docs/2.api/8.staging/stage.md",{"type":501,"value":49787,"toc":50425},[49788,49793,49796,49810,49829,49878,49880,50207,50209,50321,50325,50328,50410,50422],[2318,49789,49790],{},[49791,49792],"staging-stage",{},[614,49794,49795],{},"This component creates a \"stage\" for your models. It sets up:",[2236,49797,49798,49801,49804,49807],{},[2239,49799,49800],{},"model lighting",[2239,49802,49803],{},"ground shadows",[2239,49805,49806],{},"zoom to fit",[2239,49808,49809],{},"environment",[2028,49811,49812,49815],{},[614,49813,49814],{},"If you are using other camera controls, be sure to make them the 'default'.",[626,49816,49817],{"className":628,"code":2053,"language":633,"meta":576,"style":576},[618,49818,49819],{"__ignoreMap":576},[637,49820,49821,49823,49825,49827],{"class":639,"line":577},[637,49822,643],{"class":642},[637,49824,795],{"class":646},[637,49826,1874],{"class":650},[637,49828,787],{"class":642},[2028,49830,49831,49834,49849],{},[614,49832,49833],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[626,49835,49837],{"className":628,"code":49836,"language":633,"meta":576,"style":576},"\u003CTresCanvas shadows />\n",[618,49838,49839],{"__ignoreMap":576},[637,49840,49841,49843,49845,49847],{"class":639,"line":577},[637,49842,643],{"class":642},[637,49844,761],{"class":646},[637,49846,42631],{"class":650},[637,49848,787],{"class":642},[626,49850,49852],{"className":628,"code":49851,"language":633,"meta":576,"style":576},"\u003CTresMesh cast-shadow />\n ...\n\u003C/TresMesh>\n",[618,49853,49854,49864,49868],{"__ignoreMap":576},[637,49855,49856,49858,49860,49862],{"class":639,"line":577},[637,49857,643],{"class":642},[637,49859,856],{"class":646},[637,49861,16388],{"class":650},[637,49863,787],{"class":642},[637,49865,49866],{"class":639,"line":578},[637,49867,13976],{"class":683},[637,49869,49870,49872,49874,49876],{"class":639,"line":708},[637,49871,643],{"class":642},[637,49873,8519],{"class":683},[637,49875,856],{"class":646},[637,49877,669],{"class":642},[504,49879,15],{"id":624},[626,49881,49884],{"className":628,"code":49882,"highlights":49883,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stage, OrbitControls, Plane } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003COrbitControls make-default />\n \u003CStage\n lighting=\"rembrandt\"\n shadows=\"contact\"\n :adjust-camera=\"true\"\n environment=\"city\"\n :intensity=\"0.5\"\n >\n \u003CTresMesh cast-shadow>\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"orange\" />\n \u003C/TresMesh>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[5, 5]\">\n \u003CTresMeshStandardMaterial />\n \u003C/Plane>\n \u003C/Stage>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827,631,850,861],[618,49885,49886,49906,49924,49952,49960,49964,49972,49982,50000,50010,50018,50033,50048,50062,50076,50089,50093,50103,50111,50129,50137,50167,50175,50183,50191,50199],{"__ignoreMap":576},[637,49887,49888,49890,49892,49894,49896,49898,49900,49902,49904],{"class":639,"line":577},[637,49889,643],{"class":642},[637,49891,647],{"class":646},[637,49893,651],{"class":650},[637,49895,654],{"class":650},[637,49897,657],{"class":642},[637,49899,660],{"class":642},[637,49901,664],{"class":663},[637,49903,660],{"class":642},[637,49905,669],{"class":642},[637,49907,49908,49910,49912,49914,49916,49918,49920,49922],{"class":639,"line":578},[637,49909,677],{"class":676},[637,49911,680],{"class":642},[637,49913,715],{"class":683},[637,49915,693],{"class":642},[637,49917,696],{"class":676},[637,49919,699],{"class":642},[637,49921,724],{"class":663},[637,49923,705],{"class":642},[637,49925,49927,49929,49931,49934,49936,49938,49940,49942,49944,49946,49948,49950],{"class":49926,"line":708},[639,673],[637,49928,677],{"class":676},[637,49930,680],{"class":642},[637,49932,49933],{"class":683}," Stage",[637,49935,687],{"class":642},[637,49937,690],{"class":683},[637,49939,687],{"class":642},[637,49941,43173],{"class":683},[637,49943,693],{"class":642},[637,49945,696],{"class":676},[637,49947,699],{"class":642},[637,49949,702],{"class":663},[637,49951,705],{"class":642},[637,49953,49954,49956,49958],{"class":639,"line":729},[637,49955,732],{"class":642},[637,49957,647],{"class":646},[637,49959,669],{"class":642},[637,49961,49962],{"class":639,"line":739},[637,49963,742],{"emptyLinePlaceholder":594},[637,49965,49966,49968,49970],{"class":639,"line":745},[637,49967,643],{"class":642},[637,49969,750],{"class":646},[637,49971,669],{"class":642},[637,49973,49974,49976,49978,49980],{"class":639,"line":755},[637,49975,758],{"class":642},[637,49977,761],{"class":646},[637,49979,42631],{"class":650},[637,49981,669],{"class":642},[637,49983,49984,49986,49988,49990,49992,49994,49996,49998],{"class":639,"line":778},[637,49985,781],{"class":642},[637,49987,784],{"class":646},[637,49989,1508],{"class":650},[637,49991,657],{"class":642},[637,49993,660],{"class":642},[637,49995,42648],{"class":663},[637,49997,660],{"class":642},[637,49999,787],{"class":642},[637,50001,50002,50004,50006,50008],{"class":639,"line":790},[637,50003,781],{"class":642},[637,50005,795],{"class":646},[637,50007,1874],{"class":650},[637,50009,787],{"class":642},[637,50011,50013,50015],{"class":50012,"line":800},[639,673],[637,50014,781],{"class":642},[637,50016,50017],{"class":646},"Stage\n",[637,50019,50021,50024,50026,50028,50031],{"class":50020,"line":805},[639,673],[637,50022,50023],{"class":650}," lighting",[637,50025,657],{"class":642},[637,50027,660],{"class":642},[637,50029,50030],{"class":663},"rembrandt",[637,50032,3154],{"class":642},[637,50034,50036,50039,50041,50043,50046],{"class":50035,"line":827},[639,673],[637,50037,50038],{"class":650}," shadows",[637,50040,657],{"class":642},[637,50042,660],{"class":642},[637,50044,50045],{"class":663},"contact",[637,50047,3154],{"class":642},[637,50049,50051,50054,50056,50058,50060],{"class":50050,"line":631},[639,673],[637,50052,50053],{"class":650}," :adjust-camera",[637,50055,657],{"class":642},[637,50057,660],{"class":642},[637,50059,961],{"class":663},[637,50061,3154],{"class":642},[637,50063,50065,50068,50070,50072,50074],{"class":50064,"line":850},[639,673],[637,50066,50067],{"class":650}," environment",[637,50069,657],{"class":642},[637,50071,660],{"class":642},[637,50073,29106],{"class":663},[637,50075,3154],{"class":642},[637,50077,50079,50081,50083,50085,50087],{"class":50078,"line":861},[639,673],[637,50080,17266],{"class":650},[637,50082,657],{"class":642},[637,50084,660],{"class":642},[637,50086,1969],{"class":663},[637,50088,3154],{"class":642},[637,50090,50091],{"class":639,"line":872},[637,50092,12412],{"class":642},[637,50094,50095,50097,50099,50101],{"class":639,"line":882},[637,50096,853],{"class":642},[637,50098,856],{"class":646},[637,50100,16388],{"class":650},[637,50102,669],{"class":642},[637,50104,50105,50107,50109],{"class":639,"line":632},[637,50106,864],{"class":642},[637,50108,867],{"class":646},[637,50110,787],{"class":642},[637,50112,50113,50115,50117,50119,50121,50123,50125,50127],{"class":639,"line":902},[637,50114,864],{"class":642},[637,50116,2709],{"class":646},[637,50118,2712],{"class":650},[637,50120,657],{"class":642},[637,50122,660],{"class":642},[637,50124,13348],{"class":663},[637,50126,660],{"class":642},[637,50128,787],{"class":642},[637,50130,50131,50133,50135],{"class":639,"line":912},[637,50132,885],{"class":642},[637,50134,856],{"class":646},[637,50136,669],{"class":642},[637,50138,50139,50141,50143,50145,50147,50149,50151,50153,50155,50157,50159,50161,50163,50165],{"class":639,"line":2648},[637,50140,853],{"class":642},[637,50142,261],{"class":646},[637,50144,1508],{"class":650},[637,50146,657],{"class":642},[637,50148,660],{"class":642},[637,50150,39982],{"class":663},[637,50152,660],{"class":642},[637,50154,42883],{"class":650},[637,50156,1982],{"class":650},[637,50158,657],{"class":642},[637,50160,660],{"class":642},[637,50162,40017],{"class":663},[637,50164,660],{"class":642},[637,50166,669],{"class":642},[637,50168,50169,50171,50173],{"class":639,"line":2657},[637,50170,864],{"class":642},[637,50172,2709],{"class":646},[637,50174,787],{"class":642},[637,50176,50177,50179,50181],{"class":639,"line":2677},[637,50178,885],{"class":642},[637,50180,261],{"class":646},[637,50182,669],{"class":642},[637,50184,50185,50187,50189],{"class":639,"line":2686},[637,50186,895],{"class":642},[637,50188,411],{"class":646},[637,50190,669],{"class":642},[637,50192,50193,50195,50197],{"class":639,"line":2695},[637,50194,905],{"class":642},[637,50196,761],{"class":646},[637,50198,669],{"class":642},[637,50200,50201,50203,50205],{"class":639,"line":2704},[637,50202,732],{"class":642},[637,50204,750],{"class":646},[637,50206,669],{"class":642},[504,50208,922],{"id":921},[927,50210,50211,50221],{},[930,50212,50213],{},[933,50214,50215,50217,50219],{},[936,50216,938],{"align":997},[936,50218,941],{"align":997},[936,50220,944],{"align":997},[946,50222,50223,50241,50259,50277,50291,50307],{},[933,50224,50225,50230,50236],{},[951,50226,50227],{"align":997},[1692,50228,50229],{},"lighting",[951,50231,50232,50233],{"align":997},"Lighting setup. Options: ",[618,50234,50235],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[951,50237,50238],{"align":997},[618,50239,50240],{},"'rembrandt'",[933,50242,50243,50248,50254],{},[951,50244,50245],{"align":997},[1692,50246,50247],{},"shadows",[951,50249,50250,50251],{"align":997},"Controls the ground shadows. Options: ",[618,50252,50253],{},"boolean | 'contact' | 'accumulative' | StageShadows",[951,50255,50256],{"align":997},[618,50257,50258],{},"'contact'",[933,50260,50261,50266,50273],{},[951,50262,50263],{"align":997},[1692,50264,50265],{},"adjustCamera",[951,50267,50268,50269,50272],{"align":997},"Optionally wraps and thereby centers the models using ",[618,50270,50271],{},"\u003CBounds>",", can also be a camera offset",[951,50274,50275],{"align":997},[618,50276,961],{},[933,50278,50279,50283,50286],{},[951,50280,50281],{"align":997},[1692,50282,49809],{},[951,50284,50285],{"align":997},"The default environment",[951,50287,50288],{"align":997},[618,50289,50290],{},"'city'",[933,50292,50293,50297,50303],{},[951,50294,50295],{"align":997},[1692,50296,2088],{},[951,50298,50299,50300,50302],{"align":997},"Lighting intensity, ",[618,50301,965],{}," removes lights",[951,50304,50305],{"align":997},[618,50306,1969],{},[933,50308,50309,50314,50317],{},[951,50310,50311],{"align":997},[1692,50312,50313],{},"align",[951,50315,50316],{"align":997},"To adjust alignment",[951,50318,50319],{"align":997},[618,50320,1167],{},[4074,50322,50324],{"id":50323},"stageshadows-type","StageShadows Type",[614,50326,50327],{},"When using custom shadow configuration, you can pass an object with the following properties:",[927,50329,50330,50340],{},[930,50331,50332],{},[933,50333,50334,50336,50338],{},[936,50335,938],{"align":997},[936,50337,941],{"align":997},[936,50339,944],{"align":997},[946,50341,50342,50356,50369,50383,50397],{},[933,50343,50344,50348,50354],{},[951,50345,50346],{"align":997},[1692,50347,5540],{},[951,50349,50350,50351],{"align":997},"Shadow type: ",[618,50352,50353],{},"'contact' | 'accumulative'",[951,50355,8526],{"align":997},[933,50357,50358,50362,50365],{},[951,50359,50360],{"align":997},[1692,50361,40443],{},[951,50363,50364],{"align":997},"Shadow plane offset",[951,50366,50367],{"align":997},[618,50368,965],{},[933,50370,50371,50375,50378],{},[951,50372,50373],{"align":997},[1692,50374,43025],{},[951,50376,50377],{"align":997},"Shadow bias",[951,50379,50380],{"align":997},[618,50381,50382],{},"-0.0001",[933,50384,50385,50390,50393],{},[951,50386,50387],{"align":997},[1692,50388,50389],{},"normalBias",[951,50391,50392],{"align":997},"Shadow normal bias",[951,50394,50395],{"align":997},[618,50396,965],{},[933,50398,50399,50403,50406],{},[951,50400,50401],{"align":997},[1692,50402,16749],{},[951,50404,50405],{"align":997},"Shadow map size",[951,50407,50408],{"align":997},[618,50409,39499],{},[614,50411,50412,50413,1695,50416,1711,50419,1146],{},"Additionally inherits all props from ",[618,50414,50415],{},"AccumulativeShadowsProps",[618,50417,50418],{},"RandomizedLightsProps",[618,50420,50421],{},"ContactShadowsProps",[1349,50423,50424],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":50426},[50427,50428],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922,"children":50429},[50430],{"id":50323,"depth":708,"text":50324},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":411,"description":50431},"hSS8yTJaUJKvnoLWg1iE6UZbvoW8pB9UqSUcFjHv5sQ",{"id":50436,"title":415,"body":50437,"description":50710,"extension":591,"links":592,"meta":50711,"navigation":594,"path":416,"seo":50712,"stem":417,"__hash__":50713},"docs/2.api/8.staging/stars.md",{"type":501,"value":50438,"toc":50706},[50439,50444,50450,50452,50457,50600,50602,50704],[608,50440,50441],{},[50442,50443],"staging-stars",{},[614,50445,50446,50449],{},[618,50447,50448],{},"\u003CStars />"," is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect",[504,50451,15],{"id":624},[614,50453,46314,50454,50456],{},[618,50455,50448],{}," component without passing any props,",[626,50458,50461],{"className":628,"code":50459,"highlights":50460,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stars } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n \u003CStars />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,50462,50463,50483,50501,50521,50529,50533,50541,50549,50567,50576,50584,50592],{"__ignoreMap":576},[637,50464,50465,50467,50469,50471,50473,50475,50477,50479,50481],{"class":639,"line":577},[637,50466,643],{"class":642},[637,50468,647],{"class":646},[637,50470,651],{"class":650},[637,50472,654],{"class":650},[637,50474,657],{"class":642},[637,50476,660],{"class":642},[637,50478,664],{"class":663},[637,50480,660],{"class":642},[637,50482,669],{"class":642},[637,50484,50485,50487,50489,50491,50493,50495,50497,50499],{"class":639,"line":578},[637,50486,677],{"class":676},[637,50488,680],{"class":642},[637,50490,715],{"class":683},[637,50492,693],{"class":642},[637,50494,696],{"class":676},[637,50496,699],{"class":642},[637,50498,724],{"class":663},[637,50500,705],{"class":642},[637,50502,50504,50506,50508,50511,50513,50515,50517,50519],{"class":50503,"line":708},[639,673],[637,50505,677],{"class":676},[637,50507,680],{"class":642},[637,50509,50510],{"class":683}," Stars",[637,50512,693],{"class":642},[637,50514,696],{"class":676},[637,50516,699],{"class":642},[637,50518,702],{"class":663},[637,50520,705],{"class":642},[637,50522,50523,50525,50527],{"class":639,"line":729},[637,50524,732],{"class":642},[637,50526,647],{"class":646},[637,50528,669],{"class":642},[637,50530,50531],{"class":639,"line":739},[637,50532,742],{"emptyLinePlaceholder":594},[637,50534,50535,50537,50539],{"class":639,"line":745},[637,50536,643],{"class":642},[637,50538,750],{"class":646},[637,50540,669],{"class":642},[637,50542,50543,50545,50547],{"class":639,"line":755},[637,50544,758],{"class":642},[637,50546,761],{"class":646},[637,50548,669],{"class":642},[637,50550,50551,50553,50555,50557,50559,50561,50563,50565],{"class":639,"line":778},[637,50552,781],{"class":642},[637,50554,784],{"class":646},[637,50556,1508],{"class":650},[637,50558,657],{"class":642},[637,50560,660],{"class":642},[637,50562,42648],{"class":663},[637,50564,660],{"class":642},[637,50566,787],{"class":642},[637,50568,50570,50572,50574],{"class":50569,"line":790},[639,673],[637,50571,781],{"class":642},[637,50573,415],{"class":646},[637,50575,787],{"class":642},[637,50577,50578,50580,50582],{"class":639,"line":800},[637,50579,781],{"class":642},[637,50581,9702],{"class":646},[637,50583,787],{"class":642},[637,50585,50586,50588,50590],{"class":639,"line":805},[637,50587,905],{"class":642},[637,50589,761],{"class":646},[637,50591,669],{"class":642},[637,50593,50594,50596,50598],{"class":639,"line":827},[637,50595,732],{"class":642},[637,50597,750],{"class":646},[637,50599,669],{"class":642},[504,50601,922],{"id":921},[927,50603,50604,50614],{},[930,50605,50606],{},[933,50607,50608,50610,50612],{},[936,50609,938],{"align":997},[936,50611,941],{"align":997},[936,50613,944],{},[946,50615,50616,50627,50638,50649,50660,50671,50682,50693],{},[933,50617,50618,50622,50625],{},[951,50619,50620],{"align":997},[1692,50621,16749],{},[951,50623,50624],{"align":997},"The size of the stars",[951,50626,2186],{},[933,50628,50629,50633,50636],{},[951,50630,50631],{"align":997},[1692,50632,47239],{},[951,50634,50635],{"align":997},"keep the same size regardless distance.",[951,50637,961],{},[933,50639,50640,50644,50647],{},[951,50641,50642],{"align":997},[1692,50643,11644],{},[951,50645,50646],{"align":997},"show transparency on the stars texture",[951,50648,961],{},[933,50650,50651,50655,50658],{},[951,50652,50653],{"align":997},[1692,50654,39445],{},[951,50656,50657],{"align":997},"enables the WebGL to know when not to render the pixeltext.",[951,50659,1909],{},[933,50661,50662,50666,50669],{},[951,50663,50664],{"align":997},[1692,50665,47148],{},[951,50667,50668],{"align":997},"texture of the stars",[951,50670,3679],{},[933,50672,50673,50677,50680],{},[951,50674,50675],{"align":997},[1692,50676,12030],{},[951,50678,50679],{"align":997},"number of stars",[951,50681,9150],{},[933,50683,50684,50688,50691],{},[951,50685,50686],{"align":997},[1692,50687,13105],{},[951,50689,50690],{"align":997},"depth of star's shape",[951,50692,11397],{},[933,50694,50695,50699,50702],{},[951,50696,50697],{"align":997},[1692,50698,42971],{},[951,50700,50701],{"align":997},"Radius of star's shape",[951,50703,11190],{},[1349,50705,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":50707},[50708,50709],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":415,"description":50710},"nf8ELCqPC9wunPJnkUB5dskxDLHX1_sPobCeok4_v9w",[50715,51655,52055,53144,53519,59057,59645,60433,61717,62890],{"id":50716,"title":425,"body":50717,"description":51651,"extension":591,"links":592,"meta":51652,"navigation":594,"path":426,"seo":51653,"stem":427,"__hash__":51654},"docs/2.api/9.objects/animated-sprite.md",{"type":501,"value":50718,"toc":51633},[50719,50724,50739,50747,50749,50939,50949,50953,50959,50973,50982,50986,50993,51012,51016,51024,51028,51053,51055,51382,51384,51452,51455,51461,51465,51468,51473,51476,51488,51503,51505,51508,51545,51548,51560,51564,51572,51582,51588,51591,51621,51624,51631],[608,50720,50721],{},[50722,50723],"objects-animated-sprite",{},[614,50725,50726,50729,50730,50735,50736,50738],{},[618,50727,50728],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1140,50731,50734],{"href":50732,"rel":50733},"https://en.wikipedia.org/wiki/Texture_atlas",[1144],"texture atlas",". A typical ",[618,50737,50728],{}," will use:",[2236,50740,50741,50744],{},[2239,50742,50743],{},"An image containing multiple sprites",[2239,50745,50746],{},"A JSON atlas containing the individual sprite coordinates in the image",[504,50748,15],{"id":624},[626,50750,50753],{"className":628,"code":50751,"highlights":50752,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs/cientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CAnimatedSprite\n image=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png\"\n atlas=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json\"\n :animation=\"currentAnimation\"\n />\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[578,800,805,827,631,850],[618,50754,50755,50775,50795,50799,50821,50829,50833,50841,50849,50857,50865,50880,50895,50910,50915,50923,50931],{"__ignoreMap":576},[637,50756,50757,50759,50761,50763,50765,50767,50769,50771,50773],{"class":639,"line":577},[637,50758,643],{"class":642},[637,50760,647],{"class":646},[637,50762,651],{"class":650},[637,50764,654],{"class":650},[637,50766,657],{"class":642},[637,50768,660],{"class":642},[637,50770,664],{"class":663},[637,50772,660],{"class":642},[637,50774,669],{"class":642},[637,50776,50778,50780,50782,50785,50787,50789,50791,50793],{"class":50777,"line":578},[639,673],[637,50779,677],{"class":676},[637,50781,680],{"class":642},[637,50783,50784],{"class":683}," AnimatedSprite",[637,50786,693],{"class":642},[637,50788,696],{"class":676},[637,50790,699],{"class":642},[637,50792,702],{"class":663},[637,50794,705],{"class":642},[637,50796,50797],{"class":639,"line":708},[637,50798,742],{"emptyLinePlaceholder":594},[637,50800,50801,50803,50806,50808,50810,50812,50814,50817,50819],{"class":639,"line":729},[637,50802,2438],{"class":650},[637,50804,50805],{"class":683}," currentAnimation ",[637,50807,657],{"class":642},[637,50809,3895],{"class":2457},[637,50811,2460],{"class":683},[637,50813,2463],{"class":642},[637,50815,50816],{"class":663},"cientosIdle",[637,50818,2463],{"class":642},[637,50820,2471],{"class":683},[637,50822,50823,50825,50827],{"class":639,"line":739},[637,50824,732],{"class":642},[637,50826,647],{"class":646},[637,50828,669],{"class":642},[637,50830,50831],{"class":639,"line":745},[637,50832,742],{"emptyLinePlaceholder":594},[637,50834,50835,50837,50839],{"class":639,"line":755},[637,50836,643],{"class":642},[637,50838,750],{"class":646},[637,50840,669],{"class":642},[637,50842,50843,50845,50847],{"class":639,"line":778},[637,50844,758],{"class":642},[637,50846,761],{"class":646},[637,50848,669],{"class":642},[637,50850,50851,50853,50855],{"class":639,"line":790},[637,50852,781],{"class":642},[637,50854,21668],{"class":646},[637,50856,669],{"class":642},[637,50858,50860,50862],{"class":50859,"line":800},[639,673],[637,50861,853],{"class":642},[637,50863,50864],{"class":646},"AnimatedSprite\n",[637,50866,50868,50871,50873,50875,50878],{"class":50867,"line":805},[639,673],[637,50869,50870],{"class":650}," image",[637,50872,657],{"class":642},[637,50874,660],{"class":642},[637,50876,50877],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[637,50879,3154],{"class":642},[637,50881,50883,50886,50888,50890,50893],{"class":50882,"line":827},[639,673],[637,50884,50885],{"class":650}," atlas",[637,50887,657],{"class":642},[637,50889,660],{"class":642},[637,50891,50892],{"class":663},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[637,50894,3154],{"class":642},[637,50896,50898,50901,50903,50905,50908],{"class":50897,"line":631},[639,673],[637,50899,50900],{"class":650}," :animation",[637,50902,657],{"class":642},[637,50904,660],{"class":642},[637,50906,50907],{"class":663},"currentAnimation",[637,50909,3154],{"class":642},[637,50911,50913],{"class":50912,"line":850},[639,673],[637,50914,8054],{"class":642},[637,50916,50917,50919,50921],{"class":639,"line":861},[637,50918,895],{"class":642},[637,50920,21668],{"class":646},[637,50922,669],{"class":642},[637,50924,50925,50927,50929],{"class":639,"line":872},[637,50926,905],{"class":642},[637,50928,761],{"class":646},[637,50930,669],{"class":642},[637,50932,50933,50935,50937],{"class":639,"line":882},[637,50934,732],{"class":642},[637,50936,750],{"class":646},[637,50938,669],{"class":642},[3222,50940,50941],{},[614,50942,50943,50945,50946,1146],{},[618,50944,50728],{}," loads resources asynchronously, so it must be wrapped in a ",[618,50947,50948],{},"\u003CSuspense />",[504,50950,50952],{"id":50951},"compiling-an-atlas","Compiling an atlas",[614,50954,50955,50956,50958],{},"In typical usage, ",[618,50957,50728],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2236,50960,50961,50967],{},[2239,50962,50963],{},[1140,50964,50966],{"href":50877,"rel":50965},[1144],"example compiled texture",[2239,50968,50969],{},[1140,50970,50972],{"href":50892,"rel":50971},[1144],"example JSON atlas",[614,50974,50975,50976,50981],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1140,50977,50980],{"href":50978,"rel":50979},"https://www.codeandweb.com/texturepacker",[1144],"TexturePacker"," useful.",[504,50983,50985],{"id":50984},"without-an-atlas","Without an atlas",[614,50987,50988,50989,50992],{},"There may be cases where you don't want to supply an atlas to the ",[618,50990,50991],{},"atlas"," prop. To do so:",[2236,50994,50995,50998,51001,51004],{},[2239,50996,50997],{},"Compile your source images into a single image texture.",[2239,50999,51000],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2239,51002,51003],{},"Ensure no extra padding has been added to the compiled image texture.",[2239,51005,51006,51007,51009,51010,1146],{},"Set the ",[618,51008,50991],{}," prop to number of columns, number of rows as ",[618,51011,28856],{},[504,51013,51015],{"id":51014},"spritesheets-in-the-wild","Spritesheets in the wild",[3222,51017,51018],{},[614,51019,51020,51021,51023],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[618,51022,50728],{},". In many cases, it's advisable to recompile the spritesheet.",[4074,51025,51027],{"id":51026},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2236,51029,51030,51033,51036,51039,51050],{},[2239,51031,51032],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2239,51034,51035],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[2239,51037,51038],{},"Export layers as individual images.",[2239,51040,51041,51042,51044,3217,51047,51049],{},"Name the individual images according to the following pattern: ",[7576,51043],{},[618,51045,51046],{},"[animation name][frame number].[extension]",[7576,51048],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2239,51051,51052],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[504,51054,922],{"id":921},[927,51056,51057,51067],{},[930,51058,51059],{},[933,51060,51061,51063,51065],{},[936,51062,8110],{"align":997},[936,51064,941],{"align":997},[936,51066,944],{"align":997},[946,51068,51069,51081,51119,51179,51193,51206,51230,51244,51258,51272,51286,51305,51328,51346,51364],{},[933,51070,51071,51074,51079],{},[951,51072,51073],{"align":997},"image",[951,51075,51076,51078],{"align":997},[618,51077,3595],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[951,51080],{"align":997},[933,51082,51083,51085,51117],{},[951,51084,50991],{"align":997},[951,51086,51087,51090,51091,51114,51116],{"align":997},[618,51088,51089],{},"string | Atlasish"," – ",[2236,51092,51093,51098,51103,51108],{},[2239,51094,958,51095,51097],{},[618,51096,3595],{},", the URL of the JSON atlas.",[2239,51099,958,51100,51102],{},[618,51101,5375],{},", the number of columns in the texture.",[2239,51104,958,51105,51107],{},[618,51106,28856],{},", the number of columns/rows in the texture.",[2239,51109,958,51110,51113],{},[618,51111,51112],{},"AtlasData",", the atlas as a JS object.",[7576,51115],{},"This prop is not reactive.",[951,51118],{"align":997},[933,51120,51121,51124,51177],{},[951,51122,51123],{"align":997},"definitions",[951,51125,51126,51129,51130,51132,51133,51135,51137,51138,51140,51142,51143],{"align":997},[618,51127,51128],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[618,51131,51123],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7576,51134],{},[7576,51136],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7576,51139],{},[7576,51141],{},"Here is how various definition strings convert to arrays of frames for playback:",[2236,51144,51145,51152,51159,51165,51171],{},[2239,51146,51147,51148,51151],{},"\"0,2,1\" - ",[637,51149,51150],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2239,51153,51154,51155,51158],{},"\"2(10)\" - ",[637,51156,51157],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2239,51160,51161,51162],{},"\"1-4\" - ",[637,51163,51164],{},"1,2,3,4",[2239,51166,51167,51168],{},"\"10-5(2)\" - ",[637,51169,51170],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2239,51172,51173,51174],{},"\"1-4(3),10(2)\" - ",[637,51175,51176],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[951,51178],{"align":997},[933,51180,51181,51184,51189],{},[951,51182,51183],{"align":997},"fps",[951,51185,51186,51188],{"align":997},[618,51187,5375],{}," – Desired frames per second of the animation.",[951,51190,51191],{"align":997},[618,51192,28448],{},[933,51194,51195,51197,51202],{},[951,51196,25939],{"align":997},[951,51198,51199,51201],{"align":997},[618,51200,17582],{}," – Whether or not the animation should loop.",[951,51203,51204],{"align":997},[618,51205,961],{},[933,51207,51208,51211,51226],{},[951,51209,51210],{"align":997},"animation",[951,51212,51213,51216,51217,51219,51220,51222,51223,51225],{"align":997},[618,51214,51215],{},"string | [number, number] | number"," – If ",[618,51218,3595],{},", name of the animation to play. If ",[618,51221,28856],{},", start and end frames of the animation. If ",[618,51224,5375],{},", frame number to display.",[951,51227,51228],{"align":997},[618,51229,965],{},[933,51231,51232,51235,51240],{},[951,51233,51234],{"align":997},"paused",[951,51236,51237,51239],{"align":997},[618,51238,17582],{}," – Whether the animation is paused.",[951,51241,51242],{"align":997},[618,51243,971],{},[933,51245,51246,51249,51254],{},[951,51247,51248],{"align":997},"reversed",[951,51250,51251,51253],{"align":997},[618,51252,17582],{}," – Whether to play the animation in reverse.",[951,51255,51256],{"align":997},[618,51257,971],{},[933,51259,51260,51263,51268],{},[951,51261,51262],{"align":997},"flipX",[951,51264,51265,51267],{"align":997},[618,51266,17582],{}," – Whether the sprite should be flipped, left to right.",[951,51269,51270],{"align":997},[618,51271,971],{},[933,51273,51274,51277,51282],{},[951,51275,51276],{"align":997},"resetOnEnd",[951,51278,51279,51281],{"align":997},[618,51280,17582],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[951,51283,51284],{"align":997},[618,51285,971],{},[933,51287,51288,51291,51301],{},[951,51289,51290],{"align":997},"asSprite",[951,51292,51293,51295,51296],{"align":997},[618,51294,17582],{}," – Whether to display the object as a THREE.Sprite. ",[1140,51297,51300],{"href":51298,"rel":51299},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1144],"See THREE.Sprite",[951,51302,51303],{"align":997},[618,51304,961],{},[933,51306,51307,51309,51323],{},[951,51308,29249],{"align":997},[951,51310,51311,51314,51315,51318,51319,51322],{"align":997},[618,51312,51313],{},"TresVector2"," – Anchor point of the object. A value of ",[637,51316,51317],{},"0.5, 0.5"," corresponds to the center. ",[637,51320,51321],{},"0, 0"," is left, bottom.",[951,51324,51325],{"align":997},[618,51326,51327],{},"[0.5, 0.5]",[933,51329,51330,51332,51342],{},[951,51331,39445],{"align":997},[951,51333,51334,51336,51337],{"align":997},[618,51335,5375],{}," – Alpha test value for the material. ",[1140,51338,51341],{"href":51339,"rel":51340},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1144],"See THREE.Material.alphaTest",[951,51343,51344],{"align":997},[618,51345,13804],{},[933,51347,51348,51350,51360],{},[951,51349,47963],{"align":997},[951,51351,51352,51354,51355],{"align":997},[618,51353,17582],{}," – Depth test value for the material. ",[1140,51356,51359],{"href":51357,"rel":51358},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1144],"See THREE.Material.depthTest",[951,51361,51362],{"align":997},[618,51363,961],{},[933,51365,51366,51368,51378],{},[951,51367,10433],{"align":997},[951,51369,51370,51372,51373],{"align":997},[618,51371,17582],{}," – Depth write value for the material. ",[1140,51374,51377],{"href":51375,"rel":51376},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1144],"See THREE.Material.depthWrite",[951,51379,51380],{"align":997},[618,51381,961],{},[504,51383,1171],{"id":1170},[927,51385,51386,51397],{},[930,51387,51388],{},[933,51389,51390,51392,51394],{},[936,51391,1180],{},[936,51393,941],{},[936,51395,51396],{},"Argument",[946,51398,51399,51414,51434],{},[933,51400,51401,51406,51409],{},[951,51402,51403],{},[618,51404,51405],{},"frame",[951,51407,51408],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[951,51410,51411,51413],{},[618,51412,3595],{}," – Name of the newly displayed frame",[933,51415,51416,51420,51429],{},[951,51417,51418],{},[618,51419,14342],{},[951,51421,51422,51423,51426,51427],{},"Emitted when the animation ends – ",[618,51424,51425],{},"props.loop"," must be set to ",[618,51428,971],{},[951,51430,51431,51433],{},[618,51432,3595],{}," – Name of the ending frame",[933,51435,51436,51440,51447],{},[951,51437,51438],{},[618,51439,25939],{},[951,51441,51442,51443,51426,51445],{},"Emitted when the animation loops – ",[618,51444,51425],{},[618,51446,961],{},[951,51448,51449,51451],{},[618,51450,3595],{}," – Name of the frame at the end of the loop",[504,51453,51454],{"id":51210},"Animation",[614,51456,2799,51457,51460],{},[618,51458,51459],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4074,51462,51464],{"id":51463},"using-named-animations-as-animation","Using named animations as animation",[614,51466,51467],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[614,51469,51470,51472],{},[618,51471,50728],{}," uses those filenames to automatically group images into animations.",[614,51474,51475],{},"Use either of the following naming conventions for your source images ...",[2236,51477,51478,51483],{},[2239,51479,51480],{},[618,51481,51482],{},"[animation name][frame number].[file_extension]",[2239,51484,51485],{},[618,51486,51487],{},"[animation name]_[frame number].[file_extension]",[614,51489,51490,51491,51493,51494,51497,51498,51500,51501,41259],{},"... then ",[618,51492,50728],{}," will automatically make all ",[618,51495,51496],{},"[animation name]"," available for playback. Just pass ",[618,51499,51496],{}," to the component's ",[618,51502,51459],{},[4074,51504,41365],{"id":41364},[614,51506,51507],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[927,51509,51510,51520],{},[930,51511,51512],{},[933,51513,51514,51517],{},[936,51515,51516],{},"Filenames",[936,51518,51519],{},"Animation name",[946,51521,51522,51529,51537],{},[933,51523,51524,51527],{},[951,51525,51526],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[951,51528,50816],{},[933,51530,51531,51534],{},[951,51532,51533],{},"cientosIdleToWalkTransition0000.png",[951,51535,51536],{},"cientosIdleToWalkTransition",[933,51538,51539,51542],{},[951,51540,51541],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[951,51543,51544],{},"cientosWalk",[504,51546,51547],{"id":51123},"Definitions",[614,51549,51550,51551,51554,51555,51559],{},"You can supply an object to the ",[618,51552,51553],{},":definitions"," prop. Any ",[1140,51556,51558],{"href":51557},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4074,51561,51563],{"id":51562},"demo","Demo",[614,51565,51566,51567,48808,51569,1146],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[618,51568,51459],{},[618,51570,51571],{},"'idle'",[614,51573,51574,51575,51577,51578,51581],{},"But below, we've added a ",[618,51576,51553],{}," prop with this value for the ",[618,51579,51580],{},"idle"," key:",[626,51583,51586],{"className":51584,"code":51585,"language":30340},[30338],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[618,51587,51585],{"__ignoreMap":576},[614,51589,51590],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2236,51592,51593,51602,51615],{},[2239,51594,51595,51598,51599,51601],{},[618,51596,51597],{},"0-5"," – Play all six images (",[618,51600,51597],{},") of the animation normally.",[2239,51603,51604,51607,51608,51611,51612,5597],{},[618,51605,51606],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[618,51609,51610],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[618,51613,51614],{},"3(20)",[2239,51616,51617,51620],{},[618,51618,51619],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[504,51622,51623],{"id":29249},"Center",[614,51625,51626,51627,51630],{},"In addition to being the sprite's anchor point, the ",[618,51628,51629],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1349,51632,26386],{},{"title":576,"searchDepth":577,"depth":578,"links":51634},[51635,51636,51637,51638,51641,51642,51643,51647,51650],{"id":624,"depth":578,"text":15},{"id":50951,"depth":578,"text":50952},{"id":50984,"depth":578,"text":50985},{"id":51014,"depth":578,"text":51015,"children":51639},[51640],{"id":51026,"depth":708,"text":51027},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},{"id":51210,"depth":578,"text":51454,"children":51644},[51645,51646],{"id":51463,"depth":708,"text":51464},{"id":41364,"depth":708,"text":41365},{"id":51123,"depth":578,"text":51547,"children":51648},[51649],{"id":51562,"depth":708,"text":51563},{"id":29249,"depth":578,"text":51623},"Display 2D animations defined in a texture atlas.",{},{"title":425,"description":51651},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":51656,"title":429,"body":51657,"description":52051,"extension":591,"links":592,"meta":52052,"navigation":594,"path":430,"seo":52053,"stem":431,"__hash__":52054},"docs/2.api/9.objects/cube-camera.md",{"type":501,"value":51658,"toc":52047},[51659,51664,51674,51679,51681,51948,51950,52045],[608,51660,51661],{},[51662,51663],"objects-cube-camera",{},[614,51665,51666,51669,51670,51673],{},[618,51667,51668],{},"\u003CCubeCamera />"," creates a ",[618,51671,51672],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[614,51675,51676,51678],{},[618,51677,51668],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[504,51680,15],{"id":624},[626,51682,51685],{"className":628,"code":51683,"highlights":51684,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n \u003COrbitControls />\n\n \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" />\n \u003C/TresMesh>\n \u003C/CubeCamera>\n\n \u003CTresAmbientLight :intensity=\"0.5\" />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,800,861],[618,51686,51687,51707,51731,51739,51743,51751,51759,51777,51785,51789,51820,51828,51846,51875,51883,51892,51896,51914,51932,51940],{"__ignoreMap":576},[637,51688,51689,51691,51693,51695,51697,51699,51701,51703,51705],{"class":639,"line":577},[637,51690,643],{"class":642},[637,51692,647],{"class":646},[637,51694,651],{"class":650},[637,51696,654],{"class":650},[637,51698,657],{"class":642},[637,51700,660],{"class":642},[637,51702,664],{"class":663},[637,51704,660],{"class":642},[637,51706,669],{"class":642},[637,51708,51710,51712,51714,51717,51719,51721,51723,51725,51727,51729],{"class":51709,"line":578},[639,673],[637,51711,677],{"class":676},[637,51713,680],{"class":642},[637,51715,51716],{"class":683}," CubeCamera",[637,51718,687],{"class":642},[637,51720,690],{"class":683},[637,51722,693],{"class":642},[637,51724,696],{"class":676},[637,51726,699],{"class":642},[637,51728,702],{"class":663},[637,51730,705],{"class":642},[637,51732,51733,51735,51737],{"class":639,"line":708},[637,51734,732],{"class":642},[637,51736,647],{"class":646},[637,51738,669],{"class":642},[637,51740,51741],{"class":639,"line":729},[637,51742,742],{"emptyLinePlaceholder":594},[637,51744,51745,51747,51749],{"class":639,"line":739},[637,51746,643],{"class":642},[637,51748,750],{"class":646},[637,51750,669],{"class":642},[637,51752,51753,51755,51757],{"class":639,"line":745},[637,51754,758],{"class":642},[637,51756,761],{"class":646},[637,51758,669],{"class":642},[637,51760,51761,51763,51765,51767,51769,51771,51773,51775],{"class":639,"line":755},[637,51762,781],{"class":642},[637,51764,784],{"class":646},[637,51766,1508],{"class":650},[637,51768,657],{"class":642},[637,51770,660],{"class":642},[637,51772,7466],{"class":663},[637,51774,660],{"class":642},[637,51776,787],{"class":642},[637,51778,51779,51781,51783],{"class":639,"line":778},[637,51780,781],{"class":642},[637,51782,795],{"class":646},[637,51784,787],{"class":642},[637,51786,51787],{"class":639,"line":790},[637,51788,742],{"emptyLinePlaceholder":594},[637,51790,51792,51794,51796,51799,51801,51803,51805,51807,51810,51812,51814,51816,51818],{"class":51791,"line":800},[639,673],[637,51793,781],{"class":642},[637,51795,429],{"class":646},[637,51797,51798],{"class":650}," :resolution",[637,51800,657],{"class":642},[637,51802,660],{"class":642},[637,51804,28669],{"class":663},[637,51806,660],{"class":642},[637,51808,51809],{"class":650}," :frames",[637,51811,657],{"class":642},[637,51813,660],{"class":642},[637,51815,13535],{"class":663},[637,51817,660],{"class":642},[637,51819,669],{"class":642},[637,51821,51822,51824,51826],{"class":639,"line":805},[637,51823,853],{"class":642},[637,51825,856],{"class":646},[637,51827,669],{"class":642},[637,51829,51830,51832,51834,51836,51838,51840,51842,51844],{"class":639,"line":827},[637,51831,864],{"class":642},[637,51833,3981],{"class":646},[637,51835,1982],{"class":650},[637,51837,657],{"class":642},[637,51839,660],{"class":642},[637,51841,36830],{"class":663},[637,51843,660],{"class":642},[637,51845,787],{"class":642},[637,51847,51848,51850,51852,51855,51857,51859,51861,51863,51865,51867,51869,51871,51873],{"class":639,"line":631},[637,51849,864],{"class":642},[637,51851,2709],{"class":646},[637,51853,51854],{"class":650}," :metalness",[637,51856,657],{"class":642},[637,51858,660],{"class":642},[637,51860,1897],{"class":663},[637,51862,660],{"class":642},[637,51864,45613],{"class":650},[637,51866,657],{"class":642},[637,51868,660],{"class":642},[637,51870,965],{"class":663},[637,51872,660],{"class":642},[637,51874,787],{"class":642},[637,51876,51877,51879,51881],{"class":639,"line":850},[637,51878,885],{"class":642},[637,51880,856],{"class":646},[637,51882,669],{"class":642},[637,51884,51886,51888,51890],{"class":51885,"line":861},[639,673],[637,51887,895],{"class":642},[637,51889,429],{"class":646},[637,51891,669],{"class":642},[637,51893,51894],{"class":639,"line":872},[637,51895,742],{"emptyLinePlaceholder":594},[637,51897,51898,51900,51902,51904,51906,51908,51910,51912],{"class":639,"line":882},[637,51899,781],{"class":642},[637,51901,9702],{"class":646},[637,51903,1890],{"class":650},[637,51905,657],{"class":642},[637,51907,660],{"class":642},[637,51909,1969],{"class":663},[637,51911,660],{"class":642},[637,51913,787],{"class":642},[637,51915,51916,51918,51920,51922,51924,51926,51928,51930],{"class":639,"line":632},[637,51917,781],{"class":642},[637,51919,9721],{"class":646},[637,51921,1508],{"class":650},[637,51923,657],{"class":642},[637,51925,660],{"class":642},[637,51927,13383],{"class":663},[637,51929,660],{"class":642},[637,51931,787],{"class":642},[637,51933,51934,51936,51938],{"class":639,"line":902},[637,51935,905],{"class":642},[637,51937,761],{"class":646},[637,51939,669],{"class":642},[637,51941,51942,51944,51946],{"class":639,"line":912},[637,51943,732],{"class":642},[637,51945,750],{"class":646},[637,51947,669],{"class":642},[504,51949,922],{"id":921},[927,51951,51952,51962],{},[930,51953,51954],{},[933,51955,51956,51958,51960],{},[936,51957,938],{"align":997},[936,51959,941],{"align":997},[936,51961,944],{},[946,51963,51964,51983,51997,52010,52023,52034],{},[933,51965,51966,51970,51979],{},[951,51967,51968],{"align":997},[618,51969,39364],{},[951,51971,51972,51973,51975,51976,51978],{"align":997},"Number of frames to render. Set to ",[618,51974,1897],{}," for a static scene. ",[618,51977,13535],{}," to update continuously.",[951,51980,51981],{},[618,51982,13535],{},[933,51984,51985,51989,51992],{},[951,51986,51987],{"align":997},[618,51988,27990],{},[951,51990,51991],{"align":997},"Resolution of the FBO",[951,51993,51994],{},[618,51995,51996],{},"255",[933,51998,51999,52003,52006],{},[951,52000,52001],{"align":997},[618,52002,43066],{},[951,52004,52005],{"align":997},"Camera near",[951,52007,52008],{},[618,52009,2186],{},[933,52011,52012,52016,52019],{},[951,52013,52014],{"align":997},[618,52015,40893],{},[951,52017,52018],{"align":997},"Camera far",[951,52020,52021],{},[618,52022,9307],{},[933,52024,52025,52029,52032],{},[951,52026,52027],{"align":997},[618,52028,29674],{},[951,52030,52031],{"align":997},"Custom environment map that is temporarily set as the scene's background",[951,52033],{},[933,52035,52036,52040,52043],{},[951,52037,52038],{"align":997},[618,52039,40463],{},[951,52041,52042],{"align":997},"Custom fog that is temporarily set as the scene's fog",[951,52044],{},[1349,52046,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":52048},[52049,52050],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render environment maps for reflective objects.",{},{"title":429,"description":52051},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":52056,"title":433,"body":52057,"description":53140,"extension":591,"links":592,"meta":53141,"navigation":594,"path":434,"seo":53142,"stem":435,"__hash__":53143},"docs/2.api/9.objects/fbo.md",{"type":501,"value":52058,"toc":53132},[52059,52064,52067,52074,52076,52669,52671,52785,52789,52791,52797,52804,52807,53043,53045,53129],[2318,52060,52061],{},[52062,52063],"objects-fbo",{},[614,52065,52066],{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[614,52068,52069,52070,52073],{},"Cientos provides an ",[618,52071,52072],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[504,52075,15],{"id":624},[626,52077,52080],{"className":628,"code":52078,"highlights":52079,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n if (!torusRef.value) { return }\n torusRef.value.rotation.x = elapsed * 0.745\n torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n \u003COrbitControls />\n\n \u003CTresGridHelper :args=\"[10, 10]\" />\n \u003CFbo\n ref=\"fboRef\"\n :depth=\"false\"\n :settings=\"{ samples: 1 }\"\n />\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboRef?.instance?.texture ?? null\"\n />\n \u003C/TresMesh>\n\n \u003CTresMesh\n ref=\"torusRef\"\n :position=\"[3, 0, 0]\"\n >\n \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[578,2677,2686,2695,2704],[618,52081,52082,52102,52126,52146,52164,52182,52186,52219,52245,52249,52273,52297,52323,52348,52352,52360,52364,52372,52402,52420,52428,52432,52450,52458,52472,52486,52501,52505,52513,52531,52535,52541,52554,52567,52571,52579,52583,52589,52601,52614,52618,52637,52645,52653,52661],{"__ignoreMap":576},[637,52083,52084,52086,52088,52090,52092,52094,52096,52098,52100],{"class":639,"line":577},[637,52085,643],{"class":642},[637,52087,647],{"class":646},[637,52089,651],{"class":650},[637,52091,654],{"class":650},[637,52093,657],{"class":642},[637,52095,660],{"class":642},[637,52097,664],{"class":663},[637,52099,660],{"class":642},[637,52101,669],{"class":642},[637,52103,52105,52107,52109,52112,52114,52116,52118,52120,52122,52124],{"class":52104,"line":578},[639,673],[637,52106,677],{"class":676},[637,52108,680],{"class":642},[637,52110,52111],{"class":683}," Fbo",[637,52113,687],{"class":642},[637,52115,690],{"class":683},[637,52117,693],{"class":642},[637,52119,696],{"class":676},[637,52121,699],{"class":642},[637,52123,702],{"class":663},[637,52125,705],{"class":642},[637,52127,52128,52130,52132,52134,52136,52138,52140,52142,52144],{"class":639,"line":708},[637,52129,677],{"class":676},[637,52131,3465],{"class":676},[637,52133,680],{"class":642},[637,52135,19752],{"class":683},[637,52137,693],{"class":642},[637,52139,696],{"class":676},[637,52141,699],{"class":642},[637,52143,724],{"class":663},[637,52145,705],{"class":642},[637,52147,52148,52150,52152,52154,52156,52158,52160,52162],{"class":639,"line":729},[637,52149,677],{"class":676},[637,52151,680],{"class":642},[637,52153,715],{"class":683},[637,52155,693],{"class":642},[637,52157,696],{"class":676},[637,52159,699],{"class":642},[637,52161,724],{"class":663},[637,52163,705],{"class":642},[637,52165,52166,52168,52170,52172,52174,52176,52178,52180],{"class":639,"line":739},[637,52167,677],{"class":676},[637,52169,680],{"class":642},[637,52171,3521],{"class":683},[637,52173,693],{"class":642},[637,52175,696],{"class":676},[637,52177,699],{"class":642},[637,52179,633],{"class":663},[637,52181,705],{"class":642},[637,52183,52184],{"class":639,"line":745},[637,52185,742],{"emptyLinePlaceholder":594},[637,52187,52188,52190,52193,52195,52197,52199,52201,52203,52205,52207,52209,52211,52213,52215,52217],{"class":639,"line":755},[637,52189,2438],{"class":650},[637,52191,52192],{"class":683}," fboRef ",[637,52194,657],{"class":642},[637,52196,3521],{"class":2457},[637,52198,643],{"class":642},[637,52200,18419],{"class":1222},[637,52202,18422],{"class":642},[637,52204,52111],{"class":683},[637,52206,3674],{"class":642},[637,52208,3668],{"class":642},[637,52210,3671],{"class":1222},[637,52212,3674],{"class":642},[637,52214,2460],{"class":683},[637,52216,3679],{"class":642},[637,52218,2471],{"class":683},[637,52220,52221,52223,52225,52227,52229,52231,52233,52235,52237,52239,52241,52243],{"class":639,"line":778},[637,52222,2438],{"class":650},[637,52224,12182],{"class":683},[637,52226,657],{"class":642},[637,52228,3521],{"class":2457},[637,52230,643],{"class":642},[637,52232,19799],{"class":1222},[637,52234,3668],{"class":642},[637,52236,3671],{"class":1222},[637,52238,3674],{"class":642},[637,52240,2460],{"class":683},[637,52242,3679],{"class":642},[637,52244,2471],{"class":683},[637,52246,52247],{"class":639,"line":790},[637,52248,742],{"emptyLinePlaceholder":594},[637,52250,52251,52253,52255,52257,52259,52261,52263,52265,52267,52269,52271],{"class":639,"line":800},[637,52252,39691],{"class":650},[637,52254,39694],{"class":2457},[637,52256,39697],{"class":642},[637,52258,39700],{"class":6859},[637,52260,39703],{"class":642},[637,52262,680],{"class":642},[637,52264,39700],{"class":646},[637,52266,1240],{"class":642},[637,52268,5380],{"class":1222},[637,52270,39714],{"class":642},[637,52272,1226],{"class":642},[637,52274,52275,52277,52279,52282,52284,52286,52288,52290,52292,52295],{"class":639,"line":805},[637,52276,21270],{"class":676},[637,52278,3097],{"class":646},[637,52280,52281],{"class":642},"!",[637,52283,12348],{"class":683},[637,52285,1146],{"class":642},[637,52287,3708],{"class":683},[637,52289,4757],{"class":646},[637,52291,8459],{"class":642},[637,52293,52294],{"class":676}," return",[637,52296,17816],{"class":642},[637,52298,52299,52302,52304,52306,52308,52310,52312,52314,52316,52318,52320],{"class":639,"line":827},[637,52300,52301],{"class":683}," torusRef",[637,52303,1146],{"class":642},[637,52305,3708],{"class":683},[637,52307,1146],{"class":642},[637,52309,5650],{"class":683},[637,52311,1146],{"class":642},[637,52313,7861],{"class":683},[637,52315,2454],{"class":642},[637,52317,39700],{"class":683},[637,52319,39758],{"class":642},[637,52321,52322],{"class":2524}," 0.745\n",[637,52324,52325,52327,52329,52331,52333,52335,52337,52339,52341,52343,52345],{"class":639,"line":631},[637,52326,52301],{"class":683},[637,52328,1146],{"class":642},[637,52330,3708],{"class":683},[637,52332,1146],{"class":642},[637,52334,5650],{"class":683},[637,52336,1146],{"class":642},[637,52338,39751],{"class":683},[637,52340,2454],{"class":642},[637,52342,39700],{"class":683},[637,52344,39758],{"class":642},[637,52346,52347],{"class":2524}," 0.361\n",[637,52349,52350],{"class":639,"line":850},[637,52351,1347],{"class":642},[637,52353,52354,52356,52358],{"class":639,"line":861},[637,52355,732],{"class":642},[637,52357,647],{"class":646},[637,52359,669],{"class":642},[637,52361,52362],{"class":639,"line":872},[637,52363,742],{"emptyLinePlaceholder":594},[637,52365,52366,52368,52370],{"class":639,"line":882},[637,52367,643],{"class":642},[637,52369,750],{"class":646},[637,52371,669],{"class":642},[637,52373,52374,52376,52378,52380,52382,52384,52387,52389,52392,52394,52396,52398,52400],{"class":639,"line":632},[637,52375,758],{"class":642},[637,52377,761],{"class":646},[637,52379,9606],{"class":650},[637,52381,657],{"class":642},[637,52383,660],{"class":642},[637,52385,52386],{"class":663},"0x222",[637,52388,660],{"class":642},[637,52390,52391],{"class":650}," @loop",[637,52393,657],{"class":642},[637,52395,660],{"class":642},[637,52397,39850],{"class":663},[637,52399,660],{"class":642},[637,52401,669],{"class":642},[637,52403,52404,52406,52408,52410,52412,52414,52416,52418],{"class":639,"line":902},[637,52405,781],{"class":642},[637,52407,784],{"class":646},[637,52409,1508],{"class":650},[637,52411,657],{"class":642},[637,52413,660],{"class":642},[637,52415,11831],{"class":663},[637,52417,660],{"class":642},[637,52419,787],{"class":642},[637,52421,52422,52424,52426],{"class":639,"line":912},[637,52423,781],{"class":642},[637,52425,795],{"class":646},[637,52427,787],{"class":642},[637,52429,52430],{"class":639,"line":2648},[637,52431,742],{"emptyLinePlaceholder":594},[637,52433,52434,52436,52438,52440,52442,52444,52446,52448],{"class":639,"line":2657},[637,52435,781],{"class":642},[637,52437,8070],{"class":646},[637,52439,1982],{"class":650},[637,52441,657],{"class":642},[637,52443,660],{"class":642},[637,52445,11982],{"class":663},[637,52447,660],{"class":642},[637,52449,787],{"class":642},[637,52451,52453,52455],{"class":52452,"line":2677},[639,673],[637,52454,781],{"class":642},[637,52456,52457],{"class":646},"Fbo\n",[637,52459,52461,52463,52465,52467,52470],{"class":52460,"line":2686},[639,673],[637,52462,12384],{"class":650},[637,52464,657],{"class":642},[637,52466,660],{"class":642},[637,52468,52469],{"class":663},"fboRef",[637,52471,3154],{"class":642},[637,52473,52475,52478,52480,52482,52484],{"class":52474,"line":2695},[639,673],[637,52476,52477],{"class":650}," :depth",[637,52479,657],{"class":642},[637,52481,660],{"class":642},[637,52483,971],{"class":663},[637,52485,3154],{"class":642},[637,52487,52489,52492,52494,52496,52499],{"class":52488,"line":2704},[639,673],[637,52490,52491],{"class":650}," :settings",[637,52493,657],{"class":642},[637,52495,660],{"class":642},[637,52497,52498],{"class":663},"{ samples: 1 }",[637,52500,3154],{"class":642},[637,52502,52503],{"class":639,"line":2726},[637,52504,17292],{"class":642},[637,52506,52507,52509,52511],{"class":639,"line":2770},[637,52508,781],{"class":642},[637,52510,856],{"class":646},[637,52512,669],{"class":642},[637,52514,52515,52517,52519,52521,52523,52525,52527,52529],{"class":639,"line":2779},[637,52516,853],{"class":642},[637,52518,867],{"class":646},[637,52520,1982],{"class":650},[637,52522,657],{"class":642},[637,52524,660],{"class":642},[637,52526,1989],{"class":663},[637,52528,660],{"class":642},[637,52530,787],{"class":642},[637,52532,52533],{"class":639,"line":2788},[637,52534,742],{"emptyLinePlaceholder":594},[637,52536,52537,52539],{"class":639,"line":3945},[637,52538,853],{"class":642},[637,52540,23231],{"class":646},[637,52542,52543,52545,52547,52549,52552],{"class":639,"line":3976},[637,52544,23249],{"class":650},[637,52546,657],{"class":642},[637,52548,660],{"class":642},[637,52550,52551],{"class":663},"0xFFFFFF",[637,52553,3154],{"class":642},[637,52555,52556,52558,52560,52562,52565],{"class":639,"line":3997},[637,52557,26309],{"class":650},[637,52559,657],{"class":642},[637,52561,660],{"class":642},[637,52563,52564],{"class":663},"fboRef?.instance?.texture ?? null",[637,52566,3154],{"class":642},[637,52568,52569],{"class":639,"line":4016},[637,52570,8054],{"class":642},[637,52572,52573,52575,52577],{"class":639,"line":4048},[637,52574,895],{"class":642},[637,52576,856],{"class":646},[637,52578,669],{"class":642},[637,52580,52581],{"class":639,"line":4057},[637,52582,742],{"emptyLinePlaceholder":594},[637,52584,52585,52587],{"class":639,"line":4066},[637,52586,781],{"class":642},[637,52588,5149],{"class":646},[637,52590,52591,52593,52595,52597,52599],{"class":639,"line":21457},[637,52592,12384],{"class":650},[637,52594,657],{"class":642},[637,52596,660],{"class":642},[637,52598,12348],{"class":663},[637,52600,3154],{"class":642},[637,52602,52603,52605,52607,52609,52612],{"class":639,"line":21472},[637,52604,17279],{"class":650},[637,52606,657],{"class":642},[637,52608,660],{"class":642},[637,52610,52611],{"class":663},"[3, 0, 0]",[637,52613,3154],{"class":642},[637,52615,52616],{"class":639,"line":21487},[637,52617,12412],{"class":642},[637,52619,52620,52622,52624,52626,52628,52630,52633,52635],{"class":639,"line":21492},[637,52621,853],{"class":642},[637,52623,11884],{"class":646},[637,52625,1982],{"class":650},[637,52627,657],{"class":642},[637,52629,660],{"class":642},[637,52631,52632],{"class":663},"[1, 0.5, 16, 100]",[637,52634,660],{"class":642},[637,52636,787],{"class":642},[637,52638,52639,52641,52643],{"class":639,"line":21499},[637,52640,853],{"class":642},[637,52642,877],{"class":646},[637,52644,787],{"class":642},[637,52646,52647,52649,52651],{"class":639,"line":21504},[637,52648,895],{"class":642},[637,52650,856],{"class":646},[637,52652,669],{"class":642},[637,52654,52655,52657,52659],{"class":639,"line":21510},[637,52656,905],{"class":642},[637,52658,761],{"class":646},[637,52660,669],{"class":642},[637,52662,52663,52665,52667],{"class":639,"line":21531},[637,52664,732],{"class":642},[637,52666,750],{"class":646},[637,52668,669],{"class":642},[504,52670,922],{"id":921},[927,52672,52673,52683],{},[930,52674,52675],{},[933,52676,52677,52679,52681],{},[936,52678,938],{"align":997},[936,52680,941],{"align":997},[936,52682,944],{},[946,52684,52685,52701,52717,52741,52767],{},[933,52686,52687,52693,52698],{},[951,52688,52689],{"align":997},[1692,52690,52691],{},[618,52692,40865],{},[951,52694,52695,52697],{"align":997},[618,52696,5375],{}," - The width of the FBO.",[951,52699,52700],{},"Width of the canvas",[933,52702,52703,52709,52714],{},[951,52704,52705],{"align":997},[1692,52706,52707],{},[618,52708,40879],{},[951,52710,52711,52713],{"align":997},[618,52712,5375],{}," - the height of the FBO",[951,52715,52716],{},"Height of the canvas",[933,52718,52719,52725,52737],{},[951,52720,52721],{"align":997},[1692,52722,52723],{},[618,52724,13105],{},[951,52726,52727,52729,52730,1146],{"align":997},[618,52728,17582],{}," - Whether or not the FBO should render the depth to a ",[1140,52731,52734],{"href":52732,"rel":52733},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1144],[618,52735,52736],{},"depthTexture",[951,52738,52739],{},[618,52740,971],{},[933,52742,52743,52750,52763],{},[951,52744,52745],{"align":997},[1692,52746,52747],{},[618,52748,52749],{},"settings",[951,52751,52752,52755,52756],{"align":997},[618,52753,52754],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1140,52757,52760,25122],{"href":52758,"rel":52759},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1144],[618,52761,52762],{},"WebGLRenderTarget",[951,52764,52765],{},[618,52766,6146],{},[933,52768,52769,52776,52781],{},[951,52770,52771],{"align":997},[1692,52772,52773],{},[618,52774,52775],{},"autoRender",[951,52777,52778,52780],{"align":997},[618,52779,17582],{}," - Whether to automatically render the FBO on the default scene.",[951,52782,52783],{},[618,52784,961],{},[504,52786,52788],{"id":52787},"usefbo","useFBO",[614,52790,52066],{},[614,52792,52793,52794,52796],{},"Cientos provides a ",[618,52795,52788],{}," composable to make it easy to use FBOs in your application.",[3222,52798,52799],{},[614,52800,2799,52801,52803],{},[618,52802,52788],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4074,52805,15],{"id":52806},"usage-1",[626,52808,52811],{"className":628,"code":52809,"highlights":52810,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n depth: true,\n width: 512,\n height: 512,\n settings: {\n samples: 1,\n },\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboTarget?.texture ?? null\"\n />\n \u003C/TresMesh>\n\u003C/template>\n\n",[578,729,739,745,755,778,790,800,805,912],[618,52812,52813,52833,52853,52857,52873,52884,52895,52906,52916,52928,52933,52940,52948,52952,52960,52968,52986,52990,52996,53009,53023,53027,53035],{"__ignoreMap":576},[637,52814,52815,52817,52819,52821,52823,52825,52827,52829,52831],{"class":639,"line":577},[637,52816,643],{"class":642},[637,52818,647],{"class":646},[637,52820,651],{"class":650},[637,52822,654],{"class":650},[637,52824,657],{"class":642},[637,52826,660],{"class":642},[637,52828,664],{"class":663},[637,52830,660],{"class":642},[637,52832,669],{"class":642},[637,52834,52836,52838,52840,52843,52845,52847,52849,52851],{"class":52835,"line":578},[639,673],[637,52837,677],{"class":676},[637,52839,680],{"class":642},[637,52841,52842],{"class":683}," useFBO",[637,52844,693],{"class":642},[637,52846,696],{"class":676},[637,52848,699],{"class":642},[637,52850,702],{"class":663},[637,52852,705],{"class":642},[637,52854,52855],{"class":639,"line":708},[637,52856,742],{"emptyLinePlaceholder":594},[637,52858,52860,52862,52865,52867,52869,52871],{"class":52859,"line":729},[639,673],[637,52861,2438],{"class":650},[637,52863,52864],{"class":683}," fboTarget ",[637,52866,657],{"class":642},[637,52868,52842],{"class":2457},[637,52870,2460],{"class":683},[637,52872,3283],{"class":642},[637,52874,52876,52878,52880,52882],{"class":52875,"line":739},[639,673],[637,52877,1281],{"class":646},[637,52879,1240],{"class":642},[637,52881,4421],{"class":4420},[637,52883,2511],{"class":642},[637,52885,52887,52889,52891,52893],{"class":52886,"line":745},[639,673],[637,52888,1262],{"class":646},[637,52890,1240],{"class":642},[637,52892,42150],{"class":2524},[637,52894,2511],{"class":642},[637,52896,52898,52900,52902,52904],{"class":52897,"line":755},[639,673],[637,52899,1272],{"class":646},[637,52901,1240],{"class":642},[637,52903,42150],{"class":2524},[637,52905,2511],{"class":642},[637,52907,52909,52912,52914],{"class":52908,"line":778},[639,673],[637,52910,52911],{"class":646}," settings",[637,52913,1240],{"class":642},[637,52915,1226],{"class":642},[637,52917,52919,52922,52924,52926],{"class":52918,"line":790},[639,673],[637,52920,52921],{"class":646}," samples",[637,52923,1240],{"class":642},[637,52925,2584],{"class":2524},[637,52927,2511],{"class":642},[637,52929,52931],{"class":52930,"line":800},[639,673],[637,52932,2620],{"class":642},[637,52934,52936,52938],{"class":52935,"line":805},[639,673],[637,52937,2451],{"class":642},[637,52939,2471],{"class":683},[637,52941,52942,52944,52946],{"class":639,"line":827},[637,52943,732],{"class":642},[637,52945,647],{"class":646},[637,52947,669],{"class":642},[637,52949,52950],{"class":639,"line":631},[637,52951,742],{"emptyLinePlaceholder":594},[637,52953,52954,52956,52958],{"class":639,"line":850},[637,52955,643],{"class":642},[637,52957,750],{"class":646},[637,52959,669],{"class":642},[637,52961,52962,52964,52966],{"class":639,"line":861},[637,52963,758],{"class":642},[637,52965,856],{"class":646},[637,52967,669],{"class":642},[637,52969,52970,52972,52974,52976,52978,52980,52982,52984],{"class":639,"line":872},[637,52971,781],{"class":642},[637,52973,867],{"class":646},[637,52975,1982],{"class":650},[637,52977,657],{"class":642},[637,52979,660],{"class":642},[637,52981,1989],{"class":663},[637,52983,660],{"class":642},[637,52985,787],{"class":642},[637,52987,52988],{"class":639,"line":882},[637,52989,742],{"emptyLinePlaceholder":594},[637,52991,52992,52994],{"class":639,"line":632},[637,52993,781],{"class":642},[637,52995,23231],{"class":646},[637,52997,52998,53001,53003,53005,53007],{"class":639,"line":902},[637,52999,53000],{"class":650}," :color",[637,53002,657],{"class":642},[637,53004,660],{"class":642},[637,53006,52551],{"class":663},[637,53008,3154],{"class":642},[637,53010,53012,53014,53016,53018,53021],{"class":53011,"line":912},[639,673],[637,53013,20839],{"class":650},[637,53015,657],{"class":642},[637,53017,660],{"class":642},[637,53019,53020],{"class":663},"fboTarget?.texture ?? null",[637,53022,3154],{"class":642},[637,53024,53025],{"class":639,"line":2648},[637,53026,17292],{"class":642},[637,53028,53029,53031,53033],{"class":639,"line":2657},[637,53030,905],{"class":642},[637,53032,856],{"class":646},[637,53034,669],{"class":642},[637,53036,53037,53039,53041],{"class":639,"line":2677},[637,53038,732],{"class":642},[637,53040,750],{"class":646},[637,53042,669],{"class":642},[4074,53044,14044],{"id":17555},[927,53046,53047,53057],{},[930,53048,53049],{},[933,53050,53051,53053,53055],{},[936,53052,938],{"align":997},[936,53054,941],{"align":997},[936,53056,944],{},[946,53058,53059,53073,53087,53108],{},[933,53060,53061,53067,53071],{},[951,53062,53063],{"align":997},[1692,53064,53065],{},[618,53066,40865],{},[951,53068,53069,52697],{"align":997},[618,53070,5375],{},[951,53072,52700],{},[933,53074,53075,53081,53085],{},[951,53076,53077],{"align":997},[1692,53078,53079],{},[618,53080,40879],{},[951,53082,53083,52713],{"align":997},[618,53084,5375],{},[951,53086,52716],{},[933,53088,53089,53095,53104],{},[951,53090,53091],{"align":997},[1692,53092,53093],{},[618,53094,13105],{},[951,53096,53097,52729,53099,1146],{"align":997},[618,53098,17582],{},[1140,53100,53102],{"href":52732,"rel":53101},[1144],[618,53103,52736],{},[951,53105,53106],{},[618,53107,971],{},[933,53109,53110,53116,53125],{},[951,53111,53112],{"align":997},[1692,53113,53114],{},[618,53115,52749],{},[951,53117,53118,52755,53120],{"align":997},[618,53119,52754],{},[1140,53121,53123,25122],{"href":52758,"rel":53122},[1144],[618,53124,52762],{},[951,53126,53127],{},[618,53128,6146],{},[1349,53130,53131],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":576,"searchDepth":577,"depth":578,"links":53133},[53134,53135,53136],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":52787,"depth":578,"text":52788,"children":53137},[53138,53139],{"id":52806,"depth":708,"text":15},{"id":17555,"depth":708,"text":14044},"Render to texture using Frame Buffer Objects.",{},{"title":433,"description":53140},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":53145,"title":437,"body":53146,"description":53515,"extension":591,"links":592,"meta":53516,"navigation":594,"path":438,"seo":53517,"stem":439,"__hash__":53518},"docs/2.api/9.objects/gradient-texture.md",{"type":501,"value":53147,"toc":53511},[53148,53153,53162,53164,53365,53367,53509],[2318,53149,53150],{},[53151,53152],"objects-gradient-texture",{},[614,53154,53155,53158,53159,53161],{},[618,53156,53157],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[618,53160,3004],{}," by default.",[504,53163,15],{"id":624},[626,53165,53167],{"className":628,"code":53166,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n \u003CTresMesh>\n \u003CTresPlaneGeometry :args=\"[2, 2]\" />\n \u003CTresMeshBasicMaterial>\n \u003CGradientTexture\n :stops=\"[0, 1]\"\n :colors=\"['#ff0000', '#0000ff']\"\n />\n \u003C/TresMeshBasicMaterial>\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,53168,53169,53189,53208,53216,53220,53228,53236,53254,53258,53266,53285,53293,53300,53314,53328,53333,53341,53349,53357],{"__ignoreMap":576},[637,53170,53171,53173,53175,53177,53179,53181,53183,53185,53187],{"class":639,"line":577},[637,53172,643],{"class":642},[637,53174,647],{"class":646},[637,53176,651],{"class":650},[637,53178,654],{"class":650},[637,53180,657],{"class":642},[637,53182,660],{"class":642},[637,53184,664],{"class":663},[637,53186,660],{"class":642},[637,53188,669],{"class":642},[637,53190,53191,53193,53195,53198,53200,53202,53204,53206],{"class":639,"line":578},[637,53192,677],{"class":676},[637,53194,680],{"class":642},[637,53196,53197],{"class":683}," GradientTexture",[637,53199,693],{"class":642},[637,53201,696],{"class":676},[637,53203,699],{"class":642},[637,53205,702],{"class":663},[637,53207,705],{"class":642},[637,53209,53210,53212,53214],{"class":639,"line":708},[637,53211,732],{"class":642},[637,53213,647],{"class":646},[637,53215,669],{"class":642},[637,53217,53218],{"class":639,"line":729},[637,53219,742],{"emptyLinePlaceholder":594},[637,53221,53222,53224,53226],{"class":639,"line":739},[637,53223,643],{"class":642},[637,53225,750],{"class":646},[637,53227,669],{"class":642},[637,53229,53230,53232,53234],{"class":639,"line":745},[637,53231,758],{"class":642},[637,53233,761],{"class":646},[637,53235,669],{"class":642},[637,53237,53238,53240,53242,53244,53246,53248,53250,53252],{"class":639,"line":755},[637,53239,781],{"class":642},[637,53241,784],{"class":646},[637,53243,1508],{"class":650},[637,53245,657],{"class":642},[637,53247,660],{"class":642},[637,53249,9632],{"class":663},[637,53251,660],{"class":642},[637,53253,787],{"class":642},[637,53255,53256],{"class":639,"line":778},[637,53257,742],{"emptyLinePlaceholder":594},[637,53259,53260,53262,53264],{"class":639,"line":790},[637,53261,781],{"class":642},[637,53263,856],{"class":646},[637,53265,669],{"class":642},[637,53267,53268,53270,53272,53274,53276,53278,53281,53283],{"class":639,"line":800},[637,53269,853],{"class":642},[637,53271,27788],{"class":646},[637,53273,1982],{"class":650},[637,53275,657],{"class":642},[637,53277,660],{"class":642},[637,53279,53280],{"class":663},"[2, 2]",[637,53282,660],{"class":642},[637,53284,787],{"class":642},[637,53286,53287,53289,53291],{"class":639,"line":805},[637,53288,853],{"class":642},[637,53290,7493],{"class":646},[637,53292,669],{"class":642},[637,53294,53295,53297],{"class":639,"line":827},[637,53296,864],{"class":642},[637,53298,53299],{"class":646},"GradientTexture\n",[637,53301,53302,53305,53307,53309,53312],{"class":639,"line":631},[637,53303,53304],{"class":650}," :stops",[637,53306,657],{"class":642},[637,53308,660],{"class":642},[637,53310,53311],{"class":663},"[0, 1]",[637,53313,3154],{"class":642},[637,53315,53316,53319,53321,53323,53326],{"class":639,"line":850},[637,53317,53318],{"class":650}," :colors",[637,53320,657],{"class":642},[637,53322,660],{"class":642},[637,53324,53325],{"class":663},"['#ff0000', '#0000ff']",[637,53327,3154],{"class":642},[637,53329,53330],{"class":639,"line":861},[637,53331,53332],{"class":642}," />\n",[637,53334,53335,53337,53339],{"class":639,"line":872},[637,53336,885],{"class":642},[637,53338,7493],{"class":646},[637,53340,669],{"class":642},[637,53342,53343,53345,53347],{"class":639,"line":882},[637,53344,895],{"class":642},[637,53346,856],{"class":646},[637,53348,669],{"class":642},[637,53350,53351,53353,53355],{"class":639,"line":632},[637,53352,905],{"class":642},[637,53354,761],{"class":646},[637,53356,669],{"class":642},[637,53358,53359,53361,53363],{"class":639,"line":902},[637,53360,732],{"class":642},[637,53362,750],{"class":646},[637,53364,669],{"class":642},[504,53366,922],{"id":921},[927,53368,53369,53379],{},[930,53370,53371],{},[933,53372,53373,53375,53377],{},[936,53374,938],{"align":997},[936,53376,941],{"align":997},[936,53378,944],{},[946,53380,53381,53407,53422,53436,53449,53463,53480,53494],{},[933,53382,53383,53388,53405],{},[951,53384,53385],{"align":997},[618,53386,53387],{},"stops",[951,53389,4302,53390,53392,53393,3086,53395,53397,53398,53401,53402,1146],{"align":997},[618,53391,37056],{}," of values between ",[618,53394,965],{},[618,53396,1897],{}," representing the color positions in the gradient. ",[618,53399,53400],{},"stops.length"," should match ",[618,53403,53404],{},"color.length",[951,53406],{},[933,53408,53409,53414,53420],{},[951,53410,53411],{"align":997},[618,53412,53413],{},"colors",[951,53415,4302,53416,53419],{"align":997},[618,53417,53418],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[951,53421],{},[933,53423,53424,53428,53431],{},[951,53425,53426],{"align":997},[618,53427,28168],{},[951,53429,53430],{"align":997},"Where the component should be attached within its parent.",[951,53432,53433],{},[618,53434,53435],{},"'map'",[933,53437,53438,53442,53445],{},[951,53439,53440],{"align":997},[618,53441,40879],{},[951,53443,53444],{"align":997},"Height of the canvas used to draw the gradient.",[951,53446,53447],{},[618,53448,39499],{},[933,53450,53451,53455,53458],{},[951,53452,53453],{"align":997},[618,53454,40865],{},[951,53456,53457],{"align":997},"Width of the canvas used to draw the gradient.",[951,53459,53460],{},[618,53461,53462],{},"16",[933,53464,53465,53469,53475],{},[951,53466,53467],{"align":997},[618,53468,5540],{},[951,53470,53471,53474],{"align":997},[618,53472,53473],{},"'linear' | 'radial'"," Type of gradient to draw.",[951,53476,53477],{},[618,53478,53479],{},"'linear'",[933,53481,53482,53487,53490],{},[951,53483,53484],{"align":997},[618,53485,53486],{},"innerCircleRadius",[951,53488,53489],{"align":997},"Radius of the inner circle of a radial gradient.",[951,53491,53492],{},[618,53493,965],{},[933,53495,53496,53501,53504],{},[951,53497,53498],{"align":997},[618,53499,53500],{},"outerCircleRadius",[951,53502,53503],{"align":997},"Radius of the outer circle of a radial gradient.",[951,53505,53506],{},[618,53507,53508],{},"'auto'",[1349,53510,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":53512},[53513,53514],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create gradient textures for materials.",{},{"title":437,"description":53515},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":53520,"title":441,"body":53521,"description":59053,"extension":591,"links":592,"meta":59054,"navigation":594,"path":442,"seo":59055,"stem":443,"__hash__":59056},"docs/2.api/9.objects/html.md",{"type":501,"value":53522,"toc":59032},[53523,53526,53539,53544,53546,53954,53958,53965,53970,53986,53994,53999,54138,54143,54147,54171,54176,54305,54309,54333,54336,54360,54376,54396,54401,54565,54569,54574,54597,54609,54614,56262,56264,56287,56307,56348,56351,56366,56377,56412,56419,56443,56460,56465,57930,57936,57942,57947,58148,58165,58167,58526,58528,58548,58552,58630,58632,58804,59008,59011,59029],[614,53524,53525],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[614,53527,53528,53529,3086,53531,53534,53535,53538],{},"🚀 Works seamlessly with both ",[1692,53530,12851],{},[1692,53532,53533],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[618,53536,53537],{},"\u003CHtml>"," component.",[2318,53540,53541],{},[53542,53543],"objects-html",{},[504,53545,15],{"id":624},[626,53547,53550],{"className":628,"code":53548,"highlights":53549,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" />\n \u003COrbitControls />\n \u003CTresMesh :position=\"[1, 1, 1]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003CHtml\n center\n transform\n :distance-factor=\"4\"\n :position=\"[0, 0, 0.65]\"\n :scale=\"[0.75, 0.75, 0.75]\"\n >\n \u003Ch1 class=\"title\">I'm a Box 📦\u003C/h1>\n \u003C/Html>\n \u003C/TresMesh>\n \u003CTresGridHelper />\n \u003CTresAmbientLight />\n \u003C/TresCanvas>\n\u003C/template>\n\u003Cstyle scoped>\n.title {\n background-color: #1e1e1e;\n color: #ffffff;\n font-size: 0.75rem;\n padding: 0.25rem;\n border-radius: 0.375rem;\n}\n\u003C/style>\n",[578,631,850,861,872,882,632],[618,53551,53552,53572,53596,53614,53622,53626,53634,53652,53671,53679,53697,53705,53713,53721,53727,53733,53747,53761,53776,53781,53810,53819,53827,53835,53843,53851,53859,53870,53878,53893,53906,53918,53930,53942,53946],{"__ignoreMap":576},[637,53553,53554,53556,53558,53560,53562,53564,53566,53568,53570],{"class":639,"line":577},[637,53555,643],{"class":642},[637,53557,647],{"class":646},[637,53559,651],{"class":650},[637,53561,654],{"class":650},[637,53563,657],{"class":642},[637,53565,660],{"class":642},[637,53567,664],{"class":663},[637,53569,660],{"class":642},[637,53571,669],{"class":642},[637,53573,53575,53577,53579,53582,53584,53586,53588,53590,53592,53594],{"class":53574,"line":578},[639,673],[637,53576,677],{"class":676},[637,53578,680],{"class":642},[637,53580,53581],{"class":683}," Html",[637,53583,687],{"class":642},[637,53585,690],{"class":683},[637,53587,693],{"class":642},[637,53589,696],{"class":676},[637,53591,699],{"class":642},[637,53593,702],{"class":663},[637,53595,705],{"class":642},[637,53597,53598,53600,53602,53604,53606,53608,53610,53612],{"class":639,"line":708},[637,53599,677],{"class":676},[637,53601,680],{"class":642},[637,53603,715],{"class":683},[637,53605,693],{"class":642},[637,53607,696],{"class":676},[637,53609,699],{"class":642},[637,53611,724],{"class":663},[637,53613,705],{"class":642},[637,53615,53616,53618,53620],{"class":639,"line":729},[637,53617,732],{"class":642},[637,53619,647],{"class":646},[637,53621,669],{"class":642},[637,53623,53624],{"class":639,"line":739},[637,53625,742],{"emptyLinePlaceholder":594},[637,53627,53628,53630,53632],{"class":639,"line":745},[637,53629,643],{"class":642},[637,53631,750],{"class":646},[637,53633,669],{"class":642},[637,53635,53636,53638,53640,53642,53644,53646,53648,53650],{"class":639,"line":755},[637,53637,758],{"class":642},[637,53639,761],{"class":646},[637,53641,764],{"class":650},[637,53643,657],{"class":642},[637,53645,660],{"class":642},[637,53647,11812],{"class":663},[637,53649,660],{"class":642},[637,53651,669],{"class":642},[637,53653,53654,53656,53658,53660,53662,53664,53667,53669],{"class":639,"line":778},[637,53655,781],{"class":642},[637,53657,784],{"class":646},[637,53659,1508],{"class":650},[637,53661,657],{"class":642},[637,53663,660],{"class":642},[637,53665,53666],{"class":663},"[2, 2, 5]",[637,53668,660],{"class":642},[637,53670,787],{"class":642},[637,53672,53673,53675,53677],{"class":639,"line":790},[637,53674,781],{"class":642},[637,53676,795],{"class":646},[637,53678,787],{"class":642},[637,53680,53681,53683,53685,53687,53689,53691,53693,53695],{"class":639,"line":800},[637,53682,781],{"class":642},[637,53684,856],{"class":646},[637,53686,1508],{"class":650},[637,53688,657],{"class":642},[637,53690,660],{"class":642},[637,53692,1989],{"class":663},[637,53694,660],{"class":642},[637,53696,669],{"class":642},[637,53698,53699,53701,53703],{"class":639,"line":805},[637,53700,853],{"class":642},[637,53702,867],{"class":646},[637,53704,787],{"class":642},[637,53706,53707,53709,53711],{"class":639,"line":827},[637,53708,853],{"class":642},[637,53710,877],{"class":646},[637,53712,787],{"class":642},[637,53714,53716,53718],{"class":53715,"line":631},[639,673],[637,53717,853],{"class":642},[637,53719,53720],{"class":646},"Html\n",[637,53722,53724],{"class":53723,"line":850},[639,673],[637,53725,53726],{"class":650}," center\n",[637,53728,53730],{"class":53729,"line":861},[639,673],[637,53731,53732],{"class":650}," transform\n",[637,53734,53736,53739,53741,53743,53745],{"class":53735,"line":872},[639,673],[637,53737,53738],{"class":650}," :distance-factor",[637,53740,657],{"class":642},[637,53742,660],{"class":642},[637,53744,9674],{"class":663},[637,53746,3154],{"class":642},[637,53748,53750,53752,53754,53756,53759],{"class":53749,"line":882},[639,673],[637,53751,8026],{"class":650},[637,53753,657],{"class":642},[637,53755,660],{"class":642},[637,53757,53758],{"class":663},"[0, 0, 0.65]",[637,53760,3154],{"class":642},[637,53762,53764,53767,53769,53771,53774],{"class":53763,"line":632},[639,673],[637,53765,53766],{"class":650}," :scale",[637,53768,657],{"class":642},[637,53770,660],{"class":642},[637,53772,53773],{"class":663},"[0.75, 0.75, 0.75]",[637,53775,3154],{"class":642},[637,53777,53778],{"class":639,"line":902},[637,53779,53780],{"class":642}," >\n",[637,53782,53783,53785,53788,53790,53792,53794,53797,53799,53801,53804,53806,53808],{"class":639,"line":912},[637,53784,864],{"class":642},[637,53786,53787],{"class":646},"h1",[637,53789,25122],{"class":650},[637,53791,657],{"class":642},[637,53793,660],{"class":642},[637,53795,53796],{"class":663},"title",[637,53798,660],{"class":642},[637,53800,3674],{"class":642},[637,53802,53803],{"class":683},"I'm a Box 📦",[637,53805,732],{"class":642},[637,53807,53787],{"class":646},[637,53809,669],{"class":642},[637,53811,53812,53814,53817],{"class":639,"line":2648},[637,53813,885],{"class":642},[637,53815,53816],{"class":646},"Html",[637,53818,669],{"class":642},[637,53820,53821,53823,53825],{"class":639,"line":2657},[637,53822,895],{"class":642},[637,53824,856],{"class":646},[637,53826,669],{"class":642},[637,53828,53829,53831,53833],{"class":639,"line":2677},[637,53830,781],{"class":642},[637,53832,8070],{"class":646},[637,53834,787],{"class":642},[637,53836,53837,53839,53841],{"class":639,"line":2686},[637,53838,781],{"class":642},[637,53840,9702],{"class":646},[637,53842,787],{"class":642},[637,53844,53845,53847,53849],{"class":639,"line":2695},[637,53846,905],{"class":642},[637,53848,761],{"class":646},[637,53850,669],{"class":642},[637,53852,53853,53855,53857],{"class":639,"line":2704},[637,53854,732],{"class":642},[637,53856,750],{"class":646},[637,53858,669],{"class":642},[637,53860,53861,53863,53865,53868],{"class":639,"line":2726},[637,53862,643],{"class":642},[637,53864,1349],{"class":646},[637,53866,53867],{"class":650}," scoped",[637,53869,669],{"class":642},[637,53871,53872,53874,53876],{"class":639,"line":2770},[637,53873,1146],{"class":642},[637,53875,53796],{"class":1222},[637,53877,1226],{"class":642},[637,53879,53880,53883,53885,53888,53891],{"class":639,"line":2779},[637,53881,53882],{"class":4152}," background-color",[637,53884,1240],{"class":642},[637,53886,53887],{"class":642}," #",[637,53889,53890],{"class":683},"1e1e1e",[637,53892,9543],{"class":642},[637,53894,53895,53897,53899,53901,53904],{"class":639,"line":2788},[637,53896,5496],{"class":4152},[637,53898,1240],{"class":642},[637,53900,53887],{"class":642},[637,53902,53903],{"class":683},"ffffff",[637,53905,9543],{"class":642},[637,53907,53908,53911,53913,53916],{"class":639,"line":3945},[637,53909,53910],{"class":4152}," font-size",[637,53912,1240],{"class":642},[637,53914,53915],{"class":2524}," 0.75rem",[637,53917,9543],{"class":642},[637,53919,53920,53923,53925,53928],{"class":639,"line":3976},[637,53921,53922],{"class":4152}," padding",[637,53924,1240],{"class":642},[637,53926,53927],{"class":2524}," 0.25rem",[637,53929,9543],{"class":642},[637,53931,53932,53935,53937,53940],{"class":639,"line":3997},[637,53933,53934],{"class":4152}," border-radius",[637,53936,1240],{"class":642},[637,53938,53939],{"class":2524}," 0.375rem",[637,53941,9543],{"class":642},[637,53943,53944],{"class":639,"line":4016},[637,53945,1347],{"class":642},[637,53947,53948,53950,53952],{"class":639,"line":4048},[637,53949,732],{"class":642},[637,53951,1349],{"class":646},[637,53953,669],{"class":642},[504,53955,53957],{"id":53956},"occlusion","Occlusion",[614,53959,53960,53961,53964],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[618,53962,53963],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[614,53966,53967,53968,41259],{},"Html can be hidden behind one or more objects in your scene using the ",[618,53969,53963],{},[626,53971,53973],{"className":628,"code":53972,"language":633,"meta":576,"style":576},"\u003CHtml occlude>\n",[618,53974,53975],{"__ignoreMap":576},[637,53976,53977,53979,53981,53984],{"class":639,"line":577},[637,53978,643],{"class":642},[637,53980,53816],{"class":646},[637,53982,53983],{"class":650}," occlude",[637,53985,669],{"class":642},[614,53987,958,53988,53990,53991,53993],{},[618,53989,53963],{},", then ",[618,53992,53537],{}," will be hidden by any objects that pass in front of its position.",[2318,53995,53996],{},[53997,53998],"objects-html-occlusion",{},[5330,54000,5332,54001,54004],{},[5334,54002,54003],{},"Demo code",[626,54005,54007],{"className":45557,"code":54006,"language":45559,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, -2]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003Chtml center transform occlude :distance-factor=\"4\" :position=\"[0, 0, 2]\" :z-index-range=\"[28, 0]\">\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n \u003C/html>\n\u003C/TresMesh>\n",[618,54008,54009,54028,54036,54044,54094,54122,54130],{"__ignoreMap":576},[637,54010,54011,54013,54015,54017,54019,54021,54024,54026],{"class":639,"line":577},[637,54012,643],{"class":642},[637,54014,856],{"class":646},[637,54016,1508],{"class":650},[637,54018,657],{"class":642},[637,54020,660],{"class":642},[637,54022,54023],{"class":663},"[0, 1, -2]",[637,54025,660],{"class":642},[637,54027,669],{"class":642},[637,54029,54030,54032,54034],{"class":639,"line":578},[637,54031,758],{"class":642},[637,54033,867],{"class":646},[637,54035,787],{"class":642},[637,54037,54038,54040,54042],{"class":639,"line":708},[637,54039,758],{"class":642},[637,54041,877],{"class":646},[637,54043,787],{"class":642},[637,54045,54046,54048,54050,54053,54056,54058,54061,54063,54065,54067,54069,54071,54073,54075,54078,54080,54083,54085,54087,54090,54092],{"class":639,"line":729},[637,54047,758],{"class":642},[637,54049,45559],{"class":646},[637,54051,54052],{"class":650}," center",[637,54054,54055],{"class":650}," transform",[637,54057,53983],{"class":650},[637,54059,54060],{"class":650}," :distance-factor",[637,54062,657],{"class":642},[637,54064,660],{"class":642},[637,54066,9674],{"class":663},[637,54068,660],{"class":642},[637,54070,1508],{"class":650},[637,54072,657],{"class":642},[637,54074,660],{"class":642},[637,54076,54077],{"class":663},"[0, 0, 2]",[637,54079,660],{"class":642},[637,54081,54082],{"class":650}," :z-index-range",[637,54084,657],{"class":642},[637,54086,660],{"class":642},[637,54088,54089],{"class":663},"[28, 0]",[637,54091,660],{"class":642},[637,54093,669],{"class":642},[637,54095,54096,54098,54100,54102,54104,54106,54109,54111,54113,54116,54118,54120],{"class":639,"line":739},[637,54097,781],{"class":642},[637,54099,53787],{"class":646},[637,54101,25122],{"class":650},[637,54103,657],{"class":642},[637,54105,660],{"class":642},[637,54107,54108],{"class":663},"bg-white dark:bg-dark text-xs p-1 rounded",[637,54110,660],{"class":642},[637,54112,3674],{"class":642},[637,54114,54115],{"class":683},"Move camera",[637,54117,732],{"class":642},[637,54119,53787],{"class":646},[637,54121,669],{"class":642},[637,54123,54124,54126,54128],{"class":639,"line":745},[637,54125,905],{"class":642},[637,54127,45559],{"class":646},[637,54129,669],{"class":642},[637,54131,54132,54134,54136],{"class":639,"line":755},[637,54133,732],{"class":642},[637,54135,856],{"class":646},[637,54137,669],{"class":642},[614,54139,54140,54141,2050],{},"You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the ",[618,54142,53963],{},[4074,54144,54146],{"id":54145},"single-occluder","Single occluder",[626,54148,54150],{"className":628,"code":54149,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh]\">\n",[618,54151,54152],{"__ignoreMap":576},[637,54153,54154,54156,54158,54160,54162,54164,54167,54169],{"class":639,"line":577},[637,54155,643],{"class":642},[637,54157,53816],{"class":646},[637,54159,53983],{"class":650},[637,54161,657],{"class":642},[637,54163,660],{"class":642},[637,54165,54166],{"class":663},"[mesh]",[637,54168,660],{"class":642},[637,54170,669],{"class":642},[2318,54172,54173],{},[54174,54175],"objects-html-single-occluder",{},[5330,54177,5332,54178,54180],{},[5334,54179,54003],{},[626,54181,54183],{"className":45557,"code":54182,"language":45559,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003Chtml center transform :occlude=\"[sphereRef]\" :distance-factor=\"4\" :z-index-range=\"[28, 0]\">\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n \u003C/html>\n\u003C/TresMesh>\n",[618,54184,54185,54203,54211,54219,54263,54289,54297],{"__ignoreMap":576},[637,54186,54187,54189,54191,54193,54195,54197,54199,54201],{"class":639,"line":577},[637,54188,643],{"class":642},[637,54190,856],{"class":646},[637,54192,1508],{"class":650},[637,54194,657],{"class":642},[637,54196,660],{"class":642},[637,54198,25572],{"class":663},[637,54200,660],{"class":642},[637,54202,669],{"class":642},[637,54204,54205,54207,54209],{"class":639,"line":578},[637,54206,758],{"class":642},[637,54208,867],{"class":646},[637,54210,787],{"class":642},[637,54212,54213,54215,54217],{"class":639,"line":708},[637,54214,758],{"class":642},[637,54216,877],{"class":646},[637,54218,787],{"class":642},[637,54220,54221,54223,54225,54227,54229,54232,54234,54236,54239,54241,54243,54245,54247,54249,54251,54253,54255,54257,54259,54261],{"class":639,"line":729},[637,54222,758],{"class":642},[637,54224,45559],{"class":646},[637,54226,54052],{"class":650},[637,54228,54055],{"class":650},[637,54230,54231],{"class":650}," :occlude",[637,54233,657],{"class":642},[637,54235,660],{"class":642},[637,54237,54238],{"class":663},"[sphereRef]",[637,54240,660],{"class":642},[637,54242,54060],{"class":650},[637,54244,657],{"class":642},[637,54246,660],{"class":642},[637,54248,9674],{"class":663},[637,54250,660],{"class":642},[637,54252,54082],{"class":650},[637,54254,657],{"class":642},[637,54256,660],{"class":642},[637,54258,54089],{"class":663},[637,54260,660],{"class":642},[637,54262,669],{"class":642},[637,54264,54265,54267,54269,54271,54273,54275,54277,54279,54281,54283,54285,54287],{"class":639,"line":739},[637,54266,781],{"class":642},[637,54268,53787],{"class":646},[637,54270,25122],{"class":650},[637,54272,657],{"class":642},[637,54274,660],{"class":642},[637,54276,54108],{"class":663},[637,54278,660],{"class":642},[637,54280,3674],{"class":642},[637,54282,54115],{"class":683},[637,54284,732],{"class":642},[637,54286,53787],{"class":646},[637,54288,669],{"class":642},[637,54290,54291,54293,54295],{"class":639,"line":745},[637,54292,905],{"class":642},[637,54294,45559],{"class":646},[637,54296,669],{"class":642},[637,54298,54299,54301,54303],{"class":639,"line":755},[637,54300,732],{"class":642},[637,54302,856],{"class":646},[637,54304,669],{"class":642},[4074,54306,54308],{"id":54307},"multiple-occluders","Multiple occluders",[626,54310,54312],{"className":628,"code":54311,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[618,54313,54314],{"__ignoreMap":576},[637,54315,54316,54318,54320,54322,54324,54326,54329,54331],{"class":639,"line":577},[637,54317,643],{"class":642},[637,54319,53816],{"class":646},[637,54321,53983],{"class":650},[637,54323,657],{"class":642},[637,54325,660],{"class":642},[637,54327,54328],{"class":663},"[mesh1, mesh2, mesh3, ...]",[637,54330,660],{"class":642},[637,54332,787],{"class":642},[614,54334,54335],{},"OR",[626,54337,54339],{"className":628,"code":54338,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"meshesArray\" />\n",[618,54340,54341],{"__ignoreMap":576},[637,54342,54343,54345,54347,54349,54351,54353,54356,54358],{"class":639,"line":577},[637,54344,643],{"class":642},[637,54346,53816],{"class":646},[637,54348,53983],{"class":650},[637,54350,657],{"class":642},[637,54352,660],{"class":642},[637,54354,54355],{"class":663},"meshesArray",[637,54357,660],{"class":642},[637,54359,787],{"class":642},[614,54361,54362,54363,54365,54366,54370,54371,54375],{},"In the demo below, a ",[618,54364,8269],{}," loop generates multiple spheres around the cube.\nAll resulting ",[1692,54367,54368],{},[618,54369,4315],{}," instances are collected into an array and passed to the ",[1692,54372,54373],{},[618,54374,53963],{}," prop, allowing each sphere to occlude the HTML content.",[614,54377,54378,54379,54384,54385,54388,54389,3086,54392,54395],{},"This demo also uses the ",[1692,54380,54381],{},[618,54382,54383],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1692,54386,54387],{},"reactive value"," to control element styles — for example, toggling between ",[1697,54390,54391],{},"light",[1697,54393,54394],{},"dark"," themes.",[2318,54397,54398],{},[54399,54400],"objects-html-occlude-complex-demo",{},[5330,54402,5332,54403,54405],{},[5334,54404,54003],{},[626,54406,54408],{"className":45557,"code":54407,"language":45559,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003Chtml\n v-bind=\"htmlProps\"\n :occlude=\"occluderRefs\"\n :distance-factor=\"4\"\n :z-index-range=\"[28, 0]\"\n @on-occlude=\"(event: boolean) => isOccluded = event\"\n >\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n \u003C/html>\n\u003C/TresMesh>\n",[618,54409,54410,54428,54436,54444,54451,54465,54479,54492,54505,54519,54523,54549,54557],{"__ignoreMap":576},[637,54411,54412,54414,54416,54418,54420,54422,54424,54426],{"class":639,"line":577},[637,54413,643],{"class":642},[637,54415,856],{"class":646},[637,54417,1508],{"class":650},[637,54419,657],{"class":642},[637,54421,660],{"class":642},[637,54423,25572],{"class":663},[637,54425,660],{"class":642},[637,54427,669],{"class":642},[637,54429,54430,54432,54434],{"class":639,"line":578},[637,54431,758],{"class":642},[637,54433,867],{"class":646},[637,54435,787],{"class":642},[637,54437,54438,54440,54442],{"class":639,"line":708},[637,54439,758],{"class":642},[637,54441,877],{"class":646},[637,54443,787],{"class":642},[637,54445,54446,54448],{"class":639,"line":729},[637,54447,758],{"class":642},[637,54449,54450],{"class":646},"html\n",[637,54452,54453,54456,54458,54460,54463],{"class":639,"line":739},[637,54454,54455],{"class":650}," v-bind",[637,54457,657],{"class":642},[637,54459,660],{"class":642},[637,54461,54462],{"class":663},"htmlProps",[637,54464,3154],{"class":642},[637,54466,54467,54470,54472,54474,54477],{"class":639,"line":745},[637,54468,54469],{"class":650}," :occlude",[637,54471,657],{"class":642},[637,54473,660],{"class":642},[637,54475,54476],{"class":663},"occluderRefs",[637,54478,3154],{"class":642},[637,54480,54481,54484,54486,54488,54490],{"class":639,"line":755},[637,54482,54483],{"class":650}," :distance-factor",[637,54485,657],{"class":642},[637,54487,660],{"class":642},[637,54489,9674],{"class":663},[637,54491,3154],{"class":642},[637,54493,54494,54497,54499,54501,54503],{"class":639,"line":778},[637,54495,54496],{"class":650}," :z-index-range",[637,54498,657],{"class":642},[637,54500,660],{"class":642},[637,54502,54089],{"class":663},[637,54504,3154],{"class":642},[637,54506,54507,54510,54512,54514,54517],{"class":639,"line":790},[637,54508,54509],{"class":650}," @on-occlude",[637,54511,657],{"class":642},[637,54513,660],{"class":642},[637,54515,54516],{"class":663},"(event: boolean) => isOccluded = event",[637,54518,3154],{"class":642},[637,54520,54521],{"class":639,"line":800},[637,54522,5196],{"class":642},[637,54524,54525,54527,54529,54531,54533,54535,54537,54539,54541,54543,54545,54547],{"class":639,"line":805},[637,54526,781],{"class":642},[637,54528,53787],{"class":646},[637,54530,25122],{"class":650},[637,54532,657],{"class":642},[637,54534,660],{"class":642},[637,54536,54108],{"class":663},[637,54538,660],{"class":642},[637,54540,3674],{"class":642},[637,54542,54115],{"class":683},[637,54544,732],{"class":642},[637,54546,53787],{"class":646},[637,54548,669],{"class":642},[637,54550,54551,54553,54555],{"class":639,"line":827},[637,54552,905],{"class":642},[637,54554,45559],{"class":646},[637,54556,669],{"class":642},[637,54558,54559,54561,54563],{"class":639,"line":631},[637,54560,732],{"class":642},[637,54562,856],{"class":646},[637,54564,669],{"class":642},[4074,54566,54568],{"id":54567},"blending-occlusion","Blending Occlusion",[614,54570,54571,54573],{},[618,54572,53537],{}," can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using \"blending\" as the occlude prop.",[626,54575,54577],{"className":628,"code":54576,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"blending\">\n",[618,54578,54579],{"__ignoreMap":576},[637,54580,54581,54583,54585,54587,54589,54591,54593,54595],{"class":639,"line":577},[637,54582,643],{"class":642},[637,54584,53816],{"class":646},[637,54586,53983],{"class":650},[637,54588,657],{"class":642},[637,54590,660],{"class":642},[637,54592,49715],{"class":663},[637,54594,660],{"class":642},[637,54596,669],{"class":642},[614,54598,2799,54599,3217,54602,54605,54606,1146],{},[1692,54600,54601],{},"demo below ⬇️",[1697,54603,54604],{},"(left black example)"," shows a ",[1692,54607,54608],{},"basic usage example",[2318,54610,54611],{},[54612,54613],"objects-html-occlude-blending-demo",{},[5330,54615,5332,54616,54618],{},[5334,54617,54003],{},[626,54619,54657],{"className":628,"code":54620,"highlights":54621,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\nimport { CircleGeometry, MeshStandardMaterial } from 'three'\n\nconst gl = {\n clearColor: '#82DBC5',\n clearAlpha: 1,\n shadows: true,\n alpha: true,\n}\n\nconst targetDirectionLightRef = shallowRef(null)\n\nconst geometries = [\n {\n component: 'TresBoxGeometry',\n args: [1, 1, 1],\n },\n {\n component: 'TresSphereGeometry',\n args: [0.7, 32, 32],\n },\n {\n component: 'TresTorusGeometry',\n args: [0.5, 0.2, 16, 100],\n bind: { castShadow: true, receiveShadow: true },\n },\n]\n\nconst customGeometry = shallowRef(new CircleGeometry(1.25, 32))\n\nconst customMaterial = shallowRef(new MeshStandardMaterial({\n color: 'red',\n side: 2,\n opacity: 1,\n transparent: true,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n \u003CTresCanvas v-bind=\"gl\">\n \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n \u003COrbitControls />\n\n \u003CLevioso\n v-for=\"(geometry, index) in geometries\"\n :key=\"`html-occlude-blending-demo-${index}`\"\n :speed=\"3\"\n :float-factor=\"3.5\"\n :rotation-factor=\"1\"\n :range=\"[-0.35, 0.35]\"\n >\n \u003CTresMesh :position=\"[index * 3.5 - 3.5, 1, 0]\" v-bind=\"geometry.bind\">\n \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/Levioso>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[-4, .75, -2]\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-center text-s p-2 bg-[#1B1C1E] text-light\">\n BASIC 💛 \u003Cbr />\n \u003Cem>occlude=blending\u003C/em>\n \u003C/div>\n \u003C/Html>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[0, .85, -2]\"\n :geometry=\"customGeometry\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-xs p-8 text-center bg-[#F6B03B] text-dark\">\n CUSTOM \u003Cbr /> \u003Cstrong>CIRCLE \u003Cbr /> GEOMETRY\u003C/strong>\n \u003C/div>\n \u003C/Html>\n\n \u003CHtml\n ref=\"targetDirectionLightRef\"\n center\n transform\n occlude=\"blending\"\n :position=\"[4, .5, -2]\"\n :material=\"customMaterial\"\n receive-shadow\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv style=\"width: 100px; height: auto; aspect-ratio: 250/250;\">\u003C/div>\n \u003C/Html>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[4, 2.5, -2]\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-center text-xs p-2 text-dark bg-[#FF0000]\">\n \u003Cstrong>HTML + Custom material \u003C/strong> \u003Cbr />\n \u003Cem>+ receive-shadow \u003C/em> ⬇️\n \u003C/div>\n \u003C/Html>\n\n \u003CTresDirectionalLight\n v-if=\"targetDirectionLightRef?.instance\"\n :target=\"targetDirectionLightRef?.instance\"\n :shadow-normalBias=\"0.075\"\n :position=\"[5, 0, 5]\"\n :intensity=\"2\"\n cast-shadow\n />\n\n \u003CTresGridHelper :position-y=\"-1\" />\n \u003CTresAmbientLight :intensity=\"1\" />\n \u003C/TresCanvas>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n background-color: #82dbc5;\n}\n\u003C/style>\n\n",[578,3976,4016,4048,4057,4066,21457,21472,21746,21755,21774,21817,21859,21879,21908,21917,21926,54622,54623,21755,21774,21817,21859,21879,21908,21917,21926,54622,54623,54624,54625,54626,54627,54628,54629,54630,54631,54632,54633,54634,54635,54636,54637,54638,54639,54640,54641,54642,54643,54644,54645,54646,54647,54648,54649,54650,54651,54652,54653,54654,54655,54656],71,72,74,75,76,77,78,79,80,81,82,83,84,86,87,88,89,90,91,92,93,94,95,96,98,99,100,101,102,103,104,105,106,107,108,[618,54658,54659,54679,54706,54724,54742,54765,54769,54780,54795,54806,54817,54828,54832,54836,54853,54857,54868,54872,54887,54910,54914,54918,54932,54954,54958,54962,54976,55002,55029,55033,55037,55041,55070,55074,55096,55111,55123,55134,55146,55153,55161,55165,55173,55192,55211,55230,55238,55242,55249,55262,55275,55287,55301,55314,55328,55332,55362,55394,55402,55410,55418,55422,55429,55434,55439,55453,55467,55481,55486,55506,55518,55536,55545,55554,55559,55566,55571,55576,55589,55603,55618,55631,55636,55656,55694,55703,55712,55717,55724,55738,55743,55748,55761,55775,55790,55796,55809,55814,55838,55847,55852,55859,55864,55869,55882,55896,55909,55914,55934,55958,55979,55988,55997,56002,56009,56024,56038,56053,56067,56080,56086,56091,56096,56115,56134,56143,56152,56161,56166,56177,56187,56199,56210,56221,56234,56248,56253],{"__ignoreMap":576},[637,54660,54661,54663,54665,54667,54669,54671,54673,54675,54677],{"class":639,"line":577},[637,54662,643],{"class":642},[637,54664,647],{"class":646},[637,54666,651],{"class":650},[637,54668,654],{"class":650},[637,54670,657],{"class":642},[637,54672,660],{"class":642},[637,54674,664],{"class":663},[637,54676,660],{"class":642},[637,54678,669],{"class":642},[637,54680,54682,54684,54686,54688,54690,54692,54694,54696,54698,54700,54702,54704],{"class":54681,"line":578},[639,673],[637,54683,677],{"class":676},[637,54685,680],{"class":642},[637,54687,53581],{"class":683},[637,54689,687],{"class":642},[637,54691,9553],{"class":683},[637,54693,687],{"class":642},[637,54695,690],{"class":683},[637,54697,693],{"class":642},[637,54699,696],{"class":676},[637,54701,699],{"class":642},[637,54703,702],{"class":663},[637,54705,705],{"class":642},[637,54707,54708,54710,54712,54714,54716,54718,54720,54722],{"class":639,"line":708},[637,54709,677],{"class":676},[637,54711,680],{"class":642},[637,54713,715],{"class":683},[637,54715,693],{"class":642},[637,54717,696],{"class":676},[637,54719,699],{"class":642},[637,54721,724],{"class":663},[637,54723,705],{"class":642},[637,54725,54726,54728,54730,54732,54734,54736,54738,54740],{"class":639,"line":729},[637,54727,677],{"class":676},[637,54729,680],{"class":642},[637,54731,3521],{"class":683},[637,54733,693],{"class":642},[637,54735,696],{"class":676},[637,54737,699],{"class":642},[637,54739,633],{"class":663},[637,54741,705],{"class":642},[637,54743,54744,54746,54748,54751,54753,54755,54757,54759,54761,54763],{"class":639,"line":739},[637,54745,677],{"class":676},[637,54747,680],{"class":642},[637,54749,54750],{"class":683}," CircleGeometry",[637,54752,687],{"class":642},[637,54754,8375],{"class":683},[637,54756,693],{"class":642},[637,54758,696],{"class":676},[637,54760,699],{"class":642},[637,54762,4649],{"class":663},[637,54764,705],{"class":642},[637,54766,54767],{"class":639,"line":745},[637,54768,742],{"emptyLinePlaceholder":594},[637,54770,54771,54773,54776,54778],{"class":639,"line":755},[637,54772,2438],{"class":650},[637,54774,54775],{"class":683}," gl ",[637,54777,657],{"class":642},[637,54779,1226],{"class":642},[637,54781,54782,54785,54787,54789,54791,54793],{"class":639,"line":778},[637,54783,54784],{"class":646}," clearColor",[637,54786,1240],{"class":642},[637,54788,699],{"class":642},[637,54790,11812],{"class":663},[637,54792,2463],{"class":642},[637,54794,2511],{"class":642},[637,54796,54797,54800,54802,54804],{"class":639,"line":790},[637,54798,54799],{"class":646}," clearAlpha",[637,54801,1240],{"class":642},[637,54803,2584],{"class":2524},[637,54805,2511],{"class":642},[637,54807,54808,54811,54813,54815],{"class":639,"line":800},[637,54809,54810],{"class":646}," shadows",[637,54812,1240],{"class":642},[637,54814,4421],{"class":4420},[637,54816,2511],{"class":642},[637,54818,54819,54822,54824,54826],{"class":639,"line":805},[637,54820,54821],{"class":646}," alpha",[637,54823,1240],{"class":642},[637,54825,4421],{"class":4420},[637,54827,2511],{"class":642},[637,54829,54830],{"class":639,"line":827},[637,54831,1347],{"class":642},[637,54833,54834],{"class":639,"line":631},[637,54835,742],{"emptyLinePlaceholder":594},[637,54837,54838,54840,54843,54845,54847,54849,54851],{"class":639,"line":850},[637,54839,2438],{"class":650},[637,54841,54842],{"class":683}," targetDirectionLightRef ",[637,54844,657],{"class":642},[637,54846,3521],{"class":2457},[637,54848,2460],{"class":683},[637,54850,3679],{"class":642},[637,54852,2471],{"class":683},[637,54854,54855],{"class":639,"line":861},[637,54856,742],{"emptyLinePlaceholder":594},[637,54858,54859,54861,54864,54866],{"class":639,"line":872},[637,54860,2438],{"class":650},[637,54862,54863],{"class":683}," geometries ",[637,54865,657],{"class":642},[637,54867,20718],{"class":683},[637,54869,54870],{"class":639,"line":882},[637,54871,2494],{"class":642},[637,54873,54874,54877,54879,54881,54883,54885],{"class":639,"line":632},[637,54875,54876],{"class":646}," component",[637,54878,1240],{"class":642},[637,54880,699],{"class":642},[637,54882,867],{"class":663},[637,54884,2463],{"class":642},[637,54886,2511],{"class":642},[637,54888,54889,54892,54894,54896,54898,54900,54902,54904,54906,54908],{"class":639,"line":902},[637,54890,54891],{"class":646}," args",[637,54893,1240],{"class":642},[637,54895,2521],{"class":683},[637,54897,1897],{"class":2524},[637,54899,687],{"class":642},[637,54901,2584],{"class":2524},[637,54903,687],{"class":642},[637,54905,2584],{"class":2524},[637,54907,2537],{"class":683},[637,54909,2511],{"class":642},[637,54911,54912],{"class":639,"line":912},[637,54913,2620],{"class":642},[637,54915,54916],{"class":639,"line":2648},[637,54917,2494],{"class":642},[637,54919,54920,54922,54924,54926,54928,54930],{"class":639,"line":2657},[637,54921,54876],{"class":646},[637,54923,1240],{"class":642},[637,54925,699],{"class":642},[637,54927,3981],{"class":663},[637,54929,2463],{"class":642},[637,54931,2511],{"class":642},[637,54933,54934,54936,54938,54940,54942,54944,54946,54948,54950,54952],{"class":639,"line":2677},[637,54935,54891],{"class":646},[637,54937,1240],{"class":642},[637,54939,2521],{"class":683},[637,54941,47570],{"class":2524},[637,54943,687],{"class":642},[637,54945,31065],{"class":2524},[637,54947,687],{"class":642},[637,54949,31065],{"class":2524},[637,54951,2537],{"class":683},[637,54953,2511],{"class":642},[637,54955,54956],{"class":639,"line":2686},[637,54957,2620],{"class":642},[637,54959,54960],{"class":639,"line":2695},[637,54961,2494],{"class":642},[637,54963,54964,54966,54968,54970,54972,54974],{"class":639,"line":2704},[637,54965,54876],{"class":646},[637,54967,1240],{"class":642},[637,54969,699],{"class":642},[637,54971,11884],{"class":663},[637,54973,2463],{"class":642},[637,54975,2511],{"class":642},[637,54977,54978,54980,54982,54984,54986,54988,54990,54992,54994,54996,54998,55000],{"class":639,"line":2726},[637,54979,54891],{"class":646},[637,54981,1240],{"class":642},[637,54983,2521],{"class":683},[637,54985,1969],{"class":2524},[637,54987,687],{"class":642},[637,54989,34559],{"class":2524},[637,54991,687],{"class":642},[637,54993,34564],{"class":2524},[637,54995,687],{"class":642},[637,54997,7784],{"class":2524},[637,54999,2537],{"class":683},[637,55001,2511],{"class":642},[637,55003,55004,55007,55009,55011,55014,55016,55018,55020,55023,55025,55027],{"class":639,"line":2770},[637,55005,55006],{"class":646}," bind",[637,55008,1240],{"class":642},[637,55010,680],{"class":642},[637,55012,55013],{"class":646}," castShadow",[637,55015,1240],{"class":642},[637,55017,4421],{"class":4420},[637,55019,687],{"class":642},[637,55021,55022],{"class":646}," receiveShadow",[637,55024,1240],{"class":642},[637,55026,4421],{"class":4420},[637,55028,7110],{"class":642},[637,55030,55031],{"class":639,"line":2779},[637,55032,2620],{"class":642},[637,55034,55035],{"class":639,"line":2788},[637,55036,20754],{"class":683},[637,55038,55039],{"class":639,"line":3945},[637,55040,742],{"emptyLinePlaceholder":594},[637,55042,55044,55046,55049,55051,55053,55055,55057,55059,55061,55064,55066,55068],{"class":55043,"line":3976},[639,673],[637,55045,2438],{"class":650},[637,55047,55048],{"class":683}," customGeometry ",[637,55050,657],{"class":642},[637,55052,3521],{"class":2457},[637,55054,2460],{"class":683},[637,55056,36106],{"class":642},[637,55058,54750],{"class":2457},[637,55060,2460],{"class":683},[637,55062,55063],{"class":2524},"1.25",[637,55065,687],{"class":642},[637,55067,31065],{"class":2524},[637,55069,7210],{"class":683},[637,55071,55072],{"class":639,"line":3997},[637,55073,742],{"emptyLinePlaceholder":594},[637,55075,55077,55079,55082,55084,55086,55088,55090,55092,55094],{"class":55076,"line":4016},[639,673],[637,55078,2438],{"class":650},[637,55080,55081],{"class":683}," customMaterial ",[637,55083,657],{"class":642},[637,55085,3521],{"class":2457},[637,55087,2460],{"class":683},[637,55089,36106],{"class":642},[637,55091,8375],{"class":2457},[637,55093,2460],{"class":683},[637,55095,3283],{"class":642},[637,55097,55099,55101,55103,55105,55107,55109],{"class":55098,"line":4048},[639,673],[637,55100,5496],{"class":646},[637,55102,1240],{"class":642},[637,55104,699],{"class":642},[637,55106,36849],{"class":663},[637,55108,2463],{"class":642},[637,55110,2511],{"class":642},[637,55112,55114,55117,55119,55121],{"class":55113,"line":4057},[639,673],[637,55115,55116],{"class":646}," side",[637,55118,1240],{"class":642},[637,55120,31833],{"class":2524},[637,55122,2511],{"class":642},[637,55124,55126,55128,55130,55132],{"class":55125,"line":4066},[639,673],[637,55127,5508],{"class":646},[637,55129,1240],{"class":642},[637,55131,2584],{"class":2524},[637,55133,2511],{"class":642},[637,55135,55137,55140,55142,55144],{"class":55136,"line":21457},[639,673],[637,55138,55139],{"class":646}," transparent",[637,55141,1240],{"class":642},[637,55143,4421],{"class":4420},[637,55145,2511],{"class":642},[637,55147,55149,55151],{"class":55148,"line":21472},[639,673],[637,55150,2451],{"class":642},[637,55152,7210],{"class":683},[637,55154,55155,55157,55159],{"class":639,"line":21487},[637,55156,732],{"class":642},[637,55158,647],{"class":646},[637,55160,669],{"class":642},[637,55162,55163],{"class":639,"line":21492},[637,55164,742],{"emptyLinePlaceholder":594},[637,55166,55167,55169,55171],{"class":639,"line":21499},[637,55168,643],{"class":642},[637,55170,750],{"class":646},[637,55172,669],{"class":642},[637,55174,55175,55177,55179,55181,55183,55185,55188,55190],{"class":639,"line":21504},[637,55176,758],{"class":642},[637,55178,4142],{"class":646},[637,55180,25122],{"class":650},[637,55182,657],{"class":642},[637,55184,660],{"class":642},[637,55186,55187],{"class":663},"html-demo-wrapper aspect-video",[637,55189,660],{"class":642},[637,55191,669],{"class":642},[637,55193,55194,55196,55198,55200,55202,55204,55207,55209],{"class":639,"line":21510},[637,55195,781],{"class":642},[637,55197,761],{"class":646},[637,55199,10236],{"class":650},[637,55201,657],{"class":642},[637,55203,660],{"class":642},[637,55205,55206],{"class":663},"gl",[637,55208,660],{"class":642},[637,55210,669],{"class":642},[637,55212,55213,55215,55217,55219,55221,55223,55226,55228],{"class":639,"line":21531},[637,55214,853],{"class":642},[637,55216,784],{"class":646},[637,55218,1508],{"class":650},[637,55220,657],{"class":642},[637,55222,660],{"class":642},[637,55224,55225],{"class":663},"[0, 1.5, 7.5]",[637,55227,660],{"class":642},[637,55229,787],{"class":642},[637,55231,55232,55234,55236],{"class":639,"line":21537},[637,55233,853],{"class":642},[637,55235,795],{"class":646},[637,55237,787],{"class":642},[637,55239,55240],{"class":639,"line":21544},[637,55241,742],{"emptyLinePlaceholder":594},[637,55243,55244,55246],{"class":639,"line":21549},[637,55245,853],{"class":642},[637,55247,55248],{"class":646},"Levioso\n",[637,55250,55251,55253,55255,55257,55260],{"class":639,"line":21570},[637,55252,7998],{"class":650},[637,55254,657],{"class":642},[637,55256,660],{"class":642},[637,55258,55259],{"class":663},"(geometry, index) in geometries",[637,55261,3154],{"class":642},[637,55263,55264,55266,55268,55270,55273],{"class":639,"line":21583},[637,55265,8012],{"class":650},[637,55267,657],{"class":642},[637,55269,660],{"class":642},[637,55271,55272],{"class":663},"`html-occlude-blending-demo-${index}`",[637,55274,3154],{"class":642},[637,55276,55277,55279,55281,55283,55285],{"class":639,"line":21609},[637,55278,30178],{"class":650},[637,55280,657],{"class":642},[637,55282,660],{"class":642},[637,55284,21410],{"class":663},[637,55286,3154],{"class":642},[637,55288,55289,55292,55294,55296,55299],{"class":639,"line":21614},[637,55290,55291],{"class":650}," :float-factor",[637,55293,657],{"class":642},[637,55295,660],{"class":642},[637,55297,55298],{"class":663},"3.5",[637,55300,3154],{"class":642},[637,55302,55303,55306,55308,55310,55312],{"class":639,"line":21621},[637,55304,55305],{"class":650}," :rotation-factor",[637,55307,657],{"class":642},[637,55309,660],{"class":642},[637,55311,1897],{"class":663},[637,55313,3154],{"class":642},[637,55315,55316,55319,55321,55323,55326],{"class":639,"line":21630},[637,55317,55318],{"class":650}," :range",[637,55320,657],{"class":642},[637,55322,660],{"class":642},[637,55324,55325],{"class":663},"[-0.35, 0.35]",[637,55327,3154],{"class":642},[637,55329,55330],{"class":639,"line":21635},[637,55331,53780],{"class":642},[637,55333,55334,55336,55338,55340,55342,55344,55347,55349,55351,55353,55355,55358,55360],{"class":639,"line":21644},[637,55335,864],{"class":642},[637,55337,856],{"class":646},[637,55339,1508],{"class":650},[637,55341,657],{"class":642},[637,55343,660],{"class":642},[637,55345,55346],{"class":663},"[index * 3.5 - 3.5, 1, 0]",[637,55348,660],{"class":642},[637,55350,10236],{"class":650},[637,55352,657],{"class":642},[637,55354,660],{"class":642},[637,55356,55357],{"class":663},"geometry.bind",[637,55359,660],{"class":642},[637,55361,669],{"class":642},[637,55363,55364,55366,55369,55372,55374,55376,55379,55381,55383,55385,55387,55390,55392],{"class":639,"line":21663},[637,55365,27868],{"class":642},[637,55367,55368],{"class":646},"component",[637,55370,55371],{"class":650}," :is",[637,55373,657],{"class":642},[637,55375,660],{"class":642},[637,55377,55378],{"class":663},"geometry.component",[637,55380,660],{"class":642},[637,55382,1982],{"class":650},[637,55384,657],{"class":642},[637,55386,660],{"class":642},[637,55388,55389],{"class":663},"geometry.args",[637,55391,660],{"class":642},[637,55393,787],{"class":642},[637,55395,55396,55398,55400],{"class":639,"line":21673},[637,55397,27868],{"class":642},[637,55399,877],{"class":646},[637,55401,787],{"class":642},[637,55403,55404,55406,55408],{"class":639,"line":21708},[637,55405,27907],{"class":642},[637,55407,856],{"class":646},[637,55409,669],{"class":642},[637,55411,55412,55414,55416],{"class":639,"line":21717},[637,55413,885],{"class":642},[637,55415,9664],{"class":646},[637,55417,669],{"class":642},[637,55419,55420],{"class":639,"line":21737},[637,55421,742],{"emptyLinePlaceholder":594},[637,55423,55425,55427],{"class":55424,"line":21746},[639,673],[637,55426,853],{"class":642},[637,55428,53720],{"class":646},[637,55430,55432],{"class":55431,"line":21755},[639,673],[637,55433,53726],{"class":650},[637,55435,55437],{"class":55436,"line":21774},[639,673],[637,55438,53732],{"class":650},[637,55440,55442,55445,55447,55449,55451],{"class":55441,"line":21817},[639,673],[637,55443,55444],{"class":650}," occlude",[637,55446,657],{"class":642},[637,55448,660],{"class":642},[637,55450,49715],{"class":663},[637,55452,3154],{"class":642},[637,55454,55456,55458,55460,55462,55465],{"class":55455,"line":21859},[639,673],[637,55457,8026],{"class":650},[637,55459,657],{"class":642},[637,55461,660],{"class":642},[637,55463,55464],{"class":663},"[-4, .75, -2]",[637,55466,3154],{"class":642},[637,55468,55470,55473,55475,55477,55479],{"class":55469,"line":21879},[639,673],[637,55471,55472],{"class":650}," :z-index-range",[637,55474,657],{"class":642},[637,55476,660],{"class":642},[637,55478,54089],{"class":663},[637,55480,3154],{"class":642},[637,55482,55484],{"class":55483,"line":21908},[639,673],[637,55485,53780],{"class":642},[637,55487,55489,55491,55493,55495,55497,55499,55502,55504],{"class":55488,"line":21917},[639,673],[637,55490,864],{"class":642},[637,55492,4142],{"class":646},[637,55494,25122],{"class":650},[637,55496,657],{"class":642},[637,55498,660],{"class":642},[637,55500,55501],{"class":663},"text-center text-s p-2 bg-[#1B1C1E] text-light",[637,55503,660],{"class":642},[637,55505,669],{"class":642},[637,55507,55509,55512,55514,55516],{"class":55508,"line":21926},[639,673],[637,55510,55511],{"class":683}," BASIC 💛 ",[637,55513,643],{"class":642},[637,55515,7576],{"class":646},[637,55517,787],{"class":642},[637,55519,55521,55523,55525,55527,55530,55532,55534],{"class":55520,"line":54622},[639,673],[637,55522,27868],{"class":642},[637,55524,1697],{"class":646},[637,55526,3674],{"class":642},[637,55528,55529],{"class":683},"occlude=blending",[637,55531,732],{"class":642},[637,55533,1697],{"class":646},[637,55535,669],{"class":642},[637,55537,55539,55541,55543],{"class":55538,"line":54623},[639,673],[637,55540,27907],{"class":642},[637,55542,4142],{"class":646},[637,55544,669],{"class":642},[637,55546,55548,55550,55552],{"class":639,"line":55547},73,[637,55549,885],{"class":642},[637,55551,53816],{"class":646},[637,55553,669],{"class":642},[637,55555,55557],{"class":55556,"line":54624},[639,673],[637,55558,742],{"emptyLinePlaceholder":594},[637,55560,55562,55564],{"class":55561,"line":54625},[639,673],[637,55563,853],{"class":642},[637,55565,53720],{"class":646},[637,55567,55569],{"class":55568,"line":54626},[639,673],[637,55570,53726],{"class":650},[637,55572,55574],{"class":55573,"line":54627},[639,673],[637,55575,53732],{"class":650},[637,55577,55579,55581,55583,55585,55587],{"class":55578,"line":54628},[639,673],[637,55580,55444],{"class":650},[637,55582,657],{"class":642},[637,55584,660],{"class":642},[637,55586,49715],{"class":663},[637,55588,3154],{"class":642},[637,55590,55592,55594,55596,55598,55601],{"class":55591,"line":54629},[639,673],[637,55593,8026],{"class":650},[637,55595,657],{"class":642},[637,55597,660],{"class":642},[637,55599,55600],{"class":663},"[0, .85, -2]",[637,55602,3154],{"class":642},[637,55604,55606,55609,55611,55613,55616],{"class":55605,"line":54630},[639,673],[637,55607,55608],{"class":650}," :geometry",[637,55610,657],{"class":642},[637,55612,660],{"class":642},[637,55614,55615],{"class":663},"customGeometry",[637,55617,3154],{"class":642},[637,55619,55621,55623,55625,55627,55629],{"class":55620,"line":54631},[639,673],[637,55622,55472],{"class":650},[637,55624,657],{"class":642},[637,55626,660],{"class":642},[637,55628,54089],{"class":663},[637,55630,3154],{"class":642},[637,55632,55634],{"class":55633,"line":54632},[639,673],[637,55635,53780],{"class":642},[637,55637,55639,55641,55643,55645,55647,55649,55652,55654],{"class":55638,"line":54633},[639,673],[637,55640,864],{"class":642},[637,55642,4142],{"class":646},[637,55644,25122],{"class":650},[637,55646,657],{"class":642},[637,55648,660],{"class":642},[637,55650,55651],{"class":663},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[637,55653,660],{"class":642},[637,55655,669],{"class":642},[637,55657,55659,55662,55664,55666,55669,55672,55674,55676,55679,55681,55683,55685,55688,55690,55692],{"class":55658,"line":54634},[639,673],[637,55660,55661],{"class":683}," CUSTOM ",[637,55663,643],{"class":642},[637,55665,7576],{"class":646},[637,55667,55668],{"class":642}," />",[637,55670,55671],{"class":642}," \u003C",[637,55673,1692],{"class":646},[637,55675,3674],{"class":642},[637,55677,55678],{"class":683},"CIRCLE ",[637,55680,643],{"class":642},[637,55682,7576],{"class":646},[637,55684,55668],{"class":642},[637,55686,55687],{"class":683}," GEOMETRY",[637,55689,732],{"class":642},[637,55691,1692],{"class":646},[637,55693,669],{"class":642},[637,55695,55697,55699,55701],{"class":639,"line":55696},85,[637,55698,27907],{"class":642},[637,55700,4142],{"class":646},[637,55702,669],{"class":642},[637,55704,55706,55708,55710],{"class":55705,"line":54635},[639,673],[637,55707,885],{"class":642},[637,55709,53816],{"class":646},[637,55711,669],{"class":642},[637,55713,55715],{"class":55714,"line":54636},[639,673],[637,55716,742],{"emptyLinePlaceholder":594},[637,55718,55720,55722],{"class":55719,"line":54637},[639,673],[637,55721,853],{"class":642},[637,55723,53720],{"class":646},[637,55725,55727,55729,55731,55733,55736],{"class":55726,"line":54638},[639,673],[637,55728,26176],{"class":650},[637,55730,657],{"class":642},[637,55732,660],{"class":642},[637,55734,55735],{"class":663},"targetDirectionLightRef",[637,55737,3154],{"class":642},[637,55739,55741],{"class":55740,"line":54639},[639,673],[637,55742,53726],{"class":650},[637,55744,55746],{"class":55745,"line":54640},[639,673],[637,55747,53732],{"class":650},[637,55749,55751,55753,55755,55757,55759],{"class":55750,"line":54641},[639,673],[637,55752,55444],{"class":650},[637,55754,657],{"class":642},[637,55756,660],{"class":642},[637,55758,49715],{"class":663},[637,55760,3154],{"class":642},[637,55762,55764,55766,55768,55770,55773],{"class":55763,"line":54642},[639,673],[637,55765,8026],{"class":650},[637,55767,657],{"class":642},[637,55769,660],{"class":642},[637,55771,55772],{"class":663},"[4, .5, -2]",[637,55774,3154],{"class":642},[637,55776,55778,55781,55783,55785,55788],{"class":55777,"line":54643},[639,673],[637,55779,55780],{"class":650}," :material",[637,55782,657],{"class":642},[637,55784,660],{"class":642},[637,55786,55787],{"class":663},"customMaterial",[637,55789,3154],{"class":642},[637,55791,55793],{"class":55792,"line":54644},[639,673],[637,55794,55795],{"class":650}," receive-shadow\n",[637,55797,55799,55801,55803,55805,55807],{"class":55798,"line":54645},[639,673],[637,55800,55472],{"class":650},[637,55802,657],{"class":642},[637,55804,660],{"class":642},[637,55806,54089],{"class":663},[637,55808,3154],{"class":642},[637,55810,55812],{"class":639,"line":55811},97,[637,55813,53780],{"class":642},[637,55815,55817,55819,55821,55823,55825,55827,55830,55832,55834,55836],{"class":55816,"line":54646},[639,673],[637,55818,864],{"class":642},[637,55820,4142],{"class":646},[637,55822,4145],{"class":650},[637,55824,657],{"class":642},[637,55826,660],{"class":642},[637,55828,55829],{"class":663},"width: 100px; height: auto; aspect-ratio: 250/250;",[637,55831,660],{"class":642},[637,55833,25158],{"class":642},[637,55835,4142],{"class":646},[637,55837,669],{"class":642},[637,55839,55841,55843,55845],{"class":55840,"line":54647},[639,673],[637,55842,885],{"class":642},[637,55844,53816],{"class":646},[637,55846,669],{"class":642},[637,55848,55850],{"class":55849,"line":54648},[639,673],[637,55851,742],{"emptyLinePlaceholder":594},[637,55853,55855,55857],{"class":55854,"line":54649},[639,673],[637,55856,853],{"class":642},[637,55858,53720],{"class":646},[637,55860,55862],{"class":55861,"line":54650},[639,673],[637,55863,53726],{"class":650},[637,55865,55867],{"class":55866,"line":54651},[639,673],[637,55868,53732],{"class":650},[637,55870,55872,55874,55876,55878,55880],{"class":55871,"line":54652},[639,673],[637,55873,55444],{"class":650},[637,55875,657],{"class":642},[637,55877,660],{"class":642},[637,55879,49715],{"class":663},[637,55881,3154],{"class":642},[637,55883,55885,55887,55889,55891,55894],{"class":55884,"line":54653},[639,673],[637,55886,8026],{"class":650},[637,55888,657],{"class":642},[637,55890,660],{"class":642},[637,55892,55893],{"class":663},"[4, 2.5, -2]",[637,55895,3154],{"class":642},[637,55897,55899,55901,55903,55905,55907],{"class":55898,"line":54654},[639,673],[637,55900,55472],{"class":650},[637,55902,657],{"class":642},[637,55904,660],{"class":642},[637,55906,54089],{"class":663},[637,55908,3154],{"class":642},[637,55910,55912],{"class":55911,"line":54655},[639,673],[637,55913,53780],{"class":642},[637,55915,55917,55919,55921,55923,55925,55927,55930,55932],{"class":55916,"line":54656},[639,673],[637,55918,864],{"class":642},[637,55920,4142],{"class":646},[637,55922,25122],{"class":650},[637,55924,657],{"class":642},[637,55926,660],{"class":642},[637,55928,55929],{"class":663},"text-center text-xs p-2 text-dark bg-[#FF0000]",[637,55931,660],{"class":642},[637,55933,669],{"class":642},[637,55935,55937,55939,55941,55943,55946,55948,55950,55952,55954,55956],{"class":639,"line":55936},109,[637,55938,27868],{"class":642},[637,55940,1692],{"class":646},[637,55942,3674],{"class":642},[637,55944,55945],{"class":683},"HTML + Custom material ",[637,55947,732],{"class":642},[637,55949,1692],{"class":646},[637,55951,3674],{"class":642},[637,55953,55671],{"class":642},[637,55955,7576],{"class":646},[637,55957,787],{"class":642},[637,55959,55961,55963,55965,55967,55970,55972,55974,55976],{"class":639,"line":55960},110,[637,55962,27868],{"class":642},[637,55964,1697],{"class":646},[637,55966,3674],{"class":642},[637,55968,55969],{"class":683},"+ receive-shadow ",[637,55971,732],{"class":642},[637,55973,1697],{"class":646},[637,55975,3674],{"class":642},[637,55977,55978],{"class":683}," ⬇️\n",[637,55980,55982,55984,55986],{"class":639,"line":55981},111,[637,55983,27907],{"class":642},[637,55985,4142],{"class":646},[637,55987,669],{"class":642},[637,55989,55991,55993,55995],{"class":639,"line":55990},112,[637,55992,885],{"class":642},[637,55994,53816],{"class":646},[637,55996,669],{"class":642},[637,55998,56000],{"class":639,"line":55999},113,[637,56001,742],{"emptyLinePlaceholder":594},[637,56003,56005,56007],{"class":639,"line":56004},114,[637,56006,853],{"class":642},[637,56008,17261],{"class":646},[637,56010,56012,56015,56017,56019,56022],{"class":639,"line":56011},115,[637,56013,56014],{"class":650}," v-if",[637,56016,657],{"class":642},[637,56018,660],{"class":642},[637,56020,56021],{"class":663},"targetDirectionLightRef?.instance",[637,56023,3154],{"class":642},[637,56025,56027,56030,56032,56034,56036],{"class":639,"line":56026},116,[637,56028,56029],{"class":650}," :target",[637,56031,657],{"class":642},[637,56033,660],{"class":642},[637,56035,56021],{"class":663},[637,56037,3154],{"class":642},[637,56039,56041,56044,56046,56048,56051],{"class":639,"line":56040},117,[637,56042,56043],{"class":650}," :shadow-normalBias",[637,56045,657],{"class":642},[637,56047,660],{"class":642},[637,56049,56050],{"class":663},"0.075",[637,56052,3154],{"class":642},[637,56054,56056,56058,56060,56062,56065],{"class":639,"line":56055},118,[637,56057,8026],{"class":650},[637,56059,657],{"class":642},[637,56061,660],{"class":642},[637,56063,56064],{"class":663},"[5, 0, 5]",[637,56066,3154],{"class":642},[637,56068,56070,56072,56074,56076,56078],{"class":639,"line":56069},119,[637,56071,42758],{"class":650},[637,56073,657],{"class":642},[637,56075,660],{"class":642},[637,56077,820],{"class":663},[637,56079,3154],{"class":642},[637,56081,56083],{"class":639,"line":56082},120,[637,56084,56085],{"class":650}," cast-shadow\n",[637,56087,56089],{"class":639,"line":56088},121,[637,56090,8054],{"class":642},[637,56092,56094],{"class":639,"line":56093},122,[637,56095,742],{"emptyLinePlaceholder":594},[637,56097,56099,56101,56103,56105,56107,56109,56111,56113],{"class":639,"line":56098},123,[637,56100,853],{"class":642},[637,56102,8070],{"class":646},[637,56104,1962],{"class":650},[637,56106,657],{"class":642},[637,56108,660],{"class":642},[637,56110,10215],{"class":663},[637,56112,660],{"class":642},[637,56114,787],{"class":642},[637,56116,56118,56120,56122,56124,56126,56128,56130,56132],{"class":639,"line":56117},124,[637,56119,853],{"class":642},[637,56121,9702],{"class":646},[637,56123,1890],{"class":650},[637,56125,657],{"class":642},[637,56127,660],{"class":642},[637,56129,1897],{"class":663},[637,56131,660],{"class":642},[637,56133,787],{"class":642},[637,56135,56137,56139,56141],{"class":639,"line":56136},125,[637,56138,895],{"class":642},[637,56140,761],{"class":646},[637,56142,669],{"class":642},[637,56144,56146,56148,56150],{"class":639,"line":56145},126,[637,56147,905],{"class":642},[637,56149,4142],{"class":646},[637,56151,669],{"class":642},[637,56153,56155,56157,56159],{"class":639,"line":56154},127,[637,56156,732],{"class":642},[637,56158,750],{"class":646},[637,56160,669],{"class":642},[637,56162,56164],{"class":639,"line":56163},128,[637,56165,742],{"emptyLinePlaceholder":594},[637,56167,56169,56171,56173,56175],{"class":639,"line":56168},129,[637,56170,643],{"class":642},[637,56172,1349],{"class":646},[637,56174,53867],{"class":650},[637,56176,669],{"class":642},[637,56178,56180,56182,56185],{"class":639,"line":56179},130,[637,56181,1146],{"class":642},[637,56183,56184],{"class":1222},"html-demo-wrapper",[637,56186,1226],{"class":642},[637,56188,56190,56192,56194,56197],{"class":639,"line":56189},131,[637,56191,1262],{"class":4152},[637,56193,1240],{"class":642},[637,56195,56196],{"class":2524}," 100%",[637,56198,9543],{"class":642},[637,56200,56202,56204,56206,56208],{"class":639,"line":56201},132,[637,56203,1272],{"class":4152},[637,56205,1240],{"class":642},[637,56207,56196],{"class":2524},[637,56209,9543],{"class":642},[637,56211,56213,56215,56217,56219],{"class":639,"line":56212},133,[637,56214,5368],{"class":4152},[637,56216,1240],{"class":642},[637,56218,4158],{"class":683},[637,56220,9543],{"class":642},[637,56222,56224,56227,56229,56232],{"class":639,"line":56223},134,[637,56225,56226],{"class":4152}," overflow",[637,56228,1240],{"class":642},[637,56230,56231],{"class":683}," hidden",[637,56233,9543],{"class":642},[637,56235,56237,56239,56241,56243,56246],{"class":639,"line":56236},135,[637,56238,53882],{"class":4152},[637,56240,1240],{"class":642},[637,56242,53887],{"class":642},[637,56244,56245],{"class":683},"82dbc5",[637,56247,9543],{"class":642},[637,56249,56251],{"class":639,"line":56250},136,[637,56252,1347],{"class":642},[637,56254,56256,56258,56260],{"class":639,"line":56255},137,[637,56257,732],{"class":642},[637,56259,1349],{"class":646},[637,56261,669],{"class":642},[504,56263,45895],{"id":45894},[614,56265,56266,56267,56270,56271,56274,56275,56277,56278,56281,56282,56286],{},"By default, when using ",[618,56268,56269],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1692,56272,56273],{},"rectangular HTML elements"," (using a ",[618,56276,33637],{},").\nFor ",[1697,56279,56280],{},"non-rectangular content",", you can use the ",[1692,56283,56284],{},[618,56285,5279],{}," prop to provide a matching custom geometry.",[614,56288,56289,56290,3217,56293,56296,56297,56303,56304,1146],{},"In the ",[1692,56291,56292],{},"demo above ⬆️",[1697,56294,56295],{},"(middle yellow example)",", a ",[1140,56298,56301],{"href":56299,"rel":56300},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1144],[618,56302,31023],{}," is used as a ",[1692,56305,56306],{},"custom geometry",[56308,56309,56310],"prose-list",{},[2236,56311,56312,56321],{},[2239,56313,2799,56314,56316,56317,56320],{},[618,56315,5279],{}," prop only defines the ",[1692,56318,56319],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2239,56322,56323,56324,56331,56332,56335,56336,56339,56340,56347],{},"You can provide any ",[1140,56325,56328],{"href":56326,"rel":56327},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1144],[618,56329,56330],{},"BufferGeometry",", for example to simulate ",[1692,56333,56334],{},"CSS-like styles"," such as ",[618,56337,56338],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1140,56341,56344],{"href":56342,"rel":56343},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1144],[618,56345,56346],{},"RoundedRectangle / Squircle geometry"," for example).",[4074,56349,56350],{"id":3008},"Custom Material",[614,56352,56353,56354,56356,56357,3217,56359,56296,56362,56365],{},"You can also assign material properties to the HTML content using the ",[618,56355,5223],{}," prop.\nIn the ",[1692,56358,56292],{},[1697,56360,56361],{},"(right red example)",[1692,56363,56364],{},"custom material"," is used with shadow.",[2028,56367,56368],{},[614,56369,2799,56370,56372,56373,5904,56375,1146],{},[618,56371,5223],{}," prop is only available when ",[618,56374,56269],{},[1692,56376,16678],{},[2028,56378,56379],{},[614,56380,56381,56382,3086,56386,56390,56391,56394,56395,56397,56398,56400,56401,5634,56405,8187,56410],{},"Enable shadows using the ",[1692,56383,56384],{},[618,56385,18647],{},[1692,56387,56388],{},[618,56389,18665],{}," props.\nShadows are supported ",[1692,56392,56393],{},"only"," when using a ",[1692,56396,56364],{},". By default, shadows do ",[1692,56399,6362],{}," work with ",[1697,56402,56403],{},[618,56404,3014],{},[1697,56406,56407],{},[618,56408,56409],{},"ShaderMaterial",[7576,56411],{},[504,56413,56415,56416],{"id":56414},"using-transition","Using ",[618,56417,56418],{},"\u003CTransition>",[614,56420,56421,56422,56428,56429,56431,56432,56435,56436,3086,56439,56442],{},"The native Vue ",[1140,56423,56426],{"href":56424,"rel":56425},"https://vuejs.org/guide/built-ins/transition",[1144],[618,56427,56418],{}," component works seamlessly with ",[618,56430,53537],{},".\nThis means you can ",[1692,56433,56434],{},"animate"," how your projected HTML content ",[1697,56437,56438],{},"enters",[1697,56440,56441],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2028,56444,56445],{},[614,56446,29974,56447,56450,56451,1695,56454,1711,56456,56459],{},[1692,56448,56449],{},"standard interactions"," are supported just like on a regular HTML element — ",[1692,56452,56453],{},"hover effects",[1692,56455,1170],{},[1697,56457,56458],{},"any kind of DOM interaction"," are fully possible.",[608,56461,56462],{},[56463,56464],"objects-html-transition-demo",{},[5330,56466,5332,56467,56469],{},[5334,56468,54003],{},[626,56470,56473],{"className":628,"code":56471,"highlights":56472,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref } from 'vue'\n\nconst gl = {\n clearColor: '#82DBC5',\n clearAlpha: 0,\n shadows: true,\n alpha: true,\n antialias: true,\n}\n\nconst rootRef = ref\u003CHTMLElement>()\n\nconst bgColor = ref('#F6B03B')\n\nconst geometries = [\n {\n component: 'TresBoxGeometry',\n args: [1, 1, 1],\n },\n {\n component: 'TresSphereGeometry',\n args: [0.7, 32, 32],\n },\n {\n component: 'TresTorusGeometry',\n args: [0.5, 0.2, 16, 100],\n },\n {\n component: 'TresConeGeometry',\n args: [0.7, 1.4, 32],\n },\n]\n\nconst getRandomBackgroundColor = (): string => {\n const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']\n const idx = Math.floor(Math.random() * colors.length)\n return colors[idx] ?? '#F6B03B'\n}\n\nconst updateBackgroundColor = () => {\n bgColor.value = getRandomBackgroundColor()\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv ref=\"rootRef\" class=\"html-demo-wrapper\">\n \u003CTresCanvas v-bind=\"gl\" class=\"!pointer-events-none\">\n \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n \u003COrbitControls :dom-element=\"rootRef\" />\n\n \u003CLevioso\n v-for=\"(geometry, index) in geometries\"\n :key=\"`html-occlude-blending-demo-${index}`\"\n :speed=\"3\"\n :float-factor=\"3.5\"\n :rotation-factor=\"1\"\n :range=\"[-0.4, 0.4]\"\n >\n \u003CTresMesh :position=\"[(index - (geometries.length - 1) / 2) * 2, 1, 0]\">\n \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/Levioso>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[0, .75, -2]\"\n :scale=\"1.15\"\n :z-index-range=\"[28, 0]\"\n >\n \u003CTransition name=\"transition-basic\">\n \u003Ch1\n v-if=\"showTransition\"\n :style=\"{ backgroundColor: bgColor }\"\n class=\"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg\"\n @click=\"updateBackgroundColor\"\n >\n \u003Cstrong>TRANSITION + \u003C/strong>\u003Cbr />\n \u003Cem>occlude=blending 💛\u003C/em>\n \u003C/h1>\n \u003C/Transition>\n \u003C/Html>\n\n \u003CTresGridHelper :position-y=\"-1.25\" />\n \u003CTresAmbientLight :intensity=\"1\" />\n \u003C/TresCanvas>\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n background-color: #82dbc5;\n}\n\n.html-demo-transition-heading:hover {\n transform: scale(1.05);\n}\n\n.transition-basic-enter-from,\n.transition-basic-leave-to {\n opacity: 0;\n transform: translateY(-20px);\n}\n\n.transition-basic-enter-active,\n.transition-basic-leave-active {\n transition: all 0.5s ease;\n}\n\n.transition-basic-enter-to,\n.transition-basic-leave-from {\n opacity: 1;\n transform: translateY(0);\n}\n\u003C/style>\n",[578,55547,54624,54625,54626,54627,54628,54629,54630,54631,54632,54633,54634,55696,54635,54636,54637,54638,54639,54640,54641],[618,56474,56475,56495,56522,56540,56558,56562,56572,56586,56596,56606,56616,56627,56631,56635,56655,56659,56681,56685,56695,56699,56713,56735,56739,56743,56757,56779,56783,56787,56801,56827,56831,56835,56850,56873,56877,56881,56885,56903,56976,57013,57034,57038,57042,57057,57073,57077,57085,57089,57097,57126,57155,57173,57192,57196,57202,57214,57226,57238,57250,57262,57275,57279,57298,57326,57334,57342,57350,57354,57360,57364,57368,57380,57393,57407,57420,57425,57445,57453,57468,57483,57498,57513,57519,57543,57561,57571,57580,57589,57594,57614,57633,57642,57651,57659,57663,57673,57681,57691,57701,57711,57721,57733,57737,57741,57754,57772,57776,57780,57789,57798,57808,57824,57828,57832,57841,57850,57868,57872,57876,57885,57894,57904,57918,57922],{"__ignoreMap":576},[637,56476,56477,56479,56481,56483,56485,56487,56489,56491,56493],{"class":639,"line":577},[637,56478,643],{"class":642},[637,56480,647],{"class":646},[637,56482,651],{"class":650},[637,56484,654],{"class":650},[637,56486,657],{"class":642},[637,56488,660],{"class":642},[637,56490,664],{"class":663},[637,56492,660],{"class":642},[637,56494,669],{"class":642},[637,56496,56498,56500,56502,56504,56506,56508,56510,56512,56514,56516,56518,56520],{"class":56497,"line":578},[639,673],[637,56499,677],{"class":676},[637,56501,680],{"class":642},[637,56503,53581],{"class":683},[637,56505,687],{"class":642},[637,56507,9553],{"class":683},[637,56509,687],{"class":642},[637,56511,690],{"class":683},[637,56513,693],{"class":642},[637,56515,696],{"class":676},[637,56517,699],{"class":642},[637,56519,702],{"class":663},[637,56521,705],{"class":642},[637,56523,56524,56526,56528,56530,56532,56534,56536,56538],{"class":639,"line":708},[637,56525,677],{"class":676},[637,56527,680],{"class":642},[637,56529,715],{"class":683},[637,56531,693],{"class":642},[637,56533,696],{"class":676},[637,56535,699],{"class":642},[637,56537,724],{"class":663},[637,56539,705],{"class":642},[637,56541,56542,56544,56546,56548,56550,56552,56554,56556],{"class":639,"line":729},[637,56543,677],{"class":676},[637,56545,680],{"class":642},[637,56547,3895],{"class":683},[637,56549,693],{"class":642},[637,56551,696],{"class":676},[637,56553,699],{"class":642},[637,56555,633],{"class":663},[637,56557,705],{"class":642},[637,56559,56560],{"class":639,"line":739},[637,56561,742],{"emptyLinePlaceholder":594},[637,56563,56564,56566,56568,56570],{"class":639,"line":745},[637,56565,2438],{"class":650},[637,56567,54775],{"class":683},[637,56569,657],{"class":642},[637,56571,1226],{"class":642},[637,56573,56574,56576,56578,56580,56582,56584],{"class":639,"line":755},[637,56575,54784],{"class":646},[637,56577,1240],{"class":642},[637,56579,699],{"class":642},[637,56581,11812],{"class":663},[637,56583,2463],{"class":642},[637,56585,2511],{"class":642},[637,56587,56588,56590,56592,56594],{"class":639,"line":778},[637,56589,54799],{"class":646},[637,56591,1240],{"class":642},[637,56593,2529],{"class":2524},[637,56595,2511],{"class":642},[637,56597,56598,56600,56602,56604],{"class":639,"line":790},[637,56599,54810],{"class":646},[637,56601,1240],{"class":642},[637,56603,4421],{"class":4420},[637,56605,2511],{"class":642},[637,56607,56608,56610,56612,56614],{"class":639,"line":800},[637,56609,54821],{"class":646},[637,56611,1240],{"class":642},[637,56613,4421],{"class":4420},[637,56615,2511],{"class":642},[637,56617,56618,56621,56623,56625],{"class":639,"line":805},[637,56619,56620],{"class":646}," antialias",[637,56622,1240],{"class":642},[637,56624,4421],{"class":4420},[637,56626,2511],{"class":642},[637,56628,56629],{"class":639,"line":827},[637,56630,1347],{"class":642},[637,56632,56633],{"class":639,"line":631},[637,56634,742],{"emptyLinePlaceholder":594},[637,56636,56637,56639,56642,56644,56646,56648,56651,56653],{"class":639,"line":850},[637,56638,2438],{"class":650},[637,56640,56641],{"class":683}," rootRef ",[637,56643,657],{"class":642},[637,56645,3895],{"class":2457},[637,56647,643],{"class":642},[637,56649,56650],{"class":1222},"HTMLElement",[637,56652,3674],{"class":642},[637,56654,6556],{"class":683},[637,56656,56657],{"class":639,"line":861},[637,56658,742],{"emptyLinePlaceholder":594},[637,56660,56661,56663,56666,56668,56670,56672,56674,56677,56679],{"class":639,"line":872},[637,56662,2438],{"class":650},[637,56664,56665],{"class":683}," bgColor ",[637,56667,657],{"class":642},[637,56669,3895],{"class":2457},[637,56671,2460],{"class":683},[637,56673,2463],{"class":642},[637,56675,56676],{"class":663},"#F6B03B",[637,56678,2463],{"class":642},[637,56680,2471],{"class":683},[637,56682,56683],{"class":639,"line":882},[637,56684,742],{"emptyLinePlaceholder":594},[637,56686,56687,56689,56691,56693],{"class":639,"line":632},[637,56688,2438],{"class":650},[637,56690,54863],{"class":683},[637,56692,657],{"class":642},[637,56694,20718],{"class":683},[637,56696,56697],{"class":639,"line":902},[637,56698,2494],{"class":642},[637,56700,56701,56703,56705,56707,56709,56711],{"class":639,"line":912},[637,56702,54876],{"class":646},[637,56704,1240],{"class":642},[637,56706,699],{"class":642},[637,56708,867],{"class":663},[637,56710,2463],{"class":642},[637,56712,2511],{"class":642},[637,56714,56715,56717,56719,56721,56723,56725,56727,56729,56731,56733],{"class":639,"line":2648},[637,56716,54891],{"class":646},[637,56718,1240],{"class":642},[637,56720,2521],{"class":683},[637,56722,1897],{"class":2524},[637,56724,687],{"class":642},[637,56726,2584],{"class":2524},[637,56728,687],{"class":642},[637,56730,2584],{"class":2524},[637,56732,2537],{"class":683},[637,56734,2511],{"class":642},[637,56736,56737],{"class":639,"line":2657},[637,56738,2620],{"class":642},[637,56740,56741],{"class":639,"line":2677},[637,56742,2494],{"class":642},[637,56744,56745,56747,56749,56751,56753,56755],{"class":639,"line":2686},[637,56746,54876],{"class":646},[637,56748,1240],{"class":642},[637,56750,699],{"class":642},[637,56752,3981],{"class":663},[637,56754,2463],{"class":642},[637,56756,2511],{"class":642},[637,56758,56759,56761,56763,56765,56767,56769,56771,56773,56775,56777],{"class":639,"line":2695},[637,56760,54891],{"class":646},[637,56762,1240],{"class":642},[637,56764,2521],{"class":683},[637,56766,47570],{"class":2524},[637,56768,687],{"class":642},[637,56770,31065],{"class":2524},[637,56772,687],{"class":642},[637,56774,31065],{"class":2524},[637,56776,2537],{"class":683},[637,56778,2511],{"class":642},[637,56780,56781],{"class":639,"line":2704},[637,56782,2620],{"class":642},[637,56784,56785],{"class":639,"line":2726},[637,56786,2494],{"class":642},[637,56788,56789,56791,56793,56795,56797,56799],{"class":639,"line":2770},[637,56790,54876],{"class":646},[637,56792,1240],{"class":642},[637,56794,699],{"class":642},[637,56796,11884],{"class":663},[637,56798,2463],{"class":642},[637,56800,2511],{"class":642},[637,56802,56803,56805,56807,56809,56811,56813,56815,56817,56819,56821,56823,56825],{"class":639,"line":2779},[637,56804,54891],{"class":646},[637,56806,1240],{"class":642},[637,56808,2521],{"class":683},[637,56810,1969],{"class":2524},[637,56812,687],{"class":642},[637,56814,34559],{"class":2524},[637,56816,687],{"class":642},[637,56818,34564],{"class":2524},[637,56820,687],{"class":642},[637,56822,7784],{"class":2524},[637,56824,2537],{"class":683},[637,56826,2511],{"class":642},[637,56828,56829],{"class":639,"line":2788},[637,56830,2620],{"class":642},[637,56832,56833],{"class":639,"line":3945},[637,56834,2494],{"class":642},[637,56836,56837,56839,56841,56843,56846,56848],{"class":639,"line":3976},[637,56838,54876],{"class":646},[637,56840,1240],{"class":642},[637,56842,699],{"class":642},[637,56844,56845],{"class":663},"TresConeGeometry",[637,56847,2463],{"class":642},[637,56849,2511],{"class":642},[637,56851,56852,56854,56856,56858,56860,56862,56865,56867,56869,56871],{"class":639,"line":3997},[637,56853,54891],{"class":646},[637,56855,1240],{"class":642},[637,56857,2521],{"class":683},[637,56859,47570],{"class":2524},[637,56861,687],{"class":642},[637,56863,56864],{"class":2524}," 1.4",[637,56866,687],{"class":642},[637,56868,31065],{"class":2524},[637,56870,2537],{"class":683},[637,56872,2511],{"class":642},[637,56874,56875],{"class":639,"line":4016},[637,56876,2620],{"class":642},[637,56878,56879],{"class":639,"line":4048},[637,56880,20754],{"class":683},[637,56882,56883],{"class":639,"line":4057},[637,56884,742],{"emptyLinePlaceholder":594},[637,56886,56887,56889,56892,56894,56897,56899,56901],{"class":639,"line":4066},[637,56888,2438],{"class":650},[637,56890,56891],{"class":683}," getRandomBackgroundColor ",[637,56893,657],{"class":642},[637,56895,56896],{"class":642}," ():",[637,56898,5360],{"class":1222},[637,56900,3700],{"class":650},[637,56902,1226],{"class":642},[637,56904,56905,56908,56911,56913,56915,56917,56919,56921,56923,56925,56927,56929,56931,56933,56936,56938,56940,56942,56945,56947,56949,56951,56954,56956,56958,56960,56963,56965,56967,56969,56972,56974],{"class":639,"line":21457},[637,56906,56907],{"class":650}," const",[637,56909,56910],{"class":683}," colors",[637,56912,2454],{"class":642},[637,56914,2521],{"class":646},[637,56916,2463],{"class":642},[637,56918,56676],{"class":663},[637,56920,2463],{"class":642},[637,56922,687],{"class":642},[637,56924,699],{"class":642},[637,56926,11812],{"class":663},[637,56928,2463],{"class":642},[637,56930,687],{"class":642},[637,56932,699],{"class":642},[637,56934,56935],{"class":663},"#FF5733",[637,56937,2463],{"class":642},[637,56939,687],{"class":642},[637,56941,699],{"class":642},[637,56943,56944],{"class":663},"#33FF57",[637,56946,2463],{"class":642},[637,56948,687],{"class":642},[637,56950,699],{"class":642},[637,56952,56953],{"class":663},"#3357FF",[637,56955,2463],{"class":642},[637,56957,687],{"class":642},[637,56959,699],{"class":642},[637,56961,56962],{"class":663},"#F333FF",[637,56964,2463],{"class":642},[637,56966,687],{"class":642},[637,56968,699],{"class":642},[637,56970,56971],{"class":663},"#33FFF5",[637,56973,2463],{"class":642},[637,56975,20754],{"class":646},[637,56977,56978,56980,56983,56985,56987,56989,56991,56993,56996,56998,57001,57003,57005,57007,57009,57011],{"class":639,"line":21472},[637,56979,56907],{"class":650},[637,56981,56982],{"class":683}," idx",[637,56984,2454],{"class":642},[637,56986,8508],{"class":683},[637,56988,1146],{"class":642},[637,56990,8513],{"class":2457},[637,56992,2460],{"class":646},[637,56994,56995],{"class":683},"Math",[637,56997,1146],{"class":642},[637,56999,57000],{"class":2457},"random",[637,57002,7005],{"class":646},[637,57004,23137],{"class":642},[637,57006,56910],{"class":683},[637,57008,1146],{"class":642},[637,57010,21288],{"class":683},[637,57012,2471],{"class":646},[637,57014,57015,57017,57019,57021,57024,57026,57028,57030,57032],{"class":639,"line":21487},[637,57016,23103],{"class":676},[637,57018,56910],{"class":683},[637,57020,8752],{"class":646},[637,57022,57023],{"class":683},"idx",[637,57025,5387],{"class":646},[637,57027,3717],{"class":642},[637,57029,699],{"class":642},[637,57031,56676],{"class":663},[637,57033,705],{"class":642},[637,57035,57036],{"class":639,"line":21492},[637,57037,1347],{"class":642},[637,57039,57040],{"class":639,"line":21499},[637,57041,742],{"emptyLinePlaceholder":594},[637,57043,57044,57046,57049,57051,57053,57055],{"class":639,"line":21504},[637,57045,2438],{"class":650},[637,57047,57048],{"class":683}," updateBackgroundColor ",[637,57050,657],{"class":642},[637,57052,7101],{"class":642},[637,57054,3700],{"class":650},[637,57056,1226],{"class":642},[637,57058,57059,57062,57064,57066,57068,57071],{"class":639,"line":21510},[637,57060,57061],{"class":683}," bgColor",[637,57063,1146],{"class":642},[637,57065,3708],{"class":683},[637,57067,2454],{"class":642},[637,57069,57070],{"class":2457}," getRandomBackgroundColor",[637,57072,6556],{"class":646},[637,57074,57075],{"class":639,"line":21531},[637,57076,1347],{"class":642},[637,57078,57079,57081,57083],{"class":639,"line":21537},[637,57080,732],{"class":642},[637,57082,647],{"class":646},[637,57084,669],{"class":642},[637,57086,57087],{"class":639,"line":21544},[637,57088,742],{"emptyLinePlaceholder":594},[637,57090,57091,57093,57095],{"class":639,"line":21549},[637,57092,643],{"class":642},[637,57094,750],{"class":646},[637,57096,669],{"class":642},[637,57098,57099,57101,57103,57105,57107,57109,57112,57114,57116,57118,57120,57122,57124],{"class":639,"line":21570},[637,57100,758],{"class":642},[637,57102,4142],{"class":646},[637,57104,3895],{"class":650},[637,57106,657],{"class":642},[637,57108,660],{"class":642},[637,57110,57111],{"class":663},"rootRef",[637,57113,660],{"class":642},[637,57115,25122],{"class":650},[637,57117,657],{"class":642},[637,57119,660],{"class":642},[637,57121,56184],{"class":663},[637,57123,660],{"class":642},[637,57125,669],{"class":642},[637,57127,57128,57130,57132,57134,57136,57138,57140,57142,57144,57146,57148,57151,57153],{"class":639,"line":21583},[637,57129,781],{"class":642},[637,57131,761],{"class":646},[637,57133,10236],{"class":650},[637,57135,657],{"class":642},[637,57137,660],{"class":642},[637,57139,55206],{"class":663},[637,57141,660],{"class":642},[637,57143,25122],{"class":650},[637,57145,657],{"class":642},[637,57147,660],{"class":642},[637,57149,57150],{"class":663},"!pointer-events-none",[637,57152,660],{"class":642},[637,57154,669],{"class":642},[637,57156,57157,57159,57161,57163,57165,57167,57169,57171],{"class":639,"line":21609},[637,57158,853],{"class":642},[637,57160,784],{"class":646},[637,57162,1508],{"class":650},[637,57164,657],{"class":642},[637,57166,660],{"class":642},[637,57168,55225],{"class":663},[637,57170,660],{"class":642},[637,57172,787],{"class":642},[637,57174,57175,57177,57179,57182,57184,57186,57188,57190],{"class":639,"line":21614},[637,57176,853],{"class":642},[637,57178,795],{"class":646},[637,57180,57181],{"class":650}," :dom-element",[637,57183,657],{"class":642},[637,57185,660],{"class":642},[637,57187,57111],{"class":663},[637,57189,660],{"class":642},[637,57191,787],{"class":642},[637,57193,57194],{"class":639,"line":21621},[637,57195,742],{"emptyLinePlaceholder":594},[637,57197,57198,57200],{"class":639,"line":21630},[637,57199,853],{"class":642},[637,57201,55248],{"class":646},[637,57203,57204,57206,57208,57210,57212],{"class":639,"line":21635},[637,57205,7998],{"class":650},[637,57207,657],{"class":642},[637,57209,660],{"class":642},[637,57211,55259],{"class":663},[637,57213,3154],{"class":642},[637,57215,57216,57218,57220,57222,57224],{"class":639,"line":21644},[637,57217,8012],{"class":650},[637,57219,657],{"class":642},[637,57221,660],{"class":642},[637,57223,55272],{"class":663},[637,57225,3154],{"class":642},[637,57227,57228,57230,57232,57234,57236],{"class":639,"line":21663},[637,57229,30178],{"class":650},[637,57231,657],{"class":642},[637,57233,660],{"class":642},[637,57235,21410],{"class":663},[637,57237,3154],{"class":642},[637,57239,57240,57242,57244,57246,57248],{"class":639,"line":21673},[637,57241,55291],{"class":650},[637,57243,657],{"class":642},[637,57245,660],{"class":642},[637,57247,55298],{"class":663},[637,57249,3154],{"class":642},[637,57251,57252,57254,57256,57258,57260],{"class":639,"line":21708},[637,57253,55305],{"class":650},[637,57255,657],{"class":642},[637,57257,660],{"class":642},[637,57259,1897],{"class":663},[637,57261,3154],{"class":642},[637,57263,57264,57266,57268,57270,57273],{"class":639,"line":21717},[637,57265,55318],{"class":650},[637,57267,657],{"class":642},[637,57269,660],{"class":642},[637,57271,57272],{"class":663},"[-0.4, 0.4]",[637,57274,3154],{"class":642},[637,57276,57277],{"class":639,"line":21737},[637,57278,53780],{"class":642},[637,57280,57281,57283,57285,57287,57289,57291,57294,57296],{"class":639,"line":21746},[637,57282,864],{"class":642},[637,57284,856],{"class":646},[637,57286,1508],{"class":650},[637,57288,657],{"class":642},[637,57290,660],{"class":642},[637,57292,57293],{"class":663},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[637,57295,660],{"class":642},[637,57297,669],{"class":642},[637,57299,57300,57302,57304,57306,57308,57310,57312,57314,57316,57318,57320,57322,57324],{"class":639,"line":21755},[637,57301,27868],{"class":642},[637,57303,55368],{"class":646},[637,57305,55371],{"class":650},[637,57307,657],{"class":642},[637,57309,660],{"class":642},[637,57311,55378],{"class":663},[637,57313,660],{"class":642},[637,57315,1982],{"class":650},[637,57317,657],{"class":642},[637,57319,660],{"class":642},[637,57321,55389],{"class":663},[637,57323,660],{"class":642},[637,57325,787],{"class":642},[637,57327,57328,57330,57332],{"class":639,"line":21774},[637,57329,27868],{"class":642},[637,57331,877],{"class":646},[637,57333,787],{"class":642},[637,57335,57336,57338,57340],{"class":639,"line":21817},[637,57337,27907],{"class":642},[637,57339,856],{"class":646},[637,57341,669],{"class":642},[637,57343,57344,57346,57348],{"class":639,"line":21859},[637,57345,885],{"class":642},[637,57347,9664],{"class":646},[637,57349,669],{"class":642},[637,57351,57352],{"class":639,"line":21879},[637,57353,742],{"emptyLinePlaceholder":594},[637,57355,57356,57358],{"class":639,"line":21908},[637,57357,853],{"class":642},[637,57359,53720],{"class":646},[637,57361,57362],{"class":639,"line":21917},[637,57363,53726],{"class":650},[637,57365,57366],{"class":639,"line":21926},[637,57367,53732],{"class":650},[637,57369,57370,57372,57374,57376,57378],{"class":639,"line":54622},[637,57371,55444],{"class":650},[637,57373,657],{"class":642},[637,57375,660],{"class":642},[637,57377,49715],{"class":663},[637,57379,3154],{"class":642},[637,57381,57382,57384,57386,57388,57391],{"class":639,"line":54623},[637,57383,8026],{"class":650},[637,57385,657],{"class":642},[637,57387,660],{"class":642},[637,57389,57390],{"class":663},"[0, .75, -2]",[637,57392,3154],{"class":642},[637,57394,57396,57398,57400,57402,57405],{"class":57395,"line":55547},[639,673],[637,57397,53766],{"class":650},[637,57399,657],{"class":642},[637,57401,660],{"class":642},[637,57403,57404],{"class":663},"1.15",[637,57406,3154],{"class":642},[637,57408,57410,57412,57414,57416,57418],{"class":57409,"line":54624},[639,673],[637,57411,55472],{"class":650},[637,57413,657],{"class":642},[637,57415,660],{"class":642},[637,57417,54089],{"class":663},[637,57419,3154],{"class":642},[637,57421,57423],{"class":57422,"line":54625},[639,673],[637,57424,53780],{"class":642},[637,57426,57428,57430,57432,57434,57436,57438,57441,57443],{"class":57427,"line":54626},[639,673],[637,57429,864],{"class":642},[637,57431,25185],{"class":646},[637,57433,3838],{"class":650},[637,57435,657],{"class":642},[637,57437,660],{"class":642},[637,57439,57440],{"class":663},"transition-basic",[637,57442,660],{"class":642},[637,57444,669],{"class":642},[637,57446,57448,57450],{"class":57447,"line":54627},[639,673],[637,57449,27868],{"class":642},[637,57451,57452],{"class":646},"h1\n",[637,57454,57456,57459,57461,57463,57466],{"class":57455,"line":54628},[639,673],[637,57457,57458],{"class":650}," v-if",[637,57460,657],{"class":642},[637,57462,660],{"class":642},[637,57464,57465],{"class":663},"showTransition",[637,57467,3154],{"class":642},[637,57469,57471,57474,57476,57478,57481],{"class":57470,"line":54629},[639,673],[637,57472,57473],{"class":650}," :style",[637,57475,657],{"class":642},[637,57477,660],{"class":642},[637,57479,57480],{"class":663},"{ backgroundColor: bgColor }",[637,57482,3154],{"class":642},[637,57484,57486,57489,57491,57493,57496],{"class":57485,"line":54630},[639,673],[637,57487,57488],{"class":650}," class",[637,57490,657],{"class":642},[637,57492,660],{"class":642},[637,57494,57495],{"class":663},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[637,57497,3154],{"class":642},[637,57499,57501,57504,57506,57508,57511],{"class":57500,"line":54631},[639,673],[637,57502,57503],{"class":650}," @click",[637,57505,657],{"class":642},[637,57507,660],{"class":642},[637,57509,57510],{"class":663},"updateBackgroundColor",[637,57512,3154],{"class":642},[637,57514,57516],{"class":57515,"line":54632},[639,673],[637,57517,57518],{"class":642}," >\n",[637,57520,57522,57525,57527,57529,57532,57534,57536,57539,57541],{"class":57521,"line":54633},[639,673],[637,57523,57524],{"class":642}," \u003C",[637,57526,1692],{"class":646},[637,57528,3674],{"class":642},[637,57530,57531],{"class":683},"TRANSITION + ",[637,57533,732],{"class":642},[637,57535,1692],{"class":646},[637,57537,57538],{"class":642},">\u003C",[637,57540,7576],{"class":646},[637,57542,787],{"class":642},[637,57544,57546,57548,57550,57552,57555,57557,57559],{"class":57545,"line":54634},[639,673],[637,57547,57524],{"class":642},[637,57549,1697],{"class":646},[637,57551,3674],{"class":642},[637,57553,57554],{"class":683},"occlude=blending 💛",[637,57556,732],{"class":642},[637,57558,1697],{"class":646},[637,57560,669],{"class":642},[637,57562,57564,57567,57569],{"class":57563,"line":55696},[639,673],[637,57565,57566],{"class":642}," \u003C/",[637,57568,53787],{"class":646},[637,57570,669],{"class":642},[637,57572,57574,57576,57578],{"class":57573,"line":54635},[639,673],[637,57575,27907],{"class":642},[637,57577,25185],{"class":646},[637,57579,669],{"class":642},[637,57581,57583,57585,57587],{"class":57582,"line":54636},[639,673],[637,57584,885],{"class":642},[637,57586,53816],{"class":646},[637,57588,669],{"class":642},[637,57590,57592],{"class":57591,"line":54637},[639,673],[637,57593,742],{"emptyLinePlaceholder":594},[637,57595,57597,57599,57601,57603,57605,57607,57610,57612],{"class":57596,"line":54638},[639,673],[637,57598,853],{"class":642},[637,57600,8070],{"class":646},[637,57602,1962],{"class":650},[637,57604,657],{"class":642},[637,57606,660],{"class":642},[637,57608,57609],{"class":663},"-1.25",[637,57611,660],{"class":642},[637,57613,787],{"class":642},[637,57615,57617,57619,57621,57623,57625,57627,57629,57631],{"class":57616,"line":54639},[639,673],[637,57618,853],{"class":642},[637,57620,9702],{"class":646},[637,57622,1890],{"class":650},[637,57624,657],{"class":642},[637,57626,660],{"class":642},[637,57628,1897],{"class":663},[637,57630,660],{"class":642},[637,57632,787],{"class":642},[637,57634,57636,57638,57640],{"class":57635,"line":54640},[639,673],[637,57637,895],{"class":642},[637,57639,761],{"class":646},[637,57641,669],{"class":642},[637,57643,57645,57647,57649],{"class":57644,"line":54641},[639,673],[637,57646,905],{"class":642},[637,57648,4142],{"class":646},[637,57650,669],{"class":642},[637,57652,57653,57655,57657],{"class":639,"line":54642},[637,57654,732],{"class":642},[637,57656,750],{"class":646},[637,57658,669],{"class":642},[637,57660,57661],{"class":639,"line":54643},[637,57662,742],{"emptyLinePlaceholder":594},[637,57664,57665,57667,57669,57671],{"class":639,"line":54644},[637,57666,643],{"class":642},[637,57668,1349],{"class":646},[637,57670,53867],{"class":650},[637,57672,669],{"class":642},[637,57674,57675,57677,57679],{"class":639,"line":54645},[637,57676,1146],{"class":642},[637,57678,56184],{"class":1222},[637,57680,1226],{"class":642},[637,57682,57683,57685,57687,57689],{"class":639,"line":55811},[637,57684,1262],{"class":4152},[637,57686,1240],{"class":642},[637,57688,56196],{"class":2524},[637,57690,9543],{"class":642},[637,57692,57693,57695,57697,57699],{"class":639,"line":54646},[637,57694,1272],{"class":4152},[637,57696,1240],{"class":642},[637,57698,56196],{"class":2524},[637,57700,9543],{"class":642},[637,57702,57703,57705,57707,57709],{"class":639,"line":54647},[637,57704,5368],{"class":4152},[637,57706,1240],{"class":642},[637,57708,4158],{"class":683},[637,57710,9543],{"class":642},[637,57712,57713,57715,57717,57719],{"class":639,"line":54648},[637,57714,56226],{"class":4152},[637,57716,1240],{"class":642},[637,57718,56231],{"class":683},[637,57720,9543],{"class":642},[637,57722,57723,57725,57727,57729,57731],{"class":639,"line":54649},[637,57724,53882],{"class":4152},[637,57726,1240],{"class":642},[637,57728,53887],{"class":642},[637,57730,56245],{"class":683},[637,57732,9543],{"class":642},[637,57734,57735],{"class":639,"line":54650},[637,57736,1347],{"class":642},[637,57738,57739],{"class":639,"line":54651},[637,57740,742],{"emptyLinePlaceholder":594},[637,57742,57743,57745,57748,57750,57752],{"class":639,"line":54652},[637,57744,1146],{"class":642},[637,57746,57747],{"class":1222},"html-demo-transition-heading",[637,57749,1240],{"class":642},[637,57751,8856],{"class":650},[637,57753,1226],{"class":642},[637,57755,57756,57759,57761,57764,57766,57769],{"class":639,"line":54653},[637,57757,57758],{"class":4152}," transform",[637,57760,1240],{"class":642},[637,57762,57763],{"class":2457}," scale",[637,57765,2460],{"class":642},[637,57767,57768],{"class":2524},"1.05",[637,57770,57771],{"class":642},");\n",[637,57773,57774],{"class":639,"line":54654},[637,57775,1347],{"class":642},[637,57777,57778],{"class":639,"line":54655},[637,57779,742],{"emptyLinePlaceholder":594},[637,57781,57782,57784,57787],{"class":639,"line":54656},[637,57783,1146],{"class":642},[637,57785,57786],{"class":1222},"transition-basic-enter-from",[637,57788,2511],{"class":642},[637,57790,57791,57793,57796],{"class":639,"line":55936},[637,57792,1146],{"class":642},[637,57794,57795],{"class":1222},"transition-basic-leave-to",[637,57797,1226],{"class":642},[637,57799,57800,57802,57804,57806],{"class":639,"line":55960},[637,57801,5508],{"class":4152},[637,57803,1240],{"class":642},[637,57805,2529],{"class":2524},[637,57807,9543],{"class":642},[637,57809,57810,57812,57814,57817,57819,57822],{"class":639,"line":55981},[637,57811,57758],{"class":4152},[637,57813,1240],{"class":642},[637,57815,57816],{"class":2457}," translateY",[637,57818,2460],{"class":642},[637,57820,57821],{"class":2524},"-20px",[637,57823,57771],{"class":642},[637,57825,57826],{"class":639,"line":55990},[637,57827,1347],{"class":642},[637,57829,57830],{"class":639,"line":55999},[637,57831,742],{"emptyLinePlaceholder":594},[637,57833,57834,57836,57839],{"class":639,"line":56004},[637,57835,1146],{"class":642},[637,57837,57838],{"class":1222},"transition-basic-enter-active",[637,57840,2511],{"class":642},[637,57842,57843,57845,57848],{"class":639,"line":56011},[637,57844,1146],{"class":642},[637,57846,57847],{"class":1222},"transition-basic-leave-active",[637,57849,1226],{"class":642},[637,57851,57852,57855,57857,57860,57863,57866],{"class":639,"line":56026},[637,57853,57854],{"class":4152}," transition",[637,57856,1240],{"class":642},[637,57858,57859],{"class":683}," all ",[637,57861,57862],{"class":2524},"0.5s",[637,57864,57865],{"class":683}," ease",[637,57867,9543],{"class":642},[637,57869,57870],{"class":639,"line":56040},[637,57871,1347],{"class":642},[637,57873,57874],{"class":639,"line":56055},[637,57875,742],{"emptyLinePlaceholder":594},[637,57877,57878,57880,57883],{"class":639,"line":56069},[637,57879,1146],{"class":642},[637,57881,57882],{"class":1222},"transition-basic-enter-to",[637,57884,2511],{"class":642},[637,57886,57887,57889,57892],{"class":639,"line":56082},[637,57888,1146],{"class":642},[637,57890,57891],{"class":1222},"transition-basic-leave-from",[637,57893,1226],{"class":642},[637,57895,57896,57898,57900,57902],{"class":639,"line":56088},[637,57897,5508],{"class":4152},[637,57899,1240],{"class":642},[637,57901,2584],{"class":2524},[637,57903,9543],{"class":642},[637,57905,57906,57908,57910,57912,57914,57916],{"class":639,"line":56093},[637,57907,57758],{"class":4152},[637,57909,1240],{"class":642},[637,57911,57816],{"class":2457},[637,57913,2460],{"class":642},[637,57915,965],{"class":2524},[637,57917,57771],{"class":642},[637,57919,57920],{"class":639,"line":56098},[637,57921,1347],{"class":642},[637,57923,57924,57926,57928],{"class":639,"line":56117},[637,57925,732],{"class":642},[637,57927,1349],{"class":646},[637,57929,669],{"class":642},[4074,57931,56415,57933],{"id":57932},"using-iframes",[618,57934,57935],{},"iframes",[614,57937,57938,57939,57941],{},"You can achieve pretty cool results with the ",[618,57940,53816],{}," 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.",[2318,57943,57944],{},[57945,57946],"objects-html-iframe-demo",{},[5330,57948,5332,57949,57951],{},[5334,57950,54003],{},[626,57952,57954],{"className":45557,"code":57953,"language":45559,"meta":576,"style":576},"\u003Chtml\n transform\n center\n :cast-shadow=\"true\"\n :receive-shadow=\"true\"\n occlude=\"blending\"\n :z-index-range=\"[28, 0]\"\n :position-y=\"2.5\"\n :portal=\"portalRef\"\n :style=\"{ userSelect: 'none' }\"\n>\n \u003Ciframe class=\"w-[700px] h-[500px]\" src=\"https://tresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C/iframe>\n\u003C/html>\n",[618,57955,57956,57962,57967,57972,57985,57998,58011,58024,58038,58052,58066,58070,58140],{"__ignoreMap":576},[637,57957,57958,57960],{"class":639,"line":577},[637,57959,643],{"class":642},[637,57961,54450],{"class":646},[637,57963,57964],{"class":639,"line":578},[637,57965,57966],{"class":650}," transform\n",[637,57968,57969],{"class":639,"line":708},[637,57970,57971],{"class":650}," center\n",[637,57973,57974,57977,57979,57981,57983],{"class":639,"line":729},[637,57975,57976],{"class":650}," :cast-shadow",[637,57978,657],{"class":642},[637,57980,660],{"class":642},[637,57982,961],{"class":663},[637,57984,3154],{"class":642},[637,57986,57987,57990,57992,57994,57996],{"class":639,"line":739},[637,57988,57989],{"class":650}," :receive-shadow",[637,57991,657],{"class":642},[637,57993,660],{"class":642},[637,57995,961],{"class":663},[637,57997,3154],{"class":642},[637,57999,58000,58003,58005,58007,58009],{"class":639,"line":745},[637,58001,58002],{"class":650}," occlude",[637,58004,657],{"class":642},[637,58006,660],{"class":642},[637,58008,49715],{"class":663},[637,58010,3154],{"class":642},[637,58012,58013,58016,58018,58020,58022],{"class":639,"line":755},[637,58014,58015],{"class":650}," :z-index-range",[637,58017,657],{"class":642},[637,58019,660],{"class":642},[637,58021,54089],{"class":663},[637,58023,3154],{"class":642},[637,58025,58026,58029,58031,58033,58036],{"class":639,"line":778},[637,58027,58028],{"class":650}," :position-y",[637,58030,657],{"class":642},[637,58032,660],{"class":642},[637,58034,58035],{"class":663},"2.5",[637,58037,3154],{"class":642},[637,58039,58040,58043,58045,58047,58050],{"class":639,"line":790},[637,58041,58042],{"class":650}," :portal",[637,58044,657],{"class":642},[637,58046,660],{"class":642},[637,58048,58049],{"class":663},"portalRef",[637,58051,3154],{"class":642},[637,58053,58054,58057,58059,58061,58064],{"class":639,"line":800},[637,58055,58056],{"class":650}," :style",[637,58058,657],{"class":642},[637,58060,660],{"class":642},[637,58062,58063],{"class":663},"{ userSelect: 'none' }",[637,58065,3154],{"class":642},[637,58067,58068],{"class":639,"line":805},[637,58069,669],{"class":642},[637,58071,58072,58074,58077,58079,58081,58083,58086,58088,58091,58093,58095,58098,58100,58103,58105,58107,58109,58111,58114,58116,58118,58121,58123,58126,58128,58130,58132,58134,58136,58138],{"class":639,"line":827},[637,58073,758],{"class":642},[637,58075,58076],{"class":646},"iframe",[637,58078,25122],{"class":650},[637,58080,657],{"class":642},[637,58082,660],{"class":642},[637,58084,58085],{"class":663},"w-[700px] h-[500px]",[637,58087,660],{"class":642},[637,58089,58090],{"class":650}," src",[637,58092,657],{"class":642},[637,58094,660],{"class":642},[637,58096,58097],{"class":663},"https://tresjs.org",[637,58099,660],{"class":642},[637,58101,58102],{"class":650}," frameborder",[637,58104,657],{"class":642},[637,58106,660],{"class":642},[637,58108,965],{"class":663},[637,58110,660],{"class":642},[637,58112,58113],{"class":650}," :width",[637,58115,657],{"class":642},[637,58117,660],{"class":642},[637,58119,58120],{"class":663},"700",[637,58122,660],{"class":642},[637,58124,58125],{"class":650}," :height",[637,58127,657],{"class":642},[637,58129,660],{"class":642},[637,58131,43087],{"class":663},[637,58133,660],{"class":642},[637,58135,25158],{"class":642},[637,58137,58076],{"class":646},[637,58139,669],{"class":642},[637,58141,58142,58144,58146],{"class":639,"line":631},[637,58143,732],{"class":642},[637,58145,45559],{"class":646},[637,58147,669],{"class":642},[58149,58150,58151],"info",{},[614,58152,58153,58154,58157,58158,58161,58162],{},"The demos use ",[618,58155,58156],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[618,58159,58160],{},"z-index: 30",").\n",[1692,58163,58164],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[504,58166,922],{"id":921},[927,58168,58169,58179],{},[930,58170,58171],{},[933,58172,58173,58175,58177],{},[936,58174,938],{},[936,58176,941],{},[936,58178,944],{},[946,58180,58181,58198,58213,58231,58255,58275,58292,58310,58321,58340,58363,58403,58441,58461,58494],{},[933,58182,58183,58187,58193],{},[951,58184,58185],{},[1692,58186,4760],{},[951,58188,58189,58190,1146],{},"Wrapping ",[1697,58191,58192],{},"HTML element",[951,58194,58195],{},[618,58196,58197],{},"'div'",[933,58199,58200,58205,58211],{},[951,58201,58202],{},[1692,58203,58204],{},"wrapperClass",[951,58206,2799,58207,58210],{},[618,58208,58209],{},"className"," of the wrapping element. element.",[951,58212],{},[933,58214,58215,58220,58227],{},[951,58216,58217],{},[1692,58218,58219],{},"prepend",[951,58221,58222,58223,58226],{},"Projects content ",[1697,58224,58225],{},"behind"," the canvas.",[951,58228,58229],{},[618,58230,971],{},[933,58232,58233,58237,58251],{},[951,58234,58235],{},[1692,58236,29249],{},[951,58238,1373,58239,8187,58242,58244,58245],{},[618,58240,58241],{},"transform: translate(-50%, -50%)",[7576,58243],{},"➡️ ",[1697,58246,58247,58248,58250],{},"Ignored in ",[1692,58249,12063],{}," mode.",[951,58252,58253],{},[618,58254,971],{},[933,58256,58257,58262,58271],{},[951,58258,58259],{},[1692,58260,58261],{},"fullscreen",[951,58263,58264,58265,58244,58267],{},"Aligns to the upper-left corner and fills the screen. ",[7576,58266],{},[1697,58268,58247,58269,58250],{},[1692,58270,12063],{},[951,58272,58273],{},[618,58274,971],{},[933,58276,58277,58282,58290],{},[951,58278,58279],{},[1692,58280,58281],{},"distanceFactor",[951,58283,58284,58285,58287,58288,1146],{},"Children are scaled by this factor and also by distance to a ",[618,58286,12851],{},", or zoom when using an ",[618,58289,53533],{},[951,58291],{},[933,58293,58294,58299,58305],{},[951,58295,58296],{},[1692,58297,58298],{},"zIndexRange",[951,58300,58301,58302,1146],{},"Defines the ",[1697,58303,58304],{},"Z-order range",[951,58306,58307],{},[618,58308,58309],{},"[16777271, 0]",[933,58311,58312,58316,58319],{},[951,58313,58314],{},[1692,58315,28051],{},[951,58317,58318],{},"Reference to a target container (for rendering into a different DOM node). container.",[951,58320],{},[933,58322,58323,58327,58336],{},[951,58324,58325],{},[1692,58326,12063],{},[951,58328,958,58329,58331,58332,58335],{},[618,58330,961],{},", applies ",[618,58333,58334],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[951,58337,58338],{},[618,58339,971],{},[933,58341,58342,58347,58359],{},[951,58343,58344],{},[1692,58345,58346],{},"sprite",[951,58348,58349,58350,8187,58352,58244,58354],{},"Renders as a ",[1697,58351,58346],{},[7576,58353],{},[1697,58355,58356,58357,58250],{},"Only in ",[1692,58358,12063],{},[951,58360,58361],{},[618,58362,971],{},[933,58364,58365,58370,58394],{},[951,58366,58367],{},[1692,58368,58369],{},"calculatePosition",[951,58371,58372,58373,58375,3217,58378,3217,58381,58383,58384,58387,58388,58244,58390],{},"Callback function to override the default positioning logic. ",[7576,58374],{},[1692,58376,58377],{},"Type:",[618,58379,58380],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7576,58382],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[618,58385,58386],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7576,58389],{},[1697,58391,58247,58392,58250],{},[1692,58393,12063],{},[951,58395,58396],{},[1140,58397,58400,58401],{"href":58398,"rel":58399},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1144],"Default ",[618,58402,58369],{},[933,58404,58405,58409,58439],{},[951,58406,58407],{},[1692,58408,53963],{},[951,58410,58411,58412,58414,58415,58417,58418,58421,58422,58424,58425,58428,58429,58414,58431,58434,58435,58438],{},"Enables occlusion. Possible values: ",[7576,58413],{},"- ",[618,58416,961],{}," → Occlusion against ",[1697,58419,58420],{},"all"," scene objects ",[7576,58423],{}," - ",[618,58426,58427],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7576,58430],{},[618,58432,58433],{},"'blending'"," → Uses a ",[1697,58436,58437],{},"blending-based"," occlusion method (CSS-like depth blending).",[951,58440],{},[933,58442,58443,58447,58453],{},[951,58444,58445],{},[1692,58446,5279],{},[951,58448,58449,58450,58452],{},"Custom ",[618,58451,5279],{}," to be used.",[951,58454,58455],{},[1140,58456,58459],{"href":58457,"rel":58458},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1144],[618,58460,33637],{},[933,58462,58463,58467,58492],{},[951,58464,58465],{},[1692,58466,5223],{},[951,58468,58469,3217,58475,3217,58477,58483,58484,3217,58486],{},[1692,58470,58471,58472,58474],{},"Custom shader ",[1697,58473,5223],{}," used for the occlusion mesh.",[7576,58476],{},[1692,58478,58479,58480,58482],{},"Only applies when ",[618,58481,56269],{}," is enabled"," (an occlusion mesh is created). ",[7576,58485],{},[1697,58487,58488,58489,58491],{},"Ignored in raycast occlusion modes (",[618,58490,961],{},", object refs).",[951,58493],{},[933,58495,58496,58501,58522],{},[951,58497,58498],{},[1692,58499,58500],{},"transparentMaterial",[951,58502,58503,3217,58509,3217,58511,3217,58516,3217,58518],{},[1692,58504,58505,58506,58508],{},"Enables ",[1697,58507,11644],{}," rendering for the occlusion material.",[7576,58510],{},[1692,58512,58479,58513,58515],{},[618,58514,56269],{}," creates an occlusion mesh.",[7576,58517],{},[1697,58519,58488,58520,58491],{},[618,58521,961],{},[951,58523,58524],{},[618,58525,971],{},[504,58527,1171],{"id":1170},[927,58529,58530,58538],{},[930,58531,58532],{},[933,58533,58534,58536],{},[936,58535,1180],{},[936,58537,941],{},[946,58539,58540],{},[933,58541,58542,58545],{},[951,58543,58544],{},"onOcclude",[951,58546,58547],{},"Called when the occlusion state changes.",[504,58549,58551],{"id":58550},"exposed-properties","Exposed properties",[927,58553,58554,58564],{},[930,58555,58556],{},[933,58557,58558,58560,58562],{},[936,58559,5987],{},[936,58561,5990],{},[936,58563,941],{},[946,58565,58566,58587,58607],{},[933,58567,58568,58572,58577],{},[951,58569,58570],{},[1692,58571,9347],{},[951,58573,58574],{},[618,58575,58576],{},"Ref\u003CTresObject3D | null>",[951,58578,58579,58580,58584,58585,1146],{},"Reference to the root ",[1692,58581,58582],{},[618,58583,5644],{}," used by ",[618,58586,53537],{},[933,58588,58589,58594,58598],{},[951,58590,58591],{},[1692,58592,58593],{},"isVisible",[951,58595,58596],{},[618,58597,17489],{},[951,58599,58600,58601,5634,58604,1146],{},"Reactive value that indicates whether the HTML content is ",[1692,58602,58603],{},"currently visible",[1692,58605,58606],{},"occluded",[933,58608,58609,58614,58618],{},[951,58610,58611],{},[1692,58612,58613],{},"occlusionMesh",[951,58615,58616],{},[618,58617,58576],{},[951,58619,58620,58621,58624,58625,5904,58627,58629],{},"Reference to the ",[1692,58622,58623],{},"occlusion mesh"," created when ",[618,58626,56269],{},[1692,58628,16678],{},". Used internally for geometry-based occlusion.",[504,58631,6280],{"id":6279},[2236,58633,58634,58667,58684,58739,58757],{},[2239,58635,58636,58637,58642,58643,58645,58646,5634,58649,58652,58653,58655,58656,58659,58660,58663,58664,58666],{},"✨ When using ",[1692,58638,58639],{},[618,58640,58641],{},"\u003CHtml occlude>",", if the ",[618,58644,53537],{}," component is ",[1692,58647,58648],{},"overlapping",[1692,58650,58651],{},"inside a 3D object",", it will be considered ",[1692,58654,58606],{}," and therefore ",[1692,58657,58658],{},"hidden",". To avoid this, ",[1692,58661,58662],{},"adjust the position"," of the ",[618,58665,53537],{}," component in your scene.",[2239,58668,58669,58670,58675,58676,58679,58680,58683],{},"🎨 When using ",[1692,58671,58672],{},[618,58673,58674],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1692,58677,58678],{},"selectable"," because it is rendered ",[1692,58681,58682],{},"behind the canvas",". This is required to achieve the blending effect.",[2239,58685,58686,58687,58689,58690,58692,58693],{},"⚙️ When using a ",[1692,58688,56364],{}," with occlusion in ",[618,58691,49715],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5330,58694,5332,58695,58698],{},[5334,58696,58697],{},"See more information",[14163,58699,58700,58711,58719,58726],{},[2239,58701,58702,58703,3097,58705,58707,58708,1146],{},"If you provide your own material, it must be ",[1692,58704,11644],{},[618,58706,3085],{},") with an ",[1692,58709,58710],{},"opacity \u003C 1",[2239,58712,58713,58714,58718],{},"If you are not providing a custom material, enable ",[1692,58715,58716],{},[618,58717,58500],{}," so the internal shader becomes transparent.",[2239,58720,58721,58722,58725],{},"The occlusion mesh requires a ",[1692,58723,58724],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2239,58727,58728,58729,16467,58732,1695,58734,58736,58737,1146],{},"To compensate for the transparent canvas, you may ",[1692,58730,58731],{},"reapply your previous clear-color as a CSS background",[618,58733,45559],{},[618,58735,4860],{},", or a wrapper ",[618,58738,4142],{},[2239,58740,58741,58742,58746,58747,58749,58750,58752,58753,58756],{},"🔶 When using ",[1692,58743,58744],{},[618,58745,58500],{},", overlapping ",[618,58748,53537],{}," elements (especially multiple ",[618,58751,56269],{}," instances) may cause ",[1692,58754,58755],{},"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.",[2239,58758,58759,58760,58762,58763,58765,58766],{},"🔵 To avoid thin border artifacts when using ",[618,58761,56269],{},", make sure your ",[618,58764,3220],{}," is fully transparent:",[626,58767,58769],{"className":628,"code":58768,"language":633,"meta":576,"style":576},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[618,58770,58771],{"__ignoreMap":576},[637,58772,58773,58775,58777,58779,58781,58783,58785,58787,58789,58791,58794,58796,58798,58800,58802],{"class":639,"line":577},[637,58774,643],{"class":642},[637,58776,761],{"class":646},[637,58778,3052],{"class":642},[637,58780,46241],{"class":650},[637,58782,657],{"class":642},[637,58784,660],{"class":642},[637,58786,961],{"class":4420},[637,58788,660],{"class":642},[637,58790,3052],{"class":642},[637,58792,58793],{"class":650},"clearAlpha",[637,58795,657],{"class":642},[637,58797,660],{"class":642},[637,58799,965],{"class":2524},[637,58801,660],{"class":642},[637,58803,787],{"class":642},[927,58805,58806,58816],{},[930,58807,58808],{},[933,58809,58810,58812,58814],{},[936,58811,938],{},[936,58813,941],{},[936,58815,944],{},[946,58817,58818,58831,58842,58855,58871,58886,58897,58910,58921,58934,58947,58960,58981,58996],{},[933,58819,58820,58824,58827],{},[951,58821,58822],{},[1692,58823,4760],{},[951,58825,58826],{},"Wrapping html element.",[951,58828,58829],{},[618,58830,58197],{},[933,58832,58833,58837,58840],{},[951,58834,58835],{},[1692,58836,58204],{},[951,58838,58839],{},"The className of the wrapping element.",[951,58841],{},[933,58843,58844,58848,58851],{},[951,58845,58846],{},[1692,58847,58219],{},[951,58849,58850],{},"Project content behind the canvas.",[951,58852,58853],{},[618,58854,971],{},[933,58856,58857,58861,58867],{},[951,58858,58859],{},[1692,58860,29249],{},[951,58862,58863,58864],{},"Adds a -50%/-50% CSS transform. ",[637,58865,58866],{},"Ignored in transform mode",[951,58868,58869],{},[618,58870,971],{},[933,58872,58873,58877,58882],{},[951,58874,58875],{},[1692,58876,58261],{},[951,58878,58879,58880],{},"Aligns to the upper-left corner, fills the screen. ",[637,58881,58866],{},[951,58883,58884],{},[618,58885,971],{},[933,58887,58888,58892,58895],{},[951,58889,58890],{},[1692,58891,58281],{},[951,58893,58894],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[951,58896],{},[933,58898,58899,58903,58906],{},[951,58900,58901],{},[1692,58902,58298],{},[951,58904,58905],{},"Z-order range.",[951,58907,58908],{},[618,58909,58309],{},[933,58911,58912,58916,58919],{},[951,58913,58914],{},[1692,58915,28051],{},[951,58917,58918],{},"Reference to target container.",[951,58920],{},[933,58922,58923,58927,58930],{},[951,58924,58925],{},[1692,58926,12063],{},[951,58928,58929],{},"If true, applies matrix3d transformations.",[951,58931,58932],{},[618,58933,971],{},[933,58935,58936,58940,58943],{},[951,58937,58938],{},[1692,58939,58346],{},[951,58941,58942],{},"Renders as sprite, but only in transform mode.",[951,58944,58945],{},[618,58946,971],{},[933,58948,58949,58953,58958],{},[951,58950,58951],{},[1692,58952,58369],{},[951,58954,58955,58956],{},"Override default positioning function. ",[637,58957,58866],{},[951,58959],{},[933,58961,58962,58966,58979],{},[951,58963,58964],{},[1692,58965,53963],{},[951,58967,58968,58969,1695,58971,1695,58973,1725,58976,58978],{},"Can be ",[618,58970,961],{},[618,58972,58427],{},[618,58974,58975],{},"'raycast'",[618,58977,58433],{},". True occludes the entire scene.",[951,58980],{},[933,58982,58983,58987,58992],{},[951,58984,58985],{},[1692,58986,5279],{},[951,58988,58449,58989,58991],{},[618,58990,5279],{}," to be use",[951,58993,58994],{},[618,58995,33637],{},[933,58997,58998,59002,59006],{},[951,58999,59000],{},[1692,59001,5223],{},[951,59003,58471,59004,58991],{},[618,59005,5223],{},[951,59007],{},[504,59009,1171],{"id":59010},"events-1",[927,59012,59013,59021],{},[930,59014,59015],{},[933,59016,59017,59019],{},[936,59018,1180],{},[936,59020,941],{},[946,59022,59023],{},[933,59024,59025,59027],{},[951,59026,58544],{},[951,59028,58547],{},[1349,59030,59031],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":59033},[59034,59035,59040,59043,59048,59049,59050,59051,59052],{"id":624,"depth":578,"text":15},{"id":53956,"depth":578,"text":53957,"children":59036},[59037,59038,59039],{"id":54145,"depth":708,"text":54146},{"id":54307,"depth":708,"text":54308},{"id":54567,"depth":708,"text":54568},{"id":45894,"depth":578,"text":45895,"children":59041},[59042],{"id":3008,"depth":708,"text":56350},{"id":56414,"depth":578,"text":59044,"children":59045},"Using \u003CTransition>",[59046],{"id":57932,"depth":708,"text":59047},"Using iframes",{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},{"id":58550,"depth":578,"text":58551},{"id":6279,"depth":578,"text":6280},{"id":59010,"depth":578,"text":1171},"Allows you put DOM elements in your Tres.js scene.",{},{"title":441,"description":59053},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":59058,"title":445,"body":59059,"description":59641,"extension":591,"links":592,"meta":59642,"navigation":594,"path":446,"seo":59643,"stem":447,"__hash__":59644},"docs/2.api/9.objects/image.md",{"type":501,"value":59060,"toc":59636},[59061,59066,59072,59074,59245,59247,59254,59447,59449,59472,59634],[608,59062,59063],{},[59064,59065],"objects-image",{},[614,59067,59068,59071],{},[618,59069,59070],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[504,59073,15],{"id":624},[626,59075,59078],{"className":628,"code":59076,"highlights":59077,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Image } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n \u003CImage\n url=\"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG\"\n :scale=\"[2, 2]\"\n />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,800,805,827],[618,59079,59080,59100,59118,59138,59146,59150,59158,59166,59184,59188,59196,59211,59225,59229,59237],{"__ignoreMap":576},[637,59081,59082,59084,59086,59088,59090,59092,59094,59096,59098],{"class":639,"line":577},[637,59083,643],{"class":642},[637,59085,647],{"class":646},[637,59087,651],{"class":650},[637,59089,654],{"class":650},[637,59091,657],{"class":642},[637,59093,660],{"class":642},[637,59095,664],{"class":663},[637,59097,660],{"class":642},[637,59099,669],{"class":642},[637,59101,59102,59104,59106,59108,59110,59112,59114,59116],{"class":639,"line":578},[637,59103,677],{"class":676},[637,59105,680],{"class":642},[637,59107,715],{"class":683},[637,59109,693],{"class":642},[637,59111,696],{"class":676},[637,59113,699],{"class":642},[637,59115,724],{"class":663},[637,59117,705],{"class":642},[637,59119,59121,59123,59125,59128,59130,59132,59134,59136],{"class":59120,"line":708},[639,673],[637,59122,677],{"class":676},[637,59124,680],{"class":642},[637,59126,59127],{"class":683}," Image",[637,59129,693],{"class":642},[637,59131,696],{"class":676},[637,59133,699],{"class":642},[637,59135,702],{"class":663},[637,59137,705],{"class":642},[637,59139,59140,59142,59144],{"class":639,"line":729},[637,59141,732],{"class":642},[637,59143,647],{"class":646},[637,59145,669],{"class":642},[637,59147,59148],{"class":639,"line":739},[637,59149,742],{"emptyLinePlaceholder":594},[637,59151,59152,59154,59156],{"class":639,"line":745},[637,59153,643],{"class":642},[637,59155,750],{"class":646},[637,59157,669],{"class":642},[637,59159,59160,59162,59164],{"class":639,"line":755},[637,59161,758],{"class":642},[637,59163,761],{"class":646},[637,59165,669],{"class":642},[637,59167,59168,59170,59172,59174,59176,59178,59180,59182],{"class":639,"line":778},[637,59169,781],{"class":642},[637,59171,784],{"class":646},[637,59173,1508],{"class":650},[637,59175,657],{"class":642},[637,59177,660],{"class":642},[637,59179,9632],{"class":663},[637,59181,660],{"class":642},[637,59183,787],{"class":642},[637,59185,59186],{"class":639,"line":790},[637,59187,742],{"emptyLinePlaceholder":594},[637,59189,59191,59193],{"class":59190,"line":800},[639,673],[637,59192,781],{"class":642},[637,59194,59195],{"class":646},"Image\n",[637,59197,59199,59202,59204,59206,59209],{"class":59198,"line":805},[639,673],[637,59200,59201],{"class":650}," url",[637,59203,657],{"class":642},[637,59205,660],{"class":642},[637,59207,59208],{"class":663},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[637,59210,3154],{"class":642},[637,59212,59214,59217,59219,59221,59223],{"class":59213,"line":827},[639,673],[637,59215,59216],{"class":650}," :scale",[637,59218,657],{"class":642},[637,59220,660],{"class":642},[637,59222,53280],{"class":663},[637,59224,3154],{"class":642},[637,59226,59227],{"class":639,"line":631},[637,59228,17292],{"class":642},[637,59230,59231,59233,59235],{"class":639,"line":850},[637,59232,905],{"class":642},[637,59234,761],{"class":646},[637,59236,669],{"class":642},[637,59238,59239,59241,59243],{"class":639,"line":861},[637,59240,732],{"class":642},[637,59242,750],{"class":646},[637,59244,669],{"class":642},[504,59246,922],{"id":921},[3222,59248,59249],{},[614,59250,59251,59253],{},[618,59252,59070],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[927,59255,59256,59266],{},[930,59257,59258],{},[933,59259,59260,59262,59264],{},[936,59261,938],{"align":997},[936,59263,941],{"align":997},[936,59265,944],{},[946,59267,59268,59281,59297,59310,59324,59340,59354,59372,59390,59406,59424,59435],{},[933,59269,59270,59274,59277],{},[951,59271,59272],{"align":997},[618,59273,30800],{},[951,59275,59276],{"align":997},"Number of divisions in the default geometry.",[951,59278,59279],{},[618,59280,1897],{},[933,59282,59283,59287,59293],{},[951,59284,59285],{"align":997},[618,59286,5653],{},[951,59288,59289,59290],{"align":997},"Scale of the geometry. ",[618,59291,59292],{},"number | [number, number]",[951,59294,59295],{},[618,59296,1897],{},[933,59298,59299,59303,59306],{},[951,59300,59301],{"align":997},[618,59302,7568],{},[951,59304,59305],{"align":997},"Color multiplied into the image texture.",[951,59307,59308],{},[618,59309,30883],{},[933,59311,59312,59317,59320],{},[951,59313,59314],{"align":997},[618,59315,59316],{},"zoom",[951,59318,59319],{"align":997},"Shrinks or enlarges the image texture.",[951,59321,59322],{},[618,59323,1897],{},[933,59325,59326,59330,59336],{},[951,59327,59328],{"align":997},[618,59329,42971],{},[951,59331,59332,59333,59335],{"align":997},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[618,59334,11644],{},".)",[951,59337,59338],{},[618,59339,965],{},[933,59341,59342,59347,59350],{},[951,59343,59344],{"align":997},[618,59345,59346],{},"grayscale",[951,59348,59349],{"align":997},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[951,59351,59352],{},[618,59353,965],{},[933,59355,59356,59360,59368],{},[951,59357,59358],{"align":997},[618,59359,39506],{},[951,59361,59362,59363],{"align":997},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1140,59364,59367],{"href":59365,"rel":59366},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1144],"See THREE.material.tonemapped",[951,59369,59370],{},[618,59371,961],{},[933,59373,59374,59378,59386],{},[951,59375,59376],{"align":997},[618,59377,11644],{},[951,59379,59380,59381],{"align":997},"Whether the image material should be transparent. ",[1140,59382,59385],{"href":59383,"rel":59384},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1144],"See THREE.material.transparent",[951,59387,59388],{},[618,59389,971],{},[933,59391,59392,59396,59402],{},[951,59393,59394],{"align":997},[618,59395,11632],{},[951,59397,59398,59399],{"align":997},"Opacity of the image material. ",[1140,59400,59385],{"href":59383,"rel":59401},[1144],[951,59403,59404],{},[618,59405,1897],{},[933,59407,59408,59412,59420],{},[951,59409,59410],{"align":997},[618,59411,27410],{},[951,59413,59414,59415],{"align":997},"THREE.Side of the image material. ",[1140,59416,59419],{"href":59417,"rel":59418},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1144],"See THREE.material.side",[951,59421,59422],{},[618,59423,27423],{},[933,59425,59426,59430,59433],{},[951,59427,59428],{"align":997},[618,59429,2740],{},[951,59431,59432],{"align":997},"Image texture to display on the geometry.",[951,59434],{},[933,59436,59437,59442,59445],{},[951,59438,59439],{"align":997},[618,59440,59441],{},"url",[951,59443,59444],{"align":997},"Image URL to load and display on the geometry.",[951,59446],{},[504,59448,6280],{"id":6279},[614,59450,59451,59452,59454,59455,59458,59459,59461,59462,59465,59466,5634,59469,5597],{},"By default, images loaded via the ",[618,59453,59441],{}," prop use the renderer’s output color space. For advanced control, pass a ",[618,59456,59457],{},"THREE.Texture"," via the ",[618,59460,2740],{}," prop and set its ",[618,59463,59464],{},"colorSpace"," (e.g., ",[618,59467,59468],{},"THREE.SRGBColorSpace",[618,59470,59471],{},"THREE.LinearSRGBColorSpace",[626,59473,59475],{"className":628,"code":59474,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[618,59476,59477,59487,59505,59524,59528,59546,59565,59581,59587,59595,59599,59607,59626],{"__ignoreMap":576},[637,59478,59479,59481,59483,59485],{"class":639,"line":577},[637,59480,643],{"class":642},[637,59482,647],{"class":646},[637,59484,651],{"class":650},[637,59486,669],{"class":642},[637,59488,59489,59491,59493,59495,59497,59499,59501,59503],{"class":639,"line":578},[637,59490,677],{"class":676},[637,59492,680],{"class":642},[637,59494,2382],{"class":683},[637,59496,693],{"class":642},[637,59498,696],{"class":676},[637,59500,699],{"class":642},[637,59502,702],{"class":663},[637,59504,705],{"class":642},[637,59506,59507,59509,59511,59514,59516,59518,59520,59522],{"class":639,"line":708},[637,59508,677],{"class":676},[637,59510,680],{"class":642},[637,59512,59513],{"class":683}," SRGBColorSpace",[637,59515,693],{"class":642},[637,59517,696],{"class":676},[637,59519,699],{"class":642},[637,59521,4649],{"class":663},[637,59523,705],{"class":642},[637,59525,59526],{"class":639,"line":729},[637,59527,742],{"emptyLinePlaceholder":594},[637,59529,59530,59532,59534,59537,59539,59541,59543],{"class":639,"line":739},[637,59531,2438],{"class":650},[637,59533,680],{"class":642},[637,59535,59536],{"class":683}," state ",[637,59538,2451],{"class":642},[637,59540,2454],{"class":642},[637,59542,2382],{"class":2457},[637,59544,59545],{"class":683},"(URL)\n",[637,59547,59548,59550,59553,59555,59557,59559,59561,59563],{"class":639,"line":745},[637,59549,12210],{"class":2457},[637,59551,59552],{"class":683},"(state",[637,59554,687],{"class":642},[637,59556,3097],{"class":642},[637,59558,2740],{"class":6859},[637,59560,3363],{"class":642},[637,59562,3700],{"class":650},[637,59564,1226],{"class":642},[637,59566,59567,59570,59572,59574,59576,59578],{"class":639,"line":755},[637,59568,59569],{"class":683}," texture",[637,59571,1146],{"class":642},[637,59573,59464],{"class":683},[637,59575,2454],{"class":642},[637,59577,59513],{"class":683},[637,59579,59580],{"class":1231}," // assign a custom color space\n",[637,59582,59583,59585],{"class":639,"line":778},[637,59584,2451],{"class":642},[637,59586,2471],{"class":683},[637,59588,59589,59591,59593],{"class":639,"line":790},[637,59590,732],{"class":642},[637,59592,647],{"class":646},[637,59594,669],{"class":642},[637,59596,59597],{"class":639,"line":800},[637,59598,742],{"emptyLinePlaceholder":594},[637,59600,59601,59603,59605],{"class":639,"line":805},[637,59602,643],{"class":642},[637,59604,750],{"class":646},[637,59606,669],{"class":642},[637,59608,59609,59611,59613,59616,59618,59620,59622,59624],{"class":639,"line":827},[637,59610,758],{"class":642},[637,59612,445],{"class":646},[637,59614,59615],{"class":650}," :texture",[637,59617,657],{"class":642},[637,59619,660],{"class":642},[637,59621,2740],{"class":663},[637,59623,660],{"class":642},[637,59625,787],{"class":642},[637,59627,59628,59630,59632],{"class":639,"line":631},[637,59629,732],{"class":642},[637,59631,750],{"class":646},[637,59633,669],{"class":642},[1349,59635,26979],{},{"title":576,"searchDepth":577,"depth":578,"links":59637},[59638,59639,59640],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":6279,"depth":578,"text":6280},"Display image textures with shader-based effects.",{},{"title":445,"description":59641},"4od8nUGu4H2ZuIKNeGIRfZI_XYDuFyan8Fl4Vo8-Yys",{"id":59646,"title":449,"body":59647,"description":60429,"extension":591,"links":592,"meta":60430,"navigation":594,"path":450,"seo":60431,"stem":451,"__hash__":60432},"docs/2.api/9.objects/marching-cubes.md",{"type":501,"value":59648,"toc":60423},[59649,59654,59665,59668,59693,59695,60235,60237,60308,60312,60357,60361,60420],[608,59650,59651],{},[59652,59653],"objects-marching-cubes",{},[614,59655,59656,59659,59660,1146],{},[618,59657,59658],{},"\u003CMarchingCubes />"," is a wrapper around ",[1140,59661,59664],{"href":59662,"rel":59663},"https://threejs.org/examples/#webgl_marchingcubes",[1144],"THREE's Marching Cubes",[614,59666,59667],{},"It includes 3 components:",[2236,59669,59670,59683,59688],{},[2239,59671,59672,59674,59675,59678,59679,59682],{},[618,59673,59658],{}," – container element for ",[618,59676,59677],{},"\u003CMarchingCube />","s and ",[618,59680,59681],{},"\u003CMarchingPlane />","s",[2239,59684,59685,59687],{},[618,59686,59677],{}," - an individual metaball",[2239,59689,59690,59692],{},[618,59691,59681],{}," – optional bounding plane that interacts with the metaballs",[504,59694,15],{"id":624},[626,59696,59699],{"className":628,"code":59697,"highlights":59698,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { NoToneMapping, Vector3 } from 'three'\n\nconst rand = () => (Math.random() - 0.5) * 1.25\nconst positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n \u003CTresPerspectiveCamera />\n \u003COrbitControls />\n\n \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n \u003CMarchingPlane plane-type=\"y\" />\n \u003CMarchingCube\n v-for=\"position, i of positions\"\n :key=\"i\"\n :position=\"position\"\n />\n \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" />\n \u003C/MarchingCubes>\n\n \u003CTresAxesHelper />\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" />\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,861,872,882,632,902,912,2648,2657,2677],[618,59700,59701,59721,59755,59773,59796,59800,59833,59890,59898,59902,59910,59940,59948,59956,59960,59991,60012,60020,60034,60047,60060,60065,60119,60128,60132,60140,60180,60219,60227],{"__ignoreMap":576},[637,59702,59703,59705,59707,59709,59711,59713,59715,59717,59719],{"class":639,"line":577},[637,59704,643],{"class":642},[637,59706,647],{"class":646},[637,59708,651],{"class":650},[637,59710,654],{"class":650},[637,59712,657],{"class":642},[637,59714,660],{"class":642},[637,59716,664],{"class":663},[637,59718,660],{"class":642},[637,59720,669],{"class":642},[637,59722,59724,59726,59728,59731,59733,59736,59738,59741,59743,59745,59747,59749,59751,59753],{"class":59723,"line":578},[639,673],[637,59725,677],{"class":676},[637,59727,680],{"class":642},[637,59729,59730],{"class":683}," MarchingCube",[637,59732,687],{"class":642},[637,59734,59735],{"class":683}," MarchingCubes",[637,59737,687],{"class":642},[637,59739,59740],{"class":683}," MarchingPlane",[637,59742,687],{"class":642},[637,59744,690],{"class":683},[637,59746,693],{"class":642},[637,59748,696],{"class":676},[637,59750,699],{"class":642},[637,59752,702],{"class":663},[637,59754,705],{"class":642},[637,59756,59757,59759,59761,59763,59765,59767,59769,59771],{"class":639,"line":708},[637,59758,677],{"class":676},[637,59760,680],{"class":642},[637,59762,715],{"class":683},[637,59764,693],{"class":642},[637,59766,696],{"class":676},[637,59768,699],{"class":642},[637,59770,724],{"class":663},[637,59772,705],{"class":642},[637,59774,59775,59777,59779,59782,59784,59786,59788,59790,59792,59794],{"class":639,"line":729},[637,59776,677],{"class":676},[637,59778,680],{"class":642},[637,59780,59781],{"class":683}," NoToneMapping",[637,59783,687],{"class":642},[637,59785,30613],{"class":683},[637,59787,693],{"class":642},[637,59789,696],{"class":676},[637,59791,699],{"class":642},[637,59793,4649],{"class":663},[637,59795,705],{"class":642},[637,59797,59798],{"class":639,"line":739},[637,59799,742],{"emptyLinePlaceholder":594},[637,59801,59802,59804,59807,59809,59811,59813,59816,59818,59820,59822,59824,59826,59828,59830],{"class":639,"line":745},[637,59803,2438],{"class":650},[637,59805,59806],{"class":683}," rand ",[637,59808,657],{"class":642},[637,59810,7101],{"class":642},[637,59812,3700],{"class":650},[637,59814,59815],{"class":683}," (Math",[637,59817,1146],{"class":642},[637,59819,57000],{"class":2457},[637,59821,7005],{"class":683},[637,59823,8526],{"class":642},[637,59825,2534],{"class":2524},[637,59827,4757],{"class":683},[637,59829,23137],{"class":642},[637,59831,59832],{"class":2524}," 1.25\n",[637,59834,59835,59837,59840,59842,59844,59846,59848,59850,59852,59854,59856,59859,59861,59863,59865,59867,59869,59871,59874,59876,59878,59881,59883,59885,59887],{"class":639,"line":755},[637,59836,2438],{"class":650},[637,59838,59839],{"class":683}," positions ",[637,59841,657],{"class":642},[637,59843,8449],{"class":683},[637,59845,1146],{"class":642},[637,59847,8454],{"class":2457},[637,59849,2460],{"class":683},[637,59851,8459],{"class":642},[637,59853,8462],{"class":646},[637,59855,1240],{"class":642},[637,59857,59858],{"class":2524}," 40",[637,59860,8470],{"class":642},[637,59862,7101],{"class":642},[637,59864,3700],{"class":650},[637,59866,7894],{"class":642},[637,59868,30613],{"class":2457},[637,59870,2460],{"class":683},[637,59872,59873],{"class":2457},"rand",[637,59875,3697],{"class":683},[637,59877,687],{"class":642},[637,59879,59880],{"class":2457}," rand",[637,59882,3697],{"class":683},[637,59884,687],{"class":642},[637,59886,59880],{"class":2457},[637,59888,59889],{"class":683},"()))\n",[637,59891,59892,59894,59896],{"class":639,"line":778},[637,59893,732],{"class":642},[637,59895,647],{"class":646},[637,59897,669],{"class":642},[637,59899,59900],{"class":639,"line":790},[637,59901,742],{"emptyLinePlaceholder":594},[637,59903,59904,59906,59908],{"class":639,"line":800},[637,59905,643],{"class":642},[637,59907,750],{"class":646},[637,59909,669],{"class":642},[637,59911,59912,59914,59916,59918,59920,59922,59924,59926,59929,59931,59933,59936,59938],{"class":639,"line":805},[637,59913,758],{"class":642},[637,59915,761],{"class":646},[637,59917,764],{"class":650},[637,59919,657],{"class":642},[637,59921,660],{"class":642},[637,59923,771],{"class":663},[637,59925,660],{"class":642},[637,59927,59928],{"class":650}," :tone-mapping",[637,59930,657],{"class":642},[637,59932,660],{"class":642},[637,59934,59935],{"class":663},"NoToneMapping",[637,59937,660],{"class":642},[637,59939,669],{"class":642},[637,59941,59942,59944,59946],{"class":639,"line":827},[637,59943,781],{"class":642},[637,59945,784],{"class":646},[637,59947,787],{"class":642},[637,59949,59950,59952,59954],{"class":639,"line":631},[637,59951,781],{"class":642},[637,59953,795],{"class":646},[637,59955,787],{"class":642},[637,59957,59958],{"class":639,"line":850},[637,59959,742],{"emptyLinePlaceholder":594},[637,59961,59963,59965,59967,59969,59971,59973,59975,59977,59980,59982,59984,59987,59989],{"class":59962,"line":861},[639,673],[637,59964,781],{"class":642},[637,59966,449],{"class":646},[637,59968,51798],{"class":650},[637,59970,657],{"class":642},[637,59972,660],{"class":642},[637,59974,38428],{"class":663},[637,59976,660],{"class":642},[637,59978,59979],{"class":650}," :max-poly-count",[637,59981,657],{"class":642},[637,59983,660],{"class":642},[637,59985,59986],{"class":663},"40000",[637,59988,660],{"class":642},[637,59990,669],{"class":642},[637,59992,59994,59996,59999,60002,60004,60006,60008,60010],{"class":59993,"line":872},[639,673],[637,59995,853],{"class":642},[637,59997,59998],{"class":646},"MarchingPlane",[637,60000,60001],{"class":650}," plane-type",[637,60003,657],{"class":642},[637,60005,660],{"class":642},[637,60007,39751],{"class":663},[637,60009,660],{"class":642},[637,60011,787],{"class":642},[637,60013,60015,60017],{"class":60014,"line":882},[639,673],[637,60016,853],{"class":642},[637,60018,60019],{"class":646},"MarchingCube\n",[637,60021,60023,60025,60027,60029,60032],{"class":60022,"line":632},[639,673],[637,60024,7998],{"class":650},[637,60026,657],{"class":642},[637,60028,660],{"class":642},[637,60030,60031],{"class":663},"position, i of positions",[637,60033,3154],{"class":642},[637,60035,60037,60039,60041,60043,60045],{"class":60036,"line":902},[639,673],[637,60038,8012],{"class":650},[637,60040,657],{"class":642},[637,60042,660],{"class":642},[637,60044,8642],{"class":663},[637,60046,3154],{"class":642},[637,60048,60050,60052,60054,60056,60058],{"class":60049,"line":912},[639,673],[637,60051,8026],{"class":650},[637,60053,657],{"class":642},[637,60055,660],{"class":642},[637,60057,4153],{"class":663},[637,60059,3154],{"class":642},[637,60061,60063],{"class":60062,"line":2648},[639,673],[637,60064,8054],{"class":642},[637,60066,60068,60070,60072,60075,60077,60079,60082,60084,60087,60089,60091,60093,60095,60097,60099,60101,60104,60106,60109,60111,60113,60115,60117],{"class":60067,"line":2657},[639,673],[637,60069,853],{"class":642},[637,60071,11447],{"class":646},[637,60073,60074],{"class":650}," specular",[637,60076,657],{"class":642},[637,60078,660],{"class":642},[637,60080,60081],{"class":663},"#111111",[637,60083,660],{"class":642},[637,60085,60086],{"class":650}," :shininess",[637,60088,657],{"class":642},[637,60090,660],{"class":642},[637,60092,28448],{"class":663},[637,60094,660],{"class":642},[637,60096,2712],{"class":650},[637,60098,657],{"class":642},[637,60100,660],{"class":642},[637,60102,60103],{"class":663},"#049ef4",[637,60105,660],{"class":642},[637,60107,60108],{"class":650}," :reflectivity",[637,60110,657],{"class":642},[637,60112,660],{"class":642},[637,60114,1897],{"class":663},[637,60116,660],{"class":642},[637,60118,787],{"class":642},[637,60120,60122,60124,60126],{"class":60121,"line":2677},[639,673],[637,60123,895],{"class":642},[637,60125,449],{"class":646},[637,60127,669],{"class":642},[637,60129,60130],{"class":639,"line":2686},[637,60131,742],{"emptyLinePlaceholder":594},[637,60133,60134,60136,60138],{"class":639,"line":2695},[637,60135,781],{"class":642},[637,60137,810],{"class":646},[637,60139,787],{"class":642},[637,60141,60142,60144,60146,60148,60150,60152,60155,60157,60159,60161,60163,60165,60167,60169,60171,60173,60176,60178],{"class":639,"line":2704},[637,60143,781],{"class":642},[637,60145,9721],{"class":646},[637,60147,2712],{"class":650},[637,60149,657],{"class":642},[637,60151,660],{"class":642},[637,60153,60154],{"class":663},"#ffffff",[637,60156,660],{"class":642},[637,60158,1890],{"class":650},[637,60160,657],{"class":642},[637,60162,660],{"class":642},[637,60164,21410],{"class":663},[637,60166,660],{"class":642},[637,60168,1508],{"class":650},[637,60170,657],{"class":642},[637,60172,660],{"class":642},[637,60174,60175],{"class":663},"[0, 200, 0]",[637,60177,660],{"class":642},[637,60179,787],{"class":642},[637,60181,60182,60184,60186,60188,60190,60192,60194,60196,60198,60200,60202,60204,60206,60208,60210,60212,60215,60217],{"class":639,"line":2726},[637,60183,781],{"class":642},[637,60185,9721],{"class":646},[637,60187,2712],{"class":650},[637,60189,657],{"class":642},[637,60191,660],{"class":642},[637,60193,60154],{"class":663},[637,60195,660],{"class":642},[637,60197,1890],{"class":650},[637,60199,657],{"class":642},[637,60201,660],{"class":642},[637,60203,21410],{"class":663},[637,60205,660],{"class":642},[637,60207,1508],{"class":650},[637,60209,657],{"class":642},[637,60211,660],{"class":642},[637,60213,60214],{"class":663},"[100, 200, 100]",[637,60216,660],{"class":642},[637,60218,787],{"class":642},[637,60220,60221,60223,60225],{"class":639,"line":2770},[637,60222,905],{"class":642},[637,60224,761],{"class":646},[637,60226,669],{"class":642},[637,60228,60229,60231,60233],{"class":639,"line":2779},[637,60230,732],{"class":642},[637,60232,750],{"class":646},[637,60234,669],{"class":642},[504,60236,922],{"id":921},[927,60238,60239,60249],{},[930,60240,60241],{},[933,60242,60243,60245,60247],{},[936,60244,938],{"align":997},[936,60246,941],{"align":997},[936,60248,944],{},[946,60250,60251,60265,60280,60294],{},[933,60252,60253,60257,60260],{},[951,60254,60255],{"align":997},[618,60256,27990],{},[951,60258,60259],{"align":997},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[951,60261,60262],{},[618,60263,60264],{},"28",[933,60266,60267,60272,60275],{},[951,60268,60269],{"align":997},[618,60270,60271],{},"maxPolyCount",[951,60273,60274],{"align":997},"Maximum number of polygons to generate.",[951,60276,60277],{},[618,60278,60279],{},"10000",[933,60281,60282,60287,60290],{},[951,60283,60284],{"align":997},[618,60285,60286],{},"enableUvs",[951,60288,60289],{"align":997},"Whether UVs are enabled.",[951,60291,60292],{},[618,60293,971],{},[933,60295,60296,60301,60304],{},[951,60297,60298],{"align":997},[618,60299,60300],{},"enableColors",[951,60302,60303],{"align":997},"Whether vertex colors are enabled.",[951,60305,60306],{},[618,60307,971],{},[504,60309,60311],{"id":60310},"marchingcube-props","MarchingCube Props",[927,60313,60314,60324],{},[930,60315,60316],{},[933,60317,60318,60320,60322],{},[936,60319,938],{"align":997},[936,60321,941],{"align":997},[936,60323,944],{},[946,60325,60326,60340],{},[933,60327,60328,60333,60336],{},[951,60329,60330],{"align":997},[618,60331,60332],{},"strength",[951,60334,60335],{"align":997},"How strongly this cube affects the marching cube field.",[951,60337,60338],{},[618,60339,1969],{},[933,60341,60342,60347,60353],{},[951,60343,60344],{"align":997},[618,60345,60346],{},"subtract",[951,60348,60349,60350,60352],{"align":997},"How quickly strength moves to ",[618,60351,965],{}," over distance.",[951,60354,60355],{},[618,60356,32455],{},[504,60358,60360],{"id":60359},"marchingplane-props","MarchingPlane Props",[927,60362,60363,60373],{},[930,60364,60365],{},[933,60366,60367,60369,60371],{},[936,60368,938],{"align":997},[936,60370,941],{"align":997},[936,60372,944],{},[946,60374,60375,60393,60406],{},[933,60376,60377,60382,60388],{},[951,60378,60379],{"align":997},[618,60380,60381],{},"planeType",[951,60383,60384,60385],{"align":997},"Which axis the plane appears on. ",[618,60386,60387],{},"'x' | 'y' | 'z'",[951,60389,60390],{},[618,60391,60392],{},"'x'",[933,60394,60395,60399,60402],{},[951,60396,60397],{"align":997},[618,60398,60332],{},[951,60400,60401],{"align":997},"How strongly this plane affects the marching cube field.",[951,60403,60404],{},[618,60405,1969],{},[933,60407,60408,60412,60416],{},[951,60409,60410],{"align":997},[618,60411,60346],{},[951,60413,60349,60414,60352],{"align":997},[618,60415,965],{},[951,60417,60418],{},[618,60419,32455],{},[1349,60421,60422],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":60424},[60425,60426,60427,60428],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":60310,"depth":578,"text":60311},{"id":60359,"depth":578,"text":60360},"Create organic blob-like shapes using metaballs.",{},{"title":449,"description":60429},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":60434,"title":453,"body":60435,"description":61713,"extension":591,"links":592,"meta":61714,"navigation":594,"path":454,"seo":61715,"stem":455,"__hash__":61716},"docs/2.api/9.objects/reflector.md",{"type":501,"value":60436,"toc":61706},[60437,60442,60456,60458,60676,60678,60761,60769,60773,60784,61387,61390,61393,61397,61703],[608,60438,60439],{},[60440,60441],"objects-reflector",{},[614,60443,2799,60444,60446,60447,60452,60453,60455],{},[618,60445,7338],{}," package provides an abstraction of the ",[1140,60448,60451],{"href":60449,"rel":60450},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1144],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[618,60454,4315],{}," so all the default props can be passed as well:",[504,60457,15],{"id":624},[626,60459,60461],{"className":628,"code":60460,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n \u003COrbitControls />\n\n \u003CSuspense>\n \u003CReflector\n :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n :position-y=\"-2\"\n color=\"#fff\"\n >\n \u003CTresCircleGeometry :args=\"[10, 10]\" />\n \u003C/Reflector>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,60462,60463,60483,60502,60510,60514,60522,60535,60554,60562,60566,60574,60581,60595,60609,60622,60626,60644,60652,60660,60668],{"__ignoreMap":576},[637,60464,60465,60467,60469,60471,60473,60475,60477,60479,60481],{"class":639,"line":577},[637,60466,643],{"class":642},[637,60468,647],{"class":646},[637,60470,651],{"class":650},[637,60472,654],{"class":650},[637,60474,657],{"class":642},[637,60476,660],{"class":642},[637,60478,664],{"class":663},[637,60480,660],{"class":642},[637,60482,669],{"class":642},[637,60484,60485,60487,60489,60492,60494,60496,60498,60500],{"class":639,"line":578},[637,60486,677],{"class":676},[637,60488,680],{"class":642},[637,60490,60491],{"class":683}," Reflector",[637,60493,693],{"class":642},[637,60495,696],{"class":676},[637,60497,699],{"class":642},[637,60499,702],{"class":663},[637,60501,705],{"class":642},[637,60503,60504,60506,60508],{"class":639,"line":708},[637,60505,732],{"class":642},[637,60507,647],{"class":646},[637,60509,669],{"class":642},[637,60511,60512],{"class":639,"line":729},[637,60513,742],{"emptyLinePlaceholder":594},[637,60515,60516,60518,60520],{"class":639,"line":739},[637,60517,643],{"class":642},[637,60519,750],{"class":646},[637,60521,669],{"class":642},[637,60523,60524,60526,60528,60530,60533],{"class":639,"line":745},[637,60525,758],{"class":642},[637,60527,761],{"class":646},[637,60529,42631],{"class":650},[637,60531,60532],{"class":650}," alpha",[637,60534,669],{"class":642},[637,60536,60537,60539,60541,60543,60545,60547,60550,60552],{"class":639,"line":755},[637,60538,781],{"class":642},[637,60540,784],{"class":646},[637,60542,1508],{"class":650},[637,60544,657],{"class":642},[637,60546,660],{"class":642},[637,60548,60549],{"class":663},"[0, 0, 3]",[637,60551,660],{"class":642},[637,60553,787],{"class":642},[637,60555,60556,60558,60560],{"class":639,"line":778},[637,60557,781],{"class":642},[637,60559,795],{"class":646},[637,60561,787],{"class":642},[637,60563,60564],{"class":639,"line":790},[637,60565,742],{"emptyLinePlaceholder":594},[637,60567,60568,60570,60572],{"class":639,"line":800},[637,60569,781],{"class":642},[637,60571,21668],{"class":646},[637,60573,669],{"class":642},[637,60575,60576,60578],{"class":639,"line":805},[637,60577,853],{"class":642},[637,60579,60580],{"class":646},"Reflector\n",[637,60582,60583,60586,60588,60590,60593],{"class":639,"line":827},[637,60584,60585],{"class":650}," :rotation",[637,60587,657],{"class":642},[637,60589,660],{"class":642},[637,60591,60592],{"class":663},"[-Math.PI * 0.5, 0, 0]",[637,60594,3154],{"class":642},[637,60596,60597,60600,60602,60604,60607],{"class":639,"line":631},[637,60598,60599],{"class":650}," :position-y",[637,60601,657],{"class":642},[637,60603,660],{"class":642},[637,60605,60606],{"class":663},"-2",[637,60608,3154],{"class":642},[637,60610,60611,60613,60615,60617,60620],{"class":639,"line":850},[637,60612,8663],{"class":650},[637,60614,657],{"class":642},[637,60616,660],{"class":642},[637,60618,60619],{"class":663},"#fff",[637,60621,3154],{"class":642},[637,60623,60624],{"class":639,"line":861},[637,60625,53780],{"class":642},[637,60627,60628,60630,60632,60634,60636,60638,60640,60642],{"class":639,"line":872},[637,60629,864],{"class":642},[637,60631,10156],{"class":646},[637,60633,1982],{"class":650},[637,60635,657],{"class":642},[637,60637,660],{"class":642},[637,60639,11982],{"class":663},[637,60641,660],{"class":642},[637,60643,787],{"class":642},[637,60645,60646,60648,60650],{"class":639,"line":882},[637,60647,885],{"class":642},[637,60649,453],{"class":646},[637,60651,669],{"class":642},[637,60653,60654,60656,60658],{"class":639,"line":632},[637,60655,895],{"class":642},[637,60657,21668],{"class":646},[637,60659,669],{"class":642},[637,60661,60662,60664,60666],{"class":639,"line":902},[637,60663,905],{"class":642},[637,60665,761],{"class":646},[637,60667,669],{"class":642},[637,60669,60670,60672,60674],{"class":639,"line":912},[637,60671,732],{"class":642},[637,60673,750],{"class":646},[637,60675,669],{"class":642},[504,60677,922],{"id":921},[927,60679,60680,60690],{},[930,60681,60682],{},[933,60683,60684,60686,60688],{},[936,60685,938],{"align":997},[936,60687,941],{"align":997},[936,60689,944],{},[946,60691,60692,60704,60715,60726,60737,60749],{},[933,60693,60694,60698,60701],{},[951,60695,60696],{"align":997},[1692,60697,7568],{},[951,60699,60700],{"align":997},"The base color that's combine with the mirror effect",[951,60702,60703],{},"'#333'",[933,60705,60706,60710,60713],{},[951,60707,60708],{"align":997},[1692,60709,46091],{},[951,60711,60712],{"align":997},"the width of the texture to render on the mirror",[951,60714,27999],{},[933,60716,60717,60721,60724],{},[951,60718,60719],{"align":997},[1692,60720,46108],{},[951,60722,60723],{"align":997},"the height of the texture to render on the mirror",[951,60725,27999],{},[933,60727,60728,60732,60735],{},[951,60729,60730],{"align":997},[1692,60731,46225],{},[951,60733,60734],{"align":997},"to use the clipBias property",[951,60736,965],{},[933,60738,60739,60744,60747],{},[951,60740,60741],{"align":997},[1692,60742,60743],{},"multisample",[951,60745,60746],{"align":997},"how many samplers will be render",[951,60748,9674],{},[933,60750,60751,60756,60758],{},[951,60752,60753],{"align":997},[1692,60754,60755],{},"shader",[951,60757,47949],{"align":997},[951,60759,60760],{},"Reflector.ReflectorShader",[3222,60762,60763],{},[614,60764,60765,60766,60768],{},"All the props except the ",[618,60767,7568],{},", are not reactive",[504,60770,60772],{"id":60771},"custom-mirror-effect","Custom mirror effect",[614,60774,60775,60776,1695,60779,1711,60781,60783],{},"You can provide your own shader by passing a full shader object with ",[618,60777,60778],{},"uniforms",[618,60780,26198],{},[618,60782,26213],{},". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[626,60785,60787],{"className":628,"code":60786,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = reflectorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CReflector\n ref=\"reflectorRef\"\n :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n :position-y=\"-2\"\n color=\"#fff\"\n :shader=\"customShader\"\n >\n \u003CTresCircleGeometry :args=\"[10, 10]\" />\n \u003C/Reflector>\n\u003C/template>\n",[618,60788,60789,60809,60827,60846,60864,60868,60881,60885,60896,60905,60921,60938,60955,60972,60976,60988,60993,60998,61003,61008,61013,61018,61023,61033,61044,61049,61054,61059,61063,61067,61072,61077,61082,61087,61092,61096,61100,61105,61110,61115,61120,61125,61130,61135,61140,61148,61152,61156,61173,61190,61219,61252,61258,61266,61270,61278,61284,61297,61310,61323,61335,61349,61353,61371,61379],{"__ignoreMap":576},[637,60790,60791,60793,60795,60797,60799,60801,60803,60805,60807],{"class":639,"line":577},[637,60792,643],{"class":642},[637,60794,647],{"class":646},[637,60796,651],{"class":650},[637,60798,654],{"class":650},[637,60800,657],{"class":642},[637,60802,660],{"class":642},[637,60804,664],{"class":663},[637,60806,660],{"class":642},[637,60808,669],{"class":642},[637,60810,60811,60813,60815,60817,60819,60821,60823,60825],{"class":639,"line":578},[637,60812,677],{"class":676},[637,60814,680],{"class":642},[637,60816,60491],{"class":683},[637,60818,693],{"class":642},[637,60820,696],{"class":676},[637,60822,699],{"class":642},[637,60824,702],{"class":663},[637,60826,705],{"class":642},[637,60828,60829,60831,60833,60836,60838,60840,60842,60844],{"class":639,"line":708},[637,60830,677],{"class":676},[637,60832,680],{"class":642},[637,60834,60835],{"class":683}," useLoop",[637,60837,693],{"class":642},[637,60839,696],{"class":676},[637,60841,699],{"class":642},[637,60843,724],{"class":663},[637,60845,705],{"class":642},[637,60847,60848,60850,60852,60854,60856,60858,60860,60862],{"class":639,"line":729},[637,60849,677],{"class":676},[637,60851,680],{"class":642},[637,60853,3521],{"class":683},[637,60855,693],{"class":642},[637,60857,696],{"class":676},[637,60859,699],{"class":642},[637,60861,633],{"class":663},[637,60863,705],{"class":642},[637,60865,60866],{"class":639,"line":739},[637,60867,742],{"emptyLinePlaceholder":594},[637,60869,60870,60872,60875,60877,60879],{"class":639,"line":745},[637,60871,2438],{"class":650},[637,60873,60874],{"class":683}," reflectorRef ",[637,60876,657],{"class":642},[637,60878,3521],{"class":2457},[637,60880,6556],{"class":683},[637,60882,60883],{"class":639,"line":755},[637,60884,742],{"emptyLinePlaceholder":594},[637,60886,60887,60889,60892,60894],{"class":639,"line":778},[637,60888,2438],{"class":650},[637,60890,60891],{"class":683}," customShader ",[637,60893,657],{"class":642},[637,60895,1226],{"class":642},[637,60897,60898,60901,60903],{"class":639,"line":790},[637,60899,60900],{"class":646}," uniforms",[637,60902,1240],{"class":642},[637,60904,1226],{"class":642},[637,60906,60907,60909,60911,60913,60915,60917,60919],{"class":639,"line":800},[637,60908,24199],{"class":646},[637,60910,1240],{"class":642},[637,60912,680],{"class":642},[637,60914,26771],{"class":646},[637,60916,1240],{"class":642},[637,60918,3671],{"class":642},[637,60920,7110],{"class":642},[637,60922,60923,60926,60928,60930,60932,60934,60936],{"class":639,"line":805},[637,60924,60925],{"class":646}," tDiffuse",[637,60927,1240],{"class":642},[637,60929,680],{"class":642},[637,60931,26771],{"class":646},[637,60933,1240],{"class":642},[637,60935,3671],{"class":642},[637,60937,7110],{"class":642},[637,60939,60940,60943,60945,60947,60949,60951,60953],{"class":639,"line":827},[637,60941,60942],{"class":646}," textureMatrix",[637,60944,1240],{"class":642},[637,60946,680],{"class":642},[637,60948,26771],{"class":646},[637,60950,1240],{"class":642},[637,60952,3671],{"class":642},[637,60954,7110],{"class":642},[637,60956,60957,60960,60962,60964,60966,60968,60970],{"class":639,"line":631},[637,60958,60959],{"class":646}," time",[637,60961,1240],{"class":642},[637,60963,680],{"class":642},[637,60965,26771],{"class":646},[637,60967,1240],{"class":642},[637,60969,2529],{"class":2524},[637,60971,7110],{"class":642},[637,60973,60974],{"class":639,"line":850},[637,60975,2620],{"class":642},[637,60977,60978,60981,60983,60986],{"class":639,"line":861},[637,60979,60980],{"class":646}," vertexShader",[637,60982,1240],{"class":642},[637,60984,60985],{"class":1231}," /* glsl */",[637,60987,22712],{"class":642},[637,60989,60990],{"class":639,"line":872},[637,60991,60992],{"class":663}," uniform mat4 textureMatrix;\n",[637,60994,60995],{"class":639,"line":882},[637,60996,60997],{"class":663}," varying vec4 vUv;\n",[637,60999,61000],{"class":639,"line":632},[637,61001,61002],{"class":663}," varying vec2 vPos;\n",[637,61004,61005],{"class":639,"line":902},[637,61006,61007],{"class":663}," void main() {\n",[637,61009,61010],{"class":639,"line":912},[637,61011,61012],{"class":663}," vUv = textureMatrix * vec4(position, 1.0);\n",[637,61014,61015],{"class":639,"line":2648},[637,61016,61017],{"class":663}," vPos = position.xy;\n",[637,61019,61020],{"class":639,"line":2657},[637,61021,61022],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[637,61024,61025,61028,61031],{"class":639,"line":2677},[637,61026,61027],{"class":663}," }",[637,61029,61030],{"class":642},"`",[637,61032,2511],{"class":642},[637,61034,61035,61038,61040,61042],{"class":639,"line":2686},[637,61036,61037],{"class":646}," fragmentShader",[637,61039,1240],{"class":642},[637,61041,60985],{"class":1231},[637,61043,22712],{"class":642},[637,61045,61046],{"class":639,"line":2695},[637,61047,61048],{"class":663}," uniform vec3 color;\n",[637,61050,61051],{"class":639,"line":2704},[637,61052,61053],{"class":663}," uniform sampler2D tDiffuse;\n",[637,61055,61056],{"class":639,"line":2726},[637,61057,61058],{"class":663}," uniform float time;\n",[637,61060,61061],{"class":639,"line":2770},[637,61062,60997],{"class":663},[637,61064,61065],{"class":639,"line":2779},[637,61066,61002],{"class":663},[637,61068,61069],{"class":639,"line":2788},[637,61070,61071],{"class":663}," float blendOverlay(float base, float blend) {\n",[637,61073,61074],{"class":639,"line":3945},[637,61075,61076],{"class":663}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[637,61078,61079],{"class":639,"line":3976},[637,61080,61081],{"class":663}," }\n",[637,61083,61084],{"class":639,"line":3997},[637,61085,61086],{"class":663}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[637,61088,61089],{"class":639,"line":4016},[637,61090,61091],{"class":663}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[637,61093,61094],{"class":639,"line":4048},[637,61095,61081],{"class":663},[637,61097,61098],{"class":639,"line":4057},[637,61099,61007],{"class":663},[637,61101,61102],{"class":639,"line":4066},[637,61103,61104],{"class":663}," float dist = length(vPos);\n",[637,61106,61107],{"class":639,"line":21457},[637,61108,61109],{"class":663}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[637,61111,61112],{"class":639,"line":21472},[637,61113,61114],{"class":663}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[637,61116,61117],{"class":639,"line":21487},[637,61118,61119],{"class":663}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[637,61121,61122],{"class":639,"line":21492},[637,61123,61124],{"class":663}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[637,61126,61127],{"class":639,"line":21499},[637,61128,61129],{"class":663}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[637,61131,61132],{"class":639,"line":21504},[637,61133,61134],{"class":663}," #include \u003Ctonemapping_fragment>\n",[637,61136,61137],{"class":639,"line":21510},[637,61138,61139],{"class":663}," #include \u003Ccolorspace_fragment>\n",[637,61141,61142,61144,61146],{"class":639,"line":21531},[637,61143,61027],{"class":663},[637,61145,61030],{"class":642},[637,61147,2511],{"class":642},[637,61149,61150],{"class":639,"line":21537},[637,61151,1347],{"class":642},[637,61153,61154],{"class":639,"line":21544},[637,61155,742],{"emptyLinePlaceholder":594},[637,61157,61158,61160,61162,61165,61167,61169,61171],{"class":639,"line":21549},[637,61159,2438],{"class":650},[637,61161,680],{"class":642},[637,61163,61164],{"class":683}," onBeforeRender ",[637,61166,2451],{"class":642},[637,61168,2454],{"class":642},[637,61170,60835],{"class":2457},[637,61172,6556],{"class":683},[637,61174,61175,61178,61180,61182,61184,61186,61188],{"class":639,"line":21570},[637,61176,61177],{"class":2457},"onBeforeRender",[637,61179,2460],{"class":683},[637,61181,39697],{"class":642},[637,61183,39700],{"class":6859},[637,61185,39714],{"class":642},[637,61187,3700],{"class":650},[637,61189,1226],{"class":642},[637,61191,61192,61194,61197,61199,61202,61204,61206,61208,61210,61212,61214,61216],{"class":639,"line":21583},[637,61193,56907],{"class":650},[637,61195,61196],{"class":683}," uniforms",[637,61198,2454],{"class":642},[637,61200,61201],{"class":683}," reflectorRef",[637,61203,1146],{"class":642},[637,61205,3708],{"class":683},[637,61207,3711],{"class":642},[637,61209,9347],{"class":683},[637,61211,3711],{"class":642},[637,61213,5223],{"class":683},[637,61215,3711],{"class":642},[637,61217,61218],{"class":683},"uniforms\n",[637,61220,61221,61223,61225,61227,61229,61232,61234,61236,61238,61240,61242,61244,61246,61248,61250],{"class":639,"line":21609},[637,61222,21270],{"class":676},[637,61224,3097],{"class":646},[637,61226,60778],{"class":683},[637,61228,3711],{"class":642},[637,61230,61231],{"class":683},"time",[637,61233,4757],{"class":646},[637,61235,8459],{"class":642},[637,61237,61196],{"class":683},[637,61239,1146],{"class":642},[637,61241,61231],{"class":683},[637,61243,1146],{"class":642},[637,61245,3708],{"class":683},[637,61247,2454],{"class":642},[637,61249,39700],{"class":683},[637,61251,17816],{"class":642},[637,61253,61254,61256],{"class":639,"line":21614},[637,61255,2451],{"class":642},[637,61257,2471],{"class":683},[637,61259,61260,61262,61264],{"class":639,"line":21621},[637,61261,732],{"class":642},[637,61263,647],{"class":646},[637,61265,669],{"class":642},[637,61267,61268],{"class":639,"line":21630},[637,61269,742],{"emptyLinePlaceholder":594},[637,61271,61272,61274,61276],{"class":639,"line":21635},[637,61273,643],{"class":642},[637,61275,750],{"class":646},[637,61277,669],{"class":642},[637,61279,61280,61282],{"class":639,"line":21644},[637,61281,758],{"class":642},[637,61283,60580],{"class":646},[637,61285,61286,61288,61290,61292,61295],{"class":639,"line":21663},[637,61287,18542],{"class":650},[637,61289,657],{"class":642},[637,61291,660],{"class":642},[637,61293,61294],{"class":663},"reflectorRef",[637,61296,3154],{"class":642},[637,61298,61299,61302,61304,61306,61308],{"class":639,"line":21673},[637,61300,61301],{"class":650}," :rotation",[637,61303,657],{"class":642},[637,61305,660],{"class":642},[637,61307,60592],{"class":663},[637,61309,3154],{"class":642},[637,61311,61312,61315,61317,61319,61321],{"class":639,"line":21708},[637,61313,61314],{"class":650}," :position-y",[637,61316,657],{"class":642},[637,61318,660],{"class":642},[637,61320,60606],{"class":663},[637,61322,3154],{"class":642},[637,61324,61325,61327,61329,61331,61333],{"class":639,"line":21717},[637,61326,24199],{"class":650},[637,61328,657],{"class":642},[637,61330,660],{"class":642},[637,61332,60619],{"class":663},[637,61334,3154],{"class":642},[637,61336,61337,61340,61342,61344,61347],{"class":639,"line":21737},[637,61338,61339],{"class":650}," :shader",[637,61341,657],{"class":642},[637,61343,660],{"class":642},[637,61345,61346],{"class":663},"customShader",[637,61348,3154],{"class":642},[637,61350,61351],{"class":639,"line":21746},[637,61352,5196],{"class":642},[637,61354,61355,61357,61359,61361,61363,61365,61367,61369],{"class":639,"line":21755},[637,61356,781],{"class":642},[637,61358,10156],{"class":646},[637,61360,1982],{"class":650},[637,61362,657],{"class":642},[637,61364,660],{"class":642},[637,61366,11982],{"class":663},[637,61368,660],{"class":642},[637,61370,787],{"class":642},[637,61372,61373,61375,61377],{"class":639,"line":21774},[637,61374,905],{"class":642},[637,61376,453],{"class":646},[637,61378,669],{"class":642},[637,61380,61381,61383,61385],{"class":639,"line":21817},[637,61382,732],{"class":642},[637,61384,750],{"class":646},[637,61386,669],{"class":642},[614,61388,61389],{},"The Reflector shader use the following configuration by default:",[614,61391,61392],{},"You can extend, modify or just play with them",[4074,61394,61396],{"id":61395},"default-shader","Default shader",[626,61398,61400],{"className":42045,"code":61399,"language":42047,"meta":576,"style":576},"const shader = {\n name: 'ReflectorShader',\n uniforms: {\n color: {\n value: null\n },\n tDiffuse: {\n value: null\n },\n textureMatrix: {\n value: null\n }\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n\n #include \u003Ccommon>\n #include \u003Clogdepthbuf_pars_vertex>\n\n void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n #include \u003Clogdepthbuf_vertex>\n\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\n\n #include \u003Clogdepthbuf_pars_fragment>\n\n float blendOverlay( float base, float blend ) {\n return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n }\n\n vec3 blendOverlay( vec3 base, vec3 blend ) {\n return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n }\n\n void main() {\n #include \u003Clogdepthbuf_fragment>\n\n vec4 base = texture2DProj( tDiffuse, vUv );\n gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`\n\n}\n",[618,61401,61402,61413,61429,61437,61445,61455,61460,61468,61476,61480,61488,61496,61500,61504,61514,61519,61524,61528,61533,61538,61542,61547,61552,61557,61561,61566,61570,61579,61589,61594,61599,61603,61607,61612,61616,61621,61626,61630,61634,61639,61644,61648,61652,61656,61661,61665,61670,61675,61679,61684,61689,61695,61699],{"__ignoreMap":576},[637,61403,61404,61406,61409,61411],{"class":639,"line":577},[637,61405,2438],{"class":650},[637,61407,61408],{"class":683}," shader ",[637,61410,657],{"class":642},[637,61412,1226],{"class":642},[637,61414,61415,61418,61420,61422,61425,61427],{"class":639,"line":578},[637,61416,61417],{"class":646}," name",[637,61419,1240],{"class":642},[637,61421,699],{"class":642},[637,61423,61424],{"class":663},"ReflectorShader",[637,61426,2463],{"class":642},[637,61428,2511],{"class":642},[637,61430,61431,61433,61435],{"class":639,"line":708},[637,61432,60900],{"class":646},[637,61434,1240],{"class":642},[637,61436,1226],{"class":642},[637,61438,61439,61441,61443],{"class":639,"line":729},[637,61440,24199],{"class":646},[637,61442,1240],{"class":642},[637,61444,1226],{"class":642},[637,61446,61447,61450,61452],{"class":639,"line":739},[637,61448,61449],{"class":646}," value",[637,61451,1240],{"class":642},[637,61453,61454],{"class":642}," null\n",[637,61456,61457],{"class":639,"line":745},[637,61458,61459],{"class":642}," },\n",[637,61461,61462,61464,61466],{"class":639,"line":755},[637,61463,60925],{"class":646},[637,61465,1240],{"class":642},[637,61467,1226],{"class":642},[637,61469,61470,61472,61474],{"class":639,"line":778},[637,61471,61449],{"class":646},[637,61473,1240],{"class":642},[637,61475,61454],{"class":642},[637,61477,61478],{"class":639,"line":790},[637,61479,61459],{"class":642},[637,61481,61482,61484,61486],{"class":639,"line":800},[637,61483,60942],{"class":646},[637,61485,1240],{"class":642},[637,61487,1226],{"class":642},[637,61489,61490,61492,61494],{"class":639,"line":805},[637,61491,61449],{"class":646},[637,61493,1240],{"class":642},[637,61495,61454],{"class":642},[637,61497,61498],{"class":639,"line":827},[637,61499,61081],{"class":642},[637,61501,61502],{"class":639,"line":631},[637,61503,2620],{"class":642},[637,61505,61506,61508,61510,61512],{"class":639,"line":850},[637,61507,60980],{"class":646},[637,61509,1240],{"class":642},[637,61511,60985],{"class":1231},[637,61513,22712],{"class":642},[637,61515,61516],{"class":639,"line":861},[637,61517,61518],{"class":663}," uniform mat4 textureMatrix;\n",[637,61520,61521],{"class":639,"line":872},[637,61522,61523],{"class":663}," varying vec4 vUv;\n",[637,61525,61526],{"class":639,"line":882},[637,61527,742],{"emptyLinePlaceholder":594},[637,61529,61530],{"class":639,"line":632},[637,61531,61532],{"class":663}," #include \u003Ccommon>\n",[637,61534,61535],{"class":639,"line":902},[637,61536,61537],{"class":663}," #include \u003Clogdepthbuf_pars_vertex>\n",[637,61539,61540],{"class":639,"line":912},[637,61541,742],{"emptyLinePlaceholder":594},[637,61543,61544],{"class":639,"line":2648},[637,61545,61546],{"class":663}," void main() {\n",[637,61548,61549],{"class":639,"line":2657},[637,61550,61551],{"class":663}," vUv = textureMatrix * vec4( position, 1.0 );\n",[637,61553,61554],{"class":639,"line":2677},[637,61555,61556],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,61558,61559],{"class":639,"line":2686},[637,61560,742],{"emptyLinePlaceholder":594},[637,61562,61563],{"class":639,"line":2695},[637,61564,61565],{"class":663}," #include \u003Clogdepthbuf_vertex>\n",[637,61567,61568],{"class":639,"line":2704},[637,61569,742],{"emptyLinePlaceholder":594},[637,61571,61572,61575,61577],{"class":639,"line":2726},[637,61573,61574],{"class":663}," }",[637,61576,61030],{"class":642},[637,61578,2511],{"class":642},[637,61580,61581,61583,61585,61587],{"class":639,"line":2770},[637,61582,61037],{"class":646},[637,61584,1240],{"class":642},[637,61586,60985],{"class":1231},[637,61588,22712],{"class":642},[637,61590,61591],{"class":639,"line":2779},[637,61592,61593],{"class":663}," uniform vec3 color;\n",[637,61595,61596],{"class":639,"line":2788},[637,61597,61598],{"class":663}," uniform sampler2D tDiffuse;\n",[637,61600,61601],{"class":639,"line":3945},[637,61602,61523],{"class":663},[637,61604,61605],{"class":639,"line":3976},[637,61606,742],{"emptyLinePlaceholder":594},[637,61608,61609],{"class":639,"line":3997},[637,61610,61611],{"class":663}," #include \u003Clogdepthbuf_pars_fragment>\n",[637,61613,61614],{"class":639,"line":4016},[637,61615,742],{"emptyLinePlaceholder":594},[637,61617,61618],{"class":639,"line":4048},[637,61619,61620],{"class":663}," float blendOverlay( float base, float blend ) {\n",[637,61622,61623],{"class":639,"line":4057},[637,61624,61625],{"class":663}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,61627,61628],{"class":639,"line":4066},[637,61629,7878],{"class":663},[637,61631,61632],{"class":639,"line":21457},[637,61633,742],{"emptyLinePlaceholder":594},[637,61635,61636],{"class":639,"line":21472},[637,61637,61638],{"class":663}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,61640,61641],{"class":639,"line":21487},[637,61642,61643],{"class":663}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,61645,61646],{"class":639,"line":21492},[637,61647,7878],{"class":663},[637,61649,61650],{"class":639,"line":21499},[637,61651,742],{"emptyLinePlaceholder":594},[637,61653,61654],{"class":639,"line":21504},[637,61655,61546],{"class":663},[637,61657,61658],{"class":639,"line":21510},[637,61659,61660],{"class":663}," #include \u003Clogdepthbuf_fragment>\n",[637,61662,61663],{"class":639,"line":21531},[637,61664,742],{"emptyLinePlaceholder":594},[637,61666,61667],{"class":639,"line":21537},[637,61668,61669],{"class":663}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,61671,61672],{"class":639,"line":21544},[637,61673,61674],{"class":663}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,61676,61677],{"class":639,"line":21549},[637,61678,742],{"emptyLinePlaceholder":594},[637,61680,61681],{"class":639,"line":21570},[637,61682,61683],{"class":663}," #include \u003Ctonemapping_fragment>\n",[637,61685,61686],{"class":639,"line":21583},[637,61687,61688],{"class":663}," #include \u003Ccolorspace_fragment>\n",[637,61690,61691,61693],{"class":639,"line":21609},[637,61692,61574],{"class":663},[637,61694,22712],{"class":642},[637,61696,61697],{"class":639,"line":21614},[637,61698,742],{"emptyLinePlaceholder":594},[637,61700,61701],{"class":639,"line":21621},[637,61702,1347],{"class":642},[1349,61704,61705],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":61707},[61708,61709,61710],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":60771,"depth":578,"text":60772,"children":61711},[61712],{"id":61395,"depth":708,"text":61396},"Create real-time reflections of your scene.",{},{"title":453,"description":61713},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",{"id":61718,"title":457,"body":61719,"description":62886,"extension":591,"links":592,"meta":62887,"navigation":594,"path":458,"seo":62888,"stem":459,"__hash__":62889},"docs/2.api/9.objects/refractor.md",{"type":501,"value":61720,"toc":62879},[61721,61726,61739,61741,61989,61991,62085,62093,62097,62105,62642,62645,62647,62876],[608,61722,61723],{},[61724,61725],"objects-refractor",{},[614,61727,2799,61728,60446,61730,61735,61736,61738],{},[618,61729,7338],{},[1140,61731,61734],{"href":61732,"rel":61733},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[1144],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[618,61737,4315],{}," so all the default props can be passed as well.",[504,61740,15],{"id":624},[626,61742,61744],{"className":628,"code":61743,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n \u003COrbitControls />\n\n \u003C!-- Place objects behind the refracting plane -->\n \u003CTresMesh :position=\"[-2, 0, -2]\">\n \u003CTresTorusKnotGeometry />\n \u003CTresMeshStandardMaterial color=\"hotpink\" />\n \u003C/TresMesh>\n\n \u003CSuspense>\n \u003CRefractor color=\"#9ec8d4\">\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,61745,61746,61766,61785,61793,61797,61805,61817,61836,61844,61848,61853,61872,61880,61899,61907,61911,61919,61938,61957,61965,61973,61981],{"__ignoreMap":576},[637,61747,61748,61750,61752,61754,61756,61758,61760,61762,61764],{"class":639,"line":577},[637,61749,643],{"class":642},[637,61751,647],{"class":646},[637,61753,651],{"class":650},[637,61755,654],{"class":650},[637,61757,657],{"class":642},[637,61759,660],{"class":642},[637,61761,664],{"class":663},[637,61763,660],{"class":642},[637,61765,669],{"class":642},[637,61767,61768,61770,61772,61775,61777,61779,61781,61783],{"class":639,"line":578},[637,61769,677],{"class":676},[637,61771,680],{"class":642},[637,61773,61774],{"class":683}," Refractor",[637,61776,693],{"class":642},[637,61778,696],{"class":676},[637,61780,699],{"class":642},[637,61782,702],{"class":663},[637,61784,705],{"class":642},[637,61786,61787,61789,61791],{"class":639,"line":708},[637,61788,732],{"class":642},[637,61790,647],{"class":646},[637,61792,669],{"class":642},[637,61794,61795],{"class":639,"line":729},[637,61796,742],{"emptyLinePlaceholder":594},[637,61798,61799,61801,61803],{"class":639,"line":739},[637,61800,643],{"class":642},[637,61802,750],{"class":646},[637,61804,669],{"class":642},[637,61806,61807,61809,61811,61813,61815],{"class":639,"line":745},[637,61808,758],{"class":642},[637,61810,761],{"class":646},[637,61812,42631],{"class":650},[637,61814,60532],{"class":650},[637,61816,669],{"class":642},[637,61818,61819,61821,61823,61825,61827,61829,61832,61834],{"class":639,"line":755},[637,61820,781],{"class":642},[637,61822,784],{"class":646},[637,61824,1508],{"class":650},[637,61826,657],{"class":642},[637,61828,660],{"class":642},[637,61830,61831],{"class":663},"[0, 2, 8]",[637,61833,660],{"class":642},[637,61835,787],{"class":642},[637,61837,61838,61840,61842],{"class":639,"line":778},[637,61839,781],{"class":642},[637,61841,795],{"class":646},[637,61843,787],{"class":642},[637,61845,61846],{"class":639,"line":790},[637,61847,742],{"emptyLinePlaceholder":594},[637,61849,61850],{"class":639,"line":800},[637,61851,61852],{"class":1231}," \u003C!-- Place objects behind the refracting plane -->\n",[637,61854,61855,61857,61859,61861,61863,61865,61868,61870],{"class":639,"line":805},[637,61856,781],{"class":642},[637,61858,856],{"class":646},[637,61860,1508],{"class":650},[637,61862,657],{"class":642},[637,61864,660],{"class":642},[637,61866,61867],{"class":663},"[-2, 0, -2]",[637,61869,660],{"class":642},[637,61871,669],{"class":642},[637,61873,61874,61876,61878],{"class":639,"line":827},[637,61875,853],{"class":642},[637,61877,27871],{"class":646},[637,61879,787],{"class":642},[637,61881,61882,61884,61886,61888,61890,61892,61895,61897],{"class":639,"line":631},[637,61883,853],{"class":642},[637,61885,2709],{"class":646},[637,61887,2712],{"class":650},[637,61889,657],{"class":642},[637,61891,660],{"class":642},[637,61893,61894],{"class":663},"hotpink",[637,61896,660],{"class":642},[637,61898,787],{"class":642},[637,61900,61901,61903,61905],{"class":639,"line":850},[637,61902,895],{"class":642},[637,61904,856],{"class":646},[637,61906,669],{"class":642},[637,61908,61909],{"class":639,"line":861},[637,61910,742],{"emptyLinePlaceholder":594},[637,61912,61913,61915,61917],{"class":639,"line":872},[637,61914,781],{"class":642},[637,61916,21668],{"class":646},[637,61918,669],{"class":642},[637,61920,61921,61923,61925,61927,61929,61931,61934,61936],{"class":639,"line":882},[637,61922,853],{"class":642},[637,61924,457],{"class":646},[637,61926,2712],{"class":650},[637,61928,657],{"class":642},[637,61930,660],{"class":642},[637,61932,61933],{"class":663},"#9ec8d4",[637,61935,660],{"class":642},[637,61937,669],{"class":642},[637,61939,61940,61942,61944,61946,61948,61950,61953,61955],{"class":639,"line":632},[637,61941,864],{"class":642},[637,61943,27788],{"class":646},[637,61945,1982],{"class":650},[637,61947,657],{"class":642},[637,61949,660],{"class":642},[637,61951,61952],{"class":663},"[8, 5]",[637,61954,660],{"class":642},[637,61956,787],{"class":642},[637,61958,61959,61961,61963],{"class":639,"line":902},[637,61960,885],{"class":642},[637,61962,457],{"class":646},[637,61964,669],{"class":642},[637,61966,61967,61969,61971],{"class":639,"line":912},[637,61968,895],{"class":642},[637,61970,21668],{"class":646},[637,61972,669],{"class":642},[637,61974,61975,61977,61979],{"class":639,"line":2648},[637,61976,905],{"class":642},[637,61978,761],{"class":646},[637,61980,669],{"class":642},[637,61982,61983,61985,61987],{"class":639,"line":2657},[637,61984,732],{"class":642},[637,61986,750],{"class":646},[637,61988,669],{"class":642},[504,61990,922],{"id":921},[927,61992,61993,62003],{},[930,61994,61995],{},[933,61996,61997,61999,62001],{},[936,61998,938],{"align":997},[936,62000,941],{"align":997},[936,62002,944],{},[946,62004,62005,62019,62032,62045,62058,62071],{},[933,62006,62007,62011,62014],{},[951,62008,62009],{"align":997},[1692,62010,7568],{},[951,62012,62013],{"align":997},"Color tint blended with the refracted image",[951,62015,62016],{},[618,62017,62018],{},"'#7f7f7f'",[933,62020,62021,62025,62028],{},[951,62022,62023],{"align":997},[1692,62024,46091],{},[951,62026,62027],{"align":997},"Width of the internal render target texture",[951,62029,62030],{},[618,62031,27999],{},[933,62033,62034,62038,62041],{},[951,62035,62036],{"align":997},[1692,62037,46108],{},[951,62039,62040],{"align":997},"Height of the internal render target texture",[951,62042,62043],{},[618,62044,27999],{},[933,62046,62047,62051,62054],{},[951,62048,62049],{"align":997},[1692,62050,46225],{},[951,62052,62053],{"align":997},"Clip bias for the virtual camera projection",[951,62055,62056],{},[618,62057,965],{},[933,62059,62060,62064,62067],{},[951,62061,62062],{"align":997},[1692,62063,60743],{},[951,62065,62066],{"align":997},"Number of MSAA samples for the render target",[951,62068,62069],{},[618,62070,9674],{},[933,62072,62073,62077,62080],{},[951,62074,62075],{"align":997},[1692,62076,60755],{},[951,62078,62079],{"align":997},"Custom shader object to override the built-in shader",[951,62081,62082],{},[618,62083,62084],{},"Refractor.RefractorShader",[3222,62086,62087],{},[614,62088,62089,62090,62092],{},"All the props except ",[618,62091,7568],{}," are not reactive",[504,62094,62096],{"id":62095},"custom-refraction-effect","Custom refraction effect",[614,62098,60775,62099,1695,62101,1711,62103,60783],{},[618,62100,60778],{},[618,62102,26198],{},[618,62104,26213],{},[626,62106,62108],{"className":628,"code":62107,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = refractorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CRefractor\n ref=\"refractorRef\"\n color=\"#9ec8d4\"\n :shader=\"customShader\"\n >\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n\u003C/template>\n",[618,62109,62110,62130,62148,62166,62184,62188,62201,62205,62215,62223,62239,62255,62271,62287,62291,62301,62305,62309,62313,62317,62321,62325,62329,62337,62347,62351,62355,62359,62363,62367,62371,62375,62379,62383,62387,62391,62395,62399,62403,62407,62411,62415,62419,62423,62427,62435,62439,62443,62459,62475,62502,62534,62540,62548,62552,62560,62567,62580,62592,62604,62608,62626,62634],{"__ignoreMap":576},[637,62111,62112,62114,62116,62118,62120,62122,62124,62126,62128],{"class":639,"line":577},[637,62113,643],{"class":642},[637,62115,647],{"class":646},[637,62117,651],{"class":650},[637,62119,654],{"class":650},[637,62121,657],{"class":642},[637,62123,660],{"class":642},[637,62125,664],{"class":663},[637,62127,660],{"class":642},[637,62129,669],{"class":642},[637,62131,62132,62134,62136,62138,62140,62142,62144,62146],{"class":639,"line":578},[637,62133,677],{"class":676},[637,62135,680],{"class":642},[637,62137,61774],{"class":683},[637,62139,693],{"class":642},[637,62141,696],{"class":676},[637,62143,699],{"class":642},[637,62145,702],{"class":663},[637,62147,705],{"class":642},[637,62149,62150,62152,62154,62156,62158,62160,62162,62164],{"class":639,"line":708},[637,62151,677],{"class":676},[637,62153,680],{"class":642},[637,62155,60835],{"class":683},[637,62157,693],{"class":642},[637,62159,696],{"class":676},[637,62161,699],{"class":642},[637,62163,724],{"class":663},[637,62165,705],{"class":642},[637,62167,62168,62170,62172,62174,62176,62178,62180,62182],{"class":639,"line":729},[637,62169,677],{"class":676},[637,62171,680],{"class":642},[637,62173,3521],{"class":683},[637,62175,693],{"class":642},[637,62177,696],{"class":676},[637,62179,699],{"class":642},[637,62181,633],{"class":663},[637,62183,705],{"class":642},[637,62185,62186],{"class":639,"line":739},[637,62187,742],{"emptyLinePlaceholder":594},[637,62189,62190,62192,62195,62197,62199],{"class":639,"line":745},[637,62191,2438],{"class":650},[637,62193,62194],{"class":683}," refractorRef ",[637,62196,657],{"class":642},[637,62198,3521],{"class":2457},[637,62200,6556],{"class":683},[637,62202,62203],{"class":639,"line":755},[637,62204,742],{"emptyLinePlaceholder":594},[637,62206,62207,62209,62211,62213],{"class":639,"line":778},[637,62208,2438],{"class":650},[637,62210,60891],{"class":683},[637,62212,657],{"class":642},[637,62214,1226],{"class":642},[637,62216,62217,62219,62221],{"class":639,"line":790},[637,62218,60900],{"class":646},[637,62220,1240],{"class":642},[637,62222,1226],{"class":642},[637,62224,62225,62227,62229,62231,62233,62235,62237],{"class":639,"line":800},[637,62226,24199],{"class":646},[637,62228,1240],{"class":642},[637,62230,680],{"class":642},[637,62232,26771],{"class":646},[637,62234,1240],{"class":642},[637,62236,3671],{"class":642},[637,62238,7110],{"class":642},[637,62240,62241,62243,62245,62247,62249,62251,62253],{"class":639,"line":805},[637,62242,60925],{"class":646},[637,62244,1240],{"class":642},[637,62246,680],{"class":642},[637,62248,26771],{"class":646},[637,62250,1240],{"class":642},[637,62252,3671],{"class":642},[637,62254,7110],{"class":642},[637,62256,62257,62259,62261,62263,62265,62267,62269],{"class":639,"line":827},[637,62258,60942],{"class":646},[637,62260,1240],{"class":642},[637,62262,680],{"class":642},[637,62264,26771],{"class":646},[637,62266,1240],{"class":642},[637,62268,3671],{"class":642},[637,62270,7110],{"class":642},[637,62272,62273,62275,62277,62279,62281,62283,62285],{"class":639,"line":631},[637,62274,60959],{"class":646},[637,62276,1240],{"class":642},[637,62278,680],{"class":642},[637,62280,26771],{"class":646},[637,62282,1240],{"class":642},[637,62284,2529],{"class":2524},[637,62286,7110],{"class":642},[637,62288,62289],{"class":639,"line":850},[637,62290,2620],{"class":642},[637,62292,62293,62295,62297,62299],{"class":639,"line":861},[637,62294,60980],{"class":646},[637,62296,1240],{"class":642},[637,62298,60985],{"class":1231},[637,62300,22712],{"class":642},[637,62302,62303],{"class":639,"line":872},[637,62304,60992],{"class":663},[637,62306,62307],{"class":639,"line":882},[637,62308,60997],{"class":663},[637,62310,62311],{"class":639,"line":632},[637,62312,61002],{"class":663},[637,62314,62315],{"class":639,"line":902},[637,62316,61007],{"class":663},[637,62318,62319],{"class":639,"line":912},[637,62320,61012],{"class":663},[637,62322,62323],{"class":639,"line":2648},[637,62324,61017],{"class":663},[637,62326,62327],{"class":639,"line":2657},[637,62328,61022],{"class":663},[637,62330,62331,62333,62335],{"class":639,"line":2677},[637,62332,61027],{"class":663},[637,62334,61030],{"class":642},[637,62336,2511],{"class":642},[637,62338,62339,62341,62343,62345],{"class":639,"line":2686},[637,62340,61037],{"class":646},[637,62342,1240],{"class":642},[637,62344,60985],{"class":1231},[637,62346,22712],{"class":642},[637,62348,62349],{"class":639,"line":2695},[637,62350,61048],{"class":663},[637,62352,62353],{"class":639,"line":2704},[637,62354,61053],{"class":663},[637,62356,62357],{"class":639,"line":2726},[637,62358,61058],{"class":663},[637,62360,62361],{"class":639,"line":2770},[637,62362,60997],{"class":663},[637,62364,62365],{"class":639,"line":2779},[637,62366,61002],{"class":663},[637,62368,62369],{"class":639,"line":2788},[637,62370,61071],{"class":663},[637,62372,62373],{"class":639,"line":3945},[637,62374,61076],{"class":663},[637,62376,62377],{"class":639,"line":3976},[637,62378,61081],{"class":663},[637,62380,62381],{"class":639,"line":3997},[637,62382,61086],{"class":663},[637,62384,62385],{"class":639,"line":4016},[637,62386,61091],{"class":663},[637,62388,62389],{"class":639,"line":4048},[637,62390,61081],{"class":663},[637,62392,62393],{"class":639,"line":4057},[637,62394,61007],{"class":663},[637,62396,62397],{"class":639,"line":4066},[637,62398,61104],{"class":663},[637,62400,62401],{"class":639,"line":21457},[637,62402,61109],{"class":663},[637,62404,62405],{"class":639,"line":21472},[637,62406,61114],{"class":663},[637,62408,62409],{"class":639,"line":21487},[637,62410,61119],{"class":663},[637,62412,62413],{"class":639,"line":21492},[637,62414,61124],{"class":663},[637,62416,62417],{"class":639,"line":21499},[637,62418,61129],{"class":663},[637,62420,62421],{"class":639,"line":21504},[637,62422,61134],{"class":663},[637,62424,62425],{"class":639,"line":21510},[637,62426,61139],{"class":663},[637,62428,62429,62431,62433],{"class":639,"line":21531},[637,62430,61027],{"class":663},[637,62432,61030],{"class":642},[637,62434,2511],{"class":642},[637,62436,62437],{"class":639,"line":21537},[637,62438,1347],{"class":642},[637,62440,62441],{"class":639,"line":21544},[637,62442,742],{"emptyLinePlaceholder":594},[637,62444,62445,62447,62449,62451,62453,62455,62457],{"class":639,"line":21549},[637,62446,2438],{"class":650},[637,62448,680],{"class":642},[637,62450,61164],{"class":683},[637,62452,2451],{"class":642},[637,62454,2454],{"class":642},[637,62456,60835],{"class":2457},[637,62458,6556],{"class":683},[637,62460,62461,62463,62465,62467,62469,62471,62473],{"class":639,"line":21570},[637,62462,61177],{"class":2457},[637,62464,2460],{"class":683},[637,62466,39697],{"class":642},[637,62468,39700],{"class":6859},[637,62470,39714],{"class":642},[637,62472,3700],{"class":650},[637,62474,1226],{"class":642},[637,62476,62477,62479,62481,62483,62486,62488,62490,62492,62494,62496,62498,62500],{"class":639,"line":21583},[637,62478,56907],{"class":650},[637,62480,61196],{"class":683},[637,62482,2454],{"class":642},[637,62484,62485],{"class":683}," refractorRef",[637,62487,1146],{"class":642},[637,62489,3708],{"class":683},[637,62491,3711],{"class":642},[637,62493,9347],{"class":683},[637,62495,3711],{"class":642},[637,62497,5223],{"class":683},[637,62499,3711],{"class":642},[637,62501,61218],{"class":683},[637,62503,62504,62506,62508,62510,62512,62514,62516,62518,62520,62522,62524,62526,62528,62530,62532],{"class":639,"line":21609},[637,62505,21270],{"class":676},[637,62507,3097],{"class":646},[637,62509,60778],{"class":683},[637,62511,3711],{"class":642},[637,62513,61231],{"class":683},[637,62515,4757],{"class":646},[637,62517,8459],{"class":642},[637,62519,61196],{"class":683},[637,62521,1146],{"class":642},[637,62523,61231],{"class":683},[637,62525,1146],{"class":642},[637,62527,3708],{"class":683},[637,62529,2454],{"class":642},[637,62531,39700],{"class":683},[637,62533,17816],{"class":642},[637,62535,62536,62538],{"class":639,"line":21614},[637,62537,2451],{"class":642},[637,62539,2471],{"class":683},[637,62541,62542,62544,62546],{"class":639,"line":21621},[637,62543,732],{"class":642},[637,62545,647],{"class":646},[637,62547,669],{"class":642},[637,62549,62550],{"class":639,"line":21630},[637,62551,742],{"emptyLinePlaceholder":594},[637,62553,62554,62556,62558],{"class":639,"line":21635},[637,62555,643],{"class":642},[637,62557,750],{"class":646},[637,62559,669],{"class":642},[637,62561,62562,62564],{"class":639,"line":21644},[637,62563,758],{"class":642},[637,62565,62566],{"class":646},"Refractor\n",[637,62568,62569,62571,62573,62575,62578],{"class":639,"line":21663},[637,62570,18542],{"class":650},[637,62572,657],{"class":642},[637,62574,660],{"class":642},[637,62576,62577],{"class":663},"refractorRef",[637,62579,3154],{"class":642},[637,62581,62582,62584,62586,62588,62590],{"class":639,"line":21673},[637,62583,24199],{"class":650},[637,62585,657],{"class":642},[637,62587,660],{"class":642},[637,62589,61933],{"class":663},[637,62591,3154],{"class":642},[637,62593,62594,62596,62598,62600,62602],{"class":639,"line":21708},[637,62595,61339],{"class":650},[637,62597,657],{"class":642},[637,62599,660],{"class":642},[637,62601,61346],{"class":663},[637,62603,3154],{"class":642},[637,62605,62606],{"class":639,"line":21717},[637,62607,5196],{"class":642},[637,62609,62610,62612,62614,62616,62618,62620,62622,62624],{"class":639,"line":21737},[637,62611,781],{"class":642},[637,62613,27788],{"class":646},[637,62615,1982],{"class":650},[637,62617,657],{"class":642},[637,62619,660],{"class":642},[637,62621,61952],{"class":663},[637,62623,660],{"class":642},[637,62625,787],{"class":642},[637,62627,62628,62630,62632],{"class":639,"line":21746},[637,62629,905],{"class":642},[637,62631,457],{"class":646},[637,62633,669],{"class":642},[637,62635,62636,62638,62640],{"class":639,"line":21755},[637,62637,732],{"class":642},[637,62639,750],{"class":646},[637,62641,669],{"class":642},[614,62643,62644],{},"The Refractor shader uses the following configuration by default:",[4074,62646,61396],{"id":61395},[626,62648,62650],{"className":42045,"code":62649,"language":42047,"meta":576,"style":576},"const shader = {\n uniforms: {\n color: {\n value: null\n },\n tDiffuse: {\n value: null\n },\n textureMatrix: {\n value: null\n }\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n\n void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\n\n float blendOverlay( float base, float blend ) {\n return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n }\n\n vec3 blendOverlay( vec3 base, vec3 blend ) {\n return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n }\n\n void main() {\n vec4 base = texture2DProj( tDiffuse, vUv );\n gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`\n}\n",[618,62651,62652,62662,62670,62678,62686,62690,62698,62706,62710,62718,62726,62730,62734,62744,62748,62752,62756,62760,62765,62770,62778,62788,62792,62796,62800,62804,62809,62814,62818,62822,62827,62832,62836,62840,62844,62849,62854,62858,62862,62866,62872],{"__ignoreMap":576},[637,62653,62654,62656,62658,62660],{"class":639,"line":577},[637,62655,2438],{"class":650},[637,62657,61408],{"class":683},[637,62659,657],{"class":642},[637,62661,1226],{"class":642},[637,62663,62664,62666,62668],{"class":639,"line":578},[637,62665,60900],{"class":646},[637,62667,1240],{"class":642},[637,62669,1226],{"class":642},[637,62671,62672,62674,62676],{"class":639,"line":708},[637,62673,24199],{"class":646},[637,62675,1240],{"class":642},[637,62677,1226],{"class":642},[637,62679,62680,62682,62684],{"class":639,"line":729},[637,62681,61449],{"class":646},[637,62683,1240],{"class":642},[637,62685,61454],{"class":642},[637,62687,62688],{"class":639,"line":739},[637,62689,61459],{"class":642},[637,62691,62692,62694,62696],{"class":639,"line":745},[637,62693,60925],{"class":646},[637,62695,1240],{"class":642},[637,62697,1226],{"class":642},[637,62699,62700,62702,62704],{"class":639,"line":755},[637,62701,61449],{"class":646},[637,62703,1240],{"class":642},[637,62705,61454],{"class":642},[637,62707,62708],{"class":639,"line":778},[637,62709,61459],{"class":642},[637,62711,62712,62714,62716],{"class":639,"line":790},[637,62713,60942],{"class":646},[637,62715,1240],{"class":642},[637,62717,1226],{"class":642},[637,62719,62720,62722,62724],{"class":639,"line":800},[637,62721,61449],{"class":646},[637,62723,1240],{"class":642},[637,62725,61454],{"class":642},[637,62727,62728],{"class":639,"line":805},[637,62729,61081],{"class":642},[637,62731,62732],{"class":639,"line":827},[637,62733,2620],{"class":642},[637,62735,62736,62738,62740,62742],{"class":639,"line":631},[637,62737,60980],{"class":646},[637,62739,1240],{"class":642},[637,62741,60985],{"class":1231},[637,62743,22712],{"class":642},[637,62745,62746],{"class":639,"line":850},[637,62747,60992],{"class":663},[637,62749,62750],{"class":639,"line":861},[637,62751,60997],{"class":663},[637,62753,62754],{"class":639,"line":872},[637,62755,742],{"emptyLinePlaceholder":594},[637,62757,62758],{"class":639,"line":882},[637,62759,61007],{"class":663},[637,62761,62762],{"class":639,"line":632},[637,62763,62764],{"class":663}," vUv = textureMatrix * vec4( position, 1.0 );\n",[637,62766,62767],{"class":639,"line":902},[637,62768,62769],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,62771,62772,62774,62776],{"class":639,"line":912},[637,62773,61027],{"class":663},[637,62775,61030],{"class":642},[637,62777,2511],{"class":642},[637,62779,62780,62782,62784,62786],{"class":639,"line":2648},[637,62781,61037],{"class":646},[637,62783,1240],{"class":642},[637,62785,60985],{"class":1231},[637,62787,22712],{"class":642},[637,62789,62790],{"class":639,"line":2657},[637,62791,61048],{"class":663},[637,62793,62794],{"class":639,"line":2677},[637,62795,61053],{"class":663},[637,62797,62798],{"class":639,"line":2686},[637,62799,60997],{"class":663},[637,62801,62802],{"class":639,"line":2695},[637,62803,742],{"emptyLinePlaceholder":594},[637,62805,62806],{"class":639,"line":2704},[637,62807,62808],{"class":663}," float blendOverlay( float base, float blend ) {\n",[637,62810,62811],{"class":639,"line":2726},[637,62812,62813],{"class":663}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,62815,62816],{"class":639,"line":2770},[637,62817,61081],{"class":663},[637,62819,62820],{"class":639,"line":2779},[637,62821,742],{"emptyLinePlaceholder":594},[637,62823,62824],{"class":639,"line":2788},[637,62825,62826],{"class":663}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,62828,62829],{"class":639,"line":3945},[637,62830,62831],{"class":663}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,62833,62834],{"class":639,"line":3976},[637,62835,61081],{"class":663},[637,62837,62838],{"class":639,"line":3997},[637,62839,742],{"emptyLinePlaceholder":594},[637,62841,62842],{"class":639,"line":4016},[637,62843,61007],{"class":663},[637,62845,62846],{"class":639,"line":4048},[637,62847,62848],{"class":663}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,62850,62851],{"class":639,"line":4057},[637,62852,62853],{"class":663}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,62855,62856],{"class":639,"line":4066},[637,62857,742],{"emptyLinePlaceholder":594},[637,62859,62860],{"class":639,"line":21457},[637,62861,61134],{"class":663},[637,62863,62864],{"class":639,"line":21472},[637,62865,61139],{"class":663},[637,62867,62868,62870],{"class":639,"line":21487},[637,62869,61027],{"class":663},[637,62871,22712],{"class":642},[637,62873,62874],{"class":639,"line":21492},[637,62875,1347],{"class":642},[1349,62877,62878],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":62880},[62881,62882,62883],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":62095,"depth":578,"text":62096,"children":62884},[62885],{"id":61395,"depth":708,"text":61396},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":457,"description":62886},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",{"id":62891,"title":461,"body":62892,"description":63429,"extension":591,"links":592,"meta":63430,"navigation":594,"path":462,"seo":63431,"stem":463,"__hash__":63432},"docs/2.api/9.objects/text-3d.md",{"type":501,"value":62893,"toc":63425},[62894,62899,62910,62912,62931,63038,63053,63146,63149,63266,63268,63422],[608,62895,62896],{},[62897,62898],"objects-text",{},[614,62900,62901,62904,62905,36672],{},[618,62902,62903],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1140,62906,62909],{"href":62907,"rel":62908},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1144],"TextGeometry",[504,62911,15],{"id":624},[614,62913,62914,62915,62917,62918,62921,62922,62925,62926],{},"To use the ",[618,62916,62903],{}," component you need to pass the ",[618,62919,62920],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[618,62923,62924],{},"typeface",".json generated fonts, you can generate yours ",[1140,62927,62930],{"href":62928,"rel":62929},"http://gero3.github.io/facetype.js/",[1144],"here",[626,62932,62934],{"className":628,"code":62933,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n text=\"TresJS\"\n font=\"/fonts/FiraCodeRegular.json\"\n >\n \u003CTresMeshNormalMaterial />\n \u003C/Text3D>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,62935,62936,62944,62952,62960,62967,62980,62994,62998,63006,63014,63022,63030],{"__ignoreMap":576},[637,62937,62938,62940,62942],{"class":639,"line":577},[637,62939,643],{"class":642},[637,62941,750],{"class":646},[637,62943,669],{"class":642},[637,62945,62946,62948,62950],{"class":639,"line":578},[637,62947,758],{"class":642},[637,62949,761],{"class":646},[637,62951,669],{"class":642},[637,62953,62954,62956,62958],{"class":639,"line":708},[637,62955,781],{"class":642},[637,62957,21668],{"class":646},[637,62959,669],{"class":642},[637,62961,62962,62964],{"class":639,"line":729},[637,62963,853],{"class":642},[637,62965,62966],{"class":646},"Text3D\n",[637,62968,62969,62972,62974,62976,62978],{"class":639,"line":739},[637,62970,62971],{"class":650}," text",[637,62973,657],{"class":642},[637,62975,660],{"class":642},[637,62977,16945],{"class":663},[637,62979,3154],{"class":642},[637,62981,62982,62985,62987,62989,62992],{"class":639,"line":745},[637,62983,62984],{"class":650}," font",[637,62986,657],{"class":642},[637,62988,660],{"class":642},[637,62990,62991],{"class":663},"/fonts/FiraCodeRegular.json",[637,62993,3154],{"class":642},[637,62995,62996],{"class":639,"line":755},[637,62997,53780],{"class":642},[637,62999,63000,63002,63004],{"class":639,"line":778},[637,63001,864],{"class":642},[637,63003,877],{"class":646},[637,63005,787],{"class":642},[637,63007,63008,63010,63012],{"class":639,"line":790},[637,63009,885],{"class":642},[637,63011,461],{"class":646},[637,63013,669],{"class":642},[637,63015,63016,63018,63020],{"class":639,"line":800},[637,63017,895],{"class":642},[637,63019,21668],{"class":646},[637,63021,669],{"class":642},[637,63023,63024,63026,63028],{"class":639,"line":805},[637,63025,905],{"class":642},[637,63027,761],{"class":646},[637,63029,669],{"class":642},[637,63031,63032,63034,63036],{"class":639,"line":827},[637,63033,732],{"class":642},[637,63035,750],{"class":646},[637,63037,669],{"class":642},[614,63039,63040,63041,63044,63045,63047,63048,4327,63050,63052],{},"Notice that you need to pass the ",[618,63042,63043],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[618,63046,62903],{}," component. This is because ",[618,63049,62903],{},[618,63051,4315],{}," component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:",[626,63054,63056],{"className":628,"code":63055,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D font=\"/fonts/FiraCodeRegular.json\">\n TresJS\n \u003CTresMeshNormalMaterial />\n \u003C/Text3D>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,63057,63058,63066,63074,63082,63101,63106,63114,63122,63130,63138],{"__ignoreMap":576},[637,63059,63060,63062,63064],{"class":639,"line":577},[637,63061,643],{"class":642},[637,63063,750],{"class":646},[637,63065,669],{"class":642},[637,63067,63068,63070,63072],{"class":639,"line":578},[637,63069,758],{"class":642},[637,63071,761],{"class":646},[637,63073,669],{"class":642},[637,63075,63076,63078,63080],{"class":639,"line":708},[637,63077,781],{"class":642},[637,63079,21668],{"class":646},[637,63081,669],{"class":642},[637,63083,63084,63086,63088,63091,63093,63095,63097,63099],{"class":639,"line":729},[637,63085,853],{"class":642},[637,63087,461],{"class":646},[637,63089,63090],{"class":650}," font",[637,63092,657],{"class":642},[637,63094,660],{"class":642},[637,63096,62991],{"class":663},[637,63098,660],{"class":642},[637,63100,669],{"class":642},[637,63102,63103],{"class":639,"line":739},[637,63104,63105],{"class":683}," TresJS\n",[637,63107,63108,63110,63112],{"class":639,"line":745},[637,63109,864],{"class":642},[637,63111,877],{"class":646},[637,63113,787],{"class":642},[637,63115,63116,63118,63120],{"class":639,"line":755},[637,63117,885],{"class":642},[637,63119,461],{"class":646},[637,63121,669],{"class":642},[637,63123,63124,63126,63128],{"class":639,"line":778},[637,63125,895],{"class":642},[637,63127,21668],{"class":646},[637,63129,669],{"class":642},[637,63131,63132,63134,63136],{"class":639,"line":790},[637,63133,905],{"class":642},[637,63135,761],{"class":646},[637,63137,669],{"class":642},[637,63139,63140,63142,63144],{"class":639,"line":800},[637,63141,732],{"class":642},[637,63143,750],{"class":646},[637,63145,669],{"class":642},[614,63147,63148],{},"In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update",[626,63150,63152],{"className":628,"code":63151,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003Cinput v-model=\"myReactiveText\" />\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n :text=\"myReactiveText\"\n font=\"/fonts/FiraCodeRegular.json\"\n center\n need-updates\n />\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,63153,63154,63162,63182,63190,63198,63204,63217,63229,63233,63238,63242,63250,63258],{"__ignoreMap":576},[637,63155,63156,63158,63160],{"class":639,"line":577},[637,63157,643],{"class":642},[637,63159,750],{"class":646},[637,63161,669],{"class":642},[637,63163,63164,63166,63169,63171,63173,63175,63178,63180],{"class":639,"line":578},[637,63165,758],{"class":642},[637,63167,63168],{"class":646},"input",[637,63170,3036],{"class":650},[637,63172,657],{"class":642},[637,63174,660],{"class":642},[637,63176,63177],{"class":663},"myReactiveText",[637,63179,660],{"class":642},[637,63181,787],{"class":642},[637,63183,63184,63186,63188],{"class":639,"line":708},[637,63185,758],{"class":642},[637,63187,761],{"class":646},[637,63189,669],{"class":642},[637,63191,63192,63194,63196],{"class":639,"line":729},[637,63193,781],{"class":642},[637,63195,21668],{"class":646},[637,63197,669],{"class":642},[637,63199,63200,63202],{"class":639,"line":739},[637,63201,853],{"class":642},[637,63203,62966],{"class":646},[637,63205,63206,63209,63211,63213,63215],{"class":639,"line":745},[637,63207,63208],{"class":650}," :text",[637,63210,657],{"class":642},[637,63212,660],{"class":642},[637,63214,63177],{"class":663},[637,63216,3154],{"class":642},[637,63218,63219,63221,63223,63225,63227],{"class":639,"line":755},[637,63220,62984],{"class":650},[637,63222,657],{"class":642},[637,63224,660],{"class":642},[637,63226,62991],{"class":663},[637,63228,3154],{"class":642},[637,63230,63231],{"class":639,"line":778},[637,63232,53726],{"class":650},[637,63234,63235],{"class":639,"line":790},[637,63236,63237],{"class":650}," need-updates\n",[637,63239,63240],{"class":639,"line":800},[637,63241,8054],{"class":642},[637,63243,63244,63246,63248],{"class":639,"line":805},[637,63245,895],{"class":642},[637,63247,21668],{"class":646},[637,63249,669],{"class":642},[637,63251,63252,63254,63256],{"class":639,"line":827},[637,63253,905],{"class":642},[637,63255,761],{"class":646},[637,63257,669],{"class":642},[637,63259,63260,63262,63264],{"class":639,"line":631},[637,63261,732],{"class":642},[637,63263,750],{"class":646},[637,63265,669],{"class":642},[504,63267,922],{"id":921},[927,63269,63270,63280],{},[930,63271,63272],{},[933,63273,63274,63276,63278],{},[936,63275,938],{"align":997},[936,63277,941],{"align":997},[936,63279,944],{},[946,63281,63282,63293,63304,63315,63326,63338,63350,63362,63375,63387,63399,63410],{},[933,63283,63284,63288,63291],{},[951,63285,63286],{"align":997},[1692,63287,62920],{},[951,63289,63290],{"align":997},"The font data or font name to use for the text.",[951,63292],{},[933,63294,63295,63299,63302],{},[951,63296,63297],{"align":997},[1692,63298,30340],{},[951,63300,63301],{"align":997},"The text to display.",[951,63303],{},[933,63305,63306,63310,63313],{},[951,63307,63308],{"align":997},[1692,63309,16749],{},[951,63311,63312],{"align":997},"The size of the text.",[951,63314,1969],{},[933,63316,63317,63321,63324],{},[951,63318,63319],{"align":997},[1692,63320,40879],{},[951,63322,63323],{"align":997},"The height of the text.",[951,63325,5752],{},[933,63327,63328,63333,63336],{},[951,63329,63330],{"align":997},[1692,63331,63332],{},"curveSegments",[951,63334,63335],{"align":997},"The number of curve segments to use when generating the text geometry.",[951,63337,12730],{},[933,63339,63340,63345,63348],{},[951,63341,63342],{"align":997},[1692,63343,63344],{},"bevelEnabled",[951,63346,63347],{"align":997},"A flag indicating whether beveling should be enabled for the text.",[951,63349,961],{},[933,63351,63352,63357,63360],{},[951,63353,63354],{"align":997},[1692,63355,63356],{},"bevelThickness",[951,63358,63359],{"align":997},"The thickness of the beveled edge on the text.",[951,63361,11664],{},[933,63363,63364,63369,63372],{},[951,63365,63366],{"align":997},[1692,63367,63368],{},"bevelSize",[951,63370,63371],{"align":997},"The size of the beveled edge on the text.",[951,63373,63374],{},"0.02",[933,63376,63377,63382,63385],{},[951,63378,63379],{"align":997},[1692,63380,63381],{},"bevelOffset",[951,63383,63384],{"align":997},"The offset of the beveled edge on the text.",[951,63386,965],{},[933,63388,63389,63394,63397],{},[951,63390,63391],{"align":997},[1692,63392,63393],{},"bevelSegments",[951,63395,63396],{"align":997},"The number of bevel segments to use when generating the text geometry.",[951,63398,9674],{},[933,63400,63401,63405,63408],{},[951,63402,63403],{"align":997},[1692,63404,29249],{},[951,63406,63407],{"align":997},"To center the text",[951,63409,971],{},[933,63411,63412,63417,63420],{},[951,63413,63414],{"align":997},[1692,63415,63416],{},"needUpdates",[951,63418,63419],{"align":997},"This props add reactivity",[951,63421,971],{},[1349,63423,63424],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":576,"searchDepth":577,"depth":578,"links":63426},[63427,63428],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Render text in 3D using TextGeometry.",{},{"title":461,"description":63429},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",[63434,63979,64274,64643,65700,66333,66934],{"id":63435,"title":471,"body":63436,"description":63975,"extension":591,"links":592,"meta":63976,"navigation":594,"path":472,"seo":63977,"stem":473,"__hash__":63978},"docs/2.api/miscellaneous/bounds.md",{"type":501,"value":63437,"toc":63968},[63438,63443,63450,63468,63470,63809,63811,63938,63941,63955,63959,63965],[2318,63439,63440],{},[63441,63442],"miscellaneous-bounds",{},[614,63444,63445,63446,63449],{},"Calculates a boundary box and centers the camera accordingly. Its ",[618,63447,63448],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2028,63451,63452,63454],{},[614,63453,49814],{},[626,63455,63456],{"className":628,"code":2053,"language":633,"meta":576,"style":576},[618,63457,63458],{"__ignoreMap":576},[637,63459,63460,63462,63464,63466],{"class":639,"line":577},[637,63461,643],{"class":642},[637,63463,795],{"class":646},[637,63465,1874],{"class":650},[637,63467,787],{"class":642},[504,63469,15],{"id":624},[626,63471,63474],{"className":628,"code":63472,"highlights":63473,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Bounds, OrbitControls } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boundsRef = shallowRef()\nconst objectRef = shallowRef()\n\nfunction focusObject() {\n boundsRef.value?.instance.lookAt(objectRef.value)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n \u003COrbitControls make-default />\n \u003CBounds ref=\"boundsRef\" clip use-mounted :offset=\"0.75\">\n \u003CTresMesh ref=\"objectRef\" @click=\"(e) => focusObject()\">\n \u003CTresBoxGeometry />\n \u003CTresMeshNormalMaterial />\n \u003C/TresMesh>\n \u003C/Bounds>\n \u003C/TresCanvas>\n\u003C/template>\n",[708,745,755,790,800,805,632,2677],[618,63475,63476,63496,63514,63538,63556,63560,63574,63588,63592,63604,63633,63638,63646,63650,63658,63666,63684,63694,63731,63760,63768,63776,63784,63793,63801],{"__ignoreMap":576},[637,63477,63478,63480,63482,63484,63486,63488,63490,63492,63494],{"class":639,"line":577},[637,63479,643],{"class":642},[637,63481,647],{"class":646},[637,63483,651],{"class":650},[637,63485,654],{"class":650},[637,63487,657],{"class":642},[637,63489,660],{"class":642},[637,63491,664],{"class":663},[637,63493,660],{"class":642},[637,63495,669],{"class":642},[637,63497,63498,63500,63502,63504,63506,63508,63510,63512],{"class":639,"line":578},[637,63499,677],{"class":676},[637,63501,680],{"class":642},[637,63503,715],{"class":683},[637,63505,693],{"class":642},[637,63507,696],{"class":676},[637,63509,699],{"class":642},[637,63511,724],{"class":663},[637,63513,705],{"class":642},[637,63515,63517,63519,63521,63524,63526,63528,63530,63532,63534,63536],{"class":63516,"line":708},[639,673],[637,63518,677],{"class":676},[637,63520,680],{"class":642},[637,63522,63523],{"class":683}," Bounds",[637,63525,687],{"class":642},[637,63527,690],{"class":683},[637,63529,693],{"class":642},[637,63531,696],{"class":676},[637,63533,699],{"class":642},[637,63535,702],{"class":663},[637,63537,705],{"class":642},[637,63539,63540,63542,63544,63546,63548,63550,63552,63554],{"class":639,"line":729},[637,63541,677],{"class":676},[637,63543,680],{"class":642},[637,63545,3521],{"class":683},[637,63547,693],{"class":642},[637,63549,696],{"class":676},[637,63551,699],{"class":642},[637,63553,633],{"class":663},[637,63555,705],{"class":642},[637,63557,63558],{"class":639,"line":739},[637,63559,742],{"emptyLinePlaceholder":594},[637,63561,63563,63565,63568,63570,63572],{"class":63562,"line":745},[639,673],[637,63564,2438],{"class":650},[637,63566,63567],{"class":683}," boundsRef ",[637,63569,657],{"class":642},[637,63571,3521],{"class":2457},[637,63573,6556],{"class":683},[637,63575,63577,63579,63582,63584,63586],{"class":63576,"line":755},[639,673],[637,63578,2438],{"class":650},[637,63580,63581],{"class":683}," objectRef ",[637,63583,657],{"class":642},[637,63585,3521],{"class":2457},[637,63587,6556],{"class":683},[637,63589,63590],{"class":639,"line":778},[637,63591,742],{"emptyLinePlaceholder":594},[637,63593,63595,63597,63600,63602],{"class":63594,"line":790},[639,673],[637,63596,39691],{"class":650},[637,63598,63599],{"class":2457}," focusObject",[637,63601,3697],{"class":642},[637,63603,1226],{"class":642},[637,63605,63607,63610,63612,63614,63616,63618,63620,63622,63624,63627,63629,63631],{"class":63606,"line":800},[639,673],[637,63608,63609],{"class":683}," boundsRef",[637,63611,1146],{"class":642},[637,63613,3708],{"class":683},[637,63615,3711],{"class":642},[637,63617,9347],{"class":683},[637,63619,1146],{"class":642},[637,63621,63448],{"class":2457},[637,63623,2460],{"class":646},[637,63625,63626],{"class":683},"objectRef",[637,63628,1146],{"class":642},[637,63630,3708],{"class":683},[637,63632,2471],{"class":646},[637,63634,63636],{"class":63635,"line":805},[639,673],[637,63637,1347],{"class":642},[637,63639,63640,63642,63644],{"class":639,"line":827},[637,63641,732],{"class":642},[637,63643,647],{"class":646},[637,63645,669],{"class":642},[637,63647,63648],{"class":639,"line":631},[637,63649,742],{"emptyLinePlaceholder":594},[637,63651,63652,63654,63656],{"class":639,"line":850},[637,63653,643],{"class":642},[637,63655,750],{"class":646},[637,63657,669],{"class":642},[637,63659,63660,63662,63664],{"class":639,"line":861},[637,63661,758],{"class":642},[637,63663,761],{"class":646},[637,63665,669],{"class":642},[637,63667,63668,63670,63672,63674,63676,63678,63680,63682],{"class":639,"line":872},[637,63669,781],{"class":642},[637,63671,784],{"class":646},[637,63673,1508],{"class":650},[637,63675,657],{"class":642},[637,63677,660],{"class":642},[637,63679,7466],{"class":663},[637,63681,660],{"class":642},[637,63683,787],{"class":642},[637,63685,63686,63688,63690,63692],{"class":639,"line":882},[637,63687,781],{"class":642},[637,63689,795],{"class":646},[637,63691,1874],{"class":650},[637,63693,787],{"class":642},[637,63695,63697,63699,63701,63703,63705,63707,63710,63712,63715,63718,63721,63723,63725,63727,63729],{"class":63696,"line":632},[639,673],[637,63698,781],{"class":642},[637,63700,471],{"class":646},[637,63702,3895],{"class":650},[637,63704,657],{"class":642},[637,63706,660],{"class":642},[637,63708,63709],{"class":663},"boundsRef",[637,63711,660],{"class":642},[637,63713,63714],{"class":650}," clip",[637,63716,63717],{"class":650}," use-mounted",[637,63719,63720],{"class":650}," :offset",[637,63722,657],{"class":642},[637,63724,660],{"class":642},[637,63726,2574],{"class":663},[637,63728,660],{"class":642},[637,63730,669],{"class":642},[637,63732,63733,63735,63737,63739,63741,63743,63745,63747,63749,63751,63753,63756,63758],{"class":639,"line":902},[637,63734,853],{"class":642},[637,63736,856],{"class":646},[637,63738,3895],{"class":650},[637,63740,657],{"class":642},[637,63742,660],{"class":642},[637,63744,63626],{"class":663},[637,63746,660],{"class":642},[637,63748,38204],{"class":650},[637,63750,657],{"class":642},[637,63752,660],{"class":642},[637,63754,63755],{"class":663},"(e) => focusObject()",[637,63757,660],{"class":642},[637,63759,669],{"class":642},[637,63761,63762,63764,63766],{"class":639,"line":912},[637,63763,864],{"class":642},[637,63765,867],{"class":646},[637,63767,787],{"class":642},[637,63769,63770,63772,63774],{"class":639,"line":2648},[637,63771,864],{"class":642},[637,63773,877],{"class":646},[637,63775,787],{"class":642},[637,63777,63778,63780,63782],{"class":639,"line":2657},[637,63779,885],{"class":642},[637,63781,856],{"class":646},[637,63783,669],{"class":642},[637,63785,63787,63789,63791],{"class":63786,"line":2677},[639,673],[637,63788,895],{"class":642},[637,63790,471],{"class":646},[637,63792,669],{"class":642},[637,63794,63795,63797,63799],{"class":639,"line":2686},[637,63796,905],{"class":642},[637,63798,761],{"class":646},[637,63800,669],{"class":642},[637,63802,63803,63805,63807],{"class":639,"line":2695},[637,63804,732],{"class":642},[637,63806,750],{"class":646},[637,63808,669],{"class":642},[504,63810,922],{"id":921},[927,63812,63813,63823],{},[930,63814,63815],{},[933,63816,63817,63819,63821],{},[936,63818,8110],{"align":997},[936,63820,941],{"align":997},[936,63822,944],{},[946,63824,63825,63842,63861,63878,63898,63919],{},[933,63826,63827,63832,63838],{},[951,63828,63829],{"align":997},[618,63830,63831],{},"duration",[951,63833,63834,63835,63837],{"align":997},"Duration of the ",[618,63836,63448],{}," animation in seconds",[951,63839,63840],{},[618,63841,13682],{},[933,63843,63844,63848,63857],{},[951,63845,63846],{"align":997},[618,63847,40443],{},[951,63849,63850,63851,18686,63853,5634,63855],{"align":997},"Additional distance from the target when using ",[618,63852,63448],{},[618,63854,7639],{},[618,63856,7643],{},[951,63858,63859],{},[618,63860,5752],{},[933,63862,63863,63868,63874],{},[951,63864,63865],{"align":997},[618,63866,63867],{},"useResize",[951,63869,63870,63871,63873],{"align":997},"Whether to re",[618,63872,63448],{}," the last target when the screen is resized",[951,63875,63876],{},[618,63877,971],{},[933,63879,63880,63885,63894],{},[951,63881,63882],{"align":997},[618,63883,63884],{},"useMounted",[951,63886,63887,63888,63890,63891,63893],{"align":997},"Whether to ",[618,63889,63448],{}," the ",[618,63892,471],{}," object when the component is mounts",[951,63895,63896],{},[618,63897,971],{},[933,63899,63900,63905,63915],{},[951,63901,63902],{"align":997},[618,63903,63904],{},"clip",[951,63906,63907,63908,3086,63910,63912,63913],{"align":997},"Whether to adjust the camera's ",[618,63909,43066],{},[618,63911,40893],{}," settings when using ",[618,63914,63448],{},[951,63916,63917],{},[618,63918,971],{},[933,63920,63921,63926,63935],{},[951,63922,63923],{"align":997},[618,63924,63925],{},"easing",[951,63927,63928,63929,63932,63933],{"align":997},"Animation's easing function. ",[618,63930,63931],{},"t"," and the returned value should be in the interval ",[618,63934,53311],{},[951,63936,63937],{},"Cubic ease out",[504,63939,63448],{"id":63940},"lookat",[614,63942,63943,3217,63946,63948,63949,1695,63951,5634,63953,1146],{},[618,63944,63945],{},"\u003CBounds />",[618,63947,63448],{}," points the camera at its first argument: an ",[618,63950,7643],{},[618,63952,7639],{},[618,63954,8161],{},[4074,63956,63958],{"id":63957},"method-signatures","Method Signatures",[626,63960,63963],{"className":63961,"code":63962,"language":30340},[30338],"/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly.\n */\nlookAt(object: Object3D): void\n\n/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.\n */\nlookAt(object: Object3D, up: VectorFlexibleParams): void\n\n/**\n * Centers the camera's viewport on a `Box3`.\n */\nlookAt(box3: Box3): void\n\n/**\n * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.\n */\nlookAt(box3: Box3, up: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`.\n */\nlookAt(target: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position`.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void\n\n/**\n * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.\n */\nlookAt(): void\n",[618,63964,63962],{"__ignoreMap":576},[1349,63966,63967],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":63969},[63970,63971,63972],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":63940,"depth":578,"text":63448,"children":63973},[63974],{"id":63957,"depth":708,"text":63958},"Calculate boundary box and center camera accordingly.",{},{"title":471,"description":63975},"hHyluEwt8akq_4Cca4tkdoVEZlteuogJu8G43SPaETs",{"id":63980,"title":475,"body":63981,"description":64270,"extension":591,"links":592,"meta":64271,"navigation":594,"path":476,"seo":64272,"stem":477,"__hash__":64273},"docs/2.api/miscellaneous/global-audio.md",{"type":501,"value":63982,"toc":64265},[63983,63991,63998,64000,64138,64144,64146,64239,64241,64263],[614,63984,2799,63985,9489,63987,63990],{},[618,63986,7338],{},[618,63988,63989],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[614,63992,30345,63993],{},[1140,63994,63997],{"href":63995,"rel":63996},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1144],"Audio",[504,63999,15],{"id":624},[626,64001,64004],{"className":628,"code":64002,"highlights":64003,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { TresCanvas } from '@tresjs/core'\nimport { GlobalAudio } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" />\n \u003CGlobalAudio :src=\"exampleAudio\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[708,790],[618,64005,64006,64016,64034,64054,64062,64066,64074,64082,64101,64122,64130],{"__ignoreMap":576},[637,64007,64008,64010,64012,64014],{"class":639,"line":577},[637,64009,643],{"class":642},[637,64011,647],{"class":646},[637,64013,651],{"class":650},[637,64015,669],{"class":642},[637,64017,64018,64020,64022,64024,64026,64028,64030,64032],{"class":639,"line":578},[637,64019,677],{"class":676},[637,64021,680],{"class":642},[637,64023,715],{"class":683},[637,64025,693],{"class":642},[637,64027,696],{"class":676},[637,64029,699],{"class":642},[637,64031,724],{"class":663},[637,64033,705],{"class":642},[637,64035,64037,64039,64041,64044,64046,64048,64050,64052],{"class":64036,"line":708},[639,673],[637,64038,677],{"class":676},[637,64040,680],{"class":642},[637,64042,64043],{"class":683}," GlobalAudio",[637,64045,693],{"class":642},[637,64047,696],{"class":676},[637,64049,699],{"class":642},[637,64051,702],{"class":663},[637,64053,705],{"class":642},[637,64055,64056,64058,64060],{"class":639,"line":729},[637,64057,732],{"class":642},[637,64059,647],{"class":646},[637,64061,669],{"class":642},[637,64063,64064],{"class":639,"line":739},[637,64065,742],{"emptyLinePlaceholder":594},[637,64067,64068,64070,64072],{"class":639,"line":745},[637,64069,643],{"class":642},[637,64071,750],{"class":646},[637,64073,669],{"class":642},[637,64075,64076,64078,64080],{"class":639,"line":755},[637,64077,758],{"class":642},[637,64079,761],{"class":646},[637,64081,669],{"class":642},[637,64083,64084,64086,64088,64090,64092,64094,64097,64099],{"class":639,"line":778},[637,64085,781],{"class":642},[637,64087,784],{"class":646},[637,64089,1508],{"class":650},[637,64091,657],{"class":642},[637,64093,660],{"class":642},[637,64095,64096],{"class":663},"[0, 0, 7.5]",[637,64098,660],{"class":642},[637,64100,787],{"class":642},[637,64102,64104,64106,64108,64111,64113,64115,64118,64120],{"class":64103,"line":790},[639,673],[637,64105,781],{"class":642},[637,64107,475],{"class":646},[637,64109,64110],{"class":650}," :src",[637,64112,657],{"class":642},[637,64114,660],{"class":642},[637,64116,64117],{"class":663},"exampleAudio",[637,64119,660],{"class":642},[637,64121,787],{"class":642},[637,64123,64124,64126,64128],{"class":639,"line":800},[637,64125,905],{"class":642},[637,64127,761],{"class":646},[637,64129,669],{"class":642},[637,64131,64132,64134,64136],{"class":639,"line":805},[637,64133,732],{"class":642},[637,64135,750],{"class":646},[637,64137,669],{"class":642},[614,64139,64140,64141,64143],{},"*The ",[618,64142,24566],{}," prop is required",[504,64145,922],{"id":921},[927,64147,64148,64158],{},[930,64149,64150],{},[933,64151,64152,64154,64156],{},[936,64153,938],{"align":997},[936,64155,941],{"align":997},[936,64157,944],{},[946,64159,64160,64171,64186,64198,64211,64225],{},[933,64161,64162,64166,64169],{},[951,64163,64164],{"align":997},[618,64165,24566],{},[951,64167,64168],{"align":997},"Path to your audio file",[951,64170],{},[933,64172,64173,64178,64181],{},[951,64174,64175],{"align":997},[618,64176,64177],{},"playTrigger",[951,64179,64180],{"align":997},"Id of the DOM element that triggers the play/pause state",[951,64182,64183],{},[618,64184,64185],{},"renderer.domElement",[933,64187,64188,64193,64196],{},[951,64189,64190],{"align":997},[618,64191,64192],{},"stopTrigger",[951,64194,64195],{"align":997},"Id of the DOM element that triggers the stop state",[951,64197],{},[933,64199,64200,64204,64207],{},[951,64201,64202],{"align":997},[618,64203,25939],{},[951,64205,64206],{"align":997},"If the audio must be replayed when ends",[951,64208,64209],{},[618,64210,971],{},[933,64212,64213,64218,64221],{},[951,64214,64215],{"align":997},[618,64216,64217],{},"volume",[951,64219,64220],{"align":997},"Volume of the audio",[951,64222,64223],{},[618,64224,1969],{},[933,64226,64227,64232,64235],{},[951,64228,64229],{"align":997},[618,64230,64231],{},"playbackRate",[951,64233,64234],{"align":997},"PlaybackRate of the audio",[951,64236,64237],{},[618,64238,1897],{},[504,64240,1171],{"id":1170},[927,64242,64243,64251],{},[930,64244,64245],{},[933,64246,64247,64249],{},[936,64248,1180],{"align":997},[936,64250,941],{"align":997},[946,64252,64253],{},[933,64254,64255,64260],{},[951,64256,64257],{"align":997},[618,64258,64259],{},"isPlaying",[951,64261,64262],{"align":997},"Dispatched when the Audio change its state (play, pause or stop)",[1349,64264,14395],{},{"title":576,"searchDepth":577,"depth":578,"links":64266},[64267,64268,64269],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},{"id":1170,"depth":578,"text":1171},"Add global sound to your scene.",{},{"title":475,"description":64270},"3JUUNGnzyd_UYSpUOzquhfgUDt2njg-AUZ8wXPFhXKM",{"id":64275,"title":479,"body":64276,"description":64639,"extension":591,"links":592,"meta":64640,"navigation":594,"path":480,"seo":64641,"stem":481,"__hash__":64642},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":501,"value":64277,"toc":64635},[64278,64283,64295,64297,64303,64311,64320,64325,64572,64574,64633],[608,64279,64280],{},[64281,64282],"miscellaneous-mouse-parallax",{},[614,64284,64285,64288,64289,64294],{},[618,64286,64287],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1140,64290,64293],{"href":64291,"rel":64292},"https://en.wikipedia.org/wiki/Parallax",[1144],"parallax"," effect. The camera will update automatically according to the mouse position.",[504,64296,15],{"id":624},[614,64298,64299,64300,64302],{},"You only need to import and add it to your template as ",[618,64301,64287],{},". Additionally, you can pass the following props:",[614,64304,64305,64307,64308,1146],{},[618,64306,30291],{}," is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: ",[618,64309,64310],{},":factor=[x,y]",[614,64312,64313,64316,64317,1146],{},[618,64314,64315],{},"ease"," is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: ",[618,64318,64319],{},":ease=[x,y]",[614,64321,64322,64324],{},[618,64323,16735],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[626,64326,64329],{"className":628,"code":64327,"highlights":64328,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MouseParallax, TorusKnot } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" :fov=\"75\" />\n \u003CTorusKnot>\n \u003CTresMeshToonMaterial color=\"orange\" />\n \u003C/TorusKnot>\n \u003CMouseParallax :factor=\"5\" :ease=\"[3, 0.1]\" />\n \u003CTresAmbientLight />\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n \u003C/TresCanvas>\n\u003C/template>\n",[578,827],[618,64330,64331,64351,64377,64397,64405,64409,64417,64435,64464,64472,64490,64498,64530,64538,64556,64564],{"__ignoreMap":576},[637,64332,64333,64335,64337,64339,64341,64343,64345,64347,64349],{"class":639,"line":577},[637,64334,643],{"class":642},[637,64336,647],{"class":646},[637,64338,651],{"class":650},[637,64340,654],{"class":650},[637,64342,657],{"class":642},[637,64344,660],{"class":642},[637,64346,664],{"class":663},[637,64348,660],{"class":642},[637,64350,669],{"class":642},[637,64352,64354,64356,64358,64361,64363,64365,64367,64369,64371,64373,64375],{"class":64353,"line":578},[639,673],[637,64355,677],{"class":676},[637,64357,680],{"class":642},[637,64359,64360],{"class":683}," MouseParallax",[637,64362,687],{"class":642},[637,64364,40565],{"class":683},[637,64366,693],{"class":642},[637,64368,696],{"class":676},[637,64370,9536],{"class":642},[637,64372,702],{"class":663},[637,64374,660],{"class":642},[637,64376,9543],{"class":642},[637,64378,64379,64381,64383,64385,64387,64389,64391,64393,64395],{"class":639,"line":708},[637,64380,677],{"class":676},[637,64382,680],{"class":642},[637,64384,715],{"class":683},[637,64386,693],{"class":642},[637,64388,696],{"class":676},[637,64390,9536],{"class":642},[637,64392,724],{"class":663},[637,64394,660],{"class":642},[637,64396,9543],{"class":642},[637,64398,64399,64401,64403],{"class":639,"line":729},[637,64400,732],{"class":642},[637,64402,647],{"class":646},[637,64404,669],{"class":642},[637,64406,64407],{"class":639,"line":739},[637,64408,742],{"emptyLinePlaceholder":594},[637,64410,64411,64413,64415],{"class":639,"line":745},[637,64412,643],{"class":642},[637,64414,750],{"class":646},[637,64416,669],{"class":642},[637,64418,64419,64421,64423,64425,64427,64429,64431,64433],{"class":639,"line":755},[637,64420,758],{"class":642},[637,64422,761],{"class":646},[637,64424,764],{"class":650},[637,64426,657],{"class":642},[637,64428,660],{"class":642},[637,64430,11812],{"class":663},[637,64432,660],{"class":642},[637,64434,669],{"class":642},[637,64436,64437,64439,64441,64443,64445,64447,64449,64451,64453,64455,64457,64460,64462],{"class":639,"line":778},[637,64438,781],{"class":642},[637,64440,784],{"class":646},[637,64442,1508],{"class":650},[637,64444,657],{"class":642},[637,64446,660],{"class":642},[637,64448,64096],{"class":663},[637,64450,660],{"class":642},[637,64452,32288],{"class":650},[637,64454,657],{"class":642},[637,64456,660],{"class":642},[637,64458,64459],{"class":663},"75",[637,64461,660],{"class":642},[637,64463,787],{"class":642},[637,64465,64466,64468,64470],{"class":639,"line":790},[637,64467,781],{"class":642},[637,64469,35830],{"class":646},[637,64471,669],{"class":642},[637,64473,64474,64476,64478,64480,64482,64484,64486,64488],{"class":639,"line":800},[637,64475,853],{"class":642},[637,64477,13339],{"class":646},[637,64479,2712],{"class":650},[637,64481,657],{"class":642},[637,64483,660],{"class":642},[637,64485,13348],{"class":663},[637,64487,660],{"class":642},[637,64489,787],{"class":642},[637,64491,64492,64494,64496],{"class":639,"line":805},[637,64493,895],{"class":642},[637,64495,35830],{"class":646},[637,64497,669],{"class":642},[637,64499,64501,64503,64505,64508,64510,64512,64514,64516,64519,64521,64523,64526,64528],{"class":64500,"line":827},[639,673],[637,64502,781],{"class":642},[637,64504,479],{"class":646},[637,64506,64507],{"class":650}," :factor",[637,64509,657],{"class":642},[637,64511,660],{"class":642},[637,64513,12730],{"class":663},[637,64515,660],{"class":642},[637,64517,64518],{"class":650}," :ease",[637,64520,657],{"class":642},[637,64522,660],{"class":642},[637,64524,64525],{"class":663},"[3, 0.1]",[637,64527,660],{"class":642},[637,64529,787],{"class":642},[637,64531,64532,64534,64536],{"class":639,"line":631},[637,64533,781],{"class":642},[637,64535,9702],{"class":646},[637,64537,787],{"class":642},[637,64539,64540,64542,64544,64546,64548,64550,64552,64554],{"class":639,"line":850},[637,64541,781],{"class":642},[637,64543,9721],{"class":646},[637,64545,1508],{"class":650},[637,64547,657],{"class":642},[637,64549,660],{"class":642},[637,64551,13383],{"class":663},[637,64553,660],{"class":642},[637,64555,787],{"class":642},[637,64557,64558,64560,64562],{"class":639,"line":861},[637,64559,905],{"class":642},[637,64561,761],{"class":646},[637,64563,669],{"class":642},[637,64565,64566,64568,64570],{"class":639,"line":872},[637,64567,732],{"class":642},[637,64569,750],{"class":646},[637,64571,669],{"class":642},[504,64573,922],{"id":921},[927,64575,64576,64586],{},[930,64577,64578],{},[933,64579,64580,64582,64584],{},[936,64581,938],{"align":997},[936,64583,941],{"align":997},[936,64585,944],{},[946,64587,64588,64600,64611,64622],{},[933,64589,64590,64595,64598],{},[951,64591,64592],{"align":997},[1692,64593,64594],{},"disabled",[951,64596,64597],{"align":997},"Enable or disable the effect",[951,64599,971],{},[933,64601,64602,64606,64609],{},[951,64603,64604],{"align":997},[1692,64605,30291],{},[951,64607,64608],{"align":997},"Increase the range of the parallax",[951,64610,58035],{},[933,64612,64613,64617,64620],{},[951,64614,64615],{"align":997},[1692,64616,64315],{},[951,64618,64619],{"align":997},"Increase the camera movement speed",[951,64621,2186],{},[933,64623,64624,64628,64631],{},[951,64625,64626],{"align":997},[1692,64627,16735],{},[951,64629,64630],{"align":997},"Whether the mouse coordinates are calculated from the element or the window",[951,64632,971],{},[1349,64634,1667],{},{"title":576,"searchDepth":577,"depth":578,"links":64636},[64637,64638],{"id":624,"depth":578,"text":15},{"id":921,"depth":578,"text":922},"Create parallax effects based on mouse movement.",{},{"title":479,"description":64639},"DlWi-PCiTKTosw5xB5jxhs3p0vmhFRnKBmSiLiGYpy8",{"id":64644,"title":483,"body":64645,"description":65696,"extension":591,"links":592,"meta":65697,"navigation":594,"path":484,"seo":65698,"stem":485,"__hash__":65699},"docs/2.api/miscellaneous/positional-audio.md",{"type":501,"value":64646,"toc":65689},[64647,64652,64665,64675,64677,64692,64958,64986,64990,64996,64998,65191,65193,65265,65495,65657,65659,65686],[608,64648,64649],{},[64650,64651],"miscellaneous-positional-audio",{},[614,64653,2799,64654,60446,64656,64660,64661,64664],{},[618,64655,7338],{},[1140,64657,483],{"href":64658,"rel":64659},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1144],".\n",[618,64662,64663],{},"\u003CPositionalAudio>"," is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.",[614,64666,64667,64669,64670,36672],{},[618,64668,64663],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1140,64671,64674],{"href":64672,"rel":64673},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1144],"PositionalAudioHelper",[504,64676,15],{"id":624},[614,64678,2799,64679,64681,64682,64684,64685,64687,64688,64691],{},[618,64680,64663],{}," component is very simple to set up and use, allowing you to bring your 3D scenes to life. All you need to do is call the ",[618,64683,64663],{}," component and set the ",[618,64686,59441],{},". It must be wrapped around the ",[618,64689,64690],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[626,64693,64696],{"className":628,"code":64694,"highlights":64695,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Box, PositionalAudio } from '@tresjs/cientos'\nimport { onUnmounted, shallowRef } from 'vue'\n\nconst positionalAudioRef = shallowRef(null)\n\nonUnmounted(() => {\n positionalAudioRef?.value?.dispose()\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CBox :args=\"[1, 1, 1]\">\n \u003CTresMeshNormalMaterial />\n \u003CSuspense>\n \u003CPositionalAudio\n ref=\"positionalAudioRef\"\n url=\"your-sound.mp3\"\n />\n \u003C/Suspense>\n \u003C/Box>\n \u003C/TresCanvas>\n\u003C/template>\n",[578,882,632,902],[618,64697,64698,64718,64742,64764,64768,64785,64789,64801,64816,64822,64830,64834,64842,64850,64868,64876,64884,64892,64907,64922,64926,64934,64942,64950],{"__ignoreMap":576},[637,64699,64700,64702,64704,64706,64708,64710,64712,64714,64716],{"class":639,"line":577},[637,64701,643],{"class":642},[637,64703,647],{"class":646},[637,64705,651],{"class":650},[637,64707,654],{"class":650},[637,64709,657],{"class":642},[637,64711,660],{"class":642},[637,64713,664],{"class":663},[637,64715,660],{"class":642},[637,64717,669],{"class":642},[637,64719,64721,64723,64725,64727,64729,64732,64734,64736,64738,64740],{"class":64720,"line":578},[639,673],[637,64722,677],{"class":676},[637,64724,680],{"class":642},[637,64726,1420],{"class":683},[637,64728,687],{"class":642},[637,64730,64731],{"class":683}," PositionalAudio",[637,64733,693],{"class":642},[637,64735,696],{"class":676},[637,64737,699],{"class":642},[637,64739,702],{"class":663},[637,64741,705],{"class":642},[637,64743,64744,64746,64748,64750,64752,64754,64756,64758,64760,64762],{"class":639,"line":708},[637,64745,677],{"class":676},[637,64747,680],{"class":642},[637,64749,23666],{"class":683},[637,64751,687],{"class":642},[637,64753,3521],{"class":683},[637,64755,693],{"class":642},[637,64757,696],{"class":676},[637,64759,699],{"class":642},[637,64761,633],{"class":663},[637,64763,705],{"class":642},[637,64765,64766],{"class":639,"line":729},[637,64767,742],{"emptyLinePlaceholder":594},[637,64769,64770,64772,64775,64777,64779,64781,64783],{"class":639,"line":739},[637,64771,2438],{"class":650},[637,64773,64774],{"class":683}," positionalAudioRef ",[637,64776,657],{"class":642},[637,64778,3521],{"class":2457},[637,64780,2460],{"class":683},[637,64782,3679],{"class":642},[637,64784,2471],{"class":683},[637,64786,64787],{"class":639,"line":745},[637,64788,742],{"emptyLinePlaceholder":594},[637,64790,64791,64793,64795,64797,64799],{"class":639,"line":755},[637,64792,23713],{"class":2457},[637,64794,2460],{"class":683},[637,64796,3697],{"class":642},[637,64798,3700],{"class":650},[637,64800,1226],{"class":642},[637,64802,64803,64806,64808,64810,64812,64814],{"class":639,"line":778},[637,64804,64805],{"class":683}," positionalAudioRef",[637,64807,3711],{"class":642},[637,64809,3708],{"class":683},[637,64811,3711],{"class":642},[637,64813,22794],{"class":2457},[637,64815,6556],{"class":646},[637,64817,64818,64820],{"class":639,"line":790},[637,64819,2451],{"class":642},[637,64821,2471],{"class":683},[637,64823,64824,64826,64828],{"class":639,"line":800},[637,64825,732],{"class":642},[637,64827,647],{"class":646},[637,64829,669],{"class":642},[637,64831,64832],{"class":639,"line":805},[637,64833,742],{"emptyLinePlaceholder":594},[637,64835,64836,64838,64840],{"class":639,"line":827},[637,64837,643],{"class":642},[637,64839,750],{"class":646},[637,64841,669],{"class":642},[637,64843,64844,64846,64848],{"class":639,"line":631},[637,64845,758],{"class":642},[637,64847,761],{"class":646},[637,64849,669],{"class":642},[637,64851,64852,64854,64856,64858,64860,64862,64864,64866],{"class":639,"line":850},[637,64853,781],{"class":642},[637,64855,217],{"class":646},[637,64857,1982],{"class":650},[637,64859,657],{"class":642},[637,64861,660],{"class":642},[637,64863,1989],{"class":663},[637,64865,660],{"class":642},[637,64867,669],{"class":642},[637,64869,64870,64872,64874],{"class":639,"line":861},[637,64871,853],{"class":642},[637,64873,877],{"class":646},[637,64875,787],{"class":642},[637,64877,64878,64880,64882],{"class":639,"line":872},[637,64879,853],{"class":642},[637,64881,21668],{"class":646},[637,64883,669],{"class":642},[637,64885,64887,64889],{"class":64886,"line":882},[639,673],[637,64888,864],{"class":642},[637,64890,64891],{"class":646},"PositionalAudio\n",[637,64893,64895,64898,64900,64902,64905],{"class":64894,"line":632},[639,673],[637,64896,64897],{"class":650}," ref",[637,64899,657],{"class":642},[637,64901,660],{"class":642},[637,64903,64904],{"class":663},"positionalAudioRef",[637,64906,3154],{"class":642},[637,64908,64910,64913,64915,64917,64920],{"class":64909,"line":902},[639,673],[637,64911,64912],{"class":650}," url",[637,64914,657],{"class":642},[637,64916,660],{"class":642},[637,64918,64919],{"class":663},"your-sound.mp3",[637,64921,3154],{"class":642},[637,64923,64924],{"class":639,"line":912},[637,64925,53332],{"class":642},[637,64927,64928,64930,64932],{"class":639,"line":2648},[637,64929,885],{"class":642},[637,64931,21668],{"class":646},[637,64933,669],{"class":642},[637,64935,64936,64938,64940],{"class":639,"line":2657},[637,64937,895],{"class":642},[637,64939,217],{"class":646},[637,64941,669],{"class":642},[637,64943,64944,64946,64948],{"class":639,"line":2677},[637,64945,905],{"class":642},[637,64947,761],{"class":646},[637,64949,669],{"class":642},[637,64951,64952,64954,64956],{"class":639,"line":2686},[637,64953,732],{"class":642},[637,64955,750],{"class":646},[637,64957,669],{"class":642},[3222,64959,64960],{},[614,64961,64962,64963,64966,64967,64974,64975,64978,64979,3086,64982,64985],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[618,64964,64965],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1140,64968,64971],{"href":64969,"rel":64970},"https://goo.gl/7K7WLu",[1144],[618,64972,64973],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[618,64976,64977],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[618,64980,64981],{},":ready=\"true\"",[618,64983,64984],{},"autoplay=\"true\""," for a direct launch.",[504,64987,64989],{"id":64988},"how-does-it-work","How does it work?",[9481,64991],{"className":64992,"src":64994,"alt":64995},[64993],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[504,64997,922],{"id":921},[927,64999,65000,65010],{},[930,65001,65002],{},[933,65003,65004,65006,65008],{},[936,65005,938],{"align":997},[936,65007,941],{"align":997},[936,65009,944],{},[946,65011,65012,65027,65048,65068,65101,65119,65134,65151,65170],{},[933,65013,65014,65018,65025],{},[951,65015,65016],{"align":997},[1692,65017,59441],{},[951,65019,65020,58424,65022,65024],{"align":997},[618,65021,3595],{},[1692,65023,9280],{}," — The path or URL to the file.",[951,65026],{},[933,65028,65029,65034,65044],{},[951,65030,65031],{"align":997},[1692,65032,65033],{},"helper",[951,65035,65036,65038,65039,3217,65041],{"align":997},[618,65037,17582],{}," — Selects whether helper mode is enabled. ",[7576,65040],{},[1697,65042,65043],{},"(Useful for visualising the angle of sound propagation)",[951,65045,65046],{},[618,65047,971],{},[933,65049,65050,65054,65064],{},[951,65051,65052],{"align":997},[1692,65053,13542],{},[951,65055,65056,65058,65059],{"align":997},[618,65057,5375],{}," — The distance at which the volume reduction starts taking effect. ",[1697,65060,65061],{},[1692,65062,65063],{},"A non-negative number.",[951,65065,65066],{},[618,65067,1897],{},[933,65069,65070,65075,65097],{},[951,65071,65072],{"align":997},[1692,65073,65074],{},"ready",[951,65076,65077,65079,65080,65082,65083,65086,65087,65090,65091,65094,65095],{"align":997},[618,65078,17582],{}," — Tells ",[618,65081,64663],{}," that ",[618,65084,65085],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[618,65088,65089],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1140,65092,64969],{"href":64969,"rel":65093},[1144],"). ",[7576,65096],{},[951,65098,65099],{},[618,65100,971],{},[933,65102,65103,65107,65115],{},[951,65104,65105],{"align":997},[1692,65106,65089],{},[951,65108,65109,65111,65112,65114],{"align":997},[618,65110,17582],{}," — Selects whether the audio is launched automatically. Please refer to the ",[618,65113,65074],{}," prop for a better understanding of how to use autoplay.",[951,65116,65117],{},[618,65118,971],{},[933,65120,65121,65125,65130],{},[951,65122,65123],{"align":997},[1692,65124,25939],{},[951,65126,65127,65129],{"align":997},[618,65128,17582],{}," — Specifies whether the audio should loop.",[951,65131,65132],{},[618,65133,971],{},[933,65135,65136,65141,65146],{},[951,65137,65138],{"align":997},[1692,65139,65140],{},"innerAngle",[951,65142,65143,65145],{"align":997},[618,65144,5375],{}," — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[951,65147,65148],{},[618,65149,65150],{},"360",[933,65152,65153,65158,65166],{},[951,65154,65155],{"align":997},[1692,65156,65157],{},"outerAngle",[951,65159,65160,65162,65163,41259],{"align":997},[618,65161,5375],{}," — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[618,65164,65165],{},"outerGain",[951,65167,65168],{},[618,65169,965],{},[933,65171,65172,65176,65187],{},[951,65173,65174],{"align":997},[1692,65175,65165],{},[951,65177,65178,65180,65181,65183,65184,65186],{"align":997},[618,65179,5375],{}," — A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[618,65182,65157],{}," prop. When the value is ",[618,65185,965],{}," no sound can be heard.",[951,65188,65189],{},[618,65190,965],{},[504,65192,58551],{"id":58550},[927,65194,65195,65203],{},[930,65196,65197],{},[933,65198,65199,65201],{},[936,65200,1180],{"align":997},[936,65202,941],{"align":997},[946,65204,65205,65217,65230,65243,65256],{},[933,65206,65207,65211],{},[951,65208,65209],{"align":997},[618,65210,9347],{},[951,65212,65213,65214,1146],{"align":997},"Instance reference — Inheritance of ",[1140,65215,483],{"href":64658,"rel":65216},[1144],[933,65218,65219,65224],{},[951,65220,65221],{"align":997},[618,65222,65223],{},"play()",[951,65225,65226,65227],{"align":997},"Play audio — ",[1697,65228,65229],{},"Cannot be fired if audio is already running.",[933,65231,65232,65237],{},[951,65233,65234],{"align":997},[618,65235,65236],{},"pause()",[951,65238,65239,65240],{"align":997},"Pause audio — ",[1697,65241,65242],{},"Cannot be fired if audio is already paused.",[933,65244,65245,65250],{},[951,65246,65247],{"align":997},[618,65248,65249],{},"stop()",[951,65251,65252,65253],{"align":997},"Stop audio — ",[1697,65254,65255],{},"Cannot be fired if audio is already stopped.",[933,65257,65258,65262],{},[951,65259,65260],{"align":997},[618,65261,24829],{},[951,65263,65264],{"align":997},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[626,65266,65270],{"className":65267,"code":65268,"language":65269,"meta":576,"style":576},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const positionalAudioRef = shallowRef(null)\n\nconsole.log(positionalAudioRef.value.instance) // instance properties\n\nconst handlerAudio = (action: string) => {\n if (!positionalAudioRef.value) { return }\n\n const { play, pause, stop } = positionalAudioRef.value\n\n if (action === 'play') { play() }\n else if (action === 'pause') { pause() }\n else if (action === 'stop') { stop() }\n}\n","typescript",[618,65271,65272,65288,65292,65316,65320,65344,65366,65370,65400,65404,65431,65462,65491],{"__ignoreMap":576},[637,65273,65274,65276,65278,65280,65282,65284,65286],{"class":639,"line":577},[637,65275,2438],{"class":650},[637,65277,64774],{"class":683},[637,65279,657],{"class":642},[637,65281,3521],{"class":2457},[637,65283,2460],{"class":683},[637,65285,3679],{"class":642},[637,65287,2471],{"class":683},[637,65289,65290],{"class":639,"line":578},[637,65291,742],{"emptyLinePlaceholder":594},[637,65293,65294,65297,65299,65301,65304,65306,65308,65310,65313],{"class":639,"line":708},[637,65295,65296],{"class":683},"console",[637,65298,1146],{"class":642},[637,65300,6880],{"class":2457},[637,65302,65303],{"class":683},"(positionalAudioRef",[637,65305,1146],{"class":642},[637,65307,3708],{"class":683},[637,65309,1146],{"class":642},[637,65311,65312],{"class":683},"instance) ",[637,65314,65315],{"class":1231},"// instance properties\n",[637,65317,65318],{"class":639,"line":729},[637,65319,742],{"emptyLinePlaceholder":594},[637,65321,65322,65324,65327,65329,65331,65334,65336,65338,65340,65342],{"class":639,"line":739},[637,65323,2438],{"class":650},[637,65325,65326],{"class":683}," handlerAudio ",[637,65328,657],{"class":642},[637,65330,3097],{"class":642},[637,65332,65333],{"class":6859},"action",[637,65335,1240],{"class":642},[637,65337,5360],{"class":1222},[637,65339,3363],{"class":642},[637,65341,3700],{"class":650},[637,65343,1226],{"class":642},[637,65345,65346,65348,65350,65352,65354,65356,65358,65360,65362,65364],{"class":639,"line":745},[637,65347,21270],{"class":676},[637,65349,3097],{"class":646},[637,65351,52281],{"class":642},[637,65353,64904],{"class":683},[637,65355,1146],{"class":642},[637,65357,3708],{"class":683},[637,65359,4757],{"class":646},[637,65361,8459],{"class":642},[637,65363,52294],{"class":676},[637,65365,17816],{"class":642},[637,65367,65368],{"class":639,"line":755},[637,65369,742],{"emptyLinePlaceholder":594},[637,65371,65372,65374,65376,65379,65381,65384,65386,65389,65391,65393,65396,65398],{"class":639,"line":778},[637,65373,56907],{"class":650},[637,65375,680],{"class":642},[637,65377,65378],{"class":683}," play",[637,65380,687],{"class":642},[637,65382,65383],{"class":683}," pause",[637,65385,687],{"class":642},[637,65387,65388],{"class":683}," stop",[637,65390,693],{"class":642},[637,65392,2454],{"class":642},[637,65394,65395],{"class":683}," positionalAudioRef",[637,65397,1146],{"class":642},[637,65399,23889],{"class":683},[637,65401,65402],{"class":639,"line":790},[637,65403,742],{"emptyLinePlaceholder":594},[637,65405,65406,65408,65410,65412,65414,65416,65419,65421,65423,65425,65427,65429],{"class":639,"line":800},[637,65407,21270],{"class":676},[637,65409,3097],{"class":646},[637,65411,65333],{"class":683},[637,65413,21291],{"class":642},[637,65415,699],{"class":642},[637,65417,65418],{"class":663},"play",[637,65420,2463],{"class":642},[637,65422,4757],{"class":646},[637,65424,8459],{"class":642},[637,65426,65378],{"class":2457},[637,65428,7005],{"class":646},[637,65430,1347],{"class":642},[637,65432,65433,65436,65439,65441,65443,65445,65447,65450,65452,65454,65456,65458,65460],{"class":639,"line":805},[637,65434,65435],{"class":676}," else",[637,65437,65438],{"class":676}," if",[637,65440,3097],{"class":646},[637,65442,65333],{"class":683},[637,65444,21291],{"class":642},[637,65446,699],{"class":642},[637,65448,65449],{"class":663},"pause",[637,65451,2463],{"class":642},[637,65453,4757],{"class":646},[637,65455,8459],{"class":642},[637,65457,65383],{"class":2457},[637,65459,7005],{"class":646},[637,65461,1347],{"class":642},[637,65463,65464,65466,65468,65470,65472,65474,65476,65479,65481,65483,65485,65487,65489],{"class":639,"line":827},[637,65465,65435],{"class":676},[637,65467,65438],{"class":676},[637,65469,3097],{"class":646},[637,65471,65333],{"class":683},[637,65473,21291],{"class":642},[637,65475,699],{"class":642},[637,65477,65478],{"class":663},"stop",[637,65480,2463],{"class":642},[637,65482,4757],{"class":646},[637,65484,8459],{"class":642},[637,65486,65388],{"class":2457},[637,65488,7005],{"class":646},[637,65490,1347],{"class":642},[637,65492,65493],{"class":639,"line":631},[637,65494,1347],{"class":642},[626,65496,65498],{"className":628,"code":65497,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003Cbutton @click=\"handlerAudio('play')\">play\u003C/button>\n \u003Cbutton @click=\"handlerAudio('pause')\">pause\u003C/button>\n \u003Cbutton @click=\"handlerAudio('stop')\">stop\u003C/button>\n\n \u003CTresCanvas>\n \u003CSphere>\n \u003CSuspense>\n \u003CPositionalAudio />\n \u003C/Suspense>\n \u003C/Sphere>\n \u003C/TresCanvas>\n\u003C/template>\n",[618,65499,65500,65508,65535,65562,65589,65593,65601,65609,65617,65625,65633,65641,65649],{"__ignoreMap":576},[637,65501,65502,65504,65506],{"class":639,"line":577},[637,65503,643],{"class":642},[637,65505,750],{"class":646},[637,65507,669],{"class":642},[637,65509,65510,65512,65514,65516,65518,65520,65523,65525,65527,65529,65531,65533],{"class":639,"line":578},[637,65511,758],{"class":642},[637,65513,38201],{"class":646},[637,65515,38204],{"class":650},[637,65517,657],{"class":642},[637,65519,660],{"class":642},[637,65521,65522],{"class":663},"handlerAudio('play')",[637,65524,660],{"class":642},[637,65526,3674],{"class":642},[637,65528,65418],{"class":683},[637,65530,732],{"class":642},[637,65532,38201],{"class":646},[637,65534,669],{"class":642},[637,65536,65537,65539,65541,65543,65545,65547,65550,65552,65554,65556,65558,65560],{"class":639,"line":708},[637,65538,758],{"class":642},[637,65540,38201],{"class":646},[637,65542,38204],{"class":650},[637,65544,657],{"class":642},[637,65546,660],{"class":642},[637,65548,65549],{"class":663},"handlerAudio('pause')",[637,65551,660],{"class":642},[637,65553,3674],{"class":642},[637,65555,65449],{"class":683},[637,65557,732],{"class":642},[637,65559,38201],{"class":646},[637,65561,669],{"class":642},[637,65563,65564,65566,65568,65570,65572,65574,65577,65579,65581,65583,65585,65587],{"class":639,"line":729},[637,65565,758],{"class":642},[637,65567,38201],{"class":646},[637,65569,38204],{"class":650},[637,65571,657],{"class":642},[637,65573,660],{"class":642},[637,65575,65576],{"class":663},"handlerAudio('stop')",[637,65578,660],{"class":642},[637,65580,3674],{"class":642},[637,65582,65478],{"class":683},[637,65584,732],{"class":642},[637,65586,38201],{"class":646},[637,65588,669],{"class":642},[637,65590,65591],{"class":639,"line":739},[637,65592,742],{"emptyLinePlaceholder":594},[637,65594,65595,65597,65599],{"class":639,"line":745},[637,65596,758],{"class":642},[637,65598,761],{"class":646},[637,65600,669],{"class":642},[637,65602,65603,65605,65607],{"class":639,"line":755},[637,65604,781],{"class":642},[637,65606,285],{"class":646},[637,65608,669],{"class":642},[637,65610,65611,65613,65615],{"class":639,"line":778},[637,65612,853],{"class":642},[637,65614,21668],{"class":646},[637,65616,669],{"class":642},[637,65618,65619,65621,65623],{"class":639,"line":790},[637,65620,864],{"class":642},[637,65622,483],{"class":646},[637,65624,787],{"class":642},[637,65626,65627,65629,65631],{"class":639,"line":800},[637,65628,885],{"class":642},[637,65630,21668],{"class":646},[637,65632,669],{"class":642},[637,65634,65635,65637,65639],{"class":639,"line":805},[637,65636,895],{"class":642},[637,65638,285],{"class":646},[637,65640,669],{"class":642},[637,65642,65643,65645,65647],{"class":639,"line":827},[637,65644,905],{"class":642},[637,65646,761],{"class":646},[637,65648,669],{"class":642},[637,65650,65651,65653,65655],{"class":639,"line":631},[637,65652,732],{"class":642},[637,65654,750],{"class":646},[637,65656,669],{"class":642},[504,65658,1171],{"id":1170},[927,65660,65661,65669],{},[930,65662,65663],{},[933,65664,65665,65667],{},[936,65666,1180],{"align":997},[936,65668,941],{"align":997},[946,65670,65671],{},[933,65672,65673,65678],{},[951,65674,65675],{"align":997},[618,65676,65677],{},"is-playing",[951,65679,65680,65681,3217,65683],{"align":997},"Triggered when the audio changes its state (play, pause, or stop) ",[7576,65682],{},[618,65684,65685],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1349,65687,65688],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":576,"searchDepth":577,"depth":578,"links":65690},[65691,65692,65693,65694,65695],{"id":624,"depth":578,"text":15},{"id":64988,"depth":578,"text":64989},{"id":921,"depth":578,"text":922},{"id":58550,"depth":578,"text":58551},{"id":1170,"depth":578,"text":1171},"Spatially positioned audio in 3D space.",{},{"title":483,"description":65696},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",{"id":65701,"title":487,"body":65702,"description":66329,"extension":591,"links":592,"meta":66330,"navigation":594,"path":488,"seo":66331,"stem":489,"__hash__":66332},"docs/2.api/miscellaneous/use-animations.md",{"type":501,"value":65703,"toc":66322},[65704,65717,65719,65723,65733,65960,65964,65971,66299,66301,66319],[614,65705,65706,65708,65709,65712,65713,36672],{},[618,65707,487],{}," is a composable that returns a ",[618,65710,65711],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1140,65714,8977],{"href":65715,"rel":65716},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1144],[504,65718,15],{"id":624},[4074,65720,65722],{"id":65721},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[614,65724,65725,65726,65728,65729,65732],{},"By default, ",[618,65727,487],{}," automatically updates the animation mixer on each frame using the ",[618,65730,65731],{},"useLoop"," composable:",[626,65734,65737],{"className":1208,"code":65735,"highlights":65736,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs/cientos'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions } = useAnimations(animations, model)\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n currentAction.value = newActions.Greeting\n currentAction.value.play()\n})\n",[577,755],[618,65738,65739,65763,65767,65792,65796,65830,65856,65880,65884,65897,65901,65921,65940,65954],{"__ignoreMap":576},[637,65740,65742,65744,65746,65749,65751,65753,65755,65757,65759,65761],{"class":65741,"line":577},[639,673],[637,65743,677],{"class":676},[637,65745,680],{"class":642},[637,65747,65748],{"class":683}," useAnimations",[637,65750,687],{"class":642},[637,65752,4370],{"class":683},[637,65754,693],{"class":642},[637,65756,696],{"class":676},[637,65758,699],{"class":642},[637,65760,702],{"class":663},[637,65762,705],{"class":642},[637,65764,65765],{"class":639,"line":578},[637,65766,742],{"emptyLinePlaceholder":594},[637,65768,65769,65771,65773,65775,65777,65779,65781,65783,65785,65788,65790],{"class":639,"line":708},[637,65770,2438],{"class":650},[637,65772,680],{"class":642},[637,65774,59536],{"class":683},[637,65776,2451],{"class":642},[637,65778,2454],{"class":642},[637,65780,4370],{"class":2457},[637,65782,2460],{"class":683},[637,65784,2463],{"class":642},[637,65786,65787],{"class":663},"/models/ugly-naked-bunny.gltf",[637,65789,2463],{"class":642},[637,65791,2471],{"class":683},[637,65793,65794],{"class":639,"line":729},[637,65795,742],{"emptyLinePlaceholder":594},[637,65797,65798,65800,65803,65805,65807,65809,65811,65813,65815,65817,65819,65821,65824,65827],{"class":639,"line":739},[637,65799,2438],{"class":650},[637,65801,65802],{"class":683}," animations ",[637,65804,657],{"class":642},[637,65806,3512],{"class":2457},[637,65808,2460],{"class":683},[637,65810,3697],{"class":642},[637,65812,3700],{"class":650},[637,65814,2443],{"class":683},[637,65816,1146],{"class":642},[637,65818,3708],{"class":683},[637,65820,3711],{"class":642},[637,65822,65823],{"class":683},"animations ",[637,65825,65826],{"class":642},"||",[637,65828,65829],{"class":683}," [])\n",[637,65831,65832,65834,65836,65838,65840,65842,65844,65846,65848,65850,65852,65854],{"class":639,"line":745},[637,65833,2438],{"class":650},[637,65835,5032],{"class":683},[637,65837,657],{"class":642},[637,65839,3512],{"class":2457},[637,65841,2460],{"class":683},[637,65843,3697],{"class":642},[637,65845,3700],{"class":650},[637,65847,2443],{"class":683},[637,65849,3711],{"class":642},[637,65851,3708],{"class":683},[637,65853,3711],{"class":642},[637,65855,5080],{"class":683},[637,65857,65859,65861,65863,65866,65868,65870,65872,65875,65877],{"class":65858,"line":755},[639,673],[637,65860,2438],{"class":650},[637,65862,680],{"class":642},[637,65864,65865],{"class":683}," actions ",[637,65867,2451],{"class":642},[637,65869,2454],{"class":642},[637,65871,65748],{"class":2457},[637,65873,65874],{"class":683},"(animations",[637,65876,687],{"class":642},[637,65878,65879],{"class":683}," model)\n",[637,65881,65882],{"class":639,"line":778},[637,65883,742],{"emptyLinePlaceholder":594},[637,65885,65886,65888,65891,65893,65895],{"class":639,"line":790},[637,65887,2438],{"class":650},[637,65889,65890],{"class":683}," currentAction ",[637,65892,657],{"class":642},[637,65894,3895],{"class":2457},[637,65896,6556],{"class":683},[637,65898,65899],{"class":639,"line":800},[637,65900,742],{"emptyLinePlaceholder":594},[637,65902,65903,65905,65908,65910,65912,65915,65917,65919],{"class":639,"line":805},[637,65904,12210],{"class":2457},[637,65906,65907],{"class":683},"(actions",[637,65909,687],{"class":642},[637,65911,3097],{"class":642},[637,65913,65914],{"class":6859},"newActions",[637,65916,3363],{"class":642},[637,65918,3700],{"class":650},[637,65920,1226],{"class":642},[637,65922,65923,65926,65928,65930,65932,65935,65937],{"class":639,"line":827},[637,65924,65925],{"class":683}," currentAction",[637,65927,1146],{"class":642},[637,65929,3708],{"class":683},[637,65931,2454],{"class":642},[637,65933,65934],{"class":683}," newActions",[637,65936,1146],{"class":642},[637,65938,65939],{"class":683},"Greeting\n",[637,65941,65942,65944,65946,65948,65950,65952],{"class":639,"line":631},[637,65943,65925],{"class":683},[637,65945,1146],{"class":642},[637,65947,3708],{"class":683},[637,65949,1146],{"class":642},[637,65951,65418],{"class":2457},[637,65953,6556],{"class":646},[637,65955,65956,65958],{"class":639,"line":850},[637,65957,2451],{"class":642},[637,65959,2471],{"class":683},[4074,65961,65963],{"id":65962},"manual-updates","Manual Updates",[614,65965,65966,65967,65970],{},"To gain finer control over animation mixer updates, enable ",[618,65968,65969],{},"manualUpdate: true"," and manage the update cycle manually.",[626,65972,65975],{"className":1208,"code":65973,"highlights":65974,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions, mixer } = useAnimations(animations, model, {\n manualUpdate: true,\n})\n\n// Handle updates manually\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta }) => {\n mixer.value.update(delta)\n})\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n currentAction.value = newActions.Greeting\n currentAction.value.play()\n})\n",[577,778,790,800,861],[618,65976,65977,66000,66018,66022,66046,66050,66080,66106,66137,66149,66156,66160,66165,66181,66198,66219,66225,66229,66241,66245,66263,66279,66293],{"__ignoreMap":576},[637,65978,65980,65982,65984,65986,65988,65990,65992,65994,65996,65998],{"class":65979,"line":577},[639,673],[637,65981,677],{"class":676},[637,65983,680],{"class":642},[637,65985,65748],{"class":683},[637,65987,687],{"class":642},[637,65989,4370],{"class":683},[637,65991,693],{"class":642},[637,65993,696],{"class":676},[637,65995,699],{"class":642},[637,65997,702],{"class":663},[637,65999,705],{"class":642},[637,66001,66002,66004,66006,66008,66010,66012,66014,66016],{"class":639,"line":578},[637,66003,677],{"class":676},[637,66005,680],{"class":642},[637,66007,60835],{"class":683},[637,66009,693],{"class":642},[637,66011,696],{"class":676},[637,66013,699],{"class":642},[637,66015,724],{"class":663},[637,66017,705],{"class":642},[637,66019,66020],{"class":639,"line":708},[637,66021,742],{"emptyLinePlaceholder":594},[637,66023,66024,66026,66028,66030,66032,66034,66036,66038,66040,66042,66044],{"class":639,"line":729},[637,66025,2438],{"class":650},[637,66027,680],{"class":642},[637,66029,59536],{"class":683},[637,66031,2451],{"class":642},[637,66033,2454],{"class":642},[637,66035,4370],{"class":2457},[637,66037,2460],{"class":683},[637,66039,2463],{"class":642},[637,66041,65787],{"class":663},[637,66043,2463],{"class":642},[637,66045,2471],{"class":683},[637,66047,66048],{"class":639,"line":739},[637,66049,742],{"emptyLinePlaceholder":594},[637,66051,66052,66054,66056,66058,66060,66062,66064,66066,66068,66070,66072,66074,66076,66078],{"class":639,"line":745},[637,66053,2438],{"class":650},[637,66055,65802],{"class":683},[637,66057,657],{"class":642},[637,66059,3512],{"class":2457},[637,66061,2460],{"class":683},[637,66063,3697],{"class":642},[637,66065,3700],{"class":650},[637,66067,2443],{"class":683},[637,66069,1146],{"class":642},[637,66071,3708],{"class":683},[637,66073,3711],{"class":642},[637,66075,65823],{"class":683},[637,66077,65826],{"class":642},[637,66079,65829],{"class":683},[637,66081,66082,66084,66086,66088,66090,66092,66094,66096,66098,66100,66102,66104],{"class":639,"line":755},[637,66083,2438],{"class":650},[637,66085,5032],{"class":683},[637,66087,657],{"class":642},[637,66089,3512],{"class":2457},[637,66091,2460],{"class":683},[637,66093,3697],{"class":642},[637,66095,3700],{"class":650},[637,66097,2443],{"class":683},[637,66099,3711],{"class":642},[637,66101,3708],{"class":683},[637,66103,3711],{"class":642},[637,66105,5080],{"class":683},[637,66107,66109,66111,66113,66116,66118,66121,66123,66125,66127,66129,66131,66133,66135],{"class":66108,"line":778},[639,673],[637,66110,2438],{"class":650},[637,66112,680],{"class":642},[637,66114,66115],{"class":683}," actions",[637,66117,687],{"class":642},[637,66119,66120],{"class":683}," mixer ",[637,66122,2451],{"class":642},[637,66124,2454],{"class":642},[637,66126,65748],{"class":2457},[637,66128,65874],{"class":683},[637,66130,687],{"class":642},[637,66132,5071],{"class":683},[637,66134,687],{"class":642},[637,66136,1226],{"class":642},[637,66138,66140,66143,66145,66147],{"class":66139,"line":790},[639,673],[637,66141,66142],{"class":646}," manualUpdate",[637,66144,1240],{"class":642},[637,66146,4421],{"class":4420},[637,66148,2511],{"class":642},[637,66150,66152,66154],{"class":66151,"line":800},[639,673],[637,66153,2451],{"class":642},[637,66155,2471],{"class":683},[637,66157,66158],{"class":639,"line":805},[637,66159,742],{"emptyLinePlaceholder":594},[637,66161,66162],{"class":639,"line":827},[637,66163,66164],{"class":1231},"// Handle updates manually\n",[637,66166,66167,66169,66171,66173,66175,66177,66179],{"class":639,"line":631},[637,66168,2438],{"class":650},[637,66170,680],{"class":642},[637,66172,61164],{"class":683},[637,66174,2451],{"class":642},[637,66176,2454],{"class":642},[637,66178,60835],{"class":2457},[637,66180,6556],{"class":683},[637,66182,66183,66185,66187,66189,66192,66194,66196],{"class":639,"line":850},[637,66184,61177],{"class":2457},[637,66186,2460],{"class":683},[637,66188,39697],{"class":642},[637,66190,66191],{"class":6859}," delta",[637,66193,39714],{"class":642},[637,66195,3700],{"class":650},[637,66197,1226],{"class":642},[637,66199,66201,66204,66206,66208,66210,66212,66214,66217],{"class":66200,"line":861},[639,673],[637,66202,66203],{"class":683}," mixer",[637,66205,1146],{"class":642},[637,66207,3708],{"class":683},[637,66209,1146],{"class":642},[637,66211,5824],{"class":2457},[637,66213,2460],{"class":646},[637,66215,66216],{"class":683},"delta",[637,66218,2471],{"class":646},[637,66220,66221,66223],{"class":639,"line":872},[637,66222,2451],{"class":642},[637,66224,2471],{"class":683},[637,66226,66227],{"class":639,"line":882},[637,66228,742],{"emptyLinePlaceholder":594},[637,66230,66231,66233,66235,66237,66239],{"class":639,"line":632},[637,66232,2438],{"class":650},[637,66234,65890],{"class":683},[637,66236,657],{"class":642},[637,66238,3895],{"class":2457},[637,66240,6556],{"class":683},[637,66242,66243],{"class":639,"line":902},[637,66244,742],{"emptyLinePlaceholder":594},[637,66246,66247,66249,66251,66253,66255,66257,66259,66261],{"class":639,"line":912},[637,66248,12210],{"class":2457},[637,66250,65907],{"class":683},[637,66252,687],{"class":642},[637,66254,3097],{"class":642},[637,66256,65914],{"class":6859},[637,66258,3363],{"class":642},[637,66260,3700],{"class":650},[637,66262,1226],{"class":642},[637,66264,66265,66267,66269,66271,66273,66275,66277],{"class":639,"line":2648},[637,66266,65925],{"class":683},[637,66268,1146],{"class":642},[637,66270,3708],{"class":683},[637,66272,2454],{"class":642},[637,66274,65934],{"class":683},[637,66276,1146],{"class":642},[637,66278,65939],{"class":683},[637,66280,66281,66283,66285,66287,66289,66291],{"class":639,"line":2657},[637,66282,65925],{"class":683},[637,66284,1146],{"class":642},[637,66286,3708],{"class":683},[637,66288,1146],{"class":642},[637,66290,65418],{"class":2457},[637,66292,6556],{"class":646},[637,66294,66295,66297],{"class":639,"line":2677},[637,66296,2451],{"class":642},[637,66298,2471],{"class":683},[504,66300,14044],{"id":17555},[2236,66302,66303],{},[2239,66304,66305,66308,66309,66311,66312,66314,66315,66318],{},[618,66306,66307],{},"manualUpdate"," (optional): Default is ",[618,66310,971],{},". If set to ",[618,66313,961],{},", disables automatic animation mixer updates. You'll need to call ",[618,66316,66317],{},"mixer.value.update(delta)"," manually.",[1349,66320,66321],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":66323},[66324,66328],{"id":624,"depth":578,"text":15,"children":66325},[66326,66327],{"id":65721,"depth":708,"text":65722},{"id":65962,"depth":708,"text":65963},{"id":17555,"depth":578,"text":14044},"Composable for managing model animations with AnimationMixer.",{},{"title":487,"description":66329},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":66334,"title":491,"body":66335,"description":66930,"extension":591,"links":592,"meta":66931,"navigation":594,"path":492,"seo":66932,"stem":493,"__hash__":66933},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":501,"value":66336,"toc":66924},[66337,66354,66356,66721,66725,66774,66776,66921],[614,66338,66339,66344,66345,66350,66351,66353],{},[1140,66340,66343],{"href":66341,"rel":66342},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1144],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1140,66346,66349],{"href":66347,"rel":66348},"https://www.khronos.org/gltf",[1144],"GLTF"," format. ",[1692,66352,16945],{}," provides a composable that simplifies this process with just a few lines of code.",[504,66355,37120],{"id":37119},[626,66357,66360],{"className":628,"code":66358,"highlights":66359,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { useGLTFExporter } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boxRef = shallowRef()\n\n// the second argument – options – is not required\nconst downloadBox = () => {\n useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })\n}\n\u003C/script>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\" window-size >\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n \u003CTresMesh\n ref=\"boxRef\"\n :position-z=\"30\"\n :scale=\"10\"\n @click=\"downloadBox\"\n >\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n \u003CTresMeshStandardMaterial :color=\"0x00ff00\" />\n \u003C/TresMesh>\n \u003CTresDirectionalLight :position=\"[0, 10, 10]\" />\n \u003C/TresCanvas>\n\u003C/template>\n\n",[708,800],[618,66361,66362,66382,66400,66420,66438,66442,66454,66458,66463,66478,66520,66524,66532,66540,66562,66580,66586,66598,66611,66623,66637,66641,66659,66678,66686,66705,66713],{"__ignoreMap":576},[637,66363,66364,66366,66368,66370,66372,66374,66376,66378,66380],{"class":639,"line":577},[637,66365,643],{"class":642},[637,66367,647],{"class":646},[637,66369,651],{"class":650},[637,66371,654],{"class":650},[637,66373,657],{"class":642},[637,66375,660],{"class":642},[637,66377,664],{"class":663},[637,66379,660],{"class":642},[637,66381,669],{"class":642},[637,66383,66384,66386,66388,66390,66392,66394,66396,66398],{"class":639,"line":578},[637,66385,677],{"class":676},[637,66387,680],{"class":642},[637,66389,715],{"class":683},[637,66391,693],{"class":642},[637,66393,696],{"class":676},[637,66395,699],{"class":642},[637,66397,724],{"class":663},[637,66399,705],{"class":642},[637,66401,66403,66405,66407,66410,66412,66414,66416,66418],{"class":66402,"line":708},[639,673],[637,66404,677],{"class":676},[637,66406,680],{"class":642},[637,66408,66409],{"class":683}," useGLTFExporter",[637,66411,693],{"class":642},[637,66413,696],{"class":676},[637,66415,699],{"class":642},[637,66417,702],{"class":663},[637,66419,705],{"class":642},[637,66421,66422,66424,66426,66428,66430,66432,66434,66436],{"class":639,"line":729},[637,66423,677],{"class":676},[637,66425,680],{"class":642},[637,66427,3521],{"class":683},[637,66429,693],{"class":642},[637,66431,696],{"class":676},[637,66433,699],{"class":642},[637,66435,633],{"class":663},[637,66437,705],{"class":642},[637,66439,66440],{"class":639,"line":739},[637,66441,742],{"emptyLinePlaceholder":594},[637,66443,66444,66446,66448,66450,66452],{"class":639,"line":745},[637,66445,2438],{"class":650},[637,66447,16278],{"class":683},[637,66449,657],{"class":642},[637,66451,3521],{"class":2457},[637,66453,6556],{"class":683},[637,66455,66456],{"class":639,"line":755},[637,66457,742],{"emptyLinePlaceholder":594},[637,66459,66460],{"class":639,"line":778},[637,66461,66462],{"class":1231},"// the second argument – options – is not required\n",[637,66464,66465,66467,66470,66472,66474,66476],{"class":639,"line":790},[637,66466,2438],{"class":650},[637,66468,66469],{"class":683}," downloadBox ",[637,66471,657],{"class":642},[637,66473,7101],{"class":642},[637,66475,3700],{"class":650},[637,66477,1226],{"class":642},[637,66479,66481,66484,66486,66488,66490,66492,66494,66496,66499,66501,66503,66505,66507,66509,66512,66514,66516,66518],{"class":66480,"line":800},[639,673],[637,66482,66483],{"class":2457}," useGLTFExporter",[637,66485,2460],{"class":646},[637,66487,16354],{"class":683},[637,66489,1146],{"class":642},[637,66491,3708],{"class":683},[637,66493,687],{"class":642},[637,66495,680],{"class":642},[637,66497,66498],{"class":646}," fileName",[637,66500,1240],{"class":642},[637,66502,699],{"class":642},[637,66504,3845],{"class":663},[637,66506,2463],{"class":642},[637,66508,687],{"class":642},[637,66510,66511],{"class":646}," binary",[637,66513,1240],{"class":642},[637,66515,4421],{"class":4420},[637,66517,693],{"class":642},[637,66519,2471],{"class":646},[637,66521,66522],{"class":639,"line":805},[637,66523,1347],{"class":642},[637,66525,66526,66528,66530],{"class":639,"line":827},[637,66527,732],{"class":642},[637,66529,647],{"class":646},[637,66531,669],{"class":642},[637,66533,66534,66536,66538],{"class":639,"line":631},[637,66535,643],{"class":642},[637,66537,750],{"class":646},[637,66539,669],{"class":642},[637,66541,66542,66544,66546,66548,66550,66552,66554,66556,66559],{"class":639,"line":850},[637,66543,758],{"class":642},[637,66545,761],{"class":646},[637,66547,764],{"class":650},[637,66549,657],{"class":642},[637,66551,660],{"class":642},[637,66553,11812],{"class":663},[637,66555,660],{"class":642},[637,66557,66558],{"class":650}," window-size",[637,66560,66561],{"class":642}," >\n",[637,66563,66564,66566,66568,66570,66572,66574,66576,66578],{"class":639,"line":861},[637,66565,781],{"class":642},[637,66567,784],{"class":646},[637,66569,1508],{"class":650},[637,66571,657],{"class":642},[637,66573,660],{"class":642},[637,66575,7466],{"class":663},[637,66577,660],{"class":642},[637,66579,787],{"class":642},[637,66581,66582,66584],{"class":639,"line":872},[637,66583,781],{"class":642},[637,66585,5149],{"class":646},[637,66587,66588,66590,66592,66594,66596],{"class":639,"line":882},[637,66589,12384],{"class":650},[637,66591,657],{"class":642},[637,66593,660],{"class":642},[637,66595,16354],{"class":663},[637,66597,3154],{"class":642},[637,66599,66600,66603,66605,66607,66609],{"class":639,"line":632},[637,66601,66602],{"class":650}," :position-z",[637,66604,657],{"class":642},[637,66606,660],{"class":642},[637,66608,28448],{"class":663},[637,66610,3154],{"class":642},[637,66612,66613,66615,66617,66619,66621],{"class":639,"line":902},[637,66614,59216],{"class":650},[637,66616,657],{"class":642},[637,66618,660],{"class":642},[637,66620,37514],{"class":663},[637,66622,3154],{"class":642},[637,66624,66625,66628,66630,66632,66635],{"class":639,"line":912},[637,66626,66627],{"class":650}," @click",[637,66629,657],{"class":642},[637,66631,660],{"class":642},[637,66633,66634],{"class":663},"downloadBox",[637,66636,3154],{"class":642},[637,66638,66639],{"class":639,"line":2648},[637,66640,12412],{"class":642},[637,66642,66643,66645,66647,66649,66651,66653,66655,66657],{"class":639,"line":2657},[637,66644,853],{"class":642},[637,66646,867],{"class":646},[637,66648,1982],{"class":650},[637,66650,657],{"class":642},[637,66652,660],{"class":642},[637,66654,1989],{"class":663},[637,66656,660],{"class":642},[637,66658,787],{"class":642},[637,66660,66661,66663,66665,66667,66669,66671,66674,66676],{"class":639,"line":2677},[637,66662,853],{"class":642},[637,66664,2709],{"class":646},[637,66666,40030],{"class":650},[637,66668,657],{"class":642},[637,66670,660],{"class":642},[637,66672,66673],{"class":663},"0x00ff00",[637,66675,660],{"class":642},[637,66677,787],{"class":642},[637,66679,66680,66682,66684],{"class":639,"line":2686},[637,66681,895],{"class":642},[637,66683,856],{"class":646},[637,66685,669],{"class":642},[637,66687,66688,66690,66692,66694,66696,66698,66701,66703],{"class":639,"line":2695},[637,66689,781],{"class":642},[637,66691,9721],{"class":646},[637,66693,1508],{"class":650},[637,66695,657],{"class":642},[637,66697,660],{"class":642},[637,66699,66700],{"class":663},"[0, 10, 10]",[637,66702,660],{"class":642},[637,66704,787],{"class":642},[637,66706,66707,66709,66711],{"class":639,"line":2704},[637,66708,905],{"class":642},[637,66710,761],{"class":646},[637,66712,669],{"class":642},[637,66714,66715,66717,66719],{"class":639,"line":2726},[637,66716,732],{"class":642},[637,66718,750],{"class":646},[637,66720,669],{"class":642},[504,66722,66724],{"id":66723},"arguments","Arguments",[927,66726,66727,66739],{},[930,66728,66729],{},[933,66730,66731,66733,66735,66737],{},[936,66732,8110],{"align":997},[936,66734,5990],{},[936,66736,944],{},[936,66738,941],{},[946,66740,66741,66757],{},[933,66742,66743,66748,66752,66754],{},[951,66744,66745],{"align":997},[1692,66746,66747],{},"Selector",[951,66749,66750],{},[618,66751,7643],{},[951,66753,18605],{},[951,66755,66756],{},"The object to download. Could be an array of objects",[933,66758,66759,66763,66767,66771],{},[951,66760,66761],{"align":997},[1692,66762,14044],{},[951,66764,66765],{},[618,66766,14044],{},[951,66768,66769],{},[618,66770,1167],{},[951,66772,66773],{},"Description below",[4074,66775,14044],{"id":17555},[927,66777,66778,66790],{},[930,66779,66780],{},[933,66781,66782,66784,66786,66788],{},[936,66783,8110],{"align":997},[936,66785,5990],{"align":997},[936,66787,944],{"align":997},[936,66789,941],{"align":997},[946,66791,66792,66811,66829,66847,66865,66884,66902],{},[933,66793,66794,66799,66804,66808],{},[951,66795,66796],{"align":997},[1692,66797,66798],{},"trs",[951,66800,66801],{"align":997},[618,66802,66803],{},"bool",[951,66805,66806],{"align":997},[618,66807,971],{},[951,66809,66810],{"align":997},"Export position, rotation and scale instead of matrix per node",[933,66812,66813,66818,66822,66826],{},[951,66814,66815],{"align":997},[1692,66816,66817],{},"onlyVisible",[951,66819,66820],{"align":997},[618,66821,66803],{},[951,66823,66824],{"align":997},[618,66825,961],{},[951,66827,66828],{"align":997},"Export only visible objects",[933,66830,66831,66836,66840,66844],{},[951,66832,66833],{"align":997},[1692,66834,66835],{},"binary",[951,66837,66838],{"align":997},[618,66839,66803],{},[951,66841,66842],{"align":997},[618,66843,971],{},[951,66845,66846],{"align":997},"Export in binary (.glb) format, returning an ArrayBuffer",[933,66848,66849,66854,66858,66862],{},[951,66850,66851],{"align":997},[1692,66852,66853],{},"maxTextureSize",[951,66855,66856],{"align":997},[618,66857,5375],{},[951,66859,66860],{"align":997},[618,66861,13535],{},[951,66863,66864],{"align":997},"Restricts the image maximum size (both width and height) to the given value",[933,66866,66867,66872,66877,66881],{},[951,66868,66869],{"align":997},[1692,66870,66871],{},"animations",[951,66873,66874],{"align":997},[618,66875,66876],{},"Array\u003CAnimationClip>",[951,66878,66879],{"align":997},[618,66880,1167],{},[951,66882,66883],{"align":997},"List of animations to be included in the export",[933,66885,66886,66891,66895,66899],{},[951,66887,66888],{"align":997},[1692,66889,66890],{},"includeCustomExtensions",[951,66892,66893],{"align":997},[618,66894,66803],{},[951,66896,66897],{"align":997},[618,66898,971],{},[951,66900,66901],{"align":997},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[933,66903,66904,66909,66913,66918],{},[951,66905,66906],{"align":997},[1692,66907,66908],{},"fileName",[951,66910,66911],{"align":997},[618,66912,3595],{},[951,66914,66915],{"align":997},[618,66916,66917],{},"Object name",[951,66919,66920],{"align":997},"Name of the generated file",[1349,66922,66923],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":66925},[66926,66927],{"id":37119,"depth":578,"text":37120},{"id":66723,"depth":578,"text":66724,"children":66928},[66929],{"id":17555,"depth":708,"text":14044},"Export 3D objects to GLTF format.",{},{"title":491,"description":66930},"ls7xbos-wdqomwboeVd0l1d29JncmAz9XxdqK17moKs",{"id":66935,"title":495,"body":66936,"description":67224,"extension":591,"links":592,"meta":67225,"navigation":594,"path":496,"seo":67226,"stem":497,"__hash__":67227},"docs/2.api/miscellaneous/use-intersect.md",{"type":501,"value":66937,"toc":67219},[66938,66955,66957,66973,67116,67118,67146,67150,67217],[614,66939,66940,66942,66943,56296,66946,66948,66949,66954],{},[618,66941,495],{}," is a function that returns ",[618,66944,66945],{},"intersect",[618,66947,17489],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1140,66950,66953],{"href":66951,"rel":66952},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1144],"THREE.Object3D.onBeforeRender"," so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.",[504,66956,15],{"id":624},[3222,66958,66959],{},[614,66960,66961,66963,66964,66966,66967,66969,66970,1146],{},[618,66962,495],{}," requires a ",[618,66965,761],{}," context, so it is only available in ",[618,66968,761],{}," descendant components' ",[618,66971,66972],{},"\u003Cscript setup>",[626,66974,66977],{"className":628,"code":66975,"highlights":66976,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Torus, useIntersect } from '@tresjs/cientos'\n\nconst { ref, intersect, off } = useIntersect()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTorus ref=\"ref\">\n \u003CTresMeshNormalMaterial />\n \u003C/Torus>\n\u003C/template>\n",[578,729],[618,66978,66979,66999,67024,67028,67054,67062,67066,67074,67092,67100,67108],{"__ignoreMap":576},[637,66980,66981,66983,66985,66987,66989,66991,66993,66995,66997],{"class":639,"line":577},[637,66982,643],{"class":642},[637,66984,647],{"class":646},[637,66986,651],{"class":650},[637,66988,654],{"class":650},[637,66990,657],{"class":642},[637,66992,660],{"class":642},[637,66994,664],{"class":663},[637,66996,660],{"class":642},[637,66998,669],{"class":642},[637,67000,67002,67004,67006,67009,67011,67014,67016,67018,67020,67022],{"class":67001,"line":578},[639,673],[637,67003,677],{"class":676},[637,67005,680],{"class":642},[637,67007,67008],{"class":683}," Torus",[637,67010,687],{"class":642},[637,67012,67013],{"class":683}," useIntersect",[637,67015,693],{"class":642},[637,67017,696],{"class":676},[637,67019,699],{"class":642},[637,67021,702],{"class":663},[637,67023,705],{"class":642},[637,67025,67026],{"class":639,"line":708},[637,67027,742],{"emptyLinePlaceholder":594},[637,67029,67031,67033,67035,67037,67039,67042,67044,67046,67048,67050,67052],{"class":67030,"line":729},[639,673],[637,67032,2438],{"class":650},[637,67034,680],{"class":642},[637,67036,3895],{"class":683},[637,67038,687],{"class":642},[637,67040,67041],{"class":683}," intersect",[637,67043,687],{"class":642},[637,67045,6842],{"class":683},[637,67047,2451],{"class":642},[637,67049,2454],{"class":642},[637,67051,67013],{"class":2457},[637,67053,6556],{"class":683},[637,67055,67056,67058,67060],{"class":639,"line":739},[637,67057,732],{"class":642},[637,67059,647],{"class":646},[637,67061,669],{"class":642},[637,67063,67064],{"class":639,"line":745},[637,67065,742],{"emptyLinePlaceholder":594},[637,67067,67068,67070,67072],{"class":639,"line":755},[637,67069,643],{"class":642},[637,67071,750],{"class":646},[637,67073,669],{"class":642},[637,67075,67076,67078,67080,67082,67084,67086,67088,67090],{"class":639,"line":778},[637,67077,758],{"class":642},[637,67079,297],{"class":646},[637,67081,3895],{"class":650},[637,67083,657],{"class":642},[637,67085,660],{"class":642},[637,67087,5915],{"class":663},[637,67089,660],{"class":642},[637,67091,669],{"class":642},[637,67093,67094,67096,67098],{"class":639,"line":790},[637,67095,781],{"class":642},[637,67097,877],{"class":646},[637,67099,787],{"class":642},[637,67101,67102,67104,67106],{"class":639,"line":800},[637,67103,905],{"class":642},[637,67105,297],{"class":646},[637,67107,669],{"class":642},[637,67109,67110,67112,67114],{"class":639,"line":805},[637,67111,732],{"class":642},[637,67113,750],{"class":646},[637,67115,669],{"class":642},[504,67117,66724],{"id":66723},[927,67119,67120,67130],{},[930,67121,67122],{},[933,67123,67124,67126,67128],{},[936,67125,8110],{"align":997},[936,67127,941],{},[936,67129,5990],{},[946,67131,67132],{},[933,67133,67134,67138,67141],{},[951,67135,67136],{"align":997},[1692,67137,14321],{},[951,67139,67140],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[951,67142,67143],{},[618,67144,67145],{},"(isIntersected: boolean) => void",[504,67147,67149],{"id":67148},"return","Return",[927,67151,67152,67162],{},[930,67153,67154],{},[933,67155,67156,67158,67160],{},[936,67157,8110],{"align":997},[936,67159,941],{},[936,67161,5990],{},[946,67163,67164,67182,67197],{},[933,67165,67166,67170,67177],{},[951,67167,67168],{"align":997},[1692,67169,5915],{},[951,67171,67172,67173,67176],{},"Vue ",[618,67174,67175],{},"ShallowRef"," to pass to the object to be observed.",[951,67178,67179],{},[618,67180,67181],{},"ShallowRef\u003CObject3D>",[933,67183,67184,67189,67192],{},[951,67185,67186],{"align":997},[1692,67187,67188],{},"intersects",[951,67190,67191],{},"Updates when the observed object's intersect status changes.",[951,67193,67194],{},[618,67195,67196],{},"ShallowRef\u003Cboolean>",[933,67198,67199,67204,67213],{},[951,67200,67201],{"align":997},[1692,67202,67203],{},"off",[951,67205,67206,67207,67209,67210,67212],{},"Calling this function stops ",[618,67208,495],{}," until ",[618,67211,5915],{}," changes.",[951,67214,67215],{},[618,67216,6042],{},[1349,67218,26386],{},{"title":576,"searchDepth":577,"depth":578,"links":67220},[67221,67222,67223],{"id":624,"depth":578,"text":15},{"id":66723,"depth":578,"text":66724},{"id":67148,"depth":578,"text":67149},"Detect when objects enter or leave the screen.",{},{"title":495,"description":67224},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1789116506411]