add Tailwind and code cleanup(WIP)

src/components/mesh/skeleton.tsx

@@ -2,23 +2,21 @@
 
 import { Mesh } from "three";
 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 { useGLTF } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
 
 function SkeletonMesh() {
-  const [eyeAngle, setEyeAAngle] = useState([
-    THREE.MathUtils.degToRad(0),
-    THREE.MathUtils.degToRad(70),
+  const [eyeAngle, setEyeAAngle] = useState<Number[]>([
+    THREE.MathUtils.degToRad(10),
+    THREE.MathUtils.degToRad(100),
     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 skeleton = useRef<Mesh>(null!);
+  let head = useGLTF("/models/skeleton/head.gltf");
+  const eye = useGLTF("/models/skeleton/eye.gltf");
   const eye2 = eye.scene.clone();
-  const body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
-
   useEffect(() => {
     window.addEventListener("mousemove", (event) => {
       setEyeAAngle([
@@ -36,20 +34,21 @@ function SkeletonMesh() {
   return (
     <group>
       <mesh
-        scale={0.1}
-        position={[-2.3, 0.5, -1]}
+        scale={0.25}
+        position={[0, -0.5, -5]}
         rotation={[
           THREE.MathUtils.degToRad(0),
-          THREE.MathUtils.degToRad(25),
+          THREE.MathUtils.degToRad(-35),
           THREE.MathUtils.degToRad(0),
         ]}
+        ref={skeleton}
       >
         <primitive object={head.scene} />
       </mesh>
-      <mesh scale={0.1} position={[-2.03, 0.72, -0.91]} rotation={eyeAngle}>
+      <mesh ref={mesh} scale={0.2} position={[0, 0, -4]} rotation={eyeAngle}>
         <primitive object={eye.scene} />
       </mesh>
-      <mesh scale={0.1} position={[-2.5, 0.72, -0.7]} rotation={eyeAngle}>
+      <mesh scale={0.2} position={[-1, 0, -5]} rotation={eyeAngle}>
         <primitive object={eye2} />
       </mesh>
     </group>
@@ -57,43 +56,17 @@ function SkeletonMesh() {
 }
 
 export default function Skeleton() {
-  let cameraPosition = 0;
-  const meshArray: Array<{ x: number; y: number; z: number }> = [];
-  const starNumber = Math.floor(Math.random() * 300) + 200;
-  for (var i = 0; i < starNumber; i++) {
-    meshArray.push({
-      x: Math.random() * (-50 + 100) - 100,
-      y: Math.random() * (50 + 50) - 50,
-      z: Math.random() * (100 + 100) - 100,
-    });
-  }
-
   return (
     <Canvas
-      onScroll={(el) => {
-        cameraPosition += 1;
-      }}
-      className={styles.Canvas}
+      className="h-100 w-100"
       camera={{
-        position: [0, 1.2, cameraPosition],
-        rotation: [0, THREE.MathUtils.degToRad(90), 0],
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
       }}
     >
-      {/* <OrbitControls /> */}
+      <ambientLight />
       <pointLight intensity={4} />
-      <gridHelper args={[99, 99, "grey", "grey"]} />
       <SkeletonMesh />
-      <group>
-        <ambientLight />
-        {meshArray.map((el) => {
-          return (
-            <mesh position={[el.x, el.y, el.z]}>
-              <sphereGeometry args={[0.2 * Math.random()]} />
-              <meshPhysicalMaterial color="white" />
-            </mesh>
-          );
-        })}
-      </group>
     </Canvas>
   );
 }