You can easily create the following materials :

Example :

  <PhongMaterial color="#ffffff" />

Props (v0.3)

colorColorString, Number#ffffff
propsProperties to apply to material, these properties will be watchedObject{}

You can use props to easily customize threejs material, e.g. :

  <PhongMaterial color="#ffffff" :props="{ transparent: true, opacity: 0.5 }" />

Here is an incomplete list of threejs material properties (to get the complete list please read :

colorColorString, Number#ffffff
depthTestWhether to have depth test enabled when rendering this material.Booleantrue
depthWriteWhether rendering this material has any effect on the depth buffer.Booleantrue
flatShadingDefine whether the material is rendered with flat shading.Booleanfalse
fogWhether the material is affected by fog.Booleantrue
opacityFloat in the range of 0.0 - 1.0 indicating how transparent the material is.Number1
sideDefines which side of faces will be rendered - front, back or both.NumberTHREE.FrontSide
transparentDefines whether this material is transparent.Booleanfalse
vertexColorsDefines whether vertex coloring is used.Booleanfalse

Access ThreeJS material

You should set a ref on your material :

<PhongMaterial ref="material" />

You can then access ThreeJS material in your component script :

const material = this.$ref.material.material;