... | @@ -51,7 +51,7 @@ Wenn alles funktioniert, sehen Sie diese Seite: |
... | @@ -51,7 +51,7 @@ Wenn alles funktioniert, sehen Sie diese Seite: |
|
|
|
|
|
![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png)
|
|
![image](uploads/0541a53d02eb04caa6213f6971d98e26/image.png)
|
|
|
|
|
|
# **Simple cube in AR**
|
|
# **Einfacher Würfel in AR**
|
|
WebXR erfordert eine Nutzerinteraktion, um eine Sitzung starten zu können. Erstellen Sie eine Schaltfläche mit dem Namen **activateXR()**. Nach dem Laden der Seite kann der Nutzer diese Schaltfläche verwenden, um das AR-Erlebnis zu starten.
|
|
WebXR erfordert eine Nutzerinteraktion, um eine Sitzung starten zu können. Erstellen Sie eine Schaltfläche mit dem Namen **activateXR()**. Nach dem Laden der Seite kann der Nutzer diese Schaltfläche verwenden, um das AR-Erlebnis zu starten.
|
|
|
|
|
|
Bearbeiten Sie die **index.html** und fügen Sie den folgenden HTML-Code hinzu:
|
|
Bearbeiten Sie die **index.html** und fügen Sie den folgenden HTML-Code hinzu:
|
... | @@ -86,14 +86,15 @@ async function activateXR() { |
... | @@ -86,14 +86,15 @@ async function activateXR() { |
|
</html>
|
|
</html>
|
|
```
|
|
```
|
|
|
|
|
|
## Initialize three.js
|
|
## three.js initialisieren
|
|
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.
|
|
Wenn Sie auf die Schaltfläche „Starten“ drücken, passiert nicht viel. Zum Einrichten einer 3D-Umgebung können Sie eine Rendering-Bibliothek verwenden, um eine Szene darzustellen.
|
|
|
|
|
|
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 diesem Beispiel verwenden Sie three.js, eine JavaScript-3D-Rendering-Bibliothek, die einen WebGL-Renderer bereitstellt. Three.js verarbeitet Renderings, Kameras und Szenengrafiken, sodass Sie 3D-Inhalte leichter im Web präsentieren können.
|
|
### 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.
|
|
|
|
|
|
|
|
Add this code to the bottom of the **activateXR()** function:
|
|
### Szene erstellen
|
|
|
|
Eine 3D-Umgebung wird normalerweise als eine Szene modelliert. Erstellen Sie eine THREE.Scene, die AR-Elemente enthält. Mit dem folgenden Code können Sie sich ein farbiges Feld in AR ansehen, das nicht beleuchtet ist.
|
|
|
|
|
|
|
|
Fügen Sie diesen Code unten in die **activateXR()**-Funktion ein:
|
|
```
|
|
```
|
|
const scene = new THREE.Scene();
|
|
const scene = new THREE.Scene();
|
|
|
|
|
... | @@ -113,10 +114,10 @@ cube.position.set(1, 1, 1); |
... | @@ -113,10 +114,10 @@ cube.position.set(1, 1, 1); |
|
scene.add(cube);
|
|
scene.add(cube);
|
|
```
|
|
```
|
|
|
|
|
|
### Set up rendering using three.js
|
|
### Rendering mit three.js einrichten
|
|
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.
|
|
Um diese Szene in AR sehen zu können, benötigen Sie einen Renderer und eine Kamera. Der Renderer nutzt WebGL, um Ihre Szene auf dem Bildschirm zu zeichnen. Die Kamera beschreibt den Darstellungsbereich, von dem aus die Szene angesehen wird.
|
|
|
|
|
|
Add this code to the bottom of the **activateXR()** function:
|
|
Fügen Sie diesen Code unten in die **activateXR()**-Funktion ein:
|
|
```
|
|
```
|
|
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
|
|
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
|
|
const renderer = new THREE.WebGLRenderer({
|
|
const renderer = new THREE.WebGLRenderer({
|
... | @@ -134,12 +135,12 @@ const camera = new THREE.PerspectiveCamera(); |
... | @@ -134,12 +135,12 @@ const camera = new THREE.PerspectiveCamera(); |
|
camera.matrixAutoUpdate = false;
|
|
camera.matrixAutoUpdate = false;
|
|
```
|
|
```
|
|
|
|
|
|
## Create an XRSession
|
|
## XRSession erstellen
|
|
The entrypoint to WebXR is through **XRSystem.requestSession()**. Use the **immersive-ar** mode to allow rendered content to be viewed in a real-world environment.
|
|
Der Einstiegspunkt für WebXR ist **XRSystem.requestSession()**. Verwenden Sie den Modus immersive-ar, damit gerenderte Inhalte in einer realen Umgebung angezeigt werden können.
|
|
|
|
|
|
An **XRReferenceSpace** describes the coordinate system used for objects within the virtual world. The 'local' mode is best suited for an AR experience, with a reference space that has an origin near the viewer and stable tracking.
|
|
Ein **XRReferenceSpace** beschreibt das Koordinatensystem, das für Objekte in der virtuellen Welt verwendet wird. Der Modus 'local' eignet sich am besten für ein AR-Erlebnis mit einem Referenzbereich, dessen Ursprung in der Nähe des Zuschauers liegt, und einem stabilen Tracking.
|
|
|
|
|
|
To create an **XRSession** and **XRReferenceSpace**, add this code to the bottom of the **activateXR()** function:
|
|
Fügen Sie unten in der Funktion **activateXR()** folgenden Code ein, um **XRSession** und **XRReferenceSpace** zu erstellen:
|
|
```
|
|
```
|
|
// Initialize a WebXR session using "immersive-ar".
|
|
// Initialize a WebXR session using "immersive-ar".
|
|
const session = await navigator.xr.requestSession("immersive-ar");
|
|
const session = await navigator.xr.requestSession("immersive-ar");
|
... | | ... | |