XCreative Dev & WebGLreference-ideavideo

3D wiping effect using MeshBVH #threejs

Liu L·@auxdesigner·Mar 14, 2026

개요 Three.js의 MeshBVH 라이브러리를 활용하여 3D 모델이 점진적으로 드러나거나 사라지는 와이핑(wiping) 이펙트를 구현한 데모다. 건물 모델에 적용되어 시각적으로 인상적인 전환 효과를 보여준다.

활용 가능성 건축 시각화 웹사이트에서 건물 모델의 층별 소개, 제품 랜딩 페이지의 스크롤 기반 3D 공개 연출, 인터랙티브 포트폴리오의 전환 효과 등에 활용할 수 있다. MeshBVH의 공간 분할 구조를 활용하면 복잡한 메시에서도 성능 저하 없이 부분 렌더링이 가능하다는 점이 실용적이다.

참고 자료 - 원본 트윗 - 3D 모델 출처 (Sketchfab) ===

#threejs#mesh-bvh#3d-effect#webgl

Related in Creative Dev & WebGL