【黑师代码】淡若清风（学习黑师20250517《闪耀的回声》缓冲球形几何体小播）
本帖最后由 花飞飞 于 2025-5-17 18:35 编辑 <br /><br /><style>#tz { --state: running; margin: 130px 0;left: calc(50% - 81px);transform: translateX(-50%); width: clamp(600px, 90vw, 1700px); min-height: 80vh; aspect-ratio: 17/11; background: url('https://642303.freep.cn/642303/tu/20250505777.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: 240px; height: 240px; cursor: pointer; background: none; }
#btnFs { bottom: 20px; color: #eee; text-align: center; }
#btnFs:hover { color: red; }
#vid {position: absolute; width: 100%; height: 100%;mix-blend-mode: multiply; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2165436960" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/49/5b4423c9b06bf.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停(Alt+X)"></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/fscreen.js';
const scene = new THREE.Scene;
const camera = new THREE.PerspectiveCamera(90, tz.offsetWidth / tz.offsetHeight, 0.1, 1000);
camera.position.set(0, 1, 8);
const clock = new THREE.Clock();
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
tz.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry();
const texture = new THREE.TextureLoader().load('https://642303.freep.cn/642303/za/70ea16dce9f184a3.png');
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, map: texture, transparent: true, opacity: 0.7, side: THREE.DoubleSide });
const ball = new THREE.Mesh(geometry, material);
scene.add(ball);
scene.add(ball);
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
ball.rotation.x += delta / 5;
ball.rotation.y += delta / 5;
renderer.render(scene, camera);
};
tz.onclick = (e) => {
if (e.target.id !== 'player') return;
aud.paused ? clock.stop() : clock.start();
}
window.onresize = () => {
camera.aspect = tz.offsetWidth / tz.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(tz.offsetWidth, tz.offsetHeight);
}
animate();
FS(tz, player);
</script> @马黑黑 交一份今天的缓冲球体小播作业{:4_173:} 好美的画面，特效也很给力{:4_199:}{:4_187:} {:4_174:} 马黑黑 发表于 2025-5-17 18:43
周末就这么悠闲自在 小九 发表于 2025-5-17 18:36
好美的画面，特效也很给力
问好小九，好久不见 啦{:4_190:} 花飞飞 发表于 2025-5-17 20:20
周末就这么悠闲自在
应该的 飞飞这么快就做好了，敏捷。
而且这个设计太奇妙了，小球的构成不是封闭的，纹理贴纸也很奇妙，和背景浑然一体{:4_199:} 这个制作太美了，飞飞的小脑筋好灵啊，出乎意料的效果，太惊叹了{:4_199:} 小辣椒都没有仔细看过黑黑这个代码，飞飞已经做好了，{:4_199:} 欣赏飞飞的精美制作，漂亮的画面配上黑黑的特效，锦上添花！ 好美的画面，欣赏问好！{:4_187:} 总能创造性的学习并把作业上升到最唯美的境界！ 马黑黑 发表于 2025-5-17 20:32
应该的
{:4_173:}周末的忙碌是快乐的忙碌 红影 发表于 2025-5-17 20:36
飞飞这么快就做好了，敏捷。
而且这个设计太奇妙了，小球的构成不是封闭的，纹理贴纸也很奇妙，和背景浑然 ...
颜色找了个相近的，却没想到有意外的效果{:4_173:} 红影 发表于 2025-5-17 20:37
这个制作太美了，飞飞的小脑筋好灵啊，出乎意料的效果，太惊叹了
感谢影子支持鼓励哦{:4_204:} 小辣椒 发表于 2025-5-17 22:48
小辣椒都没有仔细看过黑黑这个代码，飞飞已经做好了，
这个只是换了个背景，纯套用。{:4_187:}别的也不太会改 小辣椒 发表于 2025-5-17 22:48
欣赏飞飞的精美制作，漂亮的画面配上黑黑的特效，锦上添花！
小辣椒的支持真给力{:4_187:} 梦江南 发表于 2025-5-18 13:18
好美的画面，欣赏问好！
问好梦江南，制作开心 樵歌 发表于 2025-5-18 18:30
总能创造性的学习并把作业上升到最唯美的境界！
问好樵管，感谢支持和肯定{:4_187:}
页:
[1]
2