threejs打造未旋转网格扭曲效果-html代码-BFW代码库

threejs打造未旋转网格扭曲效果

代码语言：html

所属分类：动画

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

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

    <title> 未旋转网格扭曲/title>
  
    <style>
        canvas {
            display: block;
        }
    </style>

</head>
<body translate="no">
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec2 iResolution;
        uniform float iGlobalTime;
        uniform vec2 iMousePos;

        void main(void) {

            // Normalize your coordinates from 0 to 1
            vec2 uv = gl_FragCoord.xy / iResolution.xy;

            // If you prefer to map from -0.5 to 0.5, use this instead
            // vec2 uv = gl_FragCoord.xy/iResolution.xy - .5;
            vec2 mousePos = iMousePos / iResolution.xy;

            // If you want to avoid stretching your image, use this
            uv.x *= iResolution.x / iResolution.y;
            mousePos.x *= iResolution.x / iResolution.y;

            // Warp space
            float amount = 0.05;
            float freq = 10.;
            uv.x = uv.x + sin(uv.y * freq + iGlobalTime) * amount;
            uv.y = uv.y + cos(uv.x * freq + iGlobalTime) * amount;

            // Create a grid
            vec2 uv2 = vec2(fract(uv * 5.));
            float blur = 0.005;
            float gridEdgeY = smoothstep(1. - blur, 1., uv2.y);
            float gridEdgeX = smoothstep(1. - blur, 1., uv2.x);
            float gridX = smoothstep(0.5 - blur, 0.5 + blur, uv2.x);
            float gridY = smoothstep(0.5 - blur, 0.5 + blur, uv2.y);
            float gridVal = abs(gridY - gridX);
            gridVal = abs(gridEdgeX - gridVal);
         .........完整代码请登录后点击上方下载按钮下载查看