圣诞树网页代码.docx

《圣诞树网页代码.docx》由会员分享，可在线阅读，更多相关《圣诞树网页代码.docx（22页珍藏版）》请在优知文库上搜索。

1、圣诞树网页代码MusicalChristmasLights*box-sizing:border-box;)bodymargin:O;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#161616;color:#c5a880;font-family:sans-serif;)labeldisplay:inline-block;background-color:#161616;padding:16px;border-radius:0.3rem;cursor:p

2、ointer;margin-top:lrem;width:300px;border-radius:10px;border:Ipxsolid#c5a880;text-align:center;u(list-style-type:none;padding:0;margin:0;).btnbackground-color:#161616;border-radius:10px;color:#c5a880;border:Ipxsolid#c5a880;padding:16p;width:300px;margin-bottom:16px;line-height:1.5;cursor:pointer;.se

3、paratorfont-weight:bold;text-align:center;width:300p;margin:16pxOpx;color:#a07676;).titlecolor:#a07676;font-weight:bold;font-size:1.25rem;margin-bottom:16px;).text-loadingfont-size:2rem;)window.console=window.consolefunction(t);if(document.location.search.match(tpe=embedgi)window.parent.postMessage(

4、,resize,z*);选择音乐vlabel/constTHREE=constpi,sinzcos=Math;constTAU=2*PI;constmap=(value,sMinzSMax,dMinzdMax)=returndMin+(value-sMin)/(sMax-sMin)*(dMax-dMin);)；constrange=(n,m=0)=Array(n).fill(m).map(i,j)=i+j);constrand=(max,min=0)=min+Math.random()*(max-min);constrandlnt=(maxzmin=0)=Math.floor(min+Math

5、.random()*(max-min);constrandChoise=arr=arrrandlnt(arr.length);constpolar=(angzr=1)=r*cos(ang)zr*sin(ang);letscene,camera,rendererzanalyser;letstep=0;constuniforms=time:type:,f,zvalue:0.0,step:type:f,value:0.0)；constparams=exposure:1,bloomStrength:0.9zbloorThreshold:0,bloomRadius:0.5；letcomposer;con

6、stfftSize=2048;consttotalPoints=4000;constlistener=newTHREE.AudioListener();constaudio=newTHREE.Audio(Iistener);document.querySelector(input).addEventListener(,changezuploadAudiozfalse);constbuttons=document.querySelectorAII(,.btn);buttons.forEach(buttonzindex)=button.addEventListener(click,()=IoadA

7、udio(Index);functioninit()constoverlay=document.getElementById(overlay);overlay.remove();scene=newTHREE.Scene();renderer=newTHREE.WebGLRenderer(antialias:true)；renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidthzWindowJnnerHeight);document.body.appendChild(renderer.dom

8、Element);camera=newTHREE.PerspectiveCamera(60,WindowJnnerWidth/WindowJnnerHeightz1,1000);camera.position.set(-0.09397456774197047z-2.5597086635726947z24.420789670889008);camera.rotation.set(0.10443543723052419z-0.003827152981119352z0.0004011488708739715);constformat=renderer.capabilities.isWebGL2?TH

9、REE.RedFormat:THREEXuminanceFormat;uniforms.tAudioData=value:newTHREE.DataTeture(analyser.data,fftSize/2r1,format)；addPlane(scenezuniforms,3000);addSnow(scenezuniforms);range(10).map(i=addTree(scene,uniforms,totalPoints,20,0,-20*i);addTree(scenezuniforms,totalPoints,-20,0,-20*i);)；constrenderScene=n

10、ewTHREE.RenderPass(scenezcamera);constbloomPass=newTHREE.UnrealBloomPass(newTHREE.Vector2(window.innerWidthzwindow.innerHeight),1.5z0.4,0.85);bloomPass.threshold=params.bloomThreshold;bloomPass.strength=params.bloomStrength;bloomPass.radius=params.bloomRadius;composer=newTHREE.EffectComposer(rendere

11、r);composer.addPass(renderScene);composer.addPass(bloomPass);addListners(camerazrenderer,composer);animate();)functionanimate(time)analyser.getFrequencyData();uniforms.tAudioData.value.needsUpdate=true;step=(step1)%1000;uniforms.time.value=time;uniforms.step.value=step;composer.render();requestAnimationFrame(animate);)functionloadAudio(i)document.getElementById(overlay).innerHTML=正在下载音乐,请稍等.vdiv;constfiles=https:/files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Sno