Reference Source

src/viewer/scene/materials/LinesMaterial.js

  1. import {Material} from './Material.js';
  2. import {RenderState} from '../webgl/RenderState.js';
  3.  
  4. const PRESETS = {
  5.     "default": {
  6.         lineWidth: 1
  7.     },
  8.     "thick": {
  9.         lineWidth: 2
  10.     },
  11.     "thicker": {
  12.         lineWidth: 4
  13.     }
  14. };
  15.  
  16. /**
  17.  * @desc Configures the shape of "lines" geometry primitives.
  18.  *
  19.  * * Located at {@link Scene#linesMaterial}.
  20.  * * Globally configures "lines" primitives for all {@link VBOSceneModel}s.
  21.  *
  22.  * ## Usage
  23.  *
  24.  * In the example below, we'll customize the {@link Scene}'s global ````LinesMaterial````, then use
  25.  * an {@link XKTLoaderPlugin} to load a model containing line segments.
  26.  *
  27.  * [[Run this example](/examples/index.html#materials_LinesMaterial)]
  28.  *
  29.  * ````javascript
  30.  * import {Viewer, XKTLoaderPlugin} from "xeokit-sdk.es.js";
  31.  *
  32.  * const viewer = new Viewer({
  33.  *     canvasId: "myCanvas",
  34.  *     transparent: true
  35.  * });
  36.  *
  37.  * viewer.scene.camera.eye = [0, 0, 5];
  38.  * viewer.scene.camera.look = [0, 0, 0];
  39.  * viewer.scene.camera.up = [0, 1, 0];
  40.  *
  41.  * viewer.scene.linesMaterial.lineWidth = 3;
  42.  *
  43.  * const xktLoader = new XKTLoaderPlugin(viewer);
  44.  *
  45.  * const model = xktLoader.load({
  46.  *      id: "myModel",
  47.  *      src: "./models/xkt/Duplex.ifc.xkt"
  48.  * });
  49.  * ````
  50.  */
  51. class LinesMaterial extends Material {
  52.  
  53.     /**
  54.      @private
  55.      */
  56.     get type() {
  57.         return "LinesMaterial";
  58.     }
  59.  
  60.     /**
  61.      * Gets available LinesMaterial presets.
  62.      *
  63.      * @type {Object}
  64.      */
  65.     get presets() {
  66.         return PRESETS;
  67.     };
  68.  
  69.     /**
  70.      * @constructor
  71.      * @param {Component} owner Owner component. When destroyed, the owner will destroy this component as well.
  72.      * @param {*} [cfg] The LinesMaterial configuration
  73.      * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
  74.      * @param {Number} [cfg.lineWidth=1] Line width in pixels.
  75.      * @param {String} [cfg.preset] Selects a preset LinesMaterial configuration - see {@link LinesMaterial#presets}.
  76.      */
  77.     constructor(owner, cfg = {}) {
  78.  
  79.         super(owner, cfg);
  80.  
  81.         this._state = new RenderState({
  82.             type: "LinesMaterial",
  83.             lineWidth: null
  84.         });
  85.  
  86.         if (cfg.preset) { // Apply preset then override with configs where provided
  87.             this.preset = cfg.preset;
  88.             if (cfg.lineWidth !== undefined) {
  89.                 this.lineWidth = cfg.lineWidth;
  90.             }
  91.         } else {
  92.             this._preset = "default";
  93.             this.lineWidth = cfg.lineWidth;
  94.         }
  95.     }
  96.  
  97.     /**
  98.      * Sets line width.
  99.      *
  100.      * Default value is ````1```` pixels.
  101.      *
  102.      * @type {Number}
  103.      */
  104.     set lineWidth(value) {
  105.         this._state.lineWidth = value || 1;
  106.         this.glRedraw();
  107.     }
  108.  
  109.     /**
  110.      * Gets the line width.
  111.      *
  112.      * Default value is ````1```` pixels.
  113.      *
  114.      * @type {Number}
  115.      */
  116.     get lineWidth() {
  117.         return this._state.lineWidth;
  118.     }
  119.  
  120.     /**
  121.      * Selects a preset LinesMaterial configuration.
  122.      *
  123.      * Default value is ````"default"````.
  124.      *
  125.      * @type {String}
  126.      */
  127.     set preset(value) {
  128.         value = value || "default";
  129.         if (this._preset === value) {
  130.             return;
  131.         }
  132.         const preset = PRESETS[value];
  133.         if (!preset) {
  134.             this.error("unsupported preset: '" + value + "' - supported values are " + Object.keys(PRESETS).join(", "));
  135.             return;
  136.         }
  137.         this.lineWidth = preset.lineWidth;
  138.         this._preset = value;
  139.     }
  140.  
  141.     /**
  142.      * The current preset LinesMaterial configuration.
  143.      *
  144.      * Default value is ````"default"````.
  145.      *
  146.      * @type {String}
  147.      */
  148.     get preset() {
  149.         return this._preset;
  150.     }
  151.  
  152.     /**
  153.      * @private
  154.      * @return {string}
  155.      */
  156.     get hash() {
  157.         return ["" + this.lineWidth].join((";"));
  158.     }
  159.  
  160.     /**
  161.      * Destroys this LinesMaterial.
  162.      */
  163.     destroy() {
  164.         super.destroy();
  165.         this._state.destroy();
  166.     }
  167. }
  168.  
  169. export {LinesMaterial};