01 from 03 - Creating an Indoor Navigation Experience with WebXR - Basic Setup

#AR #WebXR #AugmentedReality #IndoorNavigation

This is a short tutorial about how to create a basic indoor navigation app with WebXR, and WITHOUT the usage of Cloud Anchors or using PointCloud data. :)

• Github repository with source code https://github.com/FireDragonGameStudio/ARIndoorNavigation-Threejs

• Deployment can be found under https://firedragongamestudio.github.io/ARIndoorNavigation-Threejs/

• Unity IndoorNavigation series Pt. 1 https://youtu.be/fuHFrMZ4q_s

• Three.js documentation https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

• Template project/based on https://threejs.org/examples/?q=webxr#webxr_ar_cones https://github.com/mrdoob/three.js/blob/master/examples/webxr_ar_cones.html

• Three.js material colorWrite property https://threejs.org/docs/#api/en/materials/Material.colorWrite

• How to get transparent occluder material https://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion

• WebXR immersive web samples https://immersive-web.github.io/webxr-samples/

• ViteJS project page https://vitejs.dev/

00:00 Intro 01:57 ViteJS 05:03 Working with the template 07:45 IndoorNavigation with three.js 17:12 Working with WebXR simulator 18:57 Setup occlusion 20:50 Deployment and testing 23:23 Demo and Outro