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