XRSession: visibilitymaskchange Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder legen Sie eine Ereignishandler-Eigenschaft fest.

addEventListener("visibilitymaskchange", (event) => { })

onvisibilitymaskchange = (event) => { }

Ereignistyp

Ein XRVisibilityMaskChangeEvent. Erbt von Event.

Ereigniseigenschaften

Neben den unten aufgeführten Eigenschaften sind auch die Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.

eye Schreibgeschützt

Das Auge, auf das die Maske zutrifft.

index Schreibgeschützt

Der Index der aktuellen XRView im XRViewerPose.views-Array.

indices Schreibgeschützt

Ein Array von Indizes, das die in dem vertices-Array spezifizierten Vertices angibt, die gezeichnet werden sollen, um den aktuell sichtbaren Teil der in der XRView angezeigten Szene darzustellen. Wenn dieses Array leer ist, wird die gesamte Region der XRView gezeichnet.

session Schreibgeschützt

Die XRSession, auf die sich das Ereignis bezieht.

vertices Schreibgeschützt

Ein Array von Koordinaten, das die Vertices repräsentiert, die benötigt werden, um die gesamte in der XRView angezeigte Szene zu zeichnen. Wenn dieses Array leer ist, wird die gesamte Region der XRView gezeichnet.

Beispiele

Three.js Beispiel

Dieses Snippet zeigt, wie visibilitymaskchange verwendet werden könnte, um nur den sichtbaren Teil der XRView in einer Three.js-Anwendung zu zeichnen. Die neue Ansicht muss unter Verwendung der XRView.projectionMatrix der relevanten XRView und einer 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);
}

Das Code-Snippet stammt von diesem Fork von WebXRManager.js.

Spezifikationen

Browser-Kompatibilität