Default text looks poor in front of planes. Have render-order component?

Description:

Without render-order:

Controlling render-order:

AFRAME.registerSystem('render-order', {
  schema: {type: 'array'},

  init: function () {
    this.el.renderer.sortObjects = true;
  },

  update: function () {
    this.order = {};
    for (i = 0; i < this.data.length; i++) {
      this.order[this.data[i]] = i;
    }
  }
});

Example render order component:

```js
AFRAME.registerComponent('render-order', {
  schema: {type: 'string'},

  init: function () {
    this.set = this.set.bind(this);
    this.el.addEventListener('object3dset', evt => {
      evt.detail.object.traverse(this.set);
    });
  },

  update: function () {
    this.el.object3D.traverse(this.set);
  },

  set: function (node) {
    // String (named order).
    if (isNaN(this.data)) {
      node.renderOrder = this.system.order[this.data];
    } else {
      node.renderOrder = parseFloat(this.data);
    }
  }
});

<a-scene render-order="background, menu, menutext">
  <a-entity render-order="menu" geometry></a-entity>
  <a-entity render-order="menutext" text></a-entity>
  <a-entity render-order="2.5"></a-entity>
</a-scene>

• A-Frame Version:
• Platform / Device:
• Reproducible Code Snippet or URL:

No repository file or test is named. Start with the supplied render-order system and component examples, then inspect how A-Frame exposes the renderer and object3D behavior. Done means a render-order component can control text placement relative to planes and reproduces the improved result shown in the issue.