asset

Overview

<lm-asset></lm-asset>

The asset element is a way to load GLTF assets into a VR environment. The can either be placed directly into a lm-document, lm-div or lm-modal. Currently, the only file format that is supported is GLTF.

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 asset 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 asset to be loaded into the VR scene. Currently, only GLTF files are supported.	none
radius	This is the size of the asset when it is loaded into the scene. If this is not set, the asset will be loaded to the size it is defined in the original file.	none
active-animation	This is the initial animation that the asset should be playing once it is loaded. The available animation names can be pulled from the getAnimationNames() JavaScript method.	none
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
x-rotation-speed	This applys a consistant rotation on the asset in the X axis	0
y-rotation-speed	This applys a consistant rotation on the asset in the Y axis	0
z-rotation-speed	This applys a consistant rotation on the asset in the 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 video 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 asset to be loaded into the VR scene. Currently, only GLTF files are supported.	none
radius	This is the size of the asset when it is loaded into the scene. If this is not set, the asset will be loaded to the size it is defined in the original file.	none
active-animation	This sets the animation that the asset. The available animation names can be pulled from the getAnimationNames() JavaScript method.	none
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
xRotationSpeed	This applys a consistant rotation on the asset in the X axis	0
yRotationSpeed	This applys a consistant rotation on the asset in the Y axis	0
zRotationSpeed	This applys a consistant rotation on the asset in the 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.
getAnimationNames		Retrieves an array of all the animations currently available for the asset.
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 asset is clicked within a scene.