MMLClickEvent extendsRemoteEvent

Received when a user clicks on a 3D object.

Try it

<m-cube id="cube" y="2" color="red">
</m-cube>

<script>
  const cube = document.querySelector("#cube")

  cube.addEventListener("click", (e) => {
    // let's create a random new color
    const newColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
    // and set it as the new color of the cube
    cube.setAttribute("color", newColor)
  })
</script>

Properties

detailisReadonly

detail: { position: Position connectionId: number }

Type declaration

position:

{ x: number y: number z: number }

The position of the click 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: click

Examples

Clicked by

<m-cube id="cube" y="1" width="2" height="2" depth="2" color="black">
</m-cube>
<m-label y="5" width="10" height="5" color="red" font-size="180" content="Click the cube!">
</m-label>

<script>
  const cube = document.querySelector("#cube")

  cube.addEventListener("click", (e) => {
    const label = document.querySelector("m-label")
    label.setAttribute("content", "Clicked by: " + e.detail.connectionId)
  })
</script>

Position

<m-cube id="cube" y="1" width="2" height="2" depth="2" color="black">
</m-cube>
<m-label y="5" width="10" height="5" color="red" font-size="120" content="Click the cube!">
</m-label>

<script>
  const cube = document.querySelector("#cube")

  const getShortPosition = str => str.toString().substring(0, 6)

  cube.addEventListener("click", (e) => {
    const label = document.querySelector("m-label")
    const { position } = e.detail

    label.setAttribute("content", "Clicked at: \n" + "x: " + getShortPosition(position.x) + ",\ny: " + getShortPosition(position.y) + ",\nz: " + getShortPosition(position.z))
  })
</script>