浏览代码

Examples: Clean up. (#26144)

Michael Herzog 2 年之前
父节点
当前提交
cf01605e16

+ 0 - 1
examples/files.json

@@ -281,7 +281,6 @@
 		"webgl_gpgpu_birds_gltf",
 		"webgl_gpgpu_water",
 		"webgl_gpgpu_protoplanet",
-		"webgl_lightningstrike",
 		"webgl_materials_modified",
 		"webgl_raymarching_reflect",
 		"webgl_shadowmap_csm",

+ 0 - 1017
examples/jsm/geometries/LightningStrike.js

@@ -1,1017 +0,0 @@
-import {
-	BufferGeometry,
-	DynamicDrawUsage,
-	Float32BufferAttribute,
-	MathUtils,
-	Uint32BufferAttribute,
-	Vector3
-} from 'three';
-import { SimplexNoise } from '../math/SimplexNoise.js';
-
-/**
- * @fileoverview LightningStrike object for creating lightning strikes and voltaic arcs.
- *
- *
- * Usage
- *
- * var myRay = new LightningStrike( paramsObject );
- * var myRayMesh = new THREE.Mesh( myRay, myMaterial );
- * scene.add( myRayMesh );
- * ...
- * myRay.update( currentTime );
- *
- * The "currentTime" can vary its rate, go forwards, backwards or even jump, but it cannot be negative.
- *
- * You should normally leave the ray position to (0, 0, 0). You should control it by changing the sourceOffset and destOffset parameters.
- *
- *
- * LightningStrike parameters
- *
- * The paramsObject can contain any of the following parameters.
- *
- * Legend:
- * 'LightningStrike' (also called 'ray'): An independent voltaic arc with its ramifications and defined with a set of parameters.
- * 'Subray': A ramification of the ray. It is not a LightningStrike object.
- * 'Segment': A linear segment piece of a subray.
- * 'Leaf segment': A ray segment which cannot be smaller.
- *
- *
- * The following parameters can be changed any time and if they vary smoothly, the ray form will also change smoothly:
- *
- * @param {Vector3} sourceOffset The point where the ray starts.
- *
- * @param {Vector3} destOffset The point where the ray ends.
- *
- * @param {double} timeScale The rate at wich the ray form changes in time. Default: 1
- *
- * @param {double} roughness From 0 to 1. The higher the value, the more wrinkled is the ray. Default: 0.9
- *
- * @param {double} straightness From 0 to 1. The higher the value, the more straight will be a subray path. Default: 0.7
- *
- * @param {Vector3} up0 Ray 'up' direction at the ray starting point. Must be normalized. It should be perpendicular to the ray forward direction but it doesn't matter much.
- *
- * @param {Vector3} up1 Like the up0 parameter but at the end of the ray. Must be normalized.
- *
- * @param {double} radius0 Radius of the main ray trunk at the start point. Default: 1
- *
- * @param {double} radius1 Radius of the main ray trunk at the end point. Default: 1
- *
- * @param {double} radius0Factor The radius0 of a subray is this factor times the radius0 of its parent subray. Default: 0.5
- *
- * @param {double} radius1Factor The radius1 of a subray is this factor times the radius1 of its parent subray. Default: 0.2
- *
- * @param {minRadius} Minimum value a subray radius0 or radius1 can get. Default: 0.1
- *
- *
- * The following parameters should not be changed after lightning creation. They can be changed but the ray will change its form abruptly:
- *
- * @param {boolean} isEternal If true the ray never extinguishes. Otherwise its life is controlled by the 'birthTime' and 'deathTime' parameters. Default: true if any of those two parameters is undefined.
- *
- * @param {double} birthTime The time at which the ray starts its life and begins propagating. Only if isEternal is false. Default: None.
- *
- * @param {double} deathTime The time at which the ray ends vanishing and its life. Only if isEternal is false. Default: None.
- *
- * @param {double} propagationTimeFactor From 0 to 1. Lifetime factor at which the ray ends propagating and enters the steady phase. For example, 0.1 means it is propagating 1/10 of its lifetime. Default: 0.1
- *
- * @param {double} vanishingTimeFactor From 0 to 1. Lifetime factor at which the ray ends the steady phase and begins vanishing. For example, 0.9 means it is vanishing 1/10 of its lifetime. Default: 0.9
- *
- * @param {double} subrayPeriod Subrays cycle periodically. This is their time period. Default: 4
- *
- * @param {double} subrayDutyCycle From 0 to 1. This is the fraction of time a subray is active. Default: 0.6
- *
- *
- * These parameters cannot change after lightning creation:
- *
- * @param {integer} maxIterations: Greater than 0. The number of ray's leaf segments is 2**maxIterations. Default: 9
- *
- * @param {boolean} isStatic Set to true only for rays which won't change over time and are not attached to moving objects (Rare case). It is used to set the vertex buffers non-dynamic. You can omit calling update() for these rays.
- *
- * @param {integer} ramification Greater than 0. Maximum number of child subrays a subray can have. Default: 5
- *
- * @param {integer} maxSubrayRecursion Greater than 0. Maximum level of recursion (subray descendant generations). Default: 3
- *
- * @param {double} recursionProbability From 0 to 1. The lower the value, the less chance each new generation of subrays has to generate new subrays. Default: 0.6
- *
- * @param {boolean} generateUVs If true, the ray geometry will have uv coordinates generated. u runs along the ray, and v across its perimeter. Default: false.
- *
- * @param {Object} randomGenerator Set here your random number generator which will seed the SimplexNoise and other decisions during ray tree creation.
- * It can be used to generate repeatable rays. For that, set also the noiseSeed parameter, and each ray created with that generator and seed pair will be identical in time.
- * The randomGenerator parameter should be an object with a random() function similar to Math.random, but seedable.
- * It must have also a getSeed() method, which returns the current seed, and a setSeed( seed ) method, which accepts as seed a fractional number from 0 to 1, as well as any other number.
- * The default value is an internal generator for some uses and Math.random for others (It is non-repeatable even if noiseSeed is supplied)
- *
- * @param {double} noiseSeed Seed used to make repeatable rays (see the randomGenerator)
- *
- * @param {function} onDecideSubrayCreation Set this to change the callback which decides subray creation. You can look at the default callback in the code (createDefaultSubrayCreationCallbacks)for more info.
- *
- * @param {function} onSubrayCreation This is another callback, more simple than the previous one. It can be used to adapt the form of subrays or other parameters once a subray has been created and initialized. It is used in the examples to adapt subrays to a sphere or to a plane.
- *
- *
-*/
-
-class LightningStrike extends BufferGeometry {
-
-	constructor( rayParameters = {} ) {
-
-		super();
-
-		this.isLightningStrike = true;
-
-		this.type = 'LightningStrike';
-
-		// Set parameters, and set undefined parameters to default values
-		this.init( LightningStrike.copyParameters( rayParameters, rayParameters ) );
-
-		// Creates and populates the mesh
-		this.createMesh();
-
-	}
-
-	static createRandomGenerator() {
-
-		const numSeeds = 2053;
-		const seeds = [];
-
-		for ( let i = 0; i < numSeeds; i ++ ) {
-
-			seeds.push( Math.random() );
-
-		}
-
-		const generator = {
-
-			currentSeed: 0,
-
-			random: function () {
-
-				const value = seeds[ generator.currentSeed ];
-
-				generator.currentSeed = ( generator.currentSeed + 1 ) % numSeeds;
-
-				return value;
-
-			},
-
-			getSeed: function () {
-
-				return generator.currentSeed / numSeeds;
-
-			},
-
-			setSeed: function ( seed ) {
-
-				generator.currentSeed = Math.floor( seed * numSeeds ) % numSeeds;
-
-			}
-
-		};
-
-		return generator;
-
-	}
-
-	static copyParameters( dest = {}, source = {} ) {
-
-		const vecCopy = function ( v ) {
-
-			if ( source === dest ) {
-
-				return v;
-
-			} else {
-
-				return v.clone();
-
-			}
-
-		};
-
-		dest.sourceOffset = source.sourceOffset !== undefined ? vecCopy( source.sourceOffset ) : new Vector3( 0, 100, 0 ),
-		dest.destOffset = source.destOffset !== undefined ? vecCopy( source.destOffset ) : new Vector3( 0, 0, 0 ),
-
-		dest.timeScale = source.timeScale !== undefined ? source.timeScale : 1,
-		dest.roughness = source.roughness !== undefined ? source.roughness : 0.9,
-		dest.straightness = source.straightness !== undefined ? source.straightness : 0.7,
-
-		dest.up0 = source.up0 !== undefined ? vecCopy( source.up0 ) : new Vector3( 0, 0, 1 );
-		dest.up1 = source.up1 !== undefined ? vecCopy( source.up1 ) : new Vector3( 0, 0, 1 ),
-		dest.radius0 = source.radius0 !== undefined ? source.radius0 : 1,
-		dest.radius1 = source.radius1 !== undefined ? source.radius1 : 1,
-		dest.radius0Factor = source.radius0Factor !== undefined ? source.radius0Factor : 0.5,
-		dest.radius1Factor = source.radius1Factor !== undefined ? source.radius1Factor : 0.2,
-		dest.minRadius = source.minRadius !== undefined ? source.minRadius : 0.2,
-
-		// These parameters should not be changed after lightning creation. They can be changed but the ray will change its form abruptly:
-
-		dest.isEternal = source.isEternal !== undefined ? source.isEternal : ( source.birthTime === undefined || source.deathTime === undefined ),
-		dest.birthTime = source.birthTime,
-		dest.deathTime = source.deathTime,
-		dest.propagationTimeFactor = source.propagationTimeFactor !== undefined ? source.propagationTimeFactor : 0.1,
-		dest.vanishingTimeFactor = source.vanishingTimeFactor !== undefined ? source.vanishingTimeFactor : 0.9,
-		dest.subrayPeriod = source.subrayPeriod !== undefined ? source.subrayPeriod : 4,
-		dest.subrayDutyCycle = source.subrayDutyCycle !== undefined ? source.subrayDutyCycle : 0.6;
-
-		// These parameters cannot change after lightning creation:
-
-		dest.maxIterations = source.maxIterations !== undefined ? source.maxIterations : 9;
-		dest.isStatic = source.isStatic !== undefined ? source.isStatic : false;
-		dest.ramification = source.ramification !== undefined ? source.ramification : 5;
-		dest.maxSubrayRecursion = source.maxSubrayRecursion !== undefined ? source.maxSubrayRecursion : 3;
-		dest.recursionProbability = source.recursionProbability !== undefined ? source.recursionProbability : 0.6;
-		dest.generateUVs = source.generateUVs !== undefined ? source.generateUVs : false;
-		dest.randomGenerator = source.randomGenerator,
-		dest.noiseSeed = source.noiseSeed,
-		dest.onDecideSubrayCreation = source.onDecideSubrayCreation,
-		dest.onSubrayCreation = source.onSubrayCreation;
-
-		return dest;
-
-	}
-
-	update( time ) {
-
-		if ( this.isStatic ) return;
-
-		if ( this.rayParameters.isEternal || ( this.rayParameters.birthTime <= time && time <= this.rayParameters.deathTime ) ) {
-
-			this.updateMesh( time );
-
-			if ( time < this.subrays[ 0 ].endPropagationTime ) {
-
-				this.state = LightningStrike.RAY_PROPAGATING;
-
-			} else if ( time > this.subrays[ 0 ].beginVanishingTime ) {
-
-				this.state = LightningStrike.RAY_VANISHING;
-
-			} else {
-
-				this.state = LightningStrike.RAY_STEADY;
-
-			}
-
-			this.visible = true;
-
-		} else {
-
-			this.visible = false;
-
-			if ( time < this.rayParameters.birthTime ) {
-
-				this.state = LightningStrike.RAY_UNBORN;
-
-			} else {
-
-				this.state = LightningStrike.RAY_EXTINGUISHED;
-
-			}
-
-		}
-
-	}
-
-	init( rayParameters ) {
-
-		// Init all the state from the parameters
-
-		this.rayParameters = rayParameters;
-
-		// These parameters cannot change after lightning creation:
-
-		this.maxIterations = rayParameters.maxIterations !== undefined ? Math.floor( rayParameters.maxIterations ) : 9;
-		rayParameters.maxIterations = this.maxIterations;
-		this.isStatic = rayParameters.isStatic !== undefined ? rayParameters.isStatic : false;
-		rayParameters.isStatic = this.isStatic;
-		this.ramification = rayParameters.ramification !== undefined ? Math.floor( rayParameters.ramification ) : 5;
-		rayParameters.ramification = this.ramification;
-		this.maxSubrayRecursion = rayParameters.maxSubrayRecursion !== undefined ? Math.floor( rayParameters.maxSubrayRecursion ) : 3;
-		rayParameters.maxSubrayRecursion = this.maxSubrayRecursion;
-		this.recursionProbability = rayParameters.recursionProbability !== undefined ? rayParameters.recursionProbability : 0.6;
-		rayParameters.recursionProbability = this.recursionProbability;
-		this.generateUVs = rayParameters.generateUVs !== undefined ? rayParameters.generateUVs : false;
-		rayParameters.generateUVs = this.generateUVs;
-
-		// Random generator
-		if ( rayParameters.randomGenerator !== undefined ) {
-
-			this.randomGenerator = rayParameters.randomGenerator;
-			this.seedGenerator = rayParameters.randomGenerator;
-
-			if ( rayParameters.noiseSeed !== undefined ) {
-
-				this.seedGenerator.setSeed( rayParameters.noiseSeed );
-
-			}
-
-		} else {
-
-			this.randomGenerator = LightningStrike.createRandomGenerator();
-			this.seedGenerator = Math;
-
-		}
-
-		// Ray creation callbacks
-		if ( rayParameters.onDecideSubrayCreation !== undefined ) {
-
-			this.onDecideSubrayCreation = rayParameters.onDecideSubrayCreation;
-
-		} else {
-
-			this.createDefaultSubrayCreationCallbacks();
-
-			if ( rayParameters.onSubrayCreation !== undefined ) {
-
-				this.onSubrayCreation = rayParameters.onSubrayCreation;
-
-			}
-
-		}
-
-		// Internal state
-
-		this.state = LightningStrike.RAY_INITIALIZED;
-
-		this.maxSubrays = Math.ceil( 1 + Math.pow( this.ramification, Math.max( 0, this.maxSubrayRecursion - 1 ) ) );
-		rayParameters.maxSubrays = this.maxSubrays;
-
-		this.maxRaySegments = 2 * ( 1 << this.maxIterations );
-
-		this.subrays = [];
-
-		for ( let i = 0; i < this.maxSubrays; i ++ ) {
-
-			this.subrays.push( this.createSubray() );
-
-		}
-
-		this.raySegments = [];
-
-		for ( let i = 0; i < this.maxRaySegments; i ++ ) {
-
-			this.raySegments.push( this.createSegment() );
-
-		}
-
-		this.time = 0;
-		this.timeFraction = 0;
-		this.currentSegmentCallback = null;
-		this.currentCreateTriangleVertices = this.generateUVs ? this.createTriangleVerticesWithUVs : this.createTriangleVerticesWithoutUVs;
-		this.numSubrays = 0;
-		this.currentSubray = null;
-		this.currentSegmentIndex = 0;
-		this.isInitialSegment = false;
-		this.subrayProbability = 0;
-
-		this.currentVertex = 0;
-		this.currentIndex = 0;
-		this.currentCoordinate = 0;
-		this.currentUVCoordinate = 0;
-		this.vertices = null;
-		this.uvs = null;
-		this.indices = null;
-		this.positionAttribute = null;
-		this.uvsAttribute = null;
-
-		this.simplexX = new SimplexNoise( this.seedGenerator );
-		this.simplexY = new SimplexNoise( this.seedGenerator );
-		this.simplexZ = new SimplexNoise( this.seedGenerator );
-
-		// Temp vectors
-		this.forwards = new Vector3();
-		this.forwardsFill = new Vector3();
-		this.side = new Vector3();
-		this.down = new Vector3();
-		this.middlePos = new Vector3();
-		this.middleLinPos = new Vector3();
-		this.newPos = new Vector3();
-		this.vPos = new Vector3();
-		this.cross1 = new Vector3();
-
-	}
-
-	createMesh() {
-
-		const maxDrawableSegmentsPerSubRay = 1 << this.maxIterations;
-
-		const maxVerts = 3 * ( maxDrawableSegmentsPerSubRay + 1 ) * this.maxSubrays;
-		const maxIndices = 18 * maxDrawableSegmentsPerSubRay * this.maxSubrays;
-
-		this.vertices = new Float32Array( maxVerts * 3 );
-		this.indices = new Uint32Array( maxIndices );
-
-		if ( this.generateUVs ) {
-
-			this.uvs = new Float32Array( maxVerts * 2 );
-
-		}
-
-		// Populate the mesh
-		this.fillMesh( 0 );
-
-		this.setIndex( new Uint32BufferAttribute( this.indices, 1 ) );
-
-		this.positionAttribute = new Float32BufferAttribute( this.vertices, 3 );
-		this.setAttribute( 'position', this.positionAttribute );
-
-		if ( this.generateUVs ) {
-
-			this.uvsAttribute = new Float32BufferAttribute( new Float32Array( this.uvs ), 2 );
-			this.setAttribute( 'uv', this.uvsAttribute );
-
-		}
-
-		if ( ! this.isStatic ) {
-
-			this.index.usage = DynamicDrawUsage;
-			this.positionAttribute.usage = DynamicDrawUsage;
-
-			if ( this.generateUVs ) {
-
-				this.uvsAttribute.usage = DynamicDrawUsage;
-
-			}
-
-		}
-
-		// Store buffers for later modification
-		this.vertices = this.positionAttribute.array;
-		this.indices = this.index.array;
-
-		if ( this.generateUVs ) {
-
-			this.uvs = this.uvsAttribute.array;
-
-		}
-
-	}
-
-	updateMesh( time ) {
-
-		this.fillMesh( time );
-
-		this.drawRange.count = this.currentIndex;
-
-		this.index.needsUpdate = true;
-
-		this.positionAttribute.needsUpdate = true;
-
-		if ( this.generateUVs ) {
-
-			this.uvsAttribute.needsUpdate = true;
-
-		}
-
-	}
-
-	fillMesh( time ) {
-
-		const scope = this;
-
-		this.currentVertex = 0;
-		this.currentIndex = 0;
-		this.currentCoordinate = 0;
-		this.currentUVCoordinate = 0;
-
-		this.fractalRay( time, function fillVertices( segment ) {
-
-			const subray = scope.currentSubray;
-
-			if ( time < subray.birthTime ) { //&& ( ! this.rayParameters.isEternal || scope.currentSubray.recursion > 0 ) ) {
-
-				return;
-
-			} else if ( this.rayParameters.isEternal && scope.currentSubray.recursion == 0 ) {
-
-				// Eternal rays don't propagate nor vanish, but its subrays do
-
-				scope.createPrism( segment );
-
-				scope.onDecideSubrayCreation( segment, scope );
-
-			} else if ( time < subray.endPropagationTime ) {
-
-				if ( scope.timeFraction >= segment.fraction0 * subray.propagationTimeFactor ) {
-
-					// Ray propagation has arrived to this segment
-
-					scope.createPrism( segment );
-
-					scope.onDecideSubrayCreation( segment, scope );
-
-				}
-
-			} else if ( time < subray.beginVanishingTime ) {
-
-				// Ray is steady (nor propagating nor vanishing)
-
-				scope.createPrism( segment );
-
-				scope.onDecideSubrayCreation( segment, scope );
-
-			} else {
-
-				if ( scope.timeFraction <= subray.vanishingTimeFactor + segment.fraction1 * ( 1 - subray.vanishingTimeFactor ) ) {
-
-					// Segment has not yet vanished
-
-					scope.createPrism( segment );
-
-				}
-
-				scope.onDecideSubrayCreation( segment, scope );
-
-			}
-
-		} );
-
-	}
-
-	addNewSubray( /*rayParameters*/ ) {
-
-		return this.subrays[ this.numSubrays ++ ];
-
-	}
-
-	initSubray( subray, rayParameters ) {
-
-		subray.pos0.copy( rayParameters.sourceOffset );
-		subray.pos1.copy( rayParameters.destOffset );
-		subray.up0.copy( rayParameters.up0 );
-		subray.up1.copy( rayParameters.up1 );
-		subray.radius0 = rayParameters.radius0;
-		subray.radius1 = rayParameters.radius1;
-		subray.birthTime = rayParameters.birthTime;
-		subray.deathTime = rayParameters.deathTime;
-		subray.timeScale = rayParameters.timeScale;
-		subray.roughness = rayParameters.roughness;
-		subray.straightness = rayParameters.straightness;
-		subray.propagationTimeFactor = rayParameters.propagationTimeFactor;
-		subray.vanishingTimeFactor = rayParameters.vanishingTimeFactor;
-
-		subray.maxIterations = this.maxIterations;
-		subray.seed = rayParameters.noiseSeed !== undefined ? rayParameters.noiseSeed : 0;
-		subray.recursion = 0;
-
-	}
-
-	fractalRay( time, segmentCallback ) {
-
-		this.time = time;
-		this.currentSegmentCallback = segmentCallback;
-		this.numSubrays = 0;
-
-		// Add the top level subray
-		this.initSubray( this.addNewSubray(), this.rayParameters );
-
-		// Process all subrays that are being generated until consuming all of them
-		for ( let subrayIndex = 0; subrayIndex < this.numSubrays; subrayIndex ++ ) {
-
-			const subray = this.subrays[ subrayIndex ];
-			this.currentSubray = subray;
-
-			this.randomGenerator.setSeed( subray.seed );
-
-			subray.endPropagationTime = MathUtils.lerp( subray.birthTime, subray.deathTime, subray.propagationTimeFactor );
-			subray.beginVanishingTime = MathUtils.lerp( subray.deathTime, subray.birthTime, 1 - subray.vanishingTimeFactor );
-
-			const random1 = this.randomGenerator.random;
-			subray.linPos0.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
-			subray.linPos1.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
-
-			this.timeFraction = ( time - subray.birthTime ) / ( subray.deathTime - subray.birthTime );
-
-			this.currentSegmentIndex = 0;
-			this.isInitialSegment = true;
-
-			const segment = this.getNewSegment();
-			segment.iteration = 0;
-			segment.pos0.copy( subray.pos0 );
-			segment.pos1.copy( subray.pos1 );
-			segment.linPos0.copy( subray.linPos0 );
-			segment.linPos1.copy( subray.linPos1 );
-			segment.up0.copy( subray.up0 );
-			segment.up1.copy( subray.up1 );
-			segment.radius0 = subray.radius0;
-			segment.radius1 = subray.radius1;
-			segment.fraction0 = 0;
-			segment.fraction1 = 1;
-			segment.positionVariationFactor = 1 - subray.straightness;
-
-			this.subrayProbability = this.ramification * Math.pow( this.recursionProbability, subray.recursion ) / ( 1 << subray.maxIterations );
-
-			this.fractalRayRecursive( segment );
-
-		}
-
-		this.currentSegmentCallback = null;
-		this.currentSubray = null;
-
-	}
-
-	fractalRayRecursive( segment ) {
-
-		// Leave recursion condition
-		if ( segment.iteration >= this.currentSubray.maxIterations ) {
-
-			this.currentSegmentCallback( segment );
-
-			return;
-
-		}
-
-		// Interpolation
-		this.forwards.subVectors( segment.pos1, segment.pos0 );
-		let lForwards = this.forwards.length();
-
-		if ( lForwards < 0.000001 ) {
-
-			this.forwards.set( 0, 0, 0.01 );
-			lForwards = this.forwards.length();
-
-		}
-
-		const middleRadius = ( segment.radius0 + segment.radius1 ) * 0.5;
-		const middleFraction = ( segment.fraction0 + segment.fraction1 ) * 0.5;
-
-		const timeDimension = this.time * this.currentSubray.timeScale * Math.pow( 2, segment.iteration );
-
-		this.middlePos.lerpVectors( segment.pos0, segment.pos1, 0.5 );
-		this.middleLinPos.lerpVectors( segment.linPos0, segment.linPos1, 0.5 );
-		const p = this.middleLinPos;
-
-		// Noise
-		this.newPos.set( this.simplexX.noise4d( p.x, p.y, p.z, timeDimension ),
-			this.simplexY.noise4d( p.x, p.y, p.z, timeDimension ),
-			this.simplexZ.noise4d( p.x, p.y, p.z, timeDimension ) );
-
-		this.newPos.multiplyScalar( segment.positionVariationFactor * lForwards );
-		this.newPos.add( this.middlePos );
-
-		// Recursion
-
-		const newSegment1 = this.getNewSegment();
-		newSegment1.pos0.copy( segment.pos0 );
-		newSegment1.pos1.copy( this.newPos );
-		newSegment1.linPos0.copy( segment.linPos0 );
-		newSegment1.linPos1.copy( this.middleLinPos );
-		newSegment1.up0.copy( segment.up0 );
-		newSegment1.up1.copy( segment.up1 );
-		newSegment1.radius0 = segment.radius0;
-		newSegment1.radius1 = middleRadius;
-		newSegment1.fraction0 = segment.fraction0;
-		newSegment1.fraction1 = middleFraction;
-		newSegment1.positionVariationFactor = segment.positionVariationFactor * this.currentSubray.roughness;
-		newSegment1.iteration = segment.iteration + 1;
-
-		const newSegment2 = this.getNewSegment();
-		newSegment2.pos0.copy( this.newPos );
-		newSegment2.pos1.copy( segment.pos1 );
-		newSegment2.linPos0.copy( this.middleLinPos );
-		newSegment2.linPos1.copy( segment.linPos1 );
-		this.cross1.crossVectors( segment.up0, this.forwards.normalize() );
-		newSegment2.up0.crossVectors( this.forwards, this.cross1 ).normalize();
-		newSegment2.up1.copy( segment.up1 );
-		newSegment2.radius0 = middleRadius;
-		newSegment2.radius1 = segment.radius1;
-		newSegment2.fraction0 = middleFraction;
-		newSegment2.fraction1 = segment.fraction1;
-		newSegment2.positionVariationFactor = segment.positionVariationFactor * this.currentSubray.roughness;
-		newSegment2.iteration = segment.iteration + 1;
-
-		this.fractalRayRecursive( newSegment1 );
-
-		this.fractalRayRecursive( newSegment2 );
-
-	}
-
-	createPrism( segment ) {
-
-		// Creates one triangular prism and its vertices at the segment
-
-		this.forwardsFill.subVectors( segment.pos1, segment.pos0 ).normalize();
-
-		if ( this.isInitialSegment ) {
-
-			this.currentCreateTriangleVertices( segment.pos0, segment.up0, this.forwardsFill, segment.radius0, 0 );
-
-			this.isInitialSegment = false;
-
-		}
-
-		this.currentCreateTriangleVertices( segment.pos1, segment.up0, this.forwardsFill, segment.radius1, segment.fraction1 );
-
-		this.createPrismFaces();
-
-	}
-
-	createTriangleVerticesWithoutUVs( pos, up, forwards, radius ) {
-
-		// Create an equilateral triangle (only vertices)
-
-		this.side.crossVectors( up, forwards ).multiplyScalar( radius * LightningStrike.COS30DEG );
-		this.down.copy( up ).multiplyScalar( - radius * LightningStrike.SIN30DEG );
-
-		const p = this.vPos;
-		const v = this.vertices;
-
-		p.copy( pos ).sub( this.side ).add( this.down );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		p.copy( pos ).add( this.side ).add( this.down );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		p.copy( up ).multiplyScalar( radius ).add( pos );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		this.currentVertex += 3;
-
-	}
-
-	createTriangleVerticesWithUVs( pos, up, forwards, radius, u ) {
-
-		// Create an equilateral triangle (only vertices)
-
-		this.side.crossVectors( up, forwards ).multiplyScalar( radius * LightningStrike.COS30DEG );
-		this.down.copy( up ).multiplyScalar( - radius * LightningStrike.SIN30DEG );
-
-		const p = this.vPos;
-		const v = this.vertices;
-		const uv = this.uvs;
-
-		p.copy( pos ).sub( this.side ).add( this.down );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		uv[ this.currentUVCoordinate ++ ] = u;
-		uv[ this.currentUVCoordinate ++ ] = 0;
-
-		p.copy( pos ).add( this.side ).add( this.down );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		uv[ this.currentUVCoordinate ++ ] = u;
-		uv[ this.currentUVCoordinate ++ ] = 0.5;
-
-		p.copy( up ).multiplyScalar( radius ).add( pos );
-
-		v[ this.currentCoordinate ++ ] = p.x;
-		v[ this.currentCoordinate ++ ] = p.y;
-		v[ this.currentCoordinate ++ ] = p.z;
-
-		uv[ this.currentUVCoordinate ++ ] = u;
-		uv[ this.currentUVCoordinate ++ ] = 1;
-
-		this.currentVertex += 3;
-
-	}
-
-	createPrismFaces( vertex/*, index*/ ) {
-
-		const indices = this.indices;
-		vertex = this.currentVertex - 6;
-
-		indices[ this.currentIndex ++ ] = vertex + 1;
-		indices[ this.currentIndex ++ ] = vertex + 2;
-		indices[ this.currentIndex ++ ] = vertex + 5;
-		indices[ this.currentIndex ++ ] = vertex + 1;
-		indices[ this.currentIndex ++ ] = vertex + 5;
-		indices[ this.currentIndex ++ ] = vertex + 4;
-		indices[ this.currentIndex ++ ] = vertex + 0;
-		indices[ this.currentIndex ++ ] = vertex + 1;
-		indices[ this.currentIndex ++ ] = vertex + 4;
-		indices[ this.currentIndex ++ ] = vertex + 0;
-		indices[ this.currentIndex ++ ] = vertex + 4;
-		indices[ this.currentIndex ++ ] = vertex + 3;
-		indices[ this.currentIndex ++ ] = vertex + 2;
-		indices[ this.currentIndex ++ ] = vertex + 0;
-		indices[ this.currentIndex ++ ] = vertex + 3;
-		indices[ this.currentIndex ++ ] = vertex + 2;
-		indices[ this.currentIndex ++ ] = vertex + 3;
-		indices[ this.currentIndex ++ ] = vertex + 5;
-
-	}
-
-	createDefaultSubrayCreationCallbacks() {
-
-		const random1 = this.randomGenerator.random;
-
-		this.onDecideSubrayCreation = function ( segment, lightningStrike ) {
-
-			// Decide subrays creation at parent (sub)ray segment
-
-			const subray = lightningStrike.currentSubray;
-
-			const period = lightningStrike.rayParameters.subrayPeriod;
-			const dutyCycle = lightningStrike.rayParameters.subrayDutyCycle;
-
-			const phase0 = ( lightningStrike.rayParameters.isEternal && subray.recursion == 0 ) ? - random1() * period : MathUtils.lerp( subray.birthTime, subray.endPropagationTime, segment.fraction0 ) - random1() * period;
-
-			const phase = lightningStrike.time - phase0;
-			const currentCycle = Math.floor( phase / period );
-
-			const childSubraySeed = random1() * ( currentCycle + 1 );
-
-			const isActive = phase % period <= dutyCycle * period;
-
-			let probability = 0;
-
-			if ( isActive ) {
-
-				probability = lightningStrike.subrayProbability;
-				// Distribution test: probability *= segment.fraction0 > 0.5 && segment.fraction0 < 0.9 ? 1 / 0.4 : 0;
-
-			}
-
-			if ( subray.recursion < lightningStrike.maxSubrayRecursion && lightningStrike.numSubrays < lightningStrike.maxSubrays && random1() < probability ) {
-
-				const childSubray = lightningStrike.addNewSubray();
-
-				const parentSeed = lightningStrike.randomGenerator.getSeed();
-				childSubray.seed = childSubraySeed;
-				lightningStrike.randomGenerator.setSeed( childSubraySeed );
-
-				childSubray.recursion = subray.recursion + 1;
-				childSubray.maxIterations = Math.max( 1, subray.maxIterations - 1 );
-
-				childSubray.linPos0.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
-				childSubray.linPos1.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
-				childSubray.up0.copy( subray.up0 );
-				childSubray.up1.copy( subray.up1 );
-				childSubray.radius0 = segment.radius0 * lightningStrike.rayParameters.radius0Factor;
-				childSubray.radius1 = Math.min( lightningStrike.rayParameters.minRadius, segment.radius1 * lightningStrike.rayParameters.radius1Factor );
-
-				childSubray.birthTime = phase0 + ( currentCycle ) * period;
-				childSubray.deathTime = childSubray.birthTime + period * dutyCycle;
-
-				if ( ! lightningStrike.rayParameters.isEternal && subray.recursion == 0 ) {
-
-					childSubray.birthTime = Math.max( childSubray.birthTime, subray.birthTime );
-					childSubray.deathTime = Math.min( childSubray.deathTime, subray.deathTime );
-
-				}
-
-				childSubray.timeScale = subray.timeScale * 2;
-				childSubray.roughness = subray.roughness;
-				childSubray.straightness = subray.straightness;
-				childSubray.propagationTimeFactor = subray.propagationTimeFactor;
-				childSubray.vanishingTimeFactor = subray.vanishingTimeFactor;
-
-				lightningStrike.onSubrayCreation( segment, subray, childSubray, lightningStrike );
-
-				lightningStrike.randomGenerator.setSeed( parentSeed );
-
-			}
-
-		};
-
-		const vec1Pos = new Vector3();
-		const vec2Forward = new Vector3();
-		const vec3Side = new Vector3();
-		const vec4Up = new Vector3();
-
-		this.onSubrayCreation = function ( segment, parentSubray, childSubray, lightningStrike ) {
-
-			// Decide childSubray origin and destination positions (pos0 and pos1) and possibly other properties of childSubray
-
-			// Just use the default cone position generator
-			lightningStrike.subrayCylinderPosition( segment, parentSubray, childSubray, 0.5, 0.6, 0.2 );
-
-		};
-
-		this.subrayConePosition = function ( segment, parentSubray, childSubray, heightFactor, sideWidthFactor, minSideWidthFactor ) {
-
-			// Sets childSubray pos0 and pos1 in a cone
-
-			childSubray.pos0.copy( segment.pos0 );
-
-			vec1Pos.subVectors( parentSubray.pos1, parentSubray.pos0 );
-			vec2Forward.copy( vec1Pos ).normalize();
-			vec1Pos.multiplyScalar( segment.fraction0 + ( 1 - segment.fraction0 ) * ( random1() * heightFactor ) );
-			const length = vec1Pos.length();
-			vec3Side.crossVectors( parentSubray.up0, vec2Forward );
-			const angle = 2 * Math.PI * random1();
-			vec3Side.multiplyScalar( Math.cos( angle ) );
-			vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin( angle ) );
-
-			childSubray.pos1.copy( vec3Side ).add( vec4Up ).multiplyScalar( length * sideWidthFactor * ( minSideWidthFactor + random1() * ( 1 - minSideWidthFactor ) ) ).add( vec1Pos ).add( parentSubray.pos0 );
-
-		};
-
-		this.subrayCylinderPosition = function ( segment, parentSubray, childSubray, heightFactor, sideWidthFactor, minSideWidthFactor ) {
-
-			// Sets childSubray pos0 and pos1 in a cylinder
-
-			childSubray.pos0.copy( segment.pos0 );
-
-			vec1Pos.subVectors( parentSubray.pos1, parentSubray.pos0 );
-			vec2Forward.copy( vec1Pos ).normalize();
-			vec1Pos.multiplyScalar( segment.fraction0 + ( 1 - segment.fraction0 ) * ( ( 2 * random1() - 1 ) * heightFactor ) );
-			const length = vec1Pos.length();
-			vec3Side.crossVectors( parentSubray.up0, vec2Forward );
-			const angle = 2 * Math.PI * random1();
-			vec3Side.multiplyScalar( Math.cos( angle ) );
-			vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin( angle ) );
-
-			childSubray.pos1.copy( vec3Side ).add( vec4Up ).multiplyScalar( length * sideWidthFactor * ( minSideWidthFactor + random1() * ( 1 - minSideWidthFactor ) ) ).add( vec1Pos ).add( parentSubray.pos0 );
-
-		};
-
-	}
-
-	createSubray() {
-
-		return {
-
-			seed: 0,
-			maxIterations: 0,
-			recursion: 0,
-			pos0: new Vector3(),
-			pos1: new Vector3(),
-			linPos0: new Vector3(),
-			linPos1: new Vector3(),
-			up0: new Vector3(),
-			up1: new Vector3(),
-			radius0: 0,
-			radius1: 0,
-			birthTime: 0,
-			deathTime: 0,
-			timeScale: 0,
-			roughness: 0,
-			straightness: 0,
-			propagationTimeFactor: 0,
-			vanishingTimeFactor: 0,
-			endPropagationTime: 0,
-			beginVanishingTime: 0
-
-		};
-
-	}
-
-	createSegment() {
-
-		return {
-			iteration: 0,
-			pos0: new Vector3(),
-			pos1: new Vector3(),
-			linPos0: new Vector3(),
-			linPos1: new Vector3(),
-			up0: new Vector3(),
-			up1: new Vector3(),
-			radius0: 0,
-			radius1: 0,
-			fraction0: 0,
-			fraction1: 0,
-			positionVariationFactor: 0
-		};
-
-	}
-
-	getNewSegment() {
-
-		return this.raySegments[ this.currentSegmentIndex ++ ];
-
-	}
-
-	copy( source ) {
-
-		super.copy( source );
-
-		this.init( LightningStrike.copyParameters( {}, source.rayParameters ) );
-
-		return this;
-
-	}
-
-	clone() {
-
-		return new this.constructor( LightningStrike.copyParameters( {}, this.rayParameters ) );
-
-	}
-
-}
-
-// Ray states
-LightningStrike.RAY_INITIALIZED = 0;
-LightningStrike.RAY_UNBORN = 1;
-LightningStrike.RAY_PROPAGATING = 2;
-LightningStrike.RAY_STEADY = 3;
-LightningStrike.RAY_VANISHING = 4;
-LightningStrike.RAY_EXTINGUISHED = 5;
-
-LightningStrike.COS30DEG = Math.cos( 30 * Math.PI / 180 );
-LightningStrike.SIN30DEG = Math.sin( 30 * Math.PI / 180 );
-
-export { LightningStrike };

+ 0 - 245
examples/jsm/objects/LightningStorm.js

@@ -1,245 +0,0 @@
-import {
-	MathUtils,
-	Mesh,
-	MeshBasicMaterial,
-	Object3D
-} from 'three';
-import { LightningStrike } from '../geometries/LightningStrike.js';
-
-/**
- * @fileoverview Lightning strike object generator
- *
- *
- * Usage
- *
- * const myStorm = new LightningStorm( paramsObject );
- * myStorm.position.set( ... );
- * scene.add( myStorm );
- * ...
- * myStorm.update( currentTime );
- *
- * The "currentTime" can only go forwards or be stopped.
- *
- *
- * LightningStorm parameters:
- *
- * @param {double} size Size of the storm. If no 'onRayPosition' parameter is defined, it means the side of the rectangle the storm covers.
- *
- * @param {double} minHeight Minimum height a ray can start at. If no 'onRayPosition' parameter is defined, it means the height above plane y = 0.
- *
- * @param {double} maxHeight Maximum height a ray can start at. If no 'onRayPosition' parameter is defined, it means the height above plane y = 0.
- *
- * @param {double} maxSlope The maximum inclination slope of a ray. If no 'onRayPosition' parameter is defined, it means the slope relative to plane y = 0.
- *
- * @param {integer} maxLightnings Greater than 0. The maximum number of simultaneous rays.
- *
- * @param {double} lightningMinPeriod minimum time between two consecutive rays.
- *
- * @param {double} lightningMaxPeriod maximum time between two consecutive rays.
- *
- * @param {double} lightningMinDuration The minimum time a ray can last.
- *
- * @param {double} lightningMaxDuration The maximum time a ray can last.
- *
- * @param {Object} lightningParameters The parameters for created rays. See LightningStrike (geometry)
- *
- * @param {Material} lightningMaterial The THREE.Material used for the created rays.
- *
- * @param {function} onRayPosition Optional callback with two Vector3 parameters (source, dest). You can set here the start and end points for each created ray, using the standard size, minHeight, etc parameters and other values in your algorithm.
- *
- * @param {function} onLightningDown This optional callback is called with one parameter (lightningStrike) when a ray ends propagating, so it has hit the ground.
- *
- *
-*/
-
-class LightningStorm extends Object3D {
-
-	constructor( stormParams = {} ) {
-
-		super();
-
-		this.isLightningStorm = true;
-
-		// Parameters
-
-		this.stormParams = stormParams;
-
-		stormParams.size = stormParams.size !== undefined ? stormParams.size : 1000.0;
-		stormParams.minHeight = stormParams.minHeight !== undefined ? stormParams.minHeight : 80.0;
-		stormParams.maxHeight = stormParams.maxHeight !== undefined ? stormParams.maxHeight : 100.0;
-		stormParams.maxSlope = stormParams.maxSlope !== undefined ? stormParams.maxSlope : 1.1;
-
-		stormParams.maxLightnings = stormParams.maxLightnings !== undefined ? stormParams.maxLightnings : 3;
-
-		stormParams.lightningMinPeriod = stormParams.lightningMinPeriod !== undefined ? stormParams.lightningMinPeriod : 3.0;
-		stormParams.lightningMaxPeriod = stormParams.lightningMaxPeriod !== undefined ? stormParams.lightningMaxPeriod : 7.0;
-
-		stormParams.lightningMinDuration = stormParams.lightningMinDuration !== undefined ? stormParams.lightningMinDuration : 1.0;
-		stormParams.lightningMaxDuration = stormParams.lightningMaxDuration !== undefined ? stormParams.lightningMaxDuration : 2.5;
-
-		this.lightningParameters = LightningStrike.copyParameters( stormParams.lightningParameters, stormParams.lightningParameters );
-
-		this.lightningParameters.isEternal = false;
-
-		this.lightningMaterial = stormParams.lightningMaterial !== undefined ? stormParams.lightningMaterial : new MeshBasicMaterial( { color: 0xB0FFFF } );
-
-		if ( stormParams.onRayPosition !== undefined ) {
-
-			this.onRayPosition = stormParams.onRayPosition;
-
-		} else {
-
-			this.onRayPosition = function ( source, dest ) {
-
-				dest.set( ( Math.random() - 0.5 ) * stormParams.size, 0, ( Math.random() - 0.5 ) * stormParams.size );
-
-				const height = MathUtils.lerp( stormParams.minHeight, stormParams.maxHeight, Math.random() );
-
-				source.set( stormParams.maxSlope * ( 2 * Math.random() - 1 ), 1, stormParams.maxSlope * ( 2 * Math.random() - 1 ) ).multiplyScalar( height ).add( dest );
-
-			};
-
-		}
-
-		this.onLightningDown = stormParams.onLightningDown;
-
-		// Internal state
-
-		this.inited = false;
-		this.nextLightningTime = 0;
-		this.lightningsMeshes = [];
-		this.deadLightningsMeshes = [];
-
-		for ( let i = 0; i < this.stormParams.maxLightnings; i ++ ) {
-
-			const lightning = new LightningStrike( LightningStrike.copyParameters( {}, this.lightningParameters ) );
-			const mesh = new Mesh( lightning, this.lightningMaterial );
-			this.deadLightningsMeshes.push( mesh );
-
-		}
-
-	}
-
-	update( time ) {
-
-		if ( ! this.inited ) {
-
-			this.nextLightningTime = this.getNextLightningTime( time ) * Math.random();
-			this.inited = true;
-
-		}
-
-		if ( time >= this.nextLightningTime ) {
-
-			// Lightning creation
-
-			const lightningMesh = this.deadLightningsMeshes.pop();
-
-			if ( lightningMesh ) {
-
-				const lightningParams1 = LightningStrike.copyParameters( lightningMesh.geometry.rayParameters, this.lightningParameters );
-
-				lightningParams1.birthTime = time;
-				lightningParams1.deathTime = time + MathUtils.lerp( this.stormParams.lightningMinDuration, this.stormParams.lightningMaxDuration, Math.random() );
-
-				this.onRayPosition( lightningParams1.sourceOffset, lightningParams1.destOffset );
-
-				lightningParams1.noiseSeed = Math.random();
-
-				this.add( lightningMesh );
-
-				this.lightningsMeshes.push( lightningMesh );
-
-			}
-
-			// Schedule next lightning
-			this.nextLightningTime = this.getNextLightningTime( time );
-
-		}
-
-		let i = 0, il = this.lightningsMeshes.length;
-
-		while ( i < il ) {
-
-			const mesh = this.lightningsMeshes[ i ];
-
-			const lightning = mesh.geometry;
-
-			const prevState = lightning.state;
-
-			lightning.update( time );
-
-			if ( prevState === LightningStrike.RAY_PROPAGATING && lightning.state > prevState ) {
-
-				if ( this.onLightningDown ) {
-
-					this.onLightningDown( lightning );
-
-				}
-
-			}
-
-			if ( lightning.state === LightningStrike.RAY_EXTINGUISHED ) {
-
-				// Lightning is to be destroyed
-
-				this.lightningsMeshes.splice( this.lightningsMeshes.indexOf( mesh ), 1 );
-
-				this.deadLightningsMeshes.push( mesh );
-
-				this.remove( mesh );
-
-				il --;
-
-			} else {
-
-				i ++;
-
-			}
-
-		}
-
-	}
-
-	getNextLightningTime( currentTime ) {
-
-		return currentTime + MathUtils.lerp( this.stormParams.lightningMinPeriod, this.stormParams.lightningMaxPeriod, Math.random() ) / ( this.stormParams.maxLightnings + 1 );
-
-	}
-
-	copy( source, recursive ) {
-
-		super.copy( source, recursive );
-
-		this.stormParams.size = source.stormParams.size;
-		this.stormParams.minHeight = source.stormParams.minHeight;
-		this.stormParams.maxHeight = source.stormParams.maxHeight;
-		this.stormParams.maxSlope = source.stormParams.maxSlope;
-
-		this.stormParams.maxLightnings = source.stormParams.maxLightnings;
-
-		this.stormParams.lightningMinPeriod = source.stormParams.lightningMinPeriod;
-		this.stormParams.lightningMaxPeriod = source.stormParams.lightningMaxPeriod;
-
-		this.stormParams.lightningMinDuration = source.stormParams.lightningMinDuration;
-		this.stormParams.lightningMaxDuration = source.stormParams.lightningMaxDuration;
-
-		this.lightningParameters = LightningStrike.copyParameters( {}, source.lightningParameters );
-
-		this.lightningMaterial = source.stormParams.lightningMaterial;
-
-		this.onLightningDown = source.onLightningDown;
-
-		return this;
-
-	}
-
-	clone() {
-
-		return new this.constructor( this.stormParams ).copy( this );
-
-	}
-
-}
-
-export { LightningStorm };

二进制
examples/screenshots/webgl_lightningstrike.jpg


+ 2 - 0
examples/svg_lines.html

@@ -36,6 +36,8 @@
 
 			import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js';
 
+			THREE.ColorManagement.enabled = false;
+
 			let camera, scene, renderer;
 
 			init();

+ 1 - 1
examples/svg_sandbox.html

@@ -34,7 +34,7 @@
 
 			import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			THREE.ColorManagement.enabled = false;
 
 			let camera, scene, renderer, stats;
 

+ 0 - 795
examples/webgl_lightningstrike.html

@@ -1,795 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - lightning strike</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-
-		<div id="container"></div>
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lightning strike</div>
-
-		<!-- Import maps polyfill -->
-		<!-- Remove this when import maps will be widely supported -->
-		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { LightningStrike } from 'three/addons/geometries/LightningStrike.js';
-			import { LightningStorm } from 'three/addons/objects/LightningStorm.js';
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
-			let container, stats;
-
-			let scene, renderer, composer, gui;
-
-			let currentSceneIndex = 0;
-
-			let currentTime = 0;
-
-			const sceneCreators = [
-				createConesScene,
-				createPlasmaBallScene,
-				createStormScene
-			];
-
-			const clock = new THREE.Clock();
-
-			const raycaster = new THREE.Raycaster();
-			const mouse = new THREE.Vector2();
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.getElementById( 'container' );
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container.appendChild( renderer.domElement );
-
-				composer = new EffectComposer( renderer );
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-				createScene();
-
-			}
-
-			function createScene() {
-
-				scene = sceneCreators[ currentSceneIndex ]();
-
-				createGUI();
-
-			}
-
-			function onWindowResize() {
-
-				scene.userData.camera.aspect = window.innerWidth / window.innerHeight;
-				scene.userData.camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				composer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function createGUI() {
-
-				if ( gui ) {
-
-					gui.destroy();
-
-				}
-
-				gui = new GUI( { width: 315 } );
-
-				const sceneFolder = gui.addFolder( 'Scene' );
-
-				scene.userData.sceneIndex = currentSceneIndex;
-
-				sceneFolder.add( scene.userData, 'sceneIndex', { 'Electric Cones': 0, 'Plasma Ball': 1, 'Storm': 2 } ).name( 'Scene' ).onChange( function ( value ) {
-
-					currentSceneIndex = value;
-
-					createScene();
-
-				} );
-
-				scene.userData.timeRate = 1;
-				sceneFolder.add( scene.userData, 'timeRate', scene.userData.canGoBackwardsInTime ? - 1 : 0, 1 ).name( 'Time rate' );
-
-				sceneFolder.open();
-
-				const graphicsFolder = gui.addFolder( 'Graphics' );
-
-				graphicsFolder.add( scene.userData, 'outlineEnabled' ).name( 'Glow enabled' );
-
-				scene.userData.lightningColorRGB = [
-					scene.userData.lightningColor.r * 255,
-					scene.userData.lightningColor.g * 255,
-					scene.userData.lightningColor.b * 255
-				];
-				graphicsFolder.addColor( scene.userData, 'lightningColorRGB' ).name( 'Color' ).onChange( function ( value ) {
-
-					scene.userData.lightningMaterial.color.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 );
-
-				} );
-				scene.userData.outlineColorRGB = [
-					scene.userData.outlineColor.r * 255,
-					scene.userData.outlineColor.g * 255,
-					scene.userData.outlineColor.b * 255
-				];
-				graphicsFolder.addColor( scene.userData, 'outlineColorRGB' ).name( 'Glow color' ).onChange( function ( value ) {
-
-					scene.userData.outlineColor.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 );
-
-				} );
-
-				graphicsFolder.open();
-
-				const rayFolder = gui.addFolder( 'Ray parameters' );
-
-				rayFolder.add( scene.userData.rayParams, 'straightness', 0, 1 ).name( 'Straightness' );
-				rayFolder.add( scene.userData.rayParams, 'roughness', 0, 1 ).name( 'Roughness' );
-				rayFolder.add( scene.userData.rayParams, 'radius0', 0.1, 10 ).name( 'Initial radius' );
-				rayFolder.add( scene.userData.rayParams, 'radius1', 0.1, 10 ).name( 'Final radius' );
-				rayFolder.add( scene.userData.rayParams, 'radius0Factor', 0, 1 ).name( 'Subray initial radius' );
-				rayFolder.add( scene.userData.rayParams, 'radius1Factor', 0, 1 ).name( 'Subray final radius' );
-				rayFolder.add( scene.userData.rayParams, 'timeScale', 0, 5 ).name( 'Ray time scale' );
-				rayFolder.add( scene.userData.rayParams, 'subrayPeriod', 0.1, 10 ).name( 'Subray period (s)' );
-				rayFolder.add( scene.userData.rayParams, 'subrayDutyCycle', 0, 1 ).name( 'Subray duty cycle' );
-
-				if ( scene.userData.recreateRay ) {
-
-					// Parameters which need to recreate the ray after modification
-
-					const raySlowFolder = gui.addFolder( 'Ray parameters (slow)' );
-
-					raySlowFolder.add( scene.userData.rayParams, 'ramification', 0, 15 ).step( 1 ).name( 'Ramification' ).onFinishChange( function () {
-
-						scene.userData.recreateRay();
-
-					} );
-
-					raySlowFolder.add( scene.userData.rayParams, 'maxSubrayRecursion', 0, 5 ).step( 1 ).name( 'Recursion' ).onFinishChange( function () {
-
-						scene.userData.recreateRay();
-
-					} );
-
-					raySlowFolder.add( scene.userData.rayParams, 'recursionProbability', 0, 1 ).name( 'Rec. probability' ).onFinishChange( function () {
-
-						scene.userData.recreateRay();
-
-					} );
-
-					raySlowFolder.open();
-
-				}
-
-				rayFolder.open();
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				currentTime += scene.userData.timeRate * clock.getDelta();
-
-				if ( currentTime < 0 ) {
-
-					currentTime = 0;
-
-				}
-
-				scene.userData.render( currentTime );
-
-			}
-
-			function createOutline( scene, objectsArray, visibleColor ) {
-
-				const outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray );
-				outlinePass.edgeStrength = 2.5;
-				outlinePass.edgeGlow = 0.7;
-				outlinePass.edgeThickness = 2.8;
-				outlinePass.visibleEdgeColor = visibleColor;
-				outlinePass.hiddenEdgeColor.set( 0 );
-				composer.addPass( outlinePass );
-
-				scene.userData.outlineEnabled = true;
-
-				return outlinePass;
-
-			}
-
-			//
-
-			function createConesScene() {
-
-				const scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
-
-				scene.userData.canGoBackwardsInTime = true;
-
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 200, 100000 );
-
-				// Lights
-
-				scene.userData.lightningColor = new THREE.Color( 0xB0FFFF );
-				scene.userData.outlineColor = new THREE.Color( 0x00FFFF );
-
-				const posLight = new THREE.PointLight( 0x00ffff, 1, 5000, 2 );
-				scene.add( posLight );
-
-				// Ground
-
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 200000, 200000 ), new THREE.MeshPhongMaterial( { color: 0xC0C0C0, shininess: 0 } ) );
-				ground.rotation.x = - Math.PI * 0.5;
-				scene.add( ground );
-
-				// Cones
-
-				const conesDistance = 1000;
-				const coneHeight = 200;
-				const coneHeightHalf = coneHeight * 0.5;
-
-				posLight.position.set( 0, ( conesDistance + coneHeight ) * 0.5, 0 );
-				posLight.color = scene.userData.outlineColor;
-
-				scene.userData.camera.position.set( 5 * coneHeight, 4 * coneHeight, 18 * coneHeight );
-
-				const coneMesh1 = new THREE.Mesh( new THREE.ConeGeometry( coneHeight, coneHeight, 30, 1, false ), new THREE.MeshPhongMaterial( { color: 0xFFFF00, emissive: 0x1F1F00 } ) );
-				coneMesh1.rotation.x = Math.PI;
-				coneMesh1.position.y = conesDistance + coneHeight;
-				scene.add( coneMesh1 );
-
-				const coneMesh2 = new THREE.Mesh( coneMesh1.geometry.clone(), new THREE.MeshPhongMaterial( { color: 0xFF2020, emissive: 0x1F0202 } ) );
-				coneMesh2.position.y = coneHeightHalf;
-				scene.add( coneMesh2 );
-
-				// Lightning strike
-
-				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );
-
-				scene.userData.rayParams = {
-
-					sourceOffset: new THREE.Vector3(),
-					destOffset: new THREE.Vector3(),
-					radius0: 4,
-					radius1: 4,
-					minRadius: 2.5,
-					maxIterations: 7,
-					isEternal: true,
-
-					timeScale: 0.7,
-
-					propagationTimeFactor: 0.05,
-					vanishingTimeFactor: 0.95,
-					subrayPeriod: 3.5,
-					subrayDutyCycle: 0.6,
-					maxSubrayRecursion: 3,
-					ramification: 7,
-					recursionProbability: 0.6,
-
-					roughness: 0.85,
-					straightness: 0.6
-
-				};
-
-				let lightningStrike;
-				let lightningStrikeMesh;
-				const outlineMeshArray = [];
-
-				scene.userData.recreateRay = function () {
-
-					if ( lightningStrikeMesh ) {
-
-						scene.remove( lightningStrikeMesh );
-
-					}
-
-					lightningStrike = new LightningStrike( scene.userData.rayParams );
-					lightningStrikeMesh = new THREE.Mesh( lightningStrike, scene.userData.lightningMaterial );
-
-					outlineMeshArray.length = 0;
-					outlineMeshArray.push( lightningStrikeMesh );
-
-					scene.add( lightningStrikeMesh );
-
-				};
-
-				scene.userData.recreateRay();
-
-				// Compose rendering
-
-				composer.passes = [];
-				composer.addPass( new RenderPass( scene, scene.userData.camera ) );
-				createOutline( scene, outlineMeshArray, scene.userData.outlineColor );
-
-				// Controls
-
-				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
-				controls.target.y = ( conesDistance + coneHeight ) * 0.5;
-				controls.enableDamping = true;
-				controls.dampingFactor = 0.05;
-
-				scene.userData.render = function ( time ) {
-
-					// Move cones and Update ray position
-					coneMesh1.position.set( Math.sin( 0.5 * time ) * conesDistance * 0.6, conesDistance + coneHeight, Math.cos( 0.5 * time ) * conesDistance * 0.6 );
-					coneMesh2.position.set( Math.sin( 0.9 * time ) * conesDistance, coneHeightHalf, 0 );
-					lightningStrike.rayParameters.sourceOffset.copy( coneMesh1.position );
-					lightningStrike.rayParameters.sourceOffset.y -= coneHeightHalf;
-					lightningStrike.rayParameters.destOffset.copy( coneMesh2.position );
-					lightningStrike.rayParameters.destOffset.y += coneHeightHalf;
-
-					lightningStrike.update( time );
-
-					controls.update();
-
-					// Update point light position to the middle of the ray
-					posLight.position.lerpVectors( lightningStrike.rayParameters.sourceOffset, lightningStrike.rayParameters.destOffset, 0.5 );
-
-					if ( scene.userData.outlineEnabled ) {
-
-						composer.render();
-
-					}	else {
-
-						renderer.render( scene, scene.userData.camera );
-
-					}
-
-				};
-
-				return scene;
-
-			}
-
-			//
-
-			function createPlasmaBallScene() {
-
-				const scene = new THREE.Scene();
-
-				scene.userData.canGoBackwardsInTime = true;
-
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 100, 50000 );
-
-				const ballScene = new THREE.Scene();
-				ballScene.background = new THREE.Color( 0x454545 );
-
-				// Lights
-
-				const ambientLight = new THREE.AmbientLight( 0x444444 );
-				ballScene.add( ambientLight );
-				scene.add( ambientLight );
-
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				light1.position.set( 1, 1, 1 );
-				ballScene.add( light1 );
-				scene.add( light1 );
-
-				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( - 0.5, 1, 0.2 );
-				ballScene.add( light2 );
-				scene.add( light2 );
-
-				// Plasma ball
-
-				scene.userData.lightningColor = new THREE.Color( 0xFFB0FF );
-				scene.userData.outlineColor = new THREE.Color( 0xFF00FF );
-
-				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor, side: THREE.DoubleSide } );
-
-				const r = 'textures/cube/Bridge2/';
-				const urls = [ r + 'posx.jpg', r + 'negx.jpg',
-							 r + 'posy.jpg', r + 'negy.jpg',
-							 r + 'posz.jpg', r + 'negz.jpg' ];
-
-				const textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.mapping = THREE.CubeReflectionMapping;
-				textureCube.colorSpace = THREE.SRGBColorSpace;
-
-				const sphereMaterial = new THREE.MeshPhysicalMaterial( {
-					transparent: true,
-					transmission: .96,
-					depthWrite: false,
-					color: 'white',
-					metalness: 0,
-					roughness: 0,
-					envMap: textureCube
-				} );
-
-				const sphereHeight = 300;
-				const sphereRadius = 200;
-
-				scene.userData.camera.position.set( 5 * sphereRadius, 2 * sphereHeight, 6 * sphereRadius );
-
-				const sphereMesh = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius, 80, 40 ), sphereMaterial );
-				sphereMesh.position.set( 0, sphereHeight, 0 );
-				ballScene.add( sphereMesh );
-
-				const sphere = new THREE.Sphere( sphereMesh.position, sphereRadius );
-
-				const spherePlasma = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius * 0.05, 24, 12 ), scene.userData.lightningMaterial );
-				spherePlasma.position.copy( sphereMesh.position );
-				spherePlasma.scale.y = 0.6;
-				scene.add( spherePlasma );
-
-				const post = new THREE.Mesh(
-					new THREE.CylinderGeometry( sphereRadius * 0.06, sphereRadius * 0.06, sphereHeight, 6, 1, true ),
-					new THREE.MeshLambertMaterial( { color: 0x020202 } )
-				);
-				post.position.y = sphereHeight * 0.5 - sphereRadius * 0.05 * 1.2;
-				scene.add( post );
-
-				const box = new THREE.Mesh( new THREE.BoxGeometry( sphereHeight * 0.5, sphereHeight * 0.1, sphereHeight * 0.5 ), post.material );
-				box.position.y = sphereHeight * 0.05 * 0.5;
-				scene.add( box );
-
-				const rayDirection = new THREE.Vector3();
-				let rayLength = 0;
-				const vec1 = new THREE.Vector3();
-				const vec2 = new THREE.Vector3();
-
-				scene.userData.rayParams = {
-
-					sourceOffset: sphereMesh.position,
-					destOffset: new THREE.Vector3( sphereRadius, 0, 0 ).add( sphereMesh.position ),
-					radius0: 4,
-					radius1: 4,
-					radius0Factor: 0.82,
-					minRadius: 2.5,
-					maxIterations: 6,
-					isEternal: true,
-
-					timeScale: 0.6,
-					propagationTimeFactor: 0.15,
-					vanishingTimeFactor: 0.87,
-					subrayPeriod: 0.8,
-					ramification: 5,
-					recursionProbability: 0.8,
-
-					roughness: 0.85,
-					straightness: 0.7,
-
-					onSubrayCreation: function ( segment, parentSubray, childSubray, lightningStrike ) {
-
-						lightningStrike.subrayConePosition( segment, parentSubray, childSubray, 0.6, 0.9, 0.7 );
-
-						// THREE.Sphere projection
-
-						vec1.subVectors( childSubray.pos1, lightningStrike.rayParameters.sourceOffset );
-						vec2.set( 0, 0, 0 );
-
-						if ( lightningStrike.randomGenerator.random() < 0.7 ) {
-
-							vec2.copy( rayDirection ).multiplyScalar( rayLength * 1.0865 );
-
-						}
-
-						vec1.add( vec2 ).setLength( rayLength );
-						childSubray.pos1.addVectors( vec1, lightningStrike.rayParameters.sourceOffset );
-
-					}
-
-				};
-
-				let lightningStrike;
-				let lightningStrikeMesh;
-				const outlineMeshArray = [];
-
-				scene.userData.recreateRay = function () {
-
-					if ( lightningStrikeMesh ) {
-
-						scene.remove( lightningStrikeMesh );
-
-					}
-
-					lightningStrike = new LightningStrike( scene.userData.rayParams );
-					lightningStrikeMesh = new THREE.Mesh( lightningStrike, scene.userData.lightningMaterial );
-
-					outlineMeshArray.length = 0;
-					outlineMeshArray.push( lightningStrikeMesh );
-					outlineMeshArray.push( spherePlasma );
-
-					scene.add( lightningStrikeMesh );
-
-				};
-
-				scene.userData.recreateRay();
-
-				// Compose rendering
-
-				composer.passes = [];
-
-				composer.addPass( new RenderPass( ballScene, scene.userData.camera ) );
-
-				const rayPass = new RenderPass( scene, scene.userData.camera );
-				rayPass.clear = false;
-				composer.addPass( rayPass );
-
-				const outlinePass = createOutline( scene, outlineMeshArray, scene.userData.outlineColor );
-
-				scene.userData.render = function ( time ) {
-
-					rayDirection.subVectors( lightningStrike.rayParameters.destOffset, lightningStrike.rayParameters.sourceOffset );
-					rayLength = rayDirection.length();
-					rayDirection.normalize();
-
-					lightningStrike.update( time );
-
-					controls.update();
-
-					outlinePass.enabled = scene.userData.outlineEnabled;
-
-					composer.render();
-
-				};
-
-				// Controls
-
-				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
-				controls.target.copy( sphereMesh.position );
-				controls.enableDamping = true;
-				controls.dampingFactor = 0.05;
-
-				// THREE.Sphere mouse raycasting
-
-				container.style.touchAction = 'none';
-				container.addEventListener( 'pointermove', onPointerMove );
-
-				function onPointerMove( event ) {
-
-					if ( event.isPrimary === false ) return;
-
-					mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-					mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-					checkIntersection();
-
-				}
-
-				const intersection = new THREE.Vector3();
-
-				function checkIntersection() {
-
-					raycaster.setFromCamera( mouse, scene.userData.camera );
-
-					const result = raycaster.ray.intersectSphere( sphere, intersection );
-
-					if ( result !== null ) {
-
-						lightningStrike.rayParameters.destOffset.copy( intersection );
-
-					}
-
-				}
-
-				return scene;
-
-			}
-
-			//
-
-			function createStormScene() {
-
-				const scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
-
-				scene.userData.canGoBackwardsInTime = false;
-
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 20, 10000 );
-
-				// Lights
-
-				scene.add( new THREE.AmbientLight( 0x444444 ) );
-
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				light1.position.set( 1, 1, 1 );
-				scene.add( light1 );
-
-				const posLight = new THREE.PointLight( 0x00ffff );
-				posLight.position.set( 0, 100, 0 );
-				scene.add( posLight );
-
-				// Ground
-
-				const GROUND_SIZE = 1000;
-
-				scene.userData.camera.position.set( 0, 0.2, 1.6 ).multiplyScalar( GROUND_SIZE * 0.5 );
-
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( GROUND_SIZE, GROUND_SIZE ), new THREE.MeshLambertMaterial( { color: 0x072302 } ) );
-				ground.rotation.x = - Math.PI * 0.5;
-				scene.add( ground );
-
-				// Storm
-
-				scene.userData.lightningColor = new THREE.Color( 0xB0FFFF );
-				scene.userData.outlineColor = new THREE.Color( 0x00FFFF );
-
-				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );
-
-				const rayDirection = new THREE.Vector3( 0, - 1, 0 );
-				let rayLength = 0;
-				const vec1 = new THREE.Vector3();
-				const vec2 = new THREE.Vector3();
-
-				scene.userData.rayParams = {
-
-					radius0: 1,
-					radius1: 0.5,
-					minRadius: 0.3,
-					maxIterations: 7,
-
-					timeScale: 0.15,
-					propagationTimeFactor: 0.2,
-					vanishingTimeFactor: 0.9,
-					subrayPeriod: 4,
-					subrayDutyCycle: 0.6,
-
-					maxSubrayRecursion: 3,
-					ramification: 3,
-					recursionProbability: 0.4,
-
-					roughness: 0.85,
-					straightness: 0.65,
-
-					onSubrayCreation: function ( segment, parentSubray, childSubray, lightningStrike ) {
-
-						lightningStrike.subrayConePosition( segment, parentSubray, childSubray, 0.6, 0.6, 0.5 );
-
-						// Plane projection
-
-						rayLength = lightningStrike.rayParameters.sourceOffset.y;
-						vec1.subVectors( childSubray.pos1, lightningStrike.rayParameters.sourceOffset );
-						const proj = rayDirection.dot( vec1 );
-						vec2.copy( rayDirection ).multiplyScalar( proj );
-						vec1.sub( vec2 );
-						const scale = proj / rayLength > 0.5 ? rayLength / proj : 1;
-						vec2.multiplyScalar( scale );
-						vec1.add( vec2 );
-						childSubray.pos1.addVectors( vec1, lightningStrike.rayParameters.sourceOffset );
-
-					}
-
-				};
-
-				// Black star mark
-				const starVertices = [];
-				const prevPoint = new THREE.Vector3( 0, 0, 1 );
-				const currPoint = new THREE.Vector3();
-				for ( let i = 1; i <= 16; i ++ ) {
-
-					currPoint.set( Math.sin( 2 * Math.PI * i / 16 ), 0, Math.cos( 2 * Math.PI * i / 16 ) );
-
-					if ( i % 2 === 1 ) {
-
-						currPoint.multiplyScalar( 0.3 );
-
-					}
-
-					starVertices.push( 0, 0, 0 );
-					starVertices.push( prevPoint.x, prevPoint.y, prevPoint.z );
-					starVertices.push( currPoint.x, currPoint.y, currPoint.z );
-
-					prevPoint.copy( currPoint );
-
-				}
-
-				const starGeometry = new THREE.BufferGeometry();
-				starGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( starVertices, 3 ) );
-				const starMesh = new THREE.Mesh( starGeometry, new THREE.MeshBasicMaterial( { color: 0x020900 } ) );
-				starMesh.scale.multiplyScalar( 6 );
-
-				//
-
-				const storm = new LightningStorm( {
-
-					size: GROUND_SIZE,
-					minHeight: 90,
-					maxHeight: 200,
-					maxSlope: 0.6,
-					maxLightnings: 8,
-
-					lightningParameters: scene.userData.rayParams,
-
-					lightningMaterial: scene.userData.lightningMaterial,
-
-					onLightningDown: function ( lightning ) {
-
-						// Add black star mark at ray strike
-						const star1 = starMesh.clone();
-						star1.position.copy( lightning.rayParameters.destOffset );
-						star1.position.y = 0.05;
-						star1.rotation.y = 2 * Math.PI * Math.random();
-						scene.add( star1 );
-
-					}
-
-				} );
-
-				scene.add( storm );
-
-				// Compose rendering
-
-				composer.passes = [];
-				composer.addPass( new RenderPass( scene, scene.userData.camera ) );
-				createOutline( scene, storm.lightningsMeshes, scene.userData.outlineColor );
-
-				// Controls
-
-				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
-				controls.target.y = GROUND_SIZE * 0.05;
-				controls.enableDamping = true;
-				controls.dampingFactor = 0.05;
-
-				scene.userData.render = function ( time ) {
-
-					storm.update( time );
-
-					controls.update();
-
-					if ( scene.userData.outlineEnabled ) {
-
-						composer.render();
-
-					}	else {
-
-						renderer.render( scene, scene.userData.camera );
-
-					}
-
-				};
-
-				return scene;
-
-			}
-
-		</script>
-
-	</body>
-</html>