重返袖珍时光·如期而至

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

马黑黑 发表于 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 是设置文本阴影偏移（设置大一些）。

杨帆发表于 2025-6-22 14:19

经典示范，精彩分享，谢谢老师{:4_191:}

梦江南 发表于 2025-6-22 14:58

球面贴字这么讲究，字体有阴影立体感很强，真赞！{:4_187:}

红影发表于 2025-6-22 16:13

这个好美啊，球面帖字原来讲究还挺多，要留出足够的空白才能保证文字不变形。
精灵的贴纸也好漂亮啊，太别致了{:4_199:}

红影发表于 2025-6-22 16:15

背景图也好，这样的田园风光非常美好{:4_187:}

马黑黑 发表于 2025-6-22 17:45

红影发表于 2025-6-22 16:15
背景图也好，这样的田园风光非常美好

这是俺工作的地方

马黑黑 发表于 2025-6-22 17:48

红影发表于 2025-6-22 16:13
这个好美啊，球面帖字原来讲究还挺多，要留出足够的空白才能保证文字不变形。
精灵的贴纸也好漂亮啊，太别 ...

文字贴在圆球上都会变形，不信你可以找个乒乓球写个大字贴上。我们要做的是尽量让文字不那么变形，那么，往乒乓球上贴的字，它应该是上下留一定空间，贴纸上的字尽可能帖中央。

马黑黑 发表于 2025-6-22 17:48

梦江南发表于 2025-6-22 14:58
球面贴字这么讲究，字体有阴影立体感很强，真赞！

{:4_191:}

马黑黑 发表于 2025-6-22 17:48

杨帆发表于 2025-6-22 14:19
经典示范，精彩分享，谢谢老师

{:4_190:}

红影发表于 2025-6-22 21:24

马黑黑发表于 2025-6-22 17:45
这是俺工作的地方

生态非常好啊，满眼自然风光，在这样的地方工作也太幸福了吧{:4_187:}

红影发表于 2025-6-22 21:32

马黑黑发表于 2025-6-22 17:48
文字贴在圆球上都会变形，不信你可以找个乒乓球写个大字贴上。我们要做的是尽量让文字不那么变形，那么， ...

是的，由平面到曲面或曲面到平面，肯定有变形的，能调成现在的样子已经很不错了。{:4_187:}

马黑黑 发表于 2025-6-22 23:57

红影发表于 2025-6-22 21:32
是的，由平面到曲面或曲面到平面，肯定有变形的，能调成现在的样子已经很不错了。

还好

马黑黑 发表于 2025-6-22 23:57

红影发表于 2025-6-22 21:24
生态非常好啊，满眼自然风光，在这样的地方工作也太幸福了吧

养殖业需要讲究环境

红影发表于 2025-6-23 11:33

马黑黑发表于 2025-6-22 23:57
还好

这些文字变得特别漂亮的感觉。

红影发表于 2025-6-23 11:34

马黑黑发表于 2025-6-22 23:57
养殖业需要讲究环境

哈哈，又开始提养猪猪的事了{:4_173:}

亚伦影音工作室 发表于 2025-6-23 21:36

本帖最后由亚伦影音工作室于 2025-6-23 21:38 编辑

用手机无法欣赏，只有音乐！可能papa设置的元素问题.
height: auto;

马黑黑 发表于 2025-6-23 23:13

亚伦影音工作室发表于 2025-6-23 21:36
用手机无法欣赏，只有音乐！可能papa设置的元素问题.
height: auto;

height: auto; 是标准的配套 aspect 属性的设置。是你的浏览器内核跟不上。

马黑黑 发表于 2025-6-23 23:13

红影发表于 2025-6-23 11:34
哈哈，又开始提养猪猪的事了

不是开始，是正在

页: [1] 2 3

花潮论坛's Archiver

重返袖珍时光·如期而至