线面物体

线面物体的一个共同特征是由多个点位构成的物体，点、线、面是现实世界的几何抽象表达，线和面在三维程序开发中用途非常多，如漫游轨迹、车辆和人员轨迹、测量用途、电子围栏、风险区、光墙、2.5D物体表达等。

本节介绍引擎内置线面物体的初始化方法与参数。

Line 线

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.Line({
    points: points,
})

Line2 线2

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.Line2({
    points: points,
    material: {
        linewidth: 0.01,
        worldUnits: false,
    }
})

CurveLine OD曲线

new VT.CurveLine({
    geometry: {
        startPosition: [-3, 0, 3],
        endPosition: [3, 0, -3],
        heightRatio: 1,
        pointNumber: 50,
        flipY: false,
    },
    line: {
        material: {
            color: "#FF9900",
            linewidth: 10,
            // opacity: 1,
            // transparent: true,
            // dashed: true,
            // dashOffset: undefined,
            // dashScale: 1.0,
            // dashSize: 0.2,
            // gapSize: 0.2,
            // worldUnits: true,
        }
    },
    arrow: {
        visible: false,
        length: 0.1,
        headHength: 0.2,
        headWidth: 0.3,
        material: {
            color: "#FF9900",
        }
    },
})

TubeLine 管线

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.TubeLine({
    points: points,
    geometry: {
        radius: 0.5,
        radialSegments: 20,
        startRad: 0,
        cornerRadius: 0.5,
    },
});

TubeLine2 管线2

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.TubeLine2({
    points: points,
    geometry: {
        tubularSegments: 64,
        radius: 1,
        radialSegments: 8,
        closed: false,
        curveType: 'centripetal', // 'catmullrom'
        tension: 0.5,
    },
});

RouteLine 路线

路线是具备宽度、拐弯弧度的线体

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.RouteLine({
    points: points,
    geometry: {
        width: 0.1,
        cornerRadius: 0.1,
        cornerSplit: 10,
        arrow: false,
    },
    material: {
        worldUnits: true,
    },
});

NavigationRoute 导航路线

导航路线是具备宽度、拐弯弧度、带动画效果的线体

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.NavigationRoute({
    points: points,
    geometry: {
        width: 0.5,
    },
    material: {
        "side": 2,
        "worldUnits": true,
        "map": {
            "image": "sdk:/resources/texture/arrow.png",
            "repeat": [0.2, 1]
        },
        "transparent": true,
        "color": "#04F8A6",
        "width": 0.05
    },
    animate: {
        enable: true,
        speed: 0.01,
    }
});

ExtrudeLine 挤出线

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.ExtrudeLine({
    points: points,
    geometry: {
        height: 1,
        width: 1,
        closed: false,
        curveType: 'catmullrom', // centripetal, chordal and catmullrom.
        tension: 0.5,
    },
});

Fence 围栏

Fence 是一个使用常规材质参数的围栏对象，常用于区域的绘制

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.Fence({
    points: points,
    geometry: {
        height: 1.0,
    },
    material: {
        side: 2,
        transparent: true,
    },
});

GradientFence 渐变围栏

GradientFence 渐变围栏是一个从底到顶产生渐变效果的围栏对象，常用于区域的绘制，它的效果参数由material下的uniforms对象参数决定

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.GradientFence({
    points: points,
    animate: false,
    geometry: {
        height: 1.0,
    },
    material: {
        side: 2,
        transparent: true,
        uniforms: {
            uColor: "#ffffff",
            uRatio: 1.0,
        }
    },
});

Polygon 多边形

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.Polygon({
    points: points,
    polygon: {
        material: {                    
            color: "#708090",
            opacity: 0.5,
            side: 2,
        }
    },
    line: {
        material: {                    
            color: Colors.DefaultGeometrySurface,
            dashed: false,
            dashScale: 1,
            dashSize: 1,
            dashOffset: 1,
            gapSize: 1,
            opacity: 1.0,
            linewidth: 1,
            worldUnits: false,
        }
    },
});

ExtrudePolygon 挤出多边形

const points = [[-1, 0, 0], [1, 0, 1], [1,0, 3]...];

new VT.ExtrudePolygon({
    points: points,
    geometry: {
        bevelEnabled: false,
        bevelThickness: 0.1,
        bevelSize: 0.2,
        bevelOffset: 0.1,
        bevelSegments: 1,
        depth: 1,
    },
    material: {
        side: 2,
    }
});