introduce sun

src/index/Canvas.tsx

@@ -2,7 +2,7 @@ import "./canvas.sass";
 import {motion} from "framer-motion";
 import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
 import {Moon} from "./Moon";
-import {BakeShadows, Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
+import {Environment, Html, 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";
@@ -11,7 +11,7 @@ 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";
+import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing";
 
 useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]);
 
@@ -21,19 +21,20 @@ export default function Canvas() {
     <motion.main className="canvas">
       <section className="canvas-ctr">
         <ThreeCanvas camera={{position: [0,0,10]}} shadows dpr={[1, 2]}>
+          <EffectComposer>
+            <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
+            <Vignette eskil={false} offset={0.1} darkness={1.1} />
+          </EffectComposer>
           <OrbitControls enablePan={false} enableZoom={false} />
-          <BakeShadows/>
           <Environment background files={MilkyWay}/>
+          <Sun/>
           <Moons/>
           <Planet/>
-          <Rings/>
           <Html center transform position={[0,0,2]}>
             <h1 className="welcome">
               Welcome to my blog
             </h1>
           </Html>
-          <ambientLight args={[1,1]} />
-          <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
           <Preload all />
         </ThreeCanvas>
       </section>
@@ -44,6 +45,16 @@ export default function Canvas() {
   )
 }
 
+function Sun() {
+  return (
+    <mesh position={[-100, 0, -100]}>
+      <sphereGeometry args={[5, 32, 32]} />
+      <meshBasicMaterial color={[10, 7, 3]} />
+      <directionalLight intensity={2} position={[0, 0, 0]} />
+    </mesh>
+  )
+}
+
 function Moons() {
   const makemake = useTexture(Makemake);
   const haumea = useTexture(Haumea);
@@ -56,16 +67,6 @@ 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 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);
@@ -78,7 +79,7 @@ function Planet() {
     planetRef.current.rotation.y += 0.005;
   });
 
-  return <mesh ref={planetRef} position={[0,0,0]}>
+  return <mesh castShadow ref={planetRef} position={[0,0,0]}>
     <sphereGeometry args={[1, 32, 32]} />
     <meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
   </mesh>