canvas三维粒子波纹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：canvas三维粒子波纹动画效果代码，可设置修改参数。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


    <style>
        * {
          margin: 0;
          padding: 0;
        }

        body, html {
          width: 100%;
          height: 100%;
          position: relative;
        }

        body {
          background: radial-gradient(circle, #6d2717, #0c0000);
        }

        canvas {
          pointer-events: none;
        }

        a, a:focus {
          position: fixed;
          top: 0;
          left: 0;
          margin: 25px;
          color: #ddd;
        }

        .controls {
          width: 500px;
          display: inline-block;
          position: absolute;
          top: 20px;
          left: 50%;
          transform: translate(-50%, 0);
        }

        .btn-group {
          display: inline-block;
        }

        .btn {
          display: inline-block;
          margin-bottom: 0;
          font-weight: 500;
          text-align: center;
          -ms-touch-action: manipulation;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          white-space: nowrap;
          line-height: 1.5;
          padding: 4px 15px;
          font-size: 12px;
          border-radius: 0px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          position: relative;
          color: rgba(0, 0, 0, 0.65);
          background-color: #fff;
          border-color: #d9d9d9;
        }

        .btn:first-child {
          border-radius: 4px 0 0 4px;
        }

        .btn:last-child {
          border-radius: 0 4px 4px 0;
        }

        .btn.active {
          color: #fff;
          background-color: #dc7953;
          border-color: #dc7953;
        }

        .rotate {
          margin-left: 20px;
        }

        .rotate .btn {
          border: none;
          border-radius: 20px;
        }
    </style>
</head>
<body>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jwmeyy.js"></script>
    <div class="controls">
        <div class="functions btn-group"></div>
        <div class="rotate btn-group">
            <div class="btn rotatex" data-rotate="x">rotatex</div>
            <div class="btn rotatey" data-rotate="y">rotatey</div>
            <div class="btn rotatez" data-rotate="z">rotatez</div>
        </div>
    </div>
    <canvas width="2560" height="1000" style="min-width: 1000px; width: 100%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%)"></canvas>

    <script>
        var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

        function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

        function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

        function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

        var Point = function (_F3$Obj) {
            _inherits(Point, _F3$Obj);

            function Point() {
                var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;

                _classCallCheck(this, Point);

                var _this = _possibleConstructorReturn(this, (Point.__proto__ || Object.getPrototypeOf(Point)).call(this));

                _this.radius = radius;
                _this.color = 'rgba(' + [Math.random() * 255 | 0, Math.random() * 255 | 0, Math.random() * 255 | 0, Math.random()].join(',') + ')';
                _this.prevCrood = null;
                return _this;
            }

            _createClass(Point, [{
                key: 'render',
                value: function render(ctx) {

                    ctx.fillStyle = '#fff';
                    ctx.fillRect(this.croods2D.position.x, this.croods2D.position.y, this.radius * this.croods2D.scale * this.yScale, this.radius * this.croods2D.scale * this.yScale);
                }
            }]);

            return Point;
        }(F3.Obj);

        var planeFunctions = {
            'sin(sqrt(x^2+z^2))': function sinSqrtX2Z2(x, z, offset) {
                return Math.sin(Math.sqrt(Math.pow(x / 2, 2) + Math.pow(z / 2, 2)) - offset);
            },
            'cos(x)*sin(z)': function cosXSinZ(x, z, offset) {
                return Math.cos(x / 4 + offset) * Math.sin(z / 4 + offset) * 1;
            }
        };

        var Effect = function (_F3$Time) {
            _inherits(Effect, _F3$Time);

            function Effect(renderer, scene, camera, cvs) {
                _classCallCheck(this, Effect);

                var _this2 = _possibleConstructorReturn(this, (Effect.__proto__ || Object.getPrototypeOf(Effect)).call(this));

                _this2.renderer = renderer;
                _this2.scene = scene;
                _this2.camera = camera;
                _this2.cvs = cvs;

                _this2.xOffset = 0;
                _this2.waveHeight = 0.4; // 波高
                _this2.waveWidth = 8; // 波长

                _this2.col = 33;
                _this2.colPointNum = 33;

                _this2.flyTime = 2000;
                _this2.timePass = 0;

                _this2.scale = 1;
                _this2.scaleStep = 0.01;

                _this2.planeFunction = function () {
                    return 0;
                };
                _this2.rotate = { x: false, y: false, z: false };

                _this2.pointGroup = new F3.Obj();
               .........完整代码请登录后点击上方下载按钮下载查看