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

代码语言：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.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy) );
    vec2 x0 = v -   i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }



  void main() {
    vec2 st = vUv;

    vec2 mouse = st - u_mouse.xy;
    mouse.x *= u_ratio;
    vec2 mouse_target = st - u_target_mouse.xy;
    mouse_target.x *= u_ratio;

    // Texture we create and update in JS => bas shape
    float touch = texture2D(u_touch_texture, st).r;

    // Add noise to the base shape
    vec2 noise_pos = vec2(st * 6.);
    float noise = snoise(noise_pos + vec2(0., u_time)) * .25 + .25;
    noise += snoise(noise_pos) * .25 + .3;
    touch *= noise;

    // Add face
    touch -= 1.2 * face(mouse - .1 * (mouse - mouse_target));

    // Apply color scheme
    vec3 color = mix(vec3(.184, .282, .345), vec3(.945, .945, .902), smoothstep(.01, .38, touch));

    gl_FragColor = vec4(color, 1.);
  }

</script>


<script type="x-shader/x-vertex" id="vertexShader">

  varying vec2 vUv;

  void main() {
    vUv = uv;
    gl_Position = vec4(position, 1.);
  }

</script><script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>

      <script >

let config = {
  dotsNumber: 11,
  dotsBaseRadius: window.innerHeight * .1,
  tailSpring: .35,
  tailGravity: window.innerHeight * .005,
  tailGravityBonds: [window.innerHeight * .005, window.innerHeight * .01],
  tailFriction: .5,
  faceExpression: 0,
  catchingSpeed: window.innerWidth * .0001 };




class Viz {

  constructor() {
    this.renderer = new THREE.WebGLRenderer({});
    this.container = document.getElementsByClassName('viz')[0];
    this.container.appendChild(this.renderer.domElement);
    this.camera = new THREE.OrthographicCamera(
    -.5 * window.innerWidth,
    .5 * window.innerWidth,
    .5 * window.innerHeight,
    -.5 * window.innerHeight,
    0.1,
    10);

    this.camera.position.set(0, 0, 1);

    this.clock = new THREE.Clock();

    this.scene = new THREE.Scene();

    this.touchPoint = new THREE.Vector2(.5, .65);
    this.targetTouchPoint = new THREE.Vector2(.5, .65);
    this.touchCanvasPoint = [this.touchPoint.x * window.innerWidth, (1 - this.touchPoint.y) * window.innerHeight];
    this.isMoving = false;

    this.touchCanvas = document.createElement('canvas');
    this.touchCanvasCtx = this.touchCanvas.getContext('2d');
    this.touchTexture = new THREE.CanvasTexture(this.touchCanvas);
    this.touchTrail = new Array(config.dotsNumber);
    for (let i = 0; i < config.dotsNumber; i++) {
      this.touchTrail[i] = {
        x: this.touchCanvasPoint[0],
        y: this.touchCanvasPoint[1],
        vx: 0,
        vy: 0,
        intensity: i ? .6 * (config.dotsNumber - i) / config.dotsNumber : .9,
        r: config.dotsBaseRadius * (1 + Math.pow(i / config.dotsNumber, .5)) };

    }

    this.material = new THREE.ShaderMaterial({
      uniforms: {
        u_t.........完整代码请登录后点击上方下载按钮下载查看