Skip to content

fix(cientos): PointerLockControls emits too many events#1397

Open
alvarosabu wants to merge 1 commit intomainfrom
fix/tres-267-pointerlockcontrols-emits-too-many-events
Open

fix(cientos): PointerLockControls emits too many events#1397
alvarosabu wants to merge 1 commit intomainfrom
fix/tres-267-pointerlockcontrols-emits-too-many-events

Conversation

@alvarosabu
Copy link
Copy Markdown
Member

Summary

Fixes the bug where PointerLockControls emits isLock/change events multiplied by the number of clicks on the canvas. On every click the component was calling addEventListener on the Three.js controls instance, so each subsequent lock/unlock fired one additional listener.

Root cause

packages/cientos/src/core/controls/PointerLockControls.vue — the useEventListener('click', ...) handler registered fresh lock/unlock/change listeners on the controls instance on every click, and onUnmounted tried to remove them with new arrow functions that never matched the registered ones (so cleanup was a no-op).

Changes

  • Hoist listener references (onLock, onUnlock, onChange) so removeEventListener actually removes them.
  • Register the Three.js listeners once when controlsRef resolves, not per click.
  • Clean up listeners on controlsRef change (via oldValue) and on unmount.
  • Click handler now only calls value.lock() + invalidate().

Test plan

  • pnpm --filter playground dev, open cientos/controls/PointerLockControlsDemo
  • Open devtools console
  • Click canvas → Esc → click → Esc (repeat 4–5 times)
  • Verify is-active true / is-active false log exactly once per transition (no duplicates)
  • Mouse-move while locked → change logs smoothly, no N× duplication
  • Navigate away from the demo route → no stray listeners left (check with a subsequent visit)

Closes TRES-267

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 11, 2026

Deploy Preview for cientos-tresjs ready!

Name Link
🔨 Latest commit fff6fb3
🔍 Latest deploy log https://app.netlify.com/projects/cientos-tresjs/deploys/69da2044897e2d0008c4c1d7
😎 Deploy Preview https://deploy-preview-1397--cientos-tresjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 11, 2026

Deploy Preview for tresjs-lab ready!

Name Link
🔨 Latest commit fff6fb3
🔍 Latest deploy log https://app.netlify.com/projects/tresjs-lab/deploys/69da2044f7a17800084410b8
😎 Deploy Preview https://deploy-preview-1397--tresjs-lab.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 11, 2026

Deploy Preview for tresjs-docs ready!

Name Link
🔨 Latest commit fff6fb3
🔍 Latest deploy log https://app.netlify.com/projects/tresjs-docs/deploys/69da2044e723eb000886367a
😎 Deploy Preview https://deploy-preview-1397--tresjs-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant