image

Overview

<lm-image></lm-image>

The image element is a way to display images in a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal. They can be displayed inline or automatically pop out as part of a build in modal dialog.

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 image 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
src	This is the url of the image to be displayed in the VR scene.	none
width	This is the width of the image. If it is not defined, it will either expand to fill the remaining space of the parent layout or, without a parent element, size itself to the original image size.	none
height	This is the height of the image. If the width and this are not defined, it will size itself to the original image size	none
border-radius	This is the curve on the corner of image container when drawn.	0
modal	Whether this image should automatically show in a modal dialog when clicked.	false
visible	This sets if image 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
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 image 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
src	This is the url of the image to be displayed in the VR scene.	none
width	This is the width of the image. If it is not defined, it will either expand to fill the remaining space of the parent layout or, without a parent element, size itself to the original image size.	none
height	This is the height of the image. If the width and this are not defined, it will size itself to the original image size	none
borderRadius	This is the curve on the corner of image container when drawn.	0
modal	Whether this image should automatically show in a modal dialog when clicked.	false
visible	This sets if the image 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 image is clicked within a scene.