跳到主要内容

文本转高斯泼溅

GsplatText 为每个非透明文本像素创建单元，让标签自然融入高斯泼溅场景。

备注

此功能基于渲染架构。

概览​

该脚本组件：

  • 用标准 CSS 字体绘制到画布。
  • 每个可见像素一个单元。
  • 位于 Y=0 的 XZ 平面。
  • 支持填充、描边和自定义字体。

用实体变换调整大小和位置。

基本用法​

// Import the script
const { GsplatText } = await import('path/to/gsplat-text.mjs');

// Add script component to an entity
entity.addComponent('script');
const textSplat = entity.script.create(GsplatText);

// Configure text
textSplat.text = 'Hello World';
textSplat.fontSize = 64;
textSplat.fillStyle = '#ffffff';

// Position and scale using entity transform
entity.setLocalPosition(0, 0, 0);
entity.setLocalScale(0.15, 0.15, 0.15);

属性​

属性类型默认值说明
textstring''文本字符串
fontSizenumber64像素字号
fontFamilystring'sans-serif'CSS 字体族
fillStylestring'#ffffff'CSS 填充颜色
strokeStylestring'rgba(0,0,0,0)'CSS 描边颜色
strokeWidthnumber0像素描边宽度
paddingnumber0文本周围像素间距

样式示例​

基础白字​

textSplat.text = 'Score: 100';
textSplat.fontSize = 48;
textSplat.fillStyle = '#ffffff';

描边文字​

textSplat.text = 'GAME OVER';
textSplat.fontSize = 72;
textSplat.fillStyle = '#ff0000';
textSplat.strokeStyle = '#000000';
textSplat.strokeWidth = 3;

自定义字体​

textSplat.text = 'Fancy Text';
textSplat.fontFamily = 'Georgia, serif';
textSplat.fontSize = 56;

自动更新​

任意属性变化后自动重建，下一帧更新。

// Update text at runtime
textSplat.text = 'New Score: 200';

坐标系​

与 GsplatImage 一样位于 XZ 平面：

  • X：从左到右。
  • Z：从上到下，从 +Y 看可正确阅读。
  • Y：始终为 0。

文本适配 1x1 单位区域，再由实体变换缩放。

性能注意事项​

数量取决于：

  • 字号，越大像素越多。
  • 文本长度。
  • 描边宽度，增加像素。

长文本和大字号可能生成大量单元。

实时示例​

Procedural Shapes 用于 CAD 可视化尺寸标签。

程序化形状示例

脚本位置​

脚本位于引擎仓库：

scripts/esm/gsplat/gsplat-text.mjs

另请参见​