圣诞树网页代码.docx
圣诞树网页代码<!DOCTYPEhtml><htmllang=,en,><head><metacharset="UTF-8"><title>MusicalChristmasLights<title><linkrel="stylesheet"href="https7ajaxlibsnormalize5.0.0normalize.min.css,><style>*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:pointer;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;.separatorfont-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;)<style><script>window.console=window.consolefunction(t);<script><script>if(document.location.search.match(tpe=embedgi)window.parent.postMessage(,resize,'z"*");<script><head><bodytranslate=,no"><scriptsrc=".three.js-masterbuildthree.min.js"><script>< scriptsrc=".three.js-masterexamplesjspostprocessingEffectComposer.js"><script>< scriptsrc=",.three.js-masterexamplesjspostprocessingRenderPass.js"><script>< scriptsrc=".three.js-masterexamplesjspostprocessingShaderPass,js"><script><scriptsrc=n.three.js-masterexamplesjsshadersCopyShader.js,><script>< scriptsrc=".three.js-masterexamplesjsshadersLuminosityHighPassShader,js"><script>< scriptsrc=".three.js-masterexamplesjspostprocessingUnrealBloomPass.js,><script><divid="overlay"><ul><li><inputtype="file"id="upload"hidden><labelfor="upload">选择音乐vlabel><li><ul><div><scriptid="rendered-js">/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.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;constfftSize=2048;consttotalPoints=4000;constlistener=newTHREE.AudioListener();constaudio=newTHREE.Audio(Iistener);document.querySelector("input").addEventListener(,change"zuploadAudiozfalse);constbuttons=document.querySelectorAII(,.btn");buttons.forEach(buttonzindex)=>button.addEventListener("click",()=>IoadAudio(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.domElement);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?THREE.RedFormat:THREEXuminanceFormat;uniforms.tAudioData=value:newTHREE.DataTe×ture(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=newTHREE.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(renderer);composer.addPass(renderScene);composer.addPass(bloomPass);addListners(camerazrenderer,composer);animate();)functionanimate(time)analyser.getFrequencyData();uniforms.tAudioData.value.needsUpdate=true;step=(step÷1)%1000;uniforms.time.value=time;uniforms.step.value=step;composer.render();requestAnimationFrame(animate);)functionloadAudio(i)document.getElementById("overlay").innerHTML='<divCIaSS="textloading”>正在下载音乐,请稍等.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.freemusicarchive.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.freemusicarchive.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();)；functionuploadAudio(event)document.getElementById("overlay").innerHTML='<divclass="text-loading".<div>'constfiles=event.target.files;constreader=newFileReader();reader.onload=function(file)vararrayBuffer=file.target.result;listener.context.decodeAudioData(arrayBufferzfunction(audioBuffer)audio.setBuffer(audioBuffer);audio.play();analyser=newTHREE.AudioAnalyser(audiozfftSize);iit();)；)；reader.readAsArrayBuffer(filesO);)functionaddTree(scenezuniforms,totalPoints,treePosition)constVertexShader='attributefloatmlndex;varyingvec3vColor;varyingfloatopacity;uniformsampler2DtAudioData;floatnorm(floatvalue,floatminzfloatmax)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=modelViewMatri×*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*mvPosition;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:/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;i<totalPoints;i+)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);color.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);geometry.setAttribute(',color"znewTHREE.Float32BufferAttribute(colorsz3);geometry.setAttribute(',size"znewTHREE.FIoat32BUfferAttribUte(SiZeS,1);geometry.setAttribute("phase"znewTHREE.Float32BufferAttribute(phaseszD)；geometry.setAttribute(,mIndex"znewTHREE.FIoat32BufferAttribute(mIndexs,1);consttree=newTHREE.Points(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;uniformfloatstep;floatnorm(floatvalue,floatminzfloatmax)return(value-min)/(max-min);floatlerp(floatnorm,floatmin,floatmax)return(max-min)*norm÷min;floatmap(floatvalue,floatsourceMin,floatsourceMax,floatdestMinzfloatdestMax)returnlerp(norm(value,sourceMin,sourceMax)zdestMin,destMax);voidmain()floatt=time*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;/constfragmentShader='uniformsampler2DpointTe×ture;varyingvec3vColor;varyingfloatopacity;voidmain()gLFragColor=vec4(vColorzopacity);gLFragColor=gLFragColor*texture2D(pointTexturezgl_PointCoord);functionCreateSnowSet(Sprite)consttotalPoints=300;constShaderMateriaI=newTHREE.ShaderMaterial(uniforms:.uniforms,PointTexture:value:newTHREE.TextureLoader(),load(sprite),VertexShaderzfragmentshader,blending:THREE.AdditiveBIendingzdepthTest:false,transparent:true,vertexcolors:true)；constgeometry=newTHREE1BufferGeometryO;constpositions=;constcolors=;constsizes=;constphases=;constphasesecondaries=;constcolor=newTHREE.Color();for(leti=0;i<totalPoints;i+)constx,yzz=rand(25z-25)zOzrand(15z-150);positions.push(x);positions.push(y);positions.push(z);color.set(randChoise("#fld4d4"z"#flf6f9"z"#eeeeee"z"#flfle8");colors.push(color.r,color.gzcolor.b);phases.push(rand(1000);phaseSecondaries.push(rand(1000);sizes.push(rand(4,2);geometry.setAttribute("position",newTHREE.Float32BufferAttribute(positionsz3);geometry.setAttribute("color"znewTHREE.FIoat32BufferAttribute(colors,3)；geometry.setAttribute("size",newTHREE.FIoat32BufferAttribute(sizes,1);geometry.setAttribute("phase"znewTHREE.Float32BufferAttribute(phasesz1)；geometry.setAttribute("phasesecondary",newTHREE.Float32BufferAttribute(phaseSecondariesz1);constmesh=newTHREE.Points(geometryzShaderMateriaI);scene.add(mesh);)constsprites="https:/assets.codepen.io/3685267/snowflakel.png","https:/assets.codepen.io/3685267/snowflake2.png","https:/assets.codepen.io/3685267/snowflake3.png","https:/assets.codepen.io/3685267/snowflake4.png","https:/assets.codepen.io/3685267/snowflake5.png"；sprites.forEach(sprite=>CreateSnowSet(Sprite);)；functionaddPlane(scenezuniforms,totalPoints)constVertexShader='attributefloatsize;attributevec3CustomCoIor;varyingvec3vColor;voidmain()vColor=CustomCoIor;vec4mvPosition=modelViewMatri×*vec4(position,1.0);gLPointSize=size*(300.0/-mvPosition.z);gl_Position=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: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(leti=O;i<totalPoints;i+)constx,yzz=rand(-25z25),Ozrand(-150z15);positions.push(x);positions.push(y);positions.push(z);color.set(randChoise("#93abd3"z,f2f4c,z"#9ddfd3");colors.push(color.rzcolor.gzcolor.b);sizes.push(l);)geometry.setAttribute("position",newTHREE.FIoat32BufferAttribute(positionsz3).setUsage(THREE.DynamicDrawUsage);geometry.setAttribute("customColor"znewTHREE.Float32BufferAttribute(colorsz3);geometry.setAttribute("size",newTHREE.FIoat32BufferAttribute(sizesz1);constplane=newTHREE.Points(geometryzShaderMateriaI);plane.position.y=-8;scene.add(plane);)functionaddListners(camera,renderer,composer)document.addEventListener("keydown"ze=>const×,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);)<script><body><html>
