《圣诞树网页代码.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();requestAnima
12、tionFrame(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_-_Snowflakes_Falling_Down.mp3,https:/files.freem
13、usicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3”,https:/files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3n,https:/files.freemusicarchiv
14、e.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3；constfile=filesi;constloader=newTHREE.AudioLoader();loader.load(filezfunction(buffer)audio.setBuffer(buffer);audio.play();analyser=newTHREE.AudioAnalyser(audiozfftSize);init();)；f
15、unctionuploadAudio(event)document.getElementById(overlay).innerHTML=divclass=text-loading.;constfiles=event.target.files;constreader=newFileReader();reader.onload=function(file)vararrayBuffer=file.target.result;listener.context.decodeAudioData(arrayBufferzfunction(audioBuffer)audio.setBuffer(audioBu
16、ffer);audio.play();analyser=newTHREE.AudioAnalyser(audiozfftSize);iit();)；)；reader.readAsArrayBuffer(filesO);)functionaddTree(scenezuniforms,totalPoints,treePosition)constVertexShader=attributefloatmlndex;varyingvec3vColor;varyingfloatopacity;uniformsampler2DtAudioData;floatnorm(floatvalue,floatminz
17、floatmax)return(value-min)/(max-min);floatlerp(floatnorm,floatmin,floatmax)return(max-min)*norm+min;floatmap(floatvalue,floatsourceMinzfloatSourceMaxzfloatdestMinzfloatdestMax)returnlerp(norm(valuezsourceMinzsourceMax)zdestMinzdestMax);voidmain()vColor=color;vec3p=position;vec4mvPosition=modelViewMa
18、tri*vec4(pz1.0);floatamplitude=texture2D(tAudioData,vec2(mlndex,0.1).r;floatamplitudeClamped=clamp(amplitude-0.4z0.0z0.6);floatSizeMapped=map(amplitudeClampedz0.0z0.6z1.0z20.0);opacity=map(mvPosition.z,-200.0z15.0z0.0z1.0);gLPointSize=SizeMapped*(100.0/-mvPosition.z);gl_Position=projectionMatrix*mvP
19、osition;varyingvec3vColor;varyingfloatopacity;uniformsampler2DpointTexture;voidmain()gLFragColor=vec4(vColor,opacity);gl_FragColor=gLFragColor*texture2D(pointTexturezgl_PointCoord);/constShaderMateriaI=newTHREE.ShaderMaterial(uniforms:.uniforms,pointTexture:value:newTHREE.TextureLoader(),load(https:
20、/assets.codepen.io/3685267/sparkl.png),VertexShader,fragmentShader,blending:THREE.AdditiveBlendingzdepthTest:false,transparent:true,vertexcolors:true)；constgeometry=newTHREE.BufferGeometry();constpositions=;constsizes=;constphases=;constmlndexs=;constcolor=newTHREE.Color();for(leti=0;itotalPoints;i+
21、)constt=Math.random();consty=map(t,0,1,-8,10);constang=m叩(t,0,1,0,6*TAU)+TAU/2*(i%2);constzfx=polar(angzmap(t,0z1,5z0);constmodifier=map(tz0zlzlz0);positions.push(x+rand(-0.3*modifier,0.3*modifier);positions.push(y+rand(-0.3*modifier,0.3*modifier);positions.push(z+rand(-0.3*modifier,0.3*modifier);co
22、lor.setHSL(map(iz0ztotalPoints,1.0z0.0)z1.0z0.5);colors.push(color.rzcolor.g,color.b);phases.push(rand(1000);sizes.push(l);constmlnde=map(iz0ztotalPoints,1.0z0.0);mlndexs.push(mlndex);)geometry.setAttribute(position,newTHREE.FIoat32BufferAttribute(positionsz3).setUsage(THREE.DynamicDrawUsage);geomet
23、ry.setAttribute(,colorznewTHREE.Float32BufferAttribute(colorsz3);geometry.setAttribute(,sizeznewTHREE.FIoat32BUfferAttribUte(SiZeS,1);geometry.setAttribute(phaseznewTHREE.Float32BufferAttribute(phaseszD)；geometry.setAttribute(,mIndexznewTHREE.FIoat32BufferAttribute(mIndexs,1);consttree=newTHREE.Poin
24、ts(geometry,ShaderMateriaI);constp,pyzpz=treePosition;tree.position.x=px;tree.position.y=py;tree.position.z=pz;scene.add(tree);functionaddSnow(scenezuniforms)constVertexShader=attributefloatsize;attributefloatphase;attributefloatphasesecondary;varyingvec3vColor;varyingfloatopacity;uniformfloattime;u
25、niformfloatstep;floatnorm(floatvalue,floatminzfloatmax)return(value-min)/(max-min);floatlerp(floatnorm,floatmin,floatmax)return(max-min)*normmin;floatmap(floatvalue,floatsourceMin,floatsourceMax,floatdestMinzfloatdestMax)returnlerp(norm(value,sourceMin,sourceMax)zdestMin,destMax);voidmain()floatt=ti
26、me*0.0006;vColor=color;vec3p=position;p.y=map(mod(phase+stepz1000.0)z0.0,1000.0z25.0,-8.0);p.x+=sin(t+phase);p.z+=sin(t+phaseSecondary);opacity=map(p.z,-150.0,15.0,0.0,1.0);vec4mvPosition=modelViewMatrix*vec4(pz1.0);gLPointSize=size*(100.0/-mvPosition.z);gl_Position=projectionMatrix*mvPosition;/cons
27、tfragmentShader=uniformsampler2DpointTeture;varyingvec3vColor;varyingfloatopacity;voidmain()gLFragColor=vec4(vColorzopacity);gLFragColor=gLFragColor*texture2D(pointTexturezgl_PointCoord);functionCreateSnowSet(Sprite)consttotalPoints=300;constShaderMateriaI=newTHREE.ShaderMaterial(uniforms:.uniforms,
28、PointTexture:value:newTHREE.TextureLoader(),load(sprite),VertexShaderzfragmentshader,blending:THREE.AdditiveBIendingzdepthTest:false,transparent:true,vertexcolors:true)；constgeometry=newTHREE1BufferGeometryO;constpositions=;constcolors=;constsizes=;constphases=;constphasesecondaries=;constcolor=newT
29、HREE.Color();for(leti=0;iCreateSnowSet(Sprite);)；functionaddPlane(scenezuniforms,totalPoints)constVertexShader=attributefloatsize;attributevec3CustomCoIor;varyingvec3vColor;voidmain()vColor=CustomCoIor;vec4mvPosition=modelViewMatri*vec4(position,1.0);gLPointSize=size*(300.0/-mvPosition.z);gl_Positio
30、n=projectionMatrix*mvPosition;/constfragmentShader=uniformvec3color;uniformsampler2DpointTexture;varyingvec3vColor;voidmain()gl_FragColor=vec4(vColor,1.0);gLFragColor=gl_FragColor*texture2D(pointTexture,gl_PointCoord);9constShaderMateriaI=newTHREE.ShaderMaterial(uniforms:.uniforms,PointTexture:value
31、:newTHREE.TextureLoader().load(https:/assets.codepen.io/3685267/sparkl.png)zVertexShader,fragmentShaderzblending:THREE.AdditiveBlendingzdepthTest:false,transparent:true,vertexcolors:true)；constgeometry=newTHREE.BufferGeometry();constpositions=;constcolors=;constsizes=;constcolor=newTHREE.Color();for
32、(leti=O;iconst,y,z=camera,position;console.log(camera.position.set($xz$y,$z);constx:a,y：b,Z：C=camera.rotation;console.log(camera.rotation.set($a,$b,$c);)；window.addEventListener(resize,()=constwidth=WindowJnnerWidth;constheight=WindowJnnerHeight;camera.aspect=width/height;camera.updateProjectionMatrix();renderer.setSize(widthzheight);composer.setSize(widthzheight);,false);)
