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