three实现无数三维爱心跳动表白动画效果代码
代码语言:html
所属分类:表白
代码描述:three实现无数三维爱心跳动表白动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> body { margin: 0; padding: 0; } #container { left: 50%; position: fixed; transform: translate(-50%, -50%); top: 50%; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.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 float u_time; uniform vec2 u_mouse; const int octaves = 2; const float seed = 43758.5453123; const float seed2 = 73156.8473192; // Epsilon value const float eps = 0.005; const vec3 ambientLight = 0.99 * vec3(1.0, 1.0, 1.0); const vec3 light1Pos = vec3(10., 5.0, -25.0); const vec3 light1Intensity = vec3(0.35); const vec3 light2Pos = vec3(-20., -25.0, 85.0); const vec3 light2Intensity = vec3(0.2); // movement variables vec3 movement = vec3(.0); // Gloable variables for the raymarching algorithm. const int maxIterations = 256; const int maxIterationsShad = 16; const float stepScale = .7; const float stopThreshold = 0.001; mat4 rotationMatrix(vec3 axis, float angle) { axis = normalize(axis); float s = sin(angle); float c = cos(angle); float oc = 1.0 - c; return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0, oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0, oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0, 0.0, 0.0, 0.0, 1.0); } float length2( vec2 p ) { return sqrt( p.x*p.x + p.y*p.y ); } float length6( vec2 p ) { p = p*p*p; p = p*p; return pow( p.x + p.y, 1.0/6.0 ); } float length8( vec2 p ) { p = p*p; p = p*p; p = p*p; return .........完整代码请登录后点击上方下载按钮下载查看
网友评论0