I wanted to create a lightning strike effect in threejs. And I learnt it from some nice video tutorials but
the threejs lightning strike examples page they showed in the video seems to be removed (i cannot find it)
if i open that same example from another website (http://www.yanhuangxueyuan.com/threejs/examples/webgl_lightningstrike.html ) & copy its code, vite says that it could not find any LightningGeometry.js in addons
not a single javascript file succeds to load if i use the standalone version of that example (that is if i copy the entire code of that example, which uses cdn & works perfectly)
What to do? How do i import the LightningStrike? I really need it. And how can that website import & use all required libraries of threejs when i with the exact same code cannot?
1 Like
Disclaimer: I don’t feel confident in answering this question, but I will try (but do not trust what I say).
According to the demoduler, LightningStrike.js exists up to Three.js r152. Since r153 it is not included as an addon anymore.
The site that you mention does not load Three.js and its addons from external CDN. It hosts local copies. For example, the LightningStrike file is here http://www.yanhuangxueyuan.com/threejs/examples/jsm/geometries/LightningStrike.js
If you clone the site, but do not clone all addons, then the browser should complain about missing files.
So:
If your project loads JS files from a local folders, you must have all addons locally too (bundled or not bundled).
If your project loads JS files from CDN, then use r152 or earlier.
This is all I can think of. I’m afraid I cannot help any further on this topic. Good luck.
1 Like
You could also use the three-stdlib from npm which includes the Lighningstrike Geometry as an export.
JS file as of now is here in their GitHub:
import {
BufferGeometry,
DynamicDrawUsage,
Float32BufferAttribute,
MathUtils,
Uint32BufferAttribute,
Vector3,
} from 'three'
import { SimplexNoise } from '../math/SimplexNoise'
/**
* @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 );
* ...
show original
.d.ts file here:
import { BufferGeometry, Vector3 } from 'three'
export interface RandomGenerator {
random(): number
getSeed(): number
setSeed(seed: number): void
}
export interface LightningSegment {
iteration: number
pos0: Vector3
pos1: Vector3
linPos0: Vector3
linPos1: Vector3
up0: Vector3
up1: Vector3
radius0: number
radius1: number
fraction0: number
fraction1: number
show original
in case you want to use them without npm.