【babylonjs】babylonjs实践（十二）--画车道线

背景

前面一节就讲了独立的画线。这一章节结合有一个例子我们来画一个。

例子：画车道线

需求拆解

我们拿到道路数据，本质上就是一条条的线段，直接绘制出来就行。

但是要区分不能的线条类型。。

正文

单实线

拿了五条线的数据。

          // 单实线
                const line11 = [
                    new BABYLON.Vector3(0, 0, 0),
                    new BABYLON.Vector3(50, 0, 0)
                ]
                const line12 = [
                    new BABYLON.Vector3(0, 0, 10),
                    new BABYLON.Vector3(50, 0, 10)
                ]
                const line21 = [
                    new BABYLON.Vector3(0, 0, 10),
                    new BABYLON.Vector3(0, 0, 60)
                ]
                const line22 = [
                    new BABYLON.Vector3(-10, 0, 10),
                    new BABYLON.Vector3(-10, 0, 60)
                ]
                var line33 = [];
                for(let i=180; i<=270; i++){
                    line33.push(new BABYLON.Vector3(10* Math.sin(i/180*Math.PI), 0, 10 + 10 * Math.cos(i/180*Math.PI))); 
                }

                const singleSolidLineOptions = {
                    lines: [line11, line12, line21, line22, line33],
                    useVertexAlpha: false
                }
                BABYLON.MeshBuilder.CreateLineSystem('', singleSolidLineOptions, scene)

线宽

这个问题暂时没法解决 没找到width的配置项。 forum.babylonjs.com/t/setting-l…

做一种尝试 那么就画两条线来处理。 但是线宽的1px实际上展示的时候不是这么回事。

不行。

另外一种尝试就是用矩形。

如果用矩形实体的话距离远了会有看不清楚的问题，用线渲染不会有这个问题。还记得之前绘制车辆的时候，最开始不是用线框绘制的，在距离很高的天空往下看时车子看上去很模糊。

暂时放弃。

双黄线

     const computeOffsetPoint = (targetPoint, referencePoint, changeSide = false) => {
                    const offsetDirection = referencePoint.subtract(targetPoint).cross(new BABYLON.Vector3(0, 1, 0)).normalize()
                    const offsetDimension = 0.3

                    if (changeSide) {
                        offsetDirection.scaleInPlace(-1.0)
                    }

                    const offsetPoint = targetPoint.add(offsetDirection.scale(offsetDimension))

                    return offsetPoint
                }

                // 双黄线
                const line51 = [
                    computeOffsetPoint(new BABYLON.Vector3(0, 0, 5),new BABYLON.Vector3(50, 0, 5)),
                    computeOffsetPoint(new BABYLON.Vector3(50, 0, 5),new BABYLON.Vector3(100, 0, 5)),
                ]
                const line52 = [
                    computeOffsetPoint(new BABYLON.Vector3(-5, 0, 10),new BABYLON.Vector3(-5, 0, 60)),
                    computeOffsetPoint(new BABYLON.Vector3(-5, 0, 60),new BABYLON.Vector3(-5, 0, 110)),
                ]
                var line53 = [];
                for (let i = 180; i <= 270; i++) {
                    line53.push(new BABYLON.Vector3(5 * Math.sin(i / 180 * Math.PI), 0, 10 + 5 * Math.cos(i / 180 * Math.PI)));
                }
                var line54 = []
                for(let i = 0; i<line53.length-1; i++){
                    line54.push(computeOffsetPoint(line53[i], line53[i+1]))
                }

                const line511 = [
                    computeOffsetPoint(new BABYLON.Vector3(0, 0, 5),new BABYLON.Vector3(50, 0, 5), true),
                    computeOffsetPoint(new BABYLON.Vector3(50, 0, 5),new BABYLON.Vector3(100, 0, 5), true),
                ]
                const line521 = [
                    computeOffsetPoint(new BABYLON.Vector3(-5, 0, 10),new BABYLON.Vector3(-5, 0, 60), true),
                    computeOffsetPoint(new BABYLON.Vector3(-5, 0, 60),new BABYLON.Vector3(-5, 0, 110), true),
                ]
                var line541 = []
                for(let i = 0; i<line53.length-1; i++){
                    line541.push(computeOffsetPoint(line53[i], line53[i+1], true))
                }

                const options22 = {
                    lines: [line51, line52, line54, line511, line521, line541],
                    useVertexAlpha: false
                }
                var line = BABYLON.MeshBuilder.CreateLineSystem('', options22, scene)
                line.color = new BABYLON.Color3(1,1, 0)

效果如下

还有一点再次再讲。涉及computeOffsetPoint这个方法。

真实地图绘制

就是数据源的区别。

地图的数据是直接从ue中导出，然后转成json格式的。

每个项目中数据源的格式不一样，处理的时候对应处理上就行。

	"roadLine": [
		{
			"BoundaryPoints": [
				{
					"x": 349.93106079101563,
					"y": -202.75816345214844,
					"LineType": "solid",
					"LineColor": "white"
				},
                                
         ...

这样子的格式，一条道路由一个BoundaryPoints的数据组成。

每个元素为一个道路点，表明了坐标，和这个点出去的线的样式和颜色。