snieg

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta author="Emilia Adamska Kamil Szews">
    <title>Śnieg z point-sprite</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // Inicjalizacja sceny, kamery i renderera
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Ustawienie tła (dodaj własne tło)
        var textureLoader = new THREE.TextureLoader();
        textureLoader.load('background.png', function (texture) {
            scene.background = texture;
        });

        // Tworzenie punktu sprite dla efektu śniegu
        var snowflakeTexture = new THREE.TextureLoader().load('snowflake.png'); // moja tekstura snieżynki
        var snowflakeMaterial = new THREE.PointsMaterial({
            size: 10,
            map: snowflakeTexture,
            blending: THREE.AdditiveBlending,
            depthTest: false,
            transparent: true
        });

        // Tworzenie grupy punktów dla efektu śniegu
        var snowflakeCount = 50000; // Ilość punktów śniegu
        var snowflakeGeometry = new THREE.BufferGeometry();
        var positions = new Float32Array(snowflakeCount * 3);
        var velocities = new Float32Array(snowflakeCount);
        for (var i = 0; i < snowflakeCount; i++) {
            positions[i * 3] = Math.random() * 20000 - 10000; //x
            positions[i * 3 + 1] = Math.random() * 20000 - 10000; //y
            positions[i * 3 + 2] = Math.random() * 20000 - 10000; //z
            velocities[i] = 0; // Początkowa prędkość śniegu
        }
        snowflakeGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        snowflakeGeometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1));
        var snowflakes = new THREE.Points(snowflakeGeometry, snowflakeMaterial);
        scene.add(snowflakes);

        // Aktualizacja animacji
        function animate() {
            requestAnimationFrame(animate);

            // Aktualizacja pozycji i animacji śniegu
            var positions = snowflakes.geometry.attributes.position.array;
            var velocities = snowflakes.geometry.attributes.velocity.array;
            for (var i = 0; i < snowflakeCount; i++) {
                velocities[i] += 0.001 + Math.random() * 0.01;
                positions[i * 3 + 1] -= velocities[i];

                if (positions[i * 3 + 1] < -10000) {
                    positions[i * 3 + 1] = 10000; // resetowanie pozycji sniezynki
                    velocities[i] = 0;
                }
            }
            snowflakes.geometry.attributes.position.needsUpdate = true;

            // Poruszanie się po przestrzeni
            var speed = 10;
            if (keys.ArrowUp) camera.position.z -= speed;
            if (keys.ArrowDown) camera.position.z += speed;
            if (keys.ArrowLeft) camera.position.x -= speed;
            if (keys.ArrowRight) camera.position.x += speed;

            // Renderowanie sceny
            renderer.render(scene, camera);
        }

        // Rozmiar renderera przy zmianie rozmiaru okna
        window.addEventListener('resize', function () {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }, false);

        // Obsługa klawiszy
        var keys = {};
        window.addEventListener('keydown', function (event) {
            keys[event.code] = true;
        }, false);
        window.addEventListener('keyup', function (event) {
            keys[event.code] = false;
        }, false);

        // Rozpoczęcie animacji
        animate();
    </script>
</body>
</html>
Editor is loading...