Helpers for webgl projects

dat.js

import * as dat from 'dat.gui';

import config from './../config.json';

export class Configuration {
  constructor(color) {
    this.color = color;
  }
}

/**
 * @return {dat.gui.GUI}    dat.gui singleton
 */
export default (() => {
  if (!config.dev) {
    return;
  }

  let instance;

  if (!instance) {
    instance = new dat.GUI({
      name: 'Dat.Parent',
    });

    /**
     * Set a dat.gui color controller for THREE object
     * @param  {dat.gui} datObject the dat.gui object to add the color controller
     * @param  {THREE.*} threeObj  A THREE object with a color property
     */
    instance.setThreeColorChange = (datObject, threeObj) => {
      const objConf = new Configuration('#' + threeObj.color.getHexString());
      datObject.addColor(objConf, 'color').onChange(color => {
        threeObj.color.set(color);
      });
    };

    instance.setThreeGroupColorChange = (datObject, group, baseColor) => {
      const objConf = new Configuration(baseColor);

      datObject.addColor(objConf, 'color').onChange(color => {
        group.children.forEach(c => {
          c.material.color.set(color);
        });
      });
    };
  }

  return instance;
})();

geojson.js

/**
 * Format geojson data received from API to match geoJSON specs
 * @param  {JSON} geojson       the geojson data (not well formatted)
 * @return {GeoJSON}            Formatted geojson data
 */
export const formatGeojson = geojson => {
  const formatCoordinates = coordinates => {
    return coordinates.map(coordinate => {
      if (coordinate.constructor === Array) {
        return formatCoordinates(coordinate);
      }
      // Change all coordinates from String to Number to match geoJSON specs
      // More: https://macwright.org/2015/03/23/geojson-second-bite.html#coordinate
      return Number(coordinate);
    });
  };

  const formattedFeatures = geojson.features.map(feature => {
    return {
      ...feature,
      geometry: {
        ...feature.geometry,
        coordinates: formatCoordinates(feature.geometry.coordinates),
      },
    };
  });

  return {
    ...geojson,
    features: formattedFeatures,
  };
};

helpers.js

/**
 * Curve a mesh to match a sphere curve
 * @param  {THREE.Mesh} mesh   The mesh to curve
 * @param  {Number} radius The radius of the sphere
 * @return {THREE.Mesh}        Curved mesh
 */
export const curveMeshToSphere = (mesh, radius) => {
  const m = mesh.clone();
  m.updateMatrixWorld();
  m.geometry.vertices = m.geometry.vertices.map(v => {
    return m.worldToLocal(m.localToWorld(v).setLength(radius));
  });

  return m;
};

/**
 * rotate2d - Rotate a point in reference of a center with an angle
 * @param  {Object} center      The center point coordinates
 *                                x: x position
 *                                y: y position
 * @param  {Object} point       The point to rotate coordinates
 *                                x: x position
 *                                y: y position
 * @param  {Number} angle       The angle for the point's rotation
 * @return {[Number, Number]}   The rotated point coordinates
 */
export const rotate2d = (center, point, angle) => {
  const radians = (Math.PI / 180) * angle;
  const cos = Math.cos(radians);
  const sin = Math.sin(radians);
  return {
    x: cos * (point.x - center.x) + sin * (point.y - center.y) + center.x,
    y: cos * (point.y - center.y) - sin * (point.x - center.x) + center.y,
  };
};

/**
 * Calculate spherical coordinates from longitude and lattitude
 * @param  {Number} [longitude           Longitude of point
 * @param  {Number} latitude]            Lattitude of point
 * @param  {Number} radius               Radius of sphere
 * @return {THREE.Vector3}               Converted point
 */
export const vertex = ([longitude, latitude], radius) => {
  const lambda = (longitude * Math.PI) / 180;
  const phi = (latitude * Math.PI) / 180;
  return new THREE.Vector3(
    radius * Math.cos(phi) * Math.cos(lambda),
    radius * Math.sin(phi),
    -radius * Math.cos(phi) * Math.sin(lambda),
  );
};