Skip to content

Instantly share code, notes, and snippets.

@BABAK0T0
Last active March 16, 2021 20:17
Show Gist options
  • Save BABAK0T0/1546d3fa4033b84941a60793e1294848 to your computer and use it in GitHub Desktop.
Save BABAK0T0/1546d3fa4033b84941a60793e1294848 to your computer and use it in GitHub Desktop.
/**
* Default Amplitude Adjustment [0, 1]
* DOM coord [0, 0] is located in left top corner
* Three.js coord [0, 0] is located in center of the screen
*
*
* Position.y axis being positive when going upward in Three.js
* But the clientY axis being positive when going downward in the webpage.
* You can simply invert the cursor.y while updating it by adding a minus (-)
**/
const cursor = {
x: 0,
y: 0
}
// Amplitude [-0.5 , 0.5]
window.addEventListener('mousemove', (event) =>
{
cursor.x = event.clientX / sizes.width - 0.5
cursor.y = - (event.clientY / sizes.height - 0.5)
})
// Amplitude [-1, 1]
window.addEventListener('mousemove', (event) =>
{
cursor.x = event.clientX / sizes.width * 2 - 1
cursor.y = - (event.clientY / sizes.height) * 2 + 1
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment