用three打造黑暗空间穿梭动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blackness, darkness, forever</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: fixed;
touch-action: none;
}
</style>
</head>
<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ccapture.js"></script>
<script src="//repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
// Hash function. This particular one probably doesn't disperse things quite
// as nicely as some of the others around, but it's compact, and seems to work.
//
vec3 hash33(vec3 p){
float n = sin(dot(p, vec3(7, 157, 113)));
return fract(vec3(2097152, 262144, 32768)*n);
}
float pn( in vec3 p ){
vec3 i = floor(p); p -= i; p *= p*(3. - 2.*p);
p.xy = texture2D(u_noise, (p.xy + i.xy + vec2(37, 17)*i.z + .5)/256., -100.).yx;
return mix(p.x, p.y, p.z);
}
float trigNoise3D(in vec3 p){
float res = 0., sum = 0.;
float n = pn(p*8. + u_time*2.);
vec3 t = sin(p.yzx*3.14159265 + cos(p.zxy*3.14159265+1.57/2.))*0.5 + 0.5;
p = p*1.5 + (t - 1.5); // + u_time*0.1
res += (dot(t, vec3(0.333)));
t = sin(p.yzx*3.14159265 + cos(p.zxy*3.14159265+1.57/2.))*0.5 + 0.5;
res += (dot(t, vec3(0.333)))*0.7071;
return ((res/1.7071))*0.85 + n*0.15;
}
// Distance function.
float map(vec3 p) {
float n = trigNoise3D(p*0.2);
float t = sin(u_time*.0001)*.5+.5;
float c = cos(p.z*.05*t+n);
float s = sin(p.z*.05+n*.5);
p.xy *= mat2(c, -s, s, c);
p -= n*1.5;
p.y = mod(p.y, 4.0) - 2.;
return abs(p.y) - .1;
return trigNoise3D(p*0.5);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec3 rd = normalize(vec3(fragCoord - u_resolution.xy*.5, u_resolution.y*.75));
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0