Threejs自定义圆柱体GridHelper

官方文档
GridHelper源码
第一次接触H5的项目开发，需要用到Three.js库。
需要构建一个有粗细的网格。

查找文档，发现GridHelper可以实现网格。
不过网格是平面的直线。和要求不符合。
特此查找GridHelper的源码，仿照其他独立的模块，自定义了一个有粗细的圆柱形线条网格CylinderGridHelper
我不熟悉JavaScript，如果有问题欢迎指正

/**
 * @author Coyamo 
 */

 /*
	r是圆柱线条半径，其他参数与GridHelper相同
	因为有了粗细，请注意粗的线条可能会与模型重合
 */
THREE.CylinderGridHelper = function (r,size, divisions, color1, color2) {
	THREE.Group.call(this);
	size = size || 10;
	divisions = divisions || 10;
	color1 = new THREE.Color(color1 !== undefined ? color1 : 0x444444);
	color2 = new THREE.Color(color2 !== undefined ? color2 : 0x888888);
	this.r=r;
	this.position.y -= r;
	var center = divisions / 2;
	var step = size / divisions;
	var halfSize = size / 2;
	
	for (var i = 0, j = 0, k = - halfSize; i <= divisions; i++ , k += step) {
		var material = new THREE.MeshBasicMaterial({ color: color1 });
		var material2 = new THREE.MeshBasicMaterial({ color: color2 });
		var temp=(i==center)?material:material2;
		var geometry = new THREE.CylinderBufferGeometry(r, r, size, 32);
		geometry.translate(0, 0, k);
		geometry.rotateZ(Math.PI / 2);
		var line = new THREE.Mesh(geometry, temp);
		var geometry2 = new THREE.CylinderBufferGeometry(r, r, size, 32);
		geometry2.translate(k, 0, 0);
		geometry2.rotateX(Math.PI / 2);
		var line2 = new THREE.Mesh(geometry2, temp);
		this.add(line2);
		this.add(line);
	}



}
THREE.CylinderGridHelper.prototype = Object.create(THREE.Group.prototype);
THREE.CylinderGridHelper.prototype.constructor = THREE.CylinderGridHelper;

用法

	grid = new THREE.CylinderGridHelper(0.02,40, 40, 0x808080, 0xa0b0c0);
    scene.add(grid);