AR.js to show png hanging on the wall

Viewed 748

I have an e-commerce website where I sell illustrations from different independent artists.

I have an idea where the user turns on the camera and see how a poster (png file) looks in their wall, using the web browser of their mobile.

Is this achievable with AR.js or this is something achievable only with a native mobile app?

If so, could you share some guidance for me to start looking into?

Thanks you all!

2 Answers

Yes, you can, using a browser and webcam, and of course some JavaScript.

One way is to have the end user print out a marker with a defined pattern that you can then replace with an image. The Image Texture example at this URL on GitHub contains almost exactly the code you want, running in a browser.

With ARjs you can only do it if the user has a marker on their wall. You can have the users printing markers as part of your user journey. I think a better solution for you will be model-viewer. Model-viewer can recognize surfaces and add your models to this surface, the problem is that if you want to present a png, you can't. what you can do is convert this png to a 3D model (just a plane really) and present that. You can also check out echoAR (full disclosure - I work there), and see if there are any solutions that work for you with ARjs/ model-viewer.

Hope it helps.

Related