Three.js Transmission Glass

"use client";

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { MeshTransmissionMaterial, Environment } from "@react-three/drei";
import type * as THREE from "three";

type GlassMeshProps = {
  ior: number;
  thickness: number;
  chromaticAberration: number;
};

function GlassMesh({ ior, thickness, chromaticAberration }: GlassMeshProps) {
  const meshRef = useRef<THREE.Mesh>(null);
  useFrame((_state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.y += delta * 0.3;
      meshRef.current.rotation.x += delta * 0.1;
    }
  });
  return (
    <mesh ref={meshRef}>
      <torusGeometry args={[1, 0.4, 64, 128]} />
      <MeshTransmissionMaterial
        transmission={1}
        roughness={0}
        ior={ior}
        thickness={thickness}
        chromaticAberration={chromaticAberration}
        anisotropy={0.2}
        distortion={0.5}
        distortionScale={0.3}
        temporalDistortion={0.2}
        backside
        backsideThickness={0.3}
        samples={6}
        resolution={256}
      />
    </mesh>
  );
}

type TransmissionGlassProps = {
  ior?: number;
  thickness?: number;
  chromaticAberration?: number;
  className?: string;
};

export default function TransmissionGlass({
  ior = 1.5,
  thickness = 0.5,
  chromaticAberration = 0.06,
  className,
}: TransmissionGlassProps) {
  return (
    <div className={className} style={{ width: "100%", height: "100%" }}>
      <Canvas camera={{ position: [0, 0, 4], fov: 45 }} dpr={[1, 1.5]} gl={{ antialias: true, alpha: true }} style={{ background: "transparent" }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={1} />
        <GlassMesh ior={ior} thickness={thickness} chromaticAberration={chromaticAberration} />
        <Environment preset="city" />
      </Canvas>
    </div>
  );
}