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

代码语言：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)));

        // white streaks
        a += .05 * fbm(20. * st) * fbm(20. * st);
        f = smoothstep((1. - brightness), 1., fbm(vec2(20. * a, 6. * r * pulsing)));
        col = mix(col, vec3(1.), f);

        // dark insertions
        a = fbm(vec2(15. * a, 10. * r * pulsing));
        f = smoothstep(.4, .9,  a);
        col *= 1. - darkness * f;

        // vignette
        col *= 1. - vignette * smoothstep(.6, .8, r * (.9 + .1 * pulsing));

        // pupil
        f = 1. - smoothstep(.2, .25, r * pulsing);
        col = mix(col, vec3(.0), f);

        // crop
        f = smoothstep(.79, 0.85, r);
        col = mix(col, vec3(1.), f);

        gl_FragColor = vec4(col, 1.);
    }

</script>

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;

    void main() {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * mvPosition;
    }
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
      <script >
// -------------------------------
// -------------------------------

// Interactive eyeball animation based on the famous shader created by Inigo Quilez.

// -------------------------------

let visualization, pointer, controls, animations;
const container = document.querySelector('.container');

let eyeConfig = {
  zoomLevel: 600,
  zoomLevelBounds: [300, 1000],
  shrink: 0,
  fstBaseColor: '#03565c',
  scdBaseColor: '#42cf44',
  midColor: '#f2aa00',
  vignette: 0.65,
  brightness: 0.6,
  darkness: 0.5 };



document.addEventListener('DOMContentLoaded', () => {
  controls = new Controls();
  pointer = new Pointer();
  visualization = new Visualization();
  animations = new Animations();

  pointer.updateCenter();
  visualization.updateSize();

  controls.addShaderControls();
  controls.addSceneControls();

  window.addEventListener('resize', () => visualization.updateSize());
  visualization.loop();

  container.querySelector('canvas').addEventListener("click", e => pointer.onClick(e));
  document.addEventListener("mousedown", e => pointer.onMouseDown(e));
  document.addEventListener("mouseup", e => pointer.onMouseUp(e));
  document.addEventListener("mousemove", e => pointer.onMouseMove(e));
  document.addEventListener("touchmove", e => pointer.onTouchMove(e));
  document.addEventListener.........完整代码请登录后点击上方下载按钮下载查看