66. 详解参数化形状物体

66. 详解参数化形状物体

本教程翻译自官方教程Create Parametric Shapes,各位也可以进入本站镜像站点查看

本文目录

  1. 初识参数化形状物体
    1. 路径
    2. 实例
  2. 如何使用 MeshBuilder 创建形状物体
    1. 线条
    2. 虚线
    3. 线条系统
    4. 带状物体
    5. 管状物体
    6. 挤压形状物体
    7. 自定义挤压形状物体
    8. 车床
    9. 不规则多边形物体
    10. 挤压不规则多边形物体
  3. 延伸阅读
    1. 了解更多的选项信息
    2. 基础 - L1
    3. 中级 - L2
    4. 高级设置 - L3

初识参数化形状物体

    与常规形状物体不同,参数化的形状物体不能只通过名称来创建,我们还需要传入一些参数值来创建。

    我们使用 MeshBuilder 通过设置一些参数或者直接使用默认参数就可以创建出这些形状物体。有些选项很容易理解(如 sizediameter ),instance 选项会在下面进行解释,想要了解 faceUV 请各位移步到延伸阅读中去进一步探索。

路径

    许多参数化形状物体需要我们创建一个能形成一个路径的向量数组来作为参数。我们可以手动设置这些向量点,也可以直接使用一些曲线,例如贝塞尔曲线,Babylon.js 可以提取的它的路径向量。

实例

    如果我们使用了实例参数,当我们改变选项的值时这个形状也会更新。然而我们想要使用instance 作为选项时,需要满足下面两个条件:

1. updatable 的值必须为 true;
2. 选项中使用的到每一个数组的元素数量应该保持不变;

    在实际应用中,除了车床和多边形(创建和扩展)之外,所有参数化的形状都可以通过使用已经创建的物体实例来更新它们的形状。

    在使用实例作为参数时,我们需要创建两个物体实例,第一个用来创建物体,第二个用作更新时的实例参数。

如何创建参数化的形状物体

线条

    我们可以通过 points 选项来创建一个线条,它的值是一个由一系列向量点组成的数组。如果需要更新线条的形状时,需要设置 pointsinstance 选项。如果我们在创建时设置了colors选项,我们也可以更新它的colors选项。

代码示例:

//creates lines
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myArray}, scene);

// updates the existing instance of lines : no need for the parameter scene here
lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myArray, instance: lines});
选项 值类型&说明 默认值
points (Vector3[])三维向量数组,是生成线条的路径 必填
updatable (boolean) 是否允许物体更新 false
instance (LineMesh) 用来更新物体一个线条物体实例 null
colors (Color4[]) 每一个点的颜色 null
useVertexAlpha (boolean) 是否使用颜色透明度 true

Playground 创建螺旋形线条的实例
Playground 创建一个可更新的螺旋形线条的实例

通过color属性给线条添加颜色

lines.color = new BABYLON.Color3(1, 0, 0);

Playground 创建带颜色的螺旋形线条的实例

虚线

    我们可以通过 points 选项来创建一个虚线,它的值是一个由一系列向量点组成的数组。如果需要更新线条的形状时,需要设置 pointsinstance 选项。否则形状将不会更新.

示例:

// creates an instance of dashedlines
var dashedLines = BABYLON.MeshBuilder.CreateDashedLines("dl", {points: myArray}, scene);

// updates the existing instance of dashedLines : no need for the parameter scene here
dashedLines = BABYLON.MeshBuilder.CreateDashedLines("dl", {points: myArray, instance: dashedLines});
选项 值类型&说明 默认值
points (Vector3[])三维向量数组,是生成虚线的路径 必填
dashSize (number) 虚线的长度 3
gapSize (number) 虚线线段间隔的大小 1
dashNb (number) 虚线线段的数量 200
updatable (boolean) 是否允许物体更新 false
instance (LineMesh) 用来更新物体一个线条物体实例 null

Playground 创建虚线 的实例
Playground 创建一个可更新的虚线的实例

通过color属性给虚线添加颜色

lines.color = new BABYLON.Color3(1, 0, 0);

Playground 创建带颜色虚线的实例

线条系统

一种由互不相连的线组成的系统,这些线彼此独立,可能存在于它们自己的空间中。我们必须设置 lines 选项。如果需要更新,需要设置 linesinstance 选项。如果我们在创建时设置了colors选项,我们也可以更新它的colors选项。

示例:

// creates an instance of a line system
var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("lineSystem", {lines: myArray}, scene);

// updates the existing instance of lineSystem : no need for the parameter scene here
lineSystem = BABYLON.MeshBuilder.CreateLineSystem("lineSystem", {lines: myArray, instance: lineSystem});
选项 值类型&说明 默认值
lines (Vector3[]) 由多条线的路径数组组成的数组 必填
updatable (boolean) 是否允许物体更新 false
instance (LineMesh) 用来更新物体实例 null
colors (Color4[]) 每一个点的颜色 null
useVertexAlpha (boolean) 是否使用颜色透明度 true

通过color属性添加颜色

linesystem.color = new BABYLON.Color3(1, 0, 0);

带状物体

    我们需要设置 pathArray 选项来创建带状物体。如果需要更新形状时,需要设置 pathArrayinstance 选项。

示例:

// creates an instance
var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths}, scene);

// updates the existing instance of ribbon : no need for the parameter scene
ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths, instance: ribbon});
选项 值类型&说明 默认值
pathArray (Vector3[][])多个三维向量数组组成的数组,是生成带状物体路径的必需参数 必填
closeArray (boolean) 带状物体是否关闭路径 false
closePath (boolean) 每一个带状面的路径是否关闭 false
offset (number) 当pathArray只有一个路径时生效 路径长度的一半
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
instance (LineMesh) 用于更新形状的实例 null
invertUV (boolean) to swap the U and V coordinates at geometry construction time (texture rotation of 90°) false

Playground 创建带状物体的实例
Playground 创建一个可更新的带状物体的实例

管状物体

    我们需要设置 path 选项来创建管状物体。如果需要更新形状时,需要设置 pathinstance 选项。我们也可以设置radius,radiusFunctionarc

示例:

// creates a tube
var tube = BABYLON.MeshBuilder.CreateTube("tube", {path: myPath}, scene);

// updates the existing instance of tube : no need for the parameter scene
tube = BABYLON.MeshBuilder.CreateTube("tube", {path: myPath, instance: tube});
选项 值类型&说明 默认值
path (Vector3[])三维向量数组,是生成管状物体路径的必需参数 必填
radius (number) 管的半径 1
tessellation (boolean) 管状物体表面的段段数(数值越大,越接近一个圆) 64
radiusFunction (function(i, distance)) 根据传入的参数(i, distance)返回的半径的回调函数 null
cap (number) 形状的填充面,属性值有 NO_CAP(0)顶面和底面都不填充, CAP_START(1)填充顶面, CAP_END(2)填充底面, CAP_ALL(3)两面都填充 NO_CAP
arc (number)圆周率(纬度方向切割),取值范围0到1,0.5相当于一个半球 1
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
instance (LineMesh) 用于更新形状的实例 null
invertUV 在几何构造时交换U和V坐标(纹理旋转90°) false

Playground 创建管状物体的实例
Playground 创建一个可更新的管状物体的实例

挤压形状

    我们需要设置 shapepath选项来创建挤压形状物体。如果需要更新形状时,需要设置 shape,pathinstance 选项。我们也可以设置scalerotation.

    不论我们想往那个方向挤压形状,被挤压的基本面都应该基于XOY平面,即z分量应该是0。通过保持x和y分量不变,z分量不为零,但尽量不要使形状偏离基本面太远来进行挤压。否则结果将与你预期的不一样。

示例:

// creates an extended shape
var extruded = BABYLON.MeshBuilder.ExtrudeShape("ext", {shape: myShape, path: myPath}, scene);

// updates the existing instance of extruded : no need for the parameter scene
extruded = BABYLON.MeshBuilder.ExtrudeShape("ext", {shape: myShape, path: myPath, scale: newScale, rotation: newRotation instance: extruded});
选项 值类型&说明 默认值
shape (Vector3[])三维向量数组,XOY面的各个顶点的坐标(顺时针方向) 必填
path (Vector3[])三维向量数组,挤压轴(形状的中心轴)的路径 必填
scale (number) 形状物体的缩放值(比例尺) 1
rotation (number) 沿中心轴每一步旋转值(旋转的次数取决与中心轴的path的坐标数) 0
cap (number) 形状的填充面,属性值有 NO_CAP(0)顶面和底面都不填充, CAP_START(1)填充顶面, CAP_END(2)填充底面, CAP_ALL(3)两面都填充 NO_CAP
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
instance (LineMesh) 用于更新形状的实例 null
invertUV (boolean) 在几何构造时交换U和V坐标(纹理旋转90°) false

自定义挤压形状

    我们需要设置 shapepath选项来创建自定义挤压形状物体。如果需要更新形状时,需要设置 shape,pathinstance 选项。我们也可以设置rotationFunctionscaleFunction.

示例:

//creates an instance of a Custom Extruded Shape
var extruded = BABYLON.MeshBuilder.ExtrudeShapeCustom("ext", {shape: myShape, path: myPath}, scene);

// updates the existing instance of extruded : no need for the parameter scene
extruded = BABYLON.MeshBuilder.ExtrudeShapeCustom("ext", {shape: myShape, path: myPath, scaleFunction: myScaleF, rotationFunction: myRotF instance: extruded});
选项 值类型&说明 默认值
shape (Vector3[])三维向量数组,XOY面的各个顶点的坐标(顺时针方向) 必填
path (Vector3[])三维向量数组,挤压轴(形状的中心轴)的路径 必填
scaleFunction (function(i, distance) ) 根据参数(i, distance) 返回scale值的函数 {return 1;}
rotationFunction (function(i, distance) )根据参数(i, distance) 返回rotation值的函数 {return 0;}
ribbonClosePath (boolean) 是否闭合被挤压的形状物体的路径 示例 false
ribbonCloseArray (boolean) 是否闭合挤压的路径 示例 false
cap (number) 形状的填充面,属性值有 NO_CAP(0)顶面和底面都不填充, CAP_START(1)填充顶面, CAP_END(2)填充底面, CAP_ALL(3)两面都填充 NO_CAP
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
instance (LineMesh) 用于更新形状的实例 null
invertUV (boolean) 在几何构造时交换U和V坐标(纹理旋转90°) false

车床Lathe

    我们需要设置 shape 选项来创建物体。
示例:

var lathe = BABYLON.MeshBuilder.CreateLathe("lathe", {shape: myShape}, scene);
选项 值类型&说明 默认值
shape (Vector3[])三维向量数组, 车床中刀片的坐标位置(XOY截面的坐标点)必填
radius (number) 车床的半径(X轴坐标点的缩放比例) 1
tessellation (number) 侧面的径向分段数 64
arc (number) 圆周率(纬度方向切割),取值范围0到1 1
cap (number) 形状的填充面,属性值有 NO_CAP(0)顶面和底面都不填充, CAP_START(1)填充顶面, CAP_END(2)填充底面, CAP_ALL(3)两面都填充 NO_CAP
closed (boolean) 设置圆周是否闭合,如果设置 arc 属性时应该将该选项设置为 false false
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
instance (LineMesh) 用于更新形状的实例 null
invertUV (boolean) 在几何构造时交换U和V坐标(纹理旋转90°) false

不规则多边形物体 Non Regular Polygon

    需要注意的是: CreatePolygon 使用了第三方库Earcut,所以当我们在非playground项目中使用时,我们需要引入它的cdn或者直接下载 npm包

    我们需要设置 shape 选项来创建物体。

示例:

var polygon = BABYLON.MeshBuilder.CreatePolygon("polygon", {shape: myShape, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: myFrontUVs, backUVs: myBackUVs}, scene);
选项 值类型&说明 默认值
shape (Vector3[]) 三维向量数组,多边形的顶点坐标必填
holes (Vector3[]) 多边形中掏空的形状的坐标点,每个掏空的形状是一个连续的三维向量数组 []
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE
frontUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)
backUVs (Vector4) 只有设置sideOrientation 为 DOUBLESIDE 时生效 Vector4(0,0, 1,1)

更多关于PolygonMeshBuilder

挤压不规则多边形物体 Extruded Non Regular Polygon

    需要注意的是: CreatePolygon 使用了第三方库Earcut,所以当我们在非playground项目中使用时,我们需要引入它的cdn或者直接下载 npm包

    我们需要设置 shapedepth 选项来创建物体。

示例:

var polygon = BABYLON.MeshBuilder.ExtrudePolygon("polygon", {shape: myShape, depth: 2, faceUV: myUVs}, scene);
选项 值类型&说明 默认值
shape (Vector3[]) 三维向量数组,多边形的顶点坐标必填
depth (number) 物体的深度 必填
faceColors (Color4[]) 数值长度为3,分别对应顶面,侧面和底面,每一面的颜色 每一面Color4(1, 1, 1, 1)
faceUV (Vector4[]) 数组长度为3, UVs(0, 0, 1, 1) for each side
holes (Vector3[]) 多边形中掏空的形状的坐标点,每个掏空的形状是一个连续的三维向量数组 []
updatable (boolean) 是否允许物体更新 false
sideOrientation (number) 用户可以看到的面 DEFAULTSIDE

掏空形状的所有坐标点应该在XOZ平面上,像这样的BABYLON.Vector3(x, 0, z)顺序是逆时针方向

更多关于PolygonMeshBuilder

延伸阅读

了解更多的选项信息

Side Orientation
Updatable
Face UV and Face Colors
Front and Back UV

基础 - L1

Mesh Overview
Set Shapes 101
Parametric Shapes 101
Parametric Shapes
Polyhedra Shapes
Tiled Planes and Boxes
Decals

中级 - L2

Ribbons In Detail

高级 - L3

Maths Makes Ribbons
How To Draw 3D Curves

贡献者

翻译: 阿恒 cnblogs
校对: Catherine catherine__long@126.com
技术支持: 吉吉国王 jijiking@office2.cn / Dushusir github

参与贡献? 联系sevice@office2.cn