【babylonjs】babylonjs实践（十一）--画线

背景

工作太忙，影响学习了。

接着开始学习babylon，前面绘制基本元素以及基本的相机等知识。

API

CreateLines

                var myPoints = [
                    new BABYLON.Vector3(0, 0, 0),
                    new BABYLON.Vector3(10, 0, 10),
                    new BABYLON.Vector3(0, 0, 10)
                ];
                var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

说说CreateLines的配置项

option	value	default value
points	(Vector3[])  array of Vector3, the path of the line REQUIRED
updatable	(boolean)  true if the mesh is updatable	false
instance	(LineMesh)  an instance of a line mesh to be updated	null
colors	(Color4[])  array of Color4, each point color	null
useVertexAlpha	(boolean)  false if the alpha blending is not required (faster)	true

如果是用Mesh那个库，api调用是这样的。

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

我们之前也说过，Mesh和Meshbuilder是等价的。

---

CreateDashedLines

                var myPoints = [
                    new BABYLON.Vector3(0, 0, 0),
                    new BABYLON.Vector3(10, 0, 10),
                    new BABYLON.Vector3(0, 0, 10)
                ];

                var line = BABYLON.MeshBuilder.CreateDashedLines("lines", {
                    points: myPoints,
                    dashNb: 50, //预期所有的实现的个数
                    dashSize: 1, //实线的大小
                    gapSize: 1 //间隔的大小
                }, scene);

option	value	default value
points	(Vector3[])  array of Vector3, the path of the line REQUIRED
dashSize	(number)  size of the dashes	3
gapSize	(number)  size of the gaps	1
dashNb	(number)  intended number of dashes	200
updatable	(boolean)  true if the mesh is updatable	false
instance	(LineMesh)  an instance of a line mesh to be updated	null

CreateLineSystem

前面讲了画线，那么CreateLineSystem就是画线的集合。

前面两个函数一般就是过家家，或者要放着for循环里用，CreateLineSystem用的比较多。

从效率上来说，n次CreateLine的渲染，效率远远低于CreateLineSystem。

所以就比较推荐用CreateLineSystem

                var myArray = [
                    myPoints,
                    [
                        new BABYLON.Vector3(-1, 0, -1),
                        new BABYLON.Vector3(-10, 0, -10),
                        new BABYLON.Vector3(0, 0, -10)
                    ]
                ]


                let lineSystem = BABYLON.MeshBuilder.CreateLineSystem("lineSystem", { lines: myArray }, scene);

option	value	default value
lines	(Vector3[][])  array of lines, each line being an array of successive Vector3 REQUIRED
updatable	(boolean)  true if the mesh is updatable	false
instance	(LineMesh)  an instance of a line system mesh to be updated	null
colors	(Color4[])  array of Color4, each point color	null
useVertexAlpha	(boolean)  false if the alpha blending is not required (faster)	true

画曲线

其实曲线的实现是由无限的直线拼接组成。接下来我们将通过CreateLines实现画一个圆。

                var myPoints = [];
                for(let i=0; i<=360; i++){
                    myPoints.push(new BABYLON.Vector3(10* Math.sin(i/180*Math.PI), 0, 10 * Math.cos(i/180*Math.PI))); 
                }
                var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

线条颜色

可以同points有一个colors的参数，见上面api。

但是比较方便的话，直接设置instance.color就可以了。

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