💖 Tạo Trang Web Hiệu Ứng "Text Rơi" 3D Lung Linh với Three.js

Trong bài viết này, mình sẽ giới thiệu một dự án web nhỏ nhưng đầy cảm xúc, sử dụng Three.js để tạo nên một không gian tình yêu ảo diệu với hiệu ứng chữ rơi, trái tim bay và sao băng lấp lánh. Kèm theo đó là nhạc nền du dương có thể bật/tắt tùy thích.

✅ Kỹ thuật: HTML, CSS, JavaScript, Three.js
🎯 Mục tiêu: Truyền tải cảm xúc qua hiệu ứng đồ họa 3D nhẹ và đẹp mắt
🧠 Đối tượng: Dành cho những ai yêu thích thiết kế tương tác, lập trình sáng tạo, hoặc muốn tạo một món quà web đặc biệt cho ai đó 💌

✨ Tính Năng Chính

🌠 1. Bầu Trời Sao Lung Linh

Hơn 800 ngôi sao nhỏ được vẽ bằng hình cầu 3D, phân bố ngẫu nhiên trong không gian tạo cảm giác chiều sâu.

💬 2. Chữ Bay Rơi Nhẹ

Các từ như “Yêu thương”, “Hạnh phúc”, “Em & Anh” được render thành texture từ Canvas và hiển thị 3D trên mặt phẳng. Mỗi chữ có màu sắc chuyển động mượt mà từ trắng sang hồng, tạo cảm giác mơ mộng.

💖 3. Trái Tim Bay Ngẫu Nhiên

Các trái tim được vẽ bằng hình ảnh có hiệu ứng glow, rơi nhẹ nhàng trong không gian và có độ lớn ngẫu nhiên, tạo nên chuyển động sống động nhưng nhẹ nhàng.

🌠 4. Hiệu Ứng Sao Băng

Sao băng xuất hiện ngẫu nhiên với vệt sáng động, sử dụng LineGeometry để tạo “đuôi sao” biến mất theo thời gian – mang lại điểm nhấn bất ngờ trên màn hình.

🎵 5. Nhạc Nền Lãng Mạn Có Thể Bật/Tắt

Tích hợp nhạc nền (nnca.mp3) tự động phát khi mở trang. Người dùng có thể click vào nút tròn góc phải để bật hoặc tắt nhạc, với hiệu ứng SVG quay tròn khi đang phát.

📱 6. Hỗ Trợ Cảm Ứng và Tương Tác

Người dùng có thể xoay góc nhìn bằng chuột hoặc cảm ứng trên điện thoại, tạo cảm giác tương tác thực sự với không gian 3D.

🔧 Cách Hoạt Động

Dưới đây là sơ đồ tổng quát:

1. Khởi tạo Scene, Camera, Renderer

2. Tạo stars, texts, hearts, shooting stars rồi đưa vào scene

3. Dùng animation loop để xử lý chuyển động mỗi frame

4. Xử lý tương tác: zoom chuột, drag chuột hoặc cảm ứng

5. Render toàn cảnh với renderer.render(scene, camera)

📌 Kết Luận

Trang web này không chỉ là một hiệu ứng đồ họa đơn thuần, mà còn là một món quà tinh thần – nơi bạn có thể truyền tải tình cảm qua từng dòng chữ bay lơ lửng, từng trái tim hồng nhỏ bé và cả âm nhạc dịu dàng phía sau.

Bạn có thể dễ dàng chia sẻ trang này cho người thân, bạn bè, người yêu hoặc lưu giữ làm một kỷ niệm kỹ thuật số độc đáo.

🔗 Demo & Mã Nguồn

🔍 Bạn muốn thử hoặc tuỳ chỉnh?
👉 [Xem bản demo Click Here]
💾 Xem mã nguồn trên GitHub