From a76d6b700fd42d9a0198ef60cfaade4819e46639 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 3 Jun 2024 12:47:49 +0300
Subject: [PATCH] pos audio

---
 front/src/components/Promo/main.vue      |  1 -
 front/src/components/Promo/modelItem.vue | 13 +++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index c2681da..3ef7344 100644
--- a/front/src/components/Promo/main.vue
+++ b/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]" /> -->
diff --git a/front/src/components/Promo/modelItem.vue b/front/src/components/Promo/modelItem.vue
index 9faa88f..0a58c7a 100644
--- a/front/src/components/Promo/modelItem.vue
+++ b/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" />