canvas space theme

src/index/Canvas.tsx

@@ -1,25 +1,20 @@
 import {motion} from "framer-motion";
 import "./canvas.scss";
 import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
-import {useRef} from "react";
+import {useMemo, useRef} from "react";
 import {Mesh} from "three";
+import {Moon} from "./Moon";
 
 export default function Canvas() {
   return (
     <main>
-        <ThreeCanvas>
+        <ThreeCanvas camera={{position: [5,5,5]}} shadows="basic">
           <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]} />
+          <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]}  />
         </ThreeCanvas>
       <motion.h1 className="welcome" animate={{ rotate: 360 }}>
         Welcome to my blog
@@ -39,8 +34,40 @@ function Sphere() {
 
   return (
     <mesh ref={meshRef} position={[0,0,0]}>
-      <sphereGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial />
+      <sphereGeometry />
+      <meshPhysicalMaterial color="blue" iridescence={.5} />
+    </mesh>
+  )
+}
+
+const RADIUS = 20;
+const COUNT = 100;
+type Coordinate = [number, number, number];
+function Stars() {
+  const positions = useMemo(() => {
+    const positions: Coordinate[] = [];
+    for(let i = 0; i < COUNT; i++) {
+      const u = Math.random();
+      const v = Math.random();
+
+      const theta = 2 * Math.PI * u;
+      const phi = Math.acos(2 * v - 1);
+
+      // x = r*sin(theta)*cos(phi)
+      // x = r*sin(theta)*sin(phi)
+      // z = r*cos(phi)
+      positions.push([
+        RADIUS * Math.sin(phi) * Math.cos(theta),
+        RADIUS * Math.sin(phi) * Math.sin(theta),
+        RADIUS * Math.cos(phi),
+      ])
+    }
+    return positions;
+  }, []);
+
+  return positions.map(coord => <mesh position={coord}>
+      <sphereGeometry args={[.1]} />
+      <meshBasicMaterial />
     </mesh>
   )
 }

src/index/Moon.tsx

@@ -0,0 +1,28 @@
+import {useMemo, useRef, useState} from "react";
+import {Mesh} from "three";
+import {useFrame} from "@react-three/fiber";
+
+export function Moon(props: {radius: number, color: string, step: number}) {
+  const {radius, color, step} = props;
+  const moonRef = useRef<Mesh>(null);
+  const [theta, setTheta] = useState(0);
+
+  useFrame(() => {
+    if(!moonRef.current) return;
+
+    moonRef.current.position.set(
+      radius * Math.sin(theta),
+      0,
+      radius * Math.cos(theta),
+    )
+
+    setTheta(theta + step);
+  })
+
+  return (
+    <mesh ref={moonRef} position={[0,0,0]}>
+      <sphereGeometry args={[.5]} />
+      <meshPhysicalMaterial color={color} iridescence={0.2} />
+    </mesh>
+  )
+}