<m-cube>

The m-cube element is a primitive 3D cube that can be coloured. It is often used for debugging or initial development purposes.

<m-cube
    color="red"
    y="2"
></m-cube>
  • The width of the cube in meters. Default value is 1 meter.

  • The height of the cube in meters. Default value is 1 meter.

  • The depth of the cube in meters. Default value is 1 meter.

  • The opacity of the cube, ranging from 0 (completely transparent) to 1 (completely opaque). Default value is 1.

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

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

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

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

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

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

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

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

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

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

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

    • 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.

    • Whether or not this object should participate in collision detection by other systems. Default value is true. If set to true, the object will be considered for collision tests.

    • If set, the time in milliseconds between user collision events being sent to the element. By default collision events are not sent.

    • A script expression to be executed when a user starts colliding with the element. Receives a CollisionStartEvent.

    • A script expression to be executed when a user moves the collision point they are colliding at on the element. Receives a CollisionMoveEvent.

    • A script expression to be executed when a user stops colliding with the element. Receives a CollisionEndEvent.

    • The color of the element. Accepts color values in formats such as "#FF0000", "red", or "rgb(255,0,0)". If not specified, the default color is "white".

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

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

    • Whether the element is clickable (true) or not (false). Default value is true. If false, any click will pass through as if the element was not present.

    • A script expression that is executed when the element is clicked. Events are also dispatched to "click" event listeners.

    • Whether the element casts shadows onto other elements (true) or not (false). Default value is true.

Click the cube to change its color via the script in onclick.

<m-cube
    color="blue"
    y="2"
    onclick="myFunction(this)"
></m-cube>

<script>
  function myFunction(cube) {
    const nextColor = cube.getAttribute("color") === "blue" ? "red" : "blue";
    cube.setAttribute("color", nextColor);
  }
</script>


Click the cube to change its color via the function added by addEventListener.

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

<script>
  const clickableCube = document.getElementById("clickable-cube");
  clickableCube.addEventListener("click", () => {
    const nextColor = clickableCube.getAttribute("color") === "green" ? "orange" : "green";
    clickableCube.setAttribute("color", nextColor);
  });
</script>


This is a basic m-cube with dimension properties.

<m-cube
    color="yellow"
    y="2"
    width="3"
    height="4"
    depth="2"
></m-cube>

This is a basic m-cube with position properties.

<m-cube
    color="purple"
    x="4"
    y="2"
    z="5"
></m-cube>

This is a basic m-cube with rotation properties.

<m-cube
    color="pink"
    y="2"
    rx="45"
    ry="45"
    rz="45"
></m-cube>

This is a basic m-cube with scale properties.

<m-cube
    color="yellow"
    y="2"
    sx="3"
    sy="4"
    sz="2"
></m-cube>
WEBUNREAL
m-cube
width
height
depth
opacity
debug
x
y
z
rx
ry
rz
sx
sy
sz
visible
socket
collide
collision-interval*
oncollisionstart*
oncollisionmove*
oncollisionend*
color
id
class
onclick
clickable
cast-shadows