feat: add LUT

src/app/niko/page.tsx

@@ -3,12 +3,13 @@
 import './page.css';
 
 import { Environment, OrbitControls, useProgress } from "@react-three/drei";
-import { Canvas } from '@react-three/fiber';
+import { Canvas, useLoader } from '@react-three/fiber';
-import { Bloom, BrightnessContrast, DepthOfField, EffectComposer, HueSaturation, Noise, SMAA, SSAO, Vignette } from '@react-three/postprocessing';
+import { Bloom, BrightnessContrast, DepthOfField, EffectComposer, HueSaturation, LUT, Noise, SMAA, SSAO, Vignette } from '@react-three/postprocessing';
 import { useLayoutEffect, useState } from "react";
 import { folder, useControls, Leva } from 'leva';
 import SealCube from './scene-components/sealcube';
 import Terrain from './scene-components/terrain';
+import { LUTCubeLoader } from 'three/examples/jsm/Addons.js';
 
 function Loader() {
   const { progress, active } = useProgress();
@@ -110,6 +111,11 @@ function Scene() {
   </>)
 }
 
+function LutEffect() {
+  const lutTexture = useLoader(LUTCubeLoader, 'niko/lut/Landscape6.cube');
+  return <LUT lut={lutTexture.texture3D} />;
+}
+
 function PostProcessing() {
   return (<EffectComposer>
     <DepthOfField target={[0, 3, 0]} focalLength={10} bokehScale={5} />
@@ -123,6 +129,7 @@ function PostProcessing() {
     <SMAA />
     <HueSaturation saturation={0.1} />
     <BrightnessContrast brightness={0.05} contrast={-0.1} />
+    <LutEffect/>
   </EffectComposer>)
 }