小辣椒 发表于 2025-5-8 22:46

音乐之声-SongTaste - 吉米来吧

本帖最后由 小辣椒 于 2025-5-8 22:48 编辑 <br /><br /><style>
        #papa { --state: running; margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://wj.zp68.com/lxx/yunhua/2025/05/08/bj.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 2px 2px 10px rgba(0,0,0,.65); z-index: 1; position: relative; }
        #papa canvas { display: block; position: absolute; }
        #player { position: absolute; top: 16%; width: 10%; cursor: pointer; opacity: 0.5; transition: width .75s; z-index: 9; animation: rot 10s linear infinite var(--state); }
        #player:hover { opacity: .8; width: 12%; filter: drop-shadow(0 0 30px yellow); }
        #btnFs { bottom: 20px; color: lightblue; border-color: lightblue !important; background: MidnightBlue; }
        #btnFs:hover { color: gold; }
#plane1{position: absolute;left: 60px;top: 0;width: 100px;offset-distance: 0;offset-path: path("M0 20 Q300 80, 700 350 T1300 100");animation: move 8s linear infinite;}
#plane {position: absolute;left: 60px;top: 0;width: 100px;offset-distance: 0;offset-path: path("M0 50 Q400 160, 800 450 T1300 100");animation: move 8s linear infinite;}


       @keyframes rot { to { transform: rotate(1turn); } }


      @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes move { to { offset-distance: 100%;}


</style>

<div id="papa">
<img id="plane1" src="https://wj.zp68.com/lxx/yunhua/2025/05/08/33.png" alt="" />
<img id="plane" src="https://wj.zp68.com/lxx/yunhua/2025/05/08/33.png" alt="" />

        <audio id="aud" src="https://upfile.mp3.wf/view.php/99ee15a1e2382e71c965f56cbceec92a.mp3" autoplay loop></audio>
        <img id="player" src="https://wj.zp68.com/lxx/yunhua/2025/05/08/ann.png" alt="" />
</div>

<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script-->

<script type="module">

import * as THREE from 'https://esm.sh/three';
import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';
FS(papa, player);

function createParticles(options = {}) {
        var isPaused = false;
        const config = {
                count: options.count || 3000,
                size: options.size || 0.2,
                colors: options.colors || ['purple', 'cyan', 'orange'],
                speedRange: options.speedRange ||
        };

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, papa.offsetWidth/papa.offsetHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(papa.offsetWidth, papa.offsetHeight);
        renderer.setClearAlpha(0);
        papa.appendChild(renderer.domElement);

        const geometry = new THREE.BufferGeometry();
        const positions = new Float32Array(config.count * 3);
        const velocities = new Float32Array(config.count);
        const colors = new Float32Array(config.count * 3);

        for (var i = 0; i < config.count; i++) {
                positions = (Math.random() - 0.5) * 50;
                positions = (Math.random() - 0.5) * 50;
                positions = -50 + Math.random() * 150;
                velocities = config.speedRange + Math.random() * (config.speedRange - config.speedRange);
                const color = new THREE.Color(
                        config.colors.length > 1 ?
                        config.colors :
                        '#'+(Math.random()*0xFFFFFF<<0).toString(16)
                );
                colors = color.r;
                colors = color.g;
                colors = color.b;
        }

        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        const material = new THREE.PointsMaterial({
                size: config.size,
                vertexColors: THREE.VertexColors || true,
                transparent: true,
                opacity: 0.8,
                blending: THREE.AdditiveBlending
        });

        const particles = new THREE.Points(geometry, material);
        scene.add(particles);
        camera.position.z = 50;

        const clock = new THREE.Clock();

        function animate() {
                if (isPaused) return;
                const delta = clock.getDelta();
                const positions = particles.geometry.attributes.position.array;
                const velocities = particles.geometry.attributes.velocity.array;

                for (var i = 0; i < config.count; i++) {
                        const zIdx = i * 3 + 2;
                        positions += velocities * delta * 60;
                        if (positions > 100) {
                                positions = (Math.random() - 0.5) * 50;
                                positions = (Math.random() - 0.5) * 50;
                                positions = -50 - Math.random() * 50;
                        }
                }

                particles.geometry.attributes.position.needsUpdate = true;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
        }

        animate();

        window.addEventListener('resize', () => {
                renderer.setSize(papa.offsetWidth, papa.offsetHeight);
        });

        document.addEventListener('click', () => {
                isPaused = aud.paused;
                animate();
        });
}

createParticles({
        count: 3000,
        colors: ['red', 'blue', 'green', 'yellow'],
        speedRange:
});

</script>

小辣椒 发表于 2025-5-8 22:47

{:5_152:}{:5_152:}{:5_152:}

小辣椒 发表于 2025-5-8 22:47

同一首完成{:5_149:}

liumang 发表于 2025-5-8 23:45

满天星加动感音乐{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2025-5-8 23:45

{:5_152:}{:5_152:}{:5_152:}

liumang 发表于 2025-5-8 23:45

感谢分享{:5_124:}
页: [1]
查看完整版本: 音乐之声-SongTaste - 吉米来吧