【黑师代码】阳光百合（学习黑师20250519《笼》图片交叠旋转几何体小播效果）

花飞飞 发表于 2025-5-20 19:12

本帖最后由花飞飞于 2025-5-20 23:46 编辑 <br /><br /><style>
#tz { --size: 240px; margin: 130px 0; left: calc(50% - 101px); transform: translateX(-50%); width: clamp(600px, 90vw, 1700px); min-height: 80vh; aspect-ratio: 17/9; background: url('https://642303.freep.cn/642303/tu/20250520002.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#player { position: absolute; width: var(--size); height: var(--size); top:45%; left:51%;cursor: pointer; background: none; border-radius: 50%; }
#btnFs { bottom: 20px; color: #eee; text-align: center; }
#btnFs:hover { color: red; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover;top:0px; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none;mix-blend-mode: screen;opacity: .46; }
</style>

<div id="tz">
<audio id="aud"></audio>
<video id="vid" src="https://video.699pic.com/videos/ing_left_all/ING_VID_1632750.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</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/FS.js';

const musics = [
'https://music.163.com/song/media/outer/url?id=2110535068',
'https://music.163.com/song/media/outer/url?id=2101386665',
'https://music.163.com/song/media/outer/url?id=2062300396',
'https://music.163.com/song/media/outer/url?id=2094442975',
'https://music.163.com/song/media/outer/url?id=2699342733'
];
let currentIdx = 0;

const playmusic = () => {
aud.src = musics;
aud.play();
currentIdx = (currentIdx + 1) % musics.length;
};

const scene = new THREE.Scene;
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera(60, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
camera.position.set(-1, 1, 7);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.appendChild(renderer.domElement);

const texture1 = new THREE.TextureLoader().load('https://642303.freep.cn/642303/za/2c963b7f7f0947f4b78450448f4a3776_tplv-obj_1200_1200.png');
const texture2 = new THREE.TextureLoader().load('https://642303.freep.cn/642303/tu/003.webp');
texture1.colorSpace = THREE.SRGBColorSpace;
texture2.colorSpace = THREE.SRGBColorSpace;
const ball = new THREE.Mesh(
new THREE.SphereGeometry(),
new THREE.MeshBasicMaterial({ map: texture1, transparent: true, opacity: .5, side: THREE.DoubleSide })
);
const circle = new THREE.Mesh(
new THREE.CircleGeometry(0.8),
new THREE.MeshBasicMaterial({ map: texture2, side: THREE.DoubleSide })
);
const circle1 = circle.clone();
circle1.rotateY(Math.PI / 2);
ball.add(circle, circle1);
scene.add(ball);

const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
ball.rotation.y -= delta;
renderer.render(scene, camera);
};

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

aud.onended = () => playmusic();

window.onresize = () => {
camera.aspect = tz.offsetWidth / tz.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.style.setProperty('--size', `${tz.offsetWidth / 5}px`);
}

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

花飞飞 发表于 2025-5-20 19:14

@马黑黑
昨天的小播效果特别惊艳，十分喜欢。。完成一个作业。。。
做的有点匆忙，音乐没改了。。。。

花飞飞 发表于 2025-5-20 19:15

小播位置本来还想让它下向一些的，移下来后，响应位置变不了，小手位置不能跟小播一致，就只稍改了一丢丢。。{:4_173:}

马黑黑 发表于 2025-5-20 19:19

花飞飞发表于 2025-5-20 19:15
小播位置本来还想让它下向一些的，移下来后，响应位置变不了，小手位置不能跟小播一致，就只稍改了一丢丢 ...

相机设置好位置，然后估算其位置的百分比，用该百分比去设置 #player 的top或bottom位置，用的也是百分比。这是大概的、八九不离十的那种。

第二种方案是使用 three 3d 图像对象的点击操作，可参阅我马上发布的帖子

红影发表于 2025-5-20 21:30

飞飞的这个小播漂亮，里面的美人儿和背景一样，外面用了个透明的漂亮图案，效果竟如此奇妙，很出乎意料，外面的图图还能这样设置。
飞飞聪明，这构思太妙了{:4_199:}

红影发表于 2025-5-20 21:31

画面淡雅清爽，字体设计漂亮。飞飞的帖子太赞了{:4_199:}

花飞飞 发表于 2025-5-20 22:06

马黑黑发表于 2025-5-20 19:19
相机设置好位置，然后估算其位置的百分比，用该百分比去设置 #player 的top或bottom位置，用的也是百分比 ...

第一个方法好，我现在去改改{:4_199:}

花飞飞 发表于 2025-5-20 22:08

马黑黑发表于 2025-5-20 19:19
相机设置好位置，然后估算其位置的百分比，用该百分比去设置 #player 的top或bottom位置，用的也是百分比 ...

第一种添加位置百分比之后，已完成。这个好理解
第二种刚才看到用几何体当做小播进行点击，看了还是JS的功能。。。这个好厉害。。{:4_173:}

花飞飞 发表于 2025-5-20 22:09

红影发表于 2025-5-20 21:30
飞飞的这个小播漂亮，里面的美人儿和背景一样，外面用了个透明的漂亮图案，效果竟如此奇妙，很出乎意料，外 ...

外面图带色的加上去之后影响里面图的效果，就换了张透明的。这个谁都可以，试一下就出来了{:4_187:}

花飞飞 发表于 2025-5-20 22:10

红影发表于 2025-5-20 21:31
画面淡雅清爽，字体设计漂亮。飞飞的帖子太赞了

问好影子，感谢支持{:4_204:}

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

花飞飞发表于 2025-5-20 22:08
第一种添加位置百分比之后，已完成。这个好理解
第二种刚才看到用几何体当做小播进行点击，看了还是JS的 ...

也是不太准确的。还有第三个方案，使用插件，这个准，就是不知道兼容性如何，还没尝试

马黑黑 发表于 2025-5-20 22:16

花飞飞发表于 2025-5-20 22:06
第一个方法好，我现在去改改

{:4_191:}

花飞飞 发表于 2025-5-20 22:20

马黑黑发表于 2025-5-20 22:12
也是不太准确的。还有第三个方案，使用插件，这个准，就是不知道兼容性如何，还没尝试

插件？大约是什么样子的。。。之前贴子里没用过吧。。。
感觉有点复杂

花飞飞 发表于 2025-5-20 22:20

马黑黑发表于 2025-5-20 22:16

现在位置，感觉很完美了。。{:4_173:}

马黑黑 发表于 2025-5-20 22:22

花飞飞发表于 2025-5-20 22:20
现在位置，感觉很完美了。。

大约的，反正也不是差到十万八千里

马黑黑 发表于 2025-5-20 22:22

花飞飞发表于 2025-5-20 22:20
插件？大约是什么样子的。。。之前贴子里没用过吧。。。
感觉有点复杂

这个肯定没用过，我还得想想

花飞飞 发表于 2025-5-20 22:51

马黑黑发表于 2025-5-20 22:22
大约的，反正也不是差到十万八千里

{:4_173:}至少两者叠在一起了。
我移完后点不动，后来才想到回去找

花飞飞 发表于 2025-5-20 22:51

马黑黑发表于 2025-5-20 22:22
这个肯定没用过，我还得想想

好哒，上茶，上烟，慢慢想{:4_173:}

小九发表于 2025-5-21 10:26

效果很惊艳啊{:4_199:}

梦江南 发表于 2025-5-21 11:55

欣赏老师精美制作，厉害！{:4_187:}

页: [1] 2 3

花潮论坛's Archiver

【黑师代码】阳光百合（学习黑师20250519《笼》图片交叠旋转几何体小播效果）