How to enable Additive Blending in A-Frame?

Question

What is the easiest way to enable Additive Blending in A-Frame? I see that the THREE.MeshStandardMaterial has a blending property which looks like what I need, but it is not exposed by the A-Frame material component.

Do I have to write a custom component to get the entity's material and set this property myself? It seems like this common requirement should already be catered for?

Answer 1

A-Frame 0.9.0 and above:

A-Frame now supports the blending property from version 0.9.0 and up. See https://aframe.io/docs/0.9.0/components/material.html#properties_blending

A-Frame 0.8.0 and older:

I went ahead and created my own Blend Mode component for this:

AFRAME.registerComponent('blendmode', {
  schema: {
    mode: {default: 'AdditiveBlending'} //Available Modes are: var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending" ];
  },

    dependencies: ['material'],

  update: function () {
    // entity data
    var el = this.el;
    var data = this.data;

      if (el.components.hasOwnProperty("material")) {
          var mat = el.components.material.material;
          mat.blending = THREE[data.mode];
      }
  }
});