Happy Birthday Papa!

I'll create a 3D birthday card using HTML, CSS, and JavaScript with Three.js for the 3D effects. Happy Birthday Papa!

Happy Birthday Papa! ❤️

let scene, camera, renderer, card, particles; let isOpen = false; function init() { // Scene setup scene = new THREE.Scene(); // Camera setup camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // Renderer setup renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('canvas-container').appendChild(renderer.domElement); // Create card createCard(); // Add lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Handle window resize window.addEventListener('resize', onWindowResize); // Open card button document.getElementById('open-card').addEventListener('click', openCard); // Start animation animate(); } function createCard() { // Card geometry const geometry = new THREE.BoxGeometry(3, 2, 0.1); // Card material with different colors for each face const materials = [ new THREE.MeshPhongMaterial({ color: 0xff6b6b }), // right new THREE.MeshPhongMaterial({ color: 0xff6b6b }), // left new THREE.MeshPhongMaterial({ color: 0xff6b6b }), // top new THREE.MeshPhongMaterial({ color: 0xff6b6b }), // bottom new THREE.MeshPhongMaterial({ color: 0xffffff, map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60') }), // front new THREE.MeshPhongMaterial({ color: 0xffffff }) // back ]; card = new THREE.Mesh(geometry, materials); scene.add(card); // Create particles createParticles(); } function createParticles() { const particleCount = 500; const particles = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 10; positions[i * 3 + 1] = (Math.random() - 0.5) * 10; positions[i * 3 + 2] = (Math.random() - 0.5) * 10; colors[i * 3] = Math.random(); colors[i * 3 + 1] = Math.random(); colors[i * 3 + 2] = Math.random(); } particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particles.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const particleMaterial = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, transparent: true, opacity: 0.8 }); const particleSystem = new THREE.Points(particles, particleMaterial); scene.add(particleSystem); } function openCard() { isOpen = true; document.getElementById('open-card').style.display = 'none'; // Create text const loader = new THREE.FontLoader(); loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) { const textGeometry = new THREE.TextGeometry('Happy Birthday Papa!', { font: font, size: 0.5, height: 0.1, curveSegments: 12, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.02, bevelOffset: 0, bevelSegments: 5 }); const textMaterial = new THREE.MeshPhongMaterial({ color: 0xff6b6b }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); textMesh.position.set(-3, 1, 0); scene.add(textMesh); }); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); // Rotate card if not open if (!isOpen) { card.rotation.x += 0.005; card.rotation.y += 0.01; } else { // Open animation if (card.rotation.y < Math.PI / 2) { card.rotation.y += 0.05; } } renderer.render(scene, camera); } // Start the app init(); Click the "Open Card" button to reveal the birthday message inside the 3D card. The card will rotate and display a special message for your Papa when opened.