Need help starting off

[MarcusAmazemus]

I have a website that currently uses to show 3D models in AR over the web.
I've been trying for months to figure out how to do marker-based AR effects with something other than a big black square that ar.js seems to have.
I was creating effects with Meta spark AR and now that that's shutting down I'll be moving over to Effect House but ultimately I would like to have everything played from my own website.

I'm a full-time truck driver, still learning and don't have a lot of time, but I've spent lots of time searching YouTube to find a tutorial on AR with image tracking from a web browser, except for AR.js but that doesn't seem to be able to track an image that doesn't have a massive black border around it. Any guidance or direction would be totally useful. And if you happen to have boilerplate code that will allow me to change the sources of the tracking image and the 3D models to my servers then that would be super appreciated.

I'm currently using WIX as my website building platform and able to add HTML code to my page which is working for placing AR models but there's no image tracking that I can find available.

[ThorstenBux]

Hi,
how are you?

Regarding your question. This here could be a template for you to start with: https://github.com/ThorstenBux/ar-magazine

Also, have a look at MindAR: https://www.mindar.org

Which might also give you a good starting point. Either with code or with their studio.

Regarding Wix. An integration would be tricky cause you would need to add the AR part as an iFrame (afaik) and if so the permission handling needs to happen in a js script that is part of the outer iframe (Wix site) but might need to be triggered from inside the iframe. Hence you would need some cross iframe communication.

:)

Hope that isn't too overwhelming .

Feel free to ask more questions

[MarcusAmazemus]

You're a life saver, thanks!!!

…

On Mon, Sep 30, 2024, 3:25 a.m. Thorsten Bux ***@***.***> wrote: Hi, how are you? Regarding your question. This here could be a template for you to start with: https://github.com/ThorstenBux/ar-magazine Also, have a look at MindAR: https://www.mindar.org Which might also give you a good starting point. Either with code or with their studio. Regarding Wix. An integration would be tricky cause you would need to add the AR part as an iFrame (afaik) and if so the permission handling needs to happen in a js script that is part of the outer iframe (Wix site) but might need to be triggered from inside the iframe. Hence you would need some cross iframe communication. :) Hope that isn't too overwhelming . Feel free to ask more questions — Reply to this email directly, view it on GitHub <#28 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AU2N3TX2BFRQMLOK3DVBE2TZZD4HTAVCNFSM6AAAAABPA5O7SGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANZZGQ3DSNQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[MarcusAmazemus]

ok... quick background - I'm a truck driver learning all this in my spare time. Here's a link to one of my pages. https://www.gatewaywebar.com/rsmscotty I have server space to store the models on as the <model-viewer> needs some kind of security thing that WIX is unable to provide to host the models on there. if i need to forward the WIX page to an html page on the server to get this to work that's cool too. WHatever I need to get this to work. Right now I am able to display 3D models from a webpage, but I really need the image tracking to work from the web as I was using Instagram (Spark AR studio), but META has decided to shut down the creator program. I can use TikTok Effect House but would honestly prefer to just have full control. Here is what I am doing on my FB page with AR Shirts. https://www.facebook.com/share/v/qDvCW9ZYBkuW27f3/ I am a little over my head but it's cool and I'm trying to figure all this out with hours and hours of YouTube tutorials. I'm getting better at Blender for my models and still figuring out animations. If there was a way to get this set-up and all I have to do is to copy the code parts pointing to a new tracking image and new model... that would be the best.

…

On Mon, Sep 30, 2024 at 9:53 AM Marc Toews ***@***.***> wrote: You're a life saver, thanks!!! On Mon, Sep 30, 2024, 3:25 a.m. Thorsten Bux ***@***.***> wrote: > Hi, > how are you? > > Regarding your question. This here could be a template for you to start > with: https://github.com/ThorstenBux/ar-magazine > > Also, have a look at MindAR: https://www.mindar.org > > Which might also give you a good starting point. Either with code or with > their studio. > > Regarding Wix. An integration would be tricky cause you would need to add > the AR part as an iFrame (afaik) and if so the permission handling needs to > happen in a js script that is part of the outer iframe (Wix site) but might > need to be triggered from inside the iframe. Hence you would need some > cross iframe communication. > > :) > > Hope that isn't too overwhelming . > > Feel free to ask more questions > > — > Reply to this email directly, view it on GitHub > <#28 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AU2N3TX2BFRQMLOK3DVBE2TZZD4HTAVCNFSM6AAAAABPA5O7SGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANZZGQ3DSNQ> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[ThorstenBux]

Hi mate,
sorry for the late reply.
Yeah I had basically set this use case (t-shirts) all up with a guy from Ireland a few years ago. However, he never launched it and is now just selling shirts afaik.
What you are after isn't too difficult but also not exactly trivial ;) . Yes easiest would be to forward to a separate page from the Wix site. This would remove some complexity.
Then you would need to run the AR on the page and load the image you want to track. And voila.

I saw your Quicklook, WebXR, Sceneviewer example. Nice work. Have been doing this occasionally as well but didn't get a huge traction.