introduce sun

package-lock.json

@@ -17,6 +17,7 @@
         "@fortawesome/react-fontawesome": "^3.2.0",
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.5.0",
+        "@react-three/postprocessing": "^3.0.4",
         "motion": "^12.34.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
@@ -3494,6 +3495,32 @@
         }
       }
     },
+    "node_modules/@react-three/postprocessing": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-3.0.4.tgz",
+      "integrity": "sha512-e4+F5xtudDYvhxx3y0NtWXpZbwvQ0x1zdOXWTbXMK6fFLVDd4qucN90YaaStanZGS4Bd5siQm0lGL/5ogf8iDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "maath": "^0.6.0",
+        "n8ao": "^1.9.4",
+        "postprocessing": "^6.36.6"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19.0",
+        "three": ">= 0.156.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing/node_modules/maath": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz",
+      "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
+      }
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -9828,6 +9855,16 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/n8ao": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.10.1.tgz",
+      "integrity": "sha512-hhI1pC+BfOZBV1KMwynBrVlIm8wqLxj/abAWhF2nZ0qQKyzTSQa1QtLVS2veRiuoBQXojxobcnp0oe+PUoxf/w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "postprocessing": ">=6.30.0",
+        "three": ">=0.137"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -10948,6 +10985,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postprocessing": {
+      "version": "6.39.0",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.39.0.tgz",
+      "integrity": "sha512-/G6JY8hs426lcto/pBZlnFSkyEo1fHsh4gy7FPJtq1SaSUOzJgDW6f6f1K/+aMOYzK/eQEefyOb3++jPPIUeDA==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.168.0 < 0.184.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/react-fontawesome": "^3.2.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
+    "@react-three/postprocessing": "^3.0.4",
     "motion": "^12.34.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

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>