blotter.js是在浏览器中显示新奇的字体特效插件-BFW插件库

blotter.js是在浏览器中显示新奇的字体特效插件

依赖Three.js 与 Underscore.js

第一步引入bfwone，加载blotter.js

第二步use材质

第三步执行代码

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=blotter.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(['materials/liquidDistortMaterial'], function() {
                // BLOTTER - Example 2
                var text = new Blotter.Text("observation", {
                    family: "'EB Garamond', serif",
                    size: 27,
                    fill: "#171717",
                    paddingLeft: 40,
                    paddingRight: 40
                });

                var material = new Blotter.LiquidDistortMaterial();

                // Play with the value for uSpeed. Lower values slow
                // down animation, while higher values speed it up. At
                // a speed of 0.0, animation is stopped entirely.
                material.uniforms.uSpeed.value = 0.25;

                // Try uncommenting the following line to play with
                // the "volatility" of the effect. Higher values here will
                // produce more dramatic changes in the appearance of your
                // text as it animates, but you will likely want to keep
                // the value below 1.0.
                //material.uniforms.uVolatility.value = 0.30;

                var blotter = new Blotter(material, {
                    texts: text
                });

                var elem = document.getElementById("distortion-text");
                var scope = blotter.forText(text);

                scope.appendTo(elem);
            });
        });
    </script>
</head>
<body>
    <div id="distortion-text" style="margin:50px;"></div>
</body>
</html>

官网：https://blotter.js.org/

https://github.com/bradley/Blotter