chore: add reactive method isLock

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

@@ -25,6 +25,7 @@ In addition, you need to wait 1 second between canceling and re-starting the eve
   </TresCanvas>
 </template>
 ```
+
 Or using your own HTML element to trigger the event
 
 ```vue{3}
@@ -43,11 +44,37 @@ Or using your own HTML element to trigger the event
 Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
 :::
 
+## Detect if is active
+
+Additional we can detect if the controls has been active or not in a reactive way by just provide a v-model into the component
+
+```vue{3}
+<script setup lang="ts">
+import { ref, watchEffect} from 'vue'
+
+const isLock = ref()
+
+watchEffect(() => {
+  console.log('jaime ~ isLock:', isLock.value)
+})
+
+</script>
+<template>
+<button id="lock">Lock</button>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[0, 0, 3]" v-model="isLock"  />
+    <PointerLockControls selector="lock" />
+    <TresGridHelper :args="[10, 10]" />
+
+  </TresCanvas>
+</template>
+```
+
 ## Props
 
-| Prop              | Description                                                                                                      | Default     |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- |
-| **makeDefault**   | If `true`, the controls will be set as the default controls for the scene.                                       | `false`     |
-| **camera**        | The camera to control.                                                                                           | `undefined` |
-| **domElement**    | The dom element to listen to.                                                                                    | `undefined` |
-| **selector** | Accept an id element as string, if it is set, the new element will be used as the trigger | `undefined`     |
+| Prop            | Description                                                                               | Default     |
+| :-------------- | :---------------------------------------------------------------------------------------- | ----------- |
+| **makeDefault** | If `true`, the controls will be set as the default controls for the scene.                | `false`     |
+| **camera**      | The camera to control.                                                                    | `undefined` |
+| **domElement**  | The dom element to listen to.                                                             | `undefined` |
+| **selector**    | Accept an id element as string, if it is set, the new element will be used as the trigger | `undefined` |

playground/src/pages/FirstPersonControlsDemo.vue

@@ -1,21 +1,33 @@
 <script setup lang="ts">
+import { ref, watch, watchEffect } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping } from 'three'
 import { PointerLockControls, KeyboardControls } from '@tresjs/cientos'
 
+const PLControlsRef = ref<PointerLockControls | null>(null)
+
+watch(PLControlsRef, value => {
+  console.log(value)
+})
+
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
   toneMapping: NoToneMapping,
 }
+const isLock = ref(false)
+
+watchEffect(() => {
+  console.log('jaime ~ isLock:', isLock.value)
+})
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 3, 10]" />
-    <PointerLockControls make-default />
+    <PointerLockControls ref="PLControlsRef" v-model="isLock" make-default  />
     <KeyboardControls head-bobbing />
 
     <TresGridHelper :args="[100, 100]" />

src/core/controls/PointerLockControls.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { PointerLockControls } from 'three-stdlib'
 import { Camera } from 'three'
 import { useEventListener } from '@vueuse/core'
@@ -53,6 +53,12 @@ let triggerSelector: HTMLElement | undefined
 
 extend({ PointerLockControls })
 
+const emit = defineEmits(['update:modelValue'])
+
+const isLockEvent = (event: boolean) => {
+  emit('update:modelValue', event)
+}
+
 watch(controls, value => {
   if (value && props.makeDefault) {
     setState('controls', value)
@@ -63,12 +69,17 @@ 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))
   })
 })
 
-defineExpose({
-  value: controls,
+onUnmounted(() => {
+  controls.value?.removeEventListener('lock', () => isLockEvent(true))
+  controls.value?.removeEventListener('unlock', () => isLockEvent(false))
 })
+
+defineExpose({ value: controls })
 </script>
 
 <template>