I am looking to implement a mouse move event handler in my three.js project, but I have been struggling to connect it with the mouse and make it work. It would be greatly appreciated if someone could provide guidance on how to achieve this. I am not sure where exactly I should use mouse-related coordinates and I'm concerned about making changes that might impact my calculations.
root = document.getElementById("WebGL");
window.addEventListener('resize', onWindowResize(width, height), false);
root.addEventListener('mousemove', MouseMoveGoogleMapsUpdate(), false);
function MouseMoveGoogleMapsUpdate(){
var angle = onMouseMove();
line.setMap(null); //removing the old lines on circle
var newstartpoint = pointGoogleMaps(circle.getRadius() * Math.cos(-angle[0]),
circle.getRadius() * Math.sin(-angle[0]), origin);
var viewdir = pointGoogleMaps(circle.getRadius() * Math.cos(-angle[1]),
circle.getRadius() * Math.sin(-angle[1]), origin);
var newendpoint = pointGoogleMaps(circle.getRadius() * Math.cos(angle[2]),
circle.getRadius() * Math.sin(angle[2]), origin);
line = new google.maps.Polyline({
path: [newstartpoint, origin, newendpoint],
geodesic: true, //By setting it to true the distance is cal in meters
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
map: map
});
}
function onMouseMove(){
var degrees = Math.PI/180.0;
var raycaster = new THREE.Raycaster();
var viewingDir = camera.getWorldDirection();
var Vectors = [0,0,0];
var Angles = [0,0,0];
for(i=0; i<3; i++)
{
Vectors[i] = new THREE.Vector3(i-1, 0, 0.5);
raycaster.setFromCamera(Vectors[i], camera);
Vectors[i].sub(camera.position);
Vectors[i].normalize();
}
for(i=0; i<3; i+=2)
{
var dotp = Vectors[i].x * Vectors[1].x + Vectors[i].y * Vectors[1].y + Vectors[i].z * Vectors[1].z;
if (dotp >= 1)
Angles[i] = 0.0;
else if (dotp <= -1)
Angles[i] = Math.PI;
else
Angles[i] = Math.acos(dotp);
}
Angles[1] = Math.atan2(viewingDir.x, -viewingDir.z);
fov = Angles[0] + Angles[2];
Angles[0] = Angles[1] - 0.5 * fov; //x-dir
Angles[2] = Angles[1] + 0.5 * fov; //y-dir
return Angles;
}