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,14 +1,24 @@
 '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';
+
+const SealCube = forwardRef<Mesh>((props, ref) => {
+	const texture = useLoader(TextureLoader, '/img/niko.jpg');
+	const meshRef = useRef<Mesh>(null);
+
+	useImperativeHandle(ref, () => meshRef.current!, []);
 
 	useFrame((state, delta) => {
 		if (meshRef.current) {
@@ -18,28 +28,59 @@ function SealCube() {
 	});
 
 	return (
-    <mesh ref={meshRef} castShadow receiveShadow>
+		<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() {
+	const [sunMesh, setSunMesh] = useState<Mesh | null>(null);
+
 	return (
-    <>
 		<Canvas
 			shadows
 			camera={{ position: [5, 5, 5], fov: 50 }}
 			gl={{ antialias: true }}
-        style={{ width: "100vw", height: "100vh" }}>
+			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>
-    </>
 	);
 }