feat(cientos/positional-audio): adding more logic and examples for pl…

…ayground

playground/src/pages/abstractions/PositionalAudio.vue

@@ -1,18 +1,46 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, PositionalAudio, Box, Plane } from '@tresjs/cientos'
-import type { Mesh } from 'three'
+import { OrbitControls, PositionalAudio, Box, Plane, } from '@tresjs/cientos'
 
 const gl = {
-  clearColor: '#ffDBC5',
+  clearColor: '#82DBC5',
   shadows: true,
   alpha: false,
 }
 
-const meshRef = shallowRef<Mesh | null>(null);
+const ready = ref(false)
+const positionalAudio = shallowRef(null);
+
+const handlerAudio = (action: string) => {
+  const { exposed } = positionalAudio.value.$
+
+  // console.log(exposed.ref)
+
+  if (action === 'play') {
+    exposed.play()
+  } else if (action === 'pause') {
+    exposed.pause()
+  } else if (action === 'stop') {
+    exposed.stop()
+  }
+}
+
+const onContinue = () => {
+  ready.value = true
+}
 </script>
 
 <template>
+  <div v-if="!ready" class="playground-positional-audio__ready">
+    <button @click="onContinue">click to continue</button>
+  </div>
+
+  <div v-if="ready" class="playground-positional-audio__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 />
@@ -21,8 +49,8 @@ const meshRef = shallowRef<Mesh | null>(null);
       <TresMeshNormalMaterial />
 
       <Suspense>
-        <PositionalAudio :innerAngle="220" :outerAngle="220" :outerGain=".2" :distance="2" helper
-          url="/positional-audio/sound1.mp3" />
+        <PositionalAudio :ready="ready" ref="positionalAudio" :innerAngle="220" :outerAngle="220" :outerGain=".2"
+          :distance="2" helper url="/positional-audio/sound1.mp3" />
       </Suspense>
     </Box>
 
@@ -33,3 +61,33 @@ const meshRef = shallowRef<Mesh | null>(null);
     <TresGridHelper :position="[0, -.01, 0]" :args="[10, 10]" />
   </TresCanvas>
 </template>
+
+<style scoped>
+.playground-positional-audio__ready {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, .75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+}
+
+.playground-positional-audio__controls {
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+  top: 25px;
+  left: 25px;
+  column-gap: 5px;
+}
+
+.playground-positional-audio__controls button {
+  padding: 5px 10px;
+}
+</style>

src/core/abstractions/PositionalAudio.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { withDefaults, onBeforeUnmount, onUnmounted, defineProps, shallowRef, watch, toRefs, shallowReactive, onMounted } from 'vue';
+import { defineExpose, withDefaults, onBeforeUnmount, onUnmounted, defineProps, shallowRef, watch, toRefs, shallowReactive, onMounted } from 'vue';
 import { Box3, AudioLoader, AudioListener, PositionalAudio } from 'three'
 import { useTresContext, useLoader } from '@tresjs/core'
 import { PositionalAudioHelper } from 'three/examples/jsm/helpers/PositionalAudioHelper'
@@ -9,6 +9,7 @@ import { PositionalAudioHelper } from 'three/examples/jsm/helpers/PositionalAudi
 // TODO: Add & Dynamize : setDistanceModel 'STRING' from https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio.setDistanceModel
 
 export interface PositionalAudioProps {
+    ready: boolean,
     url: string,
     distance?: number,
     helper?: boolean,
@@ -20,16 +21,17 @@ export interface PositionalAudioProps {
 }
 
 const props = withDefaults(defineProps<PositionalAudioProps>(), {
+    ready: false,
     helper: false,
     distance: 2,
-    loop: true,
-    autoplay: true,
+    loop: false,
+    autoplay: false,
     innerAngle: 360,
     outerAngle: 360,
     outerGain: 0,
 });
 
-const { url, distance, helper, loop, autoplay, innerAngle, outerAngle, outerGain } = toRefs(props);
+const { ready, url, distance, helper, loop, autoplay, innerAngle, outerAngle, outerGain } = toRefs(props);
 
 const { camera } = useTresContext()
 
@@ -54,7 +56,7 @@ watch(helper, () => {
     }
 })
 
-watch([distance, loop, buffer, positionalAudioRef, innerAngle, outerAngle, outerGain], () => {
+watch([distance, loop, buffer, positionalAudioRef, innerAngle, outerAngle, outerGain, ready, autoplay], () => {
     updatePositionalAudio()
 })
 
@@ -84,7 +86,8 @@ const updatePositionalAudio = () => {
     positionalAudioRef.value.setDirectionalCone(innerAngle.value, outerAngle.value, outerGain.value);
     positionalAudioHelperRef.value.update();
 
-    if (autoplay.value && !positionalAudioRef.value.isPlaying) positionalAudioRef.value.play()
+    if (autoplay.value && ready.value) playAudio()
+    if (!autoplay.value && ready.value) stopAudio()
 }
 
 const createHelper = () => {
@@ -101,22 +104,37 @@ const disposeHelper = () => {
     positionalAudioRef?.value?.remove(positionalAudioHelperRef?.value);
 }
 
+const playAudio = () => {
+    if (!positionalAudioRef.value.isPlaying) positionalAudioRef.value.play()
+}
+
+const pauseAudio = () => {
+    if (positionalAudioRef.value.isPlaying) positionalAudioRef.value.pause()
+}
+
+const stopAudio = () => {
+    if (!positionalAudioRef.value) return
+
+    positionalAudioRef.value.stop();
+}
+
 const disposeAudio = () => {
     if (!positionalAudioRef?.value) return
 
-    const audio = positionalAudioRef.value;
+    stopAudio()
 
-    if (audio.isPlaying) {
-        audio.stop();
-    }
+    const audio = positionalAudioRef.value;
 
     if (audio.source && (audio.source as any)._connected) {
         audio.disconnect();
     }
 }
 
 defineExpose({
-    value: positionalAudioRef,
+    ref: positionalAudioRef,
+    play: playAudio,
+    stop: stopAudio,
+    pause: pauseAudio
 })
 </script>