R3f: Inverted stencil buffer

webgl의 stencil buffer를 활용한 mask 기능을 활용한 예제를 살펴 봅니다.

2025-05-04

Inverted stencil buffer

Inverted stencil buffer

먼저 3개의 박스를 배치합니다.

useGLTF를 사용해서 react 3d log를 추가합니다. directionalLight, hemisphereLight를 사용해서 입체감을 줍니다.

dreiFloat를 사용해서 react 3d log에 두둥실 떠다니는 효과를 줍니다.

dreiMask를 사용해서 stencil buffer를 사용한 masking을 추가 합니다.

마스킹 모양을 만드는 mesh를 Mask 컴포넌트로 구성하고 대상이 되는 객체를 useMask를 사용해서 stencil 설정을 적용합니다.

다음을 참고해서 필요할 경우 <Canvas /> 컴포넌트에 stencil 설정을 활성화 합니다.

useMask hook and Mask component doesn't work with the current version of three.js · Issue #1949 · pmndrs/drei

Loading script...