MMLCollisionStartEvent extendsRemoteEvent

Received when a user starts 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="0" 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("collisionstart", ({ detail }) => {
    const text = `User ${detail.connectionId} has collided!`

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

Properties

detailisReadonly

detail: { position: Position connectionId: number }

Type declaration

position:

{ x: number y: number z: number }

The position of the collision relative to the element's origin

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: collisionstart

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="0" 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("collisionstart", ({ detail }) => {
    collidingUsers.add(detail.connectionId)
    const text = `User ${Array.from(collidingUsers).join(", ")} ${collidingUsers.size > 1 ? "have" : "has"} collided!`


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

Position

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

<m-cube id="my-cube" y="0.1" z="0" 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("collisionstart", ({ detail }) => {
    const text = `Collided at
x: ${detail.position.x.toString().substring(0, 6)},
y: ${detail.position.y.toString().substring(0, 6)},
z: ${detail.position.z.toString().substring(0, 6)}`

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