feat: add effects, move canvas style to css

src/app/page.css

@@ -0,0 +1,4 @@
+.canvas {
+	width: 100vw !important;
+	height: 100vh !important;
+}

src/app/page.tsx

@@ -1,45 +1,86 @@
 'use client';
 
-import { OrbitControls } from "@react-three/drei";
-import { Canvas, useFrame, useLoader } from "@react-three/fiber";
-import { useRef } from "react";
+import { OrbitControls } from '@react-three/drei';
+import { Canvas, useFrame, useLoader } from '@react-three/fiber';
+import {
+	Bloom,
+	EffectComposer,
+	GodRays,
+	Noise
+} from '@react-three/postprocessing';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
-import * as THREE from 'three';
+import { Mesh, TextureLoader } from 'three';
 
-function SealCube() {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const texture = useLoader(THREE.TextureLoader, '/img/niko.jpg');
+import './page.css';
 
-  useFrame((state, delta) => {
-    if (meshRef.current) {
-      meshRef.current.rotation.x += delta * 0.5;
-      meshRef.current.rotation.y += delta * 0.5;
-    }
-  });
+const SealCube = forwardRef<Mesh>((props, ref) => {
+	const texture = useLoader(TextureLoader, '/img/niko.jpg');
+	const meshRef = useRef<Mesh>(null);
 
-  return (
-    <mesh ref={meshRef} castShadow receiveShadow>
-      <boxGeometry args={[2.5, 2.5, 2.5]} />
-      <meshBasicMaterial map={texture} />
-    </mesh>
-  )
-}
+	useImperativeHandle(ref, () => meshRef.current!, []);
 
+	useFrame((state, delta) => {
+		if (meshRef.current) {
+			meshRef.current.rotation.x += delta * 0.5;
+			meshRef.current.rotation.y += delta * 0.5;
+		}
+	});
+
+	return (
+		<mesh ref={meshRef} castShadow receiveShadow {...props}>
+			<boxGeometry args={[2.5, 2.5, 2.5]} />
+			<meshBasicMaterial map={texture} />
+		</mesh>
+	);
+});
+SealCube.displayName = 'SealCube';
 
 export default function Home() {
-  return (
-    <>
-      <Canvas
-        shadows
-        camera={{ position: [5, 5, 5], fov: 50 }}
-        gl={{ antialias: true }}
-        style={{ width: "100vw", height: "100vh" }}>
+	const [sunMesh, setSunMesh] = useState<Mesh | null>(null);
 
+	return (
+		<Canvas
+			shadows
+			camera={{ position: [5, 5, 5], fov: 50 }}
+			gl={{ antialias: true }}
+			className='canvas'
+		>
+			<SealCube
+				ref={(mesh) => {
+					if (mesh && !sunMesh) {
+						setSunMesh(mesh);
+					}
+				}}
+			/>
 
+			<EffectComposer>
+				<Noise opacity={0.1} />
+				<Bloom
+					intensity={2}
+					luminanceThreshold={0.5}
+					luminanceSmoothing={0.1}
+				/>
+				{
+					sunMesh ? (
+						<GodRays
+							sun={sunMesh}
+							samples={30}
+							density={1.5}
+							decay={0.8}
+							weight={0.2}
+							exposure={0.5}
+							clampMax={1}
+							blur={true}
+						/>
+					) : (
+						<></>
+					)
+					// it feels genuinely so cursed to have to do : <></> just because EffectComposer can't handle null
+				}
+			</EffectComposer>
 
-        <SealCube />
-        <OrbitControls />
-      </Canvas>
-    </>
-  );
+			<OrbitControls />
+		</Canvas>
+	);
 }