I’m new to using Three.js. I want to create eye balls that follow the mouse, I managed to make them move but they don’t follow the mouse perfectly
Here is the part of the code that controls the eyes
class Eyes extends THREE.Group {
constructor(camera) {
super();
this.camera = camera;
this.plane = new THREE.Plane();
this.planeNormal = new THREE.Vector3();
this.planePoint = new THREE.Vector3();
this.pointer = new THREE.Vector2();
this.raycaster = new THREE.Raycaster();
this.lookAt = new THREE.Vector3();
this.clock = new THREE.Clock();
this.blink = { value: 0 };
this.eyes = new Array(2).fill().map((_, idx) => {
let eye = new EyeBall();
eye.position.set(idx < 1 ? -0.15 : 0.15, 0.025, 0.9);
eye.scale.setScalar(0.13);
this.add(eye);
return eye;
});
document.addEventListener("pointermove", (event) => {
this.pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
this.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
});
this.blinking();
}
blinking() {
let duration = 500;
let delay = Math.random() * 3000 + 2000;
this.blink.value = 0;
new TWEEN.Tween(this.blink)
.to({ value: 1 }, duration)
.delay(delay)
.easing(TWEEN.Easing.Exponential.InOut)
.onComplete(() => {
this.blinking();
})
.start();
}
update() {
this.raycaster.setFromCamera(this.pointer, this.camera);
this.camera.getWorldDirection(this.planeNormal);
const eyeWorldPosition = new THREE.Vector3();
this.eyes[0].getWorldPosition(eyeWorldPosition);
this.plane.setFromNormalAndCoplanarPoint(
this.planeNormal,
eyeWorldPosition
);
let tempLookAt = new THREE.Vector3();
this.raycaster.ray.intersectPlane(this.plane, tempLookAt);
this.lookAt.lerp(tempLookAt, 0.5);
this.eyes.forEach((eye) => {
eye.lookAt(this.lookAt);
});
}
}
I’ve tried looking up some solutions but a lot of them use regular html and js and not vite with reactJS. Also they never have the same issue I’m having.
Tools I’m using:
Vite
ReactJS
Javascript
Three.js