I'm currently working on a project where I want an object to continuously track the mouse in a more natural manner. Here's what I've accomplished so far:
- Ensured that the object always looks at the mouse
- Added easing for a smoother, more natural movement
The issue I'm facing now is that the object doesn't follow the exact path of the mouse but instead eases towards its final position.
I'm unsure how to tackle this problem.
// create object and add to scene
const sphere = new THREE.Mesh( geometry, material );
const origin = new THREE.Vector3(0, 0, 75);
sphere.position.x = 0;
sphere.position.z = 0;
sphere.lookAt(origin);
scene.add( sphere );
window.addEventListener("mousemove", onmousemove, false);
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersectPoint = new THREE.Vector3();
function onmousemove(event) {
var startRotation = sphere.quaternion.clone();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, intersectPoint);
intersectPoint.z = 75; // ensure object is always facing camera positioned at z: 75
sphere.lookAt(intersectPoint);
var endRotation = sphere.quaternion.clone();
sphere.quaternion.copy( startRotation );
createjs.Tween.get(sphere.quaternion).to(endRotation, 1000, createjs.Ease.getPowOut(2.2));
marker.position.copy(intersectPoint);
}
My current objective is to figure out a way for the object to follow not only the last position of the mouse but its entire path. Any suggestions?