Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in
  • V Visualization
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Jobs
  • Commits
Collapse sidebar
  • Volker Coors
  • Visualization
  • Wiki
  • Create a simple web AR application

Create a simple web AR application · Changes

Page history
Update Create a simple web AR application authored May 03, 2023 by Alfakhori's avatar Alfakhori
Hide whitespace changes
Inline Side-by-side
Create-a-simple-web-AR-application.md
View page @ 06ca2a64
...@@ -17,7 +17,7 @@ In this tutorial, you build a web app that places a model in the real world usin ...@@ -17,7 +17,7 @@ In this tutorial, you build a web app that places a model in the real world usin
- A web server with https support - A web server with https support
- Basic knowledge of HTML, CSS, JavaScript, and Google Chrome Developer Tools - Basic knowledge of HTML, CSS, JavaScript, and Google Chrome Developer Tools
# **Step 1 - Server** # **Server Setup**
In order to host your AR web app you will need a server with https support. You can use the HfT Gitlab pages, for that please follow the tutorial and make the changes as described below. In order to host your AR web app you will need a server with https support. You can use the HfT Gitlab pages, for that please follow the tutorial and make the changes as described below.
After creating the project, it's important to make minor changes to the **.gitlab-ci.yml** in order for the website to work properly. You can use **Edit in Pipeline editor** function which appears in blue color. The final file should look like this: After creating the project, it's important to make minor changes to the **.gitlab-ci.yml** in order for the website to work properly. You can use **Edit in Pipeline editor** function which appears in blue color. The final file should look like this:
...@@ -51,7 +51,7 @@ If everything works fine you will see this page: ...@@ -51,7 +51,7 @@ If everything works fine you will see this page:
![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png) ![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png)
# **Step 2 - Create an HTML page** # **Simple cube in AR**
WebXR requires user interaction to be able to start a session. Create a button that calls **activateXR()**. Upon loading the page, the user can use this button to start the AR experience. WebXR requires user interaction to be able to start a session. Create a button that calls **activateXR()**. Upon loading the page, the user can use this button to start the AR experience.
Edit the **index.html** and add the following HTML code to it: Edit the **index.html** and add the following HTML code to it:
......
Clone repository
  • Create a simple web AR application [De]
  • Create a simple web AR application
  • Exercise for Multiresolution Models
    • Feature manipulation engine (FME)
    • Introduction
    • Open source datasets
    • Visualization with ArcGIS
    • Visualization with CesiumJS
    • Visualization with Deck.gl
  • FME
  • OGC API 3D GeoVolume
  • Project_1
  • Styling of 3D building models by Attributes
  • Three.js 101 : Hello World!
  • Useful tools
  • Visualization of Bike Sharing Data
View All Pages

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal