So I successfuly animated a mouse trailing GLTF model with React Three Fiber and GSAP. The issue I have now is it becomes too demanding and glitchy after some time in fullscreen mode and immediately if I open inspect tool. Inspiration for this was Isaac Fayemi. Here is my CodeSandbox.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
import React, { useRef, useState, useEffect } from 'react'
import { useGLTF } from '@react-three/drei'
import gsap from 'gsap'
export function Model(props) {
let model = useRef(null)
let [coordinates, setCoordinates] = useState({
x: 0,
y: 0
})
function mouseTracker() {
let body = document.body;
let rect = body.getBoundingClientRect();
let percentY;
let percentX;
let mouseListener = body.addEventListener('mousemove', e => {
percentY = Math.round((e.clientY / rect.height) * 100)
percentX = Math.round((e.clientX / rect.width) * 100)
setCoordinates({
x: percentX,
y: percentY
})
});
return () => {
body.removeEventListener('mousemove', mouseListener)
}
}
useEffect(() => {
mouseTracker()
gsap.to(model.current.rotation, {
y: coordinates.x / 100 - 0.5,
x: coordinates.y / 150 - 0.05,
duration: 0.7,
ease: "power1.out",
})
}, [coordinates])
const { nodes, materials } = useGLTF('/glava2.glb')
return (
<group {...props} dispose={null} >
<mesh geometry={nodes.FBHead.geometry} material={materials['Material.001']} ref={model}/>
</group>
)
}
useGLTF.preload('/glava2.glb')