[{"data":1,"prerenderedAt":4571},["ShallowReactive",2],{"navigation":3,"/api/miscellaneous":478,"/api/miscellaneous-surround":503,"misc-list":508},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"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},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,194,288,314,348,398,444],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186,190],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":187,"path":188,"stem":189},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":191,"path":192,"stem":193},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":195,"path":196,"stem":197,"children":198},"Shapes","/api/shapes","2.api/5.shapes/index",[199,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284],{"title":195,"path":196,"stem":197},{"title":201,"path":202,"stem":203},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":205,"path":206,"stem":207},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":209,"path":210,"stem":211},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":213,"path":214,"stem":215},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":217,"path":218,"stem":219},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":221,"path":222,"stem":223},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":225,"path":226,"stem":227},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":229,"path":230,"stem":231},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":233,"path":234,"stem":235},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":237,"path":238,"stem":239},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":241,"path":242,"stem":243},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":245,"path":246,"stem":247},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":249,"path":250,"stem":251},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":253,"path":254,"stem":255},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":257,"path":258,"stem":259},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":261,"path":262,"stem":263},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":265,"path":266,"stem":267},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":269,"path":270,"stem":271},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":273,"path":274,"stem":275},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":277,"path":278,"stem":279},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":281,"path":282,"stem":283},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":285,"path":286,"stem":287},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":289,"path":290,"stem":291,"children":292},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[293,294,298,302,306,310],{"title":289,"path":290,"stem":291},{"title":295,"path":296,"stem":297},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":299,"path":300,"stem":301},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":303,"path":304,"stem":305},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":307,"path":308,"stem":309},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":311,"path":312,"stem":313},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":315,"path":316,"stem":317,"children":318},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[319,320,324,328,332,336,340,344],{"title":315,"path":316,"stem":317},{"title":321,"path":322,"stem":323},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":325,"path":326,"stem":327},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":329,"path":330,"stem":331},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":333,"path":334,"stem":335},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":337,"path":338,"stem":339},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":341,"path":342,"stem":343},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":345,"path":346,"stem":347},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":349,"path":350,"stem":351,"children":352},"Staging","/api/staging","2.api/8.staging/index",[353,354,358,362,366,370,374,378,382,386,390,394],{"title":349,"path":350,"stem":351},{"title":355,"path":356,"stem":357},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":359,"path":360,"stem":361},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":363,"path":364,"stem":365},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":367,"path":368,"stem":369},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":371,"path":372,"stem":373},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":375,"path":376,"stem":377},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":379,"path":380,"stem":381},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":383,"path":384,"stem":385},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":387,"path":388,"stem":389},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":391,"path":392,"stem":393},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":395,"path":396,"stem":397},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":399,"path":400,"stem":401,"children":402},"Objects","/api/objects","2.api/9.objects/index",[403,404,408,412,416,420,424,428,432,436,440],{"title":399,"path":400,"stem":401},{"title":405,"path":406,"stem":407},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":409,"path":410,"stem":411},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":413,"path":414,"stem":415},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":417,"path":418,"stem":419},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":421,"path":422,"stem":423},"HTML","/api/objects/html","2.api/9.objects/html",{"title":425,"path":426,"stem":427},"Image","/api/objects/image","2.api/9.objects/image",{"title":429,"path":430,"stem":431},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":433,"path":434,"stem":435},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":437,"path":438,"stem":439},"Text","/api/objects/text","2.api/9.objects/text",{"title":441,"path":442,"stem":443},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":445,"path":446,"stem":447,"children":448},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[449,450,454,458,462,466,470,474],{"title":445,"path":446,"stem":447},{"title":451,"path":452,"stem":453},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":455,"path":456,"stem":457},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":459,"path":460,"stem":461},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":463,"path":464,"stem":465},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":467,"path":468,"stem":469},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":471,"path":472,"stem":473},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":475,"path":476,"stem":477},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":479,"title":445,"body":480,"description":496,"extension":497,"links":498,"meta":499,"navigation":500,"path":446,"seo":501,"stem":447,"__hash__":502},"docs/2.api/miscellaneous/index.md",{"type":481,"value":482,"toc":491},"minimark",[483,487],[484,485,486],"p",{},"Utility components and composables for audio, animations, intersections, and more.",[488,489],"api-list",{"list-name":490},"misc-list",{"title":492,"searchDepth":493,"depth":494,"links":495},"",1,2,[],"Various utility components and composables","md",null,{},true,{"title":445,"description":496},"4eMaArcOfuKgECd4U-MWl3y1M65wxATYDIXn2bAcd9A",[504,506],{"title":441,"path":442,"stem":443,"description":505,"children":-1},"Render text in 3D using TextGeometry.",{"title":451,"path":452,"stem":453,"description":507,"children":-1},"Calculate boundary box and center camera accordingly.",[509,1182,1492,1882,2991,3648,4270],{"id":510,"title":451,"body":511,"description":507,"extension":497,"links":498,"meta":1179,"navigation":500,"path":452,"seo":1180,"stem":453,"__hash__":1181},"docs/2.api/miscellaneous/bounds.md",{"type":481,"value":512,"toc":1172},[513,519,527,560,564,982,986,1135,1138,1155,1160,1168],[514,515,516],"scene-wrapper",{},[517,518],"miscellaneous-bounds",{},[484,520,521,522,526],{},"Calculates a boundary box and centers the camera accordingly. Its ",[523,524,525],"code",{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[528,529,530,533],"prose-note",{},[484,531,532],{},"If you are using other camera controls, be sure to make them the 'default'.",[534,535,539],"pre",{"className":536,"code":537,"language":538,"meta":492,"style":492},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003COrbitControls make-default />\n","vue",[523,540,541],{"__ignoreMap":492},[542,543,545,549,553,557],"span",{"class":544,"line":493},"line",[542,546,548],{"class":547},"sMK4o","\u003C",[542,550,552],{"class":551},"swJcz","OrbitControls",[542,554,556],{"class":555},"spNyl"," make-default",[542,558,559],{"class":547}," />\n",[561,562,15],"h2",{"id":563},"usage",[534,565,576],{"className":536,"code":566,"highlights":567,"language":538,"meta":492,"style":492},"\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",[568,569,570,571,572,573,574,575],3,6,7,9,10,11,18,23,[523,577,578,606,634,662,682,688,705,719,724,739,774,780,790,795,805,816,839,850,889,922,933,943,953,963,973],{"__ignoreMap":492},[542,579,580,582,585,588,591,594,597,601,603],{"class":544,"line":493},[542,581,548],{"class":547},[542,583,584],{"class":551},"script",[542,586,587],{"class":555}," setup",[542,589,590],{"class":555}," lang",[542,592,593],{"class":547},"=",[542,595,596],{"class":547},"\"",[542,598,600],{"class":599},"sfazB","ts",[542,602,596],{"class":547},[542,604,605],{"class":547},">\n",[542,607,608,612,615,619,622,625,628,631],{"class":544,"line":494},[542,609,611],{"class":610},"s7zQu","import",[542,613,614],{"class":547}," {",[542,616,618],{"class":617},"sTEyZ"," TresCanvas",[542,620,621],{"class":547}," }",[542,623,624],{"class":610}," from",[542,626,627],{"class":547}," '",[542,629,630],{"class":599},"@tresjs/core",[542,632,633],{"class":547},"'\n",[542,635,638,640,642,645,648,651,653,655,657,660],{"class":636,"line":568},[544,637],"highlight",[542,639,611],{"class":610},[542,641,614],{"class":547},[542,643,644],{"class":617}," Bounds",[542,646,647],{"class":547},",",[542,649,650],{"class":617}," OrbitControls",[542,652,621],{"class":547},[542,654,624],{"class":610},[542,656,627],{"class":547},[542,658,659],{"class":599},"@tresjs/cientos",[542,661,633],{"class":547},[542,663,665,667,669,672,674,676,678,680],{"class":544,"line":664},4,[542,666,611],{"class":610},[542,668,614],{"class":547},[542,670,671],{"class":617}," shallowRef",[542,673,621],{"class":547},[542,675,624],{"class":610},[542,677,627],{"class":547},[542,679,538],{"class":599},[542,681,633],{"class":547},[542,683,685],{"class":544,"line":684},5,[542,686,687],{"emptyLinePlaceholder":500},"\n",[542,689,691,694,697,699,702],{"class":690,"line":569},[544,637],[542,692,693],{"class":555},"const",[542,695,696],{"class":617}," boundsRef ",[542,698,593],{"class":547},[542,700,671],{"class":701},"s2Zo4",[542,703,704],{"class":617},"()\n",[542,706,708,710,713,715,717],{"class":707,"line":570},[544,637],[542,709,693],{"class":555},[542,711,712],{"class":617}," objectRef ",[542,714,593],{"class":547},[542,716,671],{"class":701},[542,718,704],{"class":617},[542,720,722],{"class":544,"line":721},8,[542,723,687],{"emptyLinePlaceholder":500},[542,725,727,730,733,736],{"class":726,"line":571},[544,637],[542,728,729],{"class":555},"function",[542,731,732],{"class":701}," focusObject",[542,734,735],{"class":547},"()",[542,737,738],{"class":547}," {\n",[542,740,742,745,748,751,754,757,759,761,764,767,769,771],{"class":741,"line":572},[544,637],[542,743,744],{"class":617},"  boundsRef",[542,746,747],{"class":547},".",[542,749,750],{"class":617},"value",[542,752,753],{"class":547},"?.",[542,755,756],{"class":617},"instance",[542,758,747],{"class":547},[542,760,525],{"class":701},[542,762,763],{"class":551},"(",[542,765,766],{"class":617},"objectRef",[542,768,747],{"class":547},[542,770,750],{"class":617},[542,772,773],{"class":551},")\n",[542,775,777],{"class":776,"line":573},[544,637],[542,778,779],{"class":547},"}\n",[542,781,783,786,788],{"class":544,"line":782},12,[542,784,785],{"class":547},"\u003C/",[542,787,584],{"class":551},[542,789,605],{"class":547},[542,791,793],{"class":544,"line":792},13,[542,794,687],{"emptyLinePlaceholder":500},[542,796,798,800,803],{"class":544,"line":797},14,[542,799,548],{"class":547},[542,801,802],{"class":551},"template",[542,804,605],{"class":547},[542,806,808,811,814],{"class":544,"line":807},15,[542,809,810],{"class":547},"  \u003C",[542,812,813],{"class":551},"TresCanvas",[542,815,605],{"class":547},[542,817,819,822,825,828,830,832,835,837],{"class":544,"line":818},16,[542,820,821],{"class":547},"    \u003C",[542,823,824],{"class":551},"TresPerspectiveCamera",[542,826,827],{"class":555}," :position",[542,829,593],{"class":547},[542,831,596],{"class":547},[542,833,834],{"class":599},"[0, 2, 5]",[542,836,596],{"class":547},[542,838,559],{"class":547},[542,840,842,844,846,848],{"class":544,"line":841},17,[542,843,821],{"class":547},[542,845,552],{"class":551},[542,847,556],{"class":555},[542,849,559],{"class":547},[542,851,853,855,857,860,862,864,867,869,872,875,878,880,882,885,887],{"class":852,"line":574},[544,637],[542,854,821],{"class":547},[542,856,451],{"class":551},[542,858,859],{"class":555}," ref",[542,861,593],{"class":547},[542,863,596],{"class":547},[542,865,866],{"class":599},"boundsRef",[542,868,596],{"class":547},[542,870,871],{"class":555}," clip",[542,873,874],{"class":555}," use-mounted",[542,876,877],{"class":555}," :offset",[542,879,593],{"class":547},[542,881,596],{"class":547},[542,883,884],{"class":599},"0.75",[542,886,596],{"class":547},[542,888,605],{"class":547},[542,890,892,895,898,900,902,904,906,908,911,913,915,918,920],{"class":544,"line":891},19,[542,893,894],{"class":547},"      \u003C",[542,896,897],{"class":551},"TresMesh",[542,899,859],{"class":555},[542,901,593],{"class":547},[542,903,596],{"class":547},[542,905,766],{"class":599},[542,907,596],{"class":547},[542,909,910],{"class":555}," @click",[542,912,593],{"class":547},[542,914,596],{"class":547},[542,916,917],{"class":599},"(e) => focusObject()",[542,919,596],{"class":547},[542,921,605],{"class":547},[542,923,925,928,931],{"class":544,"line":924},20,[542,926,927],{"class":547},"        \u003C",[542,929,930],{"class":551},"TresBoxGeometry",[542,932,559],{"class":547},[542,934,936,938,941],{"class":544,"line":935},21,[542,937,927],{"class":547},[542,939,940],{"class":551},"TresMeshNormalMaterial",[542,942,559],{"class":547},[542,944,946,949,951],{"class":544,"line":945},22,[542,947,948],{"class":547},"      \u003C/",[542,950,897],{"class":551},[542,952,605],{"class":547},[542,954,956,959,961],{"class":955,"line":575},[544,637],[542,957,958],{"class":547},"    \u003C/",[542,960,451],{"class":551},[542,962,605],{"class":547},[542,964,966,969,971],{"class":544,"line":965},24,[542,967,968],{"class":547},"  \u003C/",[542,970,813],{"class":551},[542,972,605],{"class":547},[542,974,976,978,980],{"class":544,"line":975},25,[542,977,785],{"class":547},[542,979,802],{"class":551},[542,981,605],{"class":547},[561,983,985],{"id":984},"props","Props",[987,988,989,1006],"table",{},[990,991,992],"thead",{},[993,994,995,1000,1003],"tr",{},[996,997,999],"th",{"align":998},"left","Name",[996,1001,1002],{"align":998},"Description",[996,1004,1005],{},"Default",[1007,1008,1009,1028,1053,1071,1091,1115],"tbody",{},[993,1010,1011,1017,1023],{},[1012,1013,1014],"td",{"align":998},[523,1015,1016],{},"duration",[1012,1018,1019,1020,1022],{"align":998},"Duration of the ",[523,1021,525],{}," animation in seconds",[1012,1024,1025],{},[523,1026,1027],{},"1.0",[993,1029,1030,1035,1048],{},[1012,1031,1032],{"align":998},[523,1033,1034],{},"offset",[1012,1036,1037,1038,1040,1041,1044,1045],{"align":998},"Additional distance from the target when using ",[523,1039,525],{}," with a ",[523,1042,1043],{},"Box3"," or ",[523,1046,1047],{},"Object3D",[1012,1049,1050],{},[523,1051,1052],{},"0.2",[993,1054,1055,1060,1066],{},[1012,1056,1057],{"align":998},[523,1058,1059],{},"useResize",[1012,1061,1062,1063,1065],{"align":998},"Whether to re",[523,1064,525],{}," the last target when the screen is resized",[1012,1067,1068],{},[523,1069,1070],{},"false",[993,1072,1073,1078,1087],{},[1012,1074,1075],{"align":998},[523,1076,1077],{},"useMounted",[1012,1079,1080,1081,1083,1084,1086],{"align":998},"Whether to ",[523,1082,525],{}," the ",[523,1085,451],{}," object when the component is mounts",[1012,1088,1089],{},[523,1090,1070],{},[993,1092,1093,1098,1111],{},[1012,1094,1095],{"align":998},[523,1096,1097],{},"clip",[1012,1099,1100,1101,1104,1105,1108,1109],{"align":998},"Whether to adjust the camera's ",[523,1102,1103],{},"near"," and ",[523,1106,1107],{},"far"," settings when using ",[523,1110,525],{},[1012,1112,1113],{},[523,1114,1070],{},[993,1116,1117,1122,1132],{},[1012,1118,1119],{"align":998},[523,1120,1121],{},"easing",[1012,1123,1124,1125,1128,1129],{"align":998},"Animation's easing function. ",[523,1126,1127],{},"t"," and the returned value should be in the interval ",[523,1130,1131],{},"[0, 1]",[1012,1133,1134],{},"Cubic ease out",[561,1136,525],{"id":1137},"lookat",[484,1139,1140,1143,1144,1146,1147,1149,1150,1044,1152,747],{},[523,1141,1142],{},"\u003CBounds />"," ",[523,1145,525],{}," points the camera at its first argument: an ",[523,1148,1047],{},", ",[523,1151,1043],{},[523,1153,1154],{},"Vector3",[1156,1157,1159],"h3",{"id":1158},"method-signatures","Method Signatures",[534,1161,1166],{"className":1162,"code":1164,"language":1165},[1163],"language-text","/**\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","text",[523,1167,1164],{"__ignoreMap":492},[1169,1170,1171],"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":492,"searchDepth":493,"depth":494,"links":1173},[1174,1175,1176],{"id":563,"depth":494,"text":15},{"id":984,"depth":494,"text":985},{"id":1137,"depth":494,"text":525,"children":1177},[1178],{"id":1158,"depth":568,"text":1159},{},{"title":451,"description":507},"hHyluEwt8akq_4Cca4tkdoVEZlteuogJu8G43SPaETs",{"id":1183,"title":455,"body":1184,"description":1488,"extension":497,"links":498,"meta":1489,"navigation":500,"path":456,"seo":1490,"stem":457,"__hash__":1491},"docs/2.api/miscellaneous/global-audio.md",{"type":481,"value":1185,"toc":1483},[1186,1197,1207,1209,1347,1354,1356,1453,1457,1480],[484,1187,1188,1189,1192,1193,1196],{},"The ",[523,1190,1191],{},"cientos"," package provides a ",[523,1194,1195],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[484,1198,1199,1200],{},"Reference: ",[1201,1202,1206],"a",{"href":1203,"rel":1204},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1205],"nofollow","Audio",[561,1208,15],{"id":563},[534,1210,1213],{"className":536,"code":1211,"highlights":1212,"language":538,"meta":492,"style":492},"\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",[568,571],[523,1214,1215,1225,1243,1263,1271,1275,1283,1291,1310,1331,1339],{"__ignoreMap":492},[542,1216,1217,1219,1221,1223],{"class":544,"line":493},[542,1218,548],{"class":547},[542,1220,584],{"class":551},[542,1222,587],{"class":555},[542,1224,605],{"class":547},[542,1226,1227,1229,1231,1233,1235,1237,1239,1241],{"class":544,"line":494},[542,1228,611],{"class":610},[542,1230,614],{"class":547},[542,1232,618],{"class":617},[542,1234,621],{"class":547},[542,1236,624],{"class":610},[542,1238,627],{"class":547},[542,1240,630],{"class":599},[542,1242,633],{"class":547},[542,1244,1246,1248,1250,1253,1255,1257,1259,1261],{"class":1245,"line":568},[544,637],[542,1247,611],{"class":610},[542,1249,614],{"class":547},[542,1251,1252],{"class":617}," GlobalAudio",[542,1254,621],{"class":547},[542,1256,624],{"class":610},[542,1258,627],{"class":547},[542,1260,659],{"class":599},[542,1262,633],{"class":547},[542,1264,1265,1267,1269],{"class":544,"line":664},[542,1266,785],{"class":547},[542,1268,584],{"class":551},[542,1270,605],{"class":547},[542,1272,1273],{"class":544,"line":684},[542,1274,687],{"emptyLinePlaceholder":500},[542,1276,1277,1279,1281],{"class":544,"line":569},[542,1278,548],{"class":547},[542,1280,802],{"class":551},[542,1282,605],{"class":547},[542,1284,1285,1287,1289],{"class":544,"line":570},[542,1286,810],{"class":547},[542,1288,813],{"class":551},[542,1290,605],{"class":547},[542,1292,1293,1295,1297,1299,1301,1303,1306,1308],{"class":544,"line":721},[542,1294,821],{"class":547},[542,1296,824],{"class":551},[542,1298,827],{"class":555},[542,1300,593],{"class":547},[542,1302,596],{"class":547},[542,1304,1305],{"class":599},"[0, 0, 7.5]",[542,1307,596],{"class":547},[542,1309,559],{"class":547},[542,1311,1313,1315,1317,1320,1322,1324,1327,1329],{"class":1312,"line":571},[544,637],[542,1314,821],{"class":547},[542,1316,455],{"class":551},[542,1318,1319],{"class":555}," :src",[542,1321,593],{"class":547},[542,1323,596],{"class":547},[542,1325,1326],{"class":599},"exampleAudio",[542,1328,596],{"class":547},[542,1330,559],{"class":547},[542,1332,1333,1335,1337],{"class":544,"line":572},[542,1334,968],{"class":547},[542,1336,813],{"class":551},[542,1338,605],{"class":547},[542,1340,1341,1343,1345],{"class":544,"line":573},[542,1342,785],{"class":547},[542,1344,802],{"class":551},[542,1346,605],{"class":547},[484,1348,1349,1350,1353],{},"*The ",[523,1351,1352],{},"src"," prop is required",[561,1355,985],{"id":984},[987,1357,1358,1369],{},[990,1359,1360],{},[993,1361,1362,1365,1367],{},[996,1363,1364],{"align":998},"Prop",[996,1366,1002],{"align":998},[996,1368,1005],{},[1007,1370,1371,1382,1397,1409,1423,1438],{},[993,1372,1373,1377,1380],{},[1012,1374,1375],{"align":998},[523,1376,1352],{},[1012,1378,1379],{"align":998},"Path to your audio file",[1012,1381],{},[993,1383,1384,1389,1392],{},[1012,1385,1386],{"align":998},[523,1387,1388],{},"playTrigger",[1012,1390,1391],{"align":998},"Id of the DOM element that triggers the play/pause state",[1012,1393,1394],{},[523,1395,1396],{},"renderer.domElement",[993,1398,1399,1404,1407],{},[1012,1400,1401],{"align":998},[523,1402,1403],{},"stopTrigger",[1012,1405,1406],{"align":998},"Id of the DOM element that triggers the stop state",[1012,1408],{},[993,1410,1411,1416,1419],{},[1012,1412,1413],{"align":998},[523,1414,1415],{},"loop",[1012,1417,1418],{"align":998},"If the audio must be replayed when ends",[1012,1420,1421],{},[523,1422,1070],{},[993,1424,1425,1430,1433],{},[1012,1426,1427],{"align":998},[523,1428,1429],{},"volume",[1012,1431,1432],{"align":998},"Volume of the audio",[1012,1434,1435],{},[523,1436,1437],{},"0.5",[993,1439,1440,1445,1448],{},[1012,1441,1442],{"align":998},[523,1443,1444],{},"playbackRate",[1012,1446,1447],{"align":998},"PlaybackRate of the audio",[1012,1449,1450],{},[523,1451,1452],{},"1",[561,1454,1456],{"id":1455},"events","Events",[987,1458,1459,1468],{},[990,1460,1461],{},[993,1462,1463,1466],{},[996,1464,1465],{"align":998},"Event",[996,1467,1002],{"align":998},[1007,1469,1470],{},[993,1471,1472,1477],{},[1012,1473,1474],{"align":998},[523,1475,1476],{},"isPlaying",[1012,1478,1479],{"align":998},"Dispatched when the Audio change its state (play, pause or stop)",[1169,1481,1482],{},"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":492,"searchDepth":493,"depth":494,"links":1484},[1485,1486,1487],{"id":563,"depth":494,"text":15},{"id":984,"depth":494,"text":985},{"id":1455,"depth":494,"text":1456},"Add global sound to your scene.",{},{"title":455,"description":1488},"3JUUNGnzyd_UYSpUOzquhfgUDt2njg-AUZ8wXPFhXKM",{"id":1493,"title":459,"body":1494,"description":1878,"extension":497,"links":498,"meta":1879,"navigation":500,"path":460,"seo":1880,"stem":461,"__hash__":1881},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":481,"value":1495,"toc":1874},[1496,1502,1514,1516,1522,1531,1540,1546,1807,1809,1871],[1497,1498,1499],"scene-controls-wrapper",{},[1500,1501],"miscellaneous-mouse-parallax",{},[484,1503,1504,1507,1508,1513],{},[523,1505,1506],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1201,1509,1512],{"href":1510,"rel":1511},"https://en.wikipedia.org/wiki/Parallax",[1205],"parallax"," effect. The camera will update automatically according to the mouse position.",[561,1515,15],{"id":563},[484,1517,1518,1519,1521],{},"You only need to import and add it to your template as ",[523,1520,1506],{},". Additionally, you can pass the following props:",[484,1523,1524,1527,1528,747],{},[523,1525,1526],{},"factor"," 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: ",[523,1529,1530],{},":factor=[x,y]",[484,1532,1533,1536,1537,747],{},[523,1534,1535],{},"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: ",[523,1538,1539],{},":ease=[x,y]",[484,1541,1542,1545],{},[523,1543,1544],{},"local"," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[534,1547,1550],{"className":536,"code":1548,"highlights":1549,"language":538,"meta":492,"style":492},"\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",[494,782],[523,1551,1552,1572,1601,1621,1629,1633,1641,1661,1691,1700,1721,1729,1762,1771,1791,1799],{"__ignoreMap":492},[542,1553,1554,1556,1558,1560,1562,1564,1566,1568,1570],{"class":544,"line":493},[542,1555,548],{"class":547},[542,1557,584],{"class":551},[542,1559,587],{"class":555},[542,1561,590],{"class":555},[542,1563,593],{"class":547},[542,1565,596],{"class":547},[542,1567,600],{"class":599},[542,1569,596],{"class":547},[542,1571,605],{"class":547},[542,1573,1575,1577,1579,1582,1584,1587,1589,1591,1594,1596,1598],{"class":1574,"line":494},[544,637],[542,1576,611],{"class":610},[542,1578,614],{"class":547},[542,1580,1581],{"class":617}," MouseParallax",[542,1583,647],{"class":547},[542,1585,1586],{"class":617}," TorusKnot",[542,1588,621],{"class":547},[542,1590,624],{"class":610},[542,1592,1593],{"class":547}," \"",[542,1595,659],{"class":599},[542,1597,596],{"class":547},[542,1599,1600],{"class":547},";\n",[542,1602,1603,1605,1607,1609,1611,1613,1615,1617,1619],{"class":544,"line":568},[542,1604,611],{"class":610},[542,1606,614],{"class":547},[542,1608,618],{"class":617},[542,1610,621],{"class":547},[542,1612,624],{"class":610},[542,1614,1593],{"class":547},[542,1616,630],{"class":599},[542,1618,596],{"class":547},[542,1620,1600],{"class":547},[542,1622,1623,1625,1627],{"class":544,"line":664},[542,1624,785],{"class":547},[542,1626,584],{"class":551},[542,1628,605],{"class":547},[542,1630,1631],{"class":544,"line":684},[542,1632,687],{"emptyLinePlaceholder":500},[542,1634,1635,1637,1639],{"class":544,"line":569},[542,1636,548],{"class":547},[542,1638,802],{"class":551},[542,1640,605],{"class":547},[542,1642,1643,1645,1647,1650,1652,1654,1657,1659],{"class":544,"line":570},[542,1644,810],{"class":547},[542,1646,813],{"class":551},[542,1648,1649],{"class":555}," clear-color",[542,1651,593],{"class":547},[542,1653,596],{"class":547},[542,1655,1656],{"class":599},"#82DBC5",[542,1658,596],{"class":547},[542,1660,605],{"class":547},[542,1662,1663,1665,1667,1669,1671,1673,1675,1677,1680,1682,1684,1687,1689],{"class":544,"line":721},[542,1664,821],{"class":547},[542,1666,824],{"class":551},[542,1668,827],{"class":555},[542,1670,593],{"class":547},[542,1672,596],{"class":547},[542,1674,1305],{"class":599},[542,1676,596],{"class":547},[542,1678,1679],{"class":555}," :fov",[542,1681,593],{"class":547},[542,1683,596],{"class":547},[542,1685,1686],{"class":599},"75",[542,1688,596],{"class":547},[542,1690,559],{"class":547},[542,1692,1693,1695,1698],{"class":544,"line":571},[542,1694,821],{"class":547},[542,1696,1697],{"class":551},"TorusKnot",[542,1699,605],{"class":547},[542,1701,1702,1704,1707,1710,1712,1714,1717,1719],{"class":544,"line":572},[542,1703,894],{"class":547},[542,1705,1706],{"class":551},"TresMeshToonMaterial",[542,1708,1709],{"class":555}," color",[542,1711,593],{"class":547},[542,1713,596],{"class":547},[542,1715,1716],{"class":599},"orange",[542,1718,596],{"class":547},[542,1720,559],{"class":547},[542,1722,1723,1725,1727],{"class":544,"line":573},[542,1724,958],{"class":547},[542,1726,1697],{"class":551},[542,1728,605],{"class":547},[542,1730,1732,1734,1736,1739,1741,1743,1746,1748,1751,1753,1755,1758,1760],{"class":1731,"line":782},[544,637],[542,1733,821],{"class":547},[542,1735,459],{"class":551},[542,1737,1738],{"class":555}," :factor",[542,1740,593],{"class":547},[542,1742,596],{"class":547},[542,1744,1745],{"class":599},"5",[542,1747,596],{"class":547},[542,1749,1750],{"class":555}," :ease",[542,1752,593],{"class":547},[542,1754,596],{"class":547},[542,1756,1757],{"class":599},"[3, 0.1]",[542,1759,596],{"class":547},[542,1761,559],{"class":547},[542,1763,1764,1766,1769],{"class":544,"line":792},[542,1765,821],{"class":547},[542,1767,1768],{"class":551},"TresAmbientLight",[542,1770,559],{"class":547},[542,1772,1773,1775,1778,1780,1782,1784,1787,1789],{"class":544,"line":797},[542,1774,821],{"class":547},[542,1776,1777],{"class":551},"TresDirectionalLight",[542,1779,827],{"class":555},[542,1781,593],{"class":547},[542,1783,596],{"class":547},[542,1785,1786],{"class":599},"[0, 2, 4]",[542,1788,596],{"class":547},[542,1790,559],{"class":547},[542,1792,1793,1795,1797],{"class":544,"line":807},[542,1794,968],{"class":547},[542,1796,813],{"class":551},[542,1798,605],{"class":547},[542,1800,1801,1803,1805],{"class":544,"line":818},[542,1802,785],{"class":547},[542,1804,802],{"class":551},[542,1806,605],{"class":547},[561,1808,985],{"id":984},[987,1810,1811,1821],{},[990,1812,1813],{},[993,1814,1815,1817,1819],{},[996,1816,1364],{"align":998},[996,1818,1002],{"align":998},[996,1820,1005],{},[1007,1822,1823,1836,1848,1860],{},[993,1824,1825,1831,1834],{},[1012,1826,1827],{"align":998},[1828,1829,1830],"strong",{},"disabled",[1012,1832,1833],{"align":998},"Enable or disable the effect",[1012,1835,1070],{},[993,1837,1838,1842,1845],{},[1012,1839,1840],{"align":998},[1828,1841,1526],{},[1012,1843,1844],{"align":998},"Increase the range of the parallax",[1012,1846,1847],{},"2.5",[993,1849,1850,1854,1857],{},[1012,1851,1852],{"align":998},[1828,1853,1535],{},[1012,1855,1856],{"align":998},"Increase the camera movement speed",[1012,1858,1859],{},"0.1",[993,1861,1862,1866,1869],{},[1012,1863,1864],{"align":998},[1828,1865,1544],{},[1012,1867,1868],{"align":998},"Whether the mouse coordinates are calculated from the element or the window",[1012,1870,1070],{},[1169,1872,1873],{},"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":492,"searchDepth":493,"depth":494,"links":1875},[1876,1877],{"id":563,"depth":494,"text":15},{"id":984,"depth":494,"text":985},"Create parallax effects based on mouse movement.",{},{"title":459,"description":1878},"DlWi-PCiTKTosw5xB5jxhs3p0vmhFRnKBmSiLiGYpy8",{"id":1883,"title":463,"body":1884,"description":2987,"extension":497,"links":498,"meta":2988,"navigation":500,"path":464,"seo":2989,"stem":465,"__hash__":2990},"docs/2.api/miscellaneous/positional-audio.md",{"type":481,"value":1885,"toc":2980},[1886,1891,1905,1916,1918,1934,2212,2241,2245,2252,2254,2457,2461,2534,2784,2948,2950,2977],[1497,1887,1888],{},[1889,1890],"miscellaneous-positional-audio",{},[484,1892,1188,1893,1895,1896,1900,1901,1904],{},[523,1894,1191],{}," package provides an abstraction of the ",[1201,1897,463],{"href":1898,"rel":1899},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1205],".\n",[523,1902,1903],{},"\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.",[484,1906,1907,1909,1910,1915],{},[523,1908,1903],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1201,1911,1914],{"href":1912,"rel":1913},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1205],"PositionalAudioHelper"," class.",[561,1917,15],{"id":563},[484,1919,1188,1920,1922,1923,1925,1926,1929,1930,1933],{},[523,1921,1903],{}," 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 ",[523,1924,1903],{}," component and set the ",[523,1927,1928],{},"url",". It must be wrapped around the ",[523,1931,1932],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[534,1935,1938],{"className":536,"code":1936,"highlights":1937,"language":538,"meta":492,"style":492},"\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",[494,841,574,891],[523,1939,1940,1960,1985,2008,2012,2030,2034,2048,2064,2071,2079,2083,2091,2099,2119,2127,2136,2144,2160,2175,2180,2188,2196,2204],{"__ignoreMap":492},[542,1941,1942,1944,1946,1948,1950,1952,1954,1956,1958],{"class":544,"line":493},[542,1943,548],{"class":547},[542,1945,584],{"class":551},[542,1947,587],{"class":555},[542,1949,590],{"class":555},[542,1951,593],{"class":547},[542,1953,596],{"class":547},[542,1955,600],{"class":599},[542,1957,596],{"class":547},[542,1959,605],{"class":547},[542,1961,1963,1965,1967,1970,1972,1975,1977,1979,1981,1983],{"class":1962,"line":494},[544,637],[542,1964,611],{"class":610},[542,1966,614],{"class":547},[542,1968,1969],{"class":617}," Box",[542,1971,647],{"class":547},[542,1973,1974],{"class":617}," PositionalAudio",[542,1976,621],{"class":547},[542,1978,624],{"class":610},[542,1980,627],{"class":547},[542,1982,659],{"class":599},[542,1984,633],{"class":547},[542,1986,1987,1989,1991,1994,1996,1998,2000,2002,2004,2006],{"class":544,"line":568},[542,1988,611],{"class":610},[542,1990,614],{"class":547},[542,1992,1993],{"class":617}," onUnmounted",[542,1995,647],{"class":547},[542,1997,671],{"class":617},[542,1999,621],{"class":547},[542,2001,624],{"class":610},[542,2003,627],{"class":547},[542,2005,538],{"class":599},[542,2007,633],{"class":547},[542,2009,2010],{"class":544,"line":664},[542,2011,687],{"emptyLinePlaceholder":500},[542,2013,2014,2016,2019,2021,2023,2025,2028],{"class":544,"line":684},[542,2015,693],{"class":555},[542,2017,2018],{"class":617}," positionalAudioRef ",[542,2020,593],{"class":547},[542,2022,671],{"class":701},[542,2024,763],{"class":617},[542,2026,2027],{"class":547},"null",[542,2029,773],{"class":617},[542,2031,2032],{"class":544,"line":569},[542,2033,687],{"emptyLinePlaceholder":500},[542,2035,2036,2039,2041,2043,2046],{"class":544,"line":570},[542,2037,2038],{"class":701},"onUnmounted",[542,2040,763],{"class":617},[542,2042,735],{"class":547},[542,2044,2045],{"class":555}," =>",[542,2047,738],{"class":547},[542,2049,2050,2053,2055,2057,2059,2062],{"class":544,"line":721},[542,2051,2052],{"class":617},"  positionalAudioRef",[542,2054,753],{"class":547},[542,2056,750],{"class":617},[542,2058,753],{"class":547},[542,2060,2061],{"class":701},"dispose",[542,2063,704],{"class":551},[542,2065,2066,2069],{"class":544,"line":571},[542,2067,2068],{"class":547},"}",[542,2070,773],{"class":617},[542,2072,2073,2075,2077],{"class":544,"line":572},[542,2074,785],{"class":547},[542,2076,584],{"class":551},[542,2078,605],{"class":547},[542,2080,2081],{"class":544,"line":573},[542,2082,687],{"emptyLinePlaceholder":500},[542,2084,2085,2087,2089],{"class":544,"line":782},[542,2086,548],{"class":547},[542,2088,802],{"class":551},[542,2090,605],{"class":547},[542,2092,2093,2095,2097],{"class":544,"line":792},[542,2094,810],{"class":547},[542,2096,813],{"class":551},[542,2098,605],{"class":547},[542,2100,2101,2103,2105,2108,2110,2112,2115,2117],{"class":544,"line":797},[542,2102,821],{"class":547},[542,2104,201],{"class":551},[542,2106,2107],{"class":555}," :args",[542,2109,593],{"class":547},[542,2111,596],{"class":547},[542,2113,2114],{"class":599},"[1, 1, 1]",[542,2116,596],{"class":547},[542,2118,605],{"class":547},[542,2120,2121,2123,2125],{"class":544,"line":807},[542,2122,894],{"class":547},[542,2124,940],{"class":551},[542,2126,559],{"class":547},[542,2128,2129,2131,2134],{"class":544,"line":818},[542,2130,894],{"class":547},[542,2132,2133],{"class":551},"Suspense",[542,2135,605],{"class":547},[542,2137,2139,2141],{"class":2138,"line":841},[544,637],[542,2140,927],{"class":547},[542,2142,2143],{"class":551},"PositionalAudio\n",[542,2145,2147,2150,2152,2154,2157],{"class":2146,"line":574},[544,637],[542,2148,2149],{"class":555},"          ref",[542,2151,593],{"class":547},[542,2153,596],{"class":547},[542,2155,2156],{"class":599},"positionalAudioRef",[542,2158,2159],{"class":547},"\"\n",[542,2161,2163,2166,2168,2170,2173],{"class":2162,"line":891},[544,637],[542,2164,2165],{"class":555},"          url",[542,2167,593],{"class":547},[542,2169,596],{"class":547},[542,2171,2172],{"class":599},"your-sound.mp3",[542,2174,2159],{"class":547},[542,2176,2177],{"class":544,"line":924},[542,2178,2179],{"class":547},"        />\n",[542,2181,2182,2184,2186],{"class":544,"line":935},[542,2183,948],{"class":547},[542,2185,2133],{"class":551},[542,2187,605],{"class":547},[542,2189,2190,2192,2194],{"class":544,"line":945},[542,2191,958],{"class":547},[542,2193,201],{"class":551},[542,2195,605],{"class":547},[542,2197,2198,2200,2202],{"class":544,"line":575},[542,2199,968],{"class":547},[542,2201,813],{"class":551},[542,2203,605],{"class":547},[542,2205,2206,2208,2210],{"class":544,"line":965},[542,2207,785],{"class":547},[542,2209,802],{"class":551},[542,2211,605],{"class":547},[2213,2214,2215],"prose-warning",{},[484,2216,2217,2218,2221,2222,2229,2230,2233,2234,1104,2237,2240],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[523,2219,2220],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1201,2223,2226],{"href":2224,"rel":2225},"https://goo.gl/7K7WLu",[1205],[523,2227,2228],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[523,2231,2232],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[523,2235,2236],{},":ready=\"true\"",[523,2238,2239],{},"autoplay=\"true\""," for a direct launch.",[561,2242,2244],{"id":2243},"how-does-it-work","How does it work?",[2246,2247],"img",{"className":2248,"src":2250,"alt":2251},[2249],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[561,2253,985],{"id":984},[987,2255,2256,2266],{},[990,2257,2258],{},[993,2259,2260,2262,2264],{},[996,2261,1364],{"align":998},[996,2263,1002],{"align":998},[996,2265,1005],{},[1007,2267,2268,2286,2310,2332,2365,2383,2398,2415,2436],{},[993,2269,2270,2274,2284],{},[1012,2271,2272],{"align":998},[1828,2273,1928],{},[1012,2275,2276,2279,2280,2283],{"align":998},[523,2277,2278],{},"string"," - ",[1828,2281,2282],{},"required"," — The path or URL to the file.",[1012,2285],{},[993,2287,2288,2293,2306],{},[1012,2289,2290],{"align":998},[1828,2291,2292],{},"helper",[1012,2294,2295,2298,2299,1143,2302],{"align":998},[523,2296,2297],{},"boolean"," — Selects whether helper mode is enabled. ",[2300,2301],"br",{},[2303,2304,2305],"em",{},"(Useful for visualising the angle of sound propagation)",[1012,2307,2308],{},[523,2309,1070],{},[993,2311,2312,2317,2328],{},[1012,2313,2314],{"align":998},[1828,2315,2316],{},"distance",[1012,2318,2319,2322,2323],{"align":998},[523,2320,2321],{},"number"," — The distance at which the volume reduction starts taking effect. ",[2303,2324,2325],{},[1828,2326,2327],{},"A non-negative number.",[1012,2329,2330],{},[523,2331,1452],{},[993,2333,2334,2339,2361],{},[1012,2335,2336],{"align":998},[1828,2337,2338],{},"ready",[1012,2340,2341,2343,2344,2346,2347,2350,2351,2354,2355,2358,2359],{"align":998},[523,2342,2297],{}," — Tells ",[523,2345,1903],{}," that ",[523,2348,2349],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[523,2352,2353],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1201,2356,2224],{"href":2224,"rel":2357},[1205],"). ",[2300,2360],{},[1012,2362,2363],{},[523,2364,1070],{},[993,2366,2367,2371,2379],{},[1012,2368,2369],{"align":998},[1828,2370,2353],{},[1012,2372,2373,2375,2376,2378],{"align":998},[523,2374,2297],{}," — Selects whether the audio is launched automatically. Please refer to the ",[523,2377,2338],{}," prop for a better understanding of how to use autoplay.",[1012,2380,2381],{},[523,2382,1070],{},[993,2384,2385,2389,2394],{},[1012,2386,2387],{"align":998},[1828,2388,1415],{},[1012,2390,2391,2393],{"align":998},[523,2392,2297],{}," — Specifies whether the audio should loop.",[1012,2395,2396],{},[523,2397,1070],{},[993,2399,2400,2405,2410],{},[1012,2401,2402],{"align":998},[1828,2403,2404],{},"innerAngle",[1012,2406,2407,2409],{"align":998},[523,2408,2321],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[1012,2411,2412],{},[523,2413,2414],{},"360",[993,2416,2417,2422,2431],{},[1012,2418,2419],{"align":998},[1828,2420,2421],{},"outerAngle",[1012,2423,2424,2426,2427,2430],{"align":998},[523,2425,2321],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[523,2428,2429],{},"outerGain"," prop.",[1012,2432,2433],{},[523,2434,2435],{},"0",[993,2437,2438,2442,2453],{},[1012,2439,2440],{"align":998},[1828,2441,2429],{},[1012,2443,2444,2446,2447,2449,2450,2452],{"align":998},[523,2445,2321],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[523,2448,2421],{}," prop. When the value is ",[523,2451,2435],{}," no sound can be heard.",[1012,2454,2455],{},[523,2456,2435],{},[561,2458,2460],{"id":2459},"exposed-properties","Exposed properties",[987,2462,2463,2471],{},[990,2464,2465],{},[993,2466,2467,2469],{},[996,2468,1465],{"align":998},[996,2470,1002],{"align":998},[1007,2472,2473,2485,2498,2511,2524],{},[993,2474,2475,2479],{},[1012,2476,2477],{"align":998},[523,2478,756],{},[1012,2480,2481,2482,747],{"align":998},"Instance reference — Inheritance of ",[1201,2483,463],{"href":1898,"rel":2484},[1205],[993,2486,2487,2492],{},[1012,2488,2489],{"align":998},[523,2490,2491],{},"play()",[1012,2493,2494,2495],{"align":998},"Play audio — ",[2303,2496,2497],{},"Cannot be fired if audio is already running.",[993,2499,2500,2505],{},[1012,2501,2502],{"align":998},[523,2503,2504],{},"pause()",[1012,2506,2507,2508],{"align":998},"Pause audio — ",[2303,2509,2510],{},"Cannot be fired if audio is already paused.",[993,2512,2513,2518],{},[1012,2514,2515],{"align":998},[523,2516,2517],{},"stop()",[1012,2519,2520,2521],{"align":998},"Stop audio — ",[2303,2522,2523],{},"Cannot be fired if audio is already stopped.",[993,2525,2526,2531],{},[1012,2527,2528],{"align":998},[523,2529,2530],{},"dispose()",[1012,2532,2533],{"align":998},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[534,2535,2539],{"className":2536,"code":2537,"language":2538,"meta":492,"style":492},"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",[523,2540,2541,2557,2561,2587,2591,2621,2649,2653,2686,2690,2720,2751,2780],{"__ignoreMap":492},[542,2542,2543,2545,2547,2549,2551,2553,2555],{"class":544,"line":493},[542,2544,693],{"class":555},[542,2546,2018],{"class":617},[542,2548,593],{"class":547},[542,2550,671],{"class":701},[542,2552,763],{"class":617},[542,2554,2027],{"class":547},[542,2556,773],{"class":617},[542,2558,2559],{"class":544,"line":494},[542,2560,687],{"emptyLinePlaceholder":500},[542,2562,2563,2566,2568,2571,2574,2576,2578,2580,2583],{"class":544,"line":568},[542,2564,2565],{"class":617},"console",[542,2567,747],{"class":547},[542,2569,2570],{"class":701},"log",[542,2572,2573],{"class":617},"(positionalAudioRef",[542,2575,747],{"class":547},[542,2577,750],{"class":617},[542,2579,747],{"class":547},[542,2581,2582],{"class":617},"instance) ",[542,2584,2586],{"class":2585},"sHwdD","// instance properties\n",[542,2588,2589],{"class":544,"line":664},[542,2590,687],{"emptyLinePlaceholder":500},[542,2592,2593,2595,2598,2600,2603,2607,2610,2614,2617,2619],{"class":544,"line":684},[542,2594,693],{"class":555},[542,2596,2597],{"class":617}," handlerAudio ",[542,2599,593],{"class":547},[542,2601,2602],{"class":547}," (",[542,2604,2606],{"class":2605},"sHdIc","action",[542,2608,2609],{"class":547},":",[542,2611,2613],{"class":2612},"sBMFI"," string",[542,2615,2616],{"class":547},")",[542,2618,2045],{"class":555},[542,2620,738],{"class":547},[542,2622,2623,2626,2628,2631,2633,2635,2637,2640,2643,2646],{"class":544,"line":569},[542,2624,2625],{"class":610},"  if",[542,2627,2602],{"class":551},[542,2629,2630],{"class":547},"!",[542,2632,2156],{"class":617},[542,2634,747],{"class":547},[542,2636,750],{"class":617},[542,2638,2639],{"class":551},") ",[542,2641,2642],{"class":547},"{",[542,2644,2645],{"class":610}," return",[542,2647,2648],{"class":547}," }\n",[542,2650,2651],{"class":544,"line":570},[542,2652,687],{"emptyLinePlaceholder":500},[542,2654,2655,2658,2660,2663,2665,2668,2670,2673,2675,2678,2681,2683],{"class":544,"line":721},[542,2656,2657],{"class":555},"  const",[542,2659,614],{"class":547},[542,2661,2662],{"class":617}," play",[542,2664,647],{"class":547},[542,2666,2667],{"class":617}," pause",[542,2669,647],{"class":547},[542,2671,2672],{"class":617}," stop",[542,2674,621],{"class":547},[542,2676,2677],{"class":547}," =",[542,2679,2680],{"class":617}," positionalAudioRef",[542,2682,747],{"class":547},[542,2684,2685],{"class":617},"value\n",[542,2687,2688],{"class":544,"line":571},[542,2689,687],{"emptyLinePlaceholder":500},[542,2691,2692,2694,2696,2698,2701,2703,2706,2709,2711,2713,2715,2718],{"class":544,"line":572},[542,2693,2625],{"class":610},[542,2695,2602],{"class":551},[542,2697,2606],{"class":617},[542,2699,2700],{"class":547}," ===",[542,2702,627],{"class":547},[542,2704,2705],{"class":599},"play",[542,2707,2708],{"class":547},"'",[542,2710,2639],{"class":551},[542,2712,2642],{"class":547},[542,2714,2662],{"class":701},[542,2716,2717],{"class":551},"() ",[542,2719,779],{"class":547},[542,2721,2722,2725,2728,2730,2732,2734,2736,2739,2741,2743,2745,2747,2749],{"class":544,"line":573},[542,2723,2724],{"class":610},"  else",[542,2726,2727],{"class":610}," if",[542,2729,2602],{"class":551},[542,2731,2606],{"class":617},[542,2733,2700],{"class":547},[542,2735,627],{"class":547},[542,2737,2738],{"class":599},"pause",[542,2740,2708],{"class":547},[542,2742,2639],{"class":551},[542,2744,2642],{"class":547},[542,2746,2667],{"class":701},[542,2748,2717],{"class":551},[542,2750,779],{"class":547},[542,2752,2753,2755,2757,2759,2761,2763,2765,2768,2770,2772,2774,2776,2778],{"class":544,"line":782},[542,2754,2724],{"class":610},[542,2756,2727],{"class":610},[542,2758,2602],{"class":551},[542,2760,2606],{"class":617},[542,2762,2700],{"class":547},[542,2764,627],{"class":547},[542,2766,2767],{"class":599},"stop",[542,2769,2708],{"class":547},[542,2771,2639],{"class":551},[542,2773,2642],{"class":547},[542,2775,2672],{"class":701},[542,2777,2717],{"class":551},[542,2779,779],{"class":547},[542,2781,2782],{"class":544,"line":792},[542,2783,779],{"class":547},[534,2785,2787],{"className":536,"code":2786,"language":538,"meta":492,"style":492},"\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",[523,2788,2789,2797,2826,2853,2880,2884,2892,2900,2908,2916,2924,2932,2940],{"__ignoreMap":492},[542,2790,2791,2793,2795],{"class":544,"line":493},[542,2792,548],{"class":547},[542,2794,802],{"class":551},[542,2796,605],{"class":547},[542,2798,2799,2801,2804,2806,2808,2810,2813,2815,2818,2820,2822,2824],{"class":544,"line":494},[542,2800,810],{"class":547},[542,2802,2803],{"class":551},"button",[542,2805,910],{"class":555},[542,2807,593],{"class":547},[542,2809,596],{"class":547},[542,2811,2812],{"class":599},"handlerAudio('play')",[542,2814,596],{"class":547},[542,2816,2817],{"class":547},">",[542,2819,2705],{"class":617},[542,2821,785],{"class":547},[542,2823,2803],{"class":551},[542,2825,605],{"class":547},[542,2827,2828,2830,2832,2834,2836,2838,2841,2843,2845,2847,2849,2851],{"class":544,"line":568},[542,2829,810],{"class":547},[542,2831,2803],{"class":551},[542,2833,910],{"class":555},[542,2835,593],{"class":547},[542,2837,596],{"class":547},[542,2839,2840],{"class":599},"handlerAudio('pause')",[542,2842,596],{"class":547},[542,2844,2817],{"class":547},[542,2846,2738],{"class":617},[542,2848,785],{"class":547},[542,2850,2803],{"class":551},[542,2852,605],{"class":547},[542,2854,2855,2857,2859,2861,2863,2865,2868,2870,2872,2874,2876,2878],{"class":544,"line":664},[542,2856,810],{"class":547},[542,2858,2803],{"class":551},[542,2860,910],{"class":555},[542,2862,593],{"class":547},[542,2864,596],{"class":547},[542,2866,2867],{"class":599},"handlerAudio('stop')",[542,2869,596],{"class":547},[542,2871,2817],{"class":547},[542,2873,2767],{"class":617},[542,2875,785],{"class":547},[542,2877,2803],{"class":551},[542,2879,605],{"class":547},[542,2881,2882],{"class":544,"line":684},[542,2883,687],{"emptyLinePlaceholder":500},[542,2885,2886,2888,2890],{"class":544,"line":569},[542,2887,810],{"class":547},[542,2889,813],{"class":551},[542,2891,605],{"class":547},[542,2893,2894,2896,2898],{"class":544,"line":570},[542,2895,821],{"class":547},[542,2897,265],{"class":551},[542,2899,605],{"class":547},[542,2901,2902,2904,2906],{"class":544,"line":721},[542,2903,894],{"class":547},[542,2905,2133],{"class":551},[542,2907,605],{"class":547},[542,2909,2910,2912,2914],{"class":544,"line":571},[542,2911,927],{"class":547},[542,2913,463],{"class":551},[542,2915,559],{"class":547},[542,2917,2918,2920,2922],{"class":544,"line":572},[542,2919,948],{"class":547},[542,2921,2133],{"class":551},[542,2923,605],{"class":547},[542,2925,2926,2928,2930],{"class":544,"line":573},[542,2927,958],{"class":547},[542,2929,265],{"class":551},[542,2931,605],{"class":547},[542,2933,2934,2936,2938],{"class":544,"line":782},[542,2935,968],{"class":547},[542,2937,813],{"class":551},[542,2939,605],{"class":547},[542,2941,2942,2944,2946],{"class":544,"line":792},[542,2943,785],{"class":547},[542,2945,802],{"class":551},[542,2947,605],{"class":547},[561,2949,1456],{"id":1455},[987,2951,2952,2960],{},[990,2953,2954],{},[993,2955,2956,2958],{},[996,2957,1465],{"align":998},[996,2959,1002],{"align":998},[1007,2961,2962],{},[993,2963,2964,2969],{},[1012,2965,2966],{"align":998},[523,2967,2968],{},"is-playing",[1012,2970,2971,2972,1143,2974],{"align":998},"Triggered when the audio changes its state (play, pause, or stop) ",[2300,2973],{},[523,2975,2976],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1169,2978,2979],{},"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":492,"searchDepth":493,"depth":494,"links":2981},[2982,2983,2984,2985,2986],{"id":563,"depth":494,"text":15},{"id":2243,"depth":494,"text":2244},{"id":984,"depth":494,"text":985},{"id":2459,"depth":494,"text":2460},{"id":1455,"depth":494,"text":1456},"Spatially positioned audio in 3D space.",{},{"title":463,"description":2987},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",{"id":2992,"title":467,"body":2993,"description":3644,"extension":497,"links":498,"meta":3645,"navigation":500,"path":468,"seo":3646,"stem":469,"__hash__":3647},"docs/2.api/miscellaneous/use-animations.md",{"type":481,"value":2994,"toc":3637},[2995,3009,3011,3015,3025,3260,3264,3271,3609,3613,3634],[484,2996,2997,2999,3000,3003,3004,1915],{},[523,2998,467],{}," is a composable that returns a ",[523,3001,3002],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1201,3005,3008],{"href":3006,"rel":3007},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1205],"AnimationMixer",[561,3010,15],{"id":563},[1156,3012,3014],{"id":3013},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[484,3016,3017,3018,3020,3021,3024],{},"By default, ",[523,3019,467],{}," automatically updates the animation mixer on each frame using the ",[523,3022,3023],{},"useLoop"," composable:",[534,3026,3030],{"className":3027,"code":3028,"highlights":3029,"language":600,"meta":492,"style":492},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","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",[493,570],[523,3031,3032,3057,3061,3087,3091,3127,3155,3179,3183,3196,3200,3221,3240,3254],{"__ignoreMap":492},[542,3033,3035,3037,3039,3042,3044,3047,3049,3051,3053,3055],{"class":3034,"line":493},[544,637],[542,3036,611],{"class":610},[542,3038,614],{"class":547},[542,3040,3041],{"class":617}," useAnimations",[542,3043,647],{"class":547},[542,3045,3046],{"class":617}," useGLTF",[542,3048,621],{"class":547},[542,3050,624],{"class":610},[542,3052,627],{"class":547},[542,3054,659],{"class":599},[542,3056,633],{"class":547},[542,3058,3059],{"class":544,"line":494},[542,3060,687],{"emptyLinePlaceholder":500},[542,3062,3063,3065,3067,3070,3072,3074,3076,3078,3080,3083,3085],{"class":544,"line":568},[542,3064,693],{"class":555},[542,3066,614],{"class":547},[542,3068,3069],{"class":617}," state ",[542,3071,2068],{"class":547},[542,3073,2677],{"class":547},[542,3075,3046],{"class":701},[542,3077,763],{"class":617},[542,3079,2708],{"class":547},[542,3081,3082],{"class":599},"/models/ugly-naked-bunny.gltf",[542,3084,2708],{"class":547},[542,3086,773],{"class":617},[542,3088,3089],{"class":544,"line":664},[542,3090,687],{"emptyLinePlaceholder":500},[542,3092,3093,3095,3098,3100,3103,3105,3107,3109,3112,3114,3116,3118,3121,3124],{"class":544,"line":684},[542,3094,693],{"class":555},[542,3096,3097],{"class":617}," animations ",[542,3099,593],{"class":547},[542,3101,3102],{"class":701}," computed",[542,3104,763],{"class":617},[542,3106,735],{"class":547},[542,3108,2045],{"class":555},[542,3110,3111],{"class":617}," state",[542,3113,747],{"class":547},[542,3115,750],{"class":617},[542,3117,753],{"class":547},[542,3119,3120],{"class":617},"animations ",[542,3122,3123],{"class":547},"||",[542,3125,3126],{"class":617}," [])\n",[542,3128,3129,3131,3134,3136,3138,3140,3142,3144,3146,3148,3150,3152],{"class":544,"line":569},[542,3130,693],{"class":555},[542,3132,3133],{"class":617}," model ",[542,3135,593],{"class":547},[542,3137,3102],{"class":701},[542,3139,763],{"class":617},[542,3141,735],{"class":547},[542,3143,2045],{"class":555},[542,3145,3111],{"class":617},[542,3147,753],{"class":547},[542,3149,750],{"class":617},[542,3151,753],{"class":547},[542,3153,3154],{"class":617},"scene)\n",[542,3156,3158,3160,3162,3165,3167,3169,3171,3174,3176],{"class":3157,"line":570},[544,637],[542,3159,693],{"class":555},[542,3161,614],{"class":547},[542,3163,3164],{"class":617}," actions ",[542,3166,2068],{"class":547},[542,3168,2677],{"class":547},[542,3170,3041],{"class":701},[542,3172,3173],{"class":617},"(animations",[542,3175,647],{"class":547},[542,3177,3178],{"class":617}," model)\n",[542,3180,3181],{"class":544,"line":721},[542,3182,687],{"emptyLinePlaceholder":500},[542,3184,3185,3187,3190,3192,3194],{"class":544,"line":571},[542,3186,693],{"class":555},[542,3188,3189],{"class":617}," currentAction ",[542,3191,593],{"class":547},[542,3193,859],{"class":701},[542,3195,704],{"class":617},[542,3197,3198],{"class":544,"line":572},[542,3199,687],{"emptyLinePlaceholder":500},[542,3201,3202,3205,3208,3210,3212,3215,3217,3219],{"class":544,"line":573},[542,3203,3204],{"class":701},"watch",[542,3206,3207],{"class":617},"(actions",[542,3209,647],{"class":547},[542,3211,2602],{"class":547},[542,3213,3214],{"class":2605},"newActions",[542,3216,2616],{"class":547},[542,3218,2045],{"class":555},[542,3220,738],{"class":547},[542,3222,3223,3226,3228,3230,3232,3235,3237],{"class":544,"line":782},[542,3224,3225],{"class":617},"  currentAction",[542,3227,747],{"class":547},[542,3229,750],{"class":617},[542,3231,2677],{"class":547},[542,3233,3234],{"class":617}," newActions",[542,3236,747],{"class":547},[542,3238,3239],{"class":617},"Greeting\n",[542,3241,3242,3244,3246,3248,3250,3252],{"class":544,"line":792},[542,3243,3225],{"class":617},[542,3245,747],{"class":547},[542,3247,750],{"class":617},[542,3249,747],{"class":547},[542,3251,2705],{"class":701},[542,3253,704],{"class":551},[542,3255,3256,3258],{"class":544,"line":797},[542,3257,2068],{"class":547},[542,3259,773],{"class":617},[1156,3261,3263],{"id":3262},"manual-updates","Manual Updates",[484,3265,3266,3267,3270],{},"To gain finer control over animation mixer updates, enable ",[523,3268,3269],{},"manualUpdate: true"," and manage the update cycle manually.",[534,3272,3275],{"className":3027,"code":3273,"highlights":3274,"language":600,"meta":492,"style":492},"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",[493,721,571,572,807],[523,3276,3277,3300,3319,3323,3347,3351,3381,3407,3439,3454,3461,3465,3470,3487,3507,3529,3535,3539,3551,3555,3573,3589,3603],{"__ignoreMap":492},[542,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298],{"class":3279,"line":493},[544,637],[542,3281,611],{"class":610},[542,3283,614],{"class":547},[542,3285,3041],{"class":617},[542,3287,647],{"class":547},[542,3289,3046],{"class":617},[542,3291,621],{"class":547},[542,3293,624],{"class":610},[542,3295,627],{"class":547},[542,3297,659],{"class":599},[542,3299,633],{"class":547},[542,3301,3302,3304,3306,3309,3311,3313,3315,3317],{"class":544,"line":494},[542,3303,611],{"class":610},[542,3305,614],{"class":547},[542,3307,3308],{"class":617}," useLoop",[542,3310,621],{"class":547},[542,3312,624],{"class":610},[542,3314,627],{"class":547},[542,3316,630],{"class":599},[542,3318,633],{"class":547},[542,3320,3321],{"class":544,"line":568},[542,3322,687],{"emptyLinePlaceholder":500},[542,3324,3325,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345],{"class":544,"line":664},[542,3326,693],{"class":555},[542,3328,614],{"class":547},[542,3330,3069],{"class":617},[542,3332,2068],{"class":547},[542,3334,2677],{"class":547},[542,3336,3046],{"class":701},[542,3338,763],{"class":617},[542,3340,2708],{"class":547},[542,3342,3082],{"class":599},[542,3344,2708],{"class":547},[542,3346,773],{"class":617},[542,3348,3349],{"class":544,"line":684},[542,3350,687],{"emptyLinePlaceholder":500},[542,3352,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375,3377,3379],{"class":544,"line":569},[542,3354,693],{"class":555},[542,3356,3097],{"class":617},[542,3358,593],{"class":547},[542,3360,3102],{"class":701},[542,3362,763],{"class":617},[542,3364,735],{"class":547},[542,3366,2045],{"class":555},[542,3368,3111],{"class":617},[542,3370,747],{"class":547},[542,3372,750],{"class":617},[542,3374,753],{"class":547},[542,3376,3120],{"class":617},[542,3378,3123],{"class":547},[542,3380,3126],{"class":617},[542,3382,3383,3385,3387,3389,3391,3393,3395,3397,3399,3401,3403,3405],{"class":544,"line":570},[542,3384,693],{"class":555},[542,3386,3133],{"class":617},[542,3388,593],{"class":547},[542,3390,3102],{"class":701},[542,3392,763],{"class":617},[542,3394,735],{"class":547},[542,3396,2045],{"class":555},[542,3398,3111],{"class":617},[542,3400,753],{"class":547},[542,3402,750],{"class":617},[542,3404,753],{"class":547},[542,3406,3154],{"class":617},[542,3408,3410,3412,3414,3417,3419,3422,3424,3426,3428,3430,3432,3435,3437],{"class":3409,"line":721},[544,637],[542,3411,693],{"class":555},[542,3413,614],{"class":547},[542,3415,3416],{"class":617}," actions",[542,3418,647],{"class":547},[542,3420,3421],{"class":617}," mixer ",[542,3423,2068],{"class":547},[542,3425,2677],{"class":547},[542,3427,3041],{"class":701},[542,3429,3173],{"class":617},[542,3431,647],{"class":547},[542,3433,3434],{"class":617}," model",[542,3436,647],{"class":547},[542,3438,738],{"class":547},[542,3440,3442,3445,3447,3451],{"class":3441,"line":571},[544,637],[542,3443,3444],{"class":551},"  manualUpdate",[542,3446,2609],{"class":547},[542,3448,3450],{"class":3449},"sfNiH"," true",[542,3452,3453],{"class":547},",\n",[542,3455,3457,3459],{"class":3456,"line":572},[544,637],[542,3458,2068],{"class":547},[542,3460,773],{"class":617},[542,3462,3463],{"class":544,"line":573},[542,3464,687],{"emptyLinePlaceholder":500},[542,3466,3467],{"class":544,"line":782},[542,3468,3469],{"class":2585},"// Handle updates manually\n",[542,3471,3472,3474,3476,3479,3481,3483,3485],{"class":544,"line":792},[542,3473,693],{"class":555},[542,3475,614],{"class":547},[542,3477,3478],{"class":617}," onBeforeRender ",[542,3480,2068],{"class":547},[542,3482,2677],{"class":547},[542,3484,3308],{"class":701},[542,3486,704],{"class":617},[542,3488,3489,3492,3494,3497,3500,3503,3505],{"class":544,"line":797},[542,3490,3491],{"class":701},"onBeforeRender",[542,3493,763],{"class":617},[542,3495,3496],{"class":547},"({",[542,3498,3499],{"class":2605}," delta",[542,3501,3502],{"class":547}," })",[542,3504,2045],{"class":555},[542,3506,738],{"class":547},[542,3508,3510,3513,3515,3517,3519,3522,3524,3527],{"class":3509,"line":807},[544,637],[542,3511,3512],{"class":617},"  mixer",[542,3514,747],{"class":547},[542,3516,750],{"class":617},[542,3518,747],{"class":547},[542,3520,3521],{"class":701},"update",[542,3523,763],{"class":551},[542,3525,3526],{"class":617},"delta",[542,3528,773],{"class":551},[542,3530,3531,3533],{"class":544,"line":818},[542,3532,2068],{"class":547},[542,3534,773],{"class":617},[542,3536,3537],{"class":544,"line":841},[542,3538,687],{"emptyLinePlaceholder":500},[542,3540,3541,3543,3545,3547,3549],{"class":544,"line":574},[542,3542,693],{"class":555},[542,3544,3189],{"class":617},[542,3546,593],{"class":547},[542,3548,859],{"class":701},[542,3550,704],{"class":617},[542,3552,3553],{"class":544,"line":891},[542,3554,687],{"emptyLinePlaceholder":500},[542,3556,3557,3559,3561,3563,3565,3567,3569,3571],{"class":544,"line":924},[542,3558,3204],{"class":701},[542,3560,3207],{"class":617},[542,3562,647],{"class":547},[542,3564,2602],{"class":547},[542,3566,3214],{"class":2605},[542,3568,2616],{"class":547},[542,3570,2045],{"class":555},[542,3572,738],{"class":547},[542,3574,3575,3577,3579,3581,3583,3585,3587],{"class":544,"line":935},[542,3576,3225],{"class":617},[542,3578,747],{"class":547},[542,3580,750],{"class":617},[542,3582,2677],{"class":547},[542,3584,3234],{"class":617},[542,3586,747],{"class":547},[542,3588,3239],{"class":617},[542,3590,3591,3593,3595,3597,3599,3601],{"class":544,"line":945},[542,3592,3225],{"class":617},[542,3594,747],{"class":547},[542,3596,750],{"class":617},[542,3598,747],{"class":547},[542,3600,2705],{"class":701},[542,3602,704],{"class":551},[542,3604,3605,3607],{"class":544,"line":575},[542,3606,2068],{"class":547},[542,3608,773],{"class":617},[561,3610,3612],{"id":3611},"options","Options",[3614,3615,3616],"ul",{},[3617,3618,3619,3622,3623,3625,3626,3629,3630,3633],"li",{},[523,3620,3621],{},"manualUpdate"," (optional): Default is ",[523,3624,1070],{},". If set to ",[523,3627,3628],{},"true",", disables automatic animation mixer updates. You'll need to call ",[523,3631,3632],{},"mixer.value.update(delta)"," manually.",[1169,3635,3636],{},"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":492,"searchDepth":493,"depth":494,"links":3638},[3639,3643],{"id":563,"depth":494,"text":15,"children":3640},[3641,3642],{"id":3013,"depth":568,"text":3014},{"id":3262,"depth":568,"text":3263},{"id":3611,"depth":494,"text":3612},"Composable for managing model animations with AnimationMixer.",{},{"title":467,"description":3644},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":3649,"title":471,"body":3650,"description":4266,"extension":497,"links":498,"meta":4267,"navigation":500,"path":472,"seo":4268,"stem":473,"__hash__":4269},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":481,"value":3651,"toc":4260},[3652,3670,3674,4053,4057,4109,4111,4257],[484,3653,3654,3659,3660,3665,3666,3669],{},[1201,3655,3658],{"href":3656,"rel":3657},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1205],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1201,3661,3664],{"href":3662,"rel":3663},"https://www.khronos.org/gltf",[1205],"GLTF"," format. ",[1828,3667,3668],{},"TresJS"," provides a composable that simplifies this process with just a few lines of code.",[561,3671,3673],{"id":3672},"basic-usage","Basic usage",[534,3675,3678],{"className":536,"code":3676,"highlights":3677,"language":538,"meta":492,"style":492},"\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",[568,572],[523,3679,3680,3700,3718,3738,3756,3760,3773,3777,3782,3798,3842,3846,3854,3862,3884,3902,3909,3922,3936,3950,3964,3969,3987,4008,4016,4035,4044],{"__ignoreMap":492},[542,3681,3682,3684,3686,3688,3690,3692,3694,3696,3698],{"class":544,"line":493},[542,3683,548],{"class":547},[542,3685,584],{"class":551},[542,3687,587],{"class":555},[542,3689,590],{"class":555},[542,3691,593],{"class":547},[542,3693,596],{"class":547},[542,3695,600],{"class":599},[542,3697,596],{"class":547},[542,3699,605],{"class":547},[542,3701,3702,3704,3706,3708,3710,3712,3714,3716],{"class":544,"line":494},[542,3703,611],{"class":610},[542,3705,614],{"class":547},[542,3707,618],{"class":617},[542,3709,621],{"class":547},[542,3711,624],{"class":610},[542,3713,627],{"class":547},[542,3715,630],{"class":599},[542,3717,633],{"class":547},[542,3719,3721,3723,3725,3728,3730,3732,3734,3736],{"class":3720,"line":568},[544,637],[542,3722,611],{"class":610},[542,3724,614],{"class":547},[542,3726,3727],{"class":617}," useGLTFExporter",[542,3729,621],{"class":547},[542,3731,624],{"class":610},[542,3733,627],{"class":547},[542,3735,659],{"class":599},[542,3737,633],{"class":547},[542,3739,3740,3742,3744,3746,3748,3750,3752,3754],{"class":544,"line":664},[542,3741,611],{"class":610},[542,3743,614],{"class":547},[542,3745,671],{"class":617},[542,3747,621],{"class":547},[542,3749,624],{"class":610},[542,3751,627],{"class":547},[542,3753,538],{"class":599},[542,3755,633],{"class":547},[542,3757,3758],{"class":544,"line":684},[542,3759,687],{"emptyLinePlaceholder":500},[542,3761,3762,3764,3767,3769,3771],{"class":544,"line":569},[542,3763,693],{"class":555},[542,3765,3766],{"class":617}," boxRef ",[542,3768,593],{"class":547},[542,3770,671],{"class":701},[542,3772,704],{"class":617},[542,3774,3775],{"class":544,"line":570},[542,3776,687],{"emptyLinePlaceholder":500},[542,3778,3779],{"class":544,"line":721},[542,3780,3781],{"class":2585},"// the second argument – options – is not required\n",[542,3783,3784,3786,3789,3791,3794,3796],{"class":544,"line":571},[542,3785,693],{"class":555},[542,3787,3788],{"class":617}," downloadBox ",[542,3790,593],{"class":547},[542,3792,3793],{"class":547}," ()",[542,3795,2045],{"class":555},[542,3797,738],{"class":547},[542,3799,3801,3804,3806,3809,3811,3813,3815,3817,3820,3822,3824,3827,3829,3831,3834,3836,3838,3840],{"class":3800,"line":572},[544,637],[542,3802,3803],{"class":701},"  useGLTFExporter",[542,3805,763],{"class":551},[542,3807,3808],{"class":617},"boxRef",[542,3810,747],{"class":547},[542,3812,750],{"class":617},[542,3814,647],{"class":547},[542,3816,614],{"class":547},[542,3818,3819],{"class":551}," fileName",[542,3821,2609],{"class":547},[542,3823,627],{"class":547},[542,3825,3826],{"class":599},"cube",[542,3828,2708],{"class":547},[542,3830,647],{"class":547},[542,3832,3833],{"class":551}," binary",[542,3835,2609],{"class":547},[542,3837,3450],{"class":3449},[542,3839,621],{"class":547},[542,3841,773],{"class":551},[542,3843,3844],{"class":544,"line":573},[542,3845,779],{"class":547},[542,3847,3848,3850,3852],{"class":544,"line":782},[542,3849,785],{"class":547},[542,3851,584],{"class":551},[542,3853,605],{"class":547},[542,3855,3856,3858,3860],{"class":544,"line":792},[542,3857,548],{"class":547},[542,3859,802],{"class":551},[542,3861,605],{"class":547},[542,3863,3864,3866,3868,3870,3872,3874,3876,3878,3881],{"class":544,"line":797},[542,3865,810],{"class":547},[542,3867,813],{"class":551},[542,3869,1649],{"class":555},[542,3871,593],{"class":547},[542,3873,596],{"class":547},[542,3875,1656],{"class":599},[542,3877,596],{"class":547},[542,3879,3880],{"class":555}," window-size",[542,3882,3883],{"class":547}," >\n",[542,3885,3886,3888,3890,3892,3894,3896,3898,3900],{"class":544,"line":807},[542,3887,821],{"class":547},[542,3889,824],{"class":551},[542,3891,827],{"class":555},[542,3893,593],{"class":547},[542,3895,596],{"class":547},[542,3897,834],{"class":599},[542,3899,596],{"class":547},[542,3901,559],{"class":547},[542,3903,3904,3906],{"class":544,"line":818},[542,3905,821],{"class":547},[542,3907,3908],{"class":551},"TresMesh\n",[542,3910,3911,3914,3916,3918,3920],{"class":544,"line":841},[542,3912,3913],{"class":555},"      ref",[542,3915,593],{"class":547},[542,3917,596],{"class":547},[542,3919,3808],{"class":599},[542,3921,2159],{"class":547},[542,3923,3924,3927,3929,3931,3934],{"class":544,"line":574},[542,3925,3926],{"class":555},"      :position-z",[542,3928,593],{"class":547},[542,3930,596],{"class":547},[542,3932,3933],{"class":599},"30",[542,3935,2159],{"class":547},[542,3937,3938,3941,3943,3945,3948],{"class":544,"line":891},[542,3939,3940],{"class":555},"      :scale",[542,3942,593],{"class":547},[542,3944,596],{"class":547},[542,3946,3947],{"class":599},"10",[542,3949,2159],{"class":547},[542,3951,3952,3955,3957,3959,3962],{"class":544,"line":924},[542,3953,3954],{"class":555},"      @click",[542,3956,593],{"class":547},[542,3958,596],{"class":547},[542,3960,3961],{"class":599},"downloadBox",[542,3963,2159],{"class":547},[542,3965,3966],{"class":544,"line":935},[542,3967,3968],{"class":547},"    >\n",[542,3970,3971,3973,3975,3977,3979,3981,3983,3985],{"class":544,"line":945},[542,3972,894],{"class":547},[542,3974,930],{"class":551},[542,3976,2107],{"class":555},[542,3978,593],{"class":547},[542,3980,596],{"class":547},[542,3982,2114],{"class":599},[542,3984,596],{"class":547},[542,3986,559],{"class":547},[542,3988,3989,3991,3994,3997,3999,4001,4004,4006],{"class":544,"line":575},[542,3990,894],{"class":547},[542,3992,3993],{"class":551},"TresMeshStandardMaterial",[542,3995,3996],{"class":555}," :color",[542,3998,593],{"class":547},[542,4000,596],{"class":547},[542,4002,4003],{"class":599},"0x00ff00",[542,4005,596],{"class":547},[542,4007,559],{"class":547},[542,4009,4010,4012,4014],{"class":544,"line":965},[542,4011,958],{"class":547},[542,4013,897],{"class":551},[542,4015,605],{"class":547},[542,4017,4018,4020,4022,4024,4026,4028,4031,4033],{"class":544,"line":975},[542,4019,821],{"class":547},[542,4021,1777],{"class":551},[542,4023,827],{"class":555},[542,4025,593],{"class":547},[542,4027,596],{"class":547},[542,4029,4030],{"class":599},"[0, 10, 10]",[542,4032,596],{"class":547},[542,4034,559],{"class":547},[542,4036,4038,4040,4042],{"class":544,"line":4037},26,[542,4039,968],{"class":547},[542,4041,813],{"class":551},[542,4043,605],{"class":547},[542,4045,4047,4049,4051],{"class":544,"line":4046},27,[542,4048,785],{"class":547},[542,4050,802],{"class":551},[542,4052,605],{"class":547},[561,4054,4056],{"id":4055},"arguments","Arguments",[987,4058,4059,4072],{},[990,4060,4061],{},[993,4062,4063,4065,4068,4070],{},[996,4064,999],{"align":998},[996,4066,4067],{},"Type",[996,4069,1005],{},[996,4071,1002],{},[1007,4073,4074,4091],{},[993,4075,4076,4081,4085,4088],{},[1012,4077,4078],{"align":998},[1828,4079,4080],{},"Selector",[1012,4082,4083],{},[523,4084,1047],{},[1012,4086,4087],{},"Required",[1012,4089,4090],{},"The object to download. Could be an array of objects",[993,4092,4093,4097,4101,4106],{},[1012,4094,4095],{"align":998},[1828,4096,3612],{},[1012,4098,4099],{},[523,4100,3612],{},[1012,4102,4103],{},[523,4104,4105],{},"undefined",[1012,4107,4108],{},"Description below",[1156,4110,3612],{"id":3611},[987,4112,4113,4125],{},[990,4114,4115],{},[993,4116,4117,4119,4121,4123],{},[996,4118,999],{"align":998},[996,4120,4067],{"align":998},[996,4122,1005],{"align":998},[996,4124,1002],{"align":998},[1007,4126,4127,4146,4164,4182,4201,4220,4238],{},[993,4128,4129,4134,4139,4143],{},[1012,4130,4131],{"align":998},[1828,4132,4133],{},"trs",[1012,4135,4136],{"align":998},[523,4137,4138],{},"bool",[1012,4140,4141],{"align":998},[523,4142,1070],{},[1012,4144,4145],{"align":998},"Export position, rotation and scale instead of matrix per node",[993,4147,4148,4153,4157,4161],{},[1012,4149,4150],{"align":998},[1828,4151,4152],{},"onlyVisible",[1012,4154,4155],{"align":998},[523,4156,4138],{},[1012,4158,4159],{"align":998},[523,4160,3628],{},[1012,4162,4163],{"align":998},"Export only visible objects",[993,4165,4166,4171,4175,4179],{},[1012,4167,4168],{"align":998},[1828,4169,4170],{},"binary",[1012,4172,4173],{"align":998},[523,4174,4138],{},[1012,4176,4177],{"align":998},[523,4178,1070],{},[1012,4180,4181],{"align":998},"Export in binary (.glb) format, returning an ArrayBuffer",[993,4183,4184,4189,4193,4198],{},[1012,4185,4186],{"align":998},[1828,4187,4188],{},"maxTextureSize",[1012,4190,4191],{"align":998},[523,4192,2321],{},[1012,4194,4195],{"align":998},[523,4196,4197],{},"Infinity",[1012,4199,4200],{"align":998},"Restricts the image maximum size (both width and height) to the given value",[993,4202,4203,4208,4213,4217],{},[1012,4204,4205],{"align":998},[1828,4206,4207],{},"animations",[1012,4209,4210],{"align":998},[523,4211,4212],{},"Array\u003CAnimationClip>",[1012,4214,4215],{"align":998},[523,4216,4105],{},[1012,4218,4219],{"align":998},"List of animations to be included in the export",[993,4221,4222,4227,4231,4235],{},[1012,4223,4224],{"align":998},[1828,4225,4226],{},"includeCustomExtensions",[1012,4228,4229],{"align":998},[523,4230,4138],{},[1012,4232,4233],{"align":998},[523,4234,1070],{},[1012,4236,4237],{"align":998},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[993,4239,4240,4245,4249,4254],{},[1012,4241,4242],{"align":998},[1828,4243,4244],{},"fileName",[1012,4246,4247],{"align":998},[523,4248,2278],{},[1012,4250,4251],{"align":998},[523,4252,4253],{},"Object name",[1012,4255,4256],{"align":998},"Name of the generated file",[1169,4258,4259],{},"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":492,"searchDepth":493,"depth":494,"links":4261},[4262,4263],{"id":3672,"depth":494,"text":3673},{"id":4055,"depth":494,"text":4056,"children":4264},[4265],{"id":3611,"depth":568,"text":3612},"Export 3D objects to GLTF format.",{},{"title":471,"description":4266},"ls7xbos-wdqomwboeVd0l1d29JncmAz9XxdqK17moKs",{"id":4271,"title":475,"body":4272,"description":4567,"extension":497,"links":498,"meta":4568,"navigation":500,"path":476,"seo":4569,"stem":477,"__hash__":4570},"docs/2.api/miscellaneous/use-intersect.md",{"type":481,"value":4273,"toc":4562},[4274,4293,4295,4311,4456,4458,4487,4491,4559],[484,4275,4276,4278,4279,4282,4283,4286,4287,4292],{},[523,4277,475],{}," is a function that returns ",[523,4280,4281],{},"intersect",", a ",[523,4284,4285],{},"Ref\u003Cboolean>"," that's updated when the observed object enters or leaves the screen. This relies on ",[1201,4288,4291],{"href":4289,"rel":4290},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1205],"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.",[561,4294,15],{"id":563},[2213,4296,4297],{},[484,4298,4299,4301,4302,4304,4305,4307,4308,747],{},[523,4300,475],{}," requires a ",[523,4303,813],{}," context, so it is only available in ",[523,4306,813],{}," descendant components' ",[523,4309,4310],{},"\u003Cscript setup>",[534,4312,4315],{"className":536,"code":4313,"highlights":4314,"language":538,"meta":492,"style":492},"\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",[494,664],[523,4316,4317,4337,4362,4366,4393,4401,4405,4413,4432,4440,4448],{"__ignoreMap":492},[542,4318,4319,4321,4323,4325,4327,4329,4331,4333,4335],{"class":544,"line":493},[542,4320,548],{"class":547},[542,4322,584],{"class":551},[542,4324,587],{"class":555},[542,4326,590],{"class":555},[542,4328,593],{"class":547},[542,4330,596],{"class":547},[542,4332,600],{"class":599},[542,4334,596],{"class":547},[542,4336,605],{"class":547},[542,4338,4340,4342,4344,4347,4349,4352,4354,4356,4358,4360],{"class":4339,"line":494},[544,637],[542,4341,611],{"class":610},[542,4343,614],{"class":547},[542,4345,4346],{"class":617}," Torus",[542,4348,647],{"class":547},[542,4350,4351],{"class":617}," useIntersect",[542,4353,621],{"class":547},[542,4355,624],{"class":610},[542,4357,627],{"class":547},[542,4359,659],{"class":599},[542,4361,633],{"class":547},[542,4363,4364],{"class":544,"line":568},[542,4365,687],{"emptyLinePlaceholder":500},[542,4367,4369,4371,4373,4375,4377,4380,4382,4385,4387,4389,4391],{"class":4368,"line":664},[544,637],[542,4370,693],{"class":555},[542,4372,614],{"class":547},[542,4374,859],{"class":617},[542,4376,647],{"class":547},[542,4378,4379],{"class":617}," intersect",[542,4381,647],{"class":547},[542,4383,4384],{"class":617}," off ",[542,4386,2068],{"class":547},[542,4388,2677],{"class":547},[542,4390,4351],{"class":701},[542,4392,704],{"class":617},[542,4394,4395,4397,4399],{"class":544,"line":684},[542,4396,785],{"class":547},[542,4398,584],{"class":551},[542,4400,605],{"class":547},[542,4402,4403],{"class":544,"line":569},[542,4404,687],{"emptyLinePlaceholder":500},[542,4406,4407,4409,4411],{"class":544,"line":570},[542,4408,548],{"class":547},[542,4410,802],{"class":551},[542,4412,605],{"class":547},[542,4414,4415,4417,4419,4421,4423,4425,4428,4430],{"class":544,"line":721},[542,4416,810],{"class":547},[542,4418,277],{"class":551},[542,4420,859],{"class":555},[542,4422,593],{"class":547},[542,4424,596],{"class":547},[542,4426,4427],{"class":599},"ref",[542,4429,596],{"class":547},[542,4431,605],{"class":547},[542,4433,4434,4436,4438],{"class":544,"line":571},[542,4435,821],{"class":547},[542,4437,940],{"class":551},[542,4439,559],{"class":547},[542,4441,4442,4444,4446],{"class":544,"line":572},[542,4443,968],{"class":547},[542,4445,277],{"class":551},[542,4447,605],{"class":547},[542,4449,4450,4452,4454],{"class":544,"line":573},[542,4451,785],{"class":547},[542,4453,802],{"class":551},[542,4455,605],{"class":547},[561,4457,4056],{"id":4055},[987,4459,4460,4470],{},[990,4461,4462],{},[993,4463,4464,4466,4468],{},[996,4465,999],{"align":998},[996,4467,1002],{},[996,4469,4067],{},[1007,4471,4472],{},[993,4473,4474,4479,4482],{},[1012,4475,4476],{"align":998},[1828,4477,4478],{},"onChange",[1012,4480,4481],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[1012,4483,4484],{},[523,4485,4486],{},"(isIntersected: boolean) => void",[561,4488,4490],{"id":4489},"return","Return",[987,4492,4493,4503],{},[990,4494,4495],{},[993,4496,4497,4499,4501],{},[996,4498,999],{"align":998},[996,4500,1002],{},[996,4502,4067],{},[1007,4504,4505,4523,4538],{},[993,4506,4507,4511,4518],{},[1012,4508,4509],{"align":998},[1828,4510,4427],{},[1012,4512,4513,4514,4517],{},"Vue ",[523,4515,4516],{},"ShallowRef"," to pass to the object to be observed.",[1012,4519,4520],{},[523,4521,4522],{},"ShallowRef\u003CObject3D>",[993,4524,4525,4530,4533],{},[1012,4526,4527],{"align":998},[1828,4528,4529],{},"intersects",[1012,4531,4532],{},"Updates when the observed object's intersect status changes.",[1012,4534,4535],{},[523,4536,4537],{},"ShallowRef\u003Cboolean>",[993,4539,4540,4545,4554],{},[1012,4541,4542],{"align":998},[1828,4543,4544],{},"off",[1012,4546,4547,4548,4550,4551,4553],{},"Calling this function stops ",[523,4549,475],{}," until ",[523,4552,4427],{}," changes.",[1012,4555,4556],{},[523,4557,4558],{},"() => void",[1169,4560,4561],{},"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":492,"searchDepth":493,"depth":494,"links":4563},[4564,4565,4566],{"id":563,"depth":494,"text":15},{"id":4055,"depth":494,"text":4056},{"id":4489,"depth":494,"text":4490},"Detect when objects enter or leave the screen.",{},{"title":475,"description":4567},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1782052436411]