Skip to content
GitLab
    • Explore Projects Groups Snippets
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 2 years ago by Alfakhori's avatar Alfakhori
Hide whitespace changes
Inline Side-by-side
Showing
with 4 additions and 4 deletions
+4 -4
Create-a-simple-web-AR-application.md
View page @ d0f2b262
...@@ -88,11 +88,11 @@ async function activateXR() { ...@@ -88,11 +88,11 @@ async function activateXR() {
</html> </html>
``` ```
# Initialize three.js ## Initialize three.js
Not much will happen when pressing the Start button. To set up a 3D environment, you can use a rendering library to display a scene. Not much will happen when pressing the Start button. To set up a 3D environment, you can use a rendering library to display a scene.
In this example, you will use three.js, a JavaScript 3D rendering library that provides a WebGL renderer. Three.js handles rendering, cameras, and scene graphs, making it easier to display 3D content on the web. In this example, you will use three.js, a JavaScript 3D rendering library that provides a WebGL renderer. Three.js handles rendering, cameras, and scene graphs, making it easier to display 3D content on the web.
## Create a scene ### Create a scene
A 3D environment is generally modelled as a scene. Create a THREE.Scene that contains AR elements. The following code allows you to look at an unlit colored box in AR. A 3D environment is generally modelled as a scene. Create a THREE.Scene that contains AR elements. The following code allows you to look at an unlit colored box in AR.
Add this code to the bottom of the **activateXR()** function: Add this code to the bottom of the **activateXR()** function:
...@@ -115,7 +115,7 @@ cube.position.set(1, 1, 1); ...@@ -115,7 +115,7 @@ cube.position.set(1, 1, 1);
scene.add(cube); scene.add(cube);
``` ```
## Set up rendering using three.js ### Set up rendering using three.js
To be able to view this scene in AR, you'll need a renderer and a camera. The renderer uses WebGL to draw your scene to the screen. The camera describes the viewport from which the scene is viewed. To be able to view this scene in AR, you'll need a renderer and a camera. The renderer uses WebGL to draw your scene to the screen. The camera describes the viewport from which the scene is viewed.
Add this code to the bottom of the **activateXR()** function: Add this code to the bottom of the **activateXR()** function:
...@@ -198,7 +198,7 @@ Navigate to the webpage you created from your device. You should be able to view ...@@ -198,7 +198,7 @@ Navigate to the webpage you created from your device. You should be able to view
The complete code can be downloaded [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) and a live demo can be acceded [here](https://transfer.hft-stuttgart.de/pages/muhammad.alfakhori/ar/1-Cube.html). The complete code can be downloaded [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) and a live demo can be acceded [here](https://transfer.hft-stuttgart.de/pages/muhammad.alfakhori/ar/1-Cube.html).
# **Tap to place ** # **Tap to place**
A common way of interacting with the AR world is through a **hit test**, which finds an intersection between a ray and real-world geometry. In Hello WebXR, you'll use a hit test to place a sunflower in the virtual world. A common way of interacting with the AR world is through a **hit test**, which finds an intersection between a ray and real-world geometry. In Hello WebXR, you'll use a hit test to place a sunflower in the virtual world.
## Remove the demo cube ## Remove the demo cube
......
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

Menu

Explore Projects Groups Snippets

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