DOMPoint.w — Eigenschaft · JavaScript-Referenz

Signatur

DOMPoint.w

Beschreibung

Die Eigenschaft DOMPoint.w liefert oder setzt die vierte Komponente eines Punkts in homogenen Koordinaten. Sie ist eine Gleitkommazahl mit doppelter Genauigkeit und hat standardmäßig den Wert 1. Zusammen mit x, y und z beschreibt sie einen Punkt so, dass er sich mit einer 4×4-Matrix (DOMMatrix) transformieren lässt – einschließlich perspektivischer Projektionen.

In der Praxis bleibt w bei affinen Transformationen (Verschieben, Drehen, Skalieren) immer 1. Erst wenn eine Matrix eine Perspektive enthält (z. B. durch CSS perspective() oder einen gesetzten m34-Wert), ändert sich w nach matrixTransform(). Um die tatsächlichen kartesischen Koordinaten zu erhalten, teilt man dann x, y und z durch w (die sogenannte perspektivische Division).

Im Gegensatz zu DOMPointReadOnly.w kann der Wert bei DOMPoint direkt zugewiesen werden. Das ist nützlich, wenn man Punkte für WebGL-/WebXR-Berechnungen oder eigene 3D-Projektionen vorbereitet.

Rückgabewert

Typ

number

Beschreibung

Die Perspektivkomponente des Punkts als Gleitkommazahl (unrestricted double). Standardwert ist 1; auch NaN und Infinity sind möglich.

Beispiele

Standardwert lesen und setzen

const p = new DOMPoint(10, 20, 5);
console.log(p.w); // Standard: 1

p.w = 2;
console.log(p.w);
console.log(p.toJSON());

1 2 { x: 10, y: 20, z: 5, w: 2 }

Perspektivische Division nach Matrix-Transformation

// Matrix mit Perspektive (entspricht CSS perspective(500px))
const m = new DOMMatrix();
m.m34 = -1 / 500;

const punkt = new DOMPoint(100, 50, 100);
const t = punkt.matrixTransform(m);
console.log(t.w);

// Kartesische Bildschirmkoordinaten berechnen
const screenX = t.x / t.w;
const screenY = t.y / t.w;
console.log(screenX.toFixed(2), screenY.toFixed(2));

0.8 125.00 62.50

Hilfsfunktion zum Normalisieren homogener Punkte

const normalisieren = (pt) => {
  if (pt.w === 0) throw new RangeError('Punkt liegt im Unendlichen (w = 0)');
  return new DOMPoint(pt.x / pt.w, pt.y / pt.w, pt.z / pt.w, 1);
};

const homogen = new DOMPoint(8, 4, 2, 2);
const n = normalisieren(homogen);
console.log(n.x, n.y, n.z, n.w);

4 2 1 1

// Wichtig · Fallstricke

Kein automatisches Normalisieren: matrixTransform() teilt x/y/z nicht durch w. Wer Bildschirmkoordinaten braucht, muss die perspektivische Division selbst durchführen.
w = 0: Ein Punkt mit w === 0 beschreibt einen Richtungsvektor bzw. einen Punkt im Unendlichen. Eine Division ergibt dann Infinity oder NaN, deshalb vorher prüfen.
Zugewiesene Werte werden in eine Zahl umgewandelt (p.w = \"3\" ergibt 3). Nicht-numerische Werte führen zu NaN, es wird kein Fehler geworfen.
Bei DOMPointReadOnly ist w schreibgeschützt. Zuweisungen werden dort stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.
Kompatibilität: wird von allen modernen Browsern unterstützt, auch in Web Workern. Das veraltete WebKitPoint hat keine w-Komponente.

Siehe auch

DOMPoint DOMPoint.x DOMPoint.y DOMPoint.z DOMPointReadOnly.matrixTransform() DOMMatrix CSSRotate.z