I am trying to sync my rendered mouse with pointer lock coordinates. The pointer lock hides the mouse cursor, so that's why I need to draw it separately. I have a 3D-scene with a primitive as mouse pointer. I used billboarding to draw the mouse cursor at (0,0, -1), so it looks like a 2D-Object in this 3D-space, nice.
So far so good. For calculating the pointer lock-based x and y coordinate I use this:
var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
var movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
x += movementX;
y += movementY;
The first problem is, that I don't know how I initially have to set the x and y coordinates. When you enter the VR-mode the cursor is set to (0,0, -1), so they have to be synchronized in 2D-space. I thought it's something like width/2 or width/4 because of the two eyes, but that didn't work. In addition I need a correct acceleration factor for the rendering, because the mouse is way too fast. Again something with width I guess.
Mouse events return x and y values in pixel units. If you apply those directly to the position of your rendered cursor, they'll probably move the cursor way off screen immediately. You probably just need to scale the pixel units down by some factor, like x += movementX / 100 or something.