src/components/text.js
function () {
    var anchor;
    var baseline;
    var el = this.el;
    var data = this.data;
    var geometry = this.geometry;
    var geometryComponent;
    var height;
    var layout;
    var mesh = this.mesh;
    var textRenderWidth;
    var textScale;
    var width;
    var x;
    var y;

    if (!geometry.layout) { return; }

    // Determine width to use (defined width, geometry's width, or default width).
    geometryComponent = el.getAttribute('geometry');
    width = data.width || (geometryComponent && geometryComponent.width) || DEFAULT_WIDTH;

    // Determine wrap pixel count. Either specified or by experimental fudge factor.
    // Note that experimental factor will never be correct for variable width fonts.
    textRenderWidth = computeWidth(data.wrapPixels, data.wrapCount,
                                   this.currentFont.widthFactor);
    textScale = width / textRenderWidth;

    // Determine height to use.
    layout = geometry.layout;
    height = textScale * (layout.height + layout.descender);

    // Update geometry dimensions to match text layout if width and height are set to 0.
    // For example, scales a plane to fit text.
    if (geometryComponent && geometryComponent.primitive === 'plane') {
      if (!geometryComponent.width) { el.setAttribute('geometry', 'width', width); }
      if (!geometryComponent.height) { el.setAttribute('geometry', 'height', height); }
    }

    // Calculate X position to anchor text left, center, or right.
    anchor = data.anchor === 'align' ? data.align : data.anchor;
    if (anchor === 'left') {
      x = 0;
    } else if (anchor === 'right') {
      x = -1 * layout.width;
    } else if (anchor === 'center') {
      x = -1 * layout.width / 2;
    } else {
      throw new TypeError('Invalid text.anchor property value', anchor);
    }

    // Calculate Y position to anchor text top, center, or bottom.
    baseline = data.baseline;
    if (baseline === 'bottom') {
      y = 0;
    } else if (baseline === 'top') {
      y = -1 * layout.height + layout.ascender;
    } else if (baseline === 'center') {
      y = -1 * layout.height / 2;
    } else {
      throw new TypeError('Invalid text.baseline property value', baseline);
    }

    // Position and scale mesh to apply layout.
    mesh.position.x = x * textScale + data.xOffset;
    mesh.position.y = y * textScale;
    // Place text slightly in front to avoid Z-fighting.
    mesh.position.z = data.zOffset;
    mesh.scale.set(textScale, -1 * textScale, textScale);
  }
function () {
    var anchor;
    var baseline;
    var el = this.el;
    var data = this.data;
    var geometry = this.geometry;
    var geometryComponent;
    var height;
    var layout;
    var mesh = this.mesh;
    var textRenderWidth;
    var textScale;
    var width;
    var x;
    var y;

    if (!geometry.layout) { return; }

    // Determine width to use (defined width, geometry's width, or default width).
    geometryComponent = el.getAttribute('geometry');
    width = data.width || (geometryComponent && geometryComponent.width) || DEFAULT_WIDTH;

    // Determine wrap pixel count. Either specified or by experimental fudge factor.
    // Note that experimental factor will never be correct for variable width fonts.
    textRenderWidth = computeWidth(data.wrapPixels, data.wrapCount,
                                   this.currentFont.widthFactor);
    textScale = width / textRenderWidth;

    // Determine height to use.
    layout = geometry.layout;
    height = textScale * (layout.height + layout.descender);

    // Update geometry dimensions to match text layout if width and height are set to 0.
    // For example, scales a plane to fit text.
    if (geometryComponent && geometryComponent.primitive === 'plane') {
      if (!geometryComponent.width) { el.setAttribute('geometry', 'width', width); }
      if (!geometryComponent.height) { el.setAttribute('geometry', 'height', height); }
    }

    // Calculate X position to anchor text left, center, or right.
    anchor = data.anchor === 'align' ? data.align : data.anchor;
    if (anchor === 'left') {
      x = 0;
    } else if (anchor === 'right') {
      x = -1 * layout.width;
    } else if (anchor === 'center') {
      x = -1 * layout.width / 2;
    } else {
      throw new TypeError('Invalid text.anchor property value', anchor);
    }

    // Calculate Y position to anchor text top, center, or bottom.
    baseline = data.baseline;
    if (baseline === 'bottom') {
      y = 0;
    } else if (baseline === 'top') {
      y = -1 * layout.height + layout.ascender;
    } else if (baseline === 'center') {
      y = -1 * layout.height / 2;
    } else {
      throw new TypeError('Invalid text.baseline property value', baseline);
    }

    // Position and scale mesh to apply layout.
    mesh.position.x = x * textScale + data.xOffset;
    mesh.position.y = y * textScale;
    // Place text slightly in front to avoid Z-fighting.
    mesh.position.z = data.zOffset;
    mesh.scale.set(textScale, -1 * textScale, textScale);
  }
function ( ) { var anchor ; var baseline ; var el = this . el ; var data = this . data ; var geometry = this . geometry ; var geometryComponent ; var height ; var layout ; var mesh = this . mesh ; var textRenderWidth ; var textScale ; var width ; var x ; var y ; if ( ! geometry . layout ) { return ; } // Determine width to use (defined width, geometry's width, or default width). geometryComponent = el . getAttribute ( 'geometry' ) ; width = data . width || ( geometryComponent && geometryComponent . width ) || DEFAULT_WIDTH ; // Determine wrap pixel count. Either specified or by experimental fudge factor. // Note that experimental factor will never be correct for variable width fonts. textRenderWidth = computeWidth ( data . wrapPixels , data . wrapCount , this . currentFont . widthFactor ) ; textScale = width / textRenderWidth ; // Determine height to use. layout = geometry . layout ; height = textScale * ( layout . height + layout . descender ) ; // Update geometry dimensions to match text layout if width and height are set to 0. // For example, scales a plane to fit text. if ( geometryComponent && geometryComponent . primitive === 'plane' ) { if ( ! geometryComponent . width ) { el . setAttribute ( 'geometry' , 'width' , width ) ; } if ( ! geometryComponent . height ) { el . setAttribute ( 'geometry' , 'height' , height ) ; } } // Calculate X position to anchor text left, center, or right. anchor = data . anchor === 'align' ? data . align : data . anchor ; if ( anchor === 'left' ) { x = 0 ; } else if ( anchor === 'right' ) { x = - 1 * layout . width ; } else if ( anchor === 'center' ) { x = - 1 * layout . width / 2 ; } else { throw new TypeError ( 'Invalid text.anchor property value' , anchor ) ; } // Calculate Y position to anchor text top, center, or bottom. baseline = data . baseline ; if ( baseline === 'bottom' ) { y = 0 ; } else if ( baseline === 'top' ) { y = - 1 * layout . height + layout . ascender ; } else if ( baseline === 'center' ) { y = - 1 * layout . height / 2 ; } else { throw new TypeError ( 'Invalid text.baseline property value' , baseline ) ; } // Position and scale mesh to apply layout. mesh . position . x = x * textScale + data . xOffset ; mesh . position . y = y * textScale ; // Place text slightly in front to avoid Z-fighting. mesh . position . z = data . zOffset ; mesh . scale . set ( textScale , - 1 * textScale , textScale ) ; }
Update layout with anchor, alignment, baseline, and considering any meshes.
Update layout with anchor alignment baseline and considering any meshes .