XREquirectLayer.centralHorizontalAngle — Eigenschaft · JavaScript-Referenz

Signatur

XREquirectLayer.centralHorizontalAngle

Beschreibung

Die Eigenschaft centralHorizontalAngle des Interfaces XREquirectLayer gibt an, wie breit der horizontale Ausschnitt der Kugel ist, auf den die Ebene gezeichnet wird. Der Wert ist in Radiant angegeben und liegt zwischen 0 und 2π. Der Ausschnitt wird symmetrisch um die Blickrichtung (die negative Z-Achse) der Transformation der Ebene zentriert.

Der Standardwert 2π (ca. 6.2832) steht für ein vollständiges 360°-Panorama. Bei einem 180°-Video oder einem Teilpanorama setzt man ihn entsprechend kleiner, z. B. auf Math.PI. Zusammen mit upperVerticalAngle und lowerVerticalAngle legt diese Eigenschaft fest, welcher Kugelausschnitt sichtbar ist.

Den Wert kann man beim Erzeugen über das Init-Objekt von XRWebGLBinding.createEquirectLayer() bzw. XRMediaBinding.createEquirectLayer() vorgeben. Man kann ihn aber auch später zur Laufzeit ändern. Die Änderung wirkt ab dem nächsten gerenderten Frame.

Rückgabewert

Typ

number

Beschreibung

Eine Gleitkommazahl im Bereich 0 bis 2π: der horizontale Winkel in Radiant. Standardwert ist 2π (volle 360°). Die Eigenschaft ist lesbar und beschreibbar.

Beispiele

Equirect-Ebene für ein 180°-Panorama erzeugen

const session = await navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: ['layers']
});

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2', { xrCompatible: true });
const binding = new XRWebGLBinding(session, gl);
const refSpace = await session.requestReferenceSpace('local');

const equirect = binding.createEquirectLayer({
  space: refSpace,
  viewPixelWidth: 2048,
  viewPixelHeight: 2048,
  layout: 'mono',
  centralHorizontalAngle: Math.PI, // 180° statt 360°
  upperVerticalAngle: Math.PI / 2,
  lowerVerticalAngle: -Math.PI / 2
});

session.updateRenderState({ layers: [equirect] });
console.log(equirect.centralHorizontalAngle.toFixed(4));

3.1416

Standardwert auslesen und in Grad umrechnen

const toDeg = (rad) => (rad * 180) / Math.PI;

// equirect wurde ohne centralHorizontalAngle erzeugt
console.log(`Horizontaler Winkel: ${toDeg(equirect.centralHorizontalAngle)}°`);

Horizontaler Winkel: 360°

Winkel zur Laufzeit an das Medienformat anpassen

const setPanoramaWidth = (layer, degrees) => {
  // Auf den gültigen Bereich 0–360° begrenzen
  const clamped = Math.min(Math.max(degrees, 0), 360);
  layer.centralHorizontalAngle = (clamped * Math.PI) / 180;
};

// Beim Wechsel von 360°- auf 180°-Video
setPanoramaWidth(equirect, 180);
console.log(equirect.centralHorizontalAngle === Math.PI);

true

// Wichtig · Fallstricke

Radiant, nicht Grad: Ein häufiger Fehler ist es, z. B. 180 statt Math.PI zuzuweisen. Rechne Gradwerte immer mit deg * Math.PI / 180 um.
Wertebereich: Gültig sind Werte von 0 bis 2π. Werte außerhalb dieses Bereichs sind nicht sinnvoll und können vom Browser begrenzt oder abgelehnt werden. Begrenze sie deshalb selbst.
Zentrierung: Der Ausschnitt liegt symmetrisch um die Blickrichtung der Ebene. Um das Panorama zu drehen, änderst du transform der Ebene und nicht diesen Winkel.
Verzerrung: Wenn das Quellbild einen anderen horizontalen Winkel abdeckt als eingestellt, wird es gestreckt oder gestaucht dargestellt. Der Wert sollte daher zum Aufnahmeformat passen.
Kompatibilität: Die WebXR Layers API ist experimentell. Sie ist nur in wenigen Browsern verfügbar, vor allem im Meta Quest Browser und in Chromium mit aktiviertem Flag. Sie braucht einen sicheren Kontext (HTTPS) und das Session-Feature 'layers'. Prüfe vorher mit 'XREquirectLayer' in window, ob sie vorhanden ist.

Siehe auch

XREquirectLayer XREquirectLayer.upperVerticalAngle XREquirectLayer.lowerVerticalAngle XREquirectLayer.radius XREquirectLayer.transform XRWebGLBinding.createEquirectLayer() XRMediaBinding.createEquirectLayer() XRCylinderLayer.centralAngle