圣诞树网页代码_第1页
圣诞树网页代码_第2页
圣诞树网页代码_第3页
圣诞树网页代码_第4页
圣诞树网页代码_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

圣诞树网页代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>MusicalChristmasLights</title><linkrel="stylesheet"href="/ajax/libs/normalize/5.0.0/normalize.min.css"><style>*{box-sizing:border-box;}body{margin:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#161616;color:#c5a880;font-family:sans-serif;}label{display:inline-block;background-color:#161616;padding:16px;border-radius:0.3rem;cursor:pointer;margin-top:1rem;width:300px;border-radius:10px;border:1pxsolid#c5a880;text-align:center;}ul{list-style-type:none;padding:0;margin:0;}.btn{background-color:#161616;border-radius:10px;color:#c5a880;border:1pxsolid#c5a880;padding:16px;width:300px;margin-bottom:16px;line-height:1.5;cursor:pointer;}.separator{font-weight:bold;text-align:center;width:300px;margin:16px0px;color:#a07676;}.title{color:#a07676;font-weight:bold;font-size:1.25rem;margin-bottom:16px;}.text-loading{font-size:2rem;}</style><script>window.console=window.console||function(t){};</script><script>if(document.location.search.match(/type=embed/gi)){window.parent.postMessage("resize","*");}</script></head><bodytranslate="no"><scriptsrc="./three.js-master/build/three.min.js"></script><scriptsrc="./three.js-master/examples/js/postprocessing/EffectComposer.js"></script><scriptsrc="./three.js-master/examples/js/postprocessing/RenderPass.js"></script><scriptsrc="./three.js-master/examples/js/postprocessing/ShaderPass.js"></script><scriptsrc="./three.js-master/examples/js/shaders/CopyShader.js"></script><scriptsrc="./three.js-master/examples/js/shaders/LuminosityHighPassShader.js"></script><scriptsrc="./three.js-master/examples/js/postprocessing/UnrealBloomPass.js"></script><divid="overlay"><ul><li><inputtype="file"id="upload"hidden/><labelfor="upload">选择音乐</label></li></ul></div><scriptid="rendered-js">//constTHREE=''const{PI,sin,cos}=Math;constTAU=2*PI;constmap=(value,sMin,sMax,dMin,dMax)=>{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);constrandInt=(max,min=0)=>Math.floor(min+Math.random()*(max-min));constrandChoise=arr=>arr[randInt(arr.length)];constpolar=(ang,r=1)=>[r*cos(ang),r*sin(ang)];letscene,camera,renderer,analyser;letstep=0;constuniforms={time:{type:"f",value:0.0},step:{type:"f",value:0.0}};constparams={exposure:1,bloomStrength:0.9,bloomThreshold:0,bloomRadius:0.5};letcomposer;constfftSize=2048;consttotalPoints=4000;constlistener=newTHREE.AudioListener();constaudio=newTHREE.Audio(listener);document.querySelector("input").addEventListener("change",uploadAudio,false);constbuttons=document.querySelectorAll(".btn");buttons.forEach((button,index)=>button.addEventListener("click",()=>loadAudio(index)));functioninit(){constoverlay=document.getElementById("overlay");overlay.remove();scene=newTHREE.Scene();renderer=newTHREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera=newTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);camera.position.set(-0.09397456774197047,-2.5597086635726947,24.420789670889008);camera.rotation.set(0.10443543723052419,-0.003827152981119352,0.0004011488708739715);constformat=renderer.capabilities.isWebGL2?THREE.RedFormat:THREE.LuminanceFormat;uniforms.tAudioData={value:newTHREE.DataTexture(analyser.data,fftSize/2,1,format)};addPlane(scene,uniforms,3000);addSnow(scene,uniforms);range(10).map(i=>{addTree(scene,uniforms,totalPoints,[20,0,-20*i]);addTree(scene,uniforms,totalPoints,[-20,0,-20*i]);});constrenderScene=newTHREE.RenderPass(scene,camera);constbloomPass=newTHREE.UnrealBloomPass(newTHREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.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(camera,renderer,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='<divclass="text-loading">正在下载音乐，请稍等...</div>';constfiles=["/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3","/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3","/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3","/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];constfile=files[i];constloader=newTHREE.AudioLoader();loader.load(file,function(buffer){audio.setBuffer(buffer);audio.play();analyser=newTHREE.AudioAnalyser(audio,fftSize);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(arrayBuffer,function(audioBuffer){audio.setBuffer(audioBuffer);audio.play();analyser=newTHREE.AudioAnalyser(audio,fftSize);init();});};reader.readAsArrayBuffer(files[0]);}functionaddTree(scene,uniforms,totalPoints,treePosition){constvertexShader=`attributefloatmIndex;varyingvec3vColor;varyingfloatopacity;uniformsampler2DtAudioData;floatnorm(floatvalue,floatmin,floatmax){return(value-min)/(max-min);}floatlerp(floatnorm,floatmin,floatmax){return(max-min)*norm+min;}floatmap(floatvalue,floatsourceMin,floatsourceMax,floatdestMin,floatdestMax){returnlerp(norm(value,sourceMin,sourceMax),destMin,destMax);}voidmain(){vColor=color;vec3p=position;vec4mvPosition=modelViewMatrix*vec4(p,1.0);floatamplitude=texture2D(tAudioData,vec2(mIndex,0.1)).r;floatamplitudeClamped=clamp(amplitude-0.4,0.0,0.6);floatsizeMapped=map(amplitudeClamped,0.0,0.6,1.0,20.0);opacity=map(mvPosition.z,-200.0,15.0,0.0,1.0);gl_PointSize=sizeMapped*(100.0/-mvPosition.z);gl_Position=projectionMatrix*mvPosition;}`;constfragmentShader=`varyingvec3vColor;varyingfloatopacity;uniformsampler2DpointTexture;voidmain(){gl_FragColor=vec4(vColor,opacity);gl_FragColor=gl_FragColor*texture2D(pointTexture,gl_PointCoord);}`;constshaderMaterial=newTHREE.ShaderMaterial({uniforms:{...uniforms,pointTexture:{value:newTHREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending:THREE.AdditiveBlending,depthTest:false,transparent:true,vertexColors:true});constgeometry=newTHREE.BufferGeometry();constpositions=[];constcolors=[];constsizes=[];constphases=[];constmIndexs=[];constcolor=newTHREE.Color();for(leti=0;i<totalPoints;i++){constt=Math.random();consty=map(t,0,1,-8,10);constang=map(t,0,1,0,6*TAU)+TAU/2*(i%2);const[z,x]=polar(ang,map(t,0,1,5,0));constmodifier=map(t,0,1,1,0);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(i,0,totalPoints,1.0,0.0),1.0,0.5);colors.push(color.r,color.g,color.b);phases.push(rand(1000));sizes.push(1);constmIndex=map(i,0,totalPoints,1.0,0.0);mIndexs.push(mIndex);}geometry.setAttribute("position",newTHREE.Float32BufferAttribute(positions,3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("color",newTHREE.Float32BufferAttribute(colors,3));geometry.setAttribute("size",newTHREE.Float32BufferAttribute(sizes,1));geometry.setAttribute("phase",newTHREE.Float32BufferAttribute(phases,1));geometry.setAttribute("mIndex",newTHREE.Float32BufferAttribute(mIndexs,1));consttree=newTHREE.Points(geometry,shaderMaterial);const[px,py,pz]=treePosition;tree.position.x=px;tree.position.y=py;tree.position.z=pz;scene.add(tree);}functionaddSnow(scene,uniforms){constvertexShader=`attributefloatsize;attributefloatphase;attributefloatphaseSecondary;varyingvec3vColor;varyingfloatopacity;uniformfloattime;uniformfloatstep;floatnorm(floatvalue,floatmin,floatmax){return(value-min)/(max-min);}floatlerp(floatnorm,floatmin,floatmax){return(max-min)*norm+min;}floatmap(floatvalue,floatsourceMin,floatsourceMax,floatdestMin,floatdestMax){returnlerp(norm(value,sourceMin,sourceMax),destMin,destMax);}voidmain(){floatt=time*0.0006;vColor=color;vec3p=position;p.y=map(mod(phase+step,1000.0),0.0,1000.0,25.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(p,1.0);gl_PointSize=size*(100.0/-mvPosition.z);gl_Position=projectionMatrix*mvPosition;}`;constfragmentShader=`uniformsampler2DpointTexture;varyingvec3vColor;varyingfloatopacity;voidmain(){gl_FragColor=vec4(vColor,opacity);gl_FragColor=gl_FragColor*texture2D(pointTexture,gl_PointCoord);}`;functioncreateSnowSet(sprite){consttotalPoints=300;constshaderMaterial=newTHREE.ShaderMaterial({uniforms:{...uniforms,pointTexture:{value:newTHREE.TextureLoader().load(sprite)}},vertexShader,fragmentShader,blending:THREE.AdditiveBlending,depthTest:false,transparent:true,vertexColors:true});constgeometry=newTHREE.BufferGeometry();constpositions=[];constcolors=[];constsizes=[];constphases=[];constphaseSecondaries=[];constcolor=newTHREE.Color();for(leti=0;i<totalPoints;i++){const[x,y,z]=[rand(25,-25),0,rand(15,-150)];positions.push(x);positions.push(y);positions.push(z);color.set(randChoise(["#f1d4d4","#f1f6f9","#eeeeee","#f1f1e8"]));colors.push(color.r,color.g,color.b);phases.push(rand(1000));phaseSecondaries.push(rand(1000));sizes.push(rand(4,2));}geometry.setAttribute("position",newTHREE.Float32BufferAttribute(positions,3));geometry.setAttribute("color",newTHREE.Float32BufferAttribute(colors,3));geometry.setAttribute("size",newTHREE.Float32BufferAttribute(sizes,1));geometry.setAttribute("phase",newTHREE.Float32BufferAttribute(phases,1));geometry.setAttribute("phaseSecondary",newTHREE.Float32BufferAttribute(phaseSecondaries,1));constmesh=newTHREE.Points(geometry,shaderMaterial);scene.add(mesh);}constsprites=["https://assets.codepen.io/3685267/snowflake1.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(scene,uniforms,totalPoints){constvertexShader=`attributefloatsize;attributevec3customColor;varyingvec3vColor;voidmain(){vColor=customColor;vec4mvPosition=modelViewMatrix*vec4(position,1.0);gl_PointSize=size*(300.0/-mvPosition.z);gl_Position=projectionMatrix*mvPosition;}`;constfragmentShader=`uniformvec3color;uniformsampler2DpointTexture;varyingvec3vColor;voidmain(){gl_FragColor=vec4(vColor,1.0);gl_FragColor=gl_FragColor*texture2D(pointTexture,gl_PointCoord);}`;constshaderMaterial=newTHREE.ShaderMaterial({uniforms:{...uniforms,pointTexture:{value:newTHREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending:THREE.AdditiveBlending,depthTest:false,transparent:true,vertexColors:true});constgeometry=newTHREE.BufferGeometry();constpositions=[];constcolors=[];constsizes=[];con

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论