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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0