杨帆 发表于 2025-5-19 14:42

王 妮_-《信天游》——学习马老师《three.js几何体之网格几何体WireframeGeometry》

<style>
   #tz { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: url('https://s21.ax1x.com/2024/11/12/pAcaPfg.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#player { position: absolute; width: 240px; height: 240px; cursor: pointer; background: none; }
#btnFs { bottom: 20px; color: #eee; text-align: center; }
   #btnFs:hover { color: red; }
   #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 1%, red); -webkit-mask: radial-gradient(transparent 1%, red); pointer-events: none; }
#lrc{left: 10%;top: 85%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3.2em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);z-index: 15;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
#Img{ position: absolute;mix-blend-mode: darken; left: 30%; top:1%; background: none;z-index: -1;}
</style>
<div id="tz">
      <audio id="aud" src="https://cccimg.com/view.php/e84f8bde137ff11bd03b12dd8838bc88.mp3" autoplay loop></audio>
      <video id="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1281527463.mp4" autoplay loop muted></video>
      <div id="player" title="播放/暂停"></div>
      <div id="lrc" data-lrc=""></div>
      <div id="lrcc" data-lrc=""></div>
      <img id="Img" src="https://cccimg.com/view.php/cd45d90af69ff09386f4c19dfb3650c0.gif" alt="" style="width: 605px; height: 334px;">
</div>
<script type="module">
        import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

        const scene = new THREE.Scene; // 场景
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
        camera.position.set(0, 0, 10); // 相机位置
      const clock = new THREE.Clock(); // 动画时钟

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 渲染器
        renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      tz.appendChild(renderer.domElement);


        const geometry = new THREE.SphereGeometry(); // 球体几何体
        const wireframe = new THREE.WireframeGeometry(geometry); // 球形几何体网格线化
        const ball = new THREE.LineSegments(wireframe); // 创建最终图像（线型还可选Line、LineLoop）
        ball.material.color.set(0xffcc00); // 可以设置网格线颜色
        scene.add(ball); // 图像加入到场景
       

        // 动画函数
        const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta(); // 时钟增量
                ball.rotation.x += delta / 3; // X轴旋转
                ball.rotation.y += delta / 3; // Y轴旋转
                renderer.render(scene, camera); // 渲染动画
        };

        tz.onclick = (e) => {
                if (e.target.id !== 'player') return;
                aud.paused ? clock.stop() : clock.start();
      }

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

      animate();
      FS(tz, player);
</script>
<span id="lrcStr" style="visibility: hidden;">
信天游 (Dj阿能版) - 王妮
词：刘志文
曲：解承强
大地留下我的梦
我低头 向山沟
追逐流逝的岁月
风沙茫茫满山谷
不见我的童年
我抬头 向青天
搜寻远去的从前
白云悠悠尽情地游
什么都没改变
大雁听过我的歌
小河亲过我的脸
山丹丹花开花又落
一遍又一遍
大地留下我的梦
信天游带走我的情
天上的星星一点点
思念到永远
我抬头 向青天
搜寻远去的从前
白云悠悠尽情地游
什么都没改变
大雁听过我的歌
小河亲过我的脸
山丹丹花开花又落
一遍又一遍
大地留下我的梦
信天游带走我的情
天上的星星一点点
思念到永远
天上的星星一点点
思念到永远
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

var mState = () => {
    player.style.setProperty('--state', aud.paused ? 'paused' : 'running');   
    Img.style.setProperty('opacity', aud.paused ? '0' : '.9');
};
   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

</script>



梦江南 发表于 2025-5-19 14:56

画面震撼，歌曲爆劲，非常精彩！{:4_199:}

梦江南 发表于 2025-5-19 15:00

还能一键停止，欣赏学习了！{:4_178:}

樵歌 发表于 2025-5-19 18:03

好作业！

红影 发表于 2025-5-19 19:28

很漂亮，把那个黄色的球体用到帖子里了呢{:4_187:}

红影 发表于 2025-5-19 19:31

这样的背景，好像从山洞里冲出的感觉似的{:4_173:}
这样绵延无尽的长路感觉真好，和歌曲也很相符{:4_187:}

红影 发表于 2025-5-19 19:33

欣赏杨帆好帖{:4_199:}
页: [1]
查看完整版本: 王 妮_-《信天游》——学习马老师《three.js几何体之网格几何体WireframeGeometry》