朵拉 发表于 2025-5-7 20:58

赛勒斯的爱（学习马黑黑世界的尽头效果）

<style>
        #papa { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/681b543458cb8da5c8e3c76d.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: 20%; 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: gray; }
        #btnFs:hover { color: gold; }
        @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <audio id="aud" src="https://cccimg.com/view.php/5a0c10c07746640fd4196f5f3c202525.mp3" autoplay="" loop=""></audio>
       
        <img id="player" src="https://638183.freep.cn/638183/small/f002.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-7 20:58

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

红影 发表于 2025-5-7 22:21

漂亮，欣赏朵宝好帖{:4_187:}

冬天的雨 发表于 2025-5-7 23:13

是不是图片背景很大，我看不见图{:4_198:}

冬天的雨 发表于 2025-5-7 23:48

刷新几次图出来了，小朵拉制作真漂亮{:4_199:}

梦江南 发表于 2025-5-8 09:17

漂亮，欣赏学习。{:4_199:}

小辣椒 发表于 2025-5-8 21:35

朵拉速度的，昨天就完成了这个作业，{:4_178:}

小辣椒 发表于 2025-5-8 21:35

欣赏朵拉精彩的制作

世外桃源 发表于 2025-5-9 13:14

图片看不见

世外桃源 发表于 2025-5-9 13:14

分享辛苦了
页: [1]
查看完整版本: 赛勒斯的爱（学习马黑黑世界的尽头效果）