Three.js and AR
While VR using Three.js is well supported on a large range of devices and browsers, this isn’t the case for Web-AR. On Android, the support is pretty good, but on iOS devices, it doesn’t work that well. Apple is currently working on adding this to Safari, so once that’s in, native AR should also work on iOS. A good way to check which browsers support this functionality is to check https://caniuse.com/webxr, which provides an up-to-date overview of all major browser support.
So, to test the native AR example, you either need to view it on an Android device, or use the same simulator we used in the Three.js and VR section.
Let’s create a standard scene you can use as a starting point for your AR experiments. The first thing we need to do is tell Three.js we want to use XR:
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.xr.enabled = true
Note that we need to set the alpha
property...