@fern-solutions/aframe-effekseer

Effekseer component

This component allows integrating Effekseer effects into A-Frame projects. The effects also work in VR, though not in AR (EffekseerForWebGL#74).

Checkout the example: Online Demo | Source

Usage

The setup requires a couple of libraries to be loaded before the component is loaded. For testing the library the below snippet can be copied and used, but for production use it's recommended to bundle your own versions of the relevant dependencies:

<!-- The EffekseerForWebGL library from a mirror repository -->
<script src="https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effekseer-build/effekseer.min.js"></script>
<!-- (Optional) Zip.js for loading .efkpkg files, without this you will only be able to load .efk files -->
<script src="https://cdn.jsdelivr.net/npm/@zip.js/zip.js/dist/zip.min.js"></script>
<!-- This effekseer component -->
<script src="https://unpkg.com/@fern-solutions/aframe-effekseer/dist/effekseer.umd.min.js"></script>

The effekseer system needs to be configured on the <a-scene> to load the effekseer wasm:

<!-- Load EffekseerForWebGL wasm file from GitHub mirror (test only) -->
<a-scene effekseer="wasmPath: https://cdn.jsdelivr.net/gh/mrxz/effekseer-sample-effects/effekseer-build/effekseer.wasm">

Next you can add effects to your scene as follows

<a-assets>
    <a-asset-item id="effect-asset" src="path/to/effect.efkpkg" response-type="arraybuffer"></a-asset-item>
</a-assets>
(...)
<a-entity effekseer="src: #effect-asset" position="0 1.5 -10"></a-entity>

Properties

The effekseer component supports the following properties:

Name	Type	Default	Description
src	asset		URL or path to the .efk or .efkpkg (requires zip.js)
autoplay	boolean	true	Automatically start playing the effect once loaded
loop	boolean	false	Restart the effect as soon as it ends
dynamic	boolean	false	Update the world transform of the effect every tick. Allows the effect to move, rotate and scale along with the entity. Only enabled if you need this behaviour, otherwise leave it disabled for performance reasons

Methods

The component exposes a couple of methods for interacting with the effect: playEffect(), pauseEffect(), resumeEffect(), stopEffect() and setTargetLocation(targetLocation: THREE.Vector3)
(See example for details on how to use these)