论坛 › 音乐沙龙 › 《捉妖师》（学习套用黑黑《牵动》代码）

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

《捉妖师》（学习套用黑黑《牵动》代码）

<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://pic1.imgdb.cn/item/684c1fea58cb8da5c84aec95.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; overflow: hidden; }
      #btnFs { right: 20px; top: 20px; text-align: center; color: #c7971a; border-color: #c7971a !important; }
      #btnFs:hover { color: red; }
      #player { position: absolute; z-index: 10; top: 16%; cursor: pointer;transform: scale(1.2) rotate(-2deg); animation: scale 3.5s infinite alternate var(--state); }
      #player:hover { filter: hue-rotate(60deg); }
      #vid {position: absolute; left: 0; width: 116%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; filter: opacity(3.3); }
      #vid:nth-of-type(2) { opacity: 0.55;}
      #tit {
      position: absolute;
      right: -30px;
      background-image:url('https://pic.imgdb.cn/item/6562c38dc458853aef9d7d27.gif'); background-size:cover;
      width:300px; height:660px; font: bold 3.8em LiSu;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10; writing-mode:vertical-rl;
}
      @keyframes scale { to { transform: scale(1.2) rotate(3deg); } }
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2639024094" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/84/32/60f89d9e2eaf1_10s_big.mp4" autoplay loop muted></video>
      <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/54/5b458e396c2a5_10s_big.mp4" autoplay loop muted></video>
      <img id="player" src="https://pic1.imgdb.cn/item/684c1a5658cb8da5c84aeafc.png" width="14%" title="播放/暂停" />
      <div id="tit">捉妖师</div>
</div>

<script type="module">
      import * as THREE from 'https://esm.sh/three';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

      let step = 0.01, pos = 0, isPaused = false, raf;
      let playerLeft = (tz.offsetWidth - player.offsetWidth) / 2;;

      const scene = new THREE.Scene;
      const camera = new THREE.PerspectiveCamera(75, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
      camera.position.set(0, 8, 20);
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(tz.offsetWidth, tz.offsetHeight);
      tz.appendChild(renderer.domElement);

      const geometry = new THREE.CylinderGeometry(1, 1, 10, 16);
      const texture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/684c16c258cb8da5c84aea0a.jpg', () => renderer.render(scene, camera));

      const material = new THREE.MeshBasicMaterial({ color: 'snow', map: texture });      
      const cylinder = new THREE.Mesh(geometry, material);
      cylinder.rotateX(2);
      scene.add(cylinder);

      const animate = () => {
                pos -= step;
                let xx = playerLeft + pos * 15;
                player.style.setProperty('left', xx + 'px');
                if(pos >= 15 || pos <= -15) step = -step;
                cylinder.rotation.y += step;
                cylinder.position.x = pos;
                renderer.render(scene, camera);
                isPaused ?raf = requestAnimationFrame(animate) : cancelAnimationFrame(raf);
      };

      window.onresize = () => {
                renderer.setSize(tz.offsetWidth, tz.offsetHeight);
                playerLeft = (tz.offsetWidth - player.offsetWidth) / 2;
      };

      const mState = () => {
                isPaused = !aud.paused;
                animate();
      };

      aud.onplaying = aud.onpause = () => mState();
      aud.onseeked = () => cancelAnimationFrame(raf);

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

红影 发表于 2025-6-13 22:57

在那圆木上贴了狐妖的图，本来想找个炼化一类的音乐，比如炼妖的，没找到，只找到了捉妖的。{:4_173:}
谢谢黑黑代码{:4_187:}

杨帆 发表于 2025-6-14 00:28

构思新颖，富有创意，用心之作，谢谢影子精彩分享{:4_204:}

梦江南 发表于 2025-6-14 07:48

这捉妖师是按钮啊！会滾动的妖很赞，欣赏点赞！{:4_187:}

樵歌 发表于 2025-6-14 09:01

越现实主义的想像力，貌似我们又回到那神话的世界里。{:4_204:}

樵歌 发表于 2025-6-14 09:04

不可，那妖精看样纸挺好的，都把人家压缩扁了，真是的，那和尚跟个法海似的，多此一举{:4_170:}

花飞飞 发表于 2025-6-14 10:19

影子作品的意境效果都是一绝，背景图片和视频构出一个完美的捉妖场景，
木材上的妖精图片精美，捉妖师除了正常左右和移动，还增添了摇摆效果，模拟人物走路时的样子，特别逼真。{:4_187:}

花飞飞 发表于 2025-6-14 10:20

视频加了两层，文字漂亮有闪光效果，
看影子作品就是美的享受，大爱大赞{:4_187:}

梦油 发表于 2025-6-14 10:45

让“捉妖师”来捉捉形形色色的骗子吧。问好影子朋友！

红影 发表于 2025-6-14 12:07

杨帆 发表于 2025-6-14 00:28
构思新颖，富有创意，用心之作，谢谢影子精彩分享

谢谢杨帆鼓励，我也是瞎玩，假装一个降妖的过程{:4_173:}

红影 发表于 2025-6-14 12:08

梦江南 发表于 2025-6-14 07:48
这捉妖师是按钮啊！会滾动的妖很赞，欣赏点赞！

那个滚动的原木是黑黑的代码弄的，我套用了玩的，是个，捉妖师就是按钮{:4_173:}

红影 发表于 2025-6-14 12:09

樵歌 发表于 2025-6-14 09:01
越现实主义的想像力，貌似我们又回到那神话的世界里。

降妖伏魔，是我们的责任和义务{:4_189:}

红影 发表于 2025-6-14 12:10

樵歌 发表于 2025-6-14 09:04
不可，那妖精看样纸挺好的，都把人家压缩扁了，真是的，那和尚跟个法海似的，多此一举

妖精当然都好看啊，你看捉妖师都不敢看妖怪，看着旁边呢，这是为了防止被诱惑{:4_196:}

红影 发表于 2025-6-14 12:12

花飞飞 发表于 2025-6-14 10:19
影子作品的意境效果都是一绝，背景图片和视频构出一个完美的捉妖场景，
木材上的妖精图片精美，捉妖师除了 ...

谢谢飞飞这么仔细的评论，用的一点小心思都能被飞飞点评到，也是令人欢喜的事，谢谢飞飞{:4_187:}

红影 发表于 2025-6-14 12:13

花飞飞 发表于 2025-6-14 10:20
视频加了两层，文字漂亮有闪光效果，
看影子作品就是美的享受，大爱大赞

两个视频都临时找的，前面加了个火，感觉太单薄了，还不够炼化的氛围，就又去找了个加上去了{:4_170:}

红影 发表于 2025-6-14 12:14

梦油 发表于 2025-6-14 10:45
让“捉妖师”来捉捉形形色色的骗子吧。问好影子朋友！

梦油这思路有趣，也是，捉妖不如捉骗子，现在妖不常见，而骗子遍地{:4_204:}

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

红影 发表于 2025-6-14 12:14
梦油这思路有趣，也是，捉妖不如捉骗子，现在妖不常见，而骗子遍地

是啊，我们赋予“捉妖师”新的使命。{:4_189:}

红影 发表于 2025-6-14 15:57

梦油 发表于 2025-6-14 14:39
是啊，我们赋予“捉妖师”新的使命。

这个可以有，而且很有现实意义呢{:4_173:}

樵歌 发表于 2025-6-16 11:51

红影 发表于 2025-6-14 12:09
降妖伏魔，是我们的责任和义务

妖也有善良的，可以放一马，魔必然镇压。{:4_173:}

樵歌 发表于 2025-6-16 11:53

红影 发表于 2025-6-14 12:10
妖精当然都好看啊，你看捉妖师都不敢看妖怪，看着旁边呢，这是为了防止被诱惑

和尚也有坏和尚，酒肉和尚，花和尚呢{:4_189:}

查看完整版本: 《捉妖师》（学习套用黑黑《牵动》代码）