button

Overview

<lm-button></lm-button>

The button element is a way to display buttons in a VR environment and currently is functionaly similar to lm-text (although this may be extended in the future). The can either be placed directly into a lm-document, lm-div or lm-modal.

Inner HTML

The text contents for the button are defined as part of tag body. An example may look as follows:

<lm-button>This is button label</lm-button>

This will lay the content out with the line breaks as defined. Inline styling is not currently supported.

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 button is placed directly in front of the camera at the default-placement-location defined in lm-document	none
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 button. If it is not defined, it will either expand to fill the remaining space of the parent layout or entirely contain it's text unwrappd, whichever is greater.	none
height	This is the height of the button. If not defined, it will either expand to entirely contain it's text content	none
border-radius	This is the curve on the corner of text container when drawn.	10
padding	This is the space around the button when drawn.	15
background-color	This sets the background color of this button.	#ffffff
font-family	This sets the font family of this button.	Arial
font-size	This sets the font size of this button.	18
font-color	This sets the font color of this button.	#000000
text-alignment	This sets the alignment of text within the button. This can be "Left", "Center" or "Right"	Center
text-decoration	This sets the styling of text within the button. This can be "bold", "italic" or "bold italic".	none
visible	This sets if the button is visible	true

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
text	Setting this with JavaScript will update the contexts of the button.
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 button is placed directly in front of the camera at the default-placement-location defined in lm-document	none
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 button. If it is not defined, it will either expand to fill the remaining space of the parent layout or entirely contain it's text unwrappd, whichever is greater.	none
height	This is the height of the button. If not defined, it will either expand to entirely contain it's text content	none
borderRadius	This is the curve on the corner of button container when drawn.	10
padding	This is the space around the button when drawn.	15
backgroundColor	This sets the background color of this button.	#ffffff
fontFamily	This sets the font family of this button.	Arial
fontSize	This sets the font size of this button.	18
fontColor	This sets the font color of this button.	#000000
textAlignment	This sets the alignment of text within the button. This can be "Left", "Center" or "Right"	Center
textdecoration	This sets the styling of text within the button. This can be "bold", "italic" or "bold italic".	none
visible	This sets if the button is visible	true

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.
destroy		Calling this remove this element from the scene.

JavaScript Events

These methods can be listened for using addEventListener after finding the element using standard JavaScript, such as document.getElementById().

Event Name	Description
click	This event is fired whenever this button is clicked within a scene.