Keep models 3D or videos always visible using MindAR

One of the most frustrating default behaviors in WebAR development (specifically with libraries like MindAR or A-Frame) is content volatility: the moment your camera loses the image target, your 3D model or video vanishes instantly.

For many simple experiences, this logic holds up. But what if you are building a more immersive experience?

• What if you want a video to keep playing while the user looks around?.
• What if you want to «freeze» a 3D model in mid-air so the user can inspect it closely without holding their phone perfectly still over a card?.

If you’ve tried to solve this using arSystem.pause(true), you probably hit a wall: it pauses the video, but it also kills the tracking engine, making it impossible to recover the target later.

Take a look at the pull requests on the MindAR GitHub:

• Features #38 #30 #31: keep objects always visible by maxfyk · Pull Request #327 · hiukim/mind-ar-js

In today’s post, I’m going to explain the «Decoupling Architecture» we used to solve this problem effectively.

The Problem: The Parent-Child Trap

In 99% of MindAR tutorials, you are taught to structure your HTML like this:

<a-entity mindar-image-target="targetIndex: 0">
<!-- The model is a CHILD of the target -->
<a-gltf-model src="#myModel"></a-gltf-model>
</a-entity>

The logic is simple: The Target is the parent. When MindAR detects the target is lost, it sets visible=»false» on the parent. By inheritance, every child inside that entity also becomes invisible.

Looking to create custom .mind targets for your MindAR projects? Check out the link below.

• Compilador de Marcadores AR | Crea Realidad Aumentada Gratis

The Solution: The «Decoupling» Secret

To achieve persistence, we must break this family relationship. The content cannot be a child of the target; it must be its sibling.

Instead of nesting, we place the content directly in the scene root (<a-scene>). Then, we create a custom relationship script that acts like a manual «magnet.»

• When Target Found (targetFound – Event): We turn the magnet ON. The content snaps to the target’s position and follows it.
• When Target Lost (targetLost – Event): This is the key. Instead of hiding the object (the default behavior), we simply turn the magnet OFF.

The result? The object stops moving but remains rendered in the 3D world at the last known coordinate where the marker was seen. It stays «frozen» in reality, waiting for you to find the marker again.

🔒 Want the code?

Below, I provide the full, copy-paste solution, including:

• The correct HTML structure to decouple your assets.
• The custom A-Frame Component (follow-target) that handles the «magnet» logic.
• The precise Event Listeners to handle the freeze/unfreeze mechanic without breaking the AR engine.

Join my Patreon to unlock the full tutorial and source code below (Click the image)! 👇

Check this out:

• Crea Realidad Aumentada Fácil y Gratis con este Editor Web
• Como agregar y editar texto e imágenes en realidad aumentada
• Crea realidad aumentada utilizando múltiples fotografías
• De Foto a Realidad Aumentada 3D: Magia con A-Frame y MindAR