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