<m-sphere>

<m-sphere
    color="red"
    y="2"
></m-sphere>

• 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: collideable

  • collide: boolean

    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.

  • collision-interval: int

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

  • oncollisionstart: script

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

  • oncollisionmove: script

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

  • oncollisionend: script

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

• Attribute Group: colorable

  • color: string

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

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

• Attribute Group: clickable

  • clickable: boolean

    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.

  • onclick: script

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

• Attribute Group: shadows

  • cast-shadows: boolean

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

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

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

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

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

<m-sphere
    color="yellow"
    y="3"
    sx="3"
    sy="2"
    sz="3"
></m-sphere>

<m-sphere
    color="purple"
    x="3"
    y="2"
    z="2"
></m-sphere>

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