亚伦影音工作室 发表于 2025-6-6 13:38

飞天 - 凤凰传奇【控制不住】

本帖最后由 亚伦影音工作室 于 2025-6-18 09:46 编辑 <br /><br /><style>
      #tz { --state: paused; margin: 30px -300px; width: 1286px;height: 720px;background: url(https://pic1.imgdb.cn/item/683a8ce658cb8da5c81e81d3.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative; }
#dh{ width: 100%; height: 100%; position: absolute; z-index: -1;   
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{        0% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #995918 100%); }
                100%{ background:radial-gradient(circle farthest-corner at center center, transparent 22%, #97349E 100%); }
}

#lbb{ left: 20px; top:20px; background:#0000;width: 90px; height: 90px;overflow:hidden;position:absolute; transform:scale(.8);z-index: 10;}
#lkk { left: 20px; top:20px;background:#fff;width: 50px; height: 50px;clip-path: polygon(5% 25%, 5% 75%, 25% 76%, 25% 25%, 27% 25%, 27% 76%, 27% 76%, 61% 100%, 60% 0, 27% 25%);position: absolute; }
#jinyin{ left: 55px; top:35px;background:#fff;width: 16px; height: 25px;clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0, 50% 40%); position: absolute;opacity:0;}
#boxx { width: 120px;height: 120px;box-sizing: border-box;position: absolute;left: 55px; top:20px;}
.yy-symboll {width: 50px;height: 50px;box-sizing: border-box;overflow: hidden;transform: rotate(135deg);}
.yy-circlee {border: 5px solid #fff;border-radius: 50%;position: absolute;}
.firstt {width: 5px;height: 5px;background: #00ff00;top: 45px;left: 45px;}
.secondd {width: 25px; height: 25px;top: 35px;left: 35px;animation: fadeInOutt 1s infinite 0.2s var(--state);.}
.thirdd { width: 40px;height: 40px;top: 25px;left: 25px;animation: fadeInOutt 1s infinite 0.4s var(--state);}
.mhirdd {width: 55px;height: 55px;top: 15px;left: 15px;animation: fadeInOutt 1s infinite 0.5s var(--state);}
@keyframes fadeInOutt { 0% {opacity: 0;}100% {opacity: 1;}}
</style>

<div id="tz">
      <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/6c/35/76/5248e569f2cceb796305b5c277184aee/audio.mp3" autoplay loop></audio>
<div id="dh" ></div>
        <div id="lbb">
<div id="lkk"></div>
    <div id="boxx">
      <div class="yy-symboll">
            <div class="yy-circlee firstt"></div>
            <div class="yy-circlee secondd"></div>
            <div class="yy-circlee thirdd"></div>
            <div class="yy-circlee mhirdd"></div>
      </div>
    </div>
<div id="jinyin"></div>
</div>
</div>

<script type="importmap">
{
      "imports": {
                "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
                "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
      }
}
</script>

<script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, tz.offsetWidth / tz.offsetHeight, 1, 1000);
      camera.position.set(10, 10, -10);
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      tz.appendChild(renderer.domElement);

      const clock = new THREE.Clock();
      const controls = new OrbitControls(camera, renderer.domElement);

      let mixer, gbl = 'https://638183.freep.cn/638183/web/3models/Parrot.glb';
      new GLTFLoader().load(gbl, function (gltf) {
                const model = gltf.scene;
                const scale = 0.06;
                model.scale.set(scale, scale, scale);
                model.position.set(-15, -2, 1);
                scene.add(model, new THREE.AmbientLight(0x00ffee), new THREE.PointLight(0xffffff, 200));
                mixer = new THREE.AnimationMixer(model);
                if (gltf.animations.length > 0) {
                        const clip = mixer.clipAction(gltf.animations);
                        clip.play();
                }
                animate();
      }, undefined, (err) => console.log(err));

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

      function animate() {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mixer.update(delta);
                renderer.render(scene, camera);
      }

   lbb.onclick = () => aud.paused ? (aud.play(),jinyin.style.opacity= '0',boxx.style.opacity = '1'): (aud.pause(),jinyin.style.opacity= '1',boxx.style.opacity = '0');
aud.onplaying = aud.onpause = () =>aud.paused ? clock.stop() : clock.start();
var mState = () => aud.paused ?
( tz.style.setProperty('--state', 'paused'),lbb.title = '点击播放' ) :
(tz.style.setProperty('--state', 'running'),lbb.title = '点击暂停' );
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
</script>

梦油 发表于 2025-6-6 14:38

欣赏佳作，问候亚伦。

杨帆 发表于 2025-6-6 17:22

完美控制，谢谢亚伦老师精彩分享{:4_191:}

亚伦影音工作室 发表于 2025-6-6 18:55

本帖最后由 亚伦影音工作室 于 2025-6-6 19:13 编辑 <br /><br /><style>
.lrc {   position: relative;background:#800 url(https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg)no-repeat0px0px / 100%100%;
            relative;
            top: 10%;
            left: 10%;
         width: 540px;
            height: 350px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
         
            color: #fff;
            font: normal 18px 'FZYaoti', sans-serif;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         transform:scale(1.2);
            color: #ff0000;
      font-weight: 650;
             text-align: center;
             }
</style>

<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>


<script>
      let lrc = `飞天 (《龙门客栈》游戏主题曲) - 凤凰传奇
词：边疆/丁于
曲：丁于
男：一盏茶品侠骨过往江湖路
女：一壶酒诉柔情天涯沦落人
男：一个字却能够牵动几人心
女：一生情动一次竟看破凡尘
男：刀刀夺热血 剑剑冷人心
独步天下相望不相闻
合：叶落纷飞飞满天
月落枝梢掠红颜
昼夜轮转带去无穷无尽思念
叶落纷飞飞满天
此生相逢不相见
愿有朝一日再续前缘
男：刀刀刀夺热血 剑剑剑冷人心
独步天下相望不相闻
合：叶落纷飞飞满天
月落枝梢掠红颜
昼夜轮转带去无穷无尽思念
叶落纷飞飞满天
此生相逢不相见
愿有朝一日再续前缘
女：叶落纷飞飞满天
月落枝梢掠红颜
昼夜轮转带去无穷无尽思念
合：叶落纷飞飞满天
此生相逢不相见
愿有朝一日再续前缘
女：愿有朝一日再续前缘

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });






audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

</script>

樵歌 发表于 2025-6-6 19:19

武侠天地，血色江湖。画面意境真好！

红影 发表于 2025-6-6 21:51

亚伦影音工作室 发表于 2025-6-6 18:55
本帖最后由 亚伦影音工作室 于 2025-6-6 19:13 编辑
.lrc {   position: relative;background:#800 url( ...

有意思，歌词同步单独占一个楼层，却是也能被播放器按钮控制的呢{:4_187:}

红影 发表于 2025-6-6 21:54

这个用上了 ThreeJS 3d 图像，好像光线效果不明显，也许被变色背景冲淡了吧。
欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 飞天 - 凤凰传奇【控制不住】