feat: chg to event, rmv vmodel,

Author: JaimeTorrealba

docs/guide/controls/pointer-lock-controls.md

@@ -50,19 +50,13 @@ Additional we can detect if the controls has been active or not in a reactive wa
 
 ```vue{3}
 <script setup lang="ts">
-import { ref, watchEffect} from 'vue'
-
-const isLock = ref()
-
-watchEffect(() => {
-  console.log('jaime ~ isLock:', isLock.value)
-})
+const isActive = (state: boolean) => console.log(state)
 
 </script>
 <template>
 <button id="lock">Lock</button>
   <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[0, 0, 3]" v-model="isLock"  />
+    <TresPerspectiveCamera :position="[0, 0, 3]" @is-lock="state => isActive(state)"  />
     <PointerLockControls selector="lock" />
     <TresGridHelper :args="[10, 10]" />
 

playground/src/pages/FirstPersonControlsDemo.vue

@@ -17,17 +17,14 @@ const gl = {
   shadowMapType: BasicShadowMap,
   toneMapping: NoToneMapping,
 }
-const isLock = ref(false)
 
-watchEffect(() => {
-  console.log('jaime ~ isLock:', isLock.value)
-})
+const isActive = (state: boolean) => console.log(state)
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 3, 10]" />
-    <PointerLockControls ref="PLControlsRef" v-model="isLock" make-default  />
+    <PointerLockControls ref="PLControlsRef" make-default @is-lock="state => isActive(state)" />
     <KeyboardControls head-bobbing />
 
     <TresGridHelper :args="[100, 100]" />

src/core/controls/PointerLockControls.vue

@@ -53,10 +53,10 @@ let triggerSelector: HTMLElement | undefined
 
 extend({ PointerLockControls })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['isLock'])
 
-const isLockEvent = (event: boolean) => {
-  emit('update:modelValue', event)
+const isLockEmitter = (event: boolean) => {
+  emit('isLock', event)
 }
 
 watch(controls, value => {
@@ -69,14 +69,14 @@ watch(controls, value => {
   triggerSelector = selector ? selector : state.renderer?.domElement
   useEventListener(triggerSelector, 'click', () => {
     controls.value?.lock()
-    controls.value?.addEventListener('lock', () => isLockEvent(true))
-    controls.value?.addEventListener('unlock', () => isLockEvent(false))
+    controls.value?.addEventListener('lock', () => isLockEmitter(true))
+    controls.value?.addEventListener('unlock', () => isLockEmitter(false))
   })
 })
 
 onUnmounted(() => {
-  controls.value?.removeEventListener('lock', () => isLockEvent(true))
-  controls.value?.removeEventListener('unlock', () => isLockEvent(false))
+  controls.value?.removeEventListener('lock', () => isLockEmitter(true))
+  controls.value?.removeEventListener('unlock', () => isLockEmitter(false))
 })
 
 defineExpose({ value: controls })