「Vanta.js」3D배경 특수효과 라이브러리

 

 

 

 

Vanta.js를 사용한다면, 단 10줄 코드만으로 위와 같은 특수효과를 제작할 수 있다. 파티클이 마우스의 움직임을 따라 움직이거나 물리엔진을 적용한 애니메이팅이 Vanta.js의 주된 효과이며, 이와 같은 특수효과는 three.js에 기반한다. web에서 작용하는 대부분의 3D효과는 webGL2.0에 기반한 라이브러리 three.js로 제작되는데, 이와 관련한 정보는 threejs.org에서 확인할 수 있다.

 

vanta.js는 아래와 같은 효과를 제작할 수 있다. 주로 웹사이트 배경으로 활용하기에 적합하며, 동영상 배경보다 로딩속도가 빠르다. 하지만 사용자의 그래픽카드 성능에 따라 로딩속도의 격차가 발생한다는 점은 다소 한계점으로 작용한다. 

 

https://www.vantajs.com/

 

 

Vanta.js를 블로그에 적용한 결과, 3D 파티클(입자)의 수를 조절할 수 있고, 크기나 속도 및 물리적 반응기제를 제어함으로써 '로딩속도'의 단점을 충분히 극복할 수 있었다. three.js를 통해 개발하기가 귀찮아질 때, Vanta.js는 시간 대비 강력한 특수효과를 선보일 수 있는 훌륭한 JS라이브러리다.