Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="three.js-master/build/three.js"></script>
    <script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <script type="text/javascript">
        var W = window.innerWidth, H = window.innerHeight;
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(W, H);
        document.body.appendChild(renderer.domElement);

        var scene = new THREE.Scene();
        scene.add(new THREE.AxesHelper(100));

        /*
        var materialSprite = new THREE.SpriteMaterial({
            color: "yellow",
            opacity: 0.4,
            transparent:true
        });


        for (var i = 0; i < 10; i++) {
            for (var j = 0; j < 10; j++) {
                var sprite = new THREE.Sprite(materialSprite);
                sprite.scale.set(1.5, 0.75, 1); //aici setam marimea
                sprite.position.set(i * 2, j * 2, 0);
                scene.add(sprite);
            }
        }*/

        var texturePaths = [
            "three.js-master/examples/textures/sprites/snowflake1.png",
            "three.js-master/examples/textures/sprites/snowflake2.png",
            "three.js-master/examples/textures/sprites/snowflake3.png",
            "three.js-master/examples/textures/sprites/snowflake4.png",
            "three.js-master/examples/textures/sprites/snowflake5.png",
        ];

        function createCloud(textureUrl) {


            var textureLoader = new THREE.TextureLoader();
            var texture = textureLoader.load("three.js-master/examples/textures/sprites/snowflake1.png");

            var materialPoints = new THREE.PointsMaterial({
                map: texture,
                opacity: 0.5,
                transparent: true
            });
            var pointsGeometry = new THREE.Geometry();

            var n = 100;
            for (var i = 0; i < n; i++) {
                for (var j = 0; j < n; j++) {
                    pointsGeometry.vertices.push(new THREE.Vector3(Math.random() * 500, Math.random() * 500, Math.random() * 500));
                }
            }
            pointsGeometry.translate(-250, -250, -250);

            var points = new THREE.Points(pointsGeometry, materialPoints);
            return points;
        }

        function updateCloud(cloud) {
            cloud.rotation.x += 0.01;
            cloud.material.y += 0.01;

        }

        var clouds = [];
        for (var urlIndex = 0; urlIndex < texturePaths.length; urlIndex++) {
            var temp = createCloud(texturePaths[1])
            clouds.push(temp);
            scene.add(temp);
        }

        var camera = new THREE.PerspectiveCamera(90, W / H, 0.01, 1000);
        camera.position.set(100, 100, 100);
        camera.lookAt(scene.position);

        function desenare() {
            renderer.render(scene, camera);
            requestAnimationFrame(desenare);

            for (var i = 0; i < clouds.length; i++) {
                updateCloud(clouds[i]);

            }
        }
        desenare();

    </script>
</body>
</html>