红影 发表于 2025-6-28 23:10

《以牙还牙》（学习黑黑《重返袖珍时光·如期而至》）

<style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/w4/xu.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; overflow: hidden; }
    #btnFs { bottom: 30px; color: #eee; }
    #vid {position: absolute; width: 100%; height: 110%; bottom: 0; object-fit: cover; opacity: 1; pointer-events: none; }
    #player { position: absolute; left: -1000px; }
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/22/5b5813de3541d.mp4" autoplay loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1376333204" autoplay loop></audio>
    <div id="player"></div>
</div>

<script type="module">
    import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
    import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
    import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

    basic3(papa);

    const group = new THREE.Group();
    group.position.set(0, 0, -2);
    const spriteTexture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/685ffb8c58cb8da5c87ba345.png');
    spriteTexture.colorSpace = THREE.SRGBColorSpace;
    for (let i = 0; i < 160; i ++) {
      const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xffff00, map: spriteTexture }));
      sprite.position.set(
            THREE.MathUtils.randFloatSpread(20),
            THREE.MathUtils.randFloatSpread(6),
            THREE.MathUtils.randFloatSpread(10)
      );
      sprite.scale.set(0.5, 0.5, 0.5);
      
      group.add(sprite);
    }

    const setting = {
      font: `bold 60px 'KaiTi', sans-serif`,
      fill: true,
      fillColor: '#1a0409',
      bg: 'rgba(66,43,16, 0.6)',
      padding: { x: 5, y: 65 },
      shadowX: 3,
      shadowY: 3
    };
    const canv = textcanvas('%以牙还牙%', setting);
    const texture = new THREE.CanvasTexture(canv);

    const mesh = new THREE.Mesh(
      new THREE.SphereGeometry(),
      new THREE.MeshBasicMaterial({ map: texture })
    );
    mesh.position.set(0, 0.8, -0.8);

    scene.add(group, mesh);

    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      mesh.rotation.y -= delta;
      group.rotation.y -= delta / 10;
      renderer.render(scene, camera);
    };

    papa.onclick = (e) => {if (click3(mesh, e)) player.click()};

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

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

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

红影 发表于 2025-6-28 23:15

人若犯我我必犯人，这是百分百的。{:4_178:}

小文 发表于 2025-6-28 23:42

威武！{:4_191:}{:4_204:}

小文 发表于 2025-6-28 23:45

恩师，周日快乐！早点休息！{:4_204:}{:4_190:}

梦江南 发表于 2025-6-29 09:24

人若犯我我必犯人，有气派！{:4_178:}

梦江南 发表于 2025-6-29 09:26

这么多的导弹，来犯者有来无回！{:4_187:}

梦油 发表于 2025-6-29 09:32

画面设计得真有气势。

红影 发表于 2025-6-29 11:22

这个用于目前的那个伊以战争如何@马黑黑 我把精灵的旋转拿掉了{:4_173:}

马黑黑 发表于 2025-6-29 12:07

矮油，%%双倍奉还，厉害了{:4_170:}

杨帆 发表于 2025-6-29 13:41

效果极棒！谢谢影子精彩分享{:4_204:}

红影 发表于 2025-6-29 14:35

小文 发表于 2025-6-28 23:42
威武！

谢谢小文，昨天发完帖子就下了，小文还让我早点，自己更晚呢{:4_173:}

红影 发表于 2025-6-29 14:36

小文 发表于 2025-6-28 23:45
恩师，周日快乐！早点休息！

问好小文，也祝你周日快乐{:4_187:}

红影 发表于 2025-6-29 14:37

梦江南 发表于 2025-6-29 09:24
人若犯我我必犯人，有气派！

被侵犯了就必然反击，谁怕谁啊{:4_173:}

红影 发表于 2025-6-29 14:38

梦江南 发表于 2025-6-29 09:26
这么多的导弹，来犯者有来无回！

嗯嗯，现在的战争就是相互扔弹药、派无人机之类的，就是拼钱财呢。

红影 发表于 2025-6-29 14:39

梦油 发表于 2025-6-29 09:32
画面设计得真有气势。

谢谢梦油，这就是我想象中的战争，无数的导弹被射向对方。

红影 发表于 2025-6-29 14:40

马黑黑 发表于 2025-6-29 12:07
矮油，%%双倍奉还，厉害了

这些还没发射呢，随时准备给敌人以打击{:4_173:}

红影 发表于 2025-6-29 14:40

杨帆 发表于 2025-6-29 13:41
效果极棒！谢谢影子精彩分享

多谢杨帆鼓励，下午好{:4_187:}

小文 发表于 2025-6-29 16:02

红影 发表于 2025-6-29 14:36
问好小文，也祝你周日快乐

恩师好，下午好！{:4_204:}

梦油 发表于 2025-6-29 16:57

红影 发表于 2025-6-29 14:39
谢谢梦油，这就是我想象中的战争，无数的导弹被射向对方。

真可怕！

马黑黑 发表于 2025-6-29 17:29

红影 发表于 2025-6-29 14:40
这些还没发射呢，随时准备给敌人以打击

酱紫太好了
页: [1] 2 3
查看完整版本: 《以牙还牙》（学习黑黑《重返袖珍时光·如期而至》）