whs/src/components/meshes/Line.js

Super-fast 3D framework for Web Applications & Games. Based on Three.js

import {
  Line as LineNative,
  BufferGeometry,
  Geometry,
  BufferAttribute,
  LineCurve3,
  Vector3
} from 'three';

import {MeshComponent} from '../../core/MeshComponent';

/**
 * @class Line
 * @category components/meshes
 * @description Line component is generated from a curve/line and amount of vectors that should be used (points).
 * @param {Object} [params] - The params.
 * @extends module:core.MeshComponent
 * @memberof module:components/meshes
 * @example <caption>Creating a Line, and adding to app</caption>
 * new Line({
 *   geometry: {
 *     curve: new THREE.LineCurve3(new THREE.Vector3(10, 10, 0), new THREE.Vector3(10, 30, 0))
 *   },
 *
 *   material: new THREE.MeshBasicMaterial({
 *     color: 0xffffff
 *   })
 * }).addTo(app);
 */
class Line extends MeshComponent {
  /**
   * Default values for parameters
   * @member {Object} module:components/meshes.Line#defaults
   * @static
   * @default <pre>
   * {
   *   curve: new LineCurve3(new Vector3(0, 0, 0), new Vector3(10, 0, 0)),
   *   points: 50
   * }
   * </pre>
   */
  static defaults = {
    ...MeshComponent.defaults,

    curve: null,
    points: 50
  };

  /**
   * Instructions
   * @member {Object} module:components/meshes.Line#instructions
   * @static
   * @default <pre>{
   *   geometry: ['curve', 'points']
   * }
   * </pre>
   */
  static instructions = {
    ...MeshComponent.instructions,
    geometry: ['curve', 'points']
  };

  constructor(params) {
    super(params, Line.defaults, Line.instructions);
  }

  /**
   * @method build
   * @description Build lifecycle creates a mesh using input params.
   * @param {Object} params Component parameters.
   * @return {THREE.Mesh} Built mesh
   * @memberof module:components/meshes.Line
   */
  build(params = this.params) {
    const {geometry, material} = this.applyBridge({
      geometry: this.buildGeometry(params),
      material: params.material
    });

    return this.applyBridge({mesh: new LineNative(geometry, material)}).mesh;
  }

  buildGeometry(params = {}) {
    const geometry = params.buffer ? new BufferGeometry() : new Geometry();

    if (params.buffer) {
      const pp = params.curve.getPoints(params.points);
      const verts = new Float32Array(pp.length * 3);

      for (let i = 0, max = pp.length; i < max; i++) {
        const i3 = i * 3;

        verts[i3] = pp[i].x;
        verts[i3 + 1] = pp[i].y;
        verts[i3 + 2] = pp[i].z;
      }

      geometry.addAttribute('position', new BufferAttribute(verts, 3));
    } else geometry.vertices = params.curve.getPoints(params.points);

    return geometry;
  }
}

export {
  Line
};