three+webgl实现鼠标跟随小鬼鬼魂动画效果代码-html代码-BFW代码库

three+webgl实现鼠标跟随小鬼鬼魂动画效果代码

代码语言：html

所属分类：动画

代码描述：three+webgl实现鼠标跟随小鬼鬼魂动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    canvas {
      display: block;
    }
</style>



</head>

<body >
  <div class="viz"></div>

<script type="x-shader/x-fragment" id="fragmentShader">

  varying vec2 vUv;
  uniform float u_ratio;
  uniform float u_time;
  uniform vec2 u_mouse;
  uniform vec2 u_target_mouse;
  uniform float u_face_expression;
  uniform sampler2D u_touch_texture;

  // --------------------------------
  // Ghost face

  float eyes(vec2 _st) {
    _st.x = abs(_st.x);

    _st.y += pow(_st.x, 2. - .4 * u_face_expression);
    _st.x -= (.08 + .03 * u_face_expression);
    _st.y *= .8;

    _st *= 10.;

    float d = length(_st);
    d = pow(d, .4);

    return clamp(1. - d, 0., 1.);
  }

  float mouth(vec2 _st) {
    _st *= 13.;
    _st.y *= .8;

    _st.x /= (1. + 2. * u_face_expression);
    _st.y *= (1. + .7 * u_face_expression);
    _st.y -= pow(_st.x, 2.) * 2. * u_face_expression;

    float d = length(_st);
    d = pow(d, .7);

    return clamp(1. - d, 0., 1.);
  }

  float face(vec2 _st) {
    _st *= 3.5;

    float eyes_shape = eyes(_st - vec2(0., .1));
    float mouth_shape = mouth(_st - vec2(0., -.2));

    float col;
    col = mix(col, 1., eyes_shape);
    col = mix(col, 1., mouth_shape);

    return col;
  }


  // --------------------------------
  // 2D noise

  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
  vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
  vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
  float snoise(vec2 v) {
    const vec4 C = vec4(0.2113248654051.........完整代码请登录后点击上方下载按钮下载查看