Materials

You can easily create the following materials :

Example :

<Box>
  <PhongMaterial color="#ffffff" />
</Box>

Name	Description	Type	Default
`color`	Color	String, Number	#ffffff
`props`	Properties to apply to material, these properties will be watched	Object	{}

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

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

Here is an incomplete list of threejs material properties (to get the complete list please read https://threejs.org/docs/#api/en/materials/Material) :

Name	Description	Type	Default
`color`	Color	String, Number	#ffffff
`depthTest`	Whether to have depth test enabled when rendering this material.	Boolean	true
`depthWrite`	Whether rendering this material has any effect on the depth buffer.	Boolean	true
`flatShading`	Define whether the material is rendered with flat shading.	Boolean	false
`fog`	Whether the material is affected by fog.	Boolean	true
`opacity`	Float in the range of 0.0 - 1.0 indicating how transparent the material is.	Number	1
`side`	Defines which side of faces will be rendered - front, back or both.	Number	THREE.FrontSide
`transparent`	Defines whether this material is transparent.	Boolean	false
`vertexColors`	Defines whether vertex coloring is used.	Boolean	false

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;

# Materials