feat(cientos/positional-audio): delete medias, modifications doc

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

@@ -19,7 +19,8 @@ const innerAngle = ref(195)
 const outerAngle = ref(260)
 const outerGain = ref(0.4)
 
-const model = await useGLTF('/positional-audio/pingpong.glb', { draco: true })
+// eslint-disable-next-line max-len
+const model = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/positional-audio/ping-pong.glb', { draco: true })
 
 const onBallBounce = () => {
   const iteration = tl.iteration() % 2
@@ -31,7 +32,7 @@ const onBallBounce = () => {
 
 watch([ballRef, ready], ([ball]) => {
   if (!ball?.value || !ready.value) return
-  
+
   ctx.add(() => {
     tl = gsap
       .timeline({ repeat: -1, yoyo: true, onRepeat: onBallBounce })
@@ -40,11 +41,11 @@ watch([ballRef, ready], ([ball]) => {
 })
 
 onMounted(() => {
-  ctx = gsap.context((self) => {}, ballRef?.value) 
+  ctx = gsap.context((self) => { }, ballRef?.value)
 })
 
 onUnmounted(() => {
-  ctx?.revert() 
+  ctx?.revert()
   positionalAudioRef?.value?.dispose()
 })
 </script>
@@ -92,7 +93,7 @@ onUnmounted(() => {
           :inner-angle="innerAngle"
           :outer-angle="outerAngle"
           :outer-gain="outerGain"
-          url="/positional-audio/ping.mp3"
+          url="https://raw.githubusercontent.com/Tresjs/assets/main/music/ping-pong.mp3"
         />
       </Suspense>
     </Sphere>
@@ -143,7 +144,8 @@ onUnmounted(() => {
   column-gap: 5px;
 }
 
-.ready button, .controls button {
+.ready button,
+.controls button {
   padding: 5px 10px;
   background: #1B1C1E;
   border: 1px solid #161618;

docs/.vitepress/theme/components/PositionalAudioDemoHelper.vue

@@ -100,8 +100,8 @@ onUnmounted(() => {
           :outer-angle="outerAngle.value"
           :outer-gain="outerGain.value"
           :helper="helper.value"
-          url="/positional-audio/sound1.mp3"
-        />
+          url="https://raw.githubusercontent.com/Tresjs/assets/main/music/beat-1.mp3"
+        /> 
       </Suspense>
     </Box>
 

docs/guide/abstractions/positional-audio.md

@@ -6,30 +6,53 @@
 
 ---
 
-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.
+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 sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.
 
 `<PositionalAudio>` includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the [PositionalAudioHelper](https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper) class.
 
-::: info
-This component is still under development, so please report any problems or suggestions on the [@tresjs/cientos](https://github.com/Tresjs/cientos) repository on GitHub.
-:::
-
 ## Usage
 
 The `<PositionalAudio>` component is very simple to set up and use, allowing you to bring your 3D scenes to life.  All you need to do is call the `<PositionalAudio>` component and set the `url`. It must be wrapped around the `<Suspense>` component to enable it to load your audio asynchronously. 💥
 
+```vue
+<script setup lang="ts">
+import { shallowRef, onUnmounted } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { PositionalAudio, Box } from '@tresjs/cientos'
+
+const positionalAudioRef = shallowRef(null)
+
+onUnmounted(() => {
+  positionalAudioRef?.value?.dispose()
+})
+</script>
+
+<template>
+  <Box :args="[1, 1, 1]">
+    <TresMeshNormalMaterial />
+    <Suspense>
+      <PositionalAudio
+        ref="positionalAudioRef"
+        loop
+        helper
+        url="https://raw.githubusercontent.com/Tresjs/assets/main/music/beat-1.mp3"
+      /> 
+    </Suspense>
+  </Box>
+</template>
+```
+
 <DocsDemo>
   <PositionalAudioDemoHelper />
 </DocsDemo>
 
-<<< @/.vitepress/theme/components/PositionalAudioDemoHelper.vue{4,15,71,93-105}
-
 :::warning
 AudioContext is authorised when an user gesture has been made on the page. `:autoplay="true"` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu).
 If you are sure that there will be a user gesture before your `<PositionAudio>` component appears/is created, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch.
 :::
 
-<img src="/positional-audio/sketch.jpg" />
+## How does it work?
+<img class="mx-auto" src="/positional-audio/sketch.jpg" />
 
 ## Props
 

playground/src/pages/abstractions/PositionalAudio.vue

@@ -73,7 +73,7 @@ const onContinue = () => {
           :outer-gain=".2"
           :distance="2"
           helper
-          url="/positional-audio/sound.mp3"
+          url="https://raw.githubusercontent.com/Tresjs/assets/main/music/beat-1.mp3"
         />
       </Suspense>
     </Box>

src/core/abstractions/PositionalAudio.vue

@@ -78,7 +78,7 @@ const dispose = () => {
 }
 
 defineExpose({
-  ref: positionalAudioRef,
+  root: positionalAudioRef,
   play: playAudio,
   stop: stopAudio,
   pause: pauseAudio,