Babylon.js-4 参数化形状

参考链接：https://doc.babylonjs.com/babylon101/parametric_shapes

参数化形状是由参数或者数学数据决定的形状或网格。

首先给出BABYLON.MeshBuilder.CreateLines和BABYLON.MeshBuilder.CreateDashedLines方法的参数

CreateLines方法的parameter参数如下：

  • colors?: Color4[] 颜色
  • instance?: Nullable 实例
  • points: Vector3[] (required) 点坐标
  • updatable?: boolean 可更新
  • useVertexAlpha?: boolean 使用顶点alpha通道

CreateDashedLines方法的parameter参数如下：

  • dashNb?: number 虚线数量 默认：200
  • dashSize?: number 虚线尺寸 默认：3
  • gapSize?: number 间隔尺寸 默认：1
  • instance?: LinesMesh 实例
  • points: Vector3[] (required) 点坐标
  • updatable?: boolean 可更新
  • dashSize与gapSize是一个比值，由dashNb,dashSize,gapSize共同决定虚线样式

我们使用BABYLON.MeshBuilder.CreateLines生成一些线，我们先定义三个点(0,0,0),(0,1,1),(0,1,0)，然后根据这三个点形成两条线段。首先我们将三个点放入一个数组中：

1
2
3
4
5
const points = [
    new BABYLON.Vector3(0,0,0),
    new BABYLON.Vector3(0,1,1),
    new BABYLON.Vector3(0,1,0)
]

接下来使用BABYLON.MeshBuilder.CreateLines方法将他们连接起来：

1
const lines=BABYLON.MeshBuilder.CreateLines("lines",{points},sphere)

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const canvasLines = document.getElementById('renderCanvas-4-lines')
const engineLines = new BABYLON.Engine(canvasLines,true)
const sceneLines = new BABYLON.Scene(engineLines)
// 添加照相机
const cameraLines = new BABYLON.ArcRotateCamera("CameraLines",0,Math.PI/2, 4, new BABYLON.Vector3(0,0,0), sceneLines)
// 设置照相机可以控制
cameraLines.attachControl(canvasLines, false)
// 添加光源
const lightLines1 = new BABYLON.HemisphericLight("lightLines1", new BABYLON.Vector3(1, 1, 0), sceneLines)
const lightLines2 = new BABYLON.PointLight("lightLines2", new BABYLON.Vector3(0, 1, -1), sceneLines)
// TODO 修改代码为假设效果
const points = [
    new BABYLON.Vector3(0,0,0),
    new BABYLON.Vector3(0,1,1),
    new BABYLON.Vector3(0,1,0)
]
const ground=BABYLON.MeshBuilder.CreateLines("lines",{points},sceneLines)
engineLines.runRenderLoop(function(){sceneLines.render()})

效果如下：

现在我们不改变坐标，而将方法换为CreateDashedLines,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const canvasDashedLines = document.getElementById('renderCanvas-4-dashedlines')
const engineDashedLines = new BABYLON.Engine(canvasLines,true)
const sceneDashedLines = new BABYLON.Scene(engineLines)
// 添加照相机
const cameraDashedDashedLines = new BABYLON.ArcRotateCamera("CameraDashedLines",0,Math.PI/2, 4, new BABYLON.Vector3(0,0,0), sceneDashedLines)
// 设置照相机可以控制
cameraDashedDashedLines.attachControl(canvasDashedLines, false)
// 添加光源
const lightDashedDashedLines1 = new BABYLON.HemisphericLight("lightDashedLines1", new BABYLON.Vector3(1, 1, 0), sceneDashedLines)
const lightDashedDashedLines2 = new BABYLON.PointLight("lightDashedLines2", new BABYLON.Vector3(0, 1, -1), sceneDashedLines)
// TODO 修改代码为假设效果
const dashedLines=BABYLON.MeshBuilder.CreateDashedLines("dashedLines",{points,dashNb:30,dashSize:1,gapSize:1},sceneDashedLines)
engineDashedLines.runRenderLoop(function(){sceneDashedLines.render()})

效果如下：