| ... | ... | @@ -197,11 +197,11 @@ Navigieren Sie auf Ihrem Gerät zur erstellten Webseite. Sie sollten einen farbi |
|
|
|
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**
|
|
|
|
A common way of interacting with the AR world is through a **hit test**, which finds an intersection between a ray and real-world geometry. In Hello WebXR, you'll use a hit test to place a sunflower in the virtual world.
|
|
|
|
# **Tippen, um 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.
|
|
|
|
|
|
|
|
## Remove the demo cube
|
|
|
|
Remove the unlit cube and replace it with a scene that includes lighting:
|
|
|
|
## Demowürfel entfernen
|
|
|
|
Entferne den beleuchteten Würfel und ersetze ihn durch eine Beleuchtung.
|
|
|
|
```
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
|
| ... | ... | @@ -210,16 +210,16 @@ directionalLight.position.set(10, 15, 10); |
|
|
|
scene.add(directionalLight);
|
|
|
|
```
|
|
|
|
|
|
|
|
## Use the hit-test feature
|
|
|
|
To initialize **hit test** functionality, request session with the hit-test feature. Find the previous **requestSession()** fragment, and add **hit-test** to it:
|
|
|
|
## 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:
|
|
|
|
```
|
|
|
|
const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
|
|
|
|
```
|
|
|
|
|
|
|
|
## Add a model loader
|
|
|
|
Currently, the scene only contains a colored cube. To make the experience more interesting, add a model loader, which allows GLTF models to be loaded.
|
|
|
|
## Modellladeprogramm hinzufügen
|
|
|
|
Derzeit enthält die Szene nur einen farbigen Würfel. Fügen Sie einen Modelllader hinzu, der das Laden von GLTF-Modellen ermöglicht, um das Erlebnis noch interessanter zu machen.
|
|
|
|
|
|
|
|
In your document's **<head>** tag, add three.js' **GLTFLoader**.
|
|
|
|
Fügen Sie in Ihrem **<head>**-Tag des Dokuments Three.js**GLTFLoader** ein.
|
|
|
|
|
|
|
|
```
|
|
|
|
<!-- three.js -->
|
| ... | ... | @@ -228,10 +228,10 @@ In your document's **<head>** tag, add three.js' **GLTFLoader**. |
|
|
|
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
|
|
```
|
|
|
|
|
|
|
|
## Load GLTF models
|
|
|
|
Use the model loader from the previous step to load a targeting reticle and a sunflower from the web.
|
|
|
|
## GLTF-Modelle laden
|
|
|
|
Verwenden Sie das Modellladeprogramm aus dem vorherigen Schritt, um ein Ausrichtungsretikel und eine Sonnenblume aus dem Web zu laden.
|
|
|
|
|
|
|
|
Add this code above **onXRFrame**:
|
|
|
|
Fügen Sie diesen Code über **onXRFrame** hinzu:
|
|
|
|
|
|
|
|
```
|
|
|
|
const loader = new THREE.GLTFLoader();
|
| ... | ... | @@ -250,10 +250,10 @@ loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/ |
|
|
|
// Create a render loop that allows us to draw on the AR view.
|
|
|
|
const onXRFrame = (time, frame) => {
|
|
|
|
```
|
|
|
|
## Create a hit test source
|
|
|
|
To calculate intersections with real-world objects, create a **XRHitTestSource** using **XRSession.requestHitTestSource()**. The ray used for hit testing has the **viewer **reference space as origin, meaning that the hit test is done from the center of the viewport.
|
|
|
|
## Treffertestquelle erstellen
|
|
|
|
Erstellen Sie mit **XRSession.requestHitTestSource()** eine **XRHitTestSource**, um Schnittmengen mit echten Objekten zu berechnen. Der für Treffertests verwendete Ray hat den Referenzbereich viewer als Ursprung. Das bedeutet, dass der Treffertest von der Mitte des Darstellungsbereichs aus durchgeführt wird.
|
|
|
|
|
|
|
|
To create a hit test source, add this code after creating the **local **reference space:
|
|
|
|
Fügen Sie nach dem Erstellen des Referenzbereichs **local **den folgenden Code hinzu, um eine Treffertestquelle zu erstellen:
|
|
|
|
|
|
|
|
```
|
|
|
|
// A 'local' reference space has a native origin that is located
|
| ... | ... | @@ -266,10 +266,10 @@ const viewerSpace = await session.requestReferenceSpace('viewer'); |
|
|
|
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
|
|
|
|
```
|
|
|
|
|
|
|
|
## Drawing a targeting reticle
|
|
|
|
To make it clear where the sunflower will be placed, add a targeting reticle to the scene. This reticle will appear to stick to real-world surfaces, signifying where the sunflower will be anchored.
|
|
|
|
## 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.
|
|
|
|
|
|
|
|
**XRFrame.getHitTestResults** returns an array of **XRHitTestResult** and exposes intersections with real-world geometry. Use these intersections to position the targeting reticle on every frame.
|
|
|
|
**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.
|
|
|
|
|
|
|
|
```
|
|
|
|
camera.projectionMatrix.fromArray(view.projectionMatrix);
|
| ... | ... | @@ -284,11 +284,10 @@ if (hitTestResults.length > 0 && reticle) { |
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Adding interactions on tap
|
|
|
|
**XRSession **receives select events when the user completes a primary action. In an AR session, this corresponds to a tap on the screen.
|
|
|
|
|
|
|
|
Make a new sunflower appear when the user taps on the screen by adding this code during initialization:
|
|
|
|
## Interaktionen durch Tippen hinzufügen
|
|
|
|
**XRSession **erhält **select**-Ereignisse, wenn der Nutzer eine primäre Aktion ausführt. In einer AR-Sitzung entspricht dies einem Tippen auf den Bildschirm.
|
|
|
|
|
|
|
|
Wenn der Nutzer auf den Bildschirm tippt, fügen Sie während der Initialisierung den folgenden Code hinzu:
|
|
|
|
```
|
|
|
|
let flower;
|
|
|
|
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
|
| ... | ... | @@ -304,9 +303,9 @@ session.addEventListener("select", (event) => { |
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
## Tap to Place result
|
|
|
|
Use your mobile device to navigate to the page. After WebXR builds an understanding of the environment, the reticle should appear on real-world surfaces. Tap the screen to place a sunflower, which can be viewed from all sides.
|
|
|
|
## Ergebnis von Tippen zum Platzieren
|
|
|
|
Verwenden Sie Ihr Mobilgerät, um zur Seite zu navigieren. Nachdem WebXR ein Verständnis für die Umgebung aufgebaut hat, sollte das Fadenkreuz auf realen Oberflächen erscheinen. Tippen Sie auf den Bildschirm, um eine Sonnenblume zu platzieren, die von allen Seiten aus betrachtet werden kann.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The complete code can be downloaded [hit2place.html](uploads/eaa488c6737044ead8a3dc41aaf11489/hit2place.html) and a live demo can be accessed [here](https://transfer.hft-stuttgart.de/pages/coors/visualization/webXR/2-Hit.html). |
|
|
\ No newline at end of file |
|
|
|
Der vollständige Code kann unter [hit2place.html](uploads/eaa488c6737044ead8a3dc41aaf11489/hit2place.html) heruntergeladen werden, und eine Live-Demo kann [hier](https://transfer.hft-stuttgart.de/pages/coors/visualization/webXR/2-Hit.html)aufgerufen werden. |
|
|
\ No newline at end of file |
