Augmented-Reality web-app build with PWA functionality using React, three.js and WebXR. It is downloadable through the used browser and offers extensive offline functionality.
A live demo is available here.
More screenshots available here.
Uses an AR-Viewer to place 3D-Objects around yourself through your device's camera and a regular 3D-Viewer as an alternative and fallback if your device doesn't support WebXR. Includes a selection of free 3D-Objects but also offers the functionality to upload your own local files (for now only in the .gltf/.glb file format). Supports light mode and dark mode as well as english and german as UI languages.
Currently support for WebXR and the included immersive-ar mode is pretty limited. So at the moment the only platform this app reliably works on with all features is Chrome for Android. When the WebXR API will be included into more browsers, compatibility for this app's AR-Viewer will also increase.
As this app is intended as a downloadable PWA with offline functionality the default scripts use https since a secure connection is required for all PWA features.
To run this app locally first clone the repository then install the dependencies:
git clone https://github.com/sergidomenechguzy/app-ar-viewer.git
cd app-ar-viewer
npm install
npm run start
npm run build
This creates your own production build into the build folder that can be served locally.
npm run serve
This serves your current build locally over https. Works only after running npm run build.
To create a new build and instantly serve it:
npm run fresh
Note that for these commands to work you need to create your own cert.pem and key.pem files and add them in a .cert folder to the project root. This certificate is used to create the local https server. An easy way to create these files is to use mkcert. Alternatively you can also use the http scripts.
As an alternative to the https start, serve and fresh scripts, regular http versions exist as well:
npm run start:http
npm run serve:http
npm run fresh:http
Coaster, Coffee Table, Pepper Grinder, Pouf, Scale, Stool, Wooden Chair 1, Wooden Chair 2, Metal Table, Wooden Table, Metal Cabinet, Modern Sofa, Kitchen Counter with Sink, Bed, Grey L-Shaped Couch, Old Cuoboard, Mixer, Grey Sofa, Simple Ben Bag, Wardrobe, Desk Light, Coat Rack, Lounge Chair