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)