feat(cientos/positional-audio): fix positional async helper and docum…

…entation

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

@@ -1,15 +1,51 @@
 <script setup lang="ts">
+import { ref, shallowRef } 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: '#82DBC5',
+  clearColor: '##FAFAFA',
   shadows: true,
   alpha: false,
 }
+
+const ready = ref(false)
+const positionalAudioRef = shallowRef(null);
+
+const { helper } = useControls({
+  helper: true,
+})
+
+console.log(helper)
+const handlerAudio = (action: string) => {
+  const { exposed } = positionalAudioRef.value.$
+  // console.log(exposed.ref)
+
+  if (action === 'play') {
+    exposed.play()
+  } else if (action === 'pause') {
+    exposed.pause()
+  } else if (action === 'stop') {
+    exposed.stop()
+  }
+}
 </script>
 
 <template>
+  <TresLeches class="important-left-initial important-right-2" />
+
+  <div v-if="!ready" class="ready">
+    <button @click="ready = true">click to continue</button>
+  </div>
+
+  <div v-if="ready" class="controls">
+    <button @click="handlerAudio('play')">play</button>
+    <button @click="handlerAudio('pause')">pause</button>
+    <button @click="handlerAudio('stop')">stop</button>
+  </div>
+
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />
@@ -18,15 +54,47 @@ const gl = {
       <TresMeshNormalMaterial />
 
       <Suspense>
-        <PositionalAudio :ready="ready" ref="positionalAudioRef" :innerAngle="220" :outerAngle="220" :outerGain=".2"
-          :distance="2" helper url="/positional-audio/sound1.mp3" />
+        <PositionalAudio :ready="ready" ref="positionalAudioRef" :innerAngle="180" :outerAngle="230" :outerGain=".1"
+          :distance="2" :helper="helper" url="/positional-audio/sound1.mp3" />
       </Suspense>
     </Box>
 
     <Box :args="[4, 2, 0.1]" :position="[0, 0, -1]">
       <TresMeshBasicMaterial color="#ff0000" transparent :opacity="0.5" />
     </Box>
 
-    <TresGridHelper :position="[0, -.01, 0]" :args="[10, 10]" />
+    <TresGridHelper :position="[0, -.01, 0]" :args="[10, 10, '#c1c1c1', '#c1c1c1']" />
   </TresCanvas>
-</template>
+</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;
+}
+</style>

docs/guide/abstractions/positional-audio.md

@@ -1,7 +1,7 @@
 # Positional Audio
 
 <DocsDemo>
-  <PositionalAudioDemo />
+  <!-- <PositionalAudioDemo /> -->
 </DocsDemo>
 
 The `cientos` package provides an abstraction of the [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio), `<PositionalAudio>` is an object specifically designed for controlling sound in a scene graph space. This allows for the simulation of various audio environments, creating a more immersive user experience.
@@ -22,11 +22,8 @@ This component is still under development, so please report any problems or sugg
 
 :::
 
-### Minimal
-
-The minimal version is very easy to set up: you just need to insert a `<Decal>` component with a map props for the Texture and a call to `v-bind`.
-
-*The default material is [MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/MeshBasicMaterial)*.
+### Basic
+Description
 
 <DocsDemo>
   <PositionalAudioDemo />

playground/src/pages/abstractions/PositionalAudio.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, PositionalAudio, Box, } from '@tresjs/cientos'
+import { OrbitControls, PositionalAudio, Box } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',

src/core/abstractions/PositionalAudio.vue

@@ -45,7 +45,7 @@ buffer.value = await useLoader(AudioLoader, url.value)
 watch(positionalAudioRef, () => {
     if (!positionalAudioRef?.value) return
 
-    createHelper()
+    if (helper.value) createHelper()
 })
 
 watch(helper, () => {
@@ -56,7 +56,14 @@ watch(helper, () => {
     }
 })
 
-watch([distance, loop, buffer, positionalAudioRef, innerAngle, outerAngle, outerGain, ready, autoplay], () => {
+watch(ready, () => {
+    if (ready.value) updatePositionalAudio()
+
+    if (autoplay.value && ready.value) playAudio()
+    if (!autoplay.value && ready.value) stopAudio()
+})
+
+watch([distance, loop, buffer, innerAngle, outerAngle, outerGain, autoplay], () => {
     updatePositionalAudio()
 })
 
@@ -82,15 +89,13 @@ const updatePositionalAudio = () => {
     positionalAudioRef.value.setBuffer(buffer.value)
     positionalAudioRef.value.setRefDistance(distance.value)
     positionalAudioRef.value.setLoop(loop.value)
-
     positionalAudioRef.value.setDirectionalCone(innerAngle.value, outerAngle.value, outerGain.value);
-    positionalAudioHelperRef.value.update();
-
-    if (autoplay.value && ready.value) playAudio()
-    if (!autoplay.value && ready.value) stopAudio()
+    // positionalAudioHelperRef.value.update();
 }
 
 const createHelper = () => {
+    updatePositionalAudio()
+
     const parent = positionalAudioRef.value?.parent
     const boxParent = new Box3().setFromObject(parent);
     const depthParent = (boxParent.max.z - boxParent.min.z) * 2