Getting Object To Look At Mouse Cursor

Questions
1

Hello! I am a threejs/programming noob trying to get a 3D object to look at the mouse cursor based on this example:

I posted something similar recently but I decided to simplify my plan with a more straightforward model. If anyone can help me figure out how to get the monkey’s face to stare at the cursor as it moves, ideally with a maximum range of motion so that it I can control how far it can turn, I would be truly grateful!

Here is my component code:

import { Suspense, useRef } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

const Suzanne = () => {
  const { nodes } = useGLTF("/suzanne.glb", true);
  const $mesh = useRef();

  return (
    <>
      <mesh ref={$mesh} geometry={nodes.Suzanne.geometry} scale={1.1}>
        <meshNormalMaterial opacity={1} />
      </mesh>
    </>
  );
};

export default function Model() {
  return (
    <Canvas
      camera={{
        position: [-1, 0.1, 3]
      }}
    >
      <ambientLight />
      <directionalLight position={[10, 10, 10]} />
      <OrbitControls />
      <Suspense fallback={null}>
        <Suzanne />
      </Suspense>
    </Canvas>
  );
}
2

now, to make it smooth, i think lookat cannot be animated just like that but discourse or stackoverflow will help you in that regard.

edit: nevermind, animating it wasn’t that hard.

3

Brilliant! couldn’t have asked for a better result. Thank you so much @drcmda