跳到主要内容

线与形状

GsplatLines 以高斯泼溅绘制线状调试图元，支持线、箭头和轴对齐包围盒（AABB），适合 CAD 风格可视化和调试。

备注

此功能基于渲染架构。

概览​

该脚本组件：

  • 创建线、箭头和线框盒。
  • 支持沿线渐变。
  • 通过句柄增删图元。
  • 变化后自动重建。

基本用法​

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

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

// Add primitives
const lineHandle = lines.addLine(
    new pc.Vec3(0, 0, 0),
    new pc.Vec3(1, 1, 1),
    new pc.Color(1, 0, 0),  // Start color (red)
    new pc.Color(0, 0, 1),  // End color (blue)
    0.05                     // Thickness
);

// Remove later if needed
lines.removePrimitive(lineHandle);

API​

addLine(start, end, startColor, endColor, thickness)​

添加从起点到终点渐变的线。

const handle = lines.addLine(
    new pc.Vec3(0, 0, 0),
    new pc.Vec3(1, 0, 0),
    new pc.Color(1, 0, 0),
    new pc.Color(0, 1, 0),
    0.02
);

addLineSimple(start, end, color, thickness)​

添加单色线。

const handle = lines.addLineSimple(
    new pc.Vec3(0, 0, 0),
    new pc.Vec3(1, 0, 0),
    new pc.Color(1, 1, 0),
    0.02
);

addArrow(start, end, color, thickness, headSize?)​

添加带棱锥箭头的箭头。

const handle = lines.addArrow(
    new pc.Vec3(0, 0, 0),
    new pc.Vec3(0, 1, 0),
    new pc.Color(0, 1, 0),
    0.02,
    0.1  // Optional head size (default: thickness * 9)
);

addAABB(min, max, color, thickness)​

添加线框 AABB。

const handle = lines.addAABB(
    new pc.Vec3(-1, -1, -1),
    new pc.Vec3(1, 1, 1),
    new pc.Color(1, 1, 0),
    0.01
);

removePrimitive(handle)​

按句柄移除图元。

const removed = lines.removePrimitive(handle);  // Returns true if found

clear()​

清空全部图元。

lines.clear();

primitiveCount（只读）​

返回图元数。

console.log(`${lines.primitiveCount} primitives`);

工作原理​

沿路径放置一系列单元：

  • 数量由长度和粗细决定。
  • 沿线均匀分布。
  • 颜色从起点插值到终点。
  • 箭头使用 5 条线，即主轴加 4 条棱锥边。
  • AABB 使用 12 条边线。

用途​

  • CAD 标注：尺寸线、测量箭头。
  • 调试：包围盒、方向指示。
  • 场景装饰：线框叠加、辅助线。

实时示例​

Procedural Shapes 演示场景中的 CAD 尺寸标注。

程序化形状示例

脚本位置​

脚本位于引擎仓库：

scripts/esm/gsplat/gsplat-lines.mjs

另请参见​