three.jsaugmented-realityaframeweb-ar

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


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


Solution

  • 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