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

代码语言:html

所属分类:三维

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

代码标签: 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