# MeshLine
# 创建MeshLine
使用引擎（Engine）的createMeshLine接口创建MeshLine。
import { QuadraticBezierCurve3, Vector3 } from 'three';
// 构建贝塞尔曲线
const curve = new QuadraticBezierCurve3(
new Vector3( -600.0 + i * 200.0, 0.0, -400.0 ),
new Vector3( -600.0 + i * 200.0, 600.0, 0.0 ),
new Vector3( -600.0 + i * 200.0, 0.0, 400.0 )
);
// 创建MeshLine
const entity = engine.createMeshLine( {
width: 20,
speed: 1,
map: 'assets/textures/flyLine.png',
transparent: true,
coordinates: curve.getPoints( 50 )
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
提示
MeshLine创建参数，详见MeshLineParameters。
# MeshLine属性
提示
使用MeshLine组件更新属性或调用接口。
import { MeshLine } from '@tx3d/core';
// 获取渲染组件
const meshLine = entity.getComponent( MeshLine );
1
2
3
4
2
3
4
🌏 width 宽度
// 获取MeshLine宽度
const width = meshLine.width;
// 设置MeshLine宽度
meshLine.width = 20.0;
1
2
3
4
5
2
3
4
5
🌏 color 颜色
// 获取MeshLine颜色
const color = meshLine.color;
// 设置MeshLine颜色
meshLine.color = '#ff00de';
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取MeshLine透明度
const opacity = meshLine.opacity;
// 设置MeshLine透明度
meshLine.opacity = 0.75;
1
2
3
4
5
2
3
4
5
🌏 sizeAttenuation 设置尺寸是否自动缩减
// 获取MeshLine尺寸是否自动缩减
const sizeAttenuation = meshLine.sizeAttenuation;
// 设置MeshLine尺寸是否自动缩减
meshLine.sizeAttenuation = false;
1
2
3
4
5
2
3
4
5
🌏 speed 速度
// 获取MeshLine速度
const speed = meshLine.speed;
// 设置MeshLine速度
meshLine.speed = 5.0;
1
2
3
4
5
2
3
4
5
🌏 dashArray Dash Array
// 获取Dash Array
const dashArray = meshLine.dashArray;
// 设置Dash Array
meshLine.dashArray = 0.5;
1
2
3
4
5
2
3
4
5
注意
dashArray取值范围在[ 0 ~ 1 ]区间。
🌏 dashRatio Dash Ratio
// 获取Dash Ratio
const dashRatio = meshLine.dashRatio;
// 设置Dash Ratio
meshLine.dashRatio = 0.7;
1
2
3
4
5
2
3
4
5
注意
dashRatio取值范围在[ 0 ~ 1 ]区间。
🌏 length 获取线长度，只读。
// 获取线总长度
const length = meshLine.length;
1
2
2
# MeshLine接口
🌏 setStencil 设置模板参数
import { GreaterEqualStencilFunc, ReplaceStencilOp } from 'three';
// 设置模板参数
meshLine.setStencil( {
stencilWrite: true, // 开启模板比较
stencilRef: 1.0, // 模板比较基准值
stencilFunc: GreaterEqualStencilFunc, // 模板比较方法
stencilZPass: ReplaceStencilOp // 模板比较和深度比较都成功时操作
} );
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
提示
模板参数，详见StencilParameters。
🌏 updateCoordinates 更新MeshLine坐标点
// 更新MeshLine坐标点
meshLine.updateCoordinates( [
[ 100.0, 0.0, 0.0 ],
[ 100.0, 0.0, -100.0 ],
[ 0.0, 0.0, -100.0 ]
] );
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8