-1

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

Ramya Yadav
  • 1
  • 3
  • arjs works with markers and nft. There is also [WebXR AR](https://medium.com/samsung-internet-dev/use-new-augmented-reality-features-with-just-a-few-lines-of-code-with-webxr-and-aframe-c6f3f5789345), which doesn't need markers or nft. If you prefer arjs, the video could pop up where the marker was first detected and stay there (screen wise, not 'world position' wise) – Piotr Adam Milewski Sep 23 '21 at 12:44
  • Yes, I want to make the video pop up where the marker was first detected and stay there, any help or code will be appreciated.(means when the marker is detected, I can move my camera anywhere but still I can play video irrespective of marker) – Ramya Yadav Sep 24 '21 at 14:12
  • I have experienced lot of shakes while playing video or 3D model through marker, I guess this will fix that shaking issue and no need of holding camera in front of marker all the time. – Ramya Yadav Sep 24 '21 at 14:20

1 Answers1

0

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

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • Thanks for a solution but Will it work for nft (image tracking) also? – Ramya Yadav Oct 03 '21 at 14:44
  • Yup. Although i think that nft tracking has scaling issues, so It won't be as precise as markers. Same example but with [nft here](https://192.168.0.129:8080/webzamples/arjs/stay-on-screen-image.html) – Piotr Adam Milewski Oct 03 '21 at 15:42
  • Sir, I can't see video and a model, but can here a audio when the nft is detected from your example. – Ramya Yadav Oct 04 '21 at 08:11
  • @RamyaYadav do you have your work [glitch](https://glitch.com/) or somewhere on github? Or at least not a full project but a sample with the NFT detection – Piotr Adam Milewski Oct 04 '21 at 09:48
  • I have tried to implement your stay-on-screen script in my work, but I couldn't able to do it. My work: https://glitch.com/edit/#!/ghost-of live site : https://ghost-of.glitch.me Use this image: https://cdn.glitch.com/7fcfdaac-9d7f-4d8f-bad0-91ab3f0abc31%2Fghost.jpg?v=1633335957522 – Ramya Yadav Oct 04 '21 at 09:51
  • I have posted my question in public, https://stackoverflow.com/questions/69434247/how-to-make-content-model-video-stay-on-screen-using-nft-in-web-ar – Ramya Yadav Oct 04 '21 at 10:16