javascriptaugmented-realityar.js

AR.js to show png hanging on the wall

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!

Solution

  • 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.