Different values from mouse position

General_Mouse position.js

const windowSizes = {
  w: document.body.clientWidth,
  h: window.innerHeight,
}

// pixels pos
const mousePosPixels = {
  x: 0,
  y: 0,
}

// % viewport
const mousePosPerc = {
  x: 0,
  y: 0,
}

// normalized for quad-UV
const mouseUvCentered = {
  x: 0,
  y: 0,
}

window.addEventListener('mousemove', (evt) => {
  // PIXELS (top,left)
  mousePosPixels.x = evt.clientX
  mousePosPixels.y = evt.clientY

  // PERCENTUAGE (top,left)
  mousePosPerc.x = evt.clientX / windowSizes.w
  mousePosPerc.y = evt.clientY / windowSizes.h

  // UV RAYCAST
  mouseUvCentered.x = (evt.clientX / window.innerWidth) * 2 - 1
  mouseUvCentered.y = -(evt.clientY / window.innerHeight) * 2 + 1
})

window.addEventListener('resize', (evt) => {
  windowSizes.w = document.body.clientWidth
  windowSizes.h = window.innerHeight
})

export { mousePosPixels, mousePosPerc, mouseUvCentered }