alc

aframe-lensflare-component

A component to add a configurable lens-flare (and optional light) to an entity

Showing:

Popularity

Downloads/wk

21

GitHub Stars

12

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

2.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

aframe-lensflare-component

Version License

A component to add a configurable lens-flare (and optional light) to an entity that wraps THREE.JS Lensflares.

Examples: See Here

For A-Frame.

Example of Lensflares

API

PropertyDescriptionDefault Value
srcAsset Image to usenone
createLightWhether to create a light along with this flaretrue
positionThis is the position of the flare.true
relativeWhether to position this flare relative to the parent entity (The position property above becomes an offset )true
targetDOM id of the object to point the Flare's spotlight atnone
sizeSize of the flare graphic (Use power of 2 images for best results)500
intensityIf using createLight:true, this is the intensity of the light emitted5
lightTypeIf using createLight:true, this is a string corresponding to A-Frame light types. Either 'directional', 'point', 'spot''spot'
lightColorIf createLight:true, Color of the light and (currently) flare tint'rgb(255, 255, 255)'
lightDistanceDistance of the light (if enabled)500
lightAngleMaximum extent of the light in radians (from its direction). Valid for directional and spotlight type lightsPI/3
lightPenumbraIf using createLight:true: Percent of the light cone that is attenuated due to penumbra. Takes values between zero and 1. Valid only for spotlights0.077
lightDecayIf using createLight:true: The amount the light dims along the light's distance1

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.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-lensflare-component/dist/aframe-lensflare-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
        <img src="images/flare.jpg" alt="Test Lensflare Asset" id="flare-asset">
    </a-assets>
    <a-sky color="#000000"></a-sky>
    <a-sphere id="flare" radius="0.05" color="red" lensflare="createLight:true; relative: true; src: #flare-asset; position:0.0 0.0 0.06; lightColor:red" position="2 2 -4"></a-sphere>
    <a-sphere id="flare" radius="0.05" lensflare="createLight:true; relative: true; src: #flare-asset; position:0.0 0.0 0.06" position="0 2 -4"></a-sphere>
    <a-sphere id="flare" radius="0.05" color="blue" lensflare="createLight:true; relative: true; src: #flare-asset; position:0.0 0.0 0.06; lightColor:blue" position="-2 2 -4"></a-sphere>


    <a-plane id="ground" position="0 0 -4" rotation="-90 0 0" width="8" height="8" color="#111111" material="metalness: 0.4"></a-plane>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-lensflare-component

Then require and use.

require('aframe');
require('aframe-lensflare-component');

//Or if supported by your stack (babel, webpack):

import 'aframe';
import 'aframe-lensflare-component';

TODO

  • Seperate Flare colorisation and Light Color

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial