archiwum/j4studio-web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add eays movment (WIP)

Browse Source
This commit is contained in:
Stanislaw
2023-10-24 03:50:45 +02:00
parent d2bfcd0239
commit d307234f23
3 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/page.module.css
View File

@@ -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;
}

1
src/app/page.tsx
View File

@@ -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>
);

63
src/components/mesh/skeleton.tsx
View File

@@ -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 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={[
const [eyeAngle, setEyeAAngle] = useState([
THREE.MathUtils.degToRad(0),
THREE.MathUtils.degToRad(70),
THREE.MathUtils.degToRad(0),
]}
>
<primitive object={eye.scene} />
</mesh>
]);
const mesh = useRef<Mesh>(null!);
let head = useLoader(GLTFLoader, "/models/skeleton/head.gltf");
const eye = 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={[-2.3, 0.5, -1]}
rotation={[
@@ -45,18 +46,12 @@ function SkeletonMesh() {
>
<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),
]}
>
<mesh scale={0.1} position={[-2.03, 0.72, -0.91]} rotation={eyeAngle}>
<primitive object={eye.scene} />
</mesh>
<mesh scale={0.1} position={[-2.5, 0.72, -0.7]} rotation={eyeAngle}>
<primitive object={eye2} />
</mesh>
</group>
);
}