MMLCollisionEndEvent extendsRemoteEvent

Received when a user stops colliding with an element.

Try it

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

<m-cube id="my-cube" y="0.1" z="5" width="4" depth="2" height="0.3" collision-interval="100"></m-cube>

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

  collidingCube.addEventListener("collisionend", ({ detail }) => {
    const text = `User ${detail.connectionId} has stopped colliding!`

    labelElement.setAttribute("content", text)
  })
</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: collisionend

Examples

Multiple users

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

<m-cube id="my-cube" y="0.1" z="5" width="4" depth="2" height="0.3" collision-interval="100"></m-cube>

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

  const collidingUsers = new Set();

  collidingCube.addEventListener("collisionend", ({ detail }) => {
    collidingUsers.add(detail.connectionId)
    const text = `User ${Array.from(collidingUsers).join(", ")} ${collidingUsers.size > 1 ? "have" : "has"} stopped colliding!`


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