BabylonJS - 参数化形状

Babylon.js - 参数化形状

除了盒子和球体等标准基本几何体外，Babylon.js 还允许你根据数学公式或由点序列定义的路径创建复杂的网格。这些通常被称为参数化形状，因为它们的形态是由参数和方程决定的，而不是固定的几何体。

MeshBuilder 类提供了几种方法来创建这些形状，使你能够生成线条、带状物、管状物、拉伸体等。

1. 线条和虚线

最简单的参数化形状是连接一系列点的线条。CreateLines 生成一个连续的线条网格，而 CreateDashedLines 生成带有间隙的虚线。

语法

// 点数组 (Vector3)
const myPoints = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(5, 5, 0),
    new BABYLON.Vector3(5, 5, 5),
    new BABYLON.Vector3(0, 0, 5)
];

// 创建连续的线条
const lines = BABYLON.MeshBuilder.CreateLines("lineMesh", { points: myPoints }, scene);
lines.color = new BABYLON.Color3(1, 0, 0); // 设置线条颜色

// 创建虚线
const dashedLines = BABYLON.MeshBuilder.CreateDashedLines("dashedLineMesh", {
    points: myPoints,
    dashSize: 3, // 每段虚线的长度
    gapSize: 1,  // 虚线段之间的间隔长度
    dashNb: 200 // 大致的虚线段数量 (调整以控制密度)
}, scene);
dashedLines.color = new BABYLON.Color3(0, 1, 0);

2. 带状物 (Ribbon)

CreateRibbon 通过并排连接多条路径（点数组）来生成一个平面网格。想象一下将几股纱线并排放置——带状物填充了它们之间的空间。

语法

// 定义多条路径 (每条路径都是一个 Vector3 数组)
const path1 = [new BABYLON.Vector3(-2, 0, 0), new BABYLON.Vector3(-2, 5, 0)];
const path2 = [new BABYLON.Vector3(0, 0, 1), new BABYLON.Vector3(0, 5, 1)];
const path3 = [new BABYLON.Vector3(2, 0, 0), new BABYLON.Vector3(2, 5, 0)];

const pathArray = [path1, path2, path3];

// 创建带状物
const ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbonMesh", {
    pathArray: pathArray,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE // 使其从两侧都可见
}, scene);

const ribbonMat = new BABYLON.StandardMaterial("ribbonMat", scene);
ribbonMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
ribbon.material = ribbonMat;

带状物对于创建墙体、轨迹或由平行路径定义的复杂表面非常有用。

3. 管状物 (Tube)

CreateTube 生成一个沿着指定路径的圆柱形网格。你定义路径、管状物的半径和细分程度（平滑度）。

语法

// 定义管状物的路径
const tubePath = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 5, 0),
    new BABYLON.Vector3(3, 5, 3),
    new BABYLON.Vector3(5, 5, 0)
];

// 创建管状物
const tube = BABYLON.MeshBuilder.CreateTube("tubeMesh", {
    path: tubePath,
    radius: 0.5, // 管状物的半径
    tessellation: 64, // 圆周方向的段数 (控制平滑度)
    sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);

const tubeMat = new BABYLON.StandardMaterial("tubeMat", scene);
tubeMat.diffuseColor = new BABYLON.Color3(1, 1, 0);
tube.material = tubeMat;

管状物非常适合创建管道、电线、轨道或任何沿路径具有一致圆形横截面的形状。

4. 拉伸 (Extrusion) (`ExtrudeShape`、`ExtrudeShapeCustom`)

拉伸通过获取一个 2D 形状（由点定义）并沿路径延伸来创建 3D 形状。ExtrudeShape 执行线性拉伸，而 ExtrudeShapeCustom 允许沿路径进行缩放和旋转。

语法

// 定义 2D 形状 (例如，XY 平面上的星形，Z=0)
const starShape = [
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(0.5, 0.5, 0),
    new BABYLON.Vector3(2, 0, 0),
    new BABYLON.Vector3(0.5, -0.5, 0),
    new BABYLON.Vector3(0, -2, 0),
    new BABYLON.Vector3(-0.5, -0.5, 0),
    new BABYLON.Vector3(-2, 0, 0),
    new BABYLON.Vector3(-0.5, 0.5, 0),
    new BABYLON.Vector3(0, 2, 0) // 闭合形状
];

// 定义拉伸路径 (例如，沿 Z 轴延伸)
const extrusionPath = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 0, 5)
];

// 创建拉伸形状
const extrudedStar = BABYLON.MeshBuilder.ExtrudeShape("extrudedMesh", {
    shape: starShape,
    path: extrusionPath,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE,
    cap: BABYLON.Mesh.CAP_ALL // 添加起始端和末端盖子
}, scene);

const extrudeMat = new BABYLON.StandardMaterial("extrudeMat", scene);
extrudeMat.diffuseColor = new BABYLON.Color3(1, 0, 1);
extrudedStar.material = extrudeMat;

拉伸功能非常强大，可以从 2D 轮廓创建自定义 3D 对象，例如建筑元素、定制栏杆或复杂的机器零件。

结合概念

你可以将这些技术结合起来使用。例如，你可以使用 Curve3（参见 Curve3 章节）创建一条路径，然后使用该路径创建 Tube 或 Ribbon，从而生成复杂、平滑的参数化形状。

演示说明

想象一个场景，展示上面描述的形状：一条连接几个点的红色连续线条，一条沿着相同路径的绿色虚线，一个由三条平行垂直路径形成的蓝色带状物，一个沿着弯曲路径的黄色管状物，以及一个通过沿 Z 轴拉伸 2D 星形创建的洋红色 3D 星形。这将展示 Babylon.js 中参数化形状生成的通用性。