圣诞树html网页代码资源-CSDN文库

共9个文件

js：7个

html：1个

css：1个

html

需积分: 2 59 浏览量 2023-12-21 08:27:18 上传评论收藏 163KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

tree-main.zip （9个子文件）

tree-main

three.min.js 597KB

CopyShader.js 621B

RenderPass.js 2KB

UnrealBloomPass.js 12KB

LuminosityHighPassShader.js 1KB

index.html 21KB

normalize.min.css 2KB

EffectComposer.js 6KB

ShaderPass.js 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>å£è¯æ </title> <link rel="stylesheet" href="./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: 1px solid #c5a880; text-align: center; } ul { list-style-type: none; padding: 0; margin: 0; } .btn { position: relative; z-index: 1; background-color: #161616; border-radius: 20px; color: #ff7deb; border: 3px solid #ec90de; padding: 16px; width: 300px; margin-bottom: 16px; line-height: 1.5; cursor: pointer; } .separator { font-weight: bold; text-align: center; width: 300px; margin: 16px 0px; color: #a07676; } .title { color: #ffa1ec; font-weight: bold; font-size: 1.1rem; margin-bottom: 13px; } .text-loading { font-size: 2.25rem; color: #fba9fc; } canvas { position: absolute; /* å°Canvasç»å¯¹å®ä½ */ top: 0; left: 0; z-index: -1; } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <script src="./three.min.js"></script> <script src="./EffectComposer.js"></script> <script src="./RenderPass.js"></script> <script src="./ShaderPass.js"></script> <script src="./CopyShader.js"></script> <script src="./LuminosityHighPassShader.js"></script> <script src="./UnrealBloomPass.js"></script> <canvas id="particle-canvas"></canvas> <div id="overlay" style="text-align:center"> <ul > <li class="title">ðð å£è¯å¿«ä¹ ðð</li> <li class="title">â¤ ååè¯·åéæ©é³ä¹åï¼â¤</li> <li> <button class="btn" id="btnA" type="button" > Snowflakes Falling Down </button> </li> <li><button class="btn" id="btnB" type="button" >This Christmas </button></li> <li><button class="btn" id="btnC" type="button" >No room at the inn </button></li> <li><button class="btn" id="btnD" type="button" >Jingle Bell Swing </button></li> <li> <input type="file" id="upload" hidden /> </li> </ul> </div> <script id="rendered-js"> const { PI, sin, cos } = Math; const TAU = 2 * PI; const map = (value, sMin, sMax, dMin, dMax) => { return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin); }; const range = (n, m = 0) => Array(n). fill(m). map((i, j) => i + j); const rand = (max, min = 0) => min + Math.random() * (max - min); const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min)); const randChoise = arr => arr[randInt(arr.length)]; const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)]; let scene, camera, renderer, analyser; let step = 0; const uniforms = { time: { type: "f", value: 0.0 }, step: { type: "f", value: 0.0 } }; const params = { exposure: 1, bloomStrength: 0.9, bloomThreshold: 0, bloomRadius: 0.5 }; let composer; const fftSize = 2048; const totalPoints = 4000; const listener = new THREE.AudioListener(); const audio = new THREE.Audio(listener); document.querySelector("input").addEventListener("change", uploadAudio, false); const buttons = document.querySelectorAll(".btn"); buttons.forEach((button, index) => button.addEventListener("click", () => loadAudio(index))); function init() { const overlay = document.getElementById("overlay"); overlay.remove(); const canvas= document.getElementById("particle-canvas"); canvas.remove(); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera = new THREE.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); const format = renderer.capabilities.isWebGL2 ? THREE.RedFormat : THREE.LuminanceFormat; uniforms.tAudioData = { value: new THREE.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]); }); const renderScene = new THREE.RenderPass(scene, camera); const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85); bloomPass.threshold = params.bloomThreshold; bloomPass.strength = params.bloomStrength; bloomPass.radius = params.bloomRadius; composer = new THREE.EffectComposer(renderer); composer.addPass(renderScene); composer.addPass(bloomPass); addListners(camera, renderer, composer); animate(); } function animate(time) { analyser.getFrequencyData(); uniforms.tAudioData.value.needsUpdate = true; step = (step + 1) % 1000; uniforms.time.value = time; uniforms.step.value = step; composer.render(); requestAnimationFrame(animate); } function loadAudio(i) { document.getElementById("overlay").innerHTML = '<div class="text-loading" >â¤ èå¿çå¾ä¸ä¸å¦ â¤</div></n><div class="text-loading" >-------------------------</div></n><div class="text-loading" >ðµ å¸ç½®æå¾ä¸ ðµ</div>'; const files = [ "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.mp3", "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"]; const file = files[i]; const loader = new THREE.AudioLoader(); loader.load(file, function (buffer) { audio.setBuffer(buffer); audio.play();

评论收藏

内容反馈