canvas menu rendering

src/index/Canvas.tsx

@@ -1,15 +1,46 @@
 import {motion} from "framer-motion";
 import "./canvas.scss";
+import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
+import {useRef} from "react";
+import {Mesh} from "three";
 
 export default function Canvas() {
   return (
     <main>
+        <ThreeCanvas>
+          <Sphere/>
+          <mesh position={[1,2,-10]}>
+            <sphereGeometry args={[0.1,0.1,0.1]}/>
+            <meshBasicMaterial />
+          </mesh>
+          <mesh position={[1,-2,-10]}>
+            <sphereGeometry args={[0.1,0.1,0.1]} />
+            <meshBasicMaterial />
+          </mesh>
+          <directionalLight color="red" position={[5, 5, 5]} />
+          <directionalLight color="blue" position={[5, 0, 5]} />
+          <directionalLight color="yellow" position={[-5, 0, 5]} />
+        </ThreeCanvas>
       <motion.h1 className="welcome" animate={{ rotate: 360 }}>
         Welcome to my blog
       </motion.h1>
-      <canvas>
-
-      </canvas>
     </main>
   )
+}
+
+function Sphere() {
+  const meshRef = useRef<Mesh>(null);
+
+  useFrame(() => {
+    if(meshRef.current) {
+      meshRef.current.rotation.y += 0.01
+    }
+  });
+
+  return (
+    <mesh ref={meshRef} position={[0,0,0]}>
+      <sphereGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial />
+    </mesh>
+  )
 }

src/index/canvas.scss

@@ -4,13 +4,19 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 10%;
   background: black;
   color: white;
+  position: absolute;
+  top: 0;
+  z-index: -999;
 }
 
 .welcome {
   text-align: center;
-  top: 25%;
-  position: relative;
+  z-index: 99;
+  position: absolute;
+  top: 50%;
+}
+
+.canvas {
 }