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 [De]

Create a simple web AR application [De] · Changes

Page history
Update Create a simple web AR application [De] authored 2 years ago by Alfakhori's avatar Alfakhori
Hide whitespace changes
Inline Side-by-side
Showing
with 7 additions and 7 deletions
+7 -7
Create-a-simple-web-AR-application-[De].md
View page @ 34a31eee
......@@ -152,12 +152,12 @@ session.updateRenderState({
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');
```
## Render the scene
Now you can render the scene. **XRSession.requestAnimationFrame()** schedules a callback which is executed when the browser is ready to draw a frame.
## Szene rendern
Jetzt können Sie die Szene rendern. Mit **XRSession.requestAnimationFrame()** wird ein Callback geplant, der ausgeführt wird, wenn der Browser bereit ist, einen Frame zu zeichnen.
During the animation frame callback, call **XRFrame.getViewerPose()** to obtain the viewer's pose relative to the local coordinate space. This is used to update the in-scene camera, changing how the user views the virtual world before the renderer draws the scene using the updated camera.
Rufe während des Animationsframe-Callbacks **XRFrame.getViewerPose()** auf, um die Stellung des Betrachters relativ zum lokalen Koordinatenraum zu erhalten. Hiermit wird die Kamera im Ambiente aktualisiert, um zu ändern, wie der Nutzer die virtuelle Welt betrachtet, bevor der Renderer die Szene mithilfe der aktualisierten Kamera zeichnet.
Add this code to the bottom of the **activateXR()** function:
Fügen Sie diesen Code unten in die **activateXR()**-Funktion ein:
```
// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
......@@ -189,12 +189,12 @@ const onXRFrame = (time, frame) => {
session.requestAnimationFrame(onXRFrame);
```
## Cube Demo result
Navigate to the webpage you created from your device. You should be able to view a colored cube from all sides.
## Würfel-Demo Ergebnis
Navigieren Sie auf Ihrem Gerät zur erstellten Webseite. Sie sollten einen farbigen Würfel von allen Seiten aus betrachten können.
![cube](uploads/04c30eea2b53aee8d28918f739647533/cube.gif)
The complete code can be downloaded [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) and a live demo can be accessed [here](https://transfer.hft-stuttgart.de/pages/coors/visualization/webXR/1-Cube.html).
Der vollständige Code kann unter [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) heruntergeladen werden, und eine Live-Demo kann [hier](https://transfer.hft-stuttgart.de/pages/coors/visualization/webXR/1-Cube.html) aufgerufen werden.
# **Tap to place**
......
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