Generalized Web Augmented Reality (WebAR) features from the app From Hostile To Hospitable
- Clone the repository:
git clone https://github.com/FKI-HTW/SamplesFromHostileToHospitable
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Build for production:
npm run build
After starting the app, navigate to http://localhost:5173/
in your browser.
Use the Chrome Browser. To Debug with Android Smartphone go to chrome://inspect/#devices
- Define 3D models and audios in json database
- Select desired content in start screen
- Place 3D content in WebAR with Hit Testing feature on found planes
- Experience different contents with timeline feature
To add your custom content you can modify the following files:
Link custom models (glb or gltf format) and audios (mp3|wav|m4a format) with this structure:
{
"ID": 0,
"contentName": "Spot 0",
"pathModel": "assets/models/ladybug.glb",
"pathAudioFiles": [
{
"path": "assets/audios/test1.mp3",
"time": 2
},
{
"path": "assets/audios/test2.mp3",
"time": 8
}
]
}
The time corresponds to the start time to play the audio in the timeline
To add and label a new button, adapt the following syntax. The :number argument in .prepareData relates to the content's position in database.json
After making a build you get a /dist folder.
Upload it to any server that supports HTTPS.
Netlify is for free.
Contributions are welcome! Follow these steps:
- Fork the project.
- Create a new branch (git checkout -b feature/NewFeature).
- Commit your changes (git commit -m 'Add NewFeature').
- Push to the branch (git push origin feature/NewFeature).
- Open a Pull Request.
This project is licensed under the MIT License.