使用Babylon.js绘制渐变Grid线方法参考

        在Babylon.js中有几种绘制线条的方法，这里先说一下使用LineMesh的方式。

        先看下效果：

        Grid绘制部分的代码参考如下：

var clearColor = new BABYLON.Color3(0.1, 0.1, 0.1);
var lineColor = new BABYLON.Color3(0.5, 0.5, 0.5);
var lineHeight = -15;
var range = 200;
var segCount = 20;
var spaceInterval = range / segCount;

for (var i = -range; i <= range; i += spaceInterval) {
	const points = [
		new BABYLON.Vector3(-range, lineHeight, i),
		new BABYLON.Vector3(0, lineHeight, i),
		new BABYLON.Vector3(range, lineHeight, i)
	];

	const colors = [
		clearColor,
		BABYLON.Color3.Lerp(lineColor, clearColor, Math.abs(i) / range),
		clearColor
	];

	const lines = BABYLON.MeshBuilder.CreateLines("lineZ_" + i, {
		points: points,
		colors: colors
	}, scene);
}

for (var i = -range; i <= range; i += spaceInterval) {
	const points = [
		new BABYLON.Vector3(i, lineHeight, -range),
		new BABYLON.Vector3(i, lineHeight, 0),
		new BABYLON.Vector3(i, lineHeight, range)
	];

	const colors = [
		clearColor,
		BABYLON.Color3.Lerp(lineColor, clearColor, Math.abs(i) / range),
		clearColor
	];

	const lines = BABYLON.MeshBuilder.CreateLines("lineX_" + i, {
		points: points,
		colors: colors
	}, scene);
}

         以上代码中的clearColor实际上就是背景颜色，由于使用LineMesh绘制线条时，并不支持透明绘制，所以我想的办法是让线条颜色在远端与背景颜色逐渐趋于相同，这样就感觉像透明了一样，这当然有局限性，因为如果使用了SkyBox背景就不成立，先这样，慢慢学。

        这个绘制线条的核心方法是BABYLON.MeshBuilder.CreateLines这个方法，其第一个参数是线条名称，第二个是描述线条属性的对象，在这个示例里面只给出了对象的前两个属性，就是顶点数组，颜色数组，第三个参数是场景。