canvas实现粒子上升动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：canvas实现粒子上升动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1e222a;
        }

        #threeDScene {
            width: 100vw;
            height: 100vh;
            margin: 0;
            display: block;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            position: absolute;
        }

        .App {
            position: absolute;
            width: 85vmin;
            height: 85vmin;
            border-radius: 42.5vmin;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            overflow: hidden;
            background-color: black;
            border: solid 10px #2c313c;
            box-sizing: border-box;
            box-shadow: 0px 0px 30px rgba(10, 14, 20, 0.5);
        }

        .baseImg {
            opacity: 0;
            visibility: hidden;
            width: 0;
            height: 0;
            display: none;
        }
    </style>



</head>

<body>
    <div class="App">
        <canvas id="threeDScene"></canvas>
    </div>

<img src='//repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png' class="baseImg" id="Img"/>


    <script type="module">
        import {
            Scene,
            PerspectiveCamera,
            WebGLRenderer,
            Clock,
            PlaneGeometry,
            BufferAttribute,
            Points,
            ShaderMaterial,
            PointsMaterial,
            MeshBasicMaterial,
            Mesh,
            Vector3,
            TextureLoader,
            Uniform
        } from
        "https://cdn.skypack.dev/three@0.125.2";
        import {
            BloomEffect,
            EffectComposer,
            EffectPass,
            RenderPass,
            Pass,
            ShaderPass,
            DepthOfFieldEffect
        } from
        "https://cdn.skypack.dev/postprocessing@6.20.3";

        /*
 * A fast javascript implementation of simplex noise by Jonas Wagner
 *
 * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
 * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
 * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
 * Better rank ordering method by Stefan Gustavson in 2012.
 *
 *
 * Copyright (C) 2016 Jonas Wagner
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */
        (function () {
            'use strict';

            var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
            var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
            var F3 = 1.0 / 3.0;
            var G3 = 1.0 / 6.0;
            var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
            var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;

            function SimplexNoise(random) {
                if (!random) random = Math.random;
                this.p = buildPermutationTable(random);
                this.perm = new Uint8Array(512);
                this.permMod12 = new Uint8Array(512);
                for (var i = 0; i < 512; i++) {
                    this.perm[i] = this.p[i & 255];
                    this.permMod12[i] = this.perm[i] % 12;
                }

            }
            SimplexNoise.prototype = {
                grad3: new Float32Array([1, 1, 0,
                    -1, 1, 0,
                    1, -1, 0,

                    -1, -1, 0,
                    1, 0, 1,
                    -1, 0, 1,

                    1, 0, -1,
                    -1, 0, -1,
                    0, 1, 1,

                    0, -1, 1,
                    0, 1, -1,
                    0, -1, -1]),
                grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
                    0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
                    1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
                    -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
                    1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
                    -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
                    1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
                    -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
                noise2D: function (xin, yin) {
                    var permMod12 = this.permMod12;
                    var perm = this.perm;
                    var grad3 = this.grad3;
                    var n0 = 0; // Noise contributions from the three corners
                    var n1 = 0;
                    var n2 = 0;
                    // Skew the input space to determine which simplex cell we're in
                    var s = (xin + yin) * F2; // Hairy factor for 2D
                    var i = Math.floor(xin + s);
                    var j = Math.floor(yin + s);
                    var t = (i + j) * G2;
                    var X0 = i - t; // Unskew the cell origin back to (x,y) space
                    var Y0 = j - t;
                    var x0 = xin - X0; // The x,y distances from the cell origin
                    var y0 = yin - Y0;
                    // For the 2D case, the simplex shape is an equilateral triangle.
                    // Determine which simplex we are in.
                    var i1,
                    j1; // Offsets for second (middle) corner of simplex in (i,j) coords
                    if (x0 > y0) {
                        i1 = 1;
                        j1 = 0;
                    } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
                    else {
                        i1 = 0;
                        j1 = 1;
                    } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
                    // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
                    // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
                    // c = (3-sqrt(3))/6
                    var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
                    var y1 = y0 - j1 + G2;
                    var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
                    var y2 = y0 - 1.0 + 2.0 * G2;
                    // Work out the hashed gradient indices of the three simplex corners
                    var ii = i & 255;
                    var jj = j & 255;
                    // Calculate the contribution from the three corners
                    var t0 = 0.5 - x0 * x0 - y0 * y0;
                    if (t0 >= 0) {
                        var gi0 = permMod12[ii + perm[jj]] * 3;
                        t0 *= t0;
                        n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
                    }
                    var t1 = 0.5 - x1 * x1 - y1 * y1;
                    if (t1 >= 0) {
                        var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
                        t1 *= t1;
                        n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
                    }
                    var t2 = 0.5 - x2 * x2 - y2 * y2;
                    if (t2 >= 0) {
                        var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
                        t2 *= t2;
                        n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
                    }
                    // Add contributions from each corner to get the final noise value.
                    // The result is scaled to return values in the interval [-1,1].
                    return 70.0 * (n0 + n1 + n2);
                },
                // 3D simplex noise
                noise3D: function (xin, yin, zin) {
                    var permMod12 = this.permMod12;
                    var perm = this.perm;
                    var grad3 = this.grad3;
                    var n0,
                    n1,
                    n2,
                    n3; // Noise contributions from the four corners
                    // Skew the input space to determine which simplex cell we're in
                    var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
                    var i = Math.floor(xin + s);
                    var j = Math.floor(yin + s);
                    var k = Math.floor(zin + s);
                    var t = (i + j + k) * G3;
                    var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
                    var Y0 = j - t;
                    var Z0 = k - t;
                    var x0 = xin - X0; // The x,y,z distances from the cell origin
                    var y0 = yin - Y0;
                    var z0 = zin - Z0;
                    // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
                    // Determine which simplex we are in.
                    var i1,
                    j1,
                    k1; // Offsets for second corner of simplex in (i,j,k) coords
                    var i2,
                    j2,
                    k2; // Offsets for third corner of simplex in (i,j,k) coords
                    if (x0 >= y0) {
                        if (y0 >= z0) {
                            i1 = 1;
                            j1 = 0;
                            k1 = 0;
                            i2 = 1;
                            j2 = 1;
                            k2 = 0;
                        } // X Y Z order
                        else if (x0 >= z0) {
                            i1 = 1;
                            j1 = 0;
                            k1 = 0;
                            i2 = 1;
                            j2 = 0;
                            k2 = 1;
                        } // X Z Y order
                        else {
                            i1 = 0;
                            j1 = 0;
                            k1 = 1;
                            i2 = 1;
                            j2 = 0;
                            k2 = 1;
                        } // Z X Y order
                    } else
                    {
                        // x0<y0
                        if (y0 < z0) {
                            i1 = 0;
                            j1 = 0;
                            k1 = 1;
                            i2 = 0;
                            j2 = 1;
                            k2 = 1;
                        } // Z Y X order
                        else if (x0 < z0) {
                            i1 = 0;
                            j1 = 1;
                            k1 = 0;
                            i2 = 0;
                            j2 = 1;
                            k2 = 1;
                        } // Y Z X order
                        else {
                            i1 = 0;
                            j1 = 1;
                            k1 = 0;
                            i2 = 1;
                            j2 = 1;
                            k2 = 0;
                        } // Y X Z order
                    }
                    // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
                    // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
                    // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
                    // c = 1/6.
                    var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
                    var y1 = y0 - j1 + G3;
                    var z1 = z0 - k1 + G3;
                    var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
                    var y2 = y0 - j2 + 2.0 * G3;
                    var z2 = z0 - k2 + 2.0 * G3;
    .........完整代码请登录后点击上方下载按钮下载查看