@zosma/three-lensflare-ts v0.108.0

three.js Lensflare

! Deprecated !

This package is deprecated. Since 2019, three.js provide all modules in the "jsm" folder with typescript support. You can use the LensflareElement size property to scale the lensflare effect:

import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare';

// ...

var baseSize = 512;
var lensflareElement = new LensflareElement( textureFlare0, baseSize, 0 );
lensflare.addElement( lensflareElement );

// ...

// Add in your animation loop (requestAnimationFrame) the following code.
// I resize only the first lensflareElement but you can resize all them if you desire.
var scale = 1; // Add here your scaling algorithm
lensflareElement.size = baseSize * scale;

Installation

npm i @zosma/three-lensflare-ts

Description

three.js's Lensflare from official package with extra scaling methods.

The extra scaling methods are:

• Lensflare.scaleElement(index, scale);
• Lensflare.scaleElements(scale);

With these methods you can resize the lensflare effect to handle the zoom of camera.

Usage

import { PointLight, TextureLoader } from 'three';
import { LensflareElement } from 'three/examples/jsm/objects/Lensflare';
import { Lensflare } from '@zosma/three-lensflare-ts';


var light = new PointLight( 0xffffff, 1.5, 2000 );

var textureLoader = new TextureLoader();

var textureFlare0 = textureLoader.load( "textures/lensflare/lensflare0.png" );
var textureFlare1 = textureLoader.load( "textures/lensflare/lensflare2.png" );
var textureFlare2 = textureLoader.load( "textures/lensflare/lensflare3.png" );

var lensflare = new Lensflare();

lensflare.addElement( new LensflareElement( textureFlare0, 512, 0 ) );
lensflare.addElement( new LensflareElement( textureFlare1, 512, 0 ) );
lensflare.addElement( new LensflareElement( textureFlare2, 60, 0.6 ) );

light.add( lensflare );

// ...

// Add in your animation loop (requestAnimationFrame) the following code
var scale = 1; // Add here your scaling algorithm
lensflare.scaleElements(scale);

The official documentation is available on the three.js's website.