... | ... | @@ -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**
|
... | ... | |