MMLPositionEnterEvent extendsRemoteEvent

Received when a user enters the range of an m-position-probe.

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("positionenter", (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

detailisReadonly

detail: { documentRelative: PositionAndRotation connectionId: number }

Type declaration

documentRelative:

PositionAndRotation

The location of the user relative to the target element.

connectionId:

number

The unique numeric id of the connection that sent the event.

typeisReadonly

The **

type

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

MDN Reference

Literal: positionenter

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="3" 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("positionenter", ({ detail }) => {
    collidingUsers.add(detail.connectionId)
    const text = `User ${Array.from(collidingUsers).join(", ")} ${collidingUsers.size > 1 ? "have" : "has"} entered the probe area!`


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