Integrating Three.js and AR

Explore how to set up augmented reality scenes with Three.js using WebXR. Understand device compatibility, how to enable AR on your renderer, and use the AR button to enter AR mode. This lesson covers basic AR scene creation and testing with real and simulated devices.

We'll cover the following...

Example: Integrate Three.js with 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 here, which provides an up-to-date overview of all major browser support.

So, to test the native AR example, we either need to view it on an ...

1.Introduction to the Course

2.Part 1: Getting Up and Running

3.Creating the First 3D Scene with Three.js

4.The Basic Components That Make Up a Three.js Application

5.Working with Light Sources in Three.js

6.Part 2: Working with the Three.js Core Components

7.Working with Three.js Materials

8.Learning to Work with Geometries

9.Exploring Advanced Geometries

10.Points and Sprites

11.Part 3: Particle Clouds, Loading, and Animating Models

12.Creating and Loading Advanced Meshes and Geometries

13.Animation and Moving the Camera

14.Loading and Working with Textures

15.Part 4: Post-Processing, Physics, and Sounds

16.Render Post-Processing

17.Adding Physics and Sounds to Our Scene

18.Working with Blender and Three.js

19.Three.js: Together with React, TypeScript, and WebXR

20.Conclusion

21.Appendix

Integrating Three.js and AR