Three.js 坐标网格 GridHelper

Question

通过 Three.js 类 GridHelper 可以创建一个坐标网格对象，GridHelper 本质上是对线模型对象 Line 的封装，纵横交错的直线构成一个矩形网格模型对象。

// 200表示网格模型的尺寸大小，25表示纵横细分线条数量
var gridHelper = new THREE.GridHelper(200, 25);
// gridHelper和普通的网格模型、线模型一样需要插入到场景中才会被渲染显示出来
scene.add(gridHelper);

GridHelper 类创建的网格平面默认与 AxesHelper 类创建的三维坐标轴 XOZ 平面是重合的,也就是说网格平面 GridHelper 默认垂直于y轴，也就是绿色的轴线，可以进行平移、旋转等操作。

// gridHelper对象的基类是线模型Line，可以像线模型一样设置position
// 沿着y轴平移到位置-55
gridHelper.position.y = -55

构造函数 GridHelper()

• 参数1：坐标格尺寸，默认为 10
• 参数2：坐标格细分次数，默认为 10.
• 参数3：中线颜色设置， 参数值是 Three.js 颜色对象 THREE.Color,THREE.Color 默认值 0x444444
• 参数4： 坐标格网格线颜色设置， 参数值是 Three.js 颜色对象 THREE.Color,THREE.Color 默认值 0x888888