aframe-bring-to-front-component v1.1.0
aframe-bring-to-front-component
A-Frame Bring To Front Component component For A-Frame. This component serves as a wrapper around any other element and listens to an event to know when to put the wrapped element in front of the camera.
NOTE: If you want to position the element in relation to the source object, put position prop on the entity that implements this module not on the element itself. If you put position on the element itself the element will be positioned in relation to entity that implements this module.
IMPORTANT: For this component to work without source prop you must have a camera element explicitly declared somwhere inside your scene element.
Insipred by on A-Frame Modal Component.
API
| Property | Description | Default Value |
|---|---|---|
| trigger | Event to put element to front | keydown |
| triggerElement | Element to which the trigger event listener will be applied. | a-scene |
| distance | Distance of the element from the camera on the z-axis. In meters. | -1 |
| keyCode | If event is keydown or keyup event will be fired if this key is pressed Default (H) | 72 |
| source | Source element to act as a pivot for the object we want to put in front | a-entitycamera |
Installation
Browser
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-bring-to-front-component/dist/aframe-bring-to-front-component.min.js"></script>
</head>
<body>
<a-entity position="0 1.6 0">
<a-entity camera></a-entity>
</a-entity>
<a-scene>
<a-entity bring-to-front>
<a-box position="0 2 -3"></a-box>
</a-entity>
</a-scene>
</body>npm
Install via npm:
npm install aframe-bring-to-front-componentThen require and use.
require('aframe');
require('aframe-bring-to-front-component');