<m-interaction>

<m-interaction
    prompt="Toggle Color"
    debug="true"
    id="my-interaction"
>
  <m-cube y="1" id="color-cube" color="blue"></m-cube>
</m-interaction>

<script>
  const mInteraction = document.getElementById("my-interaction");
  const mCube = document.getElementById("color-cube");

  let toggle = false;
  function handleInteract() {
    toggle = !toggle;
    mCube.setAttribute("color", toggle ? "red" : "blue");
  }

  mInteraction.addEventListener("interact", handleInteract);
</script>

<m-label id="my-label" y="7" width="10" height="2" content="Move into range and press E" font-size="80" alignment="center" color="#BBB" font-color="#000"></m-label>

• Attribute Group: debuggable

  • debug: boolean

    A boolean that indicates whether the element should be drawn with debug information (e.g. axes helper). Default value is false.

• Attribute Group: transformable

  • x: float

    The position of the element along the X-axis in meters. Default value is 0.

  • y: float

    The position of the element along the Y-axis in meters. Default value is 0.

  • z: float

    The position of the element along the Z-axis in meters. Default value is 0.

  • rx: float

    The rotation of the element around the X-axis in degrees. Default value is 0.

  • ry: float

    The rotation of the element around the Y-axis in degrees. Default value is 0.

  • rz: float

    The rotation of the element around the Z-axis in degrees. Default value is 0.

  • sx: float

    The scale of the element along the X-axis. Default value is 1.

  • sy: float

    The scale of the element along the Y-axis. Default value is 1.

  • sz: float

    The scale of the element along the Z-axis. Default value is 1.

  • visible: boolean

    Whether the element is visible (true) or hidden (false) in the scene. Default value is true.

  • socket: string

    The name of a bone in the parent element's skeletal mesh to which this element will be attached. If not specified, the element will attach to the origin of its parent.

• Attribute Group: coreattrs

  • id: ID

    A unique identifier for the element, used for selection and manipulation through scripting. It must be unique within the document.

  • class: string

    A space-separated list of class names that can be used for scripting purposes.

<m-interaction x="-3" in-focus="false" prompt="Set to red" debug="true" id="red-interaction"></m-interaction>
<m-interaction x="0" in-focus="false" prompt="Set to green" debug="true" id="green-interaction"></m-interaction>
<m-interaction x="3" in-focus="false" prompt="Set to blue" debug="true" id="blue-interaction"></m-interaction>

<m-cube y="1" id="color-cube" color="blue"></m-cube>

<script>
  const mCube = document.getElementById("color-cube");
  document.getElementById("red-interaction").addEventListener("interact", () => {
    mCube.setAttribute("color", "red");
  });
  document.getElementById("green-interaction").addEventListener("interact", () => {
    mCube.setAttribute("color", "green");
  });
  document.getElementById("blue-interaction").addEventListener("interact", () => {
    mCube.setAttribute("color", "blue");
  });
</script>

<m-label id="my-label" y="7" width="10" height="2" content="Move into range and press E" font-size="80" alignment="center" color="#BBB" font-color="#000"></m-label>