[{"data":1,"prerenderedAt":1719},["ShallowReactive",2],{"navigation":3,"/api/miscellaneous/positional-audio":490,"/api/miscellaneous/positional-audio-surround":1714},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,88,118,160,202,300,326,360,410,456],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":69,"path":70,"stem":71},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":73,"path":74,"stem":75},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":77,"path":78,"stem":79},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":81,"path":82,"stem":83},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":85,"path":86,"stem":87},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":89,"path":90,"stem":91,"children":92},"Controls","/api/controls","2.api/2.controls/index",[93,94,98,102,106,110,114],{"title":89,"path":90,"stem":91},{"title":95,"path":96,"stem":97},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":99,"path":100,"stem":101},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":103,"path":104,"stem":105},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":107,"path":108,"stem":109},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":111,"path":112,"stem":113},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":115,"path":116,"stem":117},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":119,"path":120,"stem":121,"children":122},"Loaders","/api/loaders","2.api/3.loaders/index",[123,124,128,132,136,140,144,148,152,156],{"title":119,"path":120,"stem":121},{"title":125,"path":126,"stem":127},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":129,"path":130,"stem":131},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":133,"path":134,"stem":135},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":137,"path":138,"stem":139},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":141,"path":142,"stem":143},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":145,"path":146,"stem":147},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":149,"path":150,"stem":151},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":153,"path":154,"stem":155},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":157,"path":158,"stem":159},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":161,"path":162,"stem":163,"children":164},"Materials","/api/materials","2.api/4.materials/index",[165,166,170,174,178,182,186,190,194,198],{"title":161,"path":162,"stem":163},{"title":167,"path":168,"stem":169},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":171,"path":172,"stem":173},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":175,"path":176,"stem":177},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":179,"path":180,"stem":181},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":183,"path":184,"stem":185},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":187,"path":188,"stem":189},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":191,"path":192,"stem":193},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":195,"path":196,"stem":197},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":199,"path":200,"stem":201},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":203,"path":204,"stem":205,"children":206},"Shapes","/api/shapes","2.api/5.shapes/index",[207,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296],{"title":203,"path":204,"stem":205},{"title":209,"path":210,"stem":211},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":213,"path":214,"stem":215},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":217,"path":218,"stem":219},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":221,"path":222,"stem":223},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":225,"path":226,"stem":227},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":229,"path":230,"stem":231},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":233,"path":234,"stem":235},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":237,"path":238,"stem":239},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":241,"path":242,"stem":243},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":245,"path":246,"stem":247},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":249,"path":250,"stem":251},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":253,"path":254,"stem":255},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":257,"path":258,"stem":259},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":261,"path":262,"stem":263},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":265,"path":266,"stem":267},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":269,"path":270,"stem":271},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":273,"path":274,"stem":275},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":277,"path":278,"stem":279},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":281,"path":282,"stem":283},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":285,"path":286,"stem":287},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":289,"path":290,"stem":291},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":293,"path":294,"stem":295},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":297,"path":298,"stem":299},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":301,"path":302,"stem":303,"children":304},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[305,306,310,314,318,322],{"title":301,"path":302,"stem":303},{"title":307,"path":308,"stem":309},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":311,"path":312,"stem":313},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":315,"path":316,"stem":317},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":319,"path":320,"stem":321},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":323,"path":324,"stem":325},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":327,"path":328,"stem":329,"children":330},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[331,332,336,340,344,348,352,356],{"title":327,"path":328,"stem":329},{"title":333,"path":334,"stem":335},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":337,"path":338,"stem":339},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":341,"path":342,"stem":343},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":345,"path":346,"stem":347},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":349,"path":350,"stem":351},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":353,"path":354,"stem":355},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":357,"path":358,"stem":359},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":361,"path":362,"stem":363,"children":364},"Staging","/api/staging","2.api/8.staging/index",[365,366,370,374,378,382,386,390,394,398,402,406],{"title":361,"path":362,"stem":363},{"title":367,"path":368,"stem":369},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":371,"path":372,"stem":373},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":375,"path":376,"stem":377},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":379,"path":380,"stem":381},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":383,"path":384,"stem":385},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":387,"path":388,"stem":389},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":391,"path":392,"stem":393},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":395,"path":396,"stem":397},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":399,"path":400,"stem":401},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":403,"path":404,"stem":405},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":407,"path":408,"stem":409},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":411,"path":412,"stem":413,"children":414},"Objects","/api/objects","2.api/9.objects/index",[415,416,420,424,428,432,436,440,444,448,452],{"title":411,"path":412,"stem":413},{"title":417,"path":418,"stem":419},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":421,"path":422,"stem":423},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":425,"path":426,"stem":427},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":429,"path":430,"stem":431},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":433,"path":434,"stem":435},"HTML","/api/objects/html","2.api/9.objects/html",{"title":437,"path":438,"stem":439},"Image","/api/objects/image","2.api/9.objects/image",{"title":441,"path":442,"stem":443},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":445,"path":446,"stem":447},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":449,"path":450,"stem":451},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":453,"path":454,"stem":455},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":457,"path":458,"stem":459,"children":460},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[461,462,466,470,474,478,482,486],{"title":457,"path":458,"stem":459},{"title":463,"path":464,"stem":465},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":467,"path":468,"stem":469},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":471,"path":472,"stem":473},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":475,"path":476,"stem":477},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":479,"path":480,"stem":481},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":483,"path":484,"stem":485},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":487,"path":488,"stem":489},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":491,"title":475,"body":492,"description":1708,"extension":1709,"links":1710,"meta":1711,"navigation":667,"path":476,"seo":1712,"stem":477,"__hash__":1713},"docs/2.api/miscellaneous/positional-audio.md",{"type":493,"value":494,"toc":1701},"minimark",[495,501,521,532,536,552,907,937,941,948,952,1170,1174,1250,1501,1666,1670,1697],[496,497,498],"scene-controls-wrapper",{},[499,500],"miscellaneous-positional-audio",{},[502,503,504,505,509,510,516,517,520],"p",{},"The ",[506,507,508],"code",{},"cientos"," package provides an abstraction of the ",[511,512,475],"a",{"href":513,"rel":514},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[515],"nofollow",".\n",[506,518,519],{},"\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.",[502,522,523,525,526,531],{},[506,524,519],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[511,527,530],{"href":528,"rel":529},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[515],"PositionalAudioHelper"," class.",[533,534,15],"h2",{"id":535},"usage",[502,537,504,538,540,541,543,544,547,548,551],{},[506,539,519],{}," 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 ",[506,542,519],{}," component and set the ",[506,545,546],{},"url",". It must be wrapped around the ",[506,549,550],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[553,554,564],"pre",{"className":555,"code":556,"highlights":557,"language":562,"meta":563,"style":563},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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",[558,559,560,561],2,17,18,19,"vue","",[506,565,566,601,637,662,669,692,697,714,734,742,752,757,767,778,800,812,822,831,847,862,868,878,888,898],{"__ignoreMap":563},[567,568,571,575,579,583,586,589,592,596,598],"span",{"class":569,"line":570},"line",1,[567,572,574],{"class":573},"sMK4o","\u003C",[567,576,578],{"class":577},"swJcz","script",[567,580,582],{"class":581},"spNyl"," setup",[567,584,585],{"class":581}," lang",[567,587,588],{"class":573},"=",[567,590,591],{"class":573},"\"",[567,593,595],{"class":594},"sfazB","ts",[567,597,591],{"class":573},[567,599,600],{"class":573},">\n",[567,602,605,609,612,616,619,622,625,628,631,634],{"class":603,"line":558},[569,604],"highlight",[567,606,608],{"class":607},"s7zQu","import",[567,610,611],{"class":573}," {",[567,613,615],{"class":614},"sTEyZ"," Box",[567,617,618],{"class":573},",",[567,620,621],{"class":614}," PositionalAudio",[567,623,624],{"class":573}," }",[567,626,627],{"class":607}," from",[567,629,630],{"class":573}," '",[567,632,633],{"class":594},"@tresjs/cientos",[567,635,636],{"class":573},"'\n",[567,638,640,642,644,647,649,652,654,656,658,660],{"class":569,"line":639},3,[567,641,608],{"class":607},[567,643,611],{"class":573},[567,645,646],{"class":614}," onUnmounted",[567,648,618],{"class":573},[567,650,651],{"class":614}," shallowRef",[567,653,624],{"class":573},[567,655,627],{"class":607},[567,657,630],{"class":573},[567,659,562],{"class":594},[567,661,636],{"class":573},[567,663,665],{"class":569,"line":664},4,[567,666,668],{"emptyLinePlaceholder":667},true,"\n",[567,670,672,675,678,680,683,686,689],{"class":569,"line":671},5,[567,673,674],{"class":581},"const",[567,676,677],{"class":614}," positionalAudioRef ",[567,679,588],{"class":573},[567,681,651],{"class":682},"s2Zo4",[567,684,685],{"class":614},"(",[567,687,688],{"class":573},"null",[567,690,691],{"class":614},")\n",[567,693,695],{"class":569,"line":694},6,[567,696,668],{"emptyLinePlaceholder":667},[567,698,700,703,705,708,711],{"class":569,"line":699},7,[567,701,702],{"class":682},"onUnmounted",[567,704,685],{"class":614},[567,706,707],{"class":573},"()",[567,709,710],{"class":581}," =>",[567,712,713],{"class":573}," {\n",[567,715,717,720,723,726,728,731],{"class":569,"line":716},8,[567,718,719],{"class":614},"  positionalAudioRef",[567,721,722],{"class":573},"?.",[567,724,725],{"class":614},"value",[567,727,722],{"class":573},[567,729,730],{"class":682},"dispose",[567,732,733],{"class":577},"()\n",[567,735,737,740],{"class":569,"line":736},9,[567,738,739],{"class":573},"}",[567,741,691],{"class":614},[567,743,745,748,750],{"class":569,"line":744},10,[567,746,747],{"class":573},"\u003C/",[567,749,578],{"class":577},[567,751,600],{"class":573},[567,753,755],{"class":569,"line":754},11,[567,756,668],{"emptyLinePlaceholder":667},[567,758,760,762,765],{"class":569,"line":759},12,[567,761,574],{"class":573},[567,763,764],{"class":577},"template",[567,766,600],{"class":573},[567,768,770,773,776],{"class":569,"line":769},13,[567,771,772],{"class":573},"  \u003C",[567,774,775],{"class":577},"TresCanvas",[567,777,600],{"class":573},[567,779,781,784,786,789,791,793,796,798],{"class":569,"line":780},14,[567,782,783],{"class":573},"    \u003C",[567,785,209],{"class":577},[567,787,788],{"class":581}," :args",[567,790,588],{"class":573},[567,792,591],{"class":573},[567,794,795],{"class":594},"[1, 1, 1]",[567,797,591],{"class":573},[567,799,600],{"class":573},[567,801,803,806,809],{"class":569,"line":802},15,[567,804,805],{"class":573},"      \u003C",[567,807,808],{"class":577},"TresMeshNormalMaterial",[567,810,811],{"class":573}," />\n",[567,813,815,817,820],{"class":569,"line":814},16,[567,816,805],{"class":573},[567,818,819],{"class":577},"Suspense",[567,821,600],{"class":573},[567,823,825,828],{"class":824,"line":559},[569,604],[567,826,827],{"class":573},"        \u003C",[567,829,830],{"class":577},"PositionalAudio\n",[567,832,834,837,839,841,844],{"class":833,"line":560},[569,604],[567,835,836],{"class":581},"          ref",[567,838,588],{"class":573},[567,840,591],{"class":573},[567,842,843],{"class":594},"positionalAudioRef",[567,845,846],{"class":573},"\"\n",[567,848,850,853,855,857,860],{"class":849,"line":561},[569,604],[567,851,852],{"class":581},"          url",[567,854,588],{"class":573},[567,856,591],{"class":573},[567,858,859],{"class":594},"your-sound.mp3",[567,861,846],{"class":573},[567,863,865],{"class":569,"line":864},20,[567,866,867],{"class":573},"        />\n",[567,869,871,874,876],{"class":569,"line":870},21,[567,872,873],{"class":573},"      \u003C/",[567,875,819],{"class":577},[567,877,600],{"class":573},[567,879,881,884,886],{"class":569,"line":880},22,[567,882,883],{"class":573},"    \u003C/",[567,885,209],{"class":577},[567,887,600],{"class":573},[567,889,891,894,896],{"class":569,"line":890},23,[567,892,893],{"class":573},"  \u003C/",[567,895,775],{"class":577},[567,897,600],{"class":573},[567,899,901,903,905],{"class":569,"line":900},24,[567,902,747],{"class":573},[567,904,764],{"class":577},[567,906,600],{"class":573},[908,909,910],"prose-warning",{},[502,911,912,913,916,917,924,925,928,929,932,933,936],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[506,914,915],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[511,918,921],{"href":919,"rel":920},"https://goo.gl/7K7WLu",[515],[506,922,923],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[506,926,927],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[506,930,931],{},":ready=\"true\""," and ",[506,934,935],{},"autoplay=\"true\""," for a direct launch.",[533,938,940],{"id":939},"how-does-it-work","How does it work?",[942,943],"img",{"className":944,"src":946,"alt":947},[945],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[533,949,951],{"id":950},"props","Props",[953,954,955,972],"table",{},[956,957,958],"thead",{},[959,960,961,966,969],"tr",{},[962,963,965],"th",{"align":964},"left","Prop",[962,967,968],{"align":964},"Description",[962,970,971],{},"Default",[973,974,975,995,1021,1044,1077,1095,1111,1128,1149],"tbody",{},[959,976,977,983,993],{},[978,979,980],"td",{"align":964},[981,982,546],"strong",{},[978,984,985,988,989,992],{"align":964},[506,986,987],{},"string"," - ",[981,990,991],{},"required"," — The path or URL to the file.",[978,994],{},[959,996,997,1002,1016],{},[978,998,999],{"align":964},[981,1000,1001],{},"helper",[978,1003,1004,1007,1008,1011,1012],{"align":964},[506,1005,1006],{},"boolean"," — Selects whether helper mode is enabled. ",[1009,1010],"br",{}," ",[1013,1014,1015],"em",{},"(Useful for visualising the angle of sound propagation)",[978,1017,1018],{},[506,1019,1020],{},"false",[959,1022,1023,1028,1039],{},[978,1024,1025],{"align":964},[981,1026,1027],{},"distance",[978,1029,1030,1033,1034],{"align":964},[506,1031,1032],{},"number"," — The distance at which the volume reduction starts taking effect. ",[1013,1035,1036],{},[981,1037,1038],{},"A non-negative number.",[978,1040,1041],{},[506,1042,1043],{},"1",[959,1045,1046,1051,1073],{},[978,1047,1048],{"align":964},[981,1049,1050],{},"ready",[978,1052,1053,1055,1056,1058,1059,1062,1063,1066,1067,1070,1071],{"align":964},[506,1054,1006],{}," — Tells ",[506,1057,519],{}," that ",[506,1060,1061],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[506,1064,1065],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[511,1068,919],{"href":919,"rel":1069},[515],"). ",[1009,1072],{},[978,1074,1075],{},[506,1076,1020],{},[959,1078,1079,1083,1091],{},[978,1080,1081],{"align":964},[981,1082,1065],{},[978,1084,1085,1087,1088,1090],{"align":964},[506,1086,1006],{}," — Selects whether the audio is launched automatically. Please refer to the ",[506,1089,1050],{}," prop for a better understanding of how to use autoplay.",[978,1092,1093],{},[506,1094,1020],{},[959,1096,1097,1102,1107],{},[978,1098,1099],{"align":964},[981,1100,1101],{},"loop",[978,1103,1104,1106],{"align":964},[506,1105,1006],{}," — Specifies whether the audio should loop.",[978,1108,1109],{},[506,1110,1020],{},[959,1112,1113,1118,1123],{},[978,1114,1115],{"align":964},[981,1116,1117],{},"innerAngle",[978,1119,1120,1122],{"align":964},[506,1121,1032],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[978,1124,1125],{},[506,1126,1127],{},"360",[959,1129,1130,1135,1144],{},[978,1131,1132],{"align":964},[981,1133,1134],{},"outerAngle",[978,1136,1137,1139,1140,1143],{"align":964},[506,1138,1032],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[506,1141,1142],{},"outerGain"," prop.",[978,1145,1146],{},[506,1147,1148],{},"0",[959,1150,1151,1155,1166],{},[978,1152,1153],{"align":964},[981,1154,1142],{},[978,1156,1157,1159,1160,1162,1163,1165],{"align":964},[506,1158,1032],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[506,1161,1134],{}," prop. When the value is ",[506,1164,1148],{}," no sound can be heard.",[978,1167,1168],{},[506,1169,1148],{},[533,1171,1173],{"id":1172},"exposed-properties","Exposed properties",[953,1175,1176,1185],{},[956,1177,1178],{},[959,1179,1180,1183],{},[962,1181,1182],{"align":964},"Event",[962,1184,968],{"align":964},[973,1186,1187,1201,1214,1227,1240],{},[959,1188,1189,1194],{},[978,1190,1191],{"align":964},[506,1192,1193],{},"instance",[978,1195,1196,1197,1200],{"align":964},"Instance reference — Inheritance of ",[511,1198,475],{"href":513,"rel":1199},[515],".",[959,1202,1203,1208],{},[978,1204,1205],{"align":964},[506,1206,1207],{},"play()",[978,1209,1210,1211],{"align":964},"Play audio — ",[1013,1212,1213],{},"Cannot be fired if audio is already running.",[959,1215,1216,1221],{},[978,1217,1218],{"align":964},[506,1219,1220],{},"pause()",[978,1222,1223,1224],{"align":964},"Pause audio — ",[1013,1225,1226],{},"Cannot be fired if audio is already paused.",[959,1228,1229,1234],{},[978,1230,1231],{"align":964},[506,1232,1233],{},"stop()",[978,1235,1236,1237],{"align":964},"Stop audio — ",[1013,1238,1239],{},"Cannot be fired if audio is already stopped.",[959,1241,1242,1247],{},[978,1243,1244],{"align":964},[506,1245,1246],{},"dispose()",[978,1248,1249],{"align":964},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[553,1251,1255],{"className":1252,"code":1253,"language":1254,"meta":563,"style":563},"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",[506,1256,1257,1273,1277,1303,1307,1337,1365,1369,1402,1406,1437,1468,1497],{"__ignoreMap":563},[567,1258,1259,1261,1263,1265,1267,1269,1271],{"class":569,"line":570},[567,1260,674],{"class":581},[567,1262,677],{"class":614},[567,1264,588],{"class":573},[567,1266,651],{"class":682},[567,1268,685],{"class":614},[567,1270,688],{"class":573},[567,1272,691],{"class":614},[567,1274,1275],{"class":569,"line":558},[567,1276,668],{"emptyLinePlaceholder":667},[567,1278,1279,1282,1284,1287,1290,1292,1294,1296,1299],{"class":569,"line":639},[567,1280,1281],{"class":614},"console",[567,1283,1200],{"class":573},[567,1285,1286],{"class":682},"log",[567,1288,1289],{"class":614},"(positionalAudioRef",[567,1291,1200],{"class":573},[567,1293,725],{"class":614},[567,1295,1200],{"class":573},[567,1297,1298],{"class":614},"instance) ",[567,1300,1302],{"class":1301},"sHwdD","// instance properties\n",[567,1304,1305],{"class":569,"line":664},[567,1306,668],{"emptyLinePlaceholder":667},[567,1308,1309,1311,1314,1316,1319,1323,1326,1330,1333,1335],{"class":569,"line":671},[567,1310,674],{"class":581},[567,1312,1313],{"class":614}," handlerAudio ",[567,1315,588],{"class":573},[567,1317,1318],{"class":573}," (",[567,1320,1322],{"class":1321},"sHdIc","action",[567,1324,1325],{"class":573},":",[567,1327,1329],{"class":1328},"sBMFI"," string",[567,1331,1332],{"class":573},")",[567,1334,710],{"class":581},[567,1336,713],{"class":573},[567,1338,1339,1342,1344,1347,1349,1351,1353,1356,1359,1362],{"class":569,"line":694},[567,1340,1341],{"class":607},"  if",[567,1343,1318],{"class":577},[567,1345,1346],{"class":573},"!",[567,1348,843],{"class":614},[567,1350,1200],{"class":573},[567,1352,725],{"class":614},[567,1354,1355],{"class":577},") ",[567,1357,1358],{"class":573},"{",[567,1360,1361],{"class":607}," return",[567,1363,1364],{"class":573}," }\n",[567,1366,1367],{"class":569,"line":699},[567,1368,668],{"emptyLinePlaceholder":667},[567,1370,1371,1374,1376,1379,1381,1384,1386,1389,1391,1394,1397,1399],{"class":569,"line":716},[567,1372,1373],{"class":581},"  const",[567,1375,611],{"class":573},[567,1377,1378],{"class":614}," play",[567,1380,618],{"class":573},[567,1382,1383],{"class":614}," pause",[567,1385,618],{"class":573},[567,1387,1388],{"class":614}," stop",[567,1390,624],{"class":573},[567,1392,1393],{"class":573}," =",[567,1395,1396],{"class":614}," positionalAudioRef",[567,1398,1200],{"class":573},[567,1400,1401],{"class":614},"value\n",[567,1403,1404],{"class":569,"line":736},[567,1405,668],{"emptyLinePlaceholder":667},[567,1407,1408,1410,1412,1414,1417,1419,1422,1425,1427,1429,1431,1434],{"class":569,"line":744},[567,1409,1341],{"class":607},[567,1411,1318],{"class":577},[567,1413,1322],{"class":614},[567,1415,1416],{"class":573}," ===",[567,1418,630],{"class":573},[567,1420,1421],{"class":594},"play",[567,1423,1424],{"class":573},"'",[567,1426,1355],{"class":577},[567,1428,1358],{"class":573},[567,1430,1378],{"class":682},[567,1432,1433],{"class":577},"() ",[567,1435,1436],{"class":573},"}\n",[567,1438,1439,1442,1445,1447,1449,1451,1453,1456,1458,1460,1462,1464,1466],{"class":569,"line":754},[567,1440,1441],{"class":607},"  else",[567,1443,1444],{"class":607}," if",[567,1446,1318],{"class":577},[567,1448,1322],{"class":614},[567,1450,1416],{"class":573},[567,1452,630],{"class":573},[567,1454,1455],{"class":594},"pause",[567,1457,1424],{"class":573},[567,1459,1355],{"class":577},[567,1461,1358],{"class":573},[567,1463,1383],{"class":682},[567,1465,1433],{"class":577},[567,1467,1436],{"class":573},[567,1469,1470,1472,1474,1476,1478,1480,1482,1485,1487,1489,1491,1493,1495],{"class":569,"line":759},[567,1471,1441],{"class":607},[567,1473,1444],{"class":607},[567,1475,1318],{"class":577},[567,1477,1322],{"class":614},[567,1479,1416],{"class":573},[567,1481,630],{"class":573},[567,1483,1484],{"class":594},"stop",[567,1486,1424],{"class":573},[567,1488,1355],{"class":577},[567,1490,1358],{"class":573},[567,1492,1388],{"class":682},[567,1494,1433],{"class":577},[567,1496,1436],{"class":573},[567,1498,1499],{"class":569,"line":769},[567,1500,1436],{"class":573},[553,1502,1504],{"className":555,"code":1503,"language":562,"meta":563,"style":563},"\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",[506,1505,1506,1514,1544,1571,1598,1602,1610,1618,1626,1634,1642,1650,1658],{"__ignoreMap":563},[567,1507,1508,1510,1512],{"class":569,"line":570},[567,1509,574],{"class":573},[567,1511,764],{"class":577},[567,1513,600],{"class":573},[567,1515,1516,1518,1521,1524,1526,1528,1531,1533,1536,1538,1540,1542],{"class":569,"line":558},[567,1517,772],{"class":573},[567,1519,1520],{"class":577},"button",[567,1522,1523],{"class":581}," @click",[567,1525,588],{"class":573},[567,1527,591],{"class":573},[567,1529,1530],{"class":594},"handlerAudio('play')",[567,1532,591],{"class":573},[567,1534,1535],{"class":573},">",[567,1537,1421],{"class":614},[567,1539,747],{"class":573},[567,1541,1520],{"class":577},[567,1543,600],{"class":573},[567,1545,1546,1548,1550,1552,1554,1556,1559,1561,1563,1565,1567,1569],{"class":569,"line":639},[567,1547,772],{"class":573},[567,1549,1520],{"class":577},[567,1551,1523],{"class":581},[567,1553,588],{"class":573},[567,1555,591],{"class":573},[567,1557,1558],{"class":594},"handlerAudio('pause')",[567,1560,591],{"class":573},[567,1562,1535],{"class":573},[567,1564,1455],{"class":614},[567,1566,747],{"class":573},[567,1568,1520],{"class":577},[567,1570,600],{"class":573},[567,1572,1573,1575,1577,1579,1581,1583,1586,1588,1590,1592,1594,1596],{"class":569,"line":664},[567,1574,772],{"class":573},[567,1576,1520],{"class":577},[567,1578,1523],{"class":581},[567,1580,588],{"class":573},[567,1582,591],{"class":573},[567,1584,1585],{"class":594},"handlerAudio('stop')",[567,1587,591],{"class":573},[567,1589,1535],{"class":573},[567,1591,1484],{"class":614},[567,1593,747],{"class":573},[567,1595,1520],{"class":577},[567,1597,600],{"class":573},[567,1599,1600],{"class":569,"line":671},[567,1601,668],{"emptyLinePlaceholder":667},[567,1603,1604,1606,1608],{"class":569,"line":694},[567,1605,772],{"class":573},[567,1607,775],{"class":577},[567,1609,600],{"class":573},[567,1611,1612,1614,1616],{"class":569,"line":699},[567,1613,783],{"class":573},[567,1615,277],{"class":577},[567,1617,600],{"class":573},[567,1619,1620,1622,1624],{"class":569,"line":716},[567,1621,805],{"class":573},[567,1623,819],{"class":577},[567,1625,600],{"class":573},[567,1627,1628,1630,1632],{"class":569,"line":736},[567,1629,827],{"class":573},[567,1631,475],{"class":577},[567,1633,811],{"class":573},[567,1635,1636,1638,1640],{"class":569,"line":744},[567,1637,873],{"class":573},[567,1639,819],{"class":577},[567,1641,600],{"class":573},[567,1643,1644,1646,1648],{"class":569,"line":754},[567,1645,883],{"class":573},[567,1647,277],{"class":577},[567,1649,600],{"class":573},[567,1651,1652,1654,1656],{"class":569,"line":759},[567,1653,893],{"class":573},[567,1655,775],{"class":577},[567,1657,600],{"class":573},[567,1659,1660,1662,1664],{"class":569,"line":769},[567,1661,747],{"class":573},[567,1663,764],{"class":577},[567,1665,600],{"class":573},[533,1667,1669],{"id":1668},"events","Events",[953,1671,1672,1680],{},[956,1673,1674],{},[959,1675,1676,1678],{},[962,1677,1182],{"align":964},[962,1679,968],{"align":964},[973,1681,1682],{},[959,1683,1684,1689],{},[978,1685,1686],{"align":964},[506,1687,1688],{},"is-playing",[978,1690,1691,1692,1011,1694],{"align":964},"Triggered when the audio changes its state (play, pause, or stop) ",[1009,1693],{},[506,1695,1696],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1698,1699,1700],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .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":563,"searchDepth":570,"depth":558,"links":1702},[1703,1704,1705,1706,1707],{"id":535,"depth":558,"text":15},{"id":939,"depth":558,"text":940},{"id":950,"depth":558,"text":951},{"id":1172,"depth":558,"text":1173},{"id":1668,"depth":558,"text":1669},"Spatially positioned audio in 3D space.","md",null,{},{"title":475,"description":1708},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",[1715,1717],{"title":471,"path":472,"stem":473,"description":1716,"children":-1},"Create parallax effects based on mouse movement.",{"title":479,"path":480,"stem":481,"description":1718,"children":-1},"Composable for managing model animations with AnimationMixer.",1785417274277]