feat(cientos/positional-audio): fix issues async, add gui example doc

docs/.vitepress/theme/assets/positional-audio/demo.css

@@ -0,0 +1,29 @@
+.ready {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 99;
+    background-color: rgba(0, 0, 0, .75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(5px);
+}
+
+.controls {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(5px);
+    top: 25px;
+    left: 25px;
+    column-gap: 5px;
+}
+
+button {
+    padding: 5px 10px;
+    background: #1B1C1E;
+    border: 1px solid #161618;
+}

docs/.vitepress/theme/components/PositionalAudioDemo.vue

@@ -1,27 +1,51 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, onUnmounted } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, PositionalAudio, Box } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 
 const gl = {
-  clearColor: '##FAFAFA',
+  clearColor: '#FAFAFA',
   shadows: true,
   alpha: false,
 }
 
 const ready = ref(false)
 const positionalAudioRef = shallowRef(null);
 
-const { helper } = useControls({
+const { helper, innerAngle, outerAngle, outerGain } = useControls({
   helper: true,
+  innerAngle: {
+    label: 'innerAngle',
+    value: 180,
+    min: 0,
+    max: 360,
+    step: 1
+  },
+  outerAngle: {
+    label: 'outerAngle',
+    value: 280,
+    min: 0,
+    max: 360,
+    step: 1
+  },
+  outerGain: {
+    label: 'outerGain',
+    value: 0,
+    min: 0,
+    max: 1,
+    step: .01
+  },
+})
+
+onUnmounted(() => {
+  const { exposed } = positionalAudioRef.value.$
+  exposed.dispose()
 })
 
-console.log(helper)
 const handlerAudio = (action: string) => {
   const { exposed } = positionalAudioRef.value.$
-  // console.log(exposed.ref)
 
   if (action === 'play') {
     exposed.play()
@@ -52,10 +76,10 @@ const handlerAudio = (action: string) => {
 
     <Box :args="[1, 1, 1]">
       <TresMeshNormalMaterial />
-
       <Suspense>
-        <PositionalAudio :ready="ready" ref="positionalAudioRef" :innerAngle="180" :outerAngle="230" :outerGain=".1"
-          :distance="2" :helper="helper" url="/positional-audio/sound1.mp3" />
+        <PositionalAudio ref="positionalAudioRef" loop :ready :innerAngle="innerAngle.value"
+          :outerAngle="outerAngle.value" :outerGain="outerGain.value" :helper="helper.value"
+          url="/positional-audio/sound1.mp3" />
       </Suspense>
     </Box>
 
@@ -68,33 +92,5 @@ const handlerAudio = (action: string) => {
 </template>
 
 <style scoped>
-.ready {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 99;
-  background-color: rgba(0, 0, 0, .75);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(5px);
-}
-
-.controls {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(5px);
-  top: 25px;
-  left: 25px;
-  column-gap: 5px;
-}
-
-button {
-  padding: 5px 10px;
-  background: #1B1C1E;
-  border: 1px solid #161618;
-}
+@import "../assets/positional-audio/demo.css";
 </style>

docs/guide/abstractions/positional-audio.md

@@ -14,44 +14,16 @@ This component is still under development, so please report any problems or sugg
 
 ## Usage
 
-::: info
-
-:::
-
-::: warning
-
-:::
-
-### Basic
 Description
 
 <DocsDemo>
   <PositionalAudioDemo />
 </DocsDemo>
 
-<<< @/.vitepress/theme/components/PositionalAudioDemo.vue{3-4,6-7,16-17}
-
-See [decalsDatas](#decal-datas) part to see the contents of the Decal's datas object of the demo.
-
-### V-For
-Description
-
-Demo
-
-Code
+<<< @/.vitepress/theme/components/PositionalAudioDemo.vue{4,15,21-24,58-61}
 
 ## Props
 
 | Prop              | Description                                          | Default                   |
 | :---------------- | :--------------------------------------------------- | ------------------------- |
-| **debug**         | `boolean` — Debug mode (Useful for positioning Decal)            | `false`                   |
-| **map**           | [`Texture`](https://threejs.org/docs/#api/en/textures/Texture) or `null` — The color map. The map should be applied to the `<Decal>` when no material is applied as a child. (See [usages](#usage) for more details)     | `null`                       |
-| **mesh**         | [`Mesh`](https://threejs.org/docs/#api/en/objects/Mesh) or `null` — Define the surface to which the decal must attach using the mesh prop. (See [Mesh Prop](#mesh-prop) part for more details)            | `null`                   |
-| **position**         | `number[]` — Position of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3)         | `[-9999,-9999,-9999]`                   |
-| **orientation**         | `number[]` — Orientation of the decal. Transformed into [`Euler`](https://threejs.org/docs/#api/en/math/Euler)         | `[0,0,0]`                   |
-| **size**         | `number[]` — Size of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3)           | `[1,1,1]`                   |
-| **normal**         | `number[]` — Normal of the decal. Transformed into [`Vector3`](https://threejs.org/docs/#api/en/math/Vector3)        | `[0,0,0]`                   |
-| **polygonOffsetFactor**         | `number` — Sets the polygon offset factor | `-10`                   |
-| **depthTest**         | `boolean` — Whether to have depth test enabled when rendering this material. | `true`                   |
-| **depthWrite**         | `boolean` — Whether rendering this material has any effect on the depth buffer. | `false`                   |
-| **order**         | `number` — This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. <br /> **Sorting is from lowest to highest.** | `Math.round(Math.random() * 100)`                   |
+| **helper**         | `boolean` — Helper mode (Useful for visualising the angle of sound propagation)            | `false`                   |

src/core/abstractions/PositionalAudio.vue

@@ -90,7 +90,7 @@ const updatePositionalAudio = () => {
     positionalAudioRef.value.setRefDistance(distance.value)
     positionalAudioRef.value.setLoop(loop.value)
     positionalAudioRef.value.setDirectionalCone(innerAngle.value, outerAngle.value, outerGain.value);
-    // positionalAudioHelperRef.value.update();
+    positionalAudioHelperRef?.value?.update()
 }
 
 const createHelper = () => {
@@ -100,11 +100,14 @@ const createHelper = () => {
     const boxParent = new Box3().setFromObject(parent);
     const depthParent = (boxParent.max.z - boxParent.min.z) * 2
 
-    positionalAudioHelperRef.value = new PositionalAudioHelper(positionalAudioRef.value, depthParent, 32, 32);
+    positionalAudioHelperRef.value = new PositionalAudioHelper(positionalAudioRef.value, depthParent, 32, 16);
     positionalAudioRef.value.add(positionalAudioHelperRef.value);
+    positionalAudioHelperRef.value.update()
 }
 
 const disposeHelper = () => {
+    if (!positionalAudioRef?.value || !positionalAudioHelperRef?.value) return
+
     positionalAudioHelperRef?.value?.dispose();
     positionalAudioRef?.value?.remove(positionalAudioHelperRef?.value);
 }
@@ -135,11 +138,18 @@ const disposeAudio = () => {
     }
 }
 
+const dispose = () => {
+    disposeAudio()
+    disposeHelper()
+    camera?.value?.remove(listener);
+}
+
 defineExpose({
     ref: positionalAudioRef,
     play: playAudio,
     stop: stopAudio,
-    pause: pauseAudio
+    pause: pauseAudio,
+    dispose: dispose
 })
 </script>