Birthday

[washimreja]

<title>Happy Birthday 3D Animation</title> <style> body { margin: 0; overflow: hidden; background: linear-gradient(to bottom, #ffccff, #ff66b2); } #message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: bold; color: white; text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.7); font-family: Arial, sans-serif; display: none; } </style>

🎉 Happy Birthday, Washim! 🎂

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://threejs.org/examples/js/loaders/FontLoader.js"></script> <script src="https://threejs.org/examples/js/geometries/TextGeometry.js"></script>

<script>
    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    let renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    let textMesh;
    let fontLoader = new THREE.FontLoader();
    fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
        let textGeometry = new THREE.TextGeometry('Happy Birthday!', {
            font: font,
            size: 1,
            height: 0.2
        });

        let material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        textMesh = new THREE.Mesh(textGeometry, material);
        textMesh.position.set(-4, 0, 0);
        scene.add(textMesh);
    });

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        if (textMesh) textMesh.rotation.y += 0.02; // Rotate text
        renderer.render(scene, camera);
    }
    animate();

    // Balloons
    let balloons = [];
    for (let i = 0; i < 20; i++) {
        let balloonGeometry = new THREE.SphereGeometry(0.3, 32, 32);
        let balloonMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
        let balloon = new THREE.Mesh(balloonGeometry, balloonMaterial);
        balloon.position.set(Math.random() * 8 - 4, -2, Math.random() * 4 - 2);
        scene.add(balloon);
        balloons.push(balloon);
    }

    function floatBalloons() {
        balloons.forEach(balloon => {
            balloon.position.y += 0.02;
            if (balloon.position.y > 4) {
                balloon.position.y = -2;
            }
        });
        requestAnimationFrame(floatBalloons);
    }
    floatBalloons();

    // Show message after 3 seconds
    setTimeout(() => {
        document.getElementById("message").style.display = "block";
    }, 3000);
</script>