Lens Flare Issue in Three.js

Based on the code snippet and image you've shared, I can see the issue with the red square artifact appearing at the light's position in your lens flare effect.

The problem appears to be related to how you're implementing the lens flare. It's important to note that the implementation has changed in newer versions of Three.js.

The THREE.LensFlare class you're using in your code:

JAVASCRIPTCopied
const lensflare = new THREE.LensFlare(texture, 700, 0, THREE.AdditiveBlending, color);

is actually from an older version of Three.js. In current versions, lens flares are implemented using the Lensflare object from the examples directory.

Solution

You should update your implementation to use the current Lensflare object:

JAVASCRIPTCopied
// Import the Lensflare and related classes
import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare.js';

// Create a light source
const light = new THREE.PointLight(0xffffff, 1.5, 2000);
light.position.set(0, 0, 0);
scene.add(light);

// Create the lens flare
const textureLoader = new THREE.TextureLoader();
const textureFlare0 = textureLoader.load('textures/lensflare/lensflare0.png');
const textureFlare3 = textureLoader.load('textures/lensflare/lensflare3.png');

const lensflare = new Lensflare();
lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, light.color));
lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6));
lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7));
lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9));
lensflare.addElement(new LensflareElement(textureFlare3, 70, 1.0));

// Add the lens flare to the light
light.add(lensflare);

The red square you're seeing is likely a placeholder or debug visualization from the older implementation. Using the current implementation as shown above should resolve this issue.

Make sure you're using the correct texture files and that they're properly loaded. The lens flare effect requires specific texture files to work correctly.