Rye

import { useRef, useState, useEffect, Fragment } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Stage } from '@react-three/drei'
import * as THREE from 'three'
import typefaceData from '@compai/font-rye/data/typefaces/normal-400.json'

const font = new THREE.FontLoader().parse(typefaceData)

export const RyeText = ({
  bevelEnabled,
  bevelOffset,
  bevelSegments
  bevelSize,
  bevelThickness,
  clearcoat,
  clearcoatRoughness,
  color,
  curveSegments,
  font,
  fontSize,
  height,
  metalness,
  reflectivity,
  roughness,
  position,
  text,
  wireframe,
  ...props
}) => {
  const mesh = useRef()
  return (
    <mesh {...props} position={position} ref={mesh}>
      <textGeometry args={[
        text, { 
          bevelEnabled,
          bevelOffset,
          bevelSize,
          bevelSegments,
          bevelThickness,
          curveSegments,
          font,
          height,
          size: fontSize, 
        }]} />
      <meshPhysicalMaterial 
        color={color}
        clearcoat={clearcoat}
        clearcoatRoughness={clearcoatRoughness}
        metalness={metalness}
        reflectivity={reflectivity}
        roughness={roughness}
        wireframe={wireframe}
      />
    </mesh>
  )
}

const Component = () => {
  return (
    <Canvas>
        <Stage
          contactShadow={true }
          contactShadowOpacity={0.2}
          contactShadowBlur={1.5}
          environment="city"
          intensity={1} 
          preset="rembrandt"
        >
        <RyeText
          bevelEnabled={true}
          bevelOffset={0}
          bevelSegments={32}
          bevelSize={1}
          bevelThickness={4}
          clearcoat={0.2}
          clearcoatRoughness={0.2}
          color="#f325f6"
          curveSegments={32}
          font="Rye"
          fontSize={16}
          height={0.2}
          metalness={0.2}
          reflectivity={0.5}
          roughness={1}
          position={[0,0,0]}
          text="Rye" 
          wireframe={false}  
        />
        </Stage>
    </Canvas>
  )
}

export default Component