... | @@ -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);
|
... | | ... | |