[{"data":1,"prerenderedAt":1707},["ShallowReactive",2],{"navigation":3,"/api/miscellaneous/positional-audio":478,"/api/miscellaneous/positional-audio-surround":1702},[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":463,"body":480,"description":1696,"extension":1697,"links":1698,"meta":1699,"navigation":655,"path":464,"seo":1700,"stem":465,"__hash__":1701},"docs/2.api/miscellaneous/positional-audio.md",{"type":481,"value":482,"toc":1689},"minimark",[483,489,509,520,524,540,895,925,929,936,940,1158,1162,1238,1489,1654,1658,1685],[484,485,486],"scene-controls-wrapper",{},[487,488],"miscellaneous-positional-audio",{},[490,491,492,493,497,498,504,505,508],"p",{},"The ",[494,495,496],"code",{},"cientos"," package provides an abstraction of the ",[499,500,463],"a",{"href":501,"rel":502},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[503],"nofollow",".\n",[494,506,507],{},"\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.",[490,510,511,513,514,519],{},[494,512,507],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[499,515,518],{"href":516,"rel":517},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[503],"PositionalAudioHelper"," class.",[521,522,15],"h2",{"id":523},"usage",[490,525,492,526,528,529,531,532,535,536,539],{},[494,527,507],{}," 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 ",[494,530,507],{}," component and set the ",[494,533,534],{},"url",". It must be wrapped around the ",[494,537,538],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[541,542,552],"pre",{"className":543,"code":544,"highlights":545,"language":550,"meta":551,"style":551},"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",[546,547,548,549],2,17,18,19,"vue","",[494,553,554,589,625,650,657,680,685,702,722,730,740,745,755,766,788,800,810,819,835,850,856,866,876,886],{"__ignoreMap":551},[555,556,559,563,567,571,574,577,580,584,586],"span",{"class":557,"line":558},"line",1,[555,560,562],{"class":561},"sMK4o","\u003C",[555,564,566],{"class":565},"swJcz","script",[555,568,570],{"class":569},"spNyl"," setup",[555,572,573],{"class":569}," lang",[555,575,576],{"class":561},"=",[555,578,579],{"class":561},"\"",[555,581,583],{"class":582},"sfazB","ts",[555,585,579],{"class":561},[555,587,588],{"class":561},">\n",[555,590,593,597,600,604,607,610,613,616,619,622],{"class":591,"line":546},[557,592],"highlight",[555,594,596],{"class":595},"s7zQu","import",[555,598,599],{"class":561}," {",[555,601,603],{"class":602},"sTEyZ"," Box",[555,605,606],{"class":561},",",[555,608,609],{"class":602}," PositionalAudio",[555,611,612],{"class":561}," }",[555,614,615],{"class":595}," from",[555,617,618],{"class":561}," '",[555,620,621],{"class":582},"@tresjs/cientos",[555,623,624],{"class":561},"'\n",[555,626,628,630,632,635,637,640,642,644,646,648],{"class":557,"line":627},3,[555,629,596],{"class":595},[555,631,599],{"class":561},[555,633,634],{"class":602}," onUnmounted",[555,636,606],{"class":561},[555,638,639],{"class":602}," shallowRef",[555,641,612],{"class":561},[555,643,615],{"class":595},[555,645,618],{"class":561},[555,647,550],{"class":582},[555,649,624],{"class":561},[555,651,653],{"class":557,"line":652},4,[555,654,656],{"emptyLinePlaceholder":655},true,"\n",[555,658,660,663,666,668,671,674,677],{"class":557,"line":659},5,[555,661,662],{"class":569},"const",[555,664,665],{"class":602}," positionalAudioRef ",[555,667,576],{"class":561},[555,669,639],{"class":670},"s2Zo4",[555,672,673],{"class":602},"(",[555,675,676],{"class":561},"null",[555,678,679],{"class":602},")\n",[555,681,683],{"class":557,"line":682},6,[555,684,656],{"emptyLinePlaceholder":655},[555,686,688,691,693,696,699],{"class":557,"line":687},7,[555,689,690],{"class":670},"onUnmounted",[555,692,673],{"class":602},[555,694,695],{"class":561},"()",[555,697,698],{"class":569}," =>",[555,700,701],{"class":561}," {\n",[555,703,705,708,711,714,716,719],{"class":557,"line":704},8,[555,706,707],{"class":602},"  positionalAudioRef",[555,709,710],{"class":561},"?.",[555,712,713],{"class":602},"value",[555,715,710],{"class":561},[555,717,718],{"class":670},"dispose",[555,720,721],{"class":565},"()\n",[555,723,725,728],{"class":557,"line":724},9,[555,726,727],{"class":561},"}",[555,729,679],{"class":602},[555,731,733,736,738],{"class":557,"line":732},10,[555,734,735],{"class":561},"\u003C/",[555,737,566],{"class":565},[555,739,588],{"class":561},[555,741,743],{"class":557,"line":742},11,[555,744,656],{"emptyLinePlaceholder":655},[555,746,748,750,753],{"class":557,"line":747},12,[555,749,562],{"class":561},[555,751,752],{"class":565},"template",[555,754,588],{"class":561},[555,756,758,761,764],{"class":557,"line":757},13,[555,759,760],{"class":561},"  \u003C",[555,762,763],{"class":565},"TresCanvas",[555,765,588],{"class":561},[555,767,769,772,774,777,779,781,784,786],{"class":557,"line":768},14,[555,770,771],{"class":561},"    \u003C",[555,773,201],{"class":565},[555,775,776],{"class":569}," :args",[555,778,576],{"class":561},[555,780,579],{"class":561},[555,782,783],{"class":582},"[1, 1, 1]",[555,785,579],{"class":561},[555,787,588],{"class":561},[555,789,791,794,797],{"class":557,"line":790},15,[555,792,793],{"class":561},"      \u003C",[555,795,796],{"class":565},"TresMeshNormalMaterial",[555,798,799],{"class":561}," />\n",[555,801,803,805,808],{"class":557,"line":802},16,[555,804,793],{"class":561},[555,806,807],{"class":565},"Suspense",[555,809,588],{"class":561},[555,811,813,816],{"class":812,"line":547},[557,592],[555,814,815],{"class":561},"        \u003C",[555,817,818],{"class":565},"PositionalAudio\n",[555,820,822,825,827,829,832],{"class":821,"line":548},[557,592],[555,823,824],{"class":569},"          ref",[555,826,576],{"class":561},[555,828,579],{"class":561},[555,830,831],{"class":582},"positionalAudioRef",[555,833,834],{"class":561},"\"\n",[555,836,838,841,843,845,848],{"class":837,"line":549},[557,592],[555,839,840],{"class":569},"          url",[555,842,576],{"class":561},[555,844,579],{"class":561},[555,846,847],{"class":582},"your-sound.mp3",[555,849,834],{"class":561},[555,851,853],{"class":557,"line":852},20,[555,854,855],{"class":561},"        />\n",[555,857,859,862,864],{"class":557,"line":858},21,[555,860,861],{"class":561},"      \u003C/",[555,863,807],{"class":565},[555,865,588],{"class":561},[555,867,869,872,874],{"class":557,"line":868},22,[555,870,871],{"class":561},"    \u003C/",[555,873,201],{"class":565},[555,875,588],{"class":561},[555,877,879,882,884],{"class":557,"line":878},23,[555,880,881],{"class":561},"  \u003C/",[555,883,763],{"class":565},[555,885,588],{"class":561},[555,887,889,891,893],{"class":557,"line":888},24,[555,890,735],{"class":561},[555,892,752],{"class":565},[555,894,588],{"class":561},[896,897,898],"prose-warning",{},[490,899,900,901,904,905,912,913,916,917,920,921,924],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[494,902,903],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[499,906,909],{"href":907,"rel":908},"https://goo.gl/7K7WLu",[503],[494,910,911],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[494,914,915],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[494,918,919],{},":ready=\"true\""," and ",[494,922,923],{},"autoplay=\"true\""," for a direct launch.",[521,926,928],{"id":927},"how-does-it-work","How does it work?",[930,931],"img",{"className":932,"src":934,"alt":935},[933],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[521,937,939],{"id":938},"props","Props",[941,942,943,960],"table",{},[944,945,946],"thead",{},[947,948,949,954,957],"tr",{},[950,951,953],"th",{"align":952},"left","Prop",[950,955,956],{"align":952},"Description",[950,958,959],{},"Default",[961,962,963,983,1009,1032,1065,1083,1099,1116,1137],"tbody",{},[947,964,965,971,981],{},[966,967,968],"td",{"align":952},[969,970,534],"strong",{},[966,972,973,976,977,980],{"align":952},[494,974,975],{},"string"," - ",[969,978,979],{},"required"," — The path or URL to the file.",[966,982],{},[947,984,985,990,1004],{},[966,986,987],{"align":952},[969,988,989],{},"helper",[966,991,992,995,996,999,1000],{"align":952},[494,993,994],{},"boolean"," — Selects whether helper mode is enabled. ",[997,998],"br",{}," ",[1001,1002,1003],"em",{},"(Useful for visualising the angle of sound propagation)",[966,1005,1006],{},[494,1007,1008],{},"false",[947,1010,1011,1016,1027],{},[966,1012,1013],{"align":952},[969,1014,1015],{},"distance",[966,1017,1018,1021,1022],{"align":952},[494,1019,1020],{},"number"," — The distance at which the volume reduction starts taking effect. ",[1001,1023,1024],{},[969,1025,1026],{},"A non-negative number.",[966,1028,1029],{},[494,1030,1031],{},"1",[947,1033,1034,1039,1061],{},[966,1035,1036],{"align":952},[969,1037,1038],{},"ready",[966,1040,1041,1043,1044,1046,1047,1050,1051,1054,1055,1058,1059],{"align":952},[494,1042,994],{}," — Tells ",[494,1045,507],{}," that ",[494,1048,1049],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[494,1052,1053],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[499,1056,907],{"href":907,"rel":1057},[503],"). ",[997,1060],{},[966,1062,1063],{},[494,1064,1008],{},[947,1066,1067,1071,1079],{},[966,1068,1069],{"align":952},[969,1070,1053],{},[966,1072,1073,1075,1076,1078],{"align":952},[494,1074,994],{}," — Selects whether the audio is launched automatically. Please refer to the ",[494,1077,1038],{}," prop for a better understanding of how to use autoplay.",[966,1080,1081],{},[494,1082,1008],{},[947,1084,1085,1090,1095],{},[966,1086,1087],{"align":952},[969,1088,1089],{},"loop",[966,1091,1092,1094],{"align":952},[494,1093,994],{}," — Specifies whether the audio should loop.",[966,1096,1097],{},[494,1098,1008],{},[947,1100,1101,1106,1111],{},[966,1102,1103],{"align":952},[969,1104,1105],{},"innerAngle",[966,1107,1108,1110],{"align":952},[494,1109,1020],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[966,1112,1113],{},[494,1114,1115],{},"360",[947,1117,1118,1123,1132],{},[966,1119,1120],{"align":952},[969,1121,1122],{},"outerAngle",[966,1124,1125,1127,1128,1131],{"align":952},[494,1126,1020],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[494,1129,1130],{},"outerGain"," prop.",[966,1133,1134],{},[494,1135,1136],{},"0",[947,1138,1139,1143,1154],{},[966,1140,1141],{"align":952},[969,1142,1130],{},[966,1144,1145,1147,1148,1150,1151,1153],{"align":952},[494,1146,1020],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[494,1149,1122],{}," prop. When the value is ",[494,1152,1136],{}," no sound can be heard.",[966,1155,1156],{},[494,1157,1136],{},[521,1159,1161],{"id":1160},"exposed-properties","Exposed properties",[941,1163,1164,1173],{},[944,1165,1166],{},[947,1167,1168,1171],{},[950,1169,1170],{"align":952},"Event",[950,1172,956],{"align":952},[961,1174,1175,1189,1202,1215,1228],{},[947,1176,1177,1182],{},[966,1178,1179],{"align":952},[494,1180,1181],{},"instance",[966,1183,1184,1185,1188],{"align":952},"Instance reference — Inheritance of ",[499,1186,463],{"href":501,"rel":1187},[503],".",[947,1190,1191,1196],{},[966,1192,1193],{"align":952},[494,1194,1195],{},"play()",[966,1197,1198,1199],{"align":952},"Play audio — ",[1001,1200,1201],{},"Cannot be fired if audio is already running.",[947,1203,1204,1209],{},[966,1205,1206],{"align":952},[494,1207,1208],{},"pause()",[966,1210,1211,1212],{"align":952},"Pause audio — ",[1001,1213,1214],{},"Cannot be fired if audio is already paused.",[947,1216,1217,1222],{},[966,1218,1219],{"align":952},[494,1220,1221],{},"stop()",[966,1223,1224,1225],{"align":952},"Stop audio — ",[1001,1226,1227],{},"Cannot be fired if audio is already stopped.",[947,1229,1230,1235],{},[966,1231,1232],{"align":952},[494,1233,1234],{},"dispose()",[966,1236,1237],{"align":952},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[541,1239,1243],{"className":1240,"code":1241,"language":1242,"meta":551,"style":551},"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",[494,1244,1245,1261,1265,1291,1295,1325,1353,1357,1390,1394,1425,1456,1485],{"__ignoreMap":551},[555,1246,1247,1249,1251,1253,1255,1257,1259],{"class":557,"line":558},[555,1248,662],{"class":569},[555,1250,665],{"class":602},[555,1252,576],{"class":561},[555,1254,639],{"class":670},[555,1256,673],{"class":602},[555,1258,676],{"class":561},[555,1260,679],{"class":602},[555,1262,1263],{"class":557,"line":546},[555,1264,656],{"emptyLinePlaceholder":655},[555,1266,1267,1270,1272,1275,1278,1280,1282,1284,1287],{"class":557,"line":627},[555,1268,1269],{"class":602},"console",[555,1271,1188],{"class":561},[555,1273,1274],{"class":670},"log",[555,1276,1277],{"class":602},"(positionalAudioRef",[555,1279,1188],{"class":561},[555,1281,713],{"class":602},[555,1283,1188],{"class":561},[555,1285,1286],{"class":602},"instance) ",[555,1288,1290],{"class":1289},"sHwdD","// instance properties\n",[555,1292,1293],{"class":557,"line":652},[555,1294,656],{"emptyLinePlaceholder":655},[555,1296,1297,1299,1302,1304,1307,1311,1314,1318,1321,1323],{"class":557,"line":659},[555,1298,662],{"class":569},[555,1300,1301],{"class":602}," handlerAudio ",[555,1303,576],{"class":561},[555,1305,1306],{"class":561}," (",[555,1308,1310],{"class":1309},"sHdIc","action",[555,1312,1313],{"class":561},":",[555,1315,1317],{"class":1316},"sBMFI"," string",[555,1319,1320],{"class":561},")",[555,1322,698],{"class":569},[555,1324,701],{"class":561},[555,1326,1327,1330,1332,1335,1337,1339,1341,1344,1347,1350],{"class":557,"line":682},[555,1328,1329],{"class":595},"  if",[555,1331,1306],{"class":565},[555,1333,1334],{"class":561},"!",[555,1336,831],{"class":602},[555,1338,1188],{"class":561},[555,1340,713],{"class":602},[555,1342,1343],{"class":565},") ",[555,1345,1346],{"class":561},"{",[555,1348,1349],{"class":595}," return",[555,1351,1352],{"class":561}," }\n",[555,1354,1355],{"class":557,"line":687},[555,1356,656],{"emptyLinePlaceholder":655},[555,1358,1359,1362,1364,1367,1369,1372,1374,1377,1379,1382,1385,1387],{"class":557,"line":704},[555,1360,1361],{"class":569},"  const",[555,1363,599],{"class":561},[555,1365,1366],{"class":602}," play",[555,1368,606],{"class":561},[555,1370,1371],{"class":602}," pause",[555,1373,606],{"class":561},[555,1375,1376],{"class":602}," stop",[555,1378,612],{"class":561},[555,1380,1381],{"class":561}," =",[555,1383,1384],{"class":602}," positionalAudioRef",[555,1386,1188],{"class":561},[555,1388,1389],{"class":602},"value\n",[555,1391,1392],{"class":557,"line":724},[555,1393,656],{"emptyLinePlaceholder":655},[555,1395,1396,1398,1400,1402,1405,1407,1410,1413,1415,1417,1419,1422],{"class":557,"line":732},[555,1397,1329],{"class":595},[555,1399,1306],{"class":565},[555,1401,1310],{"class":602},[555,1403,1404],{"class":561}," ===",[555,1406,618],{"class":561},[555,1408,1409],{"class":582},"play",[555,1411,1412],{"class":561},"'",[555,1414,1343],{"class":565},[555,1416,1346],{"class":561},[555,1418,1366],{"class":670},[555,1420,1421],{"class":565},"() ",[555,1423,1424],{"class":561},"}\n",[555,1426,1427,1430,1433,1435,1437,1439,1441,1444,1446,1448,1450,1452,1454],{"class":557,"line":742},[555,1428,1429],{"class":595},"  else",[555,1431,1432],{"class":595}," if",[555,1434,1306],{"class":565},[555,1436,1310],{"class":602},[555,1438,1404],{"class":561},[555,1440,618],{"class":561},[555,1442,1443],{"class":582},"pause",[555,1445,1412],{"class":561},[555,1447,1343],{"class":565},[555,1449,1346],{"class":561},[555,1451,1371],{"class":670},[555,1453,1421],{"class":565},[555,1455,1424],{"class":561},[555,1457,1458,1460,1462,1464,1466,1468,1470,1473,1475,1477,1479,1481,1483],{"class":557,"line":747},[555,1459,1429],{"class":595},[555,1461,1432],{"class":595},[555,1463,1306],{"class":565},[555,1465,1310],{"class":602},[555,1467,1404],{"class":561},[555,1469,618],{"class":561},[555,1471,1472],{"class":582},"stop",[555,1474,1412],{"class":561},[555,1476,1343],{"class":565},[555,1478,1346],{"class":561},[555,1480,1376],{"class":670},[555,1482,1421],{"class":565},[555,1484,1424],{"class":561},[555,1486,1487],{"class":557,"line":757},[555,1488,1424],{"class":561},[541,1490,1492],{"className":543,"code":1491,"language":550,"meta":551,"style":551},"\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",[494,1493,1494,1502,1532,1559,1586,1590,1598,1606,1614,1622,1630,1638,1646],{"__ignoreMap":551},[555,1495,1496,1498,1500],{"class":557,"line":558},[555,1497,562],{"class":561},[555,1499,752],{"class":565},[555,1501,588],{"class":561},[555,1503,1504,1506,1509,1512,1514,1516,1519,1521,1524,1526,1528,1530],{"class":557,"line":546},[555,1505,760],{"class":561},[555,1507,1508],{"class":565},"button",[555,1510,1511],{"class":569}," @click",[555,1513,576],{"class":561},[555,1515,579],{"class":561},[555,1517,1518],{"class":582},"handlerAudio('play')",[555,1520,579],{"class":561},[555,1522,1523],{"class":561},">",[555,1525,1409],{"class":602},[555,1527,735],{"class":561},[555,1529,1508],{"class":565},[555,1531,588],{"class":561},[555,1533,1534,1536,1538,1540,1542,1544,1547,1549,1551,1553,1555,1557],{"class":557,"line":627},[555,1535,760],{"class":561},[555,1537,1508],{"class":565},[555,1539,1511],{"class":569},[555,1541,576],{"class":561},[555,1543,579],{"class":561},[555,1545,1546],{"class":582},"handlerAudio('pause')",[555,1548,579],{"class":561},[555,1550,1523],{"class":561},[555,1552,1443],{"class":602},[555,1554,735],{"class":561},[555,1556,1508],{"class":565},[555,1558,588],{"class":561},[555,1560,1561,1563,1565,1567,1569,1571,1574,1576,1578,1580,1582,1584],{"class":557,"line":652},[555,1562,760],{"class":561},[555,1564,1508],{"class":565},[555,1566,1511],{"class":569},[555,1568,576],{"class":561},[555,1570,579],{"class":561},[555,1572,1573],{"class":582},"handlerAudio('stop')",[555,1575,579],{"class":561},[555,1577,1523],{"class":561},[555,1579,1472],{"class":602},[555,1581,735],{"class":561},[555,1583,1508],{"class":565},[555,1585,588],{"class":561},[555,1587,1588],{"class":557,"line":659},[555,1589,656],{"emptyLinePlaceholder":655},[555,1591,1592,1594,1596],{"class":557,"line":682},[555,1593,760],{"class":561},[555,1595,763],{"class":565},[555,1597,588],{"class":561},[555,1599,1600,1602,1604],{"class":557,"line":687},[555,1601,771],{"class":561},[555,1603,265],{"class":565},[555,1605,588],{"class":561},[555,1607,1608,1610,1612],{"class":557,"line":704},[555,1609,793],{"class":561},[555,1611,807],{"class":565},[555,1613,588],{"class":561},[555,1615,1616,1618,1620],{"class":557,"line":724},[555,1617,815],{"class":561},[555,1619,463],{"class":565},[555,1621,799],{"class":561},[555,1623,1624,1626,1628],{"class":557,"line":732},[555,1625,861],{"class":561},[555,1627,807],{"class":565},[555,1629,588],{"class":561},[555,1631,1632,1634,1636],{"class":557,"line":742},[555,1633,871],{"class":561},[555,1635,265],{"class":565},[555,1637,588],{"class":561},[555,1639,1640,1642,1644],{"class":557,"line":747},[555,1641,881],{"class":561},[555,1643,763],{"class":565},[555,1645,588],{"class":561},[555,1647,1648,1650,1652],{"class":557,"line":757},[555,1649,735],{"class":561},[555,1651,752],{"class":565},[555,1653,588],{"class":561},[521,1655,1657],{"id":1656},"events","Events",[941,1659,1660,1668],{},[944,1661,1662],{},[947,1663,1664,1666],{},[950,1665,1170],{"align":952},[950,1667,956],{"align":952},[961,1669,1670],{},[947,1671,1672,1677],{},[966,1673,1674],{"align":952},[494,1675,1676],{},"is-playing",[966,1678,1679,1680,999,1682],{"align":952},"Triggered when the audio changes its state (play, pause, or stop) ",[997,1681],{},[494,1683,1684],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1686,1687,1688],"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":551,"searchDepth":558,"depth":546,"links":1690},[1691,1692,1693,1694,1695],{"id":523,"depth":546,"text":15},{"id":927,"depth":546,"text":928},{"id":938,"depth":546,"text":939},{"id":1160,"depth":546,"text":1161},{"id":1656,"depth":546,"text":1657},"Spatially positioned audio in 3D space.","md",null,{},{"title":463,"description":1696},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",[1703,1705],{"title":459,"path":460,"stem":461,"description":1704,"children":-1},"Create parallax effects based on mouse movement.",{"title":467,"path":468,"stem":469,"description":1706,"children":-1},"Composable for managing model animations with AnimationMixer.",1782052435361]