2401_88122666: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣诞树</title> <link rel="stylesheet" href="/ajax/libs/normalize/5.0.0/"> <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 { background-color: #161616; border-radius: 10px; color: #c5a880; border: 1px solid #c5a880; 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: #a07676; font-weight: bold; font-size: 1.25rem; margin-bottom: 16px; } .text-loading { font-size: 2rem; } </style> <script> = || function (t) { }; </script> <script> if ((/type=embed/gi)) { ("resize", "*"); } </script> </head> <body translate="no"> <script src="/npm/three@0.115.0/build/"></script> <script src="/npm/three@0.115.0/examples/js/postprocessing/"></script> <script src="/npm/three@0.115.0/examples/js/postprocessing/"></script> <script src="/npm/three@0.115.0/examples/js/postprocessing/"></script> <script src="/npm/three@0.115.0/examples/js/shaders/"></script> <script src="/npm/three@0.115.0/examples/js/shaders/"></script> <script src="/npm/three@0.115.0/examples/js/postprocessing/"></script> <div > <ul> <li class="title">请选择音乐</li> <li> <button class="btn" type="button"> Snowflakes Falling Down by Simon Panrucker </button> </li> <li><button class="btn" type="button">This Christmas by Dott</button></li> <li><button class="btn" type="button">No room at the inn by TRG Banks</button></li> <li><button class="btn" type="button">Jingle Bell Swing by Mark Smeby</button></li> <li class="separator">或者</li> <li> <input type="file" hidden /> <label for="upload">Upload File</label> </li> </ul> </div> <script > 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 + () * (max - min); const randInt = (max, min = 0) => (min + () * (max - min)); const randChoise = arr => arr[randInt()]; 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 (); const audio = new (listener); ("input").addEventListener("change", uploadAudio, false); const buttons = (".btn"); ((button, index) => ("click", () => loadAudio(index))); function init() { const overlay = ("overlay"); (); scene = new (); renderer = new ({ antialias: true }); (); (, ); (); camera = new ( 60, / , 1, 1000); (-0.09397456774197047, -2.5597086635726947, 24.420789670889008); (0.10443543723052419, -0.003827152981119352, 0.0004011488708739715); const format = .isWebGL2 ? : ; = { value: new (, 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 (scene, camera); const bloomPass = new ( new THREE.Vector2(, ), 1.5, 0.4, 0.85); = ; = ; = ; composer = new (renderer); (renderScene); (bloomPass); addListners(camera, renderer, composer); animate(); } function animate(time) { (); = true; step = (step + 1) % 1000; = time; = step; (); requestAnimationFrame(animate); } function loadAudio(i) { ("overlay").innerHTML = '<div class="text-loading">正在下载音乐，请稍等...</div>'; const files = [ "/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"]; const file = files[i]; const loader = new (); (file, function (buffer) { (buffer); (); analyser = new (audio, fftSize); init(); }); } function uploadAudio(event) { ("overlay").innerHTML = '<div class="text-loading">请稍等...</div>'; const files = ; const reader = new FileReader(); = function (file) { var arrayBuffer = ; (arrayBuffer, function (audioBuffer) { (audioBuffer); (); analyser = new (audio, fftSize); init(); }); }; (files[0]); } function addTree(scene, uniforms, totalPoints, treePosition) { const vertexShader = ` attribute float mIndex; varying vec3 vColor; varying float opacity; uniform sampler2D tAudioData; float norm(float value, float min, float max ){ return (value - min) / (max - min); } float lerp(float norm, float min, float max){ return (max - min) * norm + min; } float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ return lerp(norm(value, sourceMin, sourceMax), destMin, destMax); } void main() { vColor = color; vec3 p = position; vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r; float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 ); float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0); opacity = map( , -200.0, 15.0, 0.0, 1.0); gl_PointSize = sizeMapped * ( 100.0 / - ); gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` varying vec3 vColor; varying float opacity; uniform sampler2D pointTexture; void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; const shaderMaterial = new ({ uniforms: { ...uniforms, pointTexture: { value: new ().load(`/3685267/`) } }, vertexShader, fragmentShader, blending: , depthTest: false, transparent: true, vertexColors: true }); const geometry = new (); const positions = []; const colors = []; const sizes = []; const phases = []; const mIndexs = []; const color = new (); for (let i = 0; i < totalPoints; i++) { const t = (); const y = map(t, 0, 1, -8, 10); const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2); const [z, x] = polar(ang, map(t, 0, 1, 5, 0)); const modifier = map(t, 0, 1, 1, 0); (x + rand(-0.3 * modifier, 0.3 * modifier)); (y + rand(-0.3 * modifier, 0.3 * modifier)); (z + rand(-0.3 * modifier, 0.3 * modifier)); (map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5); (, , ); (rand(1000)); (1); const mIndex = map(i, 0, totalPoints, 1.0, 0.0); (mIndex); } ( "position", new THREE.Float32BufferAttribute(positions, 3).setUsage( )); ("color", new THREE.Float32BufferAttribute(colors, 3)); ("size", new THREE.Float32BufferAttribute(sizes, 1)); ("phase", new THREE.Float32BufferAttribute(phases, 1)); ("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1)); const tree = new (geometry, shaderMaterial); const [px, py, pz] = treePosition; = px; = py; = pz; (tree); } function addSnow(scene, uniforms) { const vertexShader = ` attribute float size; attribute float phase; attribute float phaseSecondary; varying vec3 vColor; varying float opacity; uniform float time; uniform float step; float norm(float value, float min, float max ){ return (value - min) / (max - min); } float lerp(float norm, float min, float max){ return (max - min) * norm + min; } float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ return lerp(norm(value, sourceMin, sourceMax), destMin, destMax); } void main() { float t = time* 0.0006; vColor = color; vec3 p = position; = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0); += sin(t+phase); += sin(t+phaseSecondary); opacity = map(, -150.0, 15.0, 0.0, 1.0); vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); gl_PointSize = size * ( 100.0 / - ); gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` uniform sampler2D pointTexture; varying vec3 vColor; varying float opacity; void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; function createSnowSet(sprite) { const totalPoints = 300; const shaderMaterial = new ({ uniforms: { ...uniforms, pointTexture: { value: new ().load(sprite) } }, vertexShader, fragmentShader, blending: , depthTest: false, transparent: true, vertexColors: true }); const geometry = new (); const positions = []; const colors = []; const sizes = []; const phases = []; const phaseSecondaries = []; const color = new (); for (let i = 0; i < totalPoints; i++) { const [x, y, z] = [rand(25, -25), 0, rand(15, -150)]; (x); (y); (z); (randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"])); (, , ); (rand(1000)); (rand(1000)); (rand(4, 2)); } ( "position", new THREE.Float32BufferAttribute(positions, 3)); ("color", new THREE.Float32BufferAttribute(colors, 3)); ("size", new THREE.Float32BufferAttribute(sizes, 1)); ("phase", new THREE.Float32BufferAttribute(phases, 1)); ( "phaseSecondary", new THREE.Float32BufferAttribute(phaseSecondaries, 1)); const mesh = new (geometry, shaderMaterial); (mesh); } const sprites = [ "/3685267/", "/3685267/", "/3685267/", "/3685267/", "/3685267/"]; (sprite => { createSnowSet(sprite); }); } function addPlane(scene, uniforms, totalPoints) { const vertexShader = ` attribute float size; attribute vec3 customColor; varying vec3 vColor; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / - ); gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` uniform vec3 color; uniform sampler2D pointTexture; varying vec3 vColor; void main() { gl_FragColor = vec4( vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; const shaderMaterial = new ({ uniforms: { ...uniforms, pointTexture: { value: new ().load(`/3685267/`) } }, vertexShader, fragmentShader, blending: , depthTest: false, transparent: true, vertexColors: true }); const geometry = new (); const positions = []; const colors = []; const sizes = []; const color = new (); for (let i = 0; i < totalPoints; i++) { const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)]; (x); (y); (z); (randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"])); (, , ); (1); } ( "position", new THREE.Float32BufferAttribute(positions, 3).setUsage( )); ( "customColor", new THREE.Float32BufferAttribute(colors, 3)); ("size", new THREE.Float32BufferAttribute(sizes, 1)); const plane = new (geometry, shaderMaterial); = -8; (plane); } function addListners(camera, renderer, composer) { ("keydown", e => { const { x, y, z } = ; (`(${x},${y},${z})`); const { x: a, y: b, z: c } = ; (`(${a},${b},${c})`); }); ( "resize", () => { const width = ; const height = ; = width / height; (); (width, height); (width, height); }, false); } </script> </body> </html>
C语言分段函数程序（示例）
HTML圣诞树代码(动态音效)