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 [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 5 additions and 4 deletions
+5 -4
Create-a-simple-web-AR-application-[De].md
View page @ 260a3ee0
...@@ -155,7 +155,7 @@ const referenceSpace = await session.requestReferenceSpace('local'); ...@@ -155,7 +155,7 @@ const referenceSpace = await session.requestReferenceSpace('local');
## Szene rendern ## 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. 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.
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. Rufen Sie 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.
Fügen Sie diesen Code unten in die **activateXR()**-Funktion ein: Fügen Sie diesen Code unten in die **activateXR()**-Funktion ein:
``` ```
...@@ -201,7 +201,8 @@ Der vollständige Code kann unter [cube.html](uploads/ac0260539a69bb6d5e8c440ac3 ...@@ -201,7 +201,8 @@ Der vollständige Code kann unter [cube.html](uploads/ac0260539a69bb6d5e8c440ac3
Eine gängige Methode zur Interaktion mit der AR-Welt ist ein Treffertest, bei dem eine Schnittstelle zwischen einer Optik und einer realen Geometrie ermittelt wird. Mit Hello WebXR platzieren Sie einen Treffertest, um eine Sonnenblume in der virtuellen Welt zu platzieren. Eine gängige Methode zur Interaktion mit der AR-Welt ist ein Treffertest, bei dem eine Schnittstelle zwischen einer Optik und einer realen Geometrie ermittelt wird. Mit Hello WebXR platzieren Sie einen Treffertest, um eine Sonnenblume in der virtuellen Welt zu platzieren.
## Demowürfel entfernen ## Demowürfel entfernen
Entferne den beleuchteten Würfel und ersetze ihn durch eine Beleuchtung. Entfernen Sie den beleuchteten Würfel und ersetze Sie durch eine Beleuchtung.
``` ```
const scene = new THREE.Scene(); const scene = new THREE.Scene();
...@@ -211,7 +212,7 @@ scene.add(directionalLight); ...@@ -211,7 +212,7 @@ scene.add(directionalLight);
``` ```
## Funktion hit-test verwenden ## Funktion hit-test verwenden
Um die Treffertestfunktionen zu initialisieren, fordern Sie eine Sitzung mit der Funktion hit-test an. Suche das vorherige **requestSession()**-Fragment und füge **hit-test** hinzu: Um die Treffertestfunktionen zu initialisieren, fordern Sie eine Sitzung mit der Funktion hit-test an. Suchen Sie das vorherige **requestSession()**-Fragment und fügen Sie **hit-test** hinzu:
``` ```
const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']}); const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
``` ```
...@@ -269,7 +270,7 @@ const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }) ...@@ -269,7 +270,7 @@ const hitTestSource = await session.requestHitTestSource({ space: viewerSpace })
## Ausrichtungsretikel zeichnen ## Ausrichtungsretikel zeichnen
Damit klar erkennbar ist, wo die Sonnenblume platziert wird, fügen Sie der Szene ein Fadenkreuz hinzu. Dieser Netzhaut scheint an tatsächlichen Oberflächen zu kleben, was darauf hinweist, wo die Sonnenblume verankert wird. Damit klar erkennbar ist, wo die Sonnenblume platziert wird, fügen Sie der Szene ein Fadenkreuz hinzu. Dieser Netzhaut scheint an tatsächlichen Oberflächen zu kleben, was darauf hinweist, wo die Sonnenblume verankert wird.
**XRFrame.getHitTestResults** gibt ein Array von **XRHitTestResult** zurück und stellt Kreuzungen mit realen Geometrien bereit. Mit diesen Schnittpunkten können Sie das Targeting-Risko in jedem Frame positionieren. **XRFrame.getHitTestResults** gibt ein Array von **XRHitTestResult** zurück und zeigt Schnitte mit realen Geometrien an. Mit diesen Schnittpunkten können Sie das Targeting-Risko in jedem Frame positionieren.
``` ```
camera.projectionMatrix.fromArray(view.projectionMatrix); camera.projectionMatrix.fromArray(view.projectionMatrix);
......
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