fix: instance properties and fix demo (#561)

Co-authored-by: Alvaro Saburido <[email protected]>

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

@@ -57,23 +57,23 @@ watch(helper.value, () => {
   innerAngle.value.visible = outerAngle.value.visible = outerGain.value.visible = helper.value.value
 })
 
-watch([ballRef, ready], ([ball]) => {
-  if (!ball?.value || !ready.value) { return }
+watch([ready], () => {
+  if (!ballRef?.value || !ready.value) { return }
 
   ctx.add(() => {
     tl = gsap
       .timeline({ repeat: -1, yoyo: true, onRepeat: onBallBounce })
-      .to(ball.value.position, { y: 0, ease: 'power1.in', duration: 0.35 })
+      .to(ballRef.value.instance.position, { y: 0, ease: 'power1.in', duration: 0.35 })
   })
 })
 
 onMounted(() => {
-  ctx = gsap.context((_) => { }, ballRef?.value)
+  ctx = gsap.context(() => { })
 })
 
 onUnmounted(() => {
-  ctx?.revert()
   positionalAudioRef?.value?.dispose()
+  ctx?.revert()
 })
 </script>
 

docs/guide/abstractions/positional-audio.md

@@ -67,7 +67,7 @@ If you are sure that there will be a user gesture before your `<PositionAudio>`
 
 | Event       | Description                                                      |
 | :---------- | :--------------------------------------------------------------- |
-| `root` | Root reference — Inheritance of [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio).|
+| `instance` | Instance reference — Inheritance of [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio).|
 | `play()` | Play audio — *Cannot be fired if audio is already running.* |
 | `pause()` | Pause audio — *Cannot be fired if audio is already paused.* |
 | `stop()` | Stop audio — *Cannot be fired if audio is already stopped.* |
@@ -76,7 +76,7 @@ If you are sure that there will be a user gesture before your `<PositionAudio>`
 ```typescript{1,3,8}
 const positionalAudioRef = shallowRef(null)
 
-console.log(positionalAudioRef.value.root) // root properties
+console.log(positionalAudioRef.value.instance) // instance properties
 
 const handlerAudio = (action: string) => {
   if (!positionalAudioRef.value) return

src/core/abstractions/PositionalAudio.vue

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