init commit

src/components/mesh/skeleton.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Mesh } from "three";
+import { useEffect, useRef } 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 mesh = useRef<Mesh>(null!);
+  const head = useLoader(GLTFLoader, "/models/skeleton/head.gltf");
+  const eye = useLoader(GLTFLoader, "/models/skeleton/eye.gltf");
+  const body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
+  return (
+    <group>
+      <mesh ref={mesh} scale={0.5} position={[-30, 1, 0]}>
+        <primitive object={eye.scene} />
+      </mesh>
+      <mesh ref={mesh} scale={0.09} position={[-6.5, 0.5, 0.3]}>
+        <primitive object={head.scene} />
+      </mesh>
+    </group>
+  );
+}
+
+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}
+      camera={{
+        position: [0, 1.2, cameraPosition],
+        rotation: [0, THREE.MathUtils.degToRad(90), 0],
+      }}
+    >
+      <ambientLight intensity={3} />
+      <gridHelper args={[99, 99, "grey", "grey"]} />
+      <SkeletonMesh />
+      {meshArray.map((el) => {
+        return (
+          <mesh position={[el.x, el.y, el.z]}>
+            <sphereGeometry args={[0.2 * Math.random()]} />
+            <meshPhysicalMaterial color="white" />
+          </mesh>
+        );
+      })}
+    </Canvas>
+  );
+}