當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现 ❤️3D洞穴无限延伸动画特效❤️

發布時間：2025/3/12 HTML 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️3D洞穴无限延伸动画特效❤️ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼

?代碼目錄：

主要代碼實現：

CSS樣式：

body {margin: 0; }canvas {height: 100vh !important;position: fixed;width: 100vw !important; }

HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>CodePen - Control 2</title><link rel="stylesheet" href="css/style.css"></head><body><canvas id="webgl" width="500" height="1758"></canvas><script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_position; uniform mat4 u_modelViewMatrix; uniform mat4 u_projectionMatrix; void main() { gl_Position = a_position; }</script><script id="fragmentShader" type="x-shader/x-fragment">precision highp float; precision highp int; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D u_noise; // movement variables vec3 movement = vec3(.0); const int maxIterations = 256; const float stopThreshold = 0.002;const float stepScale = .5; const float eps = 0.002; const vec3 clipColour = vec3(1.); const vec3 fogColour = vec3(1.); const vec3 light1_position = vec3(0, 1., -1.); const vec3 light1_colour = vec3(.8, .8, .85); struct Surface { int object_id;float distance; vec3 position; vec3 onsurface_position; vec3 colour; float steps; float ambient; float spec; float fog; }; // Distance function copyright Inigo Quilez float opExtrusion( in vec3 p, in float primitive, in float h ) { float d = primitive;vec2 w = vec2( d, abs(p.z) - h ); return min(max(w.x,w.y),0.0) + length(max(w,0.0)); } float sdBox( in vec2 p, in vec2 b ) { vec2 d = abs(p)-b; return length(max(d,0.0)) + min(max(d.x,d.y),0.0); } vec3 path(float z) { // return vec3(0,0,0.); returnvec3(sin(z * .1) * 4., sin(z * .05) * 10., z); } float getBlock(vec3 position, inout int object_id, inout vec3 p) { // position.z = fract(position.z) - .5; // object_id = int(id); float id = float(object_id); float r = sin(id * .3 + u_time) *.5; r = sin(texture2D(u_noise, vec2((id*2.)/255.)).x * 2. + u_time - id) * .25; float rw = texture2D(u_noise, vec2((id*2.)/255.)).x - .5; // // position.xy += r; float s = sin(r); float c = cos(r); position.xy *= mat2(c, -s, s, c); p = position;float box = sdBox(position.xy, vec2(1.5 + rw, 1.)) * -1.; float world = opExtrusion(position, box, .45) - .005; // world += smoothstep(.04, 0., abs(sin(p.x * 4.))) * .01; // world += smoothstep(.02, 0., abs(sin(p.y * 2.))) * .01; return world;} // This function describes the world in distances from any given 3 dimensional point in space float world(in vec3 position, inout int object_id, inout vec3 p) { position.xy -= path(position.z).xy; float id = floor(position.z); position.z = fract(position.z)- .5; int oid1 = int(id); vec3 p1; float block1 = getBlock(position, oid1, p1); int oid2 = int(id+1.); vec3 p2; float block2 = getBlock(position + vec3(0,0,-1), oid2, p2); object_id = oid1; p = p1; if(block2< block1) { block1=b lock2;object_id=o id2; p=p 2; } return block1; } float world(in vec3 position, inout int object_id) { vec3 p; return world(position, object_id, p); } float world(in vec3 position) { int dummy=0 ; return world(position, dummy); } Surface getSurface(intobject_id, float rayDepth, vec3 sp, float steps, vec3 onsurface_pos, float fog) { return Surface( object_id, rayDepth, sp, onsurface_pos, vec3(1.), steps, .5, 1000., fog); } // The raymarch loop Surface rayMarch(vec3 ro, vec3 rd, float start,float end) { float sceneDist=1 e4; float rayDepth=s tart; int object_id=0 ; float steps=0 .; float fog=0 .; vec3 p; for(int i=0 ; i < maxIterations; i++) { sceneDist=w orld(ro + rd * rayDepth, object_id, p); rd +=( texture2D(u_noise, (p.xy)*255.).rgb-.5)*.0005;steps++; fog +=m ax(sceneDist, 0.); if(sceneDist < stopThreshold || rayDepth> end) { break; } rayDepth += sceneDist * stepScale; } return getSurface(object_id, rayDepth, ro + rd * rayDepth, steps, p, fog); } // Calculated the normal of any given point in space. Intended to be cast from the point of a surface vec3 calculate_normal(invec3 position) { vec3 grad = vec3( world(vec3(position.x + eps, position.y, position.z)) - world(vec3(position.x - eps, position.y, position.z)), world(vec3(position.x, position.y + eps, position.z)) - world(vec3(position.x, position.y - eps,position.z)), world(vec3(position.x, position.y, position.z + eps)) - world(vec3(position.x, position.y, position.z - eps)) ); return normalize(grad); } vec3 lighting(Surface surface_object, vec3 cam) { // start with black vec3 sceneColour= vec3(0); // Surface normal vec3 normal = calculate_normal(surface_object.position); normal += smoothstep(.02, 0., abs(sin(surface_object.onsurface_position.x * 4.))) * .5; normal += smoothstep(.01, 0., abs(sin(surface_object.onsurface_position.y* 2.))) * .5; // Light position vec3 lp = path(u_time*3.+15.); // Light direction vec3 ld = lp - surface_object.position; // light attenuation // For brightly lit scenes or global illumination (like sunlit), this can be limited to just normalizingthe ld float len = length( ld ); ld = normalize(ld); float lightAtten = min( 1.0 / ( 0.15*len ), 1.0 ); lightAtten = 1.; // The surface's light reflection normal vec3 reflection_normal = reflect(-ld, normal); // Ambient Occlusion float ao= (surface_object.steps*.01*(1./(surface_object.fog*.07))); ao *= ao*2.; ao = clamp( ((1.-ao)+.3) , 0., 1.); // ao -= surface_object.steps*.005; // Object surface properties float diffuse = max(0., dot(normal, ld)); float specular = max(0.,dot( reflection_normal, normalize(cam - surface_object.position) )); // Bringing all of the lighting components together vec3 tp = surface_object.onsurface_position * 2.; vec3 c = texture2D(u_noise, tp.xy + tp.zx).rrr + texture2D(u_noise,tp.zy + tp.yx).rrr; tp = surface_object.onsurface_position * vec3(.8, .8, 1.); c += texture2D(u_noise, tp.xy + tp.zx).rrr + texture2D(u_noise, tp.zy + tp.yx).rrr; tp = surface_object.onsurface_position * vec3(1., .4, .4); c += texture2D(u_noise,tp.xy + tp.zx).rrr + texture2D(u_noise, tp.zy + tp.yx).rrr; c *= .125; c *= .5 + .5; c *= vec3(1,.98,.90); sceneColour += ( c * (diffuse + specular )) * light1_colour * lightAtten * ao; // adding fog float fogl = surface_object.fog*.04; fogl*= smoothstep(-.5, 1.8, fogl); sceneColour = mix( sceneColour, fogColour, fogl ); return sceneColour; } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); float t = u_time * 3.; // movementmovement = path(t); // Camera and look-at vec3 cam = vec3(0,0,-2); vec3 lookAt = vec3(0,-.5,-2.); // add movement lookAt = path(t+3.); cam = movement; // cam.y += abs(sin(u_time*20.)*.02); // Unit vectors vec3 forward = normalize(lookAt -cam); vec3 right = normalize(vec3(forward.z, 0., -forward.x)); vec3 up = normalize(cross(forward, right)); // FOV float FOV = 1.4; // Ray origin and ray direction vec3 ro = cam; vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y* up); rd.y -= (movement.y - lookAt.y) * .04; // Ray marching const float clipNear = 0.; const float clipFar = 20.; Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar); if(objectSurface.distance > clipFar) { gl_FragColor = vec4(clipColour,1.); return; } vec3 sceneColour = lighting(objectSurface, cam); gl_FragColor = vec4(sceneColour, 1.); // gl_FragColor += vec4(vec3(objectSurface.fog*.01), 1.); }</script><script src="js/script.js"></script></body></html>

源碼獲取

大家可以點贊、收藏、關注、評論我啦、查看博主主頁或下方微信公眾號獲取更多~！

打卡文章更新?48??/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️3D洞穴无限延伸动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML+CSS+JS实现 ❤️等离子球
下一篇： HTML+CSS+JS实现 ❤️流星天体