重返袖珍时光·如期而至

马黑黑 · 发表于 2025-6-22 13:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-6-22 13:45

帖子代码

<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://638183.freep.cn/638183/t24/w4/xu.webp') 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=547117901" 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: '#ff0000',
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>

复制代码

马黑黑 · 发表于 2025-6-22 13:54

本帖，主要测试 textcanvas.js 模块升级（v1）版用于 ThreeJS 球体图像贴图效果。

给球体几何体的材质贴图，需要知晓一个原理：球体几何体的面只有一个。为此，满当当的 canvas 纹理贴上去后文字扭曲变形，为此，需要留出纹理贴图的上、下边一定的空白。textcanvas（v1）允许自定义内边距 padding ，像这样，padding: { x: 30, y: 100 } ，意为左右各留出 30 个像素单位的空白、上下各留出 100 个像素单位的空白。怎样留空白依据需要而定。

代码 35~43 行时 canvas 文配置的样式，bg 和 padding 分别设置了底色和内边距，至于 shadowX 和 shadowY 是设置文本阴影偏移（设置大一些）。