{"size": 932, "ext": "js", "max_stars_repo_path": "src/lib/components/grid.js", "max_stars_repo_name": "xdossantos/mathworldvr", "max_stars_repo_stars_event_min_datetime": "2017-04-16T02:05:03.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-28T13:26:43.000Z", "max_issues_repo_path": "src/lib/components/grid.js", "max_issues_repo_name": "guyperl/mathworldvr", "max_issues_repo_issues_event_min_datetime": "2017-04-16T02:26:55.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-17T11:37:43.000Z", "max_forks_repo_path": "src/lib/components/grid.js", "max_forks_repo_name": "guyperl/mathworldvr", "max_forks_repo_forks_event_min_datetime": "2017-04-16T02:45:28.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-12T17:07:51.000Z"}
{"max_stars_count": 84, "max_issues_count": 18, "max_forks_count": 20, "avg_line_length": 24.5263157895, "max_line_length": 86, "alphanum_fraction": 0.6469957082}
import AFRAME, { THREE } from 'aframe';

/**
 * Grid component.
 */
AFRAME.registerComponent('grid', {
  schema: {
    size: { default: 10 },
    step: { default: 1 },
    colorCenterLine: { default: 'red' },
    colorGrid: { default: '0x808080' },
  },

  init() {
    const scene = this.el.object3D;
    const data = this.data;

    const size = data.size;
    const step = data.step;
    const colorCenterLine = data.colorCenterLine;
    const colorGrid = data.colorGrid;

    const gridHelperXY = new THREE.GridHelper(size, step, colorCenterLine, colorGrid);
    gridHelperXY.name = 'gridXY';
    scene.add(gridHelperXY);

    const gridHelperXZ = new THREE.GridHelper(size, step, colorCenterLine, colorGrid);
    gridHelperXZ.name = 'gridXZ';
    gridHelperXZ.rotation.z = Math.PI / 2;
    scene.add(gridHelperXZ);
  },

  remove() {
    const scene = this.el.object3D;
    scene.remove(scene.getObjectByName('grid'));
  }
});
