How to play content in ar after detection of marker without marker all the time(one time detection and then play)

Question

I started some of the examples in web ar, I found that all example works on nft or marker. I want to make something like it should not always depend upon marker or nft. As soon as marker is detected I should be able to play the content in AR without the need of marker anymore.

Sorry, my English sucks. Waiting for help. Thanks

Answer 1

You can keep the element on-screen where the marker was detected.

Just wait until the marker is detected, and copy its position, rotation and scale to the entity with the content. A component doing this could look like this:

AFRAME.registerComponent('video-logic', {
    init: function () {
        const marker = document.querySelector("a-marker");

        marker.addEventListener("markerFound", evt => {
          // you can wait a while so the content won't appear somewhere on the border
          setTimeout(evt => {
            this.el.setAttribute("position", marker.getAttribute("position");
            this.el.setAttribute("rotation", marker.getAttribute("rotation");
          }, 500)
        })
    }
});

// The content is separate from the marker
//<a-box material="src: #video;" video-logic></a-box>
//<a-marker smooth="true" preset="hiro"></a-marker>

Something like I did here