You can check the example here: https://petrovicstefanrs.github.io/aframe-bring-to-front/ Just press "H" to bring the box in front of camera.
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.
| 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-entity[camera] |
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>Install via npm:
npm install aframe-bring-to-front-componentThen require and use.
require('aframe');
require('aframe-bring-to-front-component');