Hướng dẫn tạo hiệu ứng tuyết rơi 3D cho website

Giáng Sinh cũng là thời điểm để làm đẹp lại cho website của bạn, để khách hàng có những ấn tượng đẹp về bộ mặt của công ty, cá nhân đang sở hữu website đó. Dạo quanh một vòng google với từ khóa "tạo hiệu ứng tuyết rơi cho website", các bạn sẽ thấy cả trăm kết quả và cả trăm bài hướng dẫn để thực hiện điều đó, nhưng để có được hiệu ứng đẹp và lạ mắt, thì bạn nên đọc tiếp bài hướng dẫn dưới đây

Đầu tiên chúng ta cần download đồ nghề về cái đã

Bấm vào link này để download

Sau khi download về, các bạn giải nén sẽ có 2 file .js và 1 file ảnh png.

Tiếp theo gõ tí html nào

<div class="snowEffect">
    <canvas id="snowcanvas" height="100%" width="100%"></canvas>
</div>

Trang điểm thêm xíu CSS nữa

.snowEffect {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events:none; /*Không có dòng này là ko click đc các phần tử khác*/
}
#snowcanvas{
    position: fixed;
    z-index: 0;
}

Giờ chúng ta bắt đầu viết hàm bằng Javascript để tuyết có thể rơi nhé

<script type="text/javascript" src="js/ThreeCanvas.js"></script>
<script type="text/javascript" src="js/Snow3d.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        if ($(window).width() > 480)
            snowEffectBind(); // Hàm này để tuyết rơi nè
    });
</script>
<script type="text/javascript" language="javascript">
    //Khởi tạo 1 số biến
    var SCREEN_WIDTH = window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;
    var container;
    var particle;
    var camera;
    var scene;
    var renderer;
    var mouseX = 0;
    var mouseY = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;
    var particles = [];
    var particleImage = new Image();
    particleImage.src = 'images/snow.png';
    

    function snowEffectBind() {
        container = $('.snowEffect');

        camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();
        scene.add(camera);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        var material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) });

        for (var i = 0; i < 100; i++) {
            particle = new Particle3D(material);
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.scale.x = particle.scale.y = 1;
            scene.add(particle);

            particles.push(particle);
        }

        container.html(renderer.domElement);

        document.addEventListener('mousemove', onDocumentMouseMove, false);
        document.addEventListener('touchstart', onDocumentTouchStart, false);
        document.addEventListener('touchmove', onDocumentTouchMove, false);

        setInterval(loop, 1000 / 60);
    }

    function onDocumentMouseMove(event) {
        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
    }

    function onDocumentTouchStart(event) {
        if (event.touches.length == 1) {
            event.preventDefault();

            mouseX = event.touches[0].pageX - windowHalfX;
            mouseY = event.touches[0].pageY - windowHalfY;
        }
    }

    function onDocumentTouchMove(event) {
        if (event.touches.length == 1) {
            event.preventDefault();

            mouseX = event.touches[0].pageX - windowHalfX;
            mouseY = event.touches[0].pageY - windowHalfY;
        }
    }

    function loop() {
        for (var i = 0; i < particles.length; i++) {
            var particle = particles[i];
            particle.updatePhysics();

            with (particle.position) {
                if (y < -1000) y += 2000;
                if (x > 1000) x -= 2000;
                else if (x < -1000) x += 2000;
                if (z > 1000) z -= 2000;
                else if (z < -1000) z += 2000;
            }
        }

        camera.position.x += (mouseX - camera.position.x) * 0.05;
        camera.position.y += (-mouseY - camera.position.y) * 0.05;
        camera.lookAt(scene.position);

        renderer.render(scene, camera);
    }
</script>

Cuối cùng là tận hưởng thành quả thôi, các bạn có thể xem demo tại đây

Demos Việt Nam