front/src/components/Promo/main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { Object3D, Vector3 } from 'three';
 import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { vLightHelper } from '@tresjs/core'
@@ -49,12 +49,21 @@ onLoop(() => {
         spot_light_target.value.translateX(step)
     }
 })
+
+const audio_played = ref<boolean>(false)
+const audio = new Audio('/sea.ogg')
+const playAudio = () => {
+    if (!audio_played.value) {
+        audio_played.value = true
+        audio.play()
+    }
+}
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
         Загрузка {{ progress }}%
     </div>
-    <div :class="[{ 'invisible': !hasFinishLoading }]">
+    <div :class="[{ 'invisible': !hasFinishLoading }]" @click="playAudio">
         <TresCanvas window-size alpha shadows clear-color="#87ceeb">
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />

front/src/components/Promo/modelItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Box3, Vector3 } from 'three';
-import { PositionalAudio, useGLTF, } from '@tresjs/cientos'
-import { onMounted, onUnmounted, shallowRef } from 'vue';
+import { useGLTF, } from '@tresjs/cientos'
 
 const props = defineProps(['modelUrl', 'onClick'])
 
@@ -20,21 +19,12 @@ const show_alert = () => {
 }
 scene.receiveShadow = true
 scene.castShadow = true
-
-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" />

front/src/components/Promo/models.vue

@@ -30,7 +30,6 @@ renderer.value.toneMapping = ACESFilmicToneMapping
 renderer.value.toneMappingExposure = 0.15
 renderer.value.shadowMap.enabled = true
 
-console.log(renderer)
 const repeat = 20
 
 map.wrapS = RepeatWrapping