diff --git a/docs/.vitepress/theme/components/PositionalAudioDemo.vue b/docs/.vitepress/theme/components/PositionalAudioDemo.vue index 70e8c258..92440e00 100644 --- a/docs/.vitepress/theme/components/PositionalAudioDemo.vue +++ b/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() }) @@ -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" /> @@ -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; diff --git a/docs/.vitepress/theme/components/PositionalAudioDemoHelper.vue b/docs/.vitepress/theme/components/PositionalAudioDemoHelper.vue index dc22269d..09fb515d 100644 --- a/docs/.vitepress/theme/components/PositionalAudioDemoHelper.vue +++ b/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" + /> diff --git a/docs/guide/abstractions/positional-audio.md b/docs/guide/abstractions/positional-audio.md index 642daca8..6088a386 100644 --- a/docs/guide/abstractions/positional-audio.md +++ b/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), `` 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), `` 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. `` 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 `` 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 `` component and set the `url`. It must be wrapped around the `` component to enable it to load your audio asynchronously. 💥 +```vue + + + +``` + -<<< @/.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 `` component appears/is created, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch. ::: - +## How does it work? + ## Props diff --git a/docs/public/positional-audio/ping.mp3 b/docs/public/positional-audio/ping.mp3 deleted file mode 100644 index 6cc11b7a..00000000 Binary files a/docs/public/positional-audio/ping.mp3 and /dev/null differ diff --git a/docs/public/positional-audio/pingpong.glb b/docs/public/positional-audio/pingpong.glb deleted file mode 100644 index aaebeaf3..00000000 Binary files a/docs/public/positional-audio/pingpong.glb and /dev/null differ diff --git a/docs/public/positional-audio/sound1.mp3 b/docs/public/positional-audio/sound1.mp3 deleted file mode 100644 index 88dcbbe5..00000000 Binary files a/docs/public/positional-audio/sound1.mp3 and /dev/null differ diff --git a/playground/public/positional-audio/sound.mp3 b/playground/public/positional-audio/sound.mp3 deleted file mode 100644 index 88dcbbe5..00000000 Binary files a/playground/public/positional-audio/sound.mp3 and /dev/null differ diff --git a/playground/src/pages/abstractions/PositionalAudio.vue b/playground/src/pages/abstractions/PositionalAudio.vue index dbf65be1..e95420ca 100644 --- a/playground/src/pages/abstractions/PositionalAudio.vue +++ b/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" /> diff --git a/src/core/abstractions/PositionalAudio.vue b/src/core/abstractions/PositionalAudio.vue index 563e8fd9..492aaf16 100644 --- a/src/core/abstractions/PositionalAudio.vue +++ b/src/core/abstractions/PositionalAudio.vue @@ -78,7 +78,7 @@ const dispose = () => { } defineExpose({ - ref: positionalAudioRef, + root: positionalAudioRef, play: playAudio, stop: stopAudio, pause: pauseAudio,