whs/src/components/meshes/Box.js

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

import {
  Mesh,
  BoxBufferGeometry,
  BoxGeometry
} from 'three';

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

/**
 * @class Box
 * @category components/meshes
 * @description As told on Component definition, while you can pass any of the inherited params for this component construction, you will need to
 * pass specific parameters to build this mesh as a geometry object.
 * @classDesc
 * <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry"></iframe>
 * @param {Object} [params] - The params.
 * @extends module:core.MeshComponent
 * @memberof module:components/meshes
 * @example <caption>Creating a Box, and adding to app</caption>
 *  new Box({
 *    geometry: {
 *      width: 2,
 *      height: 2,
 *      depth: 2
 *    },
 *
 *    material: new THREE.MeshBasicMaterial({
 *      color: 0xffffff
 *    }),
 *
 *    position: [50, 60, 70]
 * }).addTo(app);
 */
class Box extends MeshComponent {

  /**
   * Default values for parameters
   * @member {Object} module:components/meshes.Box#defaults
   * @static
   * @default <pre>
   * {
   *   geometry: {
   *     width: 1,
   *     height: 1,
   *     depth: 1,
   *     widthSegments: 1,
   *     heightSegments: 1,
   *     depthSegments: 1
   *   }
   * }</pre>
   */
  static defaults = {
    ...MeshComponent.defaults,
    geometry: {
      width: 1,
      height: 1,
      depth: 1,
      widthSegments: 1,
      heightSegments: 1,
      depthSegments: 1
    }
  };

  /**
   * Instructions
   * @member {Object} module:components/meshes.Box#instructions
   * @static
   * @default geometry: ['width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegements']
   */
  static instructions = {
    ...MeshComponent.instructions,
    geometry: ['width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegements']
  };

  constructor(params = {}) {
    super(params, Box.defaults, Box.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.Box
   */
  build(params = this.params) {
    const {geometry, material} = this.applyBridge({
      geometry: this.buildGeometry(params),
      material: params.material
    });

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

  buildGeometry(params = {}) {
    const geometry = new (params.buffer ? BoxBufferGeometry : BoxGeometry)(
      params.geometry.width,
      params.geometry.height,
      params.geometry.depth,
      params.geometry.widthSegments,
      params.geometry.heightSegments,
      params.geometry.depthSegments
    );

    return geometry;
  }
}

export {
  Box
};