three+gsap实现一个真实三维眼球眼珠跟随鼠标转动的效果代码-html代码-BFW代码库

three+gsap实现一个真实三维眼球眼珠跟随鼠标转动的效果代码

代码语言：html

所属分类：三维

代码描述：three+gsap实现一个真实三维眼球眼珠跟随鼠标转动的效果代码，可以改变眼睛瞳孔的颜色和亮度及大小。

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
    overflow: hidden;
    padding: 0;
    margin: 0;
}
canvas {
    display: block;
}
#zoom-range {
    position: absolute;
    width: 200px;
    bottom: 0;
    right: 10px;
    padding: 30px 0;
}
.cr.color .selector {
    width: 50px !important;
}
.cr.color .saturation-field,
.cr.color .field-knob {
    display: none !important;
}
.cr.color .hue-field {
    width: calc(100% - 8px) !important;
}
.cr.color .hue-knob {
    margin-left: 26px !important;
    height: 5px !important;
    border-right: 10px solid #000 !important;
}
</style>


</head>

<body >
  <div class="container">
    <input type="range" min="0" max="0" value="0" step="1" id="zoom-range" />
</div>


<script type="x-shader/x-fragment" id="fragmentShader">
    precision highp float;

    varying vec2 vUv;
    uniform float shrink;
    uniform vec3 base_color_1;
    uniform vec3 base_color_2;
    uniform vec3 mid_color;
    uniform float vignette;
    uniform float brightness;
    uniform float darkness;

    float random (in vec2 st) {
        return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
    }

    // Based on Morgan McGuire @morgan3d
    // https://www.shadertoy.com/view/4dS3Wd
    float noise (in vec2 st) {
        vec2 i = floor(st);
        vec2 f = fract(st);
        float a = random(i);
        float b = random(i + vec2(1.0, 0.0));
        float c = random(i + vec2(0.0, 1.0));
        float d = random(i + vec2(1.0, 1.0));
        vec2 u = f * f * (3.0 - 2.0 * f);
        return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
    }

    float fbm (in vec2 st) {
        float value = 0.0;
        float amplitude = .5;
        float frequency = 0.;
        for (int i = 0; i < 4; i++) {
            value += amplitude * noise(st);
            st *= 2.;
            amplitude *= .5;
        }
        return value;
    }

    float length2( vec2 p ) {
        vec2 q = p*p*p*p;
        return pow( q.x + q.y, 1.0/4.0 );
    }

    void main() {

        vec2 st = vec2(.5) - vUv;
        st *= 1.3;
        st.x *= 6.28318531; // 2Pi
        st.y *= 3.14159265359; // Pi

        float r = length(st);
        float a = atan(st.y, st.x);

        float pulsing = 1. + clamp(1. - r, 0., 1.) * shrink;

        // noisy fullscreen mix of 2 colors
        float f = fbm(5. * st);
        vec3 col = mix(base_color_1, base_color_2, f);

        // blury spot in the middle
        col = mix(col, mid_color, 1. - smoothstep(0.2, 0.6, r * (.2 + .8 * pulsing)));

      .........完整代码请登录后点击上方下载按钮下载查看