Aframe and facetracker: hide object when no face is detected

Universal AR A-Frame
#1

Hello everyone, I have a technical question to ask:
I’m using Aframe with the facetracker and I want to hide the object positioned on the face whenever the facetracker doesn’t see a face because right now the object stays still where the last face was detected.
In three.js I would use

faceTracker.onNotVisible.bind(anchor => {
face.setAttribute('visible', false)
});

But I have no idea about how to get the onVisible and onNotVIsible event in frame.
help would be much appreciated, thanks

#2

Hi @augmentedidea,

Have you tried this:

<a-entity zappar-face id="my-face-tracker">
  <!-- PLACE CONTENT TO APPEAR ON THE IMAGE HERE -->
</a-entity>

<script>

let myFaceTracker = document.getElementById("my-face-tracker");

myFaceTracker.addEventListener("zappar-visible", () => {
  console.log("Face has become visible");
});

myFaceTracker.addEventListener("zappar-notvisible", () => {
  console.log("Face is no longer visible");
});

</script>

https://docs.zap.works/universal-ar/a-frame/face-tracking/

George

#3

Yes thank you so much for the quick response, this works! I don’t know how I missed that part in the docs :slight_smile: