-
Notifications
You must be signed in to change notification settings - Fork 0
/
Donut.jsx
71 lines (61 loc) · 1.64 KB
/
Donut.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Suspense, useEffect, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";
const Donut = () => {
const donut = useGLTF("./donut/scene.gltf");
const [rotationX, setRotationX] = useState(0);
useFrame(({ clock }) => {
// Update the Y-axis rotation every frame
setRotationX(clock.elapsedTime * 0.5); // Change the 0.2 to adjust the rotation speed
});
return (
<mesh>
<hemisphereLight intensity={0.4} groundColor="#914983" />
<spotLight
color="#fbe7fb"
position={[30, 80, -10]}
angle={1}
penumbra={1}
intensity={1}
castShadow
shadow-mapSize={1024}
/>
<pointLight color="#f189e1" intensity={1} />
<primitive
rotation-x={rotationX}
object={donut.scene}
scale={6}
position={[0, 0, 0]}
rotation={[0.54, 0, 0.5]}
/>
</mesh>
);
};
const DonutCanvas = () => {
return (
<Canvas
frameloop="demand"
shadows
dpr={[1, 2]}
gl={{ preserveDrawingBuffer: true }}
camera={{
fov: 12,
position: [-4, 3, 6],
}}
>
{/* Suspense is for something to show when loading */}
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
{/* move around the 3d object using pointer */}
<Donut/>
<Preload all />
</Suspense>
</Canvas>
);
};
export default DonutCanvas;