https://github.com/jacobjaffe/pointer-lock-controls-offset-example

Example of how to use pointer lock controls in Three Fiber with offsets for raycasting
https://github.com/jacobjaffe/pointer-lock-controls-offset-example

Last synced: 8 months ago
JSON representation

Example of how to use pointer lock controls in Three Fiber with offsets for raycasting

• Host: GitHub
• URL: https://github.com/jacobjaffe/pointer-lock-controls-offset-example
• Owner: JacobJaffe
• Created: 2020-12-03T18:52:01.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-08-04T18:15:16.000Z (almost 4 years ago)
• Last Synced: 2025-04-07T00:05:29.347Z (about 1 year ago)
• Language: JavaScript
• Size: 12.2 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Pointer Lock Controls Offset Example

This repo provides an example of how to use mouse offsets with pointer lock controls with Three Fiber.

Normally, when raycasting for pointer events, the raycast occurs from the offset of the mouse and camera.

However, when using a PointerLockControl, the offset should be disregarded, as the mouse position does _not_ change. This can cause issues unless the mouse is set to the middle of the canvas before entering the pointer lock.

By setting the offset to be the middle of the canvas, the offset is ignored, and the raycasts operate as expected.

This is demo'd here by having the raycasted mouse location tracked with a `red circle`, and the expected raycast location tracked with a `black reticle`.

## Without Offsetting

![Without Offsetting](readmeAssets/withoutOffsetting2.gif)

## With Offsetting

![With Offsetting](readmeAssets/withOffsetting2.gif)