MMLPositionLeaveEvent extendsRemoteEvent

Received when a user leaves the range of an m-position-probe after having entered.

Try it

<m-label y="5" z="-6" width="10" height="5" color="red" font-size="150">
</m-label>

<m-position-probe id="my-probe" z="3" range="3" y="1" debug="true" interval="100"></m-position-probe>

<script>
  const labelElement = document.querySelector("m-label")
  const collidingProbe = document.querySelector("#my-probe");

  collidingProbe.addEventListener("positionleave", (e) => {
    const colors = ["black", "blue", "green", "white", "red", "purple"];

    let selectedColor = Math.floor(Math.random() * colors.length);

    // We don't want the color to be the same as the ground
    while (colors[selectedColor] === labelElement.getAttribute("color")) {
      selectedColor = Math.floor(Math.random() * colors.length);
    }

    labelElement.setAttribute("color", colors[selectedColor])
  })
</script>

Properties

detailisReadonlyisInherited

{ connectionId: number connectionToken: undefined }

typeisReadonly

The **

type

** read-only property of the Event interface returns a string containing the event's type.

MDN Reference

Literal: positionleave

Examples

Multiple users

<m-label y="5" z="-6" width="10" height="5" color="red" font-size="150">
</m-label>

<m-position-probe id="my-probe" z="3" range="5" y="1" debug="true" interval="100"></m-position-probe>

<script>
  const labelElement = document.querySelector("m-label")
  const positionProbe = document.querySelector("#my-probe");

  const collidingUsers = new Set();

  positionProbe.addEventListener("positionleave", ({ detail }) => {
    collidingUsers.add(detail.connectionId)
    const text = `User ${Array.from(collidingUsers).join(", ")} ${collidingUsers.size > 1 ? "have" : "has"} left the probe area!`


    labelElement.setAttribute("content", text)
  })
</script>