three实现光环光芒变动音乐可视化效果代码
代码语言:html
所属分类:动画
代码描述:three实现光环光芒变动音乐可视化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html { height: 100%; background-color: #FFF; } body { margin: 0; height: 100%; font-family: 'Noto Sans JP', sans-serif; height: 10000px; } #myCanvas { overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } #myCanvas canvas { display: block; width: 100%; height: 100%; } #overlay { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height:100%; display: none; align-items: center; justify-content: center; opacity: 1; background-color: #000000; color: #ffffff; } p{ color: #ffffff; } .link{ color: #000; background: #FFF; mix-blend-mode: exclusion; font-size: 12px; position: absolute; left: 10px; bottom: 10px; } .link a{ text-decoration: underline; font-size: 10px; color: #000; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script> </head> <body > <div id="overlay"> <p>Play</p> </div> <div id="myCanvas"></div> <script id="fragmentShader" type="x-shader/x-fragment"> varying vec2 vUv; uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_mouse; uniform float u_radius; uniform float u_scrollY; uniform float u_volume; uniform sampler2D uTex; float random (in float x) { return fract(sin(x)*1e4); } float random (vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } void main() { //https://qiita.com/watabo_shi/items/2fc671f2147e799787f9 /************************/ vec2 imageResolution = vec2(1024.0, 1024.0); /************************/ vec2 ratio = vec2( min((u_resolution.x / u_resolution.y) / (imageResolution.x / imageResolution.y), 1.0), min((u_resolution.y / u_resolution.x) / (imageResolution.y / imageResolution.x), 1.0) ); vec2 uv = vec2( vUv.x * ratio.x + (1.0 - ratio.x) * 0.5, vUv.y * ratio.y + (1.0 - ratio.y) * 0.5 ); float d = dot(uv,uv); float a = atan(uv.y,uv.x); float aspect = u_resolution.x / u_resolution.y; vec2 center = vec2( u_mouse.x, u_mouse.y ); float radius = u_volume+(center.x+center.y)*0.001; float r = u_volume+(center.x+center.y)*(0.5+u_volume); float lightness = radius / length( uv - center ); vec3 light = vec3(0.0); for(int j = 0; j < 3; j++){ for(int i=0; i < 5; i++){ light[j] += radius / abs(fract(float(r) - float(j*j)*0.01) - length(uv - center) + random(uv+u_time)*u_volume*2.0); } } vec3 color = vec3(random(uv*u_time*d)*0.2, -uv.x*uv.y*d, uv.x*uv.y); //vec3 color = texture2D( uTex, uv).rgb; gl_FragColor = vec4( color+light, 1.0 ); } </script> <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4( position, 1.0 ); } </script> <script > class Audio { constructor(soundUrl) { this.listener = new THREE.AudioListener(); const audio = new THREE.Audio(this.listener); this.xhr = 0; this.audioLoader = new THREE.AudioLoader(); this.audioLoader.load(soundUrl, function (buffer) { audio.setBuffer(buffer); audio.setLoop(true); audio.setVolume(1.0); }, // onProgress callback function (xhr) { if (xhr.loaded / xhr.total * 100 === 100) { setTimeout(() => { document.getElementById('overlay').style.display = "block"; }, 1000); } else {} }, // onError callback function (err) { console.log('An error happened'); }); this.soundPlay = () => { audio.play(); }; this.analyser = []; this.analyser = new THREE.AudioAnalyser(audio, 256); } update() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0