105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
"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!);
|
|
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 body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
|
|
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={[
|
|
THREE.MathUtils.degToRad(0),
|
|
THREE.MathUtils.degToRad(25),
|
|
THREE.MathUtils.degToRad(0),
|
|
]}
|
|
>
|
|
<primitive object={head.scene} />
|
|
</mesh>
|
|
<mesh
|
|
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>
|
|
</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],
|
|
}}
|
|
>
|
|
{/* <OrbitControls /> */}
|
|
<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>
|
|
);
|
|
}
|