枫桥夜泊 ， 学习套用黑黑老师的《重返袖珍时光·如期而至》代码
<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://cccimg.com/view.php/287307ef1c308f14cdc3c971015e27e0.gif') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { bottom: 30px; color: #eee; }
#player { position: absolute; left: -1000px; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1350455244.mp3" autoplay loop></audio>
<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/textcanvas1.js';
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
basic3(papa);
const group = new THREE.Group();
group.position.set(0, 0, -2);
const spriteTexture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/t22/51/hx.png');
spriteTexture.colorSpace = THREE.SRGBColorSpace;
for (let i = 0; i < 100; i ++) {
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xffff00, map: spriteTexture }));
sprite.position.set(
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(6),
THREE.MathUtils.randFloatSpread(10)
);
sprite.scale.set(0.25, 0.25, 0.25);
sprite.material.rotation = Math.random() * Math. PI;
group.add(sprite);
}
const setting = {
font: `bold 60px 'KaiTi', sans-serif`,
fill: true,
fillColor: '#000080',
bg: 'rgba(169,164,60, 0.8)',
padding: { x: 5, y: 65 },
shadowX: 3,
shadowY: 3
};
const canv = textcanvas('* 枫桥夜泊 *', setting);
const texture = new THREE.CanvasTexture(canv);
const mesh = new THREE.Mesh(
new THREE.SphereGeometry(),
new THREE.MeshBasicMaterial({ map: texture })
);
mesh.position.set(-1, -1, -1.5);
scene.add(group, mesh);
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta;
group.rotation.y -= delta / 10;
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> 十分优雅的意境，赞一个。{:5_116:} 梦油 发表于 2025-6-23 09:46
十分优雅的意境，赞一个。
问好梦油老师，谢谢首席支持。{:4_204:} 原来这张底图是动图。这个球体的位置特别恰当，色彩的设置也好。
欣赏江南好帖{:4_199:} 要是把精灵的贴图换一下就更好了{:4_204:} 梦江南 发表于 2025-6-23 10:17
问好梦油老师，谢谢首席支持。
你家的沙发舒适宜人。 红影 发表于 2025-6-23 10:58
原来这张底图是动图。这个球体的位置特别恰当，色彩的设置也好。
欣赏江南好帖
问好影子，谢谢欣赏支持，祝夏安！{:4_204:} 红影 发表于 2025-6-23 11:00
要是把精灵的贴图换一下就更好了
我那会换啊， 梦油 发表于 2025-6-23 11:20
你家的沙发舒适宜人。
是吗，下次就多来坐坐。{:4_173:} 问好江南，谢谢精彩分享，祝夏安！{:4_204:} 杨帆 发表于 2025-6-23 11:35
问好江南，谢谢精彩分享，祝夏安！
谢谢杨帆老师欣赏支持，我不会加歌词，您做吧。祝夏安！{:4_204:} 梦江南 发表于 2025-6-23 11:55
谢谢杨帆老师欣赏支持，我不会加歌词，您做吧。祝夏安！
可以学习加呀{:4_204:} 杨帆 发表于 2025-6-23 13:15
可以学习加呀
我不会掏鼓。{:4_201:} 梦江南 发表于 2025-6-23 11:26
问好影子，谢谢欣赏支持，祝夏安！
不客气啊，问好江南，新周快乐{:4_187:} 梦江南 发表于 2025-6-23 11:27
我那会换啊，
就是一张图片啊，很简单的{:4_173:} 梦江南 发表于 2025-6-23 13:55
我不会掏鼓。
没事呀，多鼓捣就行了，我试试看~ 红影 发表于 2025-6-23 14:24
不客气啊，问好江南，新周快乐
影子下午好。 红影 发表于 2025-6-23 14:25
就是一张图片啊，很简单的
不知贴到哪里，是球面吗？ 杨帆 发表于 2025-6-23 14:34
没事呀，多鼓捣就行了，我试试看~
你几次做过了，你一定能做好的。 梦江南 发表于 2025-6-23 11:29
是吗，下次就多来坐坐。
一定、一定。