Singel image augmented reality

Questions
,
1

i’m still newbie with three js. I want to make an application that can detect the floor surface, then put 3D objects that can interact on the floor surface of the image I input. can threejs do that or what methods and libraries can support it?

2

Hi! There are a lot of different options for this and the solution depends on the platform you want to support. If you google AR + three.js you’ll find a lot of options.

Just from the three.js website examples:
https://threejs.org/examples/webxr_ar_cones.html
https://threejs.org/examples/webxr_ar_hittest.html
https://threejs.org/examples/webxr_ar_lighting.html
https://threejs.org/examples/webxr_ar_paint.html

All of these are only available on Android. On iOS you can use the new USDZ exporter and leverage the native AR Quick Look function.

3

thanks for the response. but what if i want to make it on the website (WebAR). What I mean is, I want to input an image and detect a plane or surface in the image (same as markerless). Just like this video Single Image Augmented Reality - YouTube

Can google AR do it?

Your response will be very helpful

4

See this thread then, it has a lot of info on detecting surfaces on AR web: Is there anything in JS to detect surfaces, like what ARKit or ARCore do?

In general, I’m not sure what’s available on Chrome for Android (apis are there from what I understand but they used to be behind feature toggles). But on iOS, what you want to do is impossible as Apple hasn’t implemented WebXR apis (yet?).