圣诞树网页版

以你之姓@ 2024-03-31 14:21 225阅读 0赞

![50c34c4db0344919a6d03cb339b78615.png][]

![fb0090b0e73e40efa2520c9ea4f79f5e.png][]

<!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
     
        <title>圣诞树</title>
     
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/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: 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>
            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="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
     
        <div id="overlay">
            <ul>
                <li class="title">请选择音乐</li>
                <li>
                    <button class="btn" id="btnA" type="button">
                        Snowflakes Falling Down by Simon Panrucker
                    </button>
                </li>
                <li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
                <li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
                <li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
                <li class="separator">或者</li>
                <li>
                    <input type="file" id="upload" hidden />
                    <label for="upload">Upload File</label>
                </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();
     
                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>';
                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();
                    analyser = new THREE.AudioAnalyser(audio, fftSize);
                    init();
                });
     
     
     
     
            }
     
     
            function uploadAudio(event) {
                document.getElementById("overlay").innerHTML =
                    '<div class="text-loading">请稍等...</div>';
                const files = event.target.files;
                const reader = new FileReader();
     
                reader.onload = function (file) {
                    var arrayBuffer = file.target.result;
     
                    listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
                        audio.setBuffer(audioBuffer);
                        audio.play();
                        analyser = new THREE.AudioAnalyser(audio, fftSize);
                        init();
                    });
                };
     
                reader.readAsArrayBuffer(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(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
           gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
           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 THREE.ShaderMaterial({
                    uniforms: {
                        ...uniforms,
                        pointTexture: {
                            value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
                        }
                    },
     
     
                    vertexShader,
                    fragmentShader,
                    blending: THREE.AdditiveBlending,
                    depthTest: false,
                    transparent: true,
                    vertexColors: true
                });
     
     
                const geometry = new THREE.BufferGeometry();
                const positions = [];
                const colors = [];
                const sizes = [];
                const phases = [];
                const mIndexs = [];
     
                const color = new THREE.Color();
     
                for (let i = 0; i < totalPoints; i++) {
                    const t = Math.random();
                    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);
                    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);
                    const mIndex = map(i, 0, totalPoints, 1.0, 0.0);
                    mIndexs.push(mIndex);
                }
     
                geometry.setAttribute(
                    "position",
                    new THREE.Float32BufferAttribute(positions, 3).setUsage(
                        THREE.DynamicDrawUsage));
     
     
                geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
                geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
                geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
                geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));
     
                const tree = new THREE.Points(geometry, shaderMaterial);
     
                const [px, py, pz] = treePosition;
     
                tree.position.x = px;
                tree.position.y = py;
                tree.position.z = pz;
     
                scene.add(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;
           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);
           vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
           gl_PointSize = size * ( 100.0 / -mvPosition.z );
           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 THREE.ShaderMaterial({
                        uniforms: {
                            ...uniforms,
                            pointTexture: {
                                value: new THREE.TextureLoader().load(sprite)
                            }
                        },
     
     
                        vertexShader,
                        fragmentShader,
                        blending: THREE.AdditiveBlending,
                        depthTest: false,
                        transparent: true,
                        vertexColors: true
                    });
     
     
                    const geometry = new THREE.BufferGeometry();
                    const positions = [];
                    const colors = [];
                    const sizes = [];
                    const phases = [];
                    const phaseSecondaries = [];
     
                    const color = new THREE.Color();
     
                    for (let i = 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",
                        new THREE.Float32BufferAttribute(positions, 3));
     
                    geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
                    geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
                    geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
                    geometry.setAttribute(
                        "phaseSecondary",
                        new THREE.Float32BufferAttribute(phaseSecondaries, 1));
     
     
                    const mesh = new THREE.Points(geometry, shaderMaterial);
     
                    scene.add(mesh);
                }
                const sprites = [
                    "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);
                });
            }
     
            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 / -mvPosition.z );
           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 THREE.ShaderMaterial({
                    uniforms: {
                        ...uniforms,
                        pointTexture: {
                            value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
                        }
                    },
     
     
                    vertexShader,
                    fragmentShader,
                    blending: THREE.AdditiveBlending,
                    depthTest: false,
                    transparent: true,
                    vertexColors: true
                });
     
     
                const geometry = new THREE.BufferGeometry();
                const positions = [];
                const colors = [];
                const sizes = [];
     
                const color = new THREE.Color();
     
                for (let i = 0; i < totalPoints; i++) {
                    const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];
                    positions.push(x);
                    positions.push(y);
                    positions.push(z);
     
                    color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));
     
                    colors.push(color.r, color.g, color.b);
                    sizes.push(1);
                }
     
                geometry.setAttribute(
                    "position",
                    new THREE.Float32BufferAttribute(positions, 3).setUsage(
                        THREE.DynamicDrawUsage));
     
     
                geometry.setAttribute(
                    "customColor",
                    new THREE.Float32BufferAttribute(colors, 3));
     
                geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
     
                const plane = new THREE.Points(geometry, shaderMaterial);
     
                plane.position.y = -8;
                scene.add(plane);
            }
     
            function addListners(camera, renderer, composer) {
                document.addEventListener("keydown", e => {
                    const { x, y, z } = camera.position;
                    console.log(`camera.position.set(${x},${y},${z})`);
                    const { x: a, y: b, z: c } = camera.rotation;
                    console.log(`camera.rotation.set(${a},${b},${c})`);
                });
     
                window.addEventListener(
                    "resize",
                    () => {
                        const width = window.innerWidth;
                        const height = window.innerHeight;
     
                        camera.aspect = width / height;
                        camera.updateProjectionMatrix();
     
                        renderer.setSize(width, height);
                        composer.setSize(width, height);
                    },
                    false);
     
            }
        </script>
     
    </body>
     
    </html>

<!DOCTYPE HEML PUBLIC>
    <html>
        <head>
        <meta charset="utf-8">
        <title>
            From ZXW-NUDT
        </title>
            <style>
                body{text-align:center}
                html, body
                {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    border: 0;
                }
                
                div
                {
                    margin: 0;
                    padding: 0;
                    border: 0;
                }
    
                .nav
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 27px;
                    background-color: white;
                    color: black;
                    text-align: center;
                    line-height: 25px;
                }
    
                a
                {
                    color: black;
                    text-decoration: none;
                    border-bottom: 1px dashed black;
                }
    
                a:hover
                {
                    border-bottom: 1px solid red;
                }
    
                .previous
                {
                    float: left;
                    margin-left: 10px;
                }
    
                .next
                {
                    float: right;
                    margin-right: 10px;
                }
    
                .green
                {
                    color: green;
                }
    
                .red
                {
                    color: red;
                }
    
                textarea
                {
                    width: 100%;
                    height: 100%;
                    border: 0;                
                    padding: 0;                
                    margin: 0;                
                    padding-bottom: 20px;              
                }
    
                .block-outer            
                {                
                    float: left;                
                    width: 22%;                
                    height: 100%;                
                    padding: 5px;                
                    border-left: 1px solid black;                
                    margin: 30px 3px 3px 3px;                
                }
    
                .block-inner            
                {                
                    height: 68%;                
                }
    
                .one
                {                
                    border: 0;                
                }
            </style>
        </head>
    <body marginwidth="0" marginheight="0">
        <canvas id="c" height="356" width="446">
        <script>
            var collapsed = true;
            function toggle()
            {
                var fs = top.document.getElementsByTagName('frameset')[0];
                var f = fs.getElementsByTagName('frame');
                if (collapsed)
                {
                    fs.rows = '250px,*';
                    fs.noResize = false;
                    f[0].noResize = false;
                    f[1].noResize = false;
                }
    
                else
                {
                    fs.rows = '30px,*';
                    fs.noResize = true;
                    f[0].noResize = true;
                    f[1].noResize = true;
                }
                collapsed = !collapsed;
            }
        </script>
    
        <script>
            var b = document.body;
            var c = document.getElementsByTagName('canvas')[0];
            var a = c.getContext('2d');
            document.body.clientWidth;
        </script>
    
        <script>
            M=Math;
            Q=M.random;J=[];
            U=16;
            T=M.sin;
            E=M.sqrt;
            for(O=k=0;x=z=j=i=k<200;)
            with(M[k]=k?c.cloneNode(0):c)
            {    
                width=height=k?32:W=446;
                with(getContext('2d'))
                if(k>10|!k)
    
                for(
                font='60px Impact',
                V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
                V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)
    
                beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
    
                else for(;
                x=T(i),        
                y=Q()*2-1,        
                D=x*x+y*y,        
                B=E(D-x/.9-1.5*y+1),        
                R=67*(B+1)*(L=k/9+.8)>>1,        
                i++<W;        
                )
    
                if(D<1)    
                beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),        
                moveTo(U+x*8,U+y*8),        
                lineTo(U+x*U,U+y*U),        
                stroke();
    
                for(        
                y=H=k+E(k++)*25,        
                R=Q()*W;        
                P=3,j<H;)    
                J[O++]=[
                    x+=T(R)*P+Q()*6-3,y+=Q()*U-8,
                    z+=T(R-11)*P+Q()*6-3,
                    j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]
            }
    
            setInterval(function G(m,l)
            {    
                A=T(D-11);    
                if(l)
    
                return(        
                m[2]-l[2])*A+(l[0]-m[0])*T(D);        
                a.clearRect(0,0,W,W);        
                J.sort(G);
    
                for(
                i=0;
                L=J[i++];
                a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))    
                {
                    if(i==2e3)
                    a.fillText
                    ('Happy Christmas!',U,345);
    
                    if(!(i%7))        
                    a.drawImage(M[13],
                    ((157*(i*i)+T(D*5+i*i)*5)%W)>>0,
                    ((113*i+(D*i)/60)%(290+i/99))>>0);
                }    
                D+=.02
            },1)
        </script>
    </body>
    </html>

[50c34c4db0344919a6d03cb339b78615.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0ce9ef2984224d7e8e8fdab496135da9.png
[fb0090b0e73e40efa2520c9ea4f79f5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b227b535a0934a0e8937ebb37044045b.png