To start off, ensure you add Event Listeners such as 'mousemove' and 'mousedown'.
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
If you're looking for an event to trigger when moving your mouse over a circle, let's create an alert that will pop up when the mouse moves over that specific area.
function onDocumentMouseDown(event) {
event.preventDefault();
mouseYOnMouseDown = event.clientY - windowHalfY;
mouseXOnMouseDown = event.clientX - windowHalfX;
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(circleObj, true); // Identify the Circle element
if (intersects.length > 0) {
alert("Mouse on Circle");
}
}
In three.js, we utilize raycaster to target any object. Refer to the raycaster section in the three.js documentation for more information.