DOMPoint

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Ein DOMPoint-Objekt repräsentiert einen 2D- oder 3D-Punkt in einem Koordinatensystem; es umfasst Werte für die Koordinaten in bis zu drei Dimensionen sowie einen optionalen Perspektivwert. DOMPoint basiert auf DOMPointReadOnly, erlaubt jedoch das Ändern der Werte seiner Eigenschaften.

Im Allgemeinen repräsentiert eine positive x-Komponente eine Position rechts vom Ursprung, eine positive y-Komponente ist nach unten vom Ursprung, und eine positive z-Komponente erstreckt sich von der Bildschirmoberfläche nach außen (mit anderen Worten, in Richtung des Benutzers).

DOMPointReadOnly DOMPoint

Konstruktor

DOMPoint()

Erstellt und gibt ein neues DOMPoint-Objekt zurück, gegebenenfalls mit den Werten von null oder mehr seiner Koordinatenkomponenten und optional dem w-Perspektivwert. Sie können auch einen vorhandenen DOMPoint oder DOMPointReadOnly oder ein Objekt verwenden, um einen neuen Punkt zu erstellen, indem Sie die statische Methode DOMPoint.fromPoint() aufrufen.

Instanz-Eigenschaften

DOMPoint kann auch Eigenschaften von seinem Elternteil DOMPointReadOnly erben.

DOMPoint.x

Die x-Koordinate des DOMPoint.

DOMPoint.y

Die y-Koordinate des DOMPoint.

DOMPoint.z

Die z-Koordinate des DOMPoint.

DOMPoint.w

Der Perspektivwert des DOMPoint.

Instanz-Methoden

DOMPoint erbt Instanz-Methoden von seinem Elternteil DOMPointReadOnly.

Statische Methoden

DOMPoint kann auch statische Methoden von seinem Elternteil DOMPointReadOnly erben.

DOMPoint.fromPoint()

Erstellt ein neues veränderbares DOMPoint-Objekt basierend auf einem vorhandenen Punkt (oder einem Objekt mit passenden Eigenschaften), das die Werte für seine Eigenschaften bereitstellt.

Beispiele

Im WebXR Device API repräsentieren DOMPointReadOnly-Werte Positionen und Ausrichtungen. Im folgenden Snippet kann die Pose des XR-Geräts (wie ein VR-Headset oder Telefon mit AR-Fähigkeiten) abgerufen werden, indem während eines XRSession-Animationsrahmens XRFrame.getViewerPose() aufgerufen wird. Anschließend wird auf die resultierende XRPose's transform-Eigenschaft zugegriffen, die zwei DOMPointReadOnly-Attribute enthält: position als Vektor und orientation als Quaternion.

js
function onXRFrame(time, xrFrame) {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (viewerPose) {
    let position = viewerPose.transform.position;
    let orientation = viewerPose.transform.orientation;

    console.log(
      `XR Viewer Position: {x: ${roundToTwo(position.x)}, y: ${roundToTwo(
        position.y,
      )}, z: ${roundToTwo(position.z)}`,
    );

    console.log(
      `XR Viewer Orientation: {x: ${roundToTwo(orientation.x)}, y: ${roundToTwo(
        orientation.y,
      )}, z: ${roundToTwo(orientation.z)}, w: ${roundToTwo(orientation.w)}`,
    );
  }
}

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# DOMPoint

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch