div

Overview

<lm-div></lm-div>

This is the main tool for creating layouts in the VR scene. It works much like a regular HTML div but generates itself within a 3D environment.

HTML Properties

Name	Description	Default
id	The id of the HTML element on the page	none
position	This is only applied if this is the root element. It is the position of the element within the scene and should be defined as "x,y,z" If this is not defined, the div is placed directly in front of the camera at the default-placement-location defined in lm-document	none
layout	This defines how the child elements to the lm-div are layed out. The can be "Column" or "Row".	Row
offset	This defines how far it is placed closer to the camera in the z axis relative to its default position. e.g. if this is 20 it will be brought forward 20 and have a shadow applied to it	none
width	This is the width of the lm-div. If it is not defined, it will either expand to fill the remaining space of the parent layout or entirely contain it's child element, whichever is greater.	none
height	This is the height of the lm-div. If not defined, it will either expand to entirely contain it's child element	none
border-radius	This is the curve on the corner of div when drawn.	0
margin	This is the space between the child elements when they are layed out within this lm-div.	0
padding	This is the space around the child elements when the are layed out within this lm-div.	0
background-color	This sets the background color of this div. If not defined, the div will be transparent.	none
vertical-align	This sets how the child elements to the lm-div are aligned vertically, in context to the div. This may be "Top", "Middle" or "Bottom".	Top
horizontal-align	This sets how the child elements to the lm-div are aligned horizontally, in context to the div. This may be "Left", "Center" or "Right".	Center
item-vertical-align	This sets how the child elements to the lm-div are aligned vertically, in context to each other. This may be "Top", "Middle" or "Bottom".	Top
item-horizontal-align	This sets how the child elements to the lm-div are aligned horizontally, in context to each other. This may be "Left", "Center" or "Right".	Center
x-rotation	This is the rotation, in degrees, that this element should be rotated on X axis	0
y-rotation	This is the rotation, in degrees, that this element should be rotated on Y axis	0
z-rotation	This is the rotation, in degrees, that this element should be rotated on Z axis	0

JavaScript Properties

These properties can be retrieved or set after retrieving the page element using standard JavaScript, such as document.getElementById().

Name	Description	Default
id	The id of the HTML element on the page	none
position	This is only applied if this is the root element. It is the position of the element within the scene and should be defined as "x,y,z" If this is not defined, the div is placed directly in front of the camera at the default-placement-location defined in lm-document	none
layout	This defines how the child elements to the lm-div are layed out. The can be "Column" or "Row".	Row
offset	This defines how far it is placed closer to the camera in the z axis relative to its default position. e.g. if this is 20 it will be brought forward 20 and have a shadow applied to it	none
width	This is the width of the lm-div. If it is not defined, it will either expand to fill the remaining space of the parent layout or entirely contain it's child element, whichever is greater.	none
height	This is the height of the lm-div. If not defined, it will either expand to entirely contain it's child element	none
borderRadius	This is the curve on the corner of div when drawn.	0
margin	This is the space between the child elements when they are layed out within this lm-div.	0
padding	This is the space around the child elements when the are layed out within this lm-div.	0
backgroundColor	This sets the background color of this div. If not defined, the div will be transparent.	none
verticalAlign	This sets how the child elements to the lm-div are aligned vertically, in context to the div. This may be "Top", "Middle" or "Bottom".	Top
horizontalAlign	This sets how the child elements to the lm-div are aligned horizontally, in context to the div. This may be "Left", "Center" or "Right".	Center
itemVerticalAlign	This sets how the child elements to the lm-div are aligned vertically, in context to each other. This may be "Top", "Middle" or "Bottom".	Top
itemHorizontalAlign	This sets how the child elements to the lm-div are aligned horizontally, in context to each other. This may be "Left", "Center" or "Right".	Center
xRotation	This is the rotation, in degrees, that this element should be rotated on X axis	0
yRotation	This is the rotation, in degrees, that this element should be rotated on Y axis	0
zRotation	This is the rotation, in degrees, that this element should be rotated on Z axis	0

JavaScript Methods

These methods can be called after retrieving the page element using standard JavaScript, such as document.getElementById().

Method Name	Arguments	Description
getSceneObject		This returns the three.js Group object that is used with the scene.
append	element - An lm element such as lm-div, lm-text, etc	This method will append the element to this lm-div's child elements.
prepend	element - An lm element such as lm-div, lm-text, etc	This method will prepend the element to this lm-div's child elements.
removeElement	element - An lm element such as lm-div, lm-text, etc	This method will remove the element to this lm-div's child elements.
destroy		Calling this remove this element from the scene.