Babylon.js 第27章创建参数化网格

Jake N

已于 2022-09-11 15:09:08 修改

阅读量994

点赞数 1

分类专栏： Babylon.js教程文章标签： javascript 开发语言 ecmascript

于 2022-09-09 21:26:44 首次发布

本文链接：https://blog.csdn.net/m0_73334402/article/details/126787943

版权

与网格不同，线条在创建后使用颜色属性而不是材质进行着色。( function(i, distance) )从。( function(i, distance) )从。

摘要由CSDN通过智能技术生成

一、线

1、绘制线

const options = {
    points: myPoints,//3维空间点数组
    updatable: true
}

let lines = BABYLON.MeshBuilder.CreateLines("lines", options, scene);
options.points[0].x +=6; 
options.instance = lines;
lines = BABYLON.MeshBuilder.CreateLines("lines", options);

options:

选项	价值	默认值
points	(Vector3[]) Vector3 的数组，行的路径REQUIRED
updatable	（布尔值）如果网格是可更新的，则为真	错误的
instance	(LineMesh)要更新的线网格实例	无效的
colors	(Color4[]) Color4的数组，每个点的颜色	无效的
useVertexAlpha	（布尔值）如果不需要 alpha 混合则为 false（更快）	真的

与网格不同，线条在创建后使用颜色属性而不是材质进行着色。

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

mesh:

let lines = BABYLON.Mesh.CreateLines("lines", points, scene);
let lines = BABYLON.Mesh.CreateLines("lines", points, scene, updatable, instance);

2、绘制曲线

三点圆弧：

    let arr=[
        new BABYLON.Vector3(10,1,0),
        new BABYLON.Vector3(10,1,10),
        new BABYLON.Vector3(15,10,20),
    ]
    let arc=BABYLON.Curve3.ArcThru3Points(arr[0],arr[1],arr[2],32,true,true)
    let arcline=BABYLON.MeshBuilder.CreateLines('arc',
        {points:arc.getPoints()})

arcThru3Points参数：

first Vector3弧必须经过的第一个点。
second Vector3弧必须经过的第二个点。
第三个 Vector3弧必须经过的第三个点。
步数越大，步数越大，弧线越详细。
关闭布尔可选，默认为 false，当 true 从第一点和第三点形成和弦时
fullCircle boolean可选，默认为 false，当 true 通过三个点形成完整的圆

此静态方法返回Curve3的一个实例。
只需使用 Curve3 getPoints()方法填充您的数组：getPoints()返回一个连续Vector3的数组。length()方法返回曲线长度。

二次贝塞尔曲线：

    let arr=[
        new BABYLON.Vector3(10,1,0),
        new BABYLON.Vector3(10,1,10),
        new BABYLON.Vector3(15,10,20),
    ]
    let arc=BABYLON.Curve3.CreateQuadraticBezier(arr[0],arr[1],arr[2],32)
    let arcline=BABYLON.MeshBuilder.CreateLines('arc',
        {points:arc.getPoints()})

CreateQuadraticBezier参数介绍：

origin : Vector3原点，
control : Vector3控制点，
destination : Vector3目标点，
nb_of_points：路径数组中想要的点数。

同样，只需使用 Curve3 getPoints()方法填充您的数组：getPoints()返回一个连续Vector3的数组。length()方法返回曲线长度。

三次贝塞尔曲线：

    let arr=[
        new BABYLON.Vector3.Zero(),
        new BABYLON.Vector3(30,30,40),
        new BABYLON.Vector3(-60,50,-10),
        new BABYLON.Vector3(30,-50,-20),
        new BABYLON.Vector3(-60,10,-20)
    ]
    let arc=BABYLON.Curve3.CreateCubicBezier(arr[0],arr[1],arr[2],arr[3],32)
    let arcline=BABYLON.MeshBuilder.CreateLines('arc',
        {points:arc.getPoints()})

参数：

origin : Vector3原点，
control1 : Vector3第一个控制点，
control2 : Vector3第二个控制点，
destination : Vector3目标点，
nb_of_points：对数组中所需的最终曲线点数进行编号。

此静态方法返回Curve3的一个实例。
只需使用 Curve3 getPoints()方法填充您的数组：getPoints()返回一个连续Vector3的数组。length()
方法返回曲线长度。

埃尔米特线：

    let arr=[
        new BABYLON.Vector3.Zero(),
        new BABYLON.Vector3(10,30,40),
        new BABYLON.Vector3(-60,10,-10),
        new BABYLON.Vector3(-30,-50,20),
    ]
    let arc=BABYLON.Curve3.CreateHermiteSpline(arr[0],arr[1],arr[2],arr[3],32)
    let arcline=BABYLON.MeshBuilder.CreateLines('arc',
        {points:arc.getPoints()})

参数：

p1 : Vector3原点，
t1 : Vector3原点正切向量，
p2 : Vector3目标点，
t2 : Vector3目标切线向量，
nbPoints：对数组中所需的最终曲线点数进行编号。

此静态方法返回Curve3的一个实例。
只需使用 Curve3 getPoints()方法填充您的数组：getPoints()返回一个连续Vector3的数组。length()
方法返回曲线长度。

三次埃尔米特线：

    let arr=[
        new BABYLON.Vector3.Zero(),
        new BABYLON.Vector3(10,30,40),
        new BABYLON.Vector3(-60,10,-10),
        new BABYLON.Vector3(-30,-50,20),
    ]
    let arc=BABYLON.Curve3.CreateCatmullRomSpline(arr,20,32,true)
    let arcline=BABYLON.MeshBuilder.CreateLines('arc',
        {points:arc.getPoints()})

参数：

points : Vector3曲线将通过的 Vector3 数组（控制点），
nbPoints：编号每个控制点之间的所需曲线点数，
closed：布尔可选，默认为false；可从 BJS V3.3 获得；当 true 形成闭合曲线时。

此静态方法返回Curve3的一个实例。
只需使用 Curve3 getPoints()方法填充您的数组：getPoints()返回一个连续Vector3的数组。length()
方法返回曲线长度。

创建自定义曲线：

自定义曲线可以使用起点连接上段曲线的终点。

var mySinus = [];
for (var i = 0; i < 30; i++) {
 mySinus.push( new BABYLON.Vector3(i, Math.sin(i / 10), 0) );
}
var mySinusCurve = new BABYLON.Curve3(mySinus);
var myFullCurve = mySinusCurve.continue(bezier3).continue(bezier2);

3、3D路径

var points = [v1, v2, ..., vn]; 
var path3d = new BABYLON.Path3D(points);

	var path3d = new BABYLON.Path3D(points);
    //切线
	var tangents = path3d.getTangents();
    //法线
	var normals = path3d.getNormals();
    //副法线
	var binormals = path3d.getBinormals();
    //曲线
	var curve = path3d.getCurve();

方法：

getTangents，getNormals还有getBinormals一些其他的方法Path3D，getCurve方法返回为创建对象而提供getCurve的初始数组的副本。

var distances = path3d.getDistances();

该getDistances方法按点的顺序返回从一个曲线点到下一个曲线点的距离数组，其中 0 是第一个距离。

slice方法返回一个新的 Path3D，它是原始路径的子路径（切片）。它采用从 0.0 到 1.0 的开始和结束位置，或从 1.0 回绕的负值

为了避免内存重新分配（例如在渲染循环中），因为给定的点数Path3D组是在内部复制的，您可以使用其update()方法更新现有对象。

该getClosestPositionTo函数返回从 0.0 到 1.0 的沿任意 Vector3 的路径最近的虚拟点的位置。

除了第一个法线外，还有两个参数：

raw, 布尔值,默认为false。如果为真，