小辣椒 发表于 2025-5-12 21:55

欣赏小提琴演奏 （套用黑黑古城传说播放器效果）


<style>
        #tz { --state: running; margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: url('https://wj.zp68.com/lxx/yunhua/20211117/01.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; position: relative; }
        #player { position: absolute; left: 70%;bottom: 50px;z-index: 10; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 8s infinite linear var(--state); opacity: .45; }
        #player:hover { filter: invert(0.8); }
        #btnFs { left: 47%; bottom: 20px; color: #eee; text-align: center; }
        #btnFs:hover { color: Red; }
        #vid {position: absolute; width: 100%; height: 100%; bottom: 0; opacity: .8; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20211117/05.mp3" autoplay loop></audio>
        <video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/79/V-137992-59E8E7DE.mp4" autoplay loop muted></video>
        <img id="player" src="https://wj.zp68.com/lxx/yunhua/20211117/an.webp" width="10%" title="播放/暂停" />
</div>

<script type="module">

import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls";
import { FS } from 'https://638183.freep.cn/638183/web/ku/fscreen.js';

let rotRaf, isPaused = true, balls = [];

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

const geometry = new THREE.SphereGeometry(2, 32, 32, 0, 0.75 * Math.PI, 0, 1.8 * Math.PI);
for (let i = 0; i <= 6; i++) {
        const material = new THREE.MeshNormalMaterial({
                transparent: true,
                opacity: 0.25,
                wireframe: true,
                side: THREE.DoubleSide
        });
        const ball = new THREE.Mesh(geometry, material);
        const radian = (360 / 6) * (Math.PI / 180);
        ball.rotateY(Math.random() * 180);
        if (i < 6) ball.position.set(6 * Math.sin(radian * i), 6 * Math.cos(radian * i), 0);
        balls.push(ball);
        scene.add(ball);
}

const controller = new OrbitControls(camera, renderer.domElement);
controller.autoRotate = true;

isPaused = aud.paused;

const mState = () => {
        isPaused = aud.paused;
        aud.paused ? cancelAnimationFrame(rotRaf) : rotating();
};

const rotating = () => {
        if (isPaused ) return;
        balls.forEach(b => b.rotation.y -= Math.random() * 0.05);
        controller.update();
        renderer.render(scene, camera);
        rotRaf = requestAnimationFrame(rotating);
};

window.onresize = () => renderer.setSize(tz.offsetWidth, tz.offsetHeight);

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

rotating();
FS(tz, player);

</script>

小辣椒 发表于 2025-5-12 21:57

@马黑黑

昨天晚上弄到很迟的，最后就这样了，就改了一下透明的和球数，看了备注瞎蒙出来的

马黑黑 发表于 2025-5-12 22:13

小辣椒 发表于 2025-5-12 21:57
@马黑黑

昨天晚上弄到很迟的，最后就这样了，就改了一下透明的和球数，看了备注瞎蒙出来的

懂得原理就会相对容易弄

红影 发表于 2025-5-12 23:38

这个制作漂亮，小球和背景很相配。亲爱的还专门配了个雪花按钮。
欣赏亲爱的好帖{:4_199:}

红影 发表于 2025-5-12 23:40

这雪景好美啊，纷纷扬扬的。{:4_187:}

樵歌 发表于 2025-5-13 08:09

活学活用的积极分子{:4_172:}

樵歌 发表于 2025-5-13 08:10

喜欢，把代码用得娴熟，效果唯美。{:4_204:}

梦江南 发表于 2025-5-13 08:52

早上问好小辣椒，看到这纷纷扬扬的雪花，正好和影子的背景相反。太美了！{:4_187:}

梦江南 发表于 2025-5-13 08:54

这种效果也只有你们俩才能做出来。{:4_178:}

流水光阴 发表于 2025-5-13 18:33

雪景漂亮

流水光阴 发表于 2025-5-13 18:34

歌曲好听

流水光阴 发表于 2025-5-13 18:34

感谢分享

老谟深虑 发表于 2025-5-13 18:46

            欣赏你的佳作，制作的真好，向你学习！

小辣椒 发表于 2025-5-13 22:55

马黑黑 发表于 2025-5-12 22:13
懂得原理就会相对容易弄

反正我现在就是直接套用玩了，简单玩了

小辣椒 发表于 2025-5-13 22:57

红影 发表于 2025-5-12 23:38
这个制作漂亮，小球和背景很相配。亲爱的还专门配了个雪花按钮。
欣赏亲爱的好帖

主要背景雪地颜色浅我就减低了透明的，这样看上去颜色配一点

小辣椒 发表于 2025-5-13 22:57

红影 发表于 2025-5-12 23:40
这雪景好美啊，纷纷扬扬的。

视频效果电脑欣赏很美的

小辣椒 发表于 2025-5-13 22:58

樵歌 发表于 2025-5-13 08:09
活学活用的积极分子

樵哥哥现在小辣椒不行的，许多东西跟不上了

小辣椒 发表于 2025-5-13 22:59

樵歌 发表于 2025-5-13 08:10
喜欢，把代码用得娴熟，效果唯美。

没有的，代码下载黑黑是特效，我玩的不多的，许多代码看不懂

小辣椒 发表于 2025-5-13 23:00

梦江南 发表于 2025-5-13 08:52
早上问好小辣椒，看到这纷纷扬扬的雪花，正好和影子的背景相反。太美了！

阿姨晚上好，我也是想不出做什么，瞎蒙做一个了

小辣椒 发表于 2025-5-13 23:01

梦江南 发表于 2025-5-13 08:54
这种效果也只有你们俩才能做出来。

不是的，阿姨我是套用黑黑代码做的，自己许多看不懂就瞎捣鼓了{:4_189:}
页: [1] 2 3
查看完整版本: 欣赏小提琴演奏 （套用黑黑古城传说播放器效果）