import { LiquidTouchMaterial } from "@/components/LiquidTouchMaterial"
import { Canvas } from "@react-three/fiber"
import { useTexture } from "@react-three/drei"

function LiquidTouchImage({ src }: { src: string }) {
    const texture = useTexture(src)

    return (
        <mesh>
            <planeGeometry args={[8, 3]} />
            <LiquidTouchMaterial map={texture} />
        </mesh>
    )
}

<Canvas>
 <Scene src="/image.jpg" />
</Canvas>

import { View, useTexture } from "@react-three/drei"
import { useRef } from "react"

function Scene({ src }: { src: string }) {
    const texture = useTexture(src)

    return (
        <div className="relative w-[600px] h-[400px]">
            <img src={src} className="w-full h-full object-cover" />
            <View className="absolute inset-0">
                <mesh>
                    <planeGeometry {...} />
                    <LiquidTouchMaterial map={texture} />
                </mesh>
            </View>
        </div>
    )
}

<Canvas>
    <Scene src="/image.jpg" />
</Canvas>