add jupiter rings

src/index/Canvas.tsx

@@ -1,27 +1,33 @@
 import "./canvas.sass";
 import {motion} from "framer-motion";
-import {Canvas as ThreeCanvas} from "@react-three/fiber";
+import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
 import {Moon} from "./Moon";
-import {AnimateFade, AnimateSpin} from "../animations";
+import {AnimateSpin} from "../animations";
-import {Environment, OrbitControls, Preload, useTexture} from "@react-three/drei";
+import {BakeShadows, Environment, OrbitControls, Preload, useTexture} from "@react-three/drei";
 import Jupiter from "../img/2k_jupiter.webp";
 import Makemake from "../img/2k_makemake_fictional.webp";
 import Ceres from "../img/2k_ceres_fictional.webp";
 import Haumea from "../img/2k_haumea_fictional.webp";
 import MilkyWay from "../img/2k_stars_milky_way.jpg";
+import SaturnRings from "../img/12k_jupiter_rings.webp";
+import {useRef} from "react";
+import type {Mesh} from "three";
+import * as THREE from "three";
 
-const main = AnimateFade();
 export default function Canvas() {
 
   // fade animation sync with loading
   return (
-    <motion.main initial={main.initial} animate={main.animate} transition={{duration: 3}} className="canvas">
+    <motion.main className="canvas">
       <section className="canvas-ctr">
-        <ThreeCanvas shadows>
+        <ThreeCanvas camera={{position: [3,3,3]}} shadows dpr={[1, 2]}>
-          <OrbitControls enableZoom={false} />
+          <OrbitControls enablePan={false} enableZoom={false} />
+          <BakeShadows/>
           <Environment background files={MilkyWay}/>
           <Moons/>
           <Planet/>
+          <Rings/>
+          <ambientLight args={[1,1]} />
           <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
           <Preload all />
         </ThreeCanvas>
@@ -48,11 +54,30 @@ function Moons() {
   </>
 }
 
+function Rings() {
+  const map = useTexture(SaturnRings);
+  
+  // To avoid seeing the backside as invisible, use DoubleSide.
+  // We should also use a RingGeometry rather than a CircleGeometry so it is empty in the center.
+  return <mesh position={[0,0,0]} rotation={[-Math.PI / 2, 0, 0]}>
+    <ringGeometry args={[1.2, 1.7, 64]} />
+    <meshPhysicalMaterial map={map}  transparent={true} side={THREE.DoubleSide} iridescence={1}/>
+  </mesh>
+}
+
 function Planet() {
   const colorMap = useTexture(Jupiter);
+  const planetRef = useRef<Mesh>(null);
 
-  return <mesh position={[0,0,0]}>
+  // add planet spin
-    <sphereGeometry />
+  useFrame(() => {
+    if(!planetRef.current) return;
+
+    planetRef.current.rotation.y += 0.005;
+  });
+
+  return <mesh ref={planetRef} position={[0,0,0]}>
+    <sphereGeometry args={[1, 32, 32]} />
     <meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
   </mesh>
 }

src/index/Moon.tsx

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