How to make THREE JS model always face cursor pointer?

https://klever-talha.github.io/

The 3d model on the page follows the mouse when left clicked. But I want to know how can I make it move without the click. It should always face the cursor pointer. I have used THREE.JS for this. So any idea, can it be done by orbital control, or do I have to add some extra javascript for that.

Solution 1:

I did something similar recently for a students lesson. Here is an example:

https://tweeter-soup.herokuapp.com/

here is the repo for the three.js code:

https://github.com/soupIsTheCurrencyOfTheFuture/tweeter/blob/main/public/scripts/profile-icon.js

window.addEventListener('mousemove', (event) => {
  modelGroup.rotation.y = (event.clientX / window.innerWidth) - 0.5;
  modelGroup.rotation.x = (event.clientY / window.innerHeight) - 0.5;

  modelGroup.position.x = ((event.clientX / window.innerWidth) - 0.5) * 15;
  modelGroup.position.y = ((event.clientY / window.innerHeight) - 0.5) * -15;
});

here is the event listener.

you should be able to just change your current onclick event listener to a mousemove and you should be set though