朵拉 发表于 2025-6-23 21:20

默（学习马黑黑愉效果）

本帖最后由 朵拉 于 2025-6-24 09:26 编辑 <br /><br /><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/68593e6058cb8da5c867f36e.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
    #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; }
    #btnFs { bottom: 30px; color: #eee; }
   
    #player { position: absolute; left: -1000px; }
   
   
</style>

<div id="papa">
    <audio id="aud" src="http://lsjwldx.com/myfile/duola/momo.mp3" autoplay="" loop=""></audio>
      
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/48/23/video65117387bce70.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';
    import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas.js';
    import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    basic3(papa);
    // canvas文本配置
    const setting = {
      font: `bold 30px 'Microsoft Yahei', sans-serif`,
      fill: true,
      fillColor: 'rgba(211,211,211 ,.6)',
    };
    const canv = textcanvas('默', setting);
    const texture = new THREE.CanvasTexture(canv);
    // 绘制平面几何体
    const mesh = new THREE.Mesh(
      new THREE.PlaneGeometry(2, 2, 64, 64),
      new THREE.MeshBasicMaterial({ map: texture, wireframe: true, transparent: true })
    );
    mesh.rotateX(0.3);
    mesh.rotateY(0.3);
    scene.add(mesh);
    // 动画
    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      mesh.rotation.z -= delta;
      renderer.render(scene, camera);
    };
    // 交互
    papa.onclick = (e) => {if (click3(mesh, e)) player.click()};
    papa.onmousemove = (e) => {
      papa.title = click3(mesh, e) ? '播放/暂停(Alt+X)' : '';
      papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
    };
    aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
    //动画及全屏
    animate();
    FS(papa, player);
</script>

朵拉 发表于 2025-6-23 21:20

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

红影 发表于 2025-6-23 21:33

漂亮的制作。
欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-6-23 23:16

{:4_199:}

梦江南 发表于 2025-6-24 08:46

欣赏朵拉老师的精美制作。{:4_199:}
页: [1]
查看完整版本: 默（学习马黑黑愉效果）