three打造三维粒子流动动画效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> æther III</title>

    <style>
        html, body {
            background: black;
            overflow: hidden;
        }
    </style>

</head>
<body translate="no">
    <canvas id="canvas"></canvas>
    <script type="x-shader/x-vertex" id="vert-shader">
        attribute vec3 color;
        attribute vec2 age;

        varying vec3 v_color;
        varying vec2 v_age;

        void main() {
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.);

            v_color = color;
            v_age = age;

            gl_PointSize = 80. * (80. / -mvPosition.z);
            gl_Position = projectionMatrix * mvPosition;
        }

    </script>
    <script type="x-shader/x-fragment" id="frag-shader">
        uniform sampler2D u_texture;

        varying vec3 v_color;
        varying vec2 v_age;

        float fadeInOut(float t, float m) {
            float h = .5 * m;

            return abs(mod((t + h), m) - h) / h;
        }

        void main() {
            float alpha = fadeInOut(v_age.s, v_age.t);

            gl_FragColor = vec4(v_color, alpha) * texture2D(u_texture, gl_PointCoord);
        }
    </script>

   <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
  <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script>
        "use strict";

        const {
            abs,
            acos,
            asin,
            atan,
            atan2,
            ceil,
            cos,
            floor,
            max,
            min,
            PI,
            pow,
            random,
            round,
            sin,
            sqrt,
            tan
        } =
        Math;
        const HALF_PI = 0.5 * PI;
        const QUART_PI = 0.25 * PI;
        const TAU = 2 * PI;
        const TO_RAD = PI / 180;
        const G = 6.67 * pow(10, -11);
        const EPSILON = 2.220446049250313e-16;
        const rand = n => n * random();
        const randIn = (_min, _max) => rand(_max - _min) + _min;
        const randRange = n => n - rand(2 * n);
        const fadeIn = (t, m) => t / m;
        const fadeOut = (t, m) => (m - t) / m;
        const fadeInOut = (t, m) => {
            let hm = 0.5 * m;
            return abs((t + hm) % m - hm) / hm;
        };
        const dist = (x1, y1, x2, y2) => sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
        const angle = (x1, y1, x2, y2) => atan2(y2 - y1, x2 - x1);
        const lerp = (a, b, t) => (1 - t) * a + t * b;
        const clamp = (n, _min, _max) => min(max(n, _min), _max);
        const norm = (n, _min, _max) => (n - _min) / (_max - _min);
        const fract = n => n - (n | 0);
        const vh = p => p * window.innerHeight * 0.01;
        const vw = p => p * window.innerWidth * 0.01;
        const vmin = p => min(vh(p), vw(p));
        const vmax = p => max(vh(p), vw(p));
        const intToRGBA = n => {
            let r,
            g,
            b,
            a;

            n >>>= 0;

            r = (n & 0xff000000) >>> 24;
            g = (n & 0xff0000) >>> 16;
            b = (n & 0xff00) >>> 8;
            a = (n & 0xff) / 255;

            return `rgba(${[r,
                g,
                b,
                a].join()})`;
        };
        const drawTypes = {
            FILL: 'fill',
            STROKE: 'stroke'
        };

        const textAlignTypes = {
            CENTER: 'center',
            END: 'end',
            LEFT: 'left',
            RIGHT: 'right',
            START: 'start'
        };

        const textBaselineTypes = {
            ALPHABETIC: 'alphabetic',
            BOTTOM: 'bottom',
            HANGING: 'hanging',
            MIDDLE: 'middle',
            TOP: 'top'
        };


        Array.prototype.lerp = function (t = [], a = 0) {
            this.forEach((n, i) => this[i] = lerp(n, t[i], a));
        };

        Float32Array.prototype.get = function (i = 0, n = 0) {
            const t = i + n;

            let r = [];

            for (; i < t; i++) {
                r.push(this[i]);
            }

            return r;
        };

        class PropsArray {
            constructor(count = 0, props = [], type = 'float') {
                this.count = count;
                this.props = props;
                this.spread = props.length; // TODO: Need to implement indexing based on spread
                this.values = type === 'float' ?
                new Float32Array(count * props.length):
                new Uint32Array(count * props.length);
            }
            get length() {
                return this.values.length;
            }
            set(a = [], i = 0) {
                this.values.set(a, i);
            }
            setMap(o = {}, i = 0) {
                this.set(Object.values(o), i);
            }
            get(i = 0) {
                return this.values.get(i, this.spread);
            }
            getMap(i = 0) {
                return this.get(i).reduce(
                    (r, v, i) => ({
                        ...r,
                        ... {
                            [this.props[i]]: v
                        }
                    }),

                    {});

            }
            forEach(cb) {
                let i = 0;

                for (; i < this.length; i += this.spread) {
                    cb(this.get(i), i, this);
                }
            }
            map(cb) {
                let i = 0;

                for (; i < this.length; i += this.spread) {
                    this.set(cb(this.get(i), i, this), i);
                }
            }
            async *read() {
                let i = 0;

                for (; i < this.length; i += this.spread) {
                    yield {
                        index: i,
                        value: this.get(i)
                    };
                }
            }}


        function createOffscreenCanvas(width, height) {
            let _canvas;

            if (typeof OffscreenCanvas !== undefined) {
                _canvas = new OffscreenCanvas(parseFloat(width), parseFloat(height));
            } else {
                _canvas = createCanvas(width, height);
            }

            return _canvas;
        }

        function createCanvas(width, height) {
            const canvas = document.createElement('canvas');

            canvas.width = width;
            canvas.height = height;

            return canvas;
        }

        function createContext2D(width = innerWidth, height = innerHeight, contextAttributes) {
            return createCanvas(width, height).getContext('2d', contextAttributes);
        }

        function createOffscreenContext2D(width = innerWidth, height = innerHeight, contextAttributes) {
            return createOffscreenCanvas(width, height).getContext('2d', contextAttributes);
        }

        function createRenderingContext(width, height) {
            const contextAttributes = {
   .........完整代码请登录后点击上方下载按钮下载查看