threejs打造虚幻背景和繁星点点文字效果代码
代码语言:html
所属分类:游戏
代码描述:threejs打造虚幻背景和繁星点点文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { height: 100vh; background-color: #000; margin: 0; padding: 0; overflow: hidden; position: relative; display: flex; align-items: center; } .c-hero { width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; } h1 { color: rgba(255, 255, 255, 0.95); font-family: "Exo 2", sans-serif; font-size: 9vmin; font-weight: 700; letter-spacing: 3vmin; text-transform: uppercase; text-shadow: #fdfd05 1px 0 30px; position: absolute; } </style> </head> <body > <!-- * HERO SPACE COMPONENT with SHADERZZZ <3 * Made for FrontendHorse Twitch Stream * https://frontend.horse/episode/gorgeous-space-shaders * * SEPTEMBER 2021 * * By ilithya * https://www.ilithya.rocks/ * https://twitter.com/ilithya_rocks --> <div id="shader" class="c-hero"> <!-- <h1>Spacebnb</h1> --> </div> <script id="vertex" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = (uv - 0.5) * 2.0; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script id="vertex-font" type="x-shader/x-vertex"> varying vec2 vUv; uniform vec2 u_ratio; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); vUv = (gl_Position.xy / gl_Position.w); vUv *= u_ratio; // Normalized Device Coordinates } </script> <script id="fragment" type="x-shader/x-fragment"> precision highp float; varying vec2 vUv; #define TAU 6.2831853071795864769252867665590 uniform float u_time; uniform bool u_text; // https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float circleShape(in vec2 uv, in float radius) { float circle = distance( uv, vec2( clamp( // tan(u_time * // TRY another effect sin(u_time * 0.5 * rand(vec2(radius)) ), 0.25, 0.75 ) ) ); return smoothstep( radius * 0.2, radius * 0.21, circle ); } void main(void){ vec2 uv = vUv; if (u_text) { uv.x -= 2.0; uv.y += 0.5; // TRY 1.0 } float time = u_time; // SPACE BACKGROUND vec3 color = vec3(0.0); float space = atan(uv.x, uv.y) + uv.x; space /= TAU; space = fract(space * 3. * 7. + time * 0.1); color = vec3(space); // COLORS vec3 c1 = vec3(0.27, 0.32, 0.78); // blue-purple vec3 c2 = vec3(1.1, 1.1, 0.3); // final yellow // Try g - 1.3 // vec3 c2 = vec3(1.0, 0.87, 0.3); // before yellow vec3 c3 = vec3(1.0); // white vec3 c4 = vec3(0.57, 0.5, 0.9); // light purple vec3 c5 = vec3(0.1, 0.3, 0.4); // aqua vec3 c6 = vec3(0.35, 0.0, 1.0); // blue vec3 c7 = vec3(0.95); // grayish color = mix(c1, c5, color); // color = mix(c1, c4, color); TRY another combination // GLOW float circle = distance( vec2(uv.x, uv.y * 1.5) * 0.5, vec2(-0.2, -0.2) ); vec3 glow = vec3(circle); // glow = step(0.3, glow); // TO DEBUG glow = smoothstep(0.0, 0.5, glow); color = 0.2 + mix(color, glow, color); // MAIN STAR float star = length(uv); star = smoothstep(0.0, 0.45, star); color *= mix(c2, c3, star); // STARDUST float i = 45.0; vec2 particles = ceil(uv*i); float dust = circleShape( fract(uv * i), rand(particles) ); vec3 gradientBg = mix(c3, c6, length(uv*1.5)); // TRY 1.7 vec3 gradientDust = mix(c7, c3, length(uv)); // TR.........完整代码请登录后点击上方下载按钮下载查看
网友评论0