add eays movment (WIP)

src/app/page.module.css

@@ -8,3 +8,14 @@
   position: fixed;
   z-index: 100;
 }
+
+.quota {
+  width: 25%;
+  position: fixed;
+  z-index: 100;
+  font-size: 50px;
+  margin: 50vh 0 0 10%;
+  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #23d400, 0 0 40px #00a30e,
+    0 0 50px #0a7c00, 0 0 60px #0b5e00, 0 0 70px #00440b;
+  color: white;
+}

src/app/page.tsx

@@ -4,6 +4,7 @@ export default function Home() {
   return (
     <div className={style.skeleton}>
       <h1 className={style.logo}>J4roid</h1>
+      <h1 className={style.quota}>PROFESSIONAL COCK SMELLER</h1>
       <Skeleton />
     </div>
   );

src/components/mesh/skeleton.tsx

@@ -1,40 +1,41 @@
 "use client";
 
 import { Mesh } from "three";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Canvas, useLoader, useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 import styles from "./skeleton.module.css";
-import { appendFile } from "fs";
-import {
-  MaterialReferenceNode,
-  positionGeometry,
-} from "three/examples/jsm/nodes/Nodes.js";
-import { OrbitControls, useScroll } from "@react-three/drei";
 
 function SkeletonMesh() {
+  const [eyeAngle, setEyeAAngle] = useState([
+    THREE.MathUtils.degToRad(0),
+    THREE.MathUtils.degToRad(70),
+    THREE.MathUtils.degToRad(0),
+  ]);
   const mesh = useRef<Mesh>(null!);
   let head = useLoader(GLTFLoader, "/models/skeleton/head.gltf");
   const eye = useLoader(GLTFLoader, "/models/skeleton/eye.gltf");
-  const eye2 = useLoader(GLTFLoader, "/models/skeleton/eye.gltf");
+  const eye2 = eye.scene.clone();
   const body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
+
+  useEffect(() => {
+    window.addEventListener("mousemove", (event) => {
+      setEyeAAngle([
+        THREE.MathUtils.degToRad(
+          ((event.clientY - window.innerHeight) * 15) / 360 + 20
+        ),
+        THREE.MathUtils.degToRad(
+          ((event.clientX - window.innerWidth) * 20 - 10) / 360
+        ),
+        0,
+      ]);
+    });
+  }, []);
+
   return (
     <group>
       <mesh
-        ref={mesh}
-        scale={0.1}
-        position={[-1, 0.72, -0.91]}
-        rotation={[
-          THREE.MathUtils.degToRad(0),
-          THREE.MathUtils.degToRad(70),
-          THREE.MathUtils.degToRad(0),
-        ]}
-      >
-        <primitive object={eye.scene} />
-      </mesh>
-      <mesh
-        ref={mesh}
         scale={0.1}
         position={[-2.3, 0.5, -1]}
         rotation={[
@@ -45,18 +46,12 @@ function SkeletonMesh() {
       >
         <primitive object={head.scene} />
       </mesh>
-      <mesh
+      <mesh scale={0.1} position={[-2.03, 0.72, -0.91]} rotation={eyeAngle}>
-        ref={mesh}
-        scale={0.1}
-        position={[-2.03, 0.72, -0.91]}
-        rotation={[
-          THREE.MathUtils.degToRad(0),
-          THREE.MathUtils.degToRad(70),
-          THREE.MathUtils.degToRad(0),
-        ]}
-      >
         <primitive object={eye.scene} />
       </mesh>
+      <mesh scale={0.1} position={[-2.5, 0.72, -0.7]} rotation={eyeAngle}>
+        <primitive object={eye2} />
+      </mesh>
     </group>
   );
 }