Materials

The material component defines the appearance of an entity. The built-in shaders allow us to define properties such as color, opacity, or textures.

Here is an example defining a red material using the default “standard” shading model:

<a-entity
  geometry="primitive: box"
  material="color: red"
></a-entity>

Here is an example of using the “flat” built-in shading model:

<a-entity
  geometry="primitive: box"
  material="shader: flat; color: red"
></a-entity>

You can also specify the opacity of the material.

<a-entity
  geometry="primitive: box"
  material="color: red; opacity: .5"
></a-entity>

You can apply textures that you’ve specified in your <a-assets> like this:

<a-entity
  geometry="primitive: box"
  material="src: #texture1"
></a-entity>

If you’re using textures with alpha transparency, you can tell A-Frame to render these after everything else so that the transparency works:

<a-entity
  geometry="primitive: box"
  material="src: #texture1; transparent: true"
></a-entity>

Further reading:

• A-Frame Docs: Material