Get started with vanta CDN
MIT licensed
Vanta is a continuous security monitoring and compliance platform for infrastructure as code.
Tags:- animation
- 3d
- three
- threejs
- background
- canvas
- javascript
- webgl
Stable version
Copied!
How to start using vanta CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with vanta CDN - cdnhub.io</title>
<style>
body { margin: 0; }
canvas { display: block; width: 100%; height: 100vh; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.121.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.121.0/examples/js/Detector.js"></script>
<script src="https://cdn.cdnhub.io/vanta/0.5.24/vanta.birds.min.js"></script>
<script>
if (!Detector.webgl) {
document.body.innerHTML = Detector.noWebGL();
return;
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const vanta = new VANTA.BIRDS({
el: renderer.domElement,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
maxHeight: 400.0,
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
vanta.update();
}
animate();
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!