Skip to content

Commit e819bc0

Browse files
author
Jaroslaw
committed
Clean up
1 parent 6021eb2 commit e819bc0

11 files changed

Lines changed: 40 additions & 265 deletions

File tree

‎src/components/Content.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/components/Loader.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/components/Model.tsx‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
1-
import React, { useRef, useEffect, useState } from "react";
1+
import React, { useEffect, useState } from "react";
22
import * as THREE from "three";
3+
import { Html } from "drei";
34
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
4-
import { useFrame, useLoader } from "react-three-fiber";
55

6-
export default function Model({ url, mouse }) {
7-
// const group = useRef()
8-
const { nodes, scene, materials, animations } = useLoader(GLTFLoader, url);
9-
// const actions = useRef()
10-
// const [mixer] = useState(() => new THREE.AnimationMixer())
11-
// useFrame((state, delta) => mixer.update(delta))
12-
// useEffect(() => {
13-
// actions.current = { idle: mixer.clipAction(animations[0], group.current) }
14-
// actions.current.idle.play()
15-
// return () => animations.forEach((clip) => mixer.uncacheClip(clip))
16-
// }, []);
17-
18-
// useFrame((state, delta) => {
19-
// mixer.update(delta)
20-
// move(mouse, nodes["RootNode"])
21-
// move(mouse, nodes["RootNode"])
22-
// })
23-
consoe.log(node);
6+
const Model = () => {
7+
const [model, setModel] = useState(null);
8+
/* Load model */
9+
useEffect(() => {
10+
const loader = new GLTFLoader();
11+
loader.load("scene.gltf", true);
12+
}, []);
2413

2514
return (
26-
<React.Suspense fallback={null}>
27-
<div>model</div>
28-
</React.Suspense>
15+
<>
16+
{model ? (
17+
<group position={[0, 0, 0]} dispose={null}>
18+
<primitive name="Object_0" object={model.scene} />
19+
</group>
20+
) : (
21+
<Html>Loading...</Html>
22+
)}
23+
</>
2924
);
30-
}
25+
};
26+
27+
export default Model;

‎src/components/section.tsx‎

Whitespace-only changes.

‎src/components/tsta.tsx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/pages/index.tsx‎

Lines changed: 4 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,14 @@
1-
import React, { useRef, useEffect, useState } from "react";
2-
import * as THREE from "three";
1+
import "@/styles/styles.css";
2+
import React from "react";
33
import { Canvas } from "react-three-fiber";
4-
import { Html, useProgress, useGLTFLoader } from "drei";
54
import Loader from "@/components/Loader";
65
import Lights from "@/components/Light";
7-
import { getMousePos } from "@/utils/getMousePosition";
8-
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
9-
import { useFrame, useLoader } from "react-three-fiber";
10-
import move from "@/utils/move";
11-
// const model = async()=>{
12-
13-
// return model;
14-
// }
15-
16-
const Model = () => {
17-
/* Refs */
18-
19-
const group = useRef();
20-
const actions = useRef();
21-
22-
/* State */
23-
const [model, setModel] = useState(null);
24-
/* Load model */
25-
useEffect(() => {
26-
const loader = new GLTFLoader();
27-
loader.load("scene.gltf", (gltf) => {
28-
setModel(gltf);
29-
console.log(gltf);
30-
});
31-
}, []);
32-
const [mixer] = useState(() => new THREE.AnimationMixer());
33-
useFrame((state, delta) => mixer.update(delta));
34-
useEffect(() => {
35-
if (model) {
36-
actions.current = {
37-
idle: mixer.clipAction(model.animations[0], group.current),
38-
};
39-
actions.current.idle.play();
40-
return () => model.animations.forEach((clip) => mixer.uncacheClip(clip));
41-
}
42-
}, []);
43-
44-
return (
45-
<>
46-
{model ? (
47-
<group position={[0, 0, 0]} ref={group} dispose={null}>
48-
<primitive ref={group} name="Object_0" object={model.scene} />
49-
</group>
50-
) : (
51-
<Html>Loading...</Html>
52-
)}
53-
</>
54-
);
55-
};
6+
import Model from "@/components/Model";
567

578
const App = () => {
58-
const mouse = useRef({ x: 0, y: 0 });
59-
60-
// const { nodes, scene, materials, animations } = useLoader(GLTFLoader, "scene.gltf")
61-
62-
// useFrame((state, delta) => {
63-
// mixer.update(delta)
64-
// move(mouse, model.scene)
65-
// move(mouse, model.scene)
66-
// })
67-
689
return (
6910
<>
70-
<Canvas
71-
onMouseMove={(e) => (mouse.current = getMousePos(e))}
72-
concurrent
73-
colorManagement
74-
camera={{ position: [0, 0, 300], fov: 70 }}
75-
>
11+
<Canvas colorManagement camera={{ position: [0, 0, 300], fov: 70 }}>
7612
<Lights />
7713
<Model />
7814
</Canvas>

‎src/styles/styles.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
*,
2+
*::after,
3+
*::before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
background: "red";
11+
}
12+
13+
#__next-prerender-indicator {
14+
display: none;
15+
}

‎src/utils/getMouseDegrees.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/utils/getMousePosition.ts‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/utils/move.ts‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)