马黑黑 发表于 2025-6-25 12:38

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://638183.freep.cn/638183/t24/w4/starsky.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
        #btnFs { bottom: 30px; color: #eee; }
        #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; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1432855328" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
        <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://638183.freep.cn/638183/small/texture/green.png');
        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, 0, 0 ),
                new THREE.Vector3( -2.6, -1.2, 0 ),
                new THREE.Vector3( 1, 0, 0 )
        );
        const geometry = new THREE.TubeGeometry(path, 32, 0.05, 32, false);
        const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture });
        const tt = 9;
        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, -1.2, 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-25 12:38

帖子代码

<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/starsky.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
    #btnFs { bottom: 30px; color: #eee; }
    #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; }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1432855328" autoplay loop></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/01/15/25/07/video672482533234e.mp4" autoplay loop muted></video>
    <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://638183.freep.cn/638183/small/texture/green.png');
    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, 0, 0 ),
      new THREE.Vector3( -2.6, -1.2, 0 ),
      new THREE.Vector3( 1, 0, 0 )
    );
    const geometry = new THREE.TubeGeometry(path, 32, 0.05, 32, false);
    const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture });
    const tt = 9;
    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, -1.2, 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-25 13:45

哈哈，第一眼看到，好像一只绿色的大蜘蛛{:4_173:}

红影 发表于 2025-6-25 13:51

原来这个是贴图的，不是画的颜色。又是表面图案的流动带来的动态效果呢{:4_187:}

红影 发表于 2025-6-25 13:54

管道还能出来这个形状啊，还把它组合起来了。
这个路径就是二次贝塞尔路径吧，只要调整其中的数值，就有这么大的变化呢。{:4_187:}

红影 发表于 2025-6-25 13:55

看来这个纹理流动很有作用啊，可以创造出很多奇妙的效果呢{:4_187:}

杨帆 发表于 2025-6-25 18:48

奇妙的效果，经典的示范，谢谢马老师精彩分享{:4_191:}

马黑黑 发表于 2025-6-25 19:51

杨帆 发表于 2025-6-25 18:48
奇妙的效果，经典的示范，谢谢马老师精彩分享

{:4_176:}

马黑黑 发表于 2025-6-25 19:51

红影 发表于 2025-6-25 13:55
看来这个纹理流动很有作用啊，可以创造出很多奇妙的效果呢

{:4_181:}

马黑黑 发表于 2025-6-25 19:52

红影 发表于 2025-6-25 13:54
管道还能出来这个形状啊，还把它组合起来了。
这个路径就是二次贝塞尔路径吧，只要调整其中的数值，就有这 ...

多个二次贝塞尔曲线管道在原地旋转

马黑黑 发表于 2025-6-25 19:53

红影 发表于 2025-6-25 13:51
原来这个是贴图的，不是画的颜色。又是表面图案的流动带来的动态效果呢

也是画出来的，保存为图片。函数请参阅：

http://mhh.52qingyin.cn/xdiary/?year=2025&idx=16

马黑黑 发表于 2025-6-25 19:54

红影 发表于 2025-6-25 13:45
哈哈，第一眼看到，好像一只绿色的大蜘蛛

做好后俺自己也觉得惊讶

樵歌 发表于 2025-6-25 21:00

星空里有一只大妖{:4_189:}

红影 发表于 2025-6-25 21:36

马黑黑 发表于 2025-6-25 19:51


黑黑已经带来好几个效果了，都很令人惊叹。

红影 发表于 2025-6-25 21:37

马黑黑 发表于 2025-6-25 19:52
多个二次贝塞尔曲线管道在原地旋转

这个二次贝塞尔曲线管道的形状很特别呢{:4_187:}

红影 发表于 2025-6-25 21:41

马黑黑 发表于 2025-6-25 19:53
也是画出来的，保存为图片。函数请参阅：

http://mhh.52qingyin.cn/xdiary/?year=2025&idx=16

原来也是画出来的{:4_204:}

红影 发表于 2025-6-25 21:42

马黑黑 发表于 2025-6-25 19:54
做好后俺自己也觉得惊讶

嗯，做之前也不知道会出来这效果吧{:4_173:}

马黑黑 发表于 2025-6-25 22:01

红影 发表于 2025-6-25 21:42
嗯，做之前也不知道会出来这效果吧

想象着有奇特效果，但是还是没有想象得全面

马黑黑 发表于 2025-6-25 22:02

本帖最后由 马黑黑 于 2025-6-25 22:03 编辑

红影 发表于 2025-6-25 21:41
原来也是画出来的
这个小巧，1K，你用画图做的话，就比较大了

马黑黑 发表于 2025-6-25 22:03

红影 发表于 2025-6-25 21:37
这个二次贝塞尔曲线管道的形状很特别呢

三次的可以画出更妖的效果
页: [1] 2 3 4 5 6 7 8
查看完整版本: Star Sky（二胡版）