canvas camera moving

src/index/Canvas.tsx

@@ -1,20 +1,23 @@
 import {motion} from "framer-motion";
 import "./canvas.scss";
 import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
-import {useMemo, useRef} from "react";
-import {Mesh} from "three";
+import React, {useMemo, useRef} from "react";
+import {Mesh, Vector3} from "three";
 import {Moon} from "./Moon";
 
+type Coordinate = [number, number, number];
 export default function Canvas() {
+
   return (
     <main>
-        <ThreeCanvas camera={{position: [5,5,5]}} shadows="basic">
+        <ThreeCanvas gl={{antialias: true, alpha: true}} >
           <Sphere/>
+          <Frame/>
           <Moon radius={8} color="pink" step={0.01}/>
           <Moon radius={6} color="grey" step={0.02}/>
           <Moon radius={4} color="green" step={0.03}/>
           <Stars/>
-          <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]}  />
+          <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
         </ThreeCanvas>
       <motion.h1 className="welcome" animate={{ rotate: 360 }}>
         Welcome to my blog
@@ -23,6 +26,21 @@ export default function Canvas() {
   )
 }
 
+function Frame() {
+  useFrame(state => {
+    const { x, y } = state.pointer
+
+    // Smoothly interpolate the camera position
+    // We multiply by a factor (e.g., 5) to increase the range of movement
+    state.camera.position.lerp(new Vector3(x * 10, y * 10, 5), 0.1)
+
+    // Always keep the camera looking at the center
+    state.camera.lookAt(0, 0, 0)
+  })
+
+  return <></>
+}
+
 function Sphere() {
   const meshRef = useRef<Mesh>(null);
 
@@ -42,7 +60,6 @@ function Sphere() {
 
 const RADIUS = 20;
 const COUNT = 100;
-type Coordinate = [number, number, number];
 function Stars() {
   const positions = useMemo(() => {
     const positions: Coordinate[] = [];

src/index/canvas.scss

@@ -6,17 +6,11 @@ main {
   align-items: center;
   background: black;
   color: white;
-  position: absolute;
-  top: 0;
   z-index: -999;
 }
 
 .welcome {
   text-align: center;
-  z-index: 99;
   position: absolute;
   top: 50%;
-}
-
-.canvas {
 }

src/nav/nav.scss

@@ -41,10 +41,7 @@ $menu: #282c34;
   flex-grow: 1;
 }
 .wave {
-  position: absolute;
-  z-index: 999;
   user-select: none;
   pointer-events: none;
-  left: -10%;
-  width: 110%;
+  position: absolute;
 }