Prismatic <ml-stage> HTML Element

Stage

Stage is a feature in Prismatic that lets the users know how much physical space a web page will take up when the space required by the web page is larger than the default stage dimensions. The stage API is under active development at the moment.
By default the width and height of the stage is the same as the browser’s viewport width and height, and the stage’s breadth is 1120px. The breadth gives web developers 560px in the front and the back of the browser window to add 3D content.

We have introduced the <ml-stage></ml-stage> HTML element to be used by web developers when they require an area for their 3D content larger than the default stage's dimensions. Once this tag is added to the HTML with the new dimensions, which are provided with an attribute called extents, the users must grant or deny permission to change the stage dimensions, giving the users more control over their space. Stage dimensions cannot be smaller than the browser viewport.

The Stage Resize permissions for all websites is managed in Helio's Preferences settings, under Privacy.

Stage Attributes

The <ml-stage></ml-stage> HTML element has the extents attribute. This attribute is used to increase the space a website can use and to request permission from the user to change the space.

extents

The extents attribute in the <ml-stage></ml-stage> HTML element is used by web developers to extend the default dimensions of the stage in any direction. This attribute has 6 related properties that are used to alter the extents: top, right, bottom, left, front, and back. The value of these properties can be provided in meters (default), pixels or centimeters. Each property and value pair is delimited by semicolon.

Example:

<ml-stage id="stage" extents="top:100px; right:100px; bottom:150px; left:250px; front:200px; back:10px">
</ml-stage>

This example will request a stage with:

• 100px extent on the top
• 100px extent on the right
• 150px extent on the bottom
• 250px extent on the left
• 200px extent on the front
• 10px extent on the back

.

The values of the extents properties could be updated using JavaScript.

Example:

<ml-stage id="myStage" extents="right:10px; left:10px;">
</ml-stage>

 myStage.setAttribute("extents", "left:300px; right:200px");

Stage Events

There are two stage events that could be dispatched after a stage is requested:

• mlstage-granted
• mlstage-denied

mlstage-granted

This event is dispatched when a user grants permission to the requested stage's space.

 document.addEventListener('mlstage-granted', (e) => {
   //animate turkey model once the stage is granted.
   turkeyModel.animation = 'fly';
 });

mlstage-denied

This event is dispatched when a user denies permission to the requested stage's space.

 document.addEventListener('mlstage-denied', (e) => {
   //hide turkey model when the stage is denied.
   turkeyModel.visibility = 'hidden';
 });