17.粒子实现雪花效果

最新推荐文章于 2021-06-02 00:41:56 发布

sheerhr

最新推荐文章于 2021-06-02 00:41:56 发布

阅读量386

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/qq_24871849/article/details/112527109

版权

three.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

使用粒子可以很容易地创建出很多细小的物体，可以用来模拟雨滴和雪花。下表是粒子对象中所有可设置属性的说明：
粒子属性使用Three.PointCloudMaterial来管理大量的粒子，产生雪花效果。示例如下

<!DOCTYPE html>

<html>

<head>
    <title>Example 07.03 - Particle Basic Material</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
            background-color: #000000;
        }
    </style>
</head>

<body>

    <div id="Stats-output">
    </div>
    <!-- Div which will hold the Output -->
    <div id="WebGL-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        // once everything is loaded, we run our Three.js stuff.
        function init() {

            var stats = initStats();

            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();

            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // create a render and set the size
            var webGLRenderer = new THREE.WebGLRenderer();
            webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);

            // position and point the camera to the center of the scene
            camera.position.x = 20;
            camera.position.y = 0;
            camera.position.z = 150;

            // add the output of the renderer to the html element
            document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

            var cloud;

            var controls = new function() {
                this.size = 4;
                this.transparent = true;
                this.opacity = 0.6;
                this.vertexColors = true;
                this.color = 0xffffff;
                this.sizeAttenuation = true;
                this.rotateSystem = true;

                this.redraw = function() {
                    if (scene.getObjectByName("particles")) {
                        scene.remove(scene.getObjectByName("particles"));
                    }
                    createParticles(controls.size, controls.transparent, controls.opacity, controls.vertexColors, controls.sizeAttenuation, controls.color);
                };
            };

            var gui = new dat.GUI();
            gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
            gui.add(controls, 'transparent').onChange(controls.redraw);
            gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
            gui.add(controls, 'vertexColors').onChange(controls.redraw);
            gui.addColor(controls, 'color').onChange(controls.redraw);
            gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
            gui.add(controls, 'rotateSystem');

            controls.redraw();
            render();

            function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {


                var geom = new THREE.Geometry();
                var material = new THREE.PointCloudMaterial({
                    size: size,
                    transparent: transparent,
                    opacity: opacity,
                    vertexColors: vertexColors,

                    sizeAttenuation: sizeAttenuation,
                    color: color
                });


                var range = 500;
                for (var i = 0; i < 15000; i++) {
                    var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
                    geom.vertices.push(particle);
                    var color = new THREE.Color(0x00ff00);
                    color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
                    geom.colors.push(color);

                }

                cloud = new THREE.PointCloud(geom, material);
                cloud.name = "particles";
                scene.add(cloud);
            }


            var step = 0;

            function render() {

                stats.update();

                if (controls.rotateSystem) {
                    step += 0.01;

                    cloud.rotation.x = step;
                    cloud.rotation.z = step;
                }


                requestAnimationFrame(render);
                webGLRenderer.render(scene, camera);
            }

            function initStats() {

                var stats = new Stats();
                stats.setMode(0); // 0: fps, 1: ms

                // Align top-left
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';

                document.getElementById("Stats-output").appendChild(stats.domElement);

                return stats;
            }
        }
        window.onload = init;
    </script>
</body>

</html>