下雪效果

作者: Codifier | 来源:发表于2019-11-15 16:09 被阅读0次

下雪效果
Cesium下雪效果
强大的CSS：模拟下雪效果动画制作教程
【IOS】粒子效果实现下雨,下雪,烟花效果
CAEmitterLayer 实现下雪效果
ThingJS之动态天气效果
js实现下雪效果
css3 下雪效果
IPAI摄影搜罗PS教程：简单几步，教你学会制作下雪的效果
ps小技巧，制作下雪效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snow</title>
    <script src="../../three-part/threejs/three.js"></script>
    <script src="../../three-part/utils/stats.min.js"></script>
    <script src="../../three-part/utils/dat.gui.min.js"></script>
    <script src="../controls/TrackballControls.js"></script>
    <script src="../util/util.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    init();
    function init() {
        // show FPS
        let stats = initStats();
        // resize
        window.addEventListener('resize', onResize, false);

        let scene = new THREE.Scene();
        let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(20, 40, 110);
        camera.lookAt(new THREE.Vector3(20, 30, 0));

        let renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0x000000));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.getElementById("container").appendChild(renderer.domElement);

        // init trackball control
        let trackballControls = initTrackballControls(camera, renderer);
        let clock = new THREE.Clock();

        // attributes which can be modified in GUI
        const controls = {
            "size" : 10,
            "transparent" : true,
            "opacity" : 0.6,
            "color" : 0xffffff,
            "sizeAttenuation" : true,
            "redraw" : function(){
                scene.children.forEach(function (child) {
                    if (child instanceof THREE.Points) {
                        scene.remove(child);
                    }
                });
                createPointInstances();
            }
        };
        // init GUI
        initGUI();

        createPointInstances();

        renderScene();

        function initGUI(){
            let gui = new dat.GUI();
            gui.add(controls, 'size', 0, 20).onChange(controls.redraw);
            gui.add(controls, 'transparent').onChange(controls.redraw);
            gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
            gui.addColor(controls, 'color').onChange(controls.redraw);
            gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
        }

        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function createPointCloud(texture) {
            let geom = new THREE.Geometry();
            let color = new THREE.Color(controls.color);
            color.setHSL(
                color.getHSL().h,
                color.getHSL().s,
                (Math.random()) * color.getHSL().l
            );

            let material = new THREE.PointsMaterial({
                size: controls.size,
                transparent: controls.transparent,
                opacity: controls.opacity,
                map: texture,
                blending: THREE.AdditiveBlending,
                sizeAttenuation: controls.sizeAttenuation,
                // Whether rendering this material has any effect on the depth buffer. Default is true.
                depthWrite: false,
                color: controls.color
            });

            let range = 100;
            for (let i = 0; i < 150; i++) {
                let particle = new THREE.Vector3(
                    Math.random() * range - range / 2,
                    Math.random() * range * 1.5,
                    Math.random() * range - range / 2
                );
                particle.velocityY = 0.1 + Math.random() / 5;
                particle.velocityX = (Math.random() - 0.5) / 3;
                particle.velocityZ = (Math.random() - 0.5) / 3;
                geom.vertices.push(particle);
            }

            let points = new THREE.Points(geom, material);
            return points;
        }

        function createPointInstances() {
            let loader = new THREE.TextureLoader();
            let texture1 = loader.load("../assets/textures/particles/snowflake1_t.png");
            let texture2 = loader.load("../assets/textures/particles/snowflake2_t.png");
            let texture3 = loader.load("../assets/textures/particles/snowflake3_t.png");
            let texture4 = loader.load("../assets/textures/particles/snowflake5_t.png");
            scene.add(createPointCloud(texture1));
            scene.add(createPointCloud(texture2));
            scene.add(createPointCloud(texture3));
            scene.add(createPointCloud(texture4));
        }

        function renderScene(){
            trackballControls.update(clock.getDelta());
            stats.update();
            scene.children.forEach(function (child) {
                if (child instanceof THREE.Points) {
                    let vertices = child.geometry.vertices;
                    vertices.forEach(function (v) {
                        v.y = v.y - (v.velocityY);
                        v.x = v.x - (v.velocityX);
                        v.z = v.z - (v.velocityZ);
                        if (v.y <= 0) v.y = 60;
                        if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1;
                        if (v.z <= -20 || v.z >= 20) v.velocityZ = v.velocityZ * -1;
                    });
                    child.geometry.verticesNeedUpdate = true;
                }
            });
            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }
    }
</script>
</body>
</html>

运行结果：