Shaders

import { OrbitControls } from '@react-three/drei'
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import {
  DoubleSide,
  Mesh,
  PlaneGeometry, ShaderMaterial,
  ShaderMaterialParameters
} from 'three'
import { vertex, fragment } from './shader.glsl'

const params: ShaderMaterialParameters = {
  vertexShader: vertex,
  fragmentShader: fragment,
  side: DoubleSide,
  uniforms: {
    uFreq: { value: 0 },
  },
}

const material = new ShaderMaterial(params)

const Pattern = () => {
  const patternMesh = useRef<Mesh<PlaneGeometry, ShaderMaterial>>(null!)

  useFrame((state, delta) => {
    patternMesh.current.material.uniforms.uFreq.value = Math.sin(state.clock.elapsedTime)
  })

  return (
    <mesh ref={patternMesh} material={material}>
      <planeGeometry args={[1, 1]}></planeGeometry>
    </mesh>
  )
}

function Shaders() {
  return (
    <Canvas  style={{height: '512px' }} camera={{ position: [0.25, -0.25, 1] }}>
      <OrbitControls makeDefault></OrbitControls>
      <color args={['black']} attach='background'></color>
      <ambientLight></ambientLight>
      <Pattern></Pattern>
    </Canvas>
  )
}

export default Shaders