论坛 › 音乐沙龙 › 《月之诗》（学习黑黑《Star Sky》代码）

红影 发表于 2025-6-26 23:07

《月之诗》（学习黑黑《Star Sky》代码）

<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://pic1.imgdb.cn/item/685d59e758cb8da5c87417b2.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
    #btnFs { bottom: 20px; color: #458aed; }
    #player { position: absolute; left: -1000px; }
    #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
   #pic3 { position: absolute;top: 380px; left: 550px; width: 140px; height: 200px; animation: wenzi 0.9s linear infinite alternate var(--state); }
        @keyframes wenzi { from {transform: scale(1.0);} to { transform: scale(1.1); }}
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=457656182" autoplay loop></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/34/video6364e286555a3.mp4" autoplay loop muted></video>
   <img id="pic3" src="https://pic1.imgdb.cn/item/685fa0ab58cb8da5c87a5e58.png" alt="" />
    <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?v=1.0';
    import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    basic3(papa, aud.paused);
    // 纹理
    const texture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/685d57d058cb8da5c8741699.jpg');
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.x = 10;
    texture.repeat.y = 1;

    //管道
    const group = new THREE.Group();
    const path = new THREE.QuadraticBezierCurve3(
      new THREE.Vector3( -1, -2, 0 ),
      new THREE.Vector3( -2.2, -2.2, 0 ),
      new THREE.Vector3( 1, 1, 0 )
    );
    const geometry = new THREE.TubeGeometry(path, 32, 0.05, 32, false);
    const material = new THREE.MeshBasicMaterial({ color: 0x458aed, map: texture });
    const tt = 12;
    for (let i = 0; i < tt; i ++) {
      const mesh = new THREE.Mesh(geometry, material);
      mesh.rotateY(THREE.MathUtils.degToRad(180 / tt * i));
      group.add(mesh);
    }
    group.position.set(0, 0.4, 0);
    group.rotateX(-0.15);
    scene.add(group);

    // 动画
    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      texture.offset.x += delta;
      renderer.render(scene, camera);
    };

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

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

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

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

红影 发表于 2025-6-26 23:09

乱调一气，也弄个纹理流动，主要意思意思，省得不够意思@马黑黑 {:4_189:}

梦江南 发表于 2025-6-27 08:35

这个背景和流动的像八爪的东西色彩很般配。赞哦！{:4_187:}

梦江南 发表于 2025-6-27 08:38

八爪像手一样正好托着月亮，很有意境。{:4_199:}

杨帆 发表于 2025-6-27 11:32

奇妙的构思，奇特的效果，谢谢影子精彩分享{:4_187:}

马黑黑 发表于 2025-6-27 13:27

红影 发表于 2025-6-26 23:09
乱调一气，也弄个纹理流动，主要意思意思，省得不够意思@马黑黑

设计巧妙，效果惊艳，点了64个赞

樵歌 发表于 2025-6-27 18:45

如果马大师的是太空大妖，师妹这个是地狱级大妖{:4_173:}

樵歌 发表于 2025-6-27 18:53

幽深、恐怖中还留下一丝光明（月亮），形成奇幻、反衬的视觉冲击！

红影 发表于 2025-6-27 20:28

梦江南 发表于 2025-6-27 08:35
这个背景和流动的像八爪的东西色彩很般配。赞哦！

这个调完正好上部对着月亮了，也满好玩的{:4_173:}

红影 发表于 2025-6-27 20:34

梦江南 发表于 2025-6-27 08:38
八爪像手一样正好托着月亮，很有意境。

所以我前面一直想找一个吸收日月精华的曲子，没找到，就用了这个名字的曲子{:4_173:}

红影 发表于 2025-6-27 20:35

杨帆 发表于 2025-6-27 11:32
奇妙的构思，奇特的效果，谢谢影子精彩分享

算不上自己的构思，只能是调成什么就是什么呢{:4_173:}

红影 发表于 2025-6-27 20:37

马黑黑 发表于 2025-6-27 13:27
设计巧妙，效果惊艳，点了64个赞

谢谢黑黑，本来想把纹理流动图下面弄个妖物藏着，假装在窃取月亮的精华，感觉有点吓人，就没弄{:4_170:}

红影 发表于 2025-6-27 20:38

樵歌 发表于 2025-6-27 18:45
如果马大师的是太空大妖，师妹这个是地狱级大妖

哈哈，反正都带着妖气，简直快妖气冲天了{:4_189:}

马黑黑 发表于 2025-6-27 20:38

红影 发表于 2025-6-27 20:37
谢谢黑黑，本来想把纹理流动图下面弄个妖物藏着，假装在窃取月亮的精华，感觉有点吓人，就没弄

吓人没啥，好多人是吓大毕业的

红影 发表于 2025-6-27 20:39

樵歌 发表于 2025-6-27 18:53
幽深、恐怖中还留下一丝光明（月亮），形成奇幻、反衬的视觉冲击！

这个在吸收日月精华呢，应该图案下面再藏个妖怪就更完整了{:4_173:}

杨帆 发表于 2025-6-27 21:33

红影 发表于 2025-6-27 20:39
这个在吸收日月精华呢，应该图案下面再藏个妖怪就更完整了

有想法很好，付诸行动呀{:4_171:}

红影 发表于 2025-6-27 21:48

马黑黑 发表于 2025-6-27 20:38
吓人没啥，好多人是吓大毕业的

其实也没必要弄得太奇葩，意思意思就行了啊{:4_173:}

红影 发表于 2025-6-27 21:49

杨帆 发表于 2025-6-27 21:33
有想法很好，付诸行动呀

我还没去找妖怪图图呢，哈哈，那我就想法子弄个{:4_173:}

杨帆 发表于 2025-6-27 22:00

红影 发表于 2025-6-27 21:49
我还没去找妖怪图图呢，哈哈，那我就想法子弄个

好，加油{:4_199:}

红影 发表于 2025-6-27 22:18

杨帆 发表于 2025-6-27 22:00
好，加油

嗯嗯，等弄好了再看看效果如何{:4_173:}

查看完整版本: 《月之诗》（学习黑黑《Star Sky》代码）