<m-frame>

The m-frame element is a 3D frame. It enables composing other MML documents into the document and transforming them as a unit.

Try it

<!--
  The referenced external document
  is shown within the m-frame
-->
<m-frame
    src="https://public.mml.io/rgb-cubes.html"
></m-frame>

Attributes


src: string
The source URI of the MML document to be embedded within the current document.
min-x: float
The minimum X coordinate of the frame's contents in meters. If not specified, the content is not constrained.
max-x: float
The maximum X coordinate of the frame's contents in meters. If not specified, the content is not constrained.
min-y: float
The minimum Y coordinate of the frame's contents in meters. If not specified, the content is not constrained.
max-y: float
The maximum Y coordinate of the frame's contents in meters. If not specified, the content is not constrained.
min-z: float
The minimum Z coordinate of the frame's contents in meters. If not specified, the content is not constrained.
max-z: float
The maximum Z coordinate of the frame's contents in meters. If not specified, the content is not constrained.
load-range: float
The distance in meters from the observer at which the frame will be loaded. If bounds are specified for the frame then the range is a box expanded by this value from the bounds. If no value is specified, the frame will be loaded regardless of distance.
unload-range: float
The distance beyond the load-range that the frame stay loaded for if currently loaded. This prevents rapid changes between loading and unloading. Default value is 1 meter.

Attribute Groups

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.

Examples

Transformed m-frame

This example shows how m-frames can transform the document that they reference

<m-frame
    src="https://public.mml.io/rgb-cubes.html"
    sx="2"
    sy="3"
    rx="-45"
    ry="45"
></m-frame>

m-frame with load-range

This example shows how an m-frame can be configured to load and unload based on distance from the user/camera

<m-frame
    src="https://public.mml.io/rgb-cubes.html"
    load-range="5"
    unload-range="3"
    debug="true"
></m-frame>

<m-label y="6" width="5" z="5" content="Move inside the inner debug cube to load the m-frame contents. Move out of the outer debug cube to unload."></m-label>

m-frame with bounds

This example shows how an m-frame's contents can be bounded to a specific volume

<m-label font-size="40" width="4" x="3" content="Bounded (clipped)" y="5"></m-label>
<m-frame
    src="https://public.mml.io/rgb-cubes.html"
    x="3"
    min-x="-2"
    max-x="2"
    min-y="0"
    max-y="3"
    min-z="-2"
    max-z="2"
    debug="true"
></m-frame>

<m-label font-size="40" width="4" content="Original (unclipped)" x="-3" y="5"></m-label>
<m-frame
    x="-3"
    src="https://public.mml.io/rgb-cubes.html"
></m-frame>

Compatibility Table

	WEB	UNREAL
`m-frame`	✓	✓
`src`	✓	✓
`debug`	✓	✓
`x`	✓	✓
`y`	✓	✓
`z`	✓	✓
`rx`	✓	✓
`ry`	✓	✓
`rz`	✓	✓
`sx`	✓	✓
`sy`	✓	✓
`sz`	✓	✓
`visible`	✓	✓
`socket`	✓	✗
`id`	✓	✓
`class`	✓	✓
`load-range`	✓	✗
`unload-range`	✓	✗
`min-x`	✓	✗
`max-x`	✓	✗
`min-y`	✓	✗
`max-y`	✓	✗
`min-z`	✓	✗
`max-z`	✓	✗