Merge pull request #291 from Tresjs/feature/add-change-event-pointerlock

feat: add 'change' event to pointerlock controls, improve docs

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

@@ -46,26 +46,6 @@ 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">
-const isActive = (state: boolean) => console.log(state)
-
-</script>
-<template>
-<button id="lock">Lock</button>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[0, 0, 3]" @is-lock="state => isActive(state)"  />
-    <PointerLockControls selector="lock" />
-    <TresGridHelper :args="[10, 10]" />
-
-  </TresCanvas>
-</template>
-```
-
 ## Props
 
 | Prop            | Description                                                                               | Default     |
@@ -74,3 +54,14 @@ const isActive = (state: boolean) => console.log(state)
 | **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` |
+
+## Events
+
+```vue
+<PointerLockControls @change="onChange" @is-lock="(state) => isActive(state)" />
+```
+
+| Event      | Description                                                      |
+| :--------- | :--------------------------------------------------------------- |
+| **isLock** | Return `true` if "lock", `false` if "unlock" events are trigger. |
+| **change** | Dispatched when the control changes.                             |

playground/src/pages/controls/FirstPersonControlsDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping } from 'three'
-import { PointerLockControls, KeyboardControls, Stats } from '@tresjs/cientos'
+import { PointerLockControls, KeyboardControls, Stats, Sky } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -11,17 +11,19 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-Stats(0)
-
 const isActive = (state: boolean) => console.log(state)
+const hasChange = (state: any) => console.log('change', state)
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 3, 10]" />
+    <Stats />
+    <Sky />
     <PointerLockControls
       make-default
       @is-lock="state => isActive(state)"
+      @change="state => hasChange(state)"
     />
     <KeyboardControls head-bobbing />
 

src/core/controls/PointerLockControls.vue

@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<PointerLockControlsProps>(), {
   makeDefault: false,
 })
 
-const emit = defineEmits(['isLock'])
+const emit = defineEmits(['isLock', 'change'])
 
 const { camera: activeCamera, renderer, extend, controls } = useTresContext()
 
@@ -69,6 +69,7 @@ watch(controlsRef, (value) => {
   const selector = document.getElementById(props.selector || '')
   triggerSelector = selector ? selector : renderer.value.domElement
 
+  useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
   useEventListener(triggerSelector, 'click', () => {
     controls.value?.lock()
     controls.value?.addEventListener('lock', () => isLockEmitter(true))