Three.js WebGL 圆圈上的泊松分布曲线

Webgl fluid circle。鼠标悬停在圆圈上，触发边线变形动画。

webgl, 数学

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2766
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// tween.js v.0.15.0 https://github.com/sole/tween.js
void 0 === Date.now && (Date.now = function() {
    return (new Date).valueOf()
});
var TWEEN = TWEEN || function() {
    var n = [];
    return {
        REVISION: "14",
        getAll: function() {
            return n
        },
        removeAll: function() {
            n = []
        },
        add: function(t) {
            n.push(t)
        },
        remove: function(t) {
            var r = n.indexOf(t); - 1 !== r && n.splice(r, 1)
        },
        update: function(t) {
            if (0 === n.length) return !1;
            var r = 0;
            for (t = void 0 !== t ? t : "undefined" != typeof window && void 0 !== window.performance && void 0 !== window.performance.now ? window.performance.now() : Date.now(); r < n.length;) n[r].update(t) ? r++ : n.splice(r, 1);
            return !0
        }
    }
}();
TWEEN.Tween = function(n) {
    var t = n,
        r = {},
        i = {},
        u = {},
        o = 1e3,
        e = 0,
        a = !1,
        f = !1,
        c = !1,
        s = 0,
        h = null,
        l = TWEEN.Easing.Linear.None,
        p = TWEEN.Interpolation.Linear,
        E = [],
        d = null,
        v = !1,
        I = null,
        w = null,
        M = null;
    for (var O in n) r[O] = parseFloat(n[O], 10);
    this.to = function(n, t) {
        return void 0 !== t && (o = t), i = n, this
    }, this.start = function(n) {
        TWEEN.add(this), f = !0, v = !1, h = void 0 !== n ? n : "undefined" != typeof window && void 0 !== window.performance && void 0 !== window.performance.now ? window.performance.now() : Date.now(), h += s;
        for (var o in i) {
            if (i[o] instanceof Array) {
                if (0 === i[o].length) continue;
                i[o] = [t[o]].concat(i[o])
            }
            r[o] = t[o], r[o] instanceof Array == !1 && (r[o] *= 1), u[o] = r[o] || 0
        }
        return this
    }, this.stop = function() {
        return f ? (TWEEN.remove(this), f = !1, null !== M && M.call(t), this.stopChainedTweens(), this) : this
    }, this.stopChainedTweens = function() {
        for (var n = 0, t = E.length; t > n; n++) E[n].stop()
    }, this.delay = function(n) {
        return s = n, this
    }, this.repeat = function(n) {
        return e = n, this
    }, this.yoyo = function(n) {
        return a = n, this
    }, this.easing = function(n) {
        return l = n, this
    }, this.interpolation = function(n) {
        return p = n, this
    }, this.chain = function() {
        return E = arguments, this
    }, this.onStart = function(n) {
        return d = n, this
    }, this.onUpdate = function(n) {
        return I = n, this
    }, this.onComplete = function(n) {
        return w = n, this
    }, this.onStop = function(n) {
        return M = n, this
    }, this.update = function(n) {
        var f;
        if (h > n) return !0;
        v === !1 && (null !== d && d.call(t), v = !0);
        var M = (n - h) / o;
        M = M > 1 ? 1 : M;
        var O = l(M);
        for (f in i) {
            var m = r[f] || 0,
                N = i[f];
            N instanceof Array ? t[f] = p(N, O) : ("string" == typeof N && (N = m + parseFloat(N, 10)), "number" == typeof N && (t[f] = m + (N - m) * O))
        }
        if (null !== I && I.call(t, O), 1 == M) {
            if (e > 0) {
                isFinite(e) && e--;
                for (f in u) {
                    if ("string" == typeof i[f] && (u[f] = u[f] + parseFloat(i[f], 10)), a) {
                        var T = u[f];
                        u[f] = i[f], i[f] = T
                    }
                    r[f] = u[f]
                }
                return a && (c = !c), h = n + s, !0
            }
            null !== w && w.call(t);
            for (var g = 0, W = E.length; W > g; g++) E[g].start(n);
            return !1
        }
        return !0
    }
}, TWEEN.Easing = {
    Linear: {
        None: function(n) {
            return n
        }
    },
    Quadratic: {
        In: function(n) {
            return n * n
        },
        Out: function(n) {
            return n * (2 - n)
        },
        InOut: function(n) {
            return (n *= 2) < 1 ? .5 * n * n : -.5 * (--n * (n - 2) - 1)
        }
    },
    Cubic: {
        In: function(n) {
            return n * n * n
        },
        Out: function(n) {
            return --n * n * n + 1
        },
        InOut: function(n) {
            return (n *= 2) < 1 ? .5 * n * n * n : .5 * ((n -= 2) * n * n + 2)
        }
    },
    Quartic: {
        In: function(n) {
            return n * n * n * n
        },
        Out: function(n) {
            return 1 - --n * n * n * n
        },
        InOut: function(n) {
            return (n *= 2) < 1 ? .5 * n * n * n * n : -.5 * ((n -= 2) * n * n * n - 2)
        }
    },
    Quintic: {
        In: function(n) {
            return n * n * n * n * n
        },
        Out: function(n) {
            return --n * n * n * n * n + 1
        },
        InOut: function(n) {
            return (n *= 2) < 1 ? .5 * n * n * n * n * n : .5 * ((n -= 2) * n * n * n * n + 2)
        }
    },
    Sinusoidal: {
        In: function(n) {
            return 1 - Math.cos(n * Math.PI / 2)
        },
        Out: function(n) {
            return Math.sin(n * Math.PI / 2)
        },
        InOut: function(n) {
            return .5 * (1 - Math.cos(Math.PI * n))
        }
    },
    Exponential: {
        In: function(n) {
            return 0 === n ? 0 : Math.pow(1024, n - 1)
        },
        Out: function(n) {
            return 1 === n ? 1 : 1 - Math.pow(2, -10 * n)
        },
        InOut: function(n) {
            return 0 === n ? 0 : 1 === n ? 1 : (n *= 2) < 1 ? .5 * Math.pow(1024, n - 1) : .5 * (-Math.pow(2, -10 * (n - 1)) + 2)
        }
    },
    Circular: {
        In: function(n) {
            return 1 - Math.sqrt(1 - n * n)
        },
        Out: function(n) {
            return Math.sqrt(1 - --n * n)
        },
        InOut: function(n) {
            return (n *= 2) < 1 ? -.5 * (Math.sqrt(1 - n * n) - 1) : .5 * (Math.sqrt(1 - (n -= 2) * n) + 1)
        }
    },
    Elastic: {
        In: function(n) {
            var t, r = .1,
                i = .4;
            return 0 === n ? 0 : 1 === n ? 1 : (!r || 1 > r ? (r = 1, t = i / 4) : t = i * Math.asin(1 / r) / (2 * Math.PI), -(r * Math.pow(2, 10 * (n -= 1)) * Math.sin(2 * (n - t) * Math.PI / i)))
        },
        Out: function(n) {
            var t, r = .1,
                i = .4;
            return 0 === n ? 0 : 1 === n ? 1 : (!r || 1 > r ? (r = 1, t = i / 4) : t = i * Math.asin(1 / r) / (2 * Math.PI), r * Math.pow(2, -10 * n) * Math.sin(2 * (n - t) * Math.PI / i) + 1)
        },
        InOut: function(n) {
            var t, r = .1,
                i = .4;
            return 0 === n ? 0 : 1 === n ? 1 : (!r || 1 > r ? (r = 1, t = i / 4) : t = i * Math.asin(1 / r) / (2 * Math.PI), (n *= 2) < 1 ? -.5 * r * Math.pow(2, 10 * (n -= 1)) * Math.sin(2 * (n - t) * Math.PI / i) : r * Math.pow(2, -10 * (n -= 1)) * Math.sin(2 * (n - t) * Math.PI / i) * .5 + 1)
        }
    },
    Back: {
        In: function(n) {
            var t = 1.70158;
            return n * n * ((t + 1) * n - t)
        },
        Out: function(n) {
            var t = 1.70158;
            return --n * n * ((t + 1) * n + t) + 1
        },
        InOut: function(n) {
            var t = 2.5949095;
            return (n *= 2) < 1 ? .5 * n * n * ((t + 1) * n - t) : .5 * ((n -= 2) * n * ((t + 1) * n + t) + 2)
        }
    },
    Bounce: {
        In: function(n) {
            return 1 - TWEEN.Easing.Bounce.Out(1 - n)
        },
        Out: function(n) {
            return 1 / 2.75 > n ? 7.5625 * n * n : 2 / 2.75 > n ? 7.5625 * (n -= 1.5 / 2.75) * n + .75 : 2.5 / 2.75 > n ? 7.5625 * (n -= 2.25 / 2.75) * n + .9375 : 7.5625 * (n -= 2.625 / 2.75) * n + .984375
        },
        InOut: function(n) {
            return .5 > n ? .5 * TWEEN.Easing.Bounce.In(2 * n) : .5 * TWEEN.Easing.Bounce.Out(2 * n - 1) + .5
        }
    }
}, TWEEN.Interpolation = {
    Linear: function(n, t) {
        var r = n.length - 1,
            i = r * t,
            u = Math.floor(i),
            o = TWEEN.Interpolation.Utils.Linear;
        return 0 > t ? o(n[0], n[1], i) : t > 1 ? o(n[r], n[r - 1], r - i) : o(n[u], n[u + 1 > r ? r : u + 1], i - u)
    },
    Bezier: function(n, t) {
        var r, i = 0,
            u = n.length - 1,
            o = Math.pow,
            e = TWEEN.Interpolation.Utils.Bernstein;
        for (r = 0; u >= r; r++) i += o(1 - t, u - r) * o(t, r) * n[r] * e(u, r);
        return i
    },
    CatmullRom: function(n, t) {
        var r = n.length - 1,
            i = r * t,
            u = Math.floor(i),
            o = TWEEN.Interpolation.Utils.CatmullRom;
        return n[0] === n[r] ? (0 > t && (u = Math.floor(i = r * (1 + t))), o(n[(u - 1 + r) % r], n[u], n[(u + 1) % r], n[(u + 2) % r], i - u)) : 0 > t ? n[0] - (o(n[0], n[0], n[1], n[1], -i) - n[0]) : t > 1 ? n[r] - (o(n[r], n[r], n[r - 1], n[r - 1], i - r) - n[r]) : o(n[u ? u - 1 : 0], n[u], n[u + 1 > r ? r : u + 1], n[u + 2 > r ? r : u + 2], i - u)
    },
    Utils: {
        Linear: function(n, t, r) {
            return (t - n) * r + n
        },
        Bernstein: function(n, t) {
            var r = TWEEN.Interpolation.Utils.Factorial;
            return r(n) / r(t) / r(n - t)
        },
        Factorial: function() {
            var n = [1];
            return function(t) {
                var r, i = 1;
                if (n[t]) return n[t];
                for (r = t; r > 1; r--) i *= r;
                return n[t] = i
            }
        }(),
        CatmullRom: function(n, t, r, i, u) {
            var o = .5 * (r - n),
                e = .5 * (i - t),
                a = u * u,
                f = u * a;
            return (2 * t - 2 * r + o + e) * f + (-3 * t + 3 * r - 2 * o - e) * a + o * u + t
        }
    }
}, "undefined" != typeof module && module.exports && (module.exports = TWEEN);

/**
 * Three.js Circle
 * by Thibault PIERRE - @T1l3 - http://thibaultpierre.com
 * Inspired by http://www.pshkvsky.com/gif2code/sine-animation-tutorial-three-js/
 **/
$(function() {
    // Config
    var config = {
        wavesAmount: 12,
        wavesHeight: 1,
        circlesAmount: 2,
        circlesSpacing: 2,
        lineWidth: 1,
        opacityCoeff: 0.5,
        color: '#fc1b6a',
        dev: true,
        radius: 4,
        colorCoeff: 1,
        tweenDelay: 1500,
    };
    var gui = new dat.GUI();
    gui.add(config, 'wavesAmount', 1, 100).step(1);
    gui.add(config, 'wavesHeight', 0, 5).step(0.1);
    gui.add(config, 'circlesAmount', 0, 360).step(1).onFinishChange(function() {
        removeCircles();
        cloneCircle();
    });
    gui.add(config, 'circlesSpacing', 1, 50).step(1).onFinishChange(function() {
        removeCircles();
        cloneCircle();
    });
    gui.add(config, 'opacityCoeff', 0, 1).step(0.1).onFinishChange(function(val) {
        setCirclesMaterial('opacity', val);
    });
    gui.addColor(config, 'color').onChange(function(val) {
        var color = val.replace('#', '0x');
        circle.material.color.setHex(color);
        setCirclesMaterial('color', val);
    });
    gui.add(config, 'colorCoeff', -5, 10).step(0.2).onChange(function() {
        var color = config.color.replace('#', '0x');
        circle.material.color.setHex(color);
        setCirclesMaterial('color', config.color);
    });
    gui.add(config, 'radius', 1, 10).step(1).onFinishChange(function() {
        scene.remove(circle);
        removeCircles();
        buildCircle();
        cloneCircle();
    });
    gui.add(config, 'lineWidth', 1, 5).step(1).onFinishChange(function(val) {
        circle.material.linewidth = val;
        setCirclesMaterial('linewidth', val);
    });
    gui.add(config, 'tweenDelay', 300, 10000).step(100);
    gui.add(config, 'dev').onFinishChange(function(isDev) {
        if (isDev) {
            $('#stats').show();
        } else {
            $('#stats').hide();
        }
    });

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

// align top-left
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);

var _w = window.innerWidth;
    var _h = window.innerHeight;

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(65, _w / _h, 0.1, 1000);
    camera.position.z = 10;
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(new THREE.Color(0x221f26, 1.0));
    renderer.setSize(_w, _h);
    $('#container').append(renderer.domElement);

var mouseX = _w / 2,
        mouseY = _h / 2;
    var mouseAngle = toRad(90);

var circleResolution = 360;
    var circle = new THREE.Line(new THREE.Geometry(), new THREE.LineBasicMaterial({
        color: config.color,
        linewidth: config.lineWidth,
        transparent: true,
    }));
    var new_positions = [];
    var circles = [];

var waveAngle = toRad(40);
    var smoothingCoeff = 0.5;
    var tweenEasing = TWEEN.Easing.Circular.Out;

function buildCircle() {
        for (var i = 0; i <= circleResolution; i++) {
            var angle = toRad(i);
            var x = (config.radius) * Math.cos(angle);
            var y = (config.radius) * Math.sin(angle);
            var z = 0;
            circle.geometry.vertices.push(new THREE.Vector3(x, y, z));
        }
        scene.add(circle);
    }

function updatePoints() {
        new_positions = [];
        for (var i = 0; i <= circleResolution; i++) {
            var angle = toRad(i);
            var radiusAddon = 0;
            var smooth_pct = 1;

// Fix the end of circle
            if ( // < 0
                ((mouseAngle - waveAngle) < 0) && (angle > (mouseAngle - waveAngle) + 2 * Math.PI)
            ) {
                angle = angle - Math.PI * 2;
            } else if ( // > 360
                ((mouseAngle + waveAngle) > 2 * Math.PI) && (angle < (mouseAngle + waveAngle) - 2 * Math.PI)
            ) {
                angle = angle + Math.PI * 2;
            }
            // Waves
            if (
                (angle >= (mouseAngle - waveAngle) && angle <= (mouseAngle + waveAngle))
            ) {

// Smooth edges
                if (angle >= (mouseAngle - waveAngle) && angle <= ((mouseAngle - waveAngle + waveAngle * smoothingCoeff))) {
                    smooth_pct = 1 - (
                        (angle - (mouseAngle - waveAngle * smoothingCoeff)) /
                        ((mouseAngle - waveAngle) - (mouseAngle - waveAngle * smoothingCoeff))
                    );
                } else if ((angle >= ((mouseAngle + waveAngle - (waveAngle * smoothingCoeff)))) && (angle <= (mouseAngle + waveAngle))) {
                    smooth_pct = 1 - (
                        (angle - (mouseAngle + waveAngle - (waveAngle * smoothingCoeff))) /
                        ((mouseAngle + waveAngle) - (mouseAngle + waveAngle - (waveAngle * smoothingCoeff)))
                    );
                }

radiusAddon =
                    (smooth_pct * Math.sin((angle - mouseAngle) * config.wavesAmount)) * config.wavesHeight /
                    ((angle - mouseAngle) * config.wavesAmount);
            }

var x = (config.radius + radiusAddon) * Math.cos(angle);
            var y = (config.radius + radiusAddon) * Math.sin(angle);

new_positions.push(new THREE.Vector3(x, y, 0));

}
        circle.geometry.verticesNeedUpdate = true; // do not forget to mark this flag each time you want to update geometry
    }

function startTweens() {
        // Prevent tween delay at the end of the circle
        var startingLoop = Math.round(toDeg(mouseAngle)) - 40;
        if (startingLoop < 0) {
            startingLoop = startingLoop + circleResolution;
        } else if (startingLoop > circleResolution) {
            startingLoop = startingLoop - circleResolution;
        }

// Loop twice so we dont get delay from 0 to 360;
        for (var i = 0; i <= circleResolution; i++) {
            var ii = (i + startingLoop) % (circleResolution + 1);
            if (circle.geometry.vertices[ii].x != new_positions[ii].x && circle.geometry.vertices[ii].y != new_positions[ii].y) {
                new TWEEN.Tween(circle.geometry.vertices[ii]).to({
                        x: new_positions[ii].x,
                        y: new_positions[ii].y,
                        z: new_positions[ii].z
                    }, config.tweenDelay)
                    .easing(tweenEasing).start();
            }
        }
    }

function removeCircles() {
        circles.forEach(function(circle) {
            scene.remove(circle);
        });
        circles = [];
    }

function loop() {
        stats.begin();

updatePoints();
        TWEEN.update();

renderer.render(scene, camera);
        stats.end();
        requestAnimationFrame(loop);
    }

$(document).mousemove(function(event) {
        mouseX = event.pageX - _w / 2;
        mouseY = -(event.pageY - _h / 2);
        mouseAngle = Math.atan2(mouseY, mouseX);
        if (mouseAngle < 0) {
            mouseAngle = 2 * Math.PI - (-mouseAngle);
        }
        startTweens();
    });

// Helpers
    function toDeg(val) {
        return val * (180 / Math.PI);
    }

function toRad(val) {
        return val * (Math.PI / 180);
    }

// http://www.sitepoint.com/javascript-generate-lighter-darker-color/
    function ColorLuminance(hex, lum) {
        // validate hex string
        hex = String(hex).replace(/[^0-9a-f]/gi, '');
        if (hex.length < 6) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        lum = lum || 0;

// convert to decimal and change luminosity
        var rgb = '#',
            c, i;
        for (i = 0; i < 3; i++) {
            c = parseInt(hex.substr(i * 2, 2), 16);
            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
            rgb += ('00' + c).substr(c.length);
        }

return rgb;
    }

buildCircle();
    loop();
    cloneCircle();
});

编译

CSS

HTML

Webgl fluid circle。鼠标悬停在圆圈上，触发边线变形动画。

webgl, 数学

编辑器支持Emmet

快捷键

Webgl fluid circle。鼠标悬停在圆圈上，触发边线变形动画。

webgl, 数学

Three.js 自生长的贝塞尔曲线+WebGL着色

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：