Lukas Moungos
22755e66e5
All checks were successful
continuous-integration/drone/push Build is passing
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { useRef, useMemo } from 'react'
|
|
import { Canvas, useFrame } from '@react-three/fiber'
|
|
import { BufferGeometry, Material, MathUtils, Mesh } from "three";
|
|
import { vertexShader } from './Shaders/Background/vertex';
|
|
import { fragmentShader } from './Shaders/Background/fragment';
|
|
|
|
const Fragment = () => {
|
|
// This reference will give us direct access to the mesh
|
|
const meshRef = useRef<Mesh<BufferGeometry, Material | Material[]>>(null);
|
|
|
|
const uniforms = useMemo(
|
|
() => ({
|
|
u_intensity: {
|
|
value: 1.0,
|
|
},
|
|
u_time: {
|
|
value: 0.0,
|
|
},
|
|
}),
|
|
[]
|
|
);
|
|
|
|
useFrame((state) => {
|
|
if(!meshRef.current){
|
|
return;
|
|
}
|
|
const { clock } = state;
|
|
//@ts-ignore
|
|
meshRef.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime()/5;
|
|
//@ts-ignore
|
|
meshRef.current.material.uniforms.u_intensity.value = MathUtils.lerp(
|
|
//@ts-ignore
|
|
meshRef.current.material.uniforms.u_intensity.value,
|
|
1.0,
|
|
0.02
|
|
);
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI/17, Math.PI/20, 0]} scale={1.5}>
|
|
<planeGeometry args={[20, 20, 200, 200]} />
|
|
<shaderMaterial
|
|
fragmentShader={fragmentShader}
|
|
vertexShader={vertexShader}
|
|
uniforms={uniforms}
|
|
wireframe={false}
|
|
/>
|
|
</mesh>
|
|
);
|
|
};
|
|
|
|
|
|
export const R3Gradient = () => {
|
|
return (
|
|
<div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
|
|
<Canvas camera={{ position: [0.0, 0.0, 5.0] }}>
|
|
<Fragment />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
};
|