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 通过设置一些参数或者直接使用默认参数就可以创建出这些形状物体。有些选项很容易理解(如 size 和 diameter )，instance 选项会在下面进行解释，想要了解 faceUV 请各位移步到延伸阅读中去进一步探索。

路径

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

实例

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

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

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

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

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

线条

    我们可以通过 points 选项来创建一个线条，它的值是一个由一系列向量点组成的数组。如果需要更新线条的形状时，需要设置 points 和 instance 选项。如果我们在创建时设置了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});

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

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

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

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

虚线

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

示例:

// 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});

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

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

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

Playground 创建带颜色虚线的实例

线条系统

一种由互不相连的线组成的系统，这些线彼此独立，可能存在于它们自己的空间中。我们必须设置 lines 选项。如果需要更新，需要设置 lines 和 instance 选项。如果我们在创建时设置了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});

• Playground 创建线条系统的实例
• Playground 创建可更新的线条系统的实例

通过color属性添加颜色

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

• Playground 创建带颜色的线条系统的实例

带状物体

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

示例:

// 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});

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

管状物体

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

示例:

// 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});

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

挤压形状

    我们需要设置 shape 和 path选项来创建挤压形状物体。如果需要更新形状时，需要设置 shape,path 和 instance 选项。我们也可以设置scale和rotation.

    不论我们想往那个方向挤压形状，被挤压的基本面都应该基于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});

• Playground 创建以Z轴中心轴的挤压形状的实例
• Playground 创建以Z轴为中心轴的挤压形状的缩放与旋转的实例
• Playground 创建以Y轴为中心轴的挤压形状的实例
• Playground 创建以Y轴为中心轴的挤压形状的缩放与旋转的实例

自定义挤压形状

    我们需要设置 shape 和 path选项来创建自定义挤压形状物体。如果需要更新形状时，需要设置 shape,path 和 instance 选项。我们也可以设置rotationFunction和scaleFunction.

示例:

//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});

• Playground 创建自定义挤压形状物体的实例
• Playground 创建可更新自定义挤压形状物体的实例

车床Lathe

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

var lathe = BABYLON.MeshBuilder.CreateLathe("lathe", {shape: myShape}, scene);

• Playground 创建车床形状物体的实例
• Playground 创建可更新车床形状物体的实例

不规则多边形物体 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);

• Playground 创建不规则多边形的实例

更多关于PolygonMeshBuilder

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

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

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

示例:

var polygon = BABYLON.MeshBuilder.ExtrudePolygon("polygon", {shape: myShape, depth: 2, faceUV: myUVs}, scene);

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

• Playground 创建挤压不规则多边形的实例

更多关于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