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);
            gridVal = abs(gridVal - gridEdgeY);

            // Do the color thing
            vec3 col = vec3(gridVal);
            gl_FragColor = vec4(col, 1.);
        }
    </script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4(position, 1.0);
        }
    </script>
    <div id="webgl-container"></div>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>

    <script>
        let canvas;
        let camera, scene, renderer;
        let uniforms;
        let startTime;

        init();
        animate();

        function init() {
            console.log('init');
            container = document.getElementById("webgl-container.........完整代码请登录后点击上方下载按钮下载查看