diff --git a/packages/cientos/src/core/controls/PointerLockControls.vue b/packages/cientos/src/core/controls/PointerLockControls.vue index ae7d9e85d..42bb03272 100644 --- a/packages/cientos/src/core/controls/PointerLockControls.vue +++ b/packages/cientos/src/core/controls/PointerLockControls.vue @@ -68,37 +68,46 @@ let triggerSelector: HTMLElement | undefined extend({ PointerLockControls }) -const isLockEmitter = (event: boolean) => { - emit('isLock', event) -} +const onLock = () => emit('isLock', true) +const onUnlock = () => emit('isLock', false) +const onChange = () => invalidate() -watch(controlsRef, (value) => { - if (value && props.makeDefault) { - controls.value = value +watch(controlsRef, (value, oldValue) => { + if (oldValue) { + oldValue.removeEventListener('lock', onLock) + oldValue.removeEventListener('unlock', onUnlock) + oldValue.removeEventListener('change', onChange) } - else { + + if (!value) { controls.value = null + return + } + + if (props.makeDefault) { + controls.value = value } + + value.addEventListener('lock', onLock) + value.addEventListener('unlock', onUnlock) + value.addEventListener('change', onChange) + const selector = document.getElementById(props.selector || '') triggerSelector = selector || renderer.domElement useEventListener(triggerSelector, 'click', () => { - if (controlsRef.value) { - controlsRef.value.lock() - controlsRef.value.addEventListener('lock', () => isLockEmitter(true)) - controlsRef.value.addEventListener('unlock', () => isLockEmitter(false)) - controlsRef.value.addEventListener('change', () => invalidate()) - invalidate() - } + value.lock() + invalidate() }) }) onUnmounted(() => { - const controls = controlsRef.value - if (controls) { - controls.removeEventListener('lock', () => isLockEmitter(true)) - controls.removeEventListener('unlock', () => isLockEmitter(false)) - controls.dispose() + const instance = controlsRef.value + if (instance) { + instance.removeEventListener('lock', onLock) + instance.removeEventListener('unlock', onUnlock) + instance.removeEventListener('change', onChange) + instance.dispose() } })