three打造水渍滑动效果-html代码-BFW代码库

three打造水渍滑动效果

代码语言：html

所属分类：动画

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

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

    <title>  Soothe</title>
    <style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap');

        * {
            margin: 0;
            border: 0;
            box-sizing:
            border-box;
        }

        body {

            margin: 0;
            position: fixed;
            overflow: hidden;
            background-color: #090d13;
            user-select: none;

        }

        canvas {

            width: 100%;
            height: 100%;

        }
    </style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>

    <script>
        //
        // shaders
        //
        const basic_vert = `
        precision highp float;

        void main() {
        gl_Position = vec4( position, vec2(1.0) );
        }
        `;

        const prep_frag = `
        precision highp float;

        void main() {
        gl_FragColor.z = 0.012;
        }
        `;

        const physics_frag = `
        precision highp float;

        uniform vec3 mouse;
        uniform vec3 pmouse;
        uniform vec2 resolution;
        uniform sampler2D texture;

        float distToSegment( vec2 x1, vec2 x2, vec2 p ) {

        vec2 v = x2 - x1;
        vec2 w = p - x1;

        float c1 = dot(w,v);
        float c2 = dot(v,v);

        // if c2 <= c1 == c1
        // if c2 >  c1 == c2
        float div = mix( c2, c1, step( c2, c1 ) );

        // if c1 < 0 == 0.0
        float mult = step( 0.0, c1 );

        float b = c1 * mult / div;
        vec2 pb = x1 + b*v;

        return distance( p, pb );

        }

        vec3 computeNormal( vec4 n ) {

        // pixel scale
        vec2 un = 1. / resolution;
        .........完整代码请登录后点击上方下载按钮下载查看