XRReferenceSpace: getOffsetReferenceSpace()-Methode

originOffset

Ein XRRigidTransform, der den Offset zum Ursprung des neuen Referenzraums angibt. Diese Werte werden zur Position und Ausrichtung des aktuellen Referenzraums addiert, und das Ergebnis wird als Position und Ausrichtung des neu erstellten XRReferenceSpace verwendet.

Ein neues XRReferenceSpace-Objekt, das einen Referenzraum mit demselben nativen Ursprung beschreibt wie der Referenzraum, auf dem die Methode aufgerufen wurde, jedoch mit einem Ursprungs-Offset, der den Abstand vom Objekt zu dem Punkt angibt, der durch originOffset gegeben ist.

Wenn das Objekt, auf dem Sie diese Methode aufrufen, ein XRBoundedReferenceSpace ist, ist das zurückgegebene Objekt ebenfalls eines. Das boundsGeometry des neuen Referenzraums wird auf das boundsGeometry des ursprünglichen Objekts gesetzt, wobei jeder seiner Punkte mit dem Inversen von originOffset multipliziert wird.

Im Folgenden sind einige Beispiele aufgeführt, die zeigen, wie man getOffsetReferenceSpace() verwendet.

Beim ersten Erstellen einer Szene müssen Sie möglicherweise die Position des Benutzers in der 3D-Welt festlegen. Sie können dies mit getOffsetReferenceSpace() tun.

xrSession.requestReferenceSpace("local").then((refSpace) => {
  xrReferenceSpace = refSpace;
  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
    new XRRigidTransform(startPosition, { x: 0, y: 0, z: 1.0, w: 1.0 }),
  );
  xrSession.requestAnimationFrame(drawFrame);
});

In diesem Code erhalten wir einen lokalen Referenzraum und verwenden dann getOffsetReferenceSpace(), um einen neuen Raum zu erstellen, dessen Ursprung auf eine durch startPosition angegebene Position angepasst ist und dessen Ausrichtung direkt entlang der Z-Achse schaut. Dann wird der erste Animationsrahmen unter Verwendung von XRSessions [requestAnimationFrame()`](/de/docs/Web/API/XRSession/requestAnimationFrame) angefordert.

Die von WebXR direkt unterstützten Eingabesteuerelemente sind alle dedizierte VR- oder AR-Eingabegeräte. Um Maus, Tastatur oder andere Eingabegeräte zu verwenden, um Objekte im 3D-Raum zu bewegen oder anderweitig zu transformieren – oder um dem Benutzer das Durchführen durch den Raum zu ermöglichen – müssen Sie etwas Code schreiben, um die Eingaben auszulesen und die Bewegungen durchzuführen.

Dies ist ein weiterer guter Anwendungsfall für getOffsetReferenceSpace(). In diesem Beispiel zeigen wir Code, der es dem Benutzer ermöglicht, sich umzusehen, indem er mit der rechten Maustaste klickt und die Maus bewegt, um den Blickwinkel zu ändern.

Zuerst fügen wir einen Ereignishandler für mousemove-Ereignisse hinzu, der unseren Code aufruft, um die Rotation durchzuführen, wenn die rechte Maustaste gedrückt ist. Beachten Sie auch, dass wir oncontextmenu so einrichten, dass es ignoriert wird, indem wir preventDefault() auf diesen Ereignissen aufrufen. Dies verhindert, dass durch Rechtsklicks das Kontextmenü im Browser angezeigt wird.

canvas.oncontextmenu = (event) => {
  event.preventDefault();
};
canvas.addEventListener("mousemove", (event) => {
  if (event.buttons & 2) {
    rotateViewBy(event.movementX, event.movementY);
  }
});

Als nächstes die Funktion rotateViewBy(), die die Gier- und Neigungsrichtung des Mausblicks basierend auf den Delta-Werten der Maus aus dem mousemove-Ereignis aktualisiert. Die Neigung ist so eingeschränkt, dass man nicht über direkt nach oben und direkt nach unten hinausschauen kann. Jedes Mal, wenn dies aufgerufen wird, werden die neuen Offsets verwendet, um die aktuellen Werte von mousePitch und mouseYaw zu aktualisieren.

let mouseYaw = 0.0;
let mousePitch = 0.0;
const inverseOrientation = quat.create();
const MOUSE_SPEED = 0.003;

function rotateViewBy(dx, dy) {
  mouseYaw += dx * MOUSE_SPEED;
  mousePitch += dy * MOUSE_SPEED;

  if (mousePitch < -Math.PI * 0.5) {
    mousePitch = -Math.PI * 0.5;
  } else if (mousePitch > Math.PI * 0.5) {
    mousePitch = Math.PI * 0.5;
  }
}

Schließlich benötigen wir Code, der tatsächlich die berechneten Gier- und Neigungswerte auf die Ansichtsausrichtung des Betrachters anwendet. Diese Funktion, applyMouseMovement(), übernimmt das:

function applyMouseMovement(refSpace) {
  if (!mouseYaw && !mousePitch) {
    return refSpace;
  }

  quat.identity(inverseOrientation);
  quat.rotateX(inverseOrientation, inverseOrientation, -mousePitch);
  quat.rotateY(inverseOrientation, inverseOrientation, -mouseYaw);

  let newTransform = new XRRigidTransform(
    { x: 0, y: 0, z: 0 },
    {
      x: inverseOrientation[0],
      y: inverseOrientation[1],
      z: inverseOrientation[2],
      w: inverseOrientation[3],
    },
  );

  return refSpace.getOffsetReferenceSpace(newTransform);
}

Diese Funktion erstellt eine inverse Orientierungs-Matrix, die verwendet wird, um den Betrachter zu orientieren, basierend auf den aktuellen Gier- und Neigungswerten, und verwendet diese Matrix als Quelle der Ausrichtung beim Aufruf von XRRigidTransform(). Der neue XRRigidTransform`s-Referenzraum wird dann abgerufen und an den Aufrufer zurückgegeben.

Dieser neue Referenzraum ist einer, in dem die Position des Betrachters unverändert bleibt, aber seine Ausrichtung basierend auf den aus den gesammelten Mauseingaben erzeugten Gier- und Neigungswerten verändert wurde. applyMouseMovement() sollte aufgerufen werden, wenn ein Rahmen gezeichnet wird, unmittelbar bevor die Pose des Betrachters mit getViewerPose() abgerufen wird, und das Rendering sollte in diesem Referenzraum durchgeführt werden.

Ähnlichen Code können Sie in unserem umfassenderen WebXR-Tutorial-Artikel mit dem Titel Bewegung, Orientierung und Bewegung sehen. Insbesondere sollten Sie sich den Abschnitt Starten der WebXR-Sitzung ansehen.