3

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!

MartinGian
  • 395
  • 5
  • 16

2 Answers2

2

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.

drnugent
  • 1,545
  • 9
  • 22
  • Thanks for your answer! Do you if can it be done without having the user to print a Marker? I imagine that maybe the user can touch wherever they want to put the image, standing right in front of the wall. – MartinGian Jun 29 '20 at 08:26
2

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.

bpedazur
  • 363
  • 1
  • 9