소개

Shader Material

이 예제는 React Three Fiber에서 drei shaderMaterial을 사용하는 방법을 보여줍니다. shaderMaterial은 GLSL 셰이더를 사용하여 3D 객체의 재질을 정의할 수 있게 해줍니다. 이 예제에서는 기본적인 셰이더를 사용하여 간단한 효과를 구현합니다.

Hover시 texture 변경

두 개의 다른 이미지를 useTexture 훅을 사용하여 불러오고, 마우스 오버 이벤트에 따라 이미지를 변경합니다.

Hover시 Shader로 이미지 블렌딩

Hover 이벤트에 따라 두 개의 이미지를 셰이더를 사용하여 블렌딩합니다.

Hover시 Displacement로 이미지 블렌딩

Hover 이벤트에 따라 셰이더를 사용하여 이미지를 블렌딩하고, 디스플레이스먼트 맵을 적용합니다.