Wrapup

That's more or less everything you need to know about face tracking in MindAR. It's extremely to use, you pick anchor points and put objects there.

To make a fully functional virtual try-on application, you just need to prepare more 3D objects and add them to the scene. Then you programmatically control their visibilities.

Toggle visibility

To toggle visibility, you can set a property "visible" for the model, e.g.

<a-entity mindar-face-target="anchorIndex: 10">
  <a-gltf-model rotation="0 -0 0" position="0 1.0 -0.5" scale="0.35 0.35 0.35" src="#hatModel" visible="false"></a-gltf-model>
</a-entity>

Full Example

The rest is just standard javascript and HTML, and we will not go into details. The full source code can be found here: Virtual Try-On Example