pos audio

front/src/components/Promo/main.vue

@@ -57,7 +57,6 @@ onLoop(() => {
     <div :class="[{ 'invisible': !hasFinishLoading }]">
         <TresCanvas window-size alpha shadows clear-color="#87ceeb">
             <TresPerspectiveCamera :position="cameraPosition" />
-            <GlobalAudio src="/sea.ogg" :playTrigger="undefined" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
 
             <!-- <TresGridHelper :args="[50, 50]" /> -->

front/src/components/Promo/modelItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Box3, Vector3 } from 'three';
-import { useGLTF, } from '@tresjs/cientos'
+import { PositionalAudio, useGLTF, } from '@tresjs/cientos'
+import { onMounted, onUnmounted, shallowRef } from 'vue';
 
 const props = defineProps(['modelUrl', 'onClick'])
 
@@ -19,13 +20,21 @@ const show_alert = () => {
 }
 scene.receiveShadow = true
 scene.castShadow = true
-console.log(scene, props.modelUrl)
+
+const positionalAudioRef = shallowRef(null)
+
+onUnmounted(() => {
+    positionalAudioRef?.value?.dispose()
+})
 </script>
 <template>
     <TresGroup :posiion="[0, 0, 0]">
         <TresMesh :position="center" @click="show_alert" cast-shadow receive-shadow>
             <TresBoxGeometry :args="box_size" />
             <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
+            <Suspense>
+                <PositionalAudio ref="positionalAudioRef" url="/sea.ogg" helper />
+            </Suspense>
         </TresMesh>
         <TresMesh cast-shadow receive-shadow>
             <primitive :object="scene" />