XRVisibilityMaskChangeEvent

Konstruktor

XRVisibilityMaskChangeEvent()

Erstellt und gibt ein neues XRVisibilityMaskChangeEvent-Objekt zurück.

Instanzeigenschaften

Zusätzlich zu den Eigenschaften, die von seiner übergeordneten Schnittstelle, Event, geerbt werden, bietet XRVisibilityMaskChangeEvent Folgendes:

eye Schreibgeschützt

Das Auge, auf das die Maske angewendet wird.

index Schreibgeschützt

Der Index des aktuellen XRView im XRViewerPose.views Array.

indices Schreibgeschützt

Gibt die Indexposition jedes Koordinatenpaares (nicht einzelner Array-Indizes) im vertices Array an, die die Dreiecke definieren, die verwendet werden, um den derzeit sichtbaren Teil der Szene darzustellen, die im XRView angezeigt wird.

session Schreibgeschützt

Die XRSession, zu der das Ereignis gehört.

vertices Schreibgeschützt

Ein Array, das die Menge möglicher Koordinatenwerte repräsentiert, die in einer Sichtbarkeitsmaske verwendet werden können. Wenn dieses Array leer ist, wird die gesamte Region des XRView gezeichnet.

Instanzmethoden

Während XRSessionEvent keine Methoden definiert, erbt es Methoden von seiner übergeordneten Schnittstelle, Event.

Beispiele

Three.js Beispiel

Dieser Ausschnitt zeigt, wie visibilitymaskchange verwendet werden könnte, um nur den sichtbaren Teil des XRView in einer Three.js-Anwendung zu zeichnen. Die neue Ansicht muss mit der XRView.projectionMatrix des relevanten XRView und einem standardmäßigen XRRigidTransform gezeichnet werden.

session.addEventListener("visibilitymaskchange", onVisibilityMaskChange);

function onVisibilityMaskChange(event) {
  const geometry = new BufferGeometry();
  geometry.setIndex(new BufferAttribute(event.indices, 1));
  const vertices = new Float32Array((event.vertices.length / 2) * 3);
  let x = 0,
    y = 0;
  while (x < event.vertices.length) {
    vertices[y++] = event.vertices[x++];
    vertices[y++] = event.vertices[x++];
    vertices[y++] = -1;
  }

  geometry.setAttribute("position", new BufferAttribute(vertices, 3));

  const mask = event.eye === "left" ? leftEyeMask : rightEyeMask;
  const matrix = cameras[event.eye === "left" ? 0 : 1].projectionMatrix;
  mask.geometry = geometry;
  mask.material = new ShaderMaterial({
    vertexShader: _visibility_mask_vertex,
    fragmentShader: _visibility_mask_fragment,
    uniforms: {
      clipMatrix: { value: matrix },
    },
  });

  maskScene = new Scene();
  maskScene.add(leftEyeMask);
  maskScene.add(rightEyeMask);
}

Der Codeausschnitt stammt von diesem Fork von WebXRManager.js.

Spezifikationen

Browser-Kompatibilität