Transfer THREE.js object into AR

So, I have the task of creating an online furniture customization tool. I have created 3D objects and used this cool tutorial to create the functionality https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/

The problem occurred when I started searching for the right solution to transferring this object into the AR for the customer to test.

So far, most of the people recommended three.ar.js but I had no luck of starting any of the examples provided by them, nor the examples from the community. All of the examples have the same error in common stating:
issue

Is there anyone who had the same experience and is there any way around this issue at all. If someone has any other suggestions regarding connection THREE.js and AR I would appreciate. The AR experience has to be markerless

three.js provides a few AR examples based on WebXR. Especially webxr_ar_hittest could be interesting for your use case since it allows you to place virtual 3D objects on surfaces in the real world. And it requires no markers.

However, WebXR and the related AR features only work in recent Chrome browsers so far (at least version 81). It seems this approach will be available in FF and Edge in the future. But Iā€™m unsure about Safari.

/cc

This may help! https://www.zappar.com/blog/introducing-universal-ar-sdks-threejs-unity-frame-more/

1 Like