圣诞树网页代码.docx

上传人:p** 文档编号:769652 上传时间:2024-02-26 格式:DOCX 页数:22 大小:29.24KB
下载 相关 举报
圣诞树网页代码.docx_第1页
第1页 / 共22页
圣诞树网页代码.docx_第2页
第2页 / 共22页
圣诞树网页代码.docx_第3页
第3页 / 共22页
圣诞树网页代码.docx_第4页
第4页 / 共22页
圣诞树网页代码.docx_第5页
第5页 / 共22页
圣诞树网页代码.docx_第6页
第6页 / 共22页
圣诞树网页代码.docx_第7页
第7页 / 共22页
圣诞树网页代码.docx_第8页
第8页 / 共22页
圣诞树网页代码.docx_第9页
第9页 / 共22页
圣诞树网页代码.docx_第10页
第10页 / 共22页
亲,该文档总共22页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《圣诞树网页代码.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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > 图形图像

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!