朵拉 发表于 2025-6-10 22:00

情没有对错（学习马黑黑Stand With Me效果）

<style>
      #tz { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: #eee url('https://cccimg.com/view.php/161e3feb8c7486443dc2e54a61fe4301.png') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
      #btnFs { bottom: 20px; color: #eee; text-align: center; }
      #btnFs:hover { color: red; }
      #player { position: absolute; left: -1000px; }
</style>

<div id="tz">
      <audio id="aud" src="https://cccimg.com/view.php/77b2a28ee1759b67a013ee1714baa593.mp3" autoplay="" loop=""></audio>
      
      <div id="player" title="播放/暂停"></div>
</div>

<script type="module">
      import * as THREE from 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, tz.offsetWidth/tz.offsetHeight, 0.1, 1000);
      camera.position.z = 10;
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setClearAlpha(0.0);
      renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      const clock = new THREE.Clock();
      tz.appendChild(renderer.domElement);

      const texture1 = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/texture/wdrop.webp');
      const texture2 = new THREE.TextureLoader().load('https://638183.freep.cn/638183/t23/btn/f5.png');

      const mesh = new THREE.Mesh(
                new THREE.SphereGeometry(1, 64, 64),
                new THREE.MeshBasicMaterial({ map: texture1 })
      );
      mesh.position.set(0.55, 2.15, 0)
      scene.add(mesh);

      const group = new THREE.Group();
      for (let i = 0; i < 300; i++) {
                const sprite = new THREE.Sprite(
                        new THREE.SpriteMaterial({ color: Math.random() * 0xff0000, map: texture2 })
                );
                sprite.scale.set(0.5, 0.5, 0.5);
                sprite.position.set(100 * (Math.random() - 0.5), Math.random() * 20 - 10, Math.random() * 10 - 5);
                group.add(sprite);
      }
      scene.add(group);

      const isMess = (event) => {
                const raycaster = new THREE.Raycaster();
                const pointer = new THREE.Vector2();
                let intersects = [];
                pointer.x = (event.offsetX / tz.offsetWidth) * 2 - 1;
                pointer.y = -(event.offsetY / tz.offsetHeight) * 2 + 1;
                raycaster.setFromCamera(pointer, camera);
                intersects = raycaster.intersectObjects(, true);
                return intersects.length > 0;
      }

      tz.onmousemove = (e) => {
                isMess(e)
                        ? (tz.style.cursor = 'pointer', tz.title = '播放/暂停 Alt+X')
                        : (tz.style.cursor = 'default', tz.title = '');
      };

      tz.onclick = (e) => {
                if (isMess(e)) player.click();
      };

      const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mesh.rotation.x += delta;
                mesh.rotation.y += delta;
                group.children.forEach(sprite => {
                        sprite.position.x += delta / 10;
                        sprite.position.y -= delta;
                        sprite.material.rotation -= delta;
                        if (sprite.position.y < -10) {
                              sprite.position.set(Math.random() * 10 - 6, Math.random() * 10 + 10, Math.random() * 10 - 5);
                              sprite.material.color.set(Math.random() * 0xff0000);
                        }
                });
                renderer.render(scene, camera);
      };

      window.onresize = () => {
                camera.aspect = tz.offsetWidth / tz.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      };

      document.onvisibilitychange = () => {
                if (aud.paused) return;
                document.visibilityState === 'hidden' ? clock.stop() : clock.start();
      };

      aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

      animate();
      FS(tz, player);
</script>

朵拉 发表于 2025-6-10 22:01

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

樵歌 发表于 2025-6-11 09:22

优秀99分{:4_187:}

红影 发表于 2025-6-11 10:26

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 情没有对错（学习马黑黑Stand With Me效果）